diff --git a/src/module/_global/bin/type_global.ts b/src/module/_global/bin/type_global.ts
new file mode 100644
index 0000000..c85b9ea
--- /dev/null
+++ b/src/module/_global/bin/type_global.ts
@@ -0,0 +1,8 @@
+export interface IGlobalTema {
+    utama: string
+    bgUtama: string
+    bgIcon: string
+    bgFiturHome: string
+    bgFiturDivisi: string
+    bgTotalKegiatan: string
+}
\ No newline at end of file
diff --git a/src/module/_global/bin/val_global.ts b/src/module/_global/bin/val_global.ts
index 4a3b14e..b6752cc 100644
--- a/src/module/_global/bin/val_global.ts
+++ b/src/module/_global/bin/val_global.ts
@@ -1,4 +1,5 @@
 import { hookstate } from "@hookstate/core"
+import { IGlobalTema } from './type_global';
 
 export const pwd_key_config = "fchgvjknlmdfnbvghhujlaknsdvjbhknlkmsdbdyu567t8y9u30r4587638y9uipkoeghjvuyi89ipkoefmnrjbhtiu4or9ipkoemnjfbhjiuoijdklnjhbviufojkejnshbiuojijknehgruyu"
 export const globalRole = hookstate<string>('')
@@ -9,4 +10,13 @@ export const DIR = {
    village: "cm0xhb91o0007acbbkx8rk8hj",
    user: "cm0x8dbwn0005bp5tgmfcthzw",
 
-}
\ No newline at end of file
+}
+
+export const TEMA = hookstate<IGlobalTema>({
+   utama: "#19345E",
+   bgUtama: "#F4F9FD",
+   bgIcon: "#384288",
+   bgFiturHome: "#FCAA4B",
+   bgFiturDivisi: "#FCAA4B",
+   bgTotalKegiatan: "#DCEED8"
+})
\ No newline at end of file
diff --git a/src/module/_global/components/skeleton_detail_discussion_comment.tsx b/src/module/_global/components/skeleton_detail_discussion_comment.tsx
index 609b805..fdc1b79 100644
--- a/src/module/_global/components/skeleton_detail_discussion_comment.tsx
+++ b/src/module/_global/components/skeleton_detail_discussion_comment.tsx
@@ -1,6 +1,9 @@
+import { useHookstate } from "@hookstate/core";
 import { ActionIcon, Box, Divider, Group, Skeleton } from "@mantine/core";
+import { TEMA } from "../bin/val_global";
 
 export default function SkeletonDetailDiscussionComment() {
+  const tema = useHookstate(TEMA)
   return (
     <>
       <Group justify='space-between'>
@@ -8,7 +11,7 @@ export default function SkeletonDetailDiscussionComment() {
           <Box>
             <ActionIcon
               variant="light"
-              bg={"#DCEED8"}
+              bg={tema.get().bgTotalKegiatan}
               size={50}
               radius={100}
               aria-label="icon"
diff --git a/src/module/_global/components/skeleton_detail_discussion_member.tsx b/src/module/_global/components/skeleton_detail_discussion_member.tsx
index f3119bb..ba93282 100644
--- a/src/module/_global/components/skeleton_detail_discussion_member.tsx
+++ b/src/module/_global/components/skeleton_detail_discussion_member.tsx
@@ -1,7 +1,10 @@
+import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Flex, Group, Skeleton } from '@mantine/core';
 import React from 'react';
+import { TEMA } from '../bin/val_global';
 
 export default function SkeletonDetailDiscussionMember() {
+  const tema = useHookstate(TEMA)
   return (
     <>
       <Flex justify="space-between" align="center" mt={20}>
@@ -9,7 +12,7 @@ export default function SkeletonDetailDiscussionMember() {
           <Box>
             <ActionIcon
               variant="light"
-              bg={"#DCEED8"}
+              bg={tema.get().bgTotalKegiatan}
               size={50}
               radius={100}
               aria-label="icon"
diff --git a/src/module/_global/components/skeleton_detail_list_tugas_task.tsx b/src/module/_global/components/skeleton_detail_list_tugas_task.tsx
index 07e3fcd..a6eee3f 100644
--- a/src/module/_global/components/skeleton_detail_list_tugas_task.tsx
+++ b/src/module/_global/components/skeleton_detail_list_tugas_task.tsx
@@ -1,7 +1,10 @@
+import { useHookstate } from '@hookstate/core';
 import { Box, Center, Grid, Group, SimpleGrid, Skeleton } from '@mantine/core';
 import React from 'react';
+import { TEMA } from '../bin/val_global';
 
 export default function SkeletonDetailListTugasTask() {
+  const tema = useHookstate(TEMA)
   return (
     <Grid>
     <Grid.Col span={"auto"}>
@@ -13,7 +16,7 @@ export default function SkeletonDetailListTugasTask() {
       <Box
         style={{
           borderRadius: 10,
-          border: `1px solid ${"#D6D8F6"}`,
+          border: `1px solid ${tema.get().bgTotalKegiatan}`,
           padding: 10,
         }}
       >
@@ -32,7 +35,7 @@ export default function SkeletonDetailListTugasTask() {
               h={45}
               style={{
                 borderRadius: 10,
-                border: `1px solid ${"#D6D8F6"}`,
+                border: `1px solid ${tema.get().bgTotalKegiatan}`,
               }}
             >
               <Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
@@ -46,7 +49,7 @@ export default function SkeletonDetailListTugasTask() {
               h={45}
               style={{
                 borderRadius: 10,
-                border: `1px solid ${"#D6D8F6"}`,
+                border: `1px solid ${tema.get().bgTotalKegiatan}`,
               }}
             >
               <Skeleton ml={5} width={"80%"} height={20} radius={"md"} />
diff --git a/src/module/_global/components/skeleton_detail_profile.tsx b/src/module/_global/components/skeleton_detail_profile.tsx
index 818a3b6..097cccd 100644
--- a/src/module/_global/components/skeleton_detail_profile.tsx
+++ b/src/module/_global/components/skeleton_detail_profile.tsx
@@ -1,14 +1,17 @@
+import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Group, Skeleton } from '@mantine/core';
 import React from 'react';
+import { TEMA } from '../bin/val_global';
 
 export default function SkeletonDetailProfile() {
+    const tema = useHookstate(TEMA)
     return (
         <Box p={20}>
             <Group justify="space-between" grow py={5}>
                 <Group>
                     <ActionIcon
                         variant="light"
-                        bg={"#DCEED8"}
+                        bg={tema.get().bgTotalKegiatan}
                         size={28}
                         radius={100}
                         aria-label="icon"
@@ -27,7 +30,7 @@ export default function SkeletonDetailProfile() {
                 <Group>
                     <ActionIcon
                         variant="light"
-                        bg={"#DCEED8"}
+                        bg={tema.get().bgTotalKegiatan}
                         size={28}
                         radius={100}
                         aria-label="icon"
@@ -46,7 +49,7 @@ export default function SkeletonDetailProfile() {
                 <Group>
                     <ActionIcon
                         variant="light"
-                        bg={"#DCEED8"}
+                        bg={tema.get().bgTotalKegiatan}
                         size={28}
                         radius={100}
                         aria-label="icon"
@@ -65,7 +68,7 @@ export default function SkeletonDetailProfile() {
                 <Group>
                     <ActionIcon
                         variant="light"
-                        bg={"#DCEED8"}
+                        bg={tema.get().bgTotalKegiatan}
                         size={28}
                         radius={100}
                         aria-label="icon"
diff --git a/src/module/_global/components/skeleton_single.tsx b/src/module/_global/components/skeleton_single.tsx
index bb36881..6486998 100644
--- a/src/module/_global/components/skeleton_single.tsx
+++ b/src/module/_global/components/skeleton_single.tsx
@@ -1,13 +1,16 @@
+import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Group, Skeleton } from '@mantine/core';
 import React from 'react';
+import { TEMA } from '../bin/val_global';
 
 export default function SkeletonSingle() {
+    const tema = useHookstate(TEMA)
     return (
         <Box pt={20}>
             <Group
                 align="center"
                 style={{
-                    border: `1px solid ${"#DCEED8"}`,
+                    border: `1px solid ${tema.get().bgTotalKegiatan}`,
                     padding: 10,
                     borderRadius: 10,
                     cursor: "pointer",
@@ -16,7 +19,7 @@ export default function SkeletonSingle() {
                 <Box>
                     <ActionIcon
                         variant="light"
-                        bg={"#DCEED8"}
+                        bg={tema.get().bgTotalKegiatan}
                         size={50}
                         radius={100}
                         aria-label="icon"
diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts
index 228b950..c29f0b3 100644
--- a/src/module/_global/index.ts
+++ b/src/module/_global/index.ts
@@ -1,5 +1,5 @@
 import prisma from "./bin/prisma";
-import { DIR, globalRole, pwd_key_config } from "./bin/val_global";
+import { DIR, globalRole, pwd_key_config, TEMA } from "./bin/val_global";
 import SkeletonDetailDiscussionComment from "./components/skeleton_detail_discussion_comment";
 import SkeletonDetailDiscussionMember from "./components/skeleton_detail_discussion_member";
 import SkeletonDetailListTugasTask from "./components/skeleton_detail_list_tugas_task";
@@ -41,3 +41,4 @@ export { NoZoom }
 export { funUploadFile }
 export { funDeleteFile }
 export { DIR }
+export { TEMA }
diff --git a/src/module/_global/layout/layout_drawer.tsx b/src/module/_global/layout/layout_drawer.tsx
index 20052b4..31a31f2 100644
--- a/src/module/_global/layout/layout_drawer.tsx
+++ b/src/module/_global/layout/layout_drawer.tsx
@@ -1,11 +1,14 @@
 import { Box, Drawer, Text } from '@mantine/core';
 import React from 'react';
 import { WARNA } from '../fun/WARNA';
+import { useHookstate } from '@hookstate/core';
+import { TEMA } from '../bin/val_global';
 
 export default function LayoutDrawer({ opened, onClose, title, children, size }: { children: React.ReactNode, opened: boolean, size?: string, onClose: () => void, title: React.ReactNode }) {
+  const tema = useHookstate(TEMA)
   return (
     <Box>
-      <Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '40%'}
+      <Drawer opened={opened} title={<Text c={tema.get().utama} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '40%'}
         styles={{
           content: {
             backgroundColor: "white",
diff --git a/src/module/_global/layout/layout_icon_back.tsx b/src/module/_global/layout/layout_icon_back.tsx
index 5d4e66a..d4658fa 100644
--- a/src/module/_global/layout/layout_icon_back.tsx
+++ b/src/module/_global/layout/layout_icon_back.tsx
@@ -5,9 +5,12 @@ import React from 'react';
 import { HiChevronLeft } from 'react-icons/hi2';
 import { WARNA } from '../fun/WARNA';
 import _ from 'lodash';
+import { useHookstate } from '@hookstate/core';
+import { TEMA } from '../bin/val_global';
 
 function LayoutIconBack({ back }: { back?: string }) {
   const router = useRouter()
+  const tema = useHookstate(TEMA)
   return (
     <Box>
       <ActionIcon variant="light" onClick={() => {
@@ -17,7 +20,7 @@ function LayoutIconBack({ back }: { back?: string }) {
           return router.back()
         }
 
-      }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+      }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
         <HiChevronLeft size={20} color='white' />
       </ActionIcon>
     </Box>
diff --git a/src/module/_global/layout/layout_login.tsx b/src/module/_global/layout/layout_login.tsx
index 101f7ae..127541e 100644
--- a/src/module/_global/layout/layout_login.tsx
+++ b/src/module/_global/layout/layout_login.tsx
@@ -1,17 +1,20 @@
 import { Image, rem, Stack, Title } from "@mantine/core";
 import React from "react";
 import { WARNA } from "../fun/WARNA";
+import { useHookstate } from "@hookstate/core";
+import { TEMA } from "../bin/val_global";
 
 export default function LayoutLogin({
   children,
 }: {
   children: React.ReactNode;
-}) {
+  }) {
+    const tema = useHookstate(TEMA)
   return (
     <>
       <Stack justify="center" align="center" pt={rem(50)}>
         <Image w={102} h={103} src={"/assets/img/logo/logo-1.png"} alt="logo" />
-        <Title c={WARNA.biruTua} order={4}>
+        <Title c={tema.get().utama} order={4}>
           PERBEKEL DARMASABA
         </Title>
       </Stack>
diff --git a/src/module/_global/layout/layout_modal.tsx b/src/module/_global/layout/layout_modal.tsx
index 93f0e44..d364584 100644
--- a/src/module/_global/layout/layout_modal.tsx
+++ b/src/module/_global/layout/layout_modal.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Group, Modal, Text } from '@mantine/core';
+import { Box, Button, Flex, Group, Modal, SimpleGrid, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import { BsQuestionCircleFill } from 'react-icons/bs';
 import { WARNA } from '../fun/WARNA';
@@ -18,11 +18,14 @@ export default function LayoutModal({ opened, onClose, description, onYes }: { o
       <Flex justify={"center"} align={"center"} direction={"column"}>
         <BsQuestionCircleFill size={100} color="red" />
         <Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
-        <Group mt={30} w={'100%'} justify='center'>
-          <Button w={"47%"} size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
-          <Button w={"47%"} size="lg" radius={'xl'} bg={WARNA.biruTua} onClick={() => onYes(true)}>YA</Button>
-        </Group>
       </Flex>
+        <SimpleGrid
+        cols={{ base: 1, sm: 2, lg: 2 }}
+        mt={30}
+        >
+          <Button fullWidth size="lg" radius={'xl'} bg={'#F1C1CF'} c={'#D30B30'} onClick={() => onYes(false)}>TIDAK</Button>
+          <Button fullWidth size="lg" radius={'xl'} bg={WARNA.biruTua} onClick={() => onYes(true)}>YA</Button>
+        </SimpleGrid>
     </Modal>
   );
 }
diff --git a/src/module/_global/layout/layout_navbar_home.tsx b/src/module/_global/layout/layout_navbar_home.tsx
index 84bcd5e..35d401b 100644
--- a/src/module/_global/layout/layout_navbar_home.tsx
+++ b/src/module/_global/layout/layout_navbar_home.tsx
@@ -1,10 +1,14 @@
+"use client"
 import { Box, Grid, Group } from '@mantine/core';
 import React from 'react';
 import { WARNA } from '../fun/WARNA';
+import { useHookstate } from '@hookstate/core';
+import { TEMA } from '../bin/val_global';
 
 export const LayoutNavbarHome = ({ children }: { children: React.ReactNode }) => {
+  const tema = useHookstate(TEMA)
   return (
-      <Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={WARNA.biruTua}
+      <Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={tema.get().utama}
         style={{
           borderBottomLeftRadius: 20,
           borderBottomRightRadius: 20,
diff --git a/src/module/_global/layout/layout_navbar_new.tsx b/src/module/_global/layout/layout_navbar_new.tsx
index 15e33fa..bd2059a 100644
--- a/src/module/_global/layout/layout_navbar_new.tsx
+++ b/src/module/_global/layout/layout_navbar_new.tsx
@@ -4,10 +4,13 @@ import React from 'react';
 import { WARNA } from '../fun/WARNA';
 import LayoutIconBack from './layout_icon_back';
 import _ from 'lodash';
+import { useHookstate } from '@hookstate/core';
+import { TEMA } from '../bin/val_global';
 
 export const LayoutNavbarNew = ({ back, state, title, menu }: { back?: string, title: string, menu: React.ReactNode, state?: React.ReactNode }) => {
+   const tema = useHookstate(TEMA)
    return (
-      <Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={WARNA.biruTua}
+      <Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={tema.get().utama}
          style={{
             borderBottomLeftRadius: 20,
             borderBottomRightRadius: 20,
@@ -29,7 +32,7 @@ export const LayoutNavbarNew = ({ back, state, title, menu }: { back?: string, t
                </Grid.Col>
             }
             <Grid.Col span={8}>
-               <Title c={WARNA.bgWhite} ta={'center'} order={5} lineClamp={1}>{_.startCase(title)}</Title>
+               <Title c={tema.get().bgUtama} ta={'center'} order={5} lineClamp={1}>{_.startCase(title)}</Title>
             </Grid.Col>
             <Grid.Col span="auto">
                <Group justify='flex-end'>
diff --git a/src/module/_global/view/view_filter.tsx b/src/module/_global/view/view_filter.tsx
index 85e9c57..b15fb72 100644
--- a/src/module/_global/view/view_filter.tsx
+++ b/src/module/_global/view/view_filter.tsx
@@ -8,6 +8,8 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { useShallowEffect } from "@mantine/hooks";
 import toast from "react-hot-toast";
+import { useHookstate } from "@hookstate/core";
+import { TEMA } from "../bin/val_global";
 
 export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
    const [selectedFilter, setSelectedFilter] = useState<any>('');
@@ -15,6 +17,7 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
    const [loading, setLoading] = useState(true)
    const searchParams = useSearchParams()
    const group = searchParams.get('group')
+   const tema = useHookstate(TEMA)
 
 
    async function getAllGroupFilter() {
@@ -84,13 +87,13 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             <Button
                fullWidth
                radius={100}
                size="lg"
-               color={WARNA.biruTua}
+               color={tema.get().utama}
                onClick={() => {
                   router.push(`/${linkFilter}?group=` + selectedFilter)
                }}
diff --git a/src/module/announcement/ui/create_announcement.tsx b/src/module/announcement/ui/create_announcement.tsx
index 325b715..128f393 100644
--- a/src/module/announcement/ui/create_announcement.tsx
+++ b/src/module/announcement/ui/create_announcement.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { useHookstate } from "@hookstate/core";
 import { Avatar, Box, Button, Flex, Group, rem, Stack, Text, Textarea, TextInput } from "@mantine/core";
@@ -21,6 +21,7 @@ export default function CreateAnnouncement() {
    const memberValue = memberGroup.get() as GroupData[]
    const [selectedFiles, setSelectedFiles] = useState<any>([])
    const router = useRouter()
+   const tema = useHookstate(TEMA)
 
 
    const [isChooseMember, setIsChooseMember] = useState(false)
@@ -86,9 +87,9 @@ export default function CreateAnnouncement() {
                size="md" type="text" radius={10} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
                styles={{
                   input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
+                     color: tema.get().utama,
+                     borderRadius: tema.get().utama,
+                     borderColor: tema.get().utama,
                   },
                }}
                value={isData.title}
@@ -112,9 +113,9 @@ export default function CreateAnnouncement() {
                placeholder="Deskripsi Pengumuman"
                styles={{
                   input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
+                     color: tema.get().utama,
+                     borderRadius: tema.get().utama,
+                     borderColor: tema.get().utama,
                   },
                }}
                value={isData.desc}
@@ -131,7 +132,7 @@ export default function CreateAnnouncement() {
             />
             <Box pt={10}>
                <Group justify="space-between" style={{
-                  border: `1px solid ${WARNA.biruTua}`,
+                  border: `1px solid ${tema.get().utama}`,
                   padding: 10,
                   borderRadius: 10
                }}
@@ -144,7 +145,7 @@ export default function CreateAnnouncement() {
                </Group>
             </Box>
             <Box pt={20} mb={60}>
-               <Text c={WARNA.biruTua} mb={10}>Divisi Terpilih</Text>
+               <Text c={tema.get().utama} mb={10}>Divisi Terpilih</Text>
                {(memberGroup.length === 0) ? (
                   <Text c="dimmed" ta={"center"} fs={"italic"}>Belum ada anggota</Text>
                ) : memberGroup.get().map((v: any, i: any) => {
@@ -166,11 +167,11 @@ export default function CreateAnnouncement() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             <Button
                c={"white"}
-               bg={WARNA.biruTua}
+               bg={tema.get().utama}
                size="lg"
                radius={30}
                fullWidth
diff --git a/src/module/announcement/ui/create_users_announcement.tsx b/src/module/announcement/ui/create_users_announcement.tsx
index 319a8d4..b4c1037 100644
--- a/src/module/announcement/ui/create_users_announcement.tsx
+++ b/src/module/announcement/ui/create_users_announcement.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
 import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
@@ -23,6 +23,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
   const [isData, setIsData] = useState<GroupData[]>([])
   const memberGroup = useHookstate(globalMemberAnnouncement)
   const [loading, setLoading] = useState(false)
+  const tema = useHookstate(TEMA)
 
   const handleCheck = (groupId: string, divisionId: string) => {
     const newChecked = { ...checked };
@@ -126,17 +127,17 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
             Pilih Semua
           </Text>
         </Group>
-        {loading ? 
+        {loading ?
           Array(6)
-          .fill(null)
-          .map((_, i) => (
-             <Box key={i}>
-                <Skeleton mt={20} h={20}/>
-                <Skeleton mt={20} h={20} ml={20}/>
-                <Skeleton mt={20} h={20} ml={20}/>
-                <Skeleton mt={20} h={20} ml={20}/>
-             </Box>
-          ))
+            .fill(null)
+            .map((_, i) => (
+              <Box key={i}>
+                <Skeleton mt={20} h={20} />
+                <Skeleton mt={20} h={20} ml={20} />
+                <Skeleton mt={20} h={20} ml={20} />
+                <Skeleton mt={20} h={20} ml={20} />
+              </Box>
+            ))
           :
           isData.map((item) => (
             <Stack mb={30} key={item.id}>
@@ -163,7 +164,7 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
                 <Box key={division.id}>
                   <Group onClick={() => handleCheck(item.id, division.id)} justify='space-between' align='center'>
                     <Box w={{
-                     base: isMobile ? 230 : 280,
+                      base: isMobile ? 230 : 280,
                       xl: 430
                     }}>
                       <Text truncate="end" pl={20}>
@@ -194,11 +195,11 @@ export default function CreateUsersAnnouncement({ onClose }: { onClose: (val: an
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           color="white"
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
 
           size="lg"
           radius={30}
diff --git a/src/module/announcement/ui/drawer_announcement.tsx b/src/module/announcement/ui/drawer_announcement.tsx
index 3422417..c5847d7 100644
--- a/src/module/announcement/ui/drawer_announcement.tsx
+++ b/src/module/announcement/ui/drawer_announcement.tsx
@@ -1,4 +1,5 @@
-import { WARNA } from '@/module/_global';
+import { TEMA, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -7,6 +8,7 @@ import { RiFilter2Line } from "react-icons/ri";
 
 export default function DrawerAnnouncement() {
    const router = useRouter()
+   const tema = useHookstate(TEMA)
 
    return (
       <Box>
@@ -23,10 +25,10 @@ export default function DrawerAnnouncement() {
                   }}
                >
                   <Box>
-                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                     <IoAddCircle size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Tambah Pengumuman</Text>
+                     <Text c={tema.get().utama} ta='center'>Tambah Pengumuman</Text>
                   </Box>
                </Flex>
             </SimpleGrid>
diff --git a/src/module/announcement/ui/drawer_detail_announcement.tsx b/src/module/announcement/ui/drawer_detail_announcement.tsx
index 057a35a..b2a5136 100644
--- a/src/module/announcement/ui/drawer_detail_announcement.tsx
+++ b/src/module/announcement/ui/drawer_detail_announcement.tsx
@@ -1,4 +1,4 @@
-import { WARNA } from '@/module/_global';
+import { TEMA, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { Box, Flex, SimpleGrid, Stack, Text, } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
@@ -6,11 +6,13 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { FaPencil, FaTrash } from 'react-icons/fa6';
 import { funDeleteAnnouncement } from '../lib/api_announcement';
+import { useHookstate } from '@hookstate/core';
 
 export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (val: boolean) => void }) {
    const router = useRouter()
    const [isOpen, setOpen] = useState(false)
    const param = useParams<{ id: string }>()
+   const tema = useHookstate(TEMA)
 
    async function onTrue(val: boolean) {
       if (val) {
@@ -36,10 +38,10 @@ export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (va
             >
                <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => setOpen(true)}>
                   <Box>
-                     <FaTrash size={30} color={WARNA.biruTua} />
+                     <FaTrash size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Hapus</Text>
+                     <Text c={tema.get().utama} ta='center'>Hapus</Text>
                   </Box>
                </Flex>
 
@@ -47,10 +49,10 @@ export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (va
                   router.push('edit/' + param.id)
                }} style={{ cursor: 'pointer' }}>
                   <Box>
-                     <FaPencil size={30} color={WARNA.biruTua} />
+                     <FaPencil size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                     <Text c={tema.get().utama} ta='center'>Edit</Text>
                   </Box>
                </Flex>
             </SimpleGrid>
diff --git a/src/module/announcement/ui/edit_announcement.tsx b/src/module/announcement/ui/edit_announcement.tsx
index 7f68655..6bdd9f2 100644
--- a/src/module/announcement/ui/edit_announcement.tsx
+++ b/src/module/announcement/ui/edit_announcement.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Box, Button, Flex, Group, List, rem, Skeleton, Stack, Text, Textarea, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -20,6 +20,7 @@ export default function EditAnnouncement() {
    const param = useParams<{ id: string }>()
    const [loading, setLoading] = useState(true)
    const router = useRouter()
+   const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
       title: false,
       desc: false
@@ -132,9 +133,9 @@ export default function EditAnnouncement() {
                      size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      value={body.title}
@@ -158,9 +159,9 @@ export default function EditAnnouncement() {
                      placeholder="Deskripsi Pengumuman"
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      value={body.desc}
@@ -178,7 +179,7 @@ export default function EditAnnouncement() {
                   />
                   <Box pt={10}  w={"100%"}>
                      <Group justify="space-between" style={{
-                     border: `1px solid ${WARNA.biruTua}`,
+                     border: `1px solid ${tema.get().utama}`,
                      maxWidth: rem(550),
                         padding: 10,
                         borderRadius: 10
@@ -238,14 +239,14 @@ export default function EditAnnouncement() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             {loading ?
                <Skeleton height={40} radius={30} />
                :
                <Button
                   c={"white"}
-                  bg={WARNA.biruTua}
+                  bg={tema.get().utama}
                   size="lg"
                   radius={30}
                   fullWidth
diff --git a/src/module/announcement/ui/edit_choose_member.tsx b/src/module/announcement/ui/edit_choose_member.tsx
index e27162e..5f234d0 100644
--- a/src/module/announcement/ui/edit_choose_member.tsx
+++ b/src/module/announcement/ui/edit_choose_member.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
 import { funGetGroupDivision } from '@/module/group/lib/api_group';
 import { Box, Button, Divider, Flex, Group, rem, Skeleton, Stack, Text } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
@@ -23,6 +23,7 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
    const [isData, setIsData] = useState<GroupData[]>([])
    const memberGroup = useHookstate(globalMemberEditAnnouncement)
    const [loading, setLoading] = useState(true)
+   const tema = useHookstate(TEMA)
 
    const handleCheck = (groupId: string, divisionId: string) => {
       const newChecked = { ...checked };
@@ -195,14 +196,14 @@ export default function EditChooseMember({ onClose }: { onClose: (val: any) => v
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             {loading ?
                <Skeleton height={50} radius={30} />
                :
                <Button
                   color="white"
-                  bg={WARNA.biruTua}
+                  bg={tema.get().utama}
 
                   size="lg"
                   radius={30}
diff --git a/src/module/announcement/ui/list_announcement.tsx b/src/module/announcement/ui/list_announcement.tsx
index 865b5a7..a60ed6d 100644
--- a/src/module/announcement/ui/list_announcement.tsx
+++ b/src/module/announcement/ui/list_announcement.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { SkeletonSingle, WARNA } from '@/module/_global';
+import { SkeletonSingle, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
@@ -10,6 +10,7 @@ import { IListDataAnnouncement } from '../lib/type_announcement';
 import { funGetAllAnnouncement } from '../lib/api_announcement';
 import toast from 'react-hot-toast';
 import { funGetAllGroup, IDataGroup } from '@/module/group';
+import { useHookstate } from '@hookstate/core';
 
 
 export default function ListAnnouncement() {
@@ -17,6 +18,7 @@ export default function ListAnnouncement() {
    const [searchQuery, setSearchQuery] = useState('')
    const router = useRouter()
    const [loading, setLoading] = useState(true);
+   const tema = useHookstate(TEMA)
 
    const fetchData = async () => {
       try {
@@ -46,9 +48,9 @@ export default function ListAnnouncement() {
          <TextInput
             styles={{
                input: {
-                  color: WARNA.biruTua,
-                  borderRadius: WARNA.biruTua,
-                  borderColor: WARNA.biruTua,
+                  color: tema.get().utama,
+                  borderRadius: tema.get().utama,
+                  borderColor: tema.get().utama,
                },
             }}
             size="md"
@@ -77,31 +79,31 @@ export default function ListAnnouncement() {
                            <Grid>
                               <Grid.Col span={2}>
                                  <Center>
-                                    <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
-                                       <TfiAnnouncement color={WARNA.biruTua} size={25} />
+                                    <ActionIcon variant="light" bg={tema.get().bgFiturHome} size={50} radius={100} aria-label="icon">
+                                       <TfiAnnouncement color={tema.get().utama} size={25} />
                                     </ActionIcon>
                                  </Center>
                               </Grid.Col>
                               <Grid.Col span={10}>
                                  <Grid onClick={() => {
                                     router.push(`/announcement/${v.id}`)
-                                 }}  mb={10}>
+                                 }} mb={10}>
                                     <Grid.Col span={{
                                        base: 7,
                                        xl: 8
                                     }}>
-                                       <Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.title}</Text>
+                                       <Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title}</Text>
                                     </Grid.Col>
                                     <Grid.Col span={{
                                        base: 5,
                                        xl: 4
                                     }}>
-                                       <Text ta={"end"} fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
+                                       <Text ta={"end"} fw={'lighter'} c={tema.get().utama} fz={13}>{v.createdAt}</Text>
                                     </Grid.Col>
                                  </Grid>
-                                 {/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
+                                 {/* <Text c={tema.get().utama} lineClamp={2}>{v.desc}</Text> */}
                                  <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
-                                    <Text c={WARNA.biruTua} onClick={() => {
+                                    <Text c={tema.get().utama} onClick={() => {
                                        router.push(`/announcement/${v.id}`)
                                     }} >{v.desc}</Text>
                                  </Spoiler>
diff --git a/src/module/announcement/ui/navbar_announcement.tsx b/src/module/announcement/ui/navbar_announcement.tsx
index 1fa1b99..cd6f983 100644
--- a/src/module/announcement/ui/navbar_announcement.tsx
+++ b/src/module/announcement/ui/navbar_announcement.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMenu } from "react-icons/hi";
@@ -9,13 +9,14 @@ import { useHookstate } from '@hookstate/core';
 export default function NavbarAnnouncement() {
   const [isOpen, setOpen] = useState(false)
   const roleLogin = useHookstate(globalRole)
+  const tema = useHookstate(TEMA)
 
   return (
     <>
       <LayoutNavbarNew back='/home' title='pengumuman'
         menu={
           (roleLogin.get() != "user"  && roleLogin.get() != "coadmin") ?
-            <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <ActionIcon onClick={() => setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
               <HiMenu size={20} color='white' />
             </ActionIcon>
             : <></>
diff --git a/src/module/announcement/ui/navbar_detail_announcement.tsx b/src/module/announcement/ui/navbar_detail_announcement.tsx
index 8a825a8..11b668c 100644
--- a/src/module/announcement/ui/navbar_detail_announcement.tsx
+++ b/src/module/announcement/ui/navbar_detail_announcement.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
 import { ActionIcon, Box } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import DrawerDetailAnnouncement from "./drawer_detail_announcement";
@@ -11,12 +11,13 @@ export default function NavbarDetailAnnouncement() {
    const [isOpenDrawer, setOpenDrawer] = useState(false)
    const router = useRouter()
    const roleLogin = useHookstate(globalRole)
+   const tema = useHookstate(TEMA)
    return (
       <Box>
          <LayoutNavbarNew back="/announcement/" title="Pengumuman"
             menu={
                (roleLogin.get() != "user" && roleLogin.get() != "coadmin") ?
-                  <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                  <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                      <HiMenu size={20} color='white' />
                   </ActionIcon>
                   : <></>
diff --git a/src/module/color_palette/ui/create_palette_color.tsx b/src/module/color_palette/ui/create_palette_color.tsx
index 45f6ab8..a0a4791 100644
--- a/src/module/color_palette/ui/create_palette_color.tsx
+++ b/src/module/color_palette/ui/create_palette_color.tsx
@@ -1,101 +1,156 @@
+
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, Stack, Text } from '@mantine/core';
+import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 
 export default function CreatePaletteColor() {
   const [isWarna, setWarna] = useState({
-    warnaSatu: '',
-    warnaDua: '',
-    warnaTiga: '',
-    warnaEmpat: '',
-
+    warnaUtama: '',
+    backgroundUtama: '',
+    backgroundIcon: '',
+    backgroundFiturHome: '',
+    backgroundFiturDivisi: '',
+    backgroundTotalKegiatan: '',
   })
   return (
     <Box>
-      <LayoutNavbarNew back='/color-palette' title='Tambah Palet' menu />
+      <LayoutNavbarNew back='/color-palette' title='Tambah Tema' menu />
       <Box p={20}>
         <Stack>
           <ColorInput
-            label={'Warna 1'}
+            label={'Warna Utama'}
             placeholder='Pilih Warna'
             required
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaSatu: color })
+              (color) => setWarna({ ...isWarna, warnaUtama: color })
             }
           />
           <ColorInput
-            label={'Warna 2'}
+            label={'Background Utama'}
             placeholder='Pilih Warna'
             required
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaDua: color })
+              (color) => setWarna({ ...isWarna, backgroundUtama: color })
             }
           />
           <ColorInput
-            label={'Warna 3'}
+            label={'Background Icon'}
             placeholder='Pilih Warna'
             required
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaTiga: color })
+              (color) => setWarna({ ...isWarna, backgroundIcon: color })
             }
           />
           <ColorInput
-            label={'Warna 4'}
+            label={'Background Fitur Home'}
             placeholder='Pilih Warna'
             required
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaEmpat: color })
+              (color) => setWarna({ ...isWarna, backgroundFiturHome: color })
+            }
+          />
+          <ColorInput
+            label={'Background Fitur Divisi'}
+            placeholder='Pilih Warna'
+            required
+            size="md"
+            radius="md"
+            onChangeEnd={
+              (color) => setWarna({ ...isWarna, backgroundFiturDivisi: color })
+            }
+          />
+          <ColorInput
+            label={'Background Total Kegiatan'}
+            placeholder='Pilih Warna'
+            required
+            size="md"
+            radius="md"
+            onChangeEnd={
+              (color) => setWarna({ ...isWarna, backgroundTotalKegiatan: color })
             }
           />
         </Stack>
-        <Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={30}>
-          <Box>
-            <Center>
-            <Box bg={isWarna.warnaSatu} w={50} h={50} style={{
-              borderRadius: 10
-            }} />
-            </Center>
-            {isWarna.warnaSatu.length == 0 ? "" :
-              <Pill size="xs" ta={"center"}>{isWarna.warnaSatu}</Pill>
-            }
-          </Box>
-          <Box>
-            <Box bg={isWarna.warnaDua} w={50} h={50} style={{
-              borderRadius: 10
-            }} />
-            {isWarna.warnaDua.length == 0 ? "" :
-              <Pill size="xs" ta={"center"}>{isWarna.warnaDua}</Pill>
-            }
-          </Box>
-          <Box>
-            <Box bg={isWarna.warnaTiga} w={50} h={50} style={{
-              borderRadius: 10
-            }} />
-            {isWarna.warnaTiga.length == 0 ? "" :
-              <Pill size="xs" ta={"center"}>{isWarna.warnaTiga}</Pill>
-            }
-          </Box>
-          <Box>
-            <Box bg={isWarna.warnaEmpat} w={50} h={50} style={{
-              borderRadius: 10
-            }} />
-            {isWarna.warnaEmpat.length == 0 ? "" :
-              <Pill size="xs" ta={"center"}>{isWarna.warnaEmpat}</Pill>
-            }
-          </Box>
+        <Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={20} mb={100}>
+          <SimpleGrid
+            cols={{ base: 3, sm: 3, lg: 6 }}
+            spacing={{ base: 10, sm: 'xl' }}
+            verticalSpacing={{ base: 'md', sm: 'xl' }}
+          >
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.warnaUtama} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.warnaUtama.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.warnaUtama}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundUtama} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundUtama.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundUtama}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundIcon} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundIcon.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundIcon}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundFiturHome} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundFiturHome.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundFiturHome}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundFiturDivisi} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundFiturDivisi.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundFiturDivisi}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundTotalKegiatan} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundTotalKegiatan.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundTotalKegiatan}</Pill>
+              }
+            </Flex>
+          </SimpleGrid>
+
         </Flex>
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-        maxWidth: rem(550),
+        maxWidth: rem(535),
         zIndex: 999,
         backgroundColor: `${WARNA.bgWhite}`,
       }}>
diff --git a/src/module/color_palette/ui/drawer_create_palette.tsx b/src/module/color_palette/ui/drawer_create_palette.tsx
index af040cf..ad0c12c 100644
--- a/src/module/color_palette/ui/drawer_create_palette.tsx
+++ b/src/module/color_palette/ui/drawer_create_palette.tsx
@@ -18,7 +18,7 @@ export default function DrawerCreatePalette() {
             <IoAddCircle size={30} color={WARNA.biruTua} />
           </Box>
           <Box>
-            <Text ta={'center'} c={WARNA.biruTua}>Tambah Palet</Text>
+            <Text ta={'center'} c={WARNA.biruTua}>Tambah Tema</Text>
           </Box>
         </Flex>
       </SimpleGrid>
diff --git a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
index 0783be1..8029fb7 100644
--- a/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
+++ b/src/module/color_palette/ui/drawer_palet_edit_end_default.tsx
@@ -1,5 +1,6 @@
-import { WARNA } from '@/module/_global';
+import { TEMA, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -9,9 +10,15 @@ import { IoAddCircle, IoColorPalette } from 'react-icons/io5';
 export default function DrawerPaletEditEndDefault() {
   const router = useRouter()
   const [isModal, setModal] = useState(false)
+  const tema = useHookstate(TEMA)
 
   function onCLose(val: boolean) {
     setModal(false)
+    // tema.set({
+    //   ...tema.get(),
+    //   utama:'#000'
+    // })
+    // router.refresh()
   }
   return (
     <Box>
@@ -25,7 +32,7 @@ export default function DrawerPaletEditEndDefault() {
             <IoColorPalette size={30} color={WARNA.biruTua} />
           </Box>
           <Box>
-            <Text ta={'center'} c={WARNA.biruTua}>Default Warna</Text>
+            <Text ta={'center'} c={WARNA.biruTua}>Gunakan Tema</Text>
           </Box>
         </Flex>
         <Flex justify={'center'} align={'center'} direction={'column'}
@@ -35,13 +42,13 @@ export default function DrawerPaletEditEndDefault() {
             <FaPencil size={30} color={WARNA.biruTua} />
           </Box>
           <Box>
-            <Text ta={'center'} c={WARNA.biruTua}>Edit Palet</Text>
+            <Text ta={'center'} c={WARNA.biruTua}>Edit Tema</Text>
           </Box>
         </Flex>
       </SimpleGrid>
 
       <LayoutModal opened={isModal} onClose={() => setModal(false)}
-        description="Apakah Anda yakin ingin mengubah warna Aplikasi?"
+        description="Apakah Anda yakin ingin mengubah Tema Aplikasi?"
         onYes={(val) => { onCLose(val) }} />
     </Box>
   );
diff --git a/src/module/color_palette/ui/edit_palette_color.tsx b/src/module/color_palette/ui/edit_palette_color.tsx
index 24f1707..5a5f032 100644
--- a/src/module/color_palette/ui/edit_palette_color.tsx
+++ b/src/module/color_palette/ui/edit_palette_color.tsx
@@ -1,101 +1,155 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, Stack, Text } from '@mantine/core';
+import { Badge, Box, Button, Center, ColorInput, Flex, Pill, rem, SimpleGrid, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 
 export default function EditPaletteColor() {
   const [isWarna, setWarna] = useState({
-    warnaSatu: '',
-    warnaDua: '',
-    warnaTiga: '',
-    warnaEmpat: '',
-
+    warnaUtama: '',
+    backgroundUtama: '',
+    backgroundIcon: '',
+    backgroundFiturHome: '',
+    backgroundFiturDivisi: '',
+    backgroundTotalKegiatan: '',
   })
   return (
     <Box>
-      <LayoutNavbarNew back='/color-palette' title='Edit Palet' menu />
+      <LayoutNavbarNew back='/color-palette' title='Edit Tema' menu />
       <Box p={20}>
         <Stack>
           <ColorInput
-            label={'Warna 1'}
+            label={'Warna Utama'}
             placeholder='Pilih Warna'
             required
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaSatu: color })
+              (color) => setWarna({ ...isWarna, warnaUtama: color })
             }
           />
           <ColorInput
-            label={'Warna 2'}
+            label={'Background Utama'}
             placeholder='Pilih Warna'
             required
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaDua: color })
+              (color) => setWarna({ ...isWarna, backgroundUtama: color })
             }
           />
           <ColorInput
-            label={'Warna 3'}
+            label={'Background Icon'}
             placeholder='Pilih Warna'
             required
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaTiga: color })
+              (color) => setWarna({ ...isWarna, backgroundIcon: color })
             }
           />
           <ColorInput
-            label={'Warna 4'}
+            label={'Background Fitur Home'}
             placeholder='Pilih Warna'
             required
             size="md"
             radius="md"
             onChangeEnd={
-              (color) => setWarna({ ...isWarna, warnaEmpat: color })
+              (color) => setWarna({ ...isWarna, backgroundFiturHome: color })
+            }
+          />
+          <ColorInput
+            label={'Background Fitur Divisi'}
+            placeholder='Pilih Warna'
+            required
+            size="md"
+            radius="md"
+            onChangeEnd={
+              (color) => setWarna({ ...isWarna, backgroundFiturDivisi: color })
+            }
+          />
+          <ColorInput
+            label={'Background Total Kegiatan'}
+            placeholder='Pilih Warna'
+            required
+            size="md"
+            radius="md"
+            onChangeEnd={
+              (color) => setWarna({ ...isWarna, backgroundTotalKegiatan: color })
             }
           />
         </Stack>
-        <Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={30}>
-          <Box>
-            <Center>
-            <Box bg={isWarna.warnaSatu} w={50} h={50} style={{
-              borderRadius: 10
-            }} />
-            </Center>
-            {isWarna.warnaSatu.length == 0 ? "" :
-              <Pill size="xs" ta={"center"}>{isWarna.warnaSatu}</Pill>
-            }
-          </Box>
-          <Box>
-            <Box bg={isWarna.warnaDua} w={50} h={50} style={{
-              borderRadius: 10
-            }} />
-            {isWarna.warnaDua.length == 0 ? "" :
-              <Pill size="xs" ta={"center"}>{isWarna.warnaDua}</Pill>
-            }
-          </Box>
-          <Box>
-            <Box bg={isWarna.warnaTiga} w={50} h={50} style={{
-              borderRadius: 10
-            }} />
-            {isWarna.warnaTiga.length == 0 ? "" :
-              <Pill size="xs" ta={"center"}>{isWarna.warnaTiga}</Pill>
-            }
-          </Box>
-          <Box>
-            <Box bg={isWarna.warnaEmpat} w={50} h={50} style={{
-              borderRadius: 10
-            }} />
-            {isWarna.warnaEmpat.length == 0 ? "" :
-              <Pill size="xs" ta={"center"}>{isWarna.warnaEmpat}</Pill>
-            }
-          </Box>
+        <Flex justify={'center'} align={"center"} w={"auto"} gap={10} mt={20} mb={100}>
+          <SimpleGrid
+            cols={{ base: 3, sm: 3, lg: 6 }}
+            spacing={{ base: 10, sm: 'xl' }}
+            verticalSpacing={{ base: 'md', sm: 'xl' }}
+          >
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.warnaUtama} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.warnaUtama.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.warnaUtama}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundUtama} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundUtama.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundUtama}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundIcon} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundIcon.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundIcon}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundFiturHome} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundFiturHome.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundFiturHome}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundFiturDivisi} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundFiturDivisi.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundFiturDivisi}</Pill>
+              }
+            </Flex>
+            <Flex justify={"center"} direction={"column"}>
+              <Center>
+                <Box bg={isWarna.backgroundTotalKegiatan} w={35} h={35} style={{
+                  borderRadius: 10
+                }} />
+              </Center>
+              {isWarna.backgroundTotalKegiatan.length == 0 ? "" :
+                <Pill size="xs" ta={"center"}>{isWarna.backgroundTotalKegiatan}</Pill>
+              }
+            </Flex>
+          </SimpleGrid>
+
         </Flex>
       </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-        maxWidth: rem(550),
+        maxWidth: rem(535),
         zIndex: 999,
         backgroundColor: `${WARNA.bgWhite}`,
       }}>
@@ -113,4 +167,3 @@ export default function EditPaletteColor() {
     </Box>
   );
 }
-
diff --git a/src/module/color_palette/ui/list_color_palette.tsx b/src/module/color_palette/ui/list_color_palette.tsx
index 7adf74b..f5a0055 100644
--- a/src/module/color_palette/ui/list_color_palette.tsx
+++ b/src/module/color_palette/ui/list_color_palette.tsx
@@ -11,26 +11,26 @@ import DrawerPaletEditEndDefault from './drawer_palet_edit_end_default';
 const paletWarna = [
   {
     id: 1,
-    name: 'Palet Bawaan 1',
-    color: ['#ff69b4', '#33cc33', '#7D8A7DFF', '#0B730BFF']
+    name: 'Tema Bawaan 1',
+    color: ['#ff69b4', '#33cc33', '#7D8A7DFF', '#0B730BFF', '#16ACE3FF', '#532CC1FF']
   },
   {
     id: 2,
-    name: 'Palet Bawaan 2',
-    color: ['#EF8A62FF', '#532CC1FF', '#16ACE3FF', '#760B2DFF']
+    name: 'Tema Bawaan 2',
+    color: ['#EF8A62FF', '#532CC1FF', '#16ACE3FF', '#760B2DFF', '#F67280FF', '#C06C84FF']
   },
   {
     id: 3,
-    name: 'Palet Bawaan 3',
-    color: ['#F8B195FF', '#F67280FF', '#C06C84FF', '#6C5B7BFF']
+    name: 'Tema Bawaan 3',
+    color: ['#F8B195FF', '#F67280FF', '#C06C84FF', '#6C5B7BFF', '#7D8A7DFF', '#0B730BFF']
   },
 ]
 
 const paletTambahan = [
   {
     id: 1,
-    name: 'Palet Tambah 1',
-    color: ['#ABD220FF', '#E409E8FF', '#08A2A4FF', '#C11515FF']
+    name: 'Tema Tambah 1',
+    color: ['#ABD220FF', '#E409E8FF', '#08A2A4FF', '#C11515FF', '#F67280FF', '#C06C84FF']
   }
 ]
 
@@ -40,7 +40,7 @@ export default function ListColorPalette() {
   const [isOpenTambahan, setOpenTambahan] = useState(false)
   return (
     <Box>
-      <LayoutNavbarNew back='/home' title='Palet Warna' menu={
+      <LayoutNavbarNew back='/home' title='Tema Aplikasi' menu={
         <ActionIcon onClick={() => { setOpen(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMenu size={20} color='white' />
         </ActionIcon>
@@ -76,13 +76,19 @@ export default function ListColorPalette() {
                   <Box bg={v.color[3]} w={30} h={30} style={{
                     borderRadius: "100%"
                   }} />
+                  <Box bg={v.color[4]} w={30} h={30} style={{
+                    borderRadius: "100%"
+                  }} />
+                  <Box bg={v.color[5]} w={30} h={30} style={{
+                    borderRadius: "100%"
+                  }} />
                 </Flex>
               </Box>
             </Box>
           </Box>
         ))}
         <Box>
-          <Text fw={"bold"}>Palet Tambahan</Text>
+          <Text fw={"bold"}>Tema Tambahan</Text>
           {paletTambahan.map((v, i) => (
             <Box mb={20} key={i}>
               <Box style={{
@@ -113,6 +119,12 @@ export default function ListColorPalette() {
                     <Box bg={v.color[3]} w={30} h={30} style={{
                       borderRadius: "100%"
                     }} />
+                    <Box bg={v.color[4]} w={30} h={30} style={{
+                      borderRadius: "100%"
+                    }} />
+                    <Box bg={v.color[5]} w={30} h={30} style={{
+                      borderRadius: "100%"
+                    }} />
                   </Flex>
                 </Box>
               </Box>
diff --git a/src/module/group/ui/drawer_group.tsx b/src/module/group/ui/drawer_group.tsx
index b4cfbec..eaf7e85 100644
--- a/src/module/group/ui/drawer_group.tsx
+++ b/src/module/group/ui/drawer_group.tsx
@@ -1,4 +1,4 @@
-import { LayoutDrawer, WARNA } from "@/module/_global";
+import { LayoutDrawer, TEMA, WARNA } from "@/module/_global";
 import {
   Box,
   Button,
@@ -14,10 +14,12 @@ import React, { useState } from "react";
 import { IoAddCircle } from "react-icons/io5";
 import { funCreateGroup } from "../lib/api_group";
 import toast from "react-hot-toast";
+import { useHookstate } from "@hookstate/core";
 
 export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean) => void; }) {
   const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
   const [namaGroup, setNamaGroup] = useState("");
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     name: false,
   });
@@ -50,10 +52,10 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
         >
           <Flex justify={"center"} align={"center"} direction={"column"}>
             <Box>
-              <IoAddCircle size={30} color={WARNA.biruTua} />
+              <IoAddCircle size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>Tambah Grup</Text>
+              <Text c={tema.get().utama}>Tambah Grup</Text>
             </Box>
           </Flex>
         </SimpleGrid>
@@ -67,9 +69,9 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
           <TextInput
             styles={{
               input: {
-                color: WARNA.biruTua,
-                borderRadius: WARNA.biruTua,
-                borderColor: WARNA.biruTua,
+                color: tema.get().utama,
+                borderRadius: tema.get().utama,
+                borderColor: tema.get().utama,
               },
             }}
             size="lg"
@@ -87,7 +89,7 @@ export default function DrawerGroup({ onSuccess, }: { onSuccess: (val: boolean)
           <Box mt={"xl"}>
             <Button
               c={"white"}
-              bg={WARNA.biruTua}
+              bg={tema.get().utama}
               size="lg"
               radius={30}
               fullWidth
diff --git a/src/module/group/ui/edit_drawer_group.tsx b/src/module/group/ui/edit_drawer_group.tsx
index 6b2c5fc..980b1ee 100644
--- a/src/module/group/ui/edit_drawer_group.tsx
+++ b/src/module/group/ui/edit_drawer_group.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutDrawer, WARNA } from "@/module/_global";
+import { LayoutDrawer, TEMA, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import {
   Box,
@@ -18,12 +18,14 @@ import toast from "react-hot-toast";
 import { FaPencil, FaToggleOff } from "react-icons/fa6";
 import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
 import { funEditGroup, funEditStatusGroup, funGetGroupById } from "../lib/api_group";
+import { useHookstate } from "@hookstate/core";
 
 export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdated: (val: boolean) => void; id: string; isActive: boolean; }) {
   const [openDrawerGroup, setOpenDrawerGroup] = useState(false);
   const [isModal, setModal] = useState(false);
   const [name, setName] = useState("");
   const [loading, setLoading] = useState(false);
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     name: false,
   });
@@ -100,10 +102,10 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
             style={{ cursor: "pointer" }}
           >
             <Box>
-              <FaToggleOff size={30} color={WARNA.biruTua} />
+              <FaToggleOff size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>{isActive == false ? "Aktifkan" : "Non Aktifkan"}</Text>
+              <Text c={tema.get().utama}>{isActive == false ? "Aktifkan" : "Non Aktifkan"}</Text>
             </Box>
           </Flex>
           <Flex
@@ -114,10 +116,10 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
             style={{ cursor: "pointer" }}
           >
             <Box>
-              <FaPencil size={30} color={WARNA.biruTua} />
+              <FaPencil size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>Edit</Text>
+              <Text c={tema.get().utama}>Edit</Text>
             </Box>
           </Flex>
         </SimpleGrid>
@@ -131,9 +133,9 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
           <TextInput
             styles={{
               input: {
-                color: WARNA.biruTua,
-                borderRadius: WARNA.biruTua,
-                borderColor: WARNA.biruTua,
+                color: tema.get().utama,
+                borderRadius: tema.get().utama,
+                borderColor: tema.get().utama,
               },
             }}
             size="lg"
@@ -154,7 +156,7 @@ export default function EditDrawerGroup({ onUpdated, id, isActive, }: { onUpdate
           <Box mt={"xl"}>
             <Button
               c={"white"}
-              bg={WARNA.biruTua}
+              bg={tema.get().utama}
               size="lg"
               radius={30}
               fullWidth
diff --git a/src/module/group/ui/list_group_active.tsx b/src/module/group/ui/list_group_active.tsx
index e8659e1..626651e 100644
--- a/src/module/group/ui/list_group_active.tsx
+++ b/src/module/group/ui/list_group_active.tsx
@@ -1,4 +1,4 @@
-import { LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
+import { LayoutDrawer, SkeletonSingle, TEMA, WARNA } from "@/module/_global";
 import {
   ActionIcon,
   Box,
@@ -19,6 +19,7 @@ import { funGetAllGroup } from "../lib/api_group";
 import { IDataGroup } from "../lib/type_group";
 import { useSearchParams } from "next/navigation";
 import _ from "lodash";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function ListGroupActive() {
@@ -31,6 +32,7 @@ export default function ListGroupActive() {
   const [loading, setLoading] = useState(true);
   const searchParams = useSearchParams()
   const status = searchParams.get('active')
+  const tema = useHookstate(TEMA)
 
 
   const fetchData = async () => {
@@ -64,9 +66,9 @@ export default function ListGroupActive() {
       <TextInput
         styles={{
           input: {
-            color: WARNA.biruTua,
-            borderRadius: WARNA.biruTua,
-            borderColor: WARNA.biruTua,
+            color: tema.get().utama,
+            borderRadius: tema.get().utama,
+            borderColor: tema.get().utama,
           },
         }}
         size="md"
@@ -96,7 +98,7 @@ export default function ListGroupActive() {
                 <Group
                   align="center"
                   style={{
-                    border: `1px solid ${"#DCEED8"}`,
+                    border: `1px solid ${tema.get().bgTotalKegiatan}`,
                     padding: 10,
                     borderRadius: 10,
                     cursor: "pointer",
@@ -116,13 +118,13 @@ export default function ListGroupActive() {
                       <Flex justify={{base: "center", xl: "flex-start"}}>
                         <ActionIcon
                           variant="light"
-                          bg={"#DCEED8"}
+                          bg={tema.get().bgTotalKegiatan}
                           size={50}
                           radius={100}
                           aria-label="icon"
                         >
                           <HiOutlineOfficeBuilding
-                            color={WARNA.biruTua}
+                            color={tema.get().utama}
                             size={25}
                           />
                         </ActionIcon>
@@ -138,7 +140,7 @@ export default function ListGroupActive() {
                           xl: 400
                         }}
                       >
-                        <Text fw={"bold"} c={WARNA.biruTua} lineClamp={1}>
+                        <Text fw={"bold"} c={tema.get().utama} lineClamp={1}>
                       {v.name}
                     </Text>
                       </Box>
diff --git a/src/module/group/ui/navbar_group.tsx b/src/module/group/ui/navbar_group.tsx
index c710b15..aa3d765 100644
--- a/src/module/group/ui/navbar_group.tsx
+++ b/src/module/group/ui/navbar_group.tsx
@@ -1,17 +1,19 @@
 "use client"
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMenu } from "react-icons/hi";
 import DrawerGroup from './drawer_group';
+import { useHookstate } from '@hookstate/core';
 
 export default function NavbarGroup() {
   const [isOpen, setOpen] = useState(false)
+  const tema = useHookstate(TEMA)
   return (
     <>
       <LayoutNavbarNew back='/home' title='Grup'
         menu={
-          <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon onClick={() => setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiMenu size={20} color='white' />
           </ActionIcon>
         }
diff --git a/src/module/group/ui/tab_list_group.tsx b/src/module/group/ui/tab_list_group.tsx
index 62689b6..06ac684 100644
--- a/src/module/group/ui/tab_list_group.tsx
+++ b/src/module/group/ui/tab_list_group.tsx
@@ -4,17 +4,19 @@ import { IoCloseCircleOutline } from "react-icons/io5";
 import { IoMdCheckmarkCircleOutline } from "react-icons/io";
 import ListGroupActive from "./list_group_active";
 import { useRouter, useSearchParams } from "next/navigation";
+import { useHookstate } from "@hookstate/core";
+import { TEMA } from "@/module/_global";
 
 export default function TabListGroup() {
   const iconStyle = { width: rem(20), height: rem(20) };
   const router = useRouter()
   const searchParams = useSearchParams()
   const status = searchParams.get('active')
-
+  const tema = useHookstate(TEMA)
 
   return (
     <Box p={20}>
-      <Tabs variant="pills" color="#FF9861" radius="xl" defaultValue={(status == "false") ? "false" : "true"}>
+      <Tabs variant="pills" color={tema.get().bgFiturHome} radius="xl" defaultValue={(status == "false") ? "false" : "true"}>
         <Tabs.List
           bg={"white"}
           style={{
diff --git a/src/module/home/ui/carosole.tsx b/src/module/home/ui/carosole.tsx
index 85146db..5f8fdb5 100644
--- a/src/module/home/ui/carosole.tsx
+++ b/src/module/home/ui/carosole.tsx
@@ -1,11 +1,13 @@
 'use client'
 import React, { useRef } from 'react';
 import { Carousel } from '@mantine/carousel';
-import { WARNA } from '@/module/_global';
+import { TEMA, WARNA } from '@/module/_global';
 import Autoplay from 'embla-carousel-autoplay';
 import { Flex, Text } from '@mantine/core';
+import { useHookstate } from '@hookstate/core';
 export default function Carosole() {
   const autoplay = useRef(Autoplay({ delay: 5000 }));
+  const tema = useHookstate(TEMA)
   return (
     <>
       <Carousel
@@ -15,17 +17,17 @@ export default function Carosole() {
         onMouseEnter={autoplay.current.stop}
         onMouseLeave={autoplay.current.reset}
       >
-        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
           <Flex justify={'center'} h={"100%"} align={'center'}>
           <Text c={"white"}>INFORMASI DARMASABA</Text>
           </Flex>
         </Carousel.Slide>
-        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
           <Flex justify={'center'} h={"100%"} align={'center'}>
           <Text c={"white"}>INFORMASI DARMASABA</Text>
           </Flex>
         </Carousel.Slide>
-        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+        <Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
           <Flex justify={'center'} h={"100%"} align={'center'}>
           <Text c={"white"}>INFORMASI DARMASABA</Text>
           </Flex>
diff --git a/src/module/home/ui/chart_document.tsx b/src/module/home/ui/chart_document.tsx
index 1ee6bcc..30caf1f 100644
--- a/src/module/home/ui/chart_document.tsx
+++ b/src/module/home/ui/chart_document.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA, WARNA } from "@/module/_global";
 import { Box } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { EChartsOption } from "echarts";
@@ -7,12 +7,14 @@ import EChartsReact from "echarts-for-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { funGetHome } from "../lib/api_home";
+import { useHookstate } from "@hookstate/core";
 
 export default function ChartDocumentHome() {
    const [options, setOptions] = useState<EChartsOption>({})
    const [isData, setData] = useState<any[]>([])
    const [loading, setLoading] = useState(true)
    const color = ["#F3C96B", "#9EC97F", "#5971C0"]
+   const tema = useHookstate(TEMA)
 
    useShallowEffect(() => {
       fetchData()
@@ -48,7 +50,7 @@ export default function ChartDocumentHome() {
             top: '2%',
             left: 'center',
             textStyle: {
-               color: WARNA.biruTua
+               color: tema.get().utama
             }
          },
          tooltip: {
diff --git a/src/module/home/ui/chart_progress_tugas.tsx b/src/module/home/ui/chart_progress_tugas.tsx
index e96c213..9d72fe5 100644
--- a/src/module/home/ui/chart_progress_tugas.tsx
+++ b/src/module/home/ui/chart_progress_tugas.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA, WARNA } from "@/module/_global";
 import { Box, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { EChartsOption } from "echarts";
@@ -7,12 +7,13 @@ import EChartsReact from "echarts-for-react";
 import { useState } from "react";
 import { funGetHome } from "../lib/api_home";
 import toast from "react-hot-toast";
+import { useHookstate } from "@hookstate/core";
 
 export default function ChartProgressHome() {
    const [options, setOptions] = useState<EChartsOption>({});
    const [isData, setData] = useState<any[]>([])
    const [loading, setLoading] = useState(true);
-
+   const tema = useHookstate(TEMA)
    useShallowEffect(() => {
       fetchData()
    }, [])
@@ -47,7 +48,7 @@ export default function ChartProgressHome() {
             top: '2%',
             left: 'center',
             textStyle: {
-               color: WARNA.biruTua
+               color: tema.get().utama
             }
          },
          legend: {
diff --git a/src/module/home/ui/features.tsx b/src/module/home/ui/features.tsx
index d0c8edb..1ec6434 100644
--- a/src/module/home/ui/features.tsx
+++ b/src/module/home/ui/features.tsx
@@ -1,5 +1,6 @@
 'use client'
-import { WARNA } from '@/module/_global';
+import { TEMA, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
@@ -9,10 +10,11 @@ import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2
 export default function Features() {
   const router = useRouter()
   const isMobile = useMediaQuery('(max-width: 369px)');
+  const tema = useHookstate(TEMA)
   return (
     <>
       <Box pt={10}>
-        <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Features</Text>
+        <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Features</Text>
         <SimpleGrid
           cols={{ base: 4, sm: 4, lg: 4 }}
         >
@@ -22,12 +24,14 @@ export default function Features() {
                 size={isMobile ? 50 : 68}
                 aria-label="Gradient action icon"
                 radius={100}
-                gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                <HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                bg={tema.get().bgFiturHome}
+                >
+                <HiMiniUserGroup size={isMobile ? 25 : 35} color={tema.get().utama} />
               </ActionIcon>
             </Center>
             <Center>
-              <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Divisi</Text>
+              <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Divisi</Text>
             </Center>
           </Box>
           <Box onClick={() => router.push('/project?status=0&group=null')}>
@@ -36,12 +40,14 @@ export default function Features() {
                 size={isMobile ? 50 : 68}
                 aria-label="Gradient action icon"
                 radius={100}
-                gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                bg={tema.get().bgFiturHome}
+                >
+                <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
               </ActionIcon>
             </Center>
             <Center>
-              <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Kegiatan</Text>
+              <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Kegiatan</Text>
             </Center>
           </Box>
           <Box onClick={() => router.push('/announcement')}>
@@ -50,12 +56,14 @@ export default function Features() {
                 size={isMobile ? 50 : 68}
                 aria-label="Gradient action icon"
                 radius={100}
-                gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                <HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                bg={tema.get().bgFiturHome}
+                >
+                <HiMegaphone size={isMobile ? 25 : 35} color={tema.get().utama} />
               </ActionIcon>
             </Center>
             <Center>
-              <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Pengumuman</Text>
+              <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Pengumuman</Text>
             </Center>
           </Box>
           <Box onClick={() => router.push('/home?cat=fitur')}>
@@ -64,12 +72,14 @@ export default function Features() {
                 size={isMobile ? 50 : 68}
                 aria-label="Gradient action icon"
                 radius={100}
-                gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                <HiSquares2X2 size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                bg={tema.get().bgFiturHome}
+                >
+                <HiSquares2X2 size={isMobile ? 25 : 35} color={tema.get().utama} />
               </ActionIcon>
             </Center>
             <Center>
-              <Text fz={isMobile ? 13 : 15} c={WARNA.biruTua}>Semua</Text>
+              <Text fz={isMobile ? 13 : 15} c={tema.get().utama}>Semua</Text>
             </Center>
           </Box>
         </SimpleGrid>
diff --git a/src/module/home/ui/icon_navbar.tsx b/src/module/home/ui/icon_navbar.tsx
index 4bac861..c7399eb 100644
--- a/src/module/home/ui/icon_navbar.tsx
+++ b/src/module/home/ui/icon_navbar.tsx
@@ -1,5 +1,6 @@
 "use client"
-import { WARNA } from '@/module/_global';
+import { TEMA, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Group, Indicator, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React from 'react';
@@ -7,18 +8,19 @@ import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from 'react-icons/hi2
 
 export default function IconNavbar() {
   const router = useRouter()
+  const tema = useHookstate(TEMA)
   return (
     <Box>
       <Group>
-        <ActionIcon onClick={() => router.push('/home?cat=search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <ActionIcon onClick={() => router.push('/home?cat=search')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>
         <Indicator inline label={"9"} size={18} color={"red"} offset={3}>
-        <ActionIcon onClick={() => router.push('/home?cat=notification')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <ActionIcon onClick={() => router.push('/home?cat=notification')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiOutlineBell size={20} color='white' />
         </ActionIcon>
           </Indicator>
-        <ActionIcon onClick={() => router.push('/profile')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <ActionIcon onClick={() => router.push('/profile')} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiOutlineUser size={20} color='white' />
         </ActionIcon>
       </Group>
diff --git a/src/module/home/ui/list_discussion.tsx b/src/module/home/ui/list_discussion.tsx
index e244207..573a8f8 100644
--- a/src/module/home/ui/list_discussion.tsx
+++ b/src/module/home/ui/list_discussion.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA, WARNA } from "@/module/_global";
 import { Box, Grid, Group, SimpleGrid, Skeleton, Text } from "@mantine/core";
 import { GoDiscussionClosed } from "react-icons/go";
 import { CiClock2, CiUser } from "react-icons/ci";
@@ -10,6 +10,7 @@ import { funGetHome } from "../lib/api_home";
 import toast from "react-hot-toast";
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function ListDiscussion() {
@@ -17,6 +18,7 @@ export default function ListDiscussion() {
    const [isData, setData] = useState<IDataHomeDiskusi[]>([])
    const [loading, setLoading] = useState(true);
    const isMobile = useMediaQuery('(max-width: 369px)');
+   const tema = useHookstate(TEMA)
 
    const fetchData = async () => {
       try {
@@ -45,7 +47,7 @@ export default function ListDiscussion() {
 
    return (
       <Box pt={10}>
-         <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Diskusi</Text>
+         <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Diskusi</Text>
          <Box bg={"white"} style={{
             borderRadius: 10,
             border: `1px solid ${"#D6D8F6"}`,
diff --git a/src/module/home/ui/list_divisi.tsx b/src/module/home/ui/list_divisi.tsx
index 60cd98d..afe9a89 100644
--- a/src/module/home/ui/list_divisi.tsx
+++ b/src/module/home/ui/list_divisi.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA, WARNA } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Box, Card, Flex, Title, Text, Skeleton } from "@mantine/core";
 import _ from "lodash";
@@ -9,11 +9,13 @@ import { IDataHomeDivision } from "../lib/type_home";
 import { funGetHome } from "../lib/api_home";
 import toast from "react-hot-toast";
 import { useShallowEffect } from "@mantine/hooks";
+import { useHookstate } from "@hookstate/core";
 
 export default function ListDivisi() {
    const router = useRouter()
    const [isData, setData] = useState<IDataHomeDivision[]>([])
    const [loading, setLoading] = useState(true);
+   const tema = useHookstate(TEMA)
 
    const fetchData = async () => {
       try {
@@ -44,7 +46,7 @@ export default function ListDivisi() {
    return (
       <>
          <Box pt={10}>
-            <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Divisi Teraktif</Text>
+            <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Divisi Teraktif</Text>
             {loading ?
                <Box pb={20}>
                   <Skeleton width={"100%"} height={200} radius={"md"} />
@@ -62,9 +64,9 @@ export default function ListDivisi() {
                            <Box w={{ base: 300, md: 400 }}>
                               <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/division/${v.id}`)}>
                                  <Card.Section>
-                                    <Box h={120} bg={`linear-gradient(180deg, rgba(223,218,124,1) 25%, rgba(242,175,70,1) 100%)`}>
+                                    <Box h={120} bg={tema.get().bgFiturHome}>
                                        <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
-                                          <Title order={3} c={WARNA.biruTua} ta={"center"} lineClamp={2}>{v.name}</Title>
+                                          <Title order={3} c={tema.get().utama} ta={"center"} lineClamp={2}>{v.name}</Title>
                                        </Flex>
                                     </Box>
                                  </Card.Section>
diff --git a/src/module/home/ui/list_event.tsx b/src/module/home/ui/list_event.tsx
index fef59d2..826cbf3 100644
--- a/src/module/home/ui/list_event.tsx
+++ b/src/module/home/ui/list_event.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global"
+import { TEMA, WARNA } from "@/module/_global"
 import { Box, Divider, Flex, Group, Skeleton, Text } from "@mantine/core"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
@@ -8,6 +8,7 @@ import { funGetHome } from "../lib/api_home"
 import toast from "react-hot-toast"
 import { useMediaQuery, useShallowEffect } from "@mantine/hooks"
 import _ from "lodash"
+import { useHookstate } from "@hookstate/core"
 
 
 export default function ListEventHome() {
@@ -15,6 +16,7 @@ export default function ListEventHome() {
    const [isData, setData] = useState<IDataHomeEvent[]>([])
    const [loading, setLoading] = useState(true);
    const isMobile = useMediaQuery('(max-width: 369px)');
+   const tema = useHookstate(TEMA)
 
    const fetchData = async () => {
       try {
@@ -43,7 +45,7 @@ export default function ListEventHome() {
 
    return (
       <Box pt={10}>
-         <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Acara Hari Ini</Text>
+         <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Acara Hari Ini</Text>
          <Box bg={"white"} style={{
             borderRadius: 10,
             border: `1px solid ${"#D6D8F6"}`,
diff --git a/src/module/home/ui/list_notification.tsx b/src/module/home/ui/list_notification.tsx
index 2c033ce..da3b346 100644
--- a/src/module/home/ui/list_notification.tsx
+++ b/src/module/home/ui/list_notification.tsx
@@ -1,5 +1,6 @@
 "use client"
-import { WARNA } from '@/module/_global';
+import { TEMA, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Center, Grid, Group, Spoiler, Text } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
@@ -67,18 +68,19 @@ const dataNotification = [
 export default function ListNotification() {
   const router = useRouter()
   const isMobile = useMediaQuery('(max-width: 369px)');
+  const tema = useHookstate(TEMA)
   return (
     <Box>
       {dataNotification.map((v, i) => {
         return (
           <Box key={i} my={15}>
             <Box style={{
-              border: `1px solid ${WARNA.borderOrange}`,
+              border: `1px solid ${tema.get().utama}`,
               padding: 20,
               borderRadius: 15
             }} >
               <Group align='center'>
-                <ActionIcon variant="light" bg={WARNA.biruTua} size={35} radius={100} aria-label="icon">
+                <ActionIcon variant="light" bg={tema.get().utama} size={35} radius={100} aria-label="icon">
                   <FaBell size={20} color='white' />
                 </ActionIcon>
                 <Box
diff --git a/src/module/home/ui/list_project.tsx b/src/module/home/ui/list_project.tsx
index 458261b..34fafaa 100644
--- a/src/module/home/ui/list_project.tsx
+++ b/src/module/home/ui/list_project.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA } from "@/module/_global";
+import { TEMA, WARNA } from "@/module/_global";
 import { Carousel } from "@mantine/carousel";
 import { Box, Card, Flex, Title, Text, Progress, Stack, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -9,11 +9,13 @@ import toast from "react-hot-toast";
 import { funGetHome } from "../lib/api_home";
 import { IDataHomeKegiatan } from "../lib/type_home";
 import _ from "lodash";
+import { useHookstate } from "@hookstate/core";
 
 export default function ListProjects() {
    const router = useRouter()
    const [isData, setData] = useState<IDataHomeKegiatan[]>([])
    const [loading, setLoading] = useState(true);
+   const tema = useHookstate(TEMA)
 
    const fetchData = async () => {
       try {
@@ -43,7 +45,7 @@ export default function ListProjects() {
    return (
       <>
          <Box pt={10}>
-            <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Kegiatan Terbaru</Text>
+            <Text c={tema.get().utama} mb={10} fw={'bold'} fz={16}>Kegiatan Terbaru</Text>
             {loading ?
                <Box pb={20}>
                   <Skeleton width={"100%"} height={200} radius={"md"} />
@@ -61,7 +63,7 @@ export default function ListProjects() {
                            <Box w={{ base: 300, md: 400 }}>
                               <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
                                  <Card.Section>
-                                    <Box h={120} bg={WARNA.biruTua}>
+                                    <Box h={120} bg={tema.get().utama}>
                                        <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
                                           <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
                                        </Flex>
@@ -73,7 +75,7 @@ export default function ListProjects() {
                                           <Progress.Label>{v.progress}%</Progress.Label>
                                        </Progress.Section>
                                     </Progress.Root>
-                                    <Text c={WARNA.biruTua}>{v.createdAt}</Text>
+                                    <Text c={tema.get().utama}>{v.createdAt}</Text>
                                  </Stack>
                               </Card>
                            </Box>
diff --git a/src/module/home/ui/view_detail_feature.tsx b/src/module/home/ui/view_detail_feature.tsx
index 61375d0..f8a395a 100644
--- a/src/module/home/ui/view_detail_feature.tsx
+++ b/src/module/home/ui/view_detail_feature.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { globalRole, LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Center, SimpleGrid, Text } from '@mantine/core';
 import React from 'react';
 import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2, HiChevronLeft, HiUserGroup, HiUsers } from "react-icons/hi2";
@@ -14,6 +14,7 @@ export default function ViewDetailFeature() {
   const router = useRouter()
   const roleLogin = useHookstate(globalRole)
   const isMobile = useMediaQuery('(max-width: 369px)');
+  const tema = useHookstate(TEMA)
   return (
     <>
       <LayoutNavbarNew back='/home' title='Fitur' menu={<></>} />
@@ -28,12 +29,14 @@ export default function ViewDetailFeature() {
                   size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
-                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <HiMiniUserGroup size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                  // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                  bg={tema.get().bgFiturHome}
+                  >
+                  <HiMiniUserGroup size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
               <Center>
-                <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
+                <Text fz={15} c={tema.get().utama}>Divisi</Text>
               </Center>
             </Box>
             <Box onClick={() => router.push('/project?status=0&group=null')}>
@@ -42,12 +45,14 @@ export default function ViewDetailFeature() {
                   size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
-                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                  // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                  bg={tema.get().bgFiturHome}
+                  >
+                  <HiMiniPresentationChartBar size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
               <Center>
-                <Text fz={15} c={WARNA.biruTua}>Kegiatan</Text>
+                <Text fz={15} c={tema.get().utama}>Kegiatan</Text>
               </Center>
             </Box>
             <Box onClick={() => router.push('/announcement')}>
@@ -56,12 +61,14 @@ export default function ViewDetailFeature() {
                   size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
-                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <HiMegaphone size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                  // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                  bg={tema.get().bgFiturHome}
+                  >
+                  <HiMegaphone size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
               <Center>
-                <Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
+                <Text fz={15} c={tema.get().utama}>Pengumuman</Text>
               </Center>
             </Box>
             <Box onClick={() => router.push('/member')}>
@@ -70,12 +77,14 @@ export default function ViewDetailFeature() {
                   size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
-                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <PiUsersFourFill size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                  // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                  bg={tema.get().bgFiturHome}
+                  >
+                  <PiUsersFourFill size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
               <Center>
-                <Text fz={15} c={WARNA.biruTua}>Anggota</Text>
+                <Text fz={15} c={tema.get().utama}>Anggota</Text>
               </Center>
             </Box>
             <Box onClick={() => router.push('/position')}>
@@ -84,12 +93,14 @@ export default function ViewDetailFeature() {
                   size={isMobile ? 50 : 68}
                   aria-label="Gradient action icon"
                   radius={100}
-                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                  <FaUserTie size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                  // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                  bg={tema.get().bgFiturHome}
+                  >
+                  <FaUserTie size={isMobile ? 25 : 35} color={tema.get().utama} />
                 </ActionIcon>
               </Center>
               <Center>
-                <Text fz={15} c={WARNA.biruTua}>Jabatan</Text>
+                <Text fz={15} c={tema.get().utama}>Jabatan</Text>
               </Center>
             </Box>
             {
@@ -100,12 +111,14 @@ export default function ViewDetailFeature() {
                     size={isMobile ? 50 : 68}
                     aria-label="Gradient action icon"
                     radius={100}
-                    gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                    <FaUserTag size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                    // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                    bg={tema.get().bgFiturHome}
+                    >
+                    <FaUserTag size={isMobile ? 25 : 35} color={tema.get().utama} />
                   </ActionIcon>
                 </Center>
                 <Center>
-                  <Text fz={15} c={WARNA.biruTua}>Grup</Text>
+                  <Text fz={15} c={tema.get().utama}>Grup</Text>
                 </Center>
               </Box>
             }
@@ -117,12 +130,14 @@ export default function ViewDetailFeature() {
                     size={isMobile ? 50 : 68}
                     aria-label="Gradient action icon"
                     radius={100}
-                    gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
-                    <IoColorPalette size={isMobile ? 25 : 35} color={WARNA.biruTua} />
+                    // gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}
+                    bg={tema.get().bgFiturHome}
+                    >
+                    <IoColorPalette size={isMobile ? 25 : 35} color={tema.get().utama} />
                   </ActionIcon>
                 </Center>
                 <Center>
-                  <Text fz={15} c={WARNA.biruTua}>Palet Warna</Text>
+                  <Text fz={15} c={tema.get().utama}>Tema</Text>
                 </Center>
               </Box>
             }
diff --git a/src/module/home/ui/view_home.tsx b/src/module/home/ui/view_home.tsx
index c547f23..d94ec00 100644
--- a/src/module/home/ui/view_home.tsx
+++ b/src/module/home/ui/view_home.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarHome, WARNA } from '@/module/_global';
+import { LayoutNavbarHome, TEMA, WARNA } from '@/module/_global';
 import { Box, Group, Notification, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import Carosole from './carosole';
@@ -15,15 +15,17 @@ import { useShallowEffect } from '@mantine/hooks';
 import { notifications, Notifications } from '@mantine/notifications';
 import { IoNotifications } from 'react-icons/io5';
 import { ImCheckboxUnchecked } from 'react-icons/im';
+import { useHookstate } from '@hookstate/core';
 
 
 export default function ViewHome() {
   const [isNotif, setIsNotif] = useState(true);
+  const tema = useHookstate(TEMA)
 
   useShallowEffect(() => {
     if (isNotif) {
       notifications.show({
-        color: WARNA.biruTua,
+        color: tema.get().utama,
         title: <Text lineClamp={1}>Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera</Text>,
         message: <Text lineClamp={1}>Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera</Text>,
         icon: <IoNotifications/>,
@@ -33,7 +35,7 @@ export default function ViewHome() {
         radius: 'lg',
         bg: "white",
         style: {
-          border: `1px solid #0A8072FF`,
+          border: `1px solid ${tema.get().utama}`,
         },
         onClose: () => setIsNotif(false)
       });
diff --git a/src/module/home/ui/view_search.tsx b/src/module/home/ui/view_search.tsx
index c30dfbf..f69d247 100644
--- a/src/module/home/ui/view_search.tsx
+++ b/src/module/home/ui/view_search.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, Avatar, Box, Divider, Grid, Group, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMagnifyingGlass, HiMiniPresentationChartBar, HiMiniUserGroup } from 'react-icons/hi2';
@@ -8,6 +8,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { IDataDivisionSearch, IDataProjectSearch, IDataUserSearch } from '../lib/type_search';
 import { useRouter } from 'next/navigation';
 import _ from 'lodash';
+import { useHookstate } from '@hookstate/core';
 
 export default function ViewSearch() {
   const [search, setSearch] = useState('');
@@ -15,6 +16,7 @@ export default function ViewSearch() {
   const [dataProject, setDataProject] = useState<IDataProjectSearch[]>([]);
   const [dataDivision, setDataDivision] = useState<IDataDivisionSearch[]>([]);
   const router = useRouter()
+  const tema = useHookstate(TEMA)
 
   async function featchSearch() {
     try {
@@ -45,9 +47,9 @@ export default function ViewSearch() {
         <TextInput
           styles={{
             input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
+              color: tema.get().utama,
+              borderRadius: tema.get().utama,
+              borderColor: tema.get().utama,
             },
           }}
           size="md"
@@ -89,7 +91,7 @@ export default function ViewSearch() {
                                 <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size={50} alt="image" />
                               </Grid.Col>
                               <Grid.Col span={9}>
-                                <Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{_.startCase(v.name)}</Text>
+                                <Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
                                 <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
                               </Grid.Col>
                             </Grid>
@@ -121,7 +123,7 @@ export default function ViewSearch() {
                           <Box key={i} onClick={() => router.push(`/division/${v.id}`)}>
                             <Grid justify='center' align='center' mt={15} >
                               <Grid.Col span={2}>
-                                <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                                <ActionIcon variant="light" bg={tema.get().utama} size={50} radius={100} aria-label="icon">
                                   <HiMiniUserGroup color={'white'} size={25} />
                                 </ActionIcon>
                               </Grid.Col>
@@ -132,7 +134,7 @@ export default function ViewSearch() {
                                     xl: 380
                                   }}
                                 >
-                                <Text pl={{base: 10, xl:0}} fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.name.toUpperCase()}</Text>
+                                <Text pl={{base: 10, xl:0}} fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.name.toUpperCase()}</Text>
                                 </Box>
                                 <Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text>
                               </Grid.Col>
@@ -165,7 +167,7 @@ export default function ViewSearch() {
                           <Box key={i} onClick={() => router.push(`/project/${v.id}`)}>
                             <Grid justify='center' align='center' mt={10}>
                               <Grid.Col span={2}>
-                                <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                                <ActionIcon variant="light" bg={tema.get().utama} size={50} radius={100} aria-label="icon">
                                   <HiMiniPresentationChartBar color={'white'} size={25} />
                                 </ActionIcon>
                               </Grid.Col>
@@ -176,7 +178,7 @@ export default function ViewSearch() {
                                     xl: 380
                                   }}
                                 >
-                                <Text pl={{base: 10, xl:0}} fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{v.title.toUpperCase()}</Text>
+                                <Text pl={{base: 10, xl:0}} fw={'bold'} c={tema.get().utama} lineClamp={1}>{v.title.toUpperCase()}</Text>
                                 </Box>
                                 <Text pl={{base: 10, xl:0}} fw={'lighter'} fz={12} lineClamp={1}>{v.group}</Text>
                               </Grid.Col>
diff --git a/src/module/position/ui/drawer_detail_position.tsx b/src/module/position/ui/drawer_detail_position.tsx
index 26a00e1..047b4ff 100644
--- a/src/module/position/ui/drawer_detail_position.tsx
+++ b/src/module/position/ui/drawer_detail_position.tsx
@@ -1,4 +1,4 @@
-import { LayoutDrawer, WARNA } from "@/module/_global"
+import { LayoutDrawer, TEMA, WARNA } from "@/module/_global"
 import LayoutModal from "@/module/_global/layout/layout_modal"
 import { funGetAllGroup, IDataGroup } from "@/module/group"
 import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button, Skeleton } from "@mantine/core"
@@ -18,6 +18,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    const [isModal, setModal] = useState(false)
    const refresh = useHookstate(globalRefreshPosition)
    const [loading, setLoading] = useState(true)
+   const tema = useHookstate(TEMA)
    const [data, setData] = useState<any>({
       id: id,
       name: "",
@@ -129,10 +130,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                   onClick={() => setModal(true)}
                >
                   <Box>
-                     <FaToggleOff size={30} color={WARNA.biruTua} />
+                     <FaToggleOff size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua}>{isActive == false ? "Aktifkan" : "Non Aktifkan"}</Text>
+                     <Text c={tema.get().utama}>{isActive == false ? "Aktifkan" : "Non Aktifkan"}</Text>
                   </Box>
                </Flex>
 
@@ -141,10 +142,10 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                   onClick={() => setOpenDrawerGroup(true)}
                >
                   <Box>
-                     <FaPencil size={30} color={WARNA.biruTua} />
+                     <FaPencil size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                     <Text c={tema.get().utama} ta='center'>Edit</Text>
                   </Box>
                </Flex>
             </SimpleGrid>
@@ -163,9 +164,9 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                         label="Jabatan"
                         styles={{
                            input: {
-                              color: WARNA.biruTua,
-                              borderRadius: WARNA.biruTua,
-                              borderColor: WARNA.biruTua,
+                              color: tema.get().utama,
+                              borderRadius: tema.get().utama,
+                              borderColor: tema.get().utama,
                            },
                         }}
                         required
@@ -189,7 +190,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                <Box pos={"absolute"} bottom={10} left={0} right={0}>
                   <Button
                      c={"white"}
-                     bg={WARNA.biruTua}
+                     bg={tema.get().utama}
                      size="lg"
                      radius={30}
                      fullWidth
diff --git a/src/module/position/ui/drawer_list_position.tsx b/src/module/position/ui/drawer_list_position.tsx
index 96a89a5..1a236cc 100644
--- a/src/module/position/ui/drawer_list_position.tsx
+++ b/src/module/position/ui/drawer_list_position.tsx
@@ -1,4 +1,4 @@
-import { WARNA, LayoutDrawer, globalRole } from "@/module/_global";
+import { WARNA, LayoutDrawer, globalRole, TEMA } from "@/module/_global";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -20,6 +20,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
    const refresh = useHookstate(globalRefreshPosition)
    const searchParams = useSearchParams()
    const group = searchParams.get('group')
+   const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
       name: false,
       idGroup: false
@@ -81,20 +82,20 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
             >
                <Flex justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                     <IoAddCircle size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text ta={'center'} c={WARNA.biruTua}>Tambah Jabatan</Text>
+                     <Text ta={'center'} c={tema.get().utama}>Tambah Jabatan</Text>
                   </Box>
                </Flex>
                {
                   roleLogin.get() == "supadmin" &&
                   <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => router.push('/position?page=filter&group=' + group)}>
                      <Box>
-                        <RiFilter2Line size={30} color={WARNA.biruTua} />
+                        <RiFilter2Line size={30} color={tema.get().utama} />
                      </Box>
                      <Box>
-                        <Text ta={'center'} c={WARNA.biruTua}>Filter</Text>
+                        <Text ta={'center'} c={tema.get().utama}>Filter</Text>
                      </Box>
                   </Flex>
                }
@@ -128,9 +129,9 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                      }}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      error={
@@ -146,9 +147,9 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                   label="Jabatan"
                   styles={{
                      input: {
-                        color: WARNA.biruTua,
-                        borderRadius: WARNA.biruTua,
-                        borderColor: WARNA.biruTua,
+                        color: tema.get().utama,
+                        borderRadius: tema.get().utama,
+                        borderColor: tema.get().utama,
                      },
                   }}
                   my={15}
@@ -174,7 +175,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                <Box pos={"absolute"} bottom={10} left={0} right={0}>
                   <Button
                      c={"white"}
-                     bg={WARNA.biruTua}
+                     bg={tema.get().utama}
                      size="lg"
                      radius={30}
                      fullWidth
diff --git a/src/module/position/ui/list_position_active.tsx b/src/module/position/ui/list_position_active.tsx
index 2e4c376..4608179 100644
--- a/src/module/position/ui/list_position_active.tsx
+++ b/src/module/position/ui/list_position_active.tsx
@@ -1,4 +1,4 @@
-import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from "@/module/_global";
+import { globalRole, LayoutDrawer, SkeletonSingle, TEMA, WARNA } from "@/module/_global";
 import { ActionIcon, Box, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
 import React, { useState } from "react";
 import { FaUserTie } from "react-icons/fa6";
@@ -28,6 +28,7 @@ export default function ListPositionActive() {
   const refresh = useHookstate(globalRefreshPosition)
   const roleLogin = useHookstate(globalRole)
   const [nameGroup, setNameGroup] = useState('')
+  const tema = useHookstate(TEMA)
 
   async function getAllPosition() {
     try {
@@ -54,9 +55,9 @@ export default function ListPositionActive() {
       <TextInput
         styles={{
           input: {
-            color: WARNA.biruTua,
-            borderRadius: WARNA.biruTua,
-            borderColor: WARNA.biruTua,
+            color: tema.get().utama,
+            borderRadius: tema.get().utama,
+            borderColor: tema.get().utama,
           },
         }}
         size="md"
@@ -84,7 +85,7 @@ export default function ListPositionActive() {
                     <Group
                       align="center"
                       style={{
-                        border: `1px solid ${"#DCEED8"}`,
+                        border: `1px solid ${tema.get().bgTotalKegiatan}`,
                         padding: 10,
                         borderRadius: 10,
                       }}
@@ -105,12 +106,12 @@ export default function ListPositionActive() {
                           <Flex justify={{ base: "center", xl: "flex-start" }}>
                             <ActionIcon
                               variant="light"
-                              bg={"#DCEED8"}
+                              bg={tema.get().bgTotalKegiatan}
                               size={50}
                               radius={100}
                               aria-label="icon"
                             >
-                              <FaUserTie color={WARNA.biruTua} size={25} />
+                              <FaUserTie color={tema.get().utama} size={25} />
                             </ActionIcon>
                           </Flex>
                         </Grid.Col>
@@ -124,7 +125,7 @@ export default function ListPositionActive() {
                               xl: 400
                             }}
                           >
-                            <Text fw={"bold"} c={WARNA.biruTua} lineClamp={1}>
+                            <Text fw={"bold"} c={tema.get().utama} lineClamp={1}>
                               {v.name}
                             </Text>
                             <Text fw={"lighter"} fz={12} lineClamp={1}>
diff --git a/src/module/position/ui/navbar_list_position.tsx b/src/module/position/ui/navbar_list_position.tsx
index 48a9698..b4db393 100644
--- a/src/module/position/ui/navbar_list_position.tsx
+++ b/src/module/position/ui/navbar_list_position.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { WARNA, LayoutDrawer, LayoutNavbarNew, globalRole } from "@/module/_global";
+import { WARNA, LayoutDrawer, LayoutNavbarNew, globalRole, TEMA } from "@/module/_global";
 import { ActionIcon, Box } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import DrawerListPosition from "./drawer_list_position";
@@ -9,11 +9,12 @@ import { useHookstate } from "@hookstate/core";
 export default function NavbarListPosition() {
    const [isOpen, setOpen] = useState(false)
    const roleLogin = useHookstate(globalRole)
+   const tema = useHookstate(TEMA)
    return (
       <>
          <LayoutNavbarNew back="/home" title="Jabatan"
             menu={(roleLogin.get() != "user") ?
-               <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+               <ActionIcon onClick={() => setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />
                </ActionIcon>
                : <></>
diff --git a/src/module/position/ui/tab_list_position.tsx b/src/module/position/ui/tab_list_position.tsx
index 7511f2d..469a777 100644
--- a/src/module/position/ui/tab_list_position.tsx
+++ b/src/module/position/ui/tab_list_position.tsx
@@ -4,6 +4,8 @@ import { IoCloseCircleOutline } from "react-icons/io5"
 import { IoMdCheckmarkCircleOutline } from "react-icons/io"
 import ListPositionActive from './list_position_active';
 import { useRouter, useSearchParams } from 'next/navigation';
+import { useHookstate } from '@hookstate/core';
+import { TEMA } from '@/module/_global';
 
 export default function TabListPosition() {
   const iconStyle = { width: rem(20), height: rem(20) };
@@ -11,10 +13,11 @@ export default function TabListPosition() {
   const searchParams = useSearchParams()
   const status = searchParams.get('active')
   const group = searchParams.get("group");
+  const tema = useHookstate(TEMA)
 
   return (
     <Box p={20}>
-      <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue={(status == "false") ? "false" : "true"}>
+      <Tabs variant="pills" color={tema.get().bgFiturHome} radius="xl" defaultValue={(status == "false") ? "false" : "true"}>
         <Tabs.List
           bg={"white"}
           style={{
diff --git a/src/module/project/ui/add_detail_task_project.tsx b/src/module/project/ui/add_detail_task_project.tsx
index c801e3d..5219b26 100644
--- a/src/module/project/ui/add_detail_task_project.tsx
+++ b/src/module/project/ui/add_detail_task_project.tsx
@@ -4,10 +4,11 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funCreateDetailProject } from '../lib/api_project';
 import { Box, Button, Group, Input, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
 import { DatePicker } from '@mantine/dates';
 import moment from 'moment';
 import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
 
 export default function AddDetailTaskProject() {
    const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -15,6 +16,7 @@ export default function AddDetailTaskProject() {
    const [name, setName] = useState("")
    const [openModal, setOpenModal] = useState(false)
    const param = useParams<{ id: string }>()
+   const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
       name: false,
    });
@@ -66,7 +68,7 @@ export default function AddDetailTaskProject() {
                   value={value}
                   onChange={setValue}
                   size="md"
-                  c={WARNA.biruTua}
+                  c={tema.get().utama}
                />
             </Group>
             <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -122,11 +124,11 @@ export default function AddDetailTaskProject() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             <Button
                c={"white"}
-               bg={WARNA.biruTua}
+               bg={tema.get().utama}
                size="lg"
                radius={30}
                fullWidth
diff --git a/src/module/project/ui/add_file_detail_project.tsx b/src/module/project/ui/add_file_detail_project.tsx
index 9c1df98..f272fb3 100644
--- a/src/module/project/ui/add_file_detail_project.tsx
+++ b/src/module/project/ui/add_file_detail_project.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutDrawer, LayoutNavbarNew } from "@/module/_global";
 import {
    Box,
    Button,
@@ -21,6 +21,8 @@ import { FaTrash } from "react-icons/fa6";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { IListFileTaskProject } from "../lib/type_project";
 import { funAddFileProject, funCekNamFileUploadProject } from "../lib/api_project";
+import { TEMA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function AddFileDetailProject() {
@@ -31,6 +33,7 @@ export default function AddFileDetailProject() {
    const param = useParams<{ id: string }>()
    const [indexDelFile, setIndexDelFile] = useState<number>(0)
    const [openDrawerFile, setOpenDrawerFile] = useState(false)
+   const tema = useHookstate(TEMA)
    const openRef = useRef<() => void>(null)
 
    function deleteFile(index: number) {
@@ -119,7 +122,7 @@ export default function AddFileDetailProject() {
             {
                listFile.length > 0 &&
                <Box pt={20}>
-                  <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
+                  <Text fw={'bold'} c={tema.get().utama}>File</Text>
                   <Box bg={"white"} style={{
                      borderRadius: 10,
                      border: `1px solid ${"#D6D8F6"}`,
@@ -144,11 +147,11 @@ export default function AddFileDetailProject() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             <Button
                color="white"
-               bg={WARNA.biruTua}
+               bg={tema.get().utama}
                size="lg" radius={30}
                fullWidth
                onClick={() => {
@@ -171,10 +174,10 @@ export default function AddFileDetailProject() {
                <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
                   <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
                      <Box>
-                        <FaTrash size={30} color={WARNA.biruTua} />
+                        <FaTrash size={30} color={tema.get().utama} />
                      </Box>
                      <Box>
-                        <Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
+                        <Text c={tema.get().utama} ta='center'>Hapus File</Text>
                      </Box>
                   </Flex>
                </SimpleGrid>
diff --git a/src/module/project/ui/add_member_detail_project.tsx b/src/module/project/ui/add_member_detail_project.tsx
index cdca1c7..a8ecaac 100644
--- a/src/module/project/ui/add_member_detail_project.tsx
+++ b/src/module/project/ui/add_member_detail_project.tsx
@@ -6,12 +6,13 @@ import toast from 'react-hot-toast';
 import { funAddMemberProject, funGetAllMemberById, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
 import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Group, Indicator, rem, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, TEMA, WARNA } from '@/module/_global';
 import { FaCheck } from 'react-icons/fa6';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import { IoArrowBackOutline, IoClose } from 'react-icons/io5';
 import { Carousel } from '@mantine/carousel';
+import { useHookstate } from '@hookstate/core';
 
 export default function AddMemberDetailProject() {
   const router = useRouter()
@@ -24,6 +25,7 @@ export default function AddMemberDetailProject() {
   const [openModal, setOpenModal] = useState(false)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
+  const tema = useHookstate(TEMA)
 
 
   async function getData() {
@@ -124,7 +126,7 @@ export default function AddMemberDetailProject() {
       <LayoutNavbarNew
         back=""
         title="Pilih Anggota"
-        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>}
       />
@@ -135,7 +137,7 @@ export default function AddMemberDetailProject() {
             pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
               maxWidth: rem(550),
               zIndex: 9999,
-              backgroundColor: `${WARNA.biruTua}`,
+              backgroundColor: `${tema.get().utama}`,
               borderBottomLeftRadius: 20,
               borderBottomRightRadius: 20,
             }}>
@@ -151,8 +153,8 @@ export default function AddMemberDetailProject() {
                     input: {
                       color: "white",
                       borderRadius: '#A3A3A3',
-                      borderColor: `${WARNA.biruTua}`,
-                      backgroundColor: `${WARNA.biruTua}`,
+                      borderColor: `${tema.get().utama}`,
+                      backgroundColor: `${tema.get().utama}`,
                     },
                   }}
                   size="md"
@@ -170,7 +172,7 @@ export default function AddMemberDetailProject() {
       <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 100,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
@@ -187,7 +189,7 @@ export default function AddMemberDetailProject() {
                     <Center>
                       <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
                         <Avatar style={{
-                          border: `2px solid ${WARNA.biruTua}`
+                          border: `2px solid ${tema.get().utama}`
                         }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                       </Indicator>
                     </Center>
@@ -208,7 +210,7 @@ export default function AddMemberDetailProject() {
 
       <Box p={20}>
         <Group justify="space-between" mt={100} onClick={handleSelectAll}>
-          <Text c={WARNA.biruTua} fw={"bold"}>
+          <Text c={tema.get().utama} fw={"bold"}>
             Pilih Semua Anggota
           </Text>
           {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
@@ -260,14 +262,14 @@ export default function AddMemberDetailProject() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         {loading ?
           <Skeleton height={50} radius={30} />
           :
           <Button
             c={"white"}
-            bg={WARNA.biruTua}
+            bg={tema.get().utama}
             size="lg"
             radius={30}
             fullWidth
diff --git a/src/module/project/ui/cancel_project.tsx b/src/module/project/ui/cancel_project.tsx
index 8881a8a..e400067 100644
--- a/src/module/project/ui/cancel_project.tsx
+++ b/src/module/project/ui/cancel_project.tsx
@@ -4,14 +4,16 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funCancelProject } from '../lib/api_project';
 import { Box, Button, rem, Stack, Textarea } from '@mantine/core';
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA} from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
 
 export default function CancelProject() {
   const router = useRouter()
   const [alasan, setAlasan] = useState("")
   const [openModal, setOpenModal] = useState(false)
   const param = useParams<{ id: string }>()
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     reason: false,
   });
@@ -67,11 +69,11 @@ export default function CancelProject() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           c={"white"}
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/project/ui/create_date_end_task.tsx b/src/module/project/ui/create_date_end_task.tsx
index c0a9f05..0310803 100644
--- a/src/module/project/ui/create_date_end_task.tsx
+++ b/src/module/project/ui/create_date_end_task.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import { LayoutNavbarNew, TEMA } from "@/module/_global";
 import {
   ActionIcon,
   Avatar,
@@ -21,12 +21,14 @@ import toast from "react-hot-toast";
 import moment from "moment";
 import { IFormDateProject } from "../lib/type_project";
 import { HiChevronLeft } from "react-icons/hi2";
+import { useHookstate } from "@hookstate/core";
 
 
 export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: boolean) => void, onSet: (val: IFormDateProject) => void }) {
   const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
   const router = useRouter()
   const [title, setTitle] = useState("")
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     title: false
   });
@@ -52,7 +54,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
     <Box>
       <LayoutNavbarNew state={
         <Box>
-          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiChevronLeft size={20} color='white' />
           </ActionIcon>
         </Box>
@@ -70,7 +72,7 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
             value={value}
             onChange={setValue}
             size="md"
-            c={WARNA.biruTua}
+            c={tema.get().utama}
           />
         </Group>
         <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -126,11 +128,11 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
           <Button
             c={"white"}
-            bg={WARNA.biruTua}
+            bg={tema.get().utama}
             size="lg"
             radius={30}
             fullWidth
diff --git a/src/module/project/ui/create_project.tsx b/src/module/project/ui/create_project.tsx
index bdc6c3e..45ab3dd 100644
--- a/src/module/project/ui/create_project.tsx
+++ b/src/module/project/ui/create_project.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from "@/module/_global";
 import { Avatar, Box, Button, Center, Divider, Flex, Grid, Group, rem, Select, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
 import { useRouter, useSearchParams } from "next/navigation";
 import React, { useRef, useState } from "react";
@@ -41,6 +41,7 @@ export default function CreateProject() {
   const [indexDelTask, setIndexDelTask] = useState<number>(0)
   const roleLogin = useHookstate(globalRole)
   const isMobile = useMediaQuery('(max-width: 369px)');
+  const tema = useHookstate(TEMA)
 
   const [body, setBody] = useState<any>({
     idGroup: "",
@@ -235,7 +236,7 @@ export default function CreateProject() {
           {
             dataTask.length > 0 &&
             <Box pt={20}>
-              <Text fw={'bold'} c={WARNA.biruTua}>Tanggal & Tugas</Text>
+              <Text fw={'bold'} c={tema.get().utama}>Tanggal & Tugas</Text>
               {
                 dataTask.map((v, i) => {
                   return (
@@ -254,7 +255,7 @@ export default function CreateProject() {
           {
             listFile.length > 0 &&
             <Box pt={20}>
-              <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
+              <Text fw={'bold'} c={tema.get().utama}>File</Text>
               <Box bg={"white"} style={{
                 borderRadius: 10,
                 border: `1px solid ${"#D6D8F6"}`,
@@ -280,8 +281,8 @@ export default function CreateProject() {
             member.length > 0 &&
             <Box pt={30}>
               <Group justify="space-between">
-                <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
-                <Text c={WARNA.biruTua}>Total {member.length} Anggota</Text>
+                <Text c={tema.get().utama}>Anggota Terpilih</Text>
+                <Text c={tema.get().utama}>Total {member.length} Anggota</Text>
               </Group>
               <Box pt={10}>
                 <Box mb={20}>
@@ -305,14 +306,14 @@ export default function CreateProject() {
                                   base: isMobile ? 130 : 140,
                                   xl: 270
                                 }}>
-                                  <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
+                                  <Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
                                     {v.name}
                                   </Text>
                                 </Box>
                               </Group>
                             </Grid.Col>
                             <Grid.Col span={3}>
-                              <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
+                              <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                                 Anggota
                               </Text>
                             </Grid.Col>
@@ -334,11 +335,11 @@ export default function CreateProject() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           color="white"
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
@@ -448,10 +449,10 @@ export default function CreateProject() {
           <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
             <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteFile(indexDelFile)}>
               <Box>
-                <FaTrash size={30} color={WARNA.biruTua} />
+                <FaTrash size={30} color={tema.get().utama} />
               </Box>
               <Box>
-                <Text c={WARNA.biruTua} ta='center'>Hapus File</Text>
+                <Text c={tema.get().utama} ta='center'>Hapus File</Text>
               </Box>
             </Flex>
           </SimpleGrid>
@@ -469,10 +470,10 @@ export default function CreateProject() {
           <SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
             <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => deleteTask(indexDelTask)}>
               <Box>
-                <FaTrash size={30} color={WARNA.biruTua} />
+                <FaTrash size={30} color={tema.get().utama} />
               </Box>
               <Box>
-                <Text c={WARNA.biruTua} ta='center'>Hapus Tugas</Text>
+                <Text c={tema.get().utama} ta='center'>Hapus Tugas</Text>
               </Box>
             </Flex>
           </SimpleGrid>
diff --git a/src/module/project/ui/create_users_project.tsx b/src/module/project/ui/create_users_project.tsx
index 0429b21..ca6718a 100644
--- a/src/module/project/ui/create_users_project.tsx
+++ b/src/module/project/ui/create_users_project.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
@@ -23,6 +23,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
   const [loading, setLoading] = useState(true)
   const [openTugas, setOpenTugas] = useState(false)
   const [onClickSearch, setOnClickSearch] = useState(false)
+  const tema = useHookstate(TEMA)
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -80,12 +81,12 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
     <Box>
       <LayoutNavbarNew state={
         <Box>
-          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiChevronLeft size={20} color='white' />
           </ActionIcon>
         </Box>
       } title="Pilih Anggota"
-        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="search">
+        menu={<ActionIcon onClick={handleSearchClick} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="search">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>}
       />
@@ -96,7 +97,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
             pos={'fixed'} top={0} p={rem(20)} w={"100%"} style={{
               maxWidth: rem(550),
               zIndex: 9999,
-              backgroundColor: `${WARNA.biruTua}`,
+              backgroundColor: `${tema.get().utama}`,
               borderBottomLeftRadius: 20,
               borderBottomRightRadius: 20,
             }}>
@@ -112,8 +113,8 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
                     input: {
                       color: "white",
                       borderRadius: '#A3A3A3',
-                      borderColor: `${WARNA.biruTua}`,
-                      backgroundColor: `${WARNA.biruTua}`,
+                      borderColor: `${tema.get().utama}`,
+                      backgroundColor: `${tema.get().utama}`,
                     },
                   }}
                   size="md"
@@ -131,7 +132,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
       <Box pos={'fixed'} top={80} pl={rem(20)} pr={rem(20)} pt={rem(20)} pb={rem(5)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 100,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
@@ -148,7 +149,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
                     <Center>
                       <Indicator inline size={25} offset={7} position="bottom-end" color="red" withBorder label={<IoClose />}>
                         <Avatar style={{
-                          border: `2px solid ${WARNA.biruTua}`
+                          border: `2px solid ${tema.get().utama}`
                         }} src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                       </Indicator>
                     </Center>
@@ -214,11 +215,11 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           color="white"
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/project/ui/edit_detail_task_project.tsx b/src/module/project/ui/edit_detail_task_project.tsx
index c400dbd..22b6a92 100644
--- a/src/module/project/ui/edit_detail_task_project.tsx
+++ b/src/module/project/ui/edit_detail_task_project.tsx
@@ -6,9 +6,10 @@ import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
 import moment from 'moment';
 import { useShallowEffect } from '@mantine/hooks';
 import { Box, Button, Group, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import { DatePicker } from '@mantine/dates';
 import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
 
 export default function EditDetailTaskProject() {
    const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -16,6 +17,7 @@ export default function EditDetailTaskProject() {
    const param = useParams<{ id: string }>()
    const [openModal, setOpenModal] = useState(false)
    const [loading, setLoading] = useState(true)
+   const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
       title: false,
    });
@@ -88,7 +90,7 @@ export default function EditDetailTaskProject() {
                   value={value}
                   onChange={setValue}
                   size="md"
-                  c={WARNA.biruTua}
+                  c={tema.get().utama}
                />
             </Group>
             <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
@@ -157,14 +159,14 @@ export default function EditDetailTaskProject() {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             {loading ?
                <Skeleton height={50} radius={30} />
                :
             <Button
                c={"white"}
-               bg={WARNA.biruTua}
+               bg={tema.get().utama}
                size="lg"
                radius={30}
                fullWidth
diff --git a/src/module/project/ui/edit_task_project.tsx b/src/module/project/ui/edit_task_project.tsx
index 43038e1..b0cf7ac 100644
--- a/src/module/project/ui/edit_task_project.tsx
+++ b/src/module/project/ui/edit_task_project.tsx
@@ -5,8 +5,9 @@ import toast from 'react-hot-toast';
 import { funEditProject, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
 import { Box, Button, Input, rem, Skeleton, Stack, TextInput } from '@mantine/core';
-import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutNavbarNew, TEMA} from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
+import { useHookstate } from '@hookstate/core';
 
 export default function EditTaskProject() {
   const router = useRouter()
@@ -14,6 +15,7 @@ export default function EditTaskProject() {
   const [openModal, setOpenModal] = useState(false)
   const param = useParams<{ id: string }>()
   const [loading, setLoading] = useState(true)
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     name: false,
   });
@@ -99,14 +101,14 @@ export default function EditTaskProject() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         {loading ?
            <Skeleton height={50} radius={30} />
       :  
         <Button
           c={"white"}
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="lg"
           radius={30}
           fullWidth
diff --git a/src/module/project/ui/list_anggota_detail_project.tsx b/src/module/project/ui/list_anggota_detail_project.tsx
index ffecea1..e0e6281 100644
--- a/src/module/project/ui/list_anggota_detail_project.tsx
+++ b/src/module/project/ui/list_anggota_detail_project.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutDrawer, SkeletonSingle, WARNA } from '@/module/_global';
+import { globalRole, LayoutDrawer, SkeletonSingle, TEMA } from '@/module/_global';
 import { Avatar, Box, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
@@ -22,6 +22,7 @@ export default function ListAnggotaDetailProject() {
   const [dataChoose, setDataChoose] = useState({ id: '', name: '' })
   const router = useRouter()
   const roleLogin = useHookstate(globalRole)
+  const tema = useHookstate(TEMA)
 
   async function getOneData() {
     try {
@@ -67,8 +68,8 @@ const isMobile = useMediaQuery('(max-width: 369px)');
   return (
     <Box pt={20}>
       <Group justify="space-between">
-        <Text c={WARNA.biruTua}>Anggota Terpilih</Text>
-        <Text c={WARNA.biruTua}>Total {isData.length} Anggota</Text>
+        <Text c={tema.get().utama}>Anggota Terpilih</Text>
+        <Text c={tema.get().utama}>Total {isData.length} Anggota</Text>
       </Group>
       <Box pt={10}>
         <Box mb={20}>
@@ -115,7 +116,7 @@ const isMobile = useMediaQuery('(max-width: 369px)');
                             </Group>
                           </Grid.Col>
                           <Grid.Col span={3}>
-                            <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
+                            <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                               Anggota
                             </Text>
                           </Grid.Col>
@@ -135,10 +136,10 @@ const isMobile = useMediaQuery('(max-width: 369px)');
             >
               <Flex onClick={() => { router.push('/member/' + dataChoose.id) }} justify={'center'} align={'center'} direction={'column'} >
                 <Box>
-                  <FaUser size={30} color={WARNA.biruTua} />
+                  <FaUser size={30} color={tema.get().utama} />
                 </Box>
                 <Box>
-                  <Text c={WARNA.biruTua}>Lihat profil</Text>
+                  <Text c={tema.get().utama}>Lihat profil</Text>
                 </Box>
               </Flex>
 
@@ -146,10 +147,10 @@ const isMobile = useMediaQuery('(max-width: 369px)');
                 (roleLogin.get() != "user" && roleLogin.get() != "coadmin") &&
                 <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                    <IoIosCloseCircle size={30} color={WARNA.biruTua} />
+                    <IoIosCloseCircle size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                    <Text c={WARNA.biruTua}>Keluarkan anggota</Text>
+                    <Text c={tema.get().utama}>Keluarkan anggota</Text>
                   </Box>
                 </Flex>
               }
diff --git a/src/module/project/ui/list_file_detail_project.tsx b/src/module/project/ui/list_file_detail_project.tsx
index 91a020c..da36a83 100644
--- a/src/module/project/ui/list_file_detail_project.tsx
+++ b/src/module/project/ui/list_file_detail_project.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutModalViewFile, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutModalViewFile, TEMA } from '@/module/_global';
 import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
@@ -10,6 +10,7 @@ import { IDataFileProject } from '../lib/type_project';
 import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { FaTrash } from 'react-icons/fa6';
+import { useHookstate } from '@hookstate/core';
 
 export default function ListFileDetailProject() {
   const [isData, setData] = useState<IDataFileProject[]>([])
@@ -22,6 +23,7 @@ export default function ListFileDetailProject() {
   const [isOpenModal, setOpenModal] = useState(false)
   const [isOpenModalView, setOpenModalView] = useState(false)
   const [isExtension, setExtension] = useState('')
+  const tema = useHookstate(TEMA)
 
   async function getOneData() {
     try {
@@ -68,7 +70,7 @@ export default function ListFileDetailProject() {
   return (
     <>
       <Box pt={20}>
-        <Text fw={'bold'} c={WARNA.biruTua}>File</Text>
+        <Text fw={'bold'} c={tema.get().utama}>File</Text>
         <Box bg={"white"} style={{
           borderRadius: 10,
           border: `1px solid ${"#D6D8F6"}`,
@@ -140,19 +142,19 @@ export default function ListFileDetailProject() {
               >
                 <Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                    <BsFileTextFill size={30} color={WARNA.biruTua} />
+                    <BsFileTextFill size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                    <Text c={WARNA.biruTua}>Lihat file</Text>
+                    <Text c={tema.get().utama}>Lihat file</Text>
                   </Box>
                 </Flex>
 
                 <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                    <FaTrash size={30} color={WARNA.biruTua} />
+                    <FaTrash size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                    <Text c={WARNA.biruTua}>Hapus file</Text>
+                    <Text c={tema.get().utama}>Hapus file</Text>
                   </Box>
                 </Flex>
               </SimpleGrid>
diff --git a/src/module/project/ui/list_project.tsx b/src/module/project/ui/list_project.tsx
index 79719ca..4ef28da 100644
--- a/src/module/project/ui/list_project.tsx
+++ b/src/module/project/ui/list_project.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { globalRole, WARNA } from '@/module/_global';
+import { globalRole, TEMA, WARNA } from '@/module/_global';
 import { ActionIcon, Avatar, Badge, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React, { useState } from 'react';
@@ -24,6 +24,7 @@ export default function ListProject() {
   const [searchQuery, setSearchQuery] = useState('')
   const roleLogin = useHookstate(globalRole)
   const [nameGroup, setNameGroup] = useState('')
+  const tema = useHookstate(TEMA)
 
   const fetchData = async () => {
     try {
@@ -61,7 +62,7 @@ export default function ListProject() {
           <TextInput
             styles={{
               input: {
-                color: WARNA.biruTua,
+                color: tema.get().utama,
                 borderRadius: '#A3A3A3',
                 borderColor: '#A3A3A3',
               },
@@ -77,9 +78,9 @@ export default function ListProject() {
         <Grid.Col span={'auto'}>
           <Flex justify={'center'}>
             {isList ? (
-              <HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
+              <HiOutlineListBullet size={35} color={tema.get().utama} onClick={handleList} />
             ) : (
-              <HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
+              <HiSquares2X2 size={35} color={tema.get().utama} onClick={handleList} />
             )}
           </Flex>
         </Grid.Col>
@@ -91,10 +92,10 @@ export default function ListProject() {
             <Skeleton width={"100%"} height={100} radius={"md"} />
           </Box>
           :
-          <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-            <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
+          <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
+            <Text fw={'bold'} c={tema.get().utama}>Total Kegiatan</Text>
             <Flex justify={'center'} align={'center'} h={'100%'}>
-              <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
+              <Text fz={40} fw={'bold'} c={tema.get().utama}>{isData.length}</Text>
             </Flex>
           </Box>
         }
@@ -115,13 +116,14 @@ export default function ListProject() {
                             size={50}
                             aria-label="Gradient action icon"
                             radius={100}
-                            gradient={{
-                              from: '#DFDA7C',
-                              to: '#F2AF46',
-                              deg: 174
-                            }}
+                            // gradient={{
+                            //   from: '#DFDA7C',
+                            //   to: '#F2AF46',
+                            //   deg: 174
+                            // }}
+                            bg={tema.get().bgFiturHome}
                           >
-                            <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
+                            <HiMiniPresentationChartBar size={25} color={tema.get().utama} />
                           </ActionIcon>
                         </Center>
                       </Group>
@@ -179,7 +181,7 @@ export default function ListProject() {
                     <Box key={i} mb={20}>
                       <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`/project/${v.id}`)}>
                         <Card.Section>
-                          <Box h={120} bg={WARNA.biruTua}>
+                          <Box h={120} bg={tema.get().utama}>
                             <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
                               <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
                             </Flex>
@@ -203,7 +205,7 @@ export default function ListProject() {
                               }</Badge>
                             <Avatar.Group>
                               <Avatar>
-                                <MdAccountCircle size={32} color={WARNA.biruTua} />
+                                <MdAccountCircle size={32} color={tema.get().utama} />
                               </Avatar>
                               <Avatar>+{v.member - 1}</Avatar>
                             </Avatar.Group>
diff --git a/src/module/project/ui/list_tugas_detail_project.tsx b/src/module/project/ui/list_tugas_detail_project.tsx
index af31574..81624dd 100644
--- a/src/module/project/ui/list_tugas_detail_project.tsx
+++ b/src/module/project/ui/list_tugas_detail_project.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, SkeletonDetailListTugasTask, WARNA } from '@/module/_global';
+import { LayoutDrawer, SkeletonDetailListTugasTask, TEMA } from '@/module/_global';
 import { Box, Center, Checkbox, Divider, Flex, Grid, Group, SimpleGrid, Stack, Text } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
@@ -24,6 +24,7 @@ export default function ListTugasDetailProject() {
   const [openDrawerStatus, setOpenDrawerStatus] = useState(false)
   const [isOpenModal, setOpenModal] = useState(false)
   const router = useRouter()
+  const tema = useHookstate(TEMA)
 
   async function getOneData() {
     try {
@@ -87,7 +88,7 @@ export default function ListTugasDetailProject() {
   return (
     <>
       <Box pt={20}>
-        <Text fw={"bold"} c={WARNA.biruTua}>
+        <Text fw={"bold"} c={tema.get().utama}>
           Tanggal & Tugas
         </Text>
         <Box
@@ -174,28 +175,28 @@ export default function ListTugasDetailProject() {
               >
                 <Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                    <AiOutlineFileDone size={30} color={WARNA.biruTua} />
+                    <AiOutlineFileDone size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                    <Text c={WARNA.biruTua}>Update status</Text>
+                    <Text c={tema.get().utama}>Update status</Text>
                   </Box>
                 </Flex>
 
                 <Flex onClick={() => { router.push('update/' + idData) }} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                    <FaPencil size={30} color={WARNA.biruTua} />
+                    <FaPencil size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                    <Text c={WARNA.biruTua}>Edit tugas</Text>
+                    <Text c={tema.get().utama}>Edit tugas</Text>
                   </Box>
                 </Flex>
 
                 <Flex onClick={() => { setOpenModal(true) }} justify={'center'} align={'center'} direction={'column'} >
                   <Box>
-                    <FaTrash size={30} color={WARNA.biruTua} />
+                    <FaTrash size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                    <Text c={WARNA.biruTua}>Hapus tugas</Text>
+                    <Text c={tema.get().utama}>Hapus tugas</Text>
                   </Box>
                 </Flex>
               </SimpleGrid>
diff --git a/src/module/project/ui/menu_drawer_project.tsx b/src/module/project/ui/menu_drawer_project.tsx
index f29e6ef..11c3aaf 100644
--- a/src/module/project/ui/menu_drawer_project.tsx
+++ b/src/module/project/ui/menu_drawer_project.tsx
@@ -1,4 +1,4 @@
-import { globalRole, WARNA } from '@/module/_global';
+import { globalRole, TEMA, WARNA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useSearchParams } from 'next/navigation';
@@ -10,6 +10,7 @@ export default function MenuDrawerProject() {
   const roleLogin = useHookstate(globalRole)
   const searchParams = useSearchParams()
   const group = searchParams.get('group')
+  const tema = useHookstate(TEMA)
 
   return (
     <Box>
@@ -19,20 +20,20 @@ export default function MenuDrawerProject() {
         >
           <Flex onClick={() => window.location.href = "/project/create"} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <IoAddCircle size={30} color={WARNA.biruTua} />
+              <IoAddCircle size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>Tambah Kegiatan</Text>
+              <Text c={tema.get().utama}>Tambah Kegiatan</Text>
             </Box>
           </Flex>
           {
             roleLogin.get() == "supadmin" &&
             <Flex onClick={() => window.location.href = "/project?page=filter&group=" + group} justify={'center'} align={'center'} direction={'column'} >
               <Box>
-                <HiOutlineFilter size={30} color={WARNA.biruTua} />
+                <HiOutlineFilter size={30} color={tema.get().utama} />
               </Box>
               <Box>
-                <Text c={WARNA.biruTua}>Filter</Text>
+                <Text c={tema.get().utama}>Filter</Text>
               </Box>
             </Flex>
           }
diff --git a/src/module/project/ui/navbar_detail_project.tsx b/src/module/project/ui/navbar_detail_project.tsx
index 3ff93ad..67ebe89 100644
--- a/src/module/project/ui/navbar_detail_project.tsx
+++ b/src/module/project/ui/navbar_detail_project.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
 import { ActionIcon, Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -18,6 +18,7 @@ export default function NavbarDetailProject() {
   const [name, setName] = useState('')
   const [isOpen, setOpen] = useState(false)
   const roleLogin = useHookstate(globalRole)
+  const tema = useHookstate(TEMA)
 
   async function getOneData() {
     try {
@@ -43,7 +44,7 @@ export default function NavbarDetailProject() {
       <LayoutNavbarNew back="/project?status=0" title={name} menu={
         <ActionIcon
           variant="light"
-          bg={WARNA.bgIcon}
+          bg={tema.get().bgIcon}
           size="lg"
           radius="lg"
           aria-label="Settings"
@@ -68,10 +69,10 @@ export default function NavbarDetailProject() {
                 }}
               >
                 <Box>
-                  <IoAddCircle size={30} color={WARNA.biruTua} />
+                  <IoAddCircle size={30} color={tema.get().utama} />
                 </Box>
                 <Box>
-                  <Text c={WARNA.biruTua} ta='center'>Tambah Tugas</Text>
+                  <Text c={tema.get().utama} ta='center'>Tambah Tugas</Text>
                 </Box>
               </Flex>
 
@@ -84,10 +85,10 @@ export default function NavbarDetailProject() {
                 }}
               >
                 <Box>
-                  <FaFileCirclePlus size={30} color={WARNA.biruTua} />
+                  <FaFileCirclePlus size={30} color={tema.get().utama} />
                 </Box>
                 <Box>
-                  <Text c={WARNA.biruTua} ta='center'>Tambah file</Text>
+                  <Text c={tema.get().utama} ta='center'>Tambah file</Text>
                 </Box>
               </Flex>
 
@@ -103,10 +104,10 @@ export default function NavbarDetailProject() {
                     }}
                   >
                     <Box>
-                      <FaUsers size={30} color={WARNA.biruTua} />
+                      <FaUsers size={30} color={tema.get().utama} />
                     </Box>
                     <Box>
-                      <Text c={WARNA.biruTua} ta='center'>Tambah anggota</Text>
+                      <Text c={tema.get().utama} ta='center'>Tambah anggota</Text>
                     </Box>
                   </Flex>
 
@@ -117,10 +118,10 @@ export default function NavbarDetailProject() {
                     onClick={() => { router.push(param.id + '/edit') }}
                   >
                     <Box>
-                      <FaPencil size={30} color={WARNA.biruTua} />
+                      <FaPencil size={30} color={tema.get().utama} />
                     </Box>
                     <Box>
-                      <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                      <Text c={tema.get().utama} ta='center'>Edit</Text>
                     </Box>
                   </Flex>
 
@@ -131,10 +132,10 @@ export default function NavbarDetailProject() {
                     onClick={() => { router.push(param.id + '/cancel') }}
                   >
                     <Box>
-                      <MdCancel size={30} color={WARNA.biruTua} />
+                      <MdCancel size={30} color={tema.get().utama} />
                     </Box>
                     <Box>
-                      <Text c={WARNA.biruTua} ta='center'>Batal</Text>
+                      <Text c={tema.get().utama} ta='center'>Batal</Text>
                     </Box>
                   </Flex>
                 </>
diff --git a/src/module/project/ui/progress_detail_project.tsx b/src/module/project/ui/progress_detail_project.tsx
index 85f0c20..77f34f6 100644
--- a/src/module/project/ui/progress_detail_project.tsx
+++ b/src/module/project/ui/progress_detail_project.tsx
@@ -1,5 +1,4 @@
 'use client'
-import { WARNA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Box, Grid, Progress, Skeleton, Text } from '@mantine/core';
 import { useParams } from 'next/navigation';
@@ -9,6 +8,7 @@ import { globalRefreshProject } from '../lib/val_project';
 import toast from 'react-hot-toast';
 import { funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
+import { TEMA } from '@/module/_global';
 
 export default function ProgressDetailProject() {
   const [valProgress, setValProgress] = useState(0)
@@ -16,6 +16,7 @@ export default function ProgressDetailProject() {
   const param = useParams<{ id: string }>()
   const refresh = useHookstate(globalRefreshProject)
   const [loading, setLoading] = useState(true)
+  const tema = useHookstate(TEMA)
 
   async function getOneData() {
     try {
@@ -71,9 +72,10 @@ export default function ProgressDetailProject() {
                 size={68}
                 aria-label="Gradient action icon"
                 radius={100}
-                gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
+                  // gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
+                  bg={tema.get().bgFiturHome}
               >
-                <HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
+                <HiMiniPresentationChartBar size={35} color={tema.get().utama} />
               </ActionIcon>
             </Grid.Col>
             <Grid.Col span={9}>
@@ -84,7 +86,7 @@ export default function ProgressDetailProject() {
                     border: `1px solid ${"#BDBDBD"}`,
                   }}
                   w={"100%"}
-                  color="#FCAA4B"
+                  color={tema.get().bgFiturHome}
                   radius="md"
                   size="xl"
                   value={valProgress}
diff --git a/src/module/project/ui/results_date-and_task.tsx b/src/module/project/ui/results_date-and_task.tsx
index d8cdf10..95cfe47 100644
--- a/src/module/project/ui/results_date-and_task.tsx
+++ b/src/module/project/ui/results_date-and_task.tsx
@@ -1,4 +1,3 @@
-import { WARNA } from '@/module/_global';
 import { Box, Center, Grid, Group, SimpleGrid, Spoiler, Text } from '@mantine/core';
 import React from 'react';
 import { AiOutlineFileSync } from "react-icons/ai";
diff --git a/src/module/project/ui/results_file.tsx b/src/module/project/ui/results_file.tsx
index b052254..86c1f4d 100644
--- a/src/module/project/ui/results_file.tsx
+++ b/src/module/project/ui/results_file.tsx
@@ -1,4 +1,4 @@
-import { WARNA } from '@/module/_global';
+
 import { Box, Center, Grid, Group, Text } from '@mantine/core';
 import React from 'react';
 import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
@@ -14,15 +14,19 @@ export default function ResultsFile({ name, extension }: IListFileTaskProject) {
       <Grid gutter={"sm"} justify='flex-start' align='flex-start'>
         <Grid.Col span={"auto"}>
           <Center >
-        {extension == "pdf" && <BsFiletypePdf size={30} />}
-        {extension == "csv" && <BsFiletypeCsv size={30} />}
-        {extension == "png" && <BsFiletypePng size={30} />}
-        {extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={30} />}
-        {extension == "heic" && <BsFiletypeHeic size={30} />}
+            {extension == "pdf" && <BsFiletypePdf size={30} />}
+            {extension == "csv" && <BsFiletypeCsv size={30} />}
+            {extension == "png" && <BsFiletypePng size={30} />}
+            {extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={30} />}
+            {extension == "heic" && <BsFiletypeHeic size={30} />}
           </Center>
         </Grid.Col>
         <Grid.Col span={10}>
-        <Text lineClamp={1}>{name}</Text>
+          <Text lineClamp={1}
+            style={{
+              overflowWrap: "break-word"
+            }}
+          >{name}</Text>
         </Grid.Col>
       </Grid>
       <Group>
diff --git a/src/module/project/ui/tab_project.tsx b/src/module/project/ui/tab_project.tsx
index 55b284f..6da18d5 100644
--- a/src/module/project/ui/tab_project.tsx
+++ b/src/module/project/ui/tab_project.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA } from '@/module/_global';
 import { ActionIcon, Box, Button, Flex, Group, Indicator, Progress, rem, SimpleGrid, Tabs } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMenu } from 'react-icons/hi';
@@ -21,6 +21,7 @@ export default function TabProject() {
   const group = searchParams.get("group");
   const iconStyle = { width: rem(20), height: rem(20) };
   const roleLogin = useHookstate(globalRole)
+  const tema = useHookstate(TEMA)
 
   const dataStatus = [
     {
@@ -49,7 +50,7 @@ export default function TabProject() {
     <Box>
       <LayoutNavbarNew back='/home' title='Kegiatan'
         menu={(roleLogin.get() != "user" && roleLogin.get() != "coadmin") ?
-          <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiMenu size={20} color='white' />
           </ActionIcon>
           : <></>
@@ -64,14 +65,14 @@ export default function TabProject() {
                 color={
                   status == item.id
                     ? "white"
-                    : WARNA.biruTua
+                    : tema.get().utama
                 }
                 onClick={() => { router.push("?status=" + item.id + "&group=" + group) }}
                 defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
                 radius={"xl"}
                 bg={
                   status == item.id
-                    ? WARNA.biruTua
+                    ? tema.get().utama
                     : "transparent"
                 }
               >
@@ -86,7 +87,7 @@ export default function TabProject() {
             <Box key={i}>
               <Box w={6} h={6} bg={
                 status == v.id
-                  ? WARNA.biruTua
+                  ? tema.get().utama
                   : "#B0AEAE"
               } style={{
                 borderRadius: 100
@@ -102,27 +103,27 @@ export default function TabProject() {
             <Tabs.Tab value="0"
               leftSection={<TbClockPause style={iconStyle} />}
               onClick={() => { router.push("?status=0&group=" + group) }}
-              color={WARNA.biruTua}
+              color={tema.get().utama}
             >
               Segera
             </Tabs.Tab>
             <Tabs.Tab value="1"
               leftSection={<RiProgress3Line style={iconStyle} />}
               onClick={() => { router.push("?status=1&group=" + group) }}
-              color={WARNA.biruTua}
+              color={tema.get().utama}
             >
               Dikerjakan
             </Tabs.Tab>
             <Tabs.Tab value="2"
               leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
               onClick={() => { router.push("?status=2&group=" + group) }}
-              color={WARNA.biruTua}>
+              color={tema.get().utama}>
               Selesai
             </Tabs.Tab>
             <Tabs.Tab value="3"
               leftSection={<IoCloseCircleOutline style={iconStyle} />}
               onClick={() => { router.push("?status=3&group=" + group) }}
-              color={WARNA.biruTua}>
+              color={tema.get().utama}>
               Batal
             </Tabs.Tab>
           </SimpleGrid>
@@ -133,27 +134,27 @@ export default function TabProject() {
             <Tabs.Tab value="0" w={"23%"}
               leftSection={<TbClockPause style={iconStyle} />}
               onClick={() => { router.push("?status=0&group=" + group) }}
-              color={WARNA.biruTua}
+              color={tema.get().utama}
             >
               Segera
             </Tabs.Tab>
             <Tabs.Tab value="1" w={"28%"}
               leftSection={<RiProgress3Line style={iconStyle} />}
               onClick={() => { router.push("?status=1&group=" + group) }}
-              color={WARNA.biruTua}
+              color={tema.get().utama}
             >
               Dikerjakan
             </Tabs.Tab>
             <Tabs.Tab value="2" w={"23%"}
               leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
               onClick={() => { router.push("?status=2&group=" + group) }}
-              color={WARNA.biruTua}>
+              color={tema.get().utama}>
               Selesai
             </Tabs.Tab>
             <Tabs.Tab value="3" w={"20%"}
               leftSection={<IoCloseCircleOutline style={iconStyle} />}
               onClick={() => { router.push("?status=3&group=" + group) }}
-              color={WARNA.biruTua}>
+              color={tema.get().utama}>
               Batal
             </Tabs.Tab>
           </Tabs.List>
diff --git a/src/module/user/member/ui/create_member.tsx b/src/module/user/member/ui/create_member.tsx
index 3498b76..8276d7a 100644
--- a/src/module/user/member/ui/create_member.tsx
+++ b/src/module/user/member/ui/create_member.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { globalRole, WARNA } from "@/module/_global";
+import { globalRole, TEMA, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { Avatar, Box, Button, Indicator, rem, Select, Stack, Text, TextInput } from "@mantine/core";
@@ -27,6 +27,7 @@ export default function CreateMember() {
   const [img, setIMG] = useState<any | null>()
   const [imgForm, setImgForm] = useState<any>()
   const openRef = useRef<() => void>(null)
+  const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
     nik: false,
     name: false,
@@ -171,7 +172,7 @@ export default function CreateMember() {
           }}
         >
         </Dropzone>
-        <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
+        <Indicator offset={20} withBorder inline color={tema.get().bgIcon} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
           <Avatar
             size="150"
             radius={"100"}
@@ -190,9 +191,9 @@ export default function CreateMember() {
             radius={30}
             styles={{
               input: {
-                color: WARNA.biruTua,
-                borderRadius: WARNA.biruTua,
-                borderColor: WARNA.biruTua,
+                color: tema.get().utama,
+                borderRadius: tema.get().utama,
+                borderColor: tema.get().utama,
               },
             }}
             data={
@@ -225,9 +226,9 @@ export default function CreateMember() {
           radius={30}
           styles={{
             input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
+              color: tema.get().utama,
+              borderRadius: tema.get().utama,
+              borderColor: tema.get().utama,
             },
           }}
           data={
@@ -264,9 +265,9 @@ export default function CreateMember() {
           radius={30}
           styles={{
             input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
+              color: tema.get().utama,
+              borderRadius: tema.get().utama,
+              borderColor: tema.get().utama,
             },
           }}
           data={
@@ -302,9 +303,9 @@ export default function CreateMember() {
           w={"100%"}
           styles={{
             input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
+              color: tema.get().utama,
+              borderRadius: tema.get().utama,
+              borderColor: tema.get().utama,
             },
           }}
           onChange={(event: any) => {
@@ -329,9 +330,9 @@ export default function CreateMember() {
           w={"100%"}
           styles={{
             input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
+              color: tema.get().utama,
+              borderRadius: tema.get().utama,
+              borderColor: tema.get().utama,
             },
           }}
           onChange={(event: any) => {
@@ -359,9 +360,9 @@ export default function CreateMember() {
           w={"100%"}
           styles={{
             input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
+              color: tema.get().utama,
+              borderRadius: tema.get().utama,
+              borderColor: tema.get().utama,
             },
           }}
           onChange={(event: any) => {
@@ -391,9 +392,9 @@ export default function CreateMember() {
           w={"100%"}
           styles={{
             input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
+              color: tema.get().utama,
+              borderRadius: tema.get().utama,
+              borderColor: tema.get().utama,
             },
           }}
           onChange={(event: any) => {
@@ -422,9 +423,9 @@ export default function CreateMember() {
           radius={30}
           styles={{
             input: {
-              color: WARNA.biruTua,
-              borderRadius: WARNA.biruTua,
-              borderColor: WARNA.biruTua,
+              color: tema.get().utama,
+              borderRadius: tema.get().utama,
+              borderColor: tema.get().utama,
             },
           }}
           data={[
@@ -450,11 +451,11 @@ export default function CreateMember() {
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
         maxWidth: rem(550),
         zIndex: 999,
-        backgroundColor: `${WARNA.bgWhite}`,
+        backgroundColor: `${tema.get().bgUtama}`,
       }}>
         <Button
           c={"white"}
-          bg={WARNA.biruTua}
+          bg={tema.get().utama}
           size="md"
           radius={30}
           fullWidth
diff --git a/src/module/user/member/ui/drawer_detail_member.tsx b/src/module/user/member/ui/drawer_detail_member.tsx
index da190e8..2d2a48a 100644
--- a/src/module/user/member/ui/drawer_detail_member.tsx
+++ b/src/module/user/member/ui/drawer_detail_member.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { WARNA } from "@/module/_global";
+import { TEMA, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -9,6 +9,7 @@ import toast from "react-hot-toast";
 import { FaPencil, FaToggleOff } from "react-icons/fa6";
 import { ImUserCheck } from "react-icons/im";
 import { funEditStatusMember } from "../lib/api_member";
+import { useHookstate } from "@hookstate/core";
 
 export default function DrawerDetailMember({
   onDeleted,
@@ -21,20 +22,22 @@ export default function DrawerDetailMember({
 }) {
   const router = useRouter();
   const [isModal, setModal] = useState(false);
+  const tema = useHookstate(TEMA)
 
   async function nonActive(val: boolean) {
     try {
-      const res = await funEditStatusMember(id, {
-        isActive: status,
-      });
-
-      if (res.success) {
-        toast.success(res.message);
-        onDeleted(true);
-      } else {
-        onDeleted(false);
+      if (val) {
+        const res = await funEditStatusMember(id, {
+          isActive: true,
+        });
+        if (res.success) {
+          toast.success(res.message);
+          router.push("/member?active=true");
+          onDeleted(true);
+        } else {
+          onDeleted(false);
+        }
       }
-      router.push("/member?active=true");
       setModal(false);
     } catch (error) {
       console.error(error);
@@ -57,10 +60,10 @@ export default function DrawerDetailMember({
             }}
           >
             <Box>
-              <FaToggleOff size={30} color={WARNA.biruTua} />
+              <FaToggleOff size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua} ta="center">
+              <Text c={tema.get().utama} ta="center">
                 {" "}
                 {status === false ? "Aktifkan" : "Non Aktifkan"}
               </Text>
@@ -77,10 +80,10 @@ export default function DrawerDetailMember({
             }}
           >
             <Box>
-              <FaPencil size={30} color={WARNA.biruTua} />
+              <FaPencil size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua} ta="center">
+              <Text c={tema.get().utama} ta="center">
                 Edit
               </Text>
             </Box>
diff --git a/src/module/user/member/ui/drawer_list_member.tsx b/src/module/user/member/ui/drawer_list_member.tsx
index 071556e..e512fff 100644
--- a/src/module/user/member/ui/drawer_list_member.tsx
+++ b/src/module/user/member/ui/drawer_list_member.tsx
@@ -1,4 +1,4 @@
-import { globalRole, WARNA } from '@/module/_global';
+import { globalRole, TEMA, WARNA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { Box, Flex, SimpleGrid, Stack, Text } from '@mantine/core';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -11,6 +11,7 @@ export default function DrawerListMember() {
    const roleLogin = useHookstate(globalRole)
    const searchParams = useSearchParams()
    const group = searchParams.get('group')
+   const tema = useHookstate(TEMA)
 
    return (
       <Box>
@@ -27,10 +28,10 @@ export default function DrawerListMember() {
                   }}
                >
                   <Box>
-                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                     <IoAddCircle size={30} color={tema.get().utama} />
                   </Box>
                   <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Tambah Anggota</Text>
+                     <Text c={tema.get().utama} ta='center'>Tambah Anggota</Text>
                   </Box>
                </Flex>
                {
@@ -42,10 +43,10 @@ export default function DrawerListMember() {
                      }}
                   >
                      <Box>
-                        <RiFilter2Line size={30} color={WARNA.biruTua} />
+                        <RiFilter2Line size={30} color={tema.get().utama} />
                      </Box>
                      <Box>
-                        <Text c={WARNA.biruTua} ta='center'>Filter</Text>
+                        <Text c={tema.get().utama} ta='center'>Filter</Text>
                      </Box>
                   </Flex>
                }
diff --git a/src/module/user/member/ui/edit_member.tsx b/src/module/user/member/ui/edit_member.tsx
index 98d786d..2a8197e 100644
--- a/src/module/user/member/ui/edit_member.tsx
+++ b/src/module/user/member/ui/edit_member.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, WARNA } from "@/module/_global";
+import { globalRole, TEMA, WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { funGetAllPosition } from "@/module/position/lib/api_position";
@@ -29,6 +29,7 @@ export default function EditMember({ id }: { id: string }) {
    const [img, setIMG] = useState<any | null>()
    const [loading, setLoading] = useState(true)
    const roleLogin = useHookstate(globalRole)
+   const tema = useHookstate(TEMA)
    const [touched, setTouched] = useState({
       nik: false,
       name: false,
@@ -172,7 +173,7 @@ export default function EditMember({ id }: { id: string }) {
             {loading ?
                <Skeleton height={150} width={150} radius={"100"} />
                :
-               <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
+               <Indicator offset={20} withBorder inline color={tema.get().bgIcon} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
                   <Avatar
                      size="150"
                      radius={"100"}
@@ -197,9 +198,9 @@ export default function EditMember({ id }: { id: string }) {
                      placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      data={
@@ -226,9 +227,9 @@ export default function EditMember({ id }: { id: string }) {
                      placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      data={
@@ -255,9 +256,9 @@ export default function EditMember({ id }: { id: string }) {
                      placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      data={
@@ -284,9 +285,9 @@ export default function EditMember({ id }: { id: string }) {
                      size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      onChange={(e) => {
@@ -306,9 +307,9 @@ export default function EditMember({ id }: { id: string }) {
                      size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      onChange={(e) => {
@@ -327,9 +328,9 @@ export default function EditMember({ id }: { id: string }) {
                      size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      onChange={(e) => {
@@ -349,9 +350,9 @@ export default function EditMember({ id }: { id: string }) {
                      size="md" type="number" radius={30} withAsterisk label="Nomor Telepon" w={"100%"}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      placeholder="8xxx xxxx xxxx"
@@ -373,9 +374,9 @@ export default function EditMember({ id }: { id: string }) {
                      placeholder="Jenis Kelamin" label="Jenis Kelamin" w={"100%"} size="md" required withAsterisk radius={30}
                      styles={{
                         input: {
-                           color: WARNA.biruTua,
-                           borderRadius: WARNA.biruTua,
-                           borderColor: WARNA.biruTua,
+                           color: tema.get().utama,
+                           borderRadius: tema.get().utama,
+                           borderColor: tema.get().utama,
                         },
                      }}
                      data={
@@ -408,14 +409,14 @@ export default function EditMember({ id }: { id: string }) {
          <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
+            backgroundColor: `${tema.get().bgUtama}`,
          }}>
             {loading ?
                <Skeleton height={50} radius={30} />
                :
                <Button
                   c={"white"}
-                  bg={WARNA.biruTua}
+                  bg={tema.get().utama}
                   size="md"
                   radius={30}
                   fullWidth
diff --git a/src/module/user/member/ui/list_member.tsx b/src/module/user/member/ui/list_member.tsx
index d5e4f1a..4f70e1d 100644
--- a/src/module/user/member/ui/list_member.tsx
+++ b/src/module/user/member/ui/list_member.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { WARNA } from "@/module/_global";
+import { TEMA, WARNA } from "@/module/_global";
 import { Box, rem, Tabs, TextInput } from "@mantine/core";
 import React from "react";
 import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2";
@@ -7,6 +7,7 @@ import { IoMdCheckmarkCircleOutline } from "react-icons/io";
 import { IoCloseCircleOutline } from "react-icons/io5";
 import TabListMember from "./tab_list_member";
 import { useRouter, useSearchParams } from "next/navigation";
+import { useHookstate } from "@hookstate/core";
 
 export default function ListMember() {
   const iconStyle = { width: rem(20), height: rem(20) };
@@ -14,12 +15,13 @@ export default function ListMember() {
   const searchParams = useSearchParams();
   const status = searchParams.get("active");
   const group = searchParams.get("group");
+  const tema = useHookstate(TEMA)
 
   return (
     <Box p={20}>
       <Tabs
         variant="pills"
-        color="#FF9861"
+        color={tema.get().bgFiturHome}
         radius="xl"
         defaultValue={status == "false" ? "false" : "true"}
       >
diff --git a/src/module/user/member/ui/navbar_detail_member.tsx b/src/module/user/member/ui/navbar_detail_member.tsx
index 57e8d6d..8330044 100644
--- a/src/module/user/member/ui/navbar_detail_member.tsx
+++ b/src/module/user/member/ui/navbar_detail_member.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile, globalRole } from "@/module/_global";
+import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, SkeletonDetailProfile, globalRole, TEMA } from "@/module/_global";
 import { Box, Group, ActionIcon, Stack, Text, Center, Avatar, Skeleton, Grid } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import DrawerDetailMember from "./drawer_detail_member";
@@ -24,6 +24,7 @@ export default function NavbarDetailMember({ id }: IMember) {
    const [loading, setLoading] = useState(true)
    const [isEdit, setEdit] = useState(false)
    const roleLogin = useHookstate(globalRole)
+   const tema = useHookstate(TEMA)
 
    useShallowEffect(() => {
       featchGetOne()
@@ -61,7 +62,7 @@ export default function NavbarDetailMember({ id }: IMember) {
                   <LayoutIconBack />
                   {
                      (roleLogin.get() != "user") && isEdit &&
-                     <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
+                     <ActionIcon onClick={() => setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Info">
                         <HiMenu size={20} color='white' />
                      </ActionIcon>
                   }
diff --git a/src/module/user/member/ui/navbar_list_member.tsx b/src/module/user/member/ui/navbar_list_member.tsx
index 773cda6..f678ed8 100644
--- a/src/module/user/member/ui/navbar_list_member.tsx
+++ b/src/module/user/member/ui/navbar_list_member.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { globalRole, LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { globalRole, LayoutDrawer, LayoutNavbarNew, TEMA, WARNA } from "@/module/_global";
 import { ActionIcon } from "@mantine/core";
 import { HiMenu } from "react-icons/hi";
 import DrawerListMember from "./drawer_list_member";
@@ -9,12 +9,13 @@ import { useHookstate } from "@hookstate/core";
 export default function NavbarListMember() {
    const [isOpenDrawer, setOpenDrawer] = useState(false)
    const roleLogin = useHookstate(globalRole)
+   const tema = useHookstate(TEMA)
 
    return (
       <>
          <LayoutNavbarNew back="/home" title="Anggota"
             menu={(roleLogin.get() != "user") ?
-               <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+               <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
                   <HiMenu size={20} color='white' />
                </ActionIcon>
                : <></>
diff --git a/src/module/user/member/ui/tab_list_member.tsx b/src/module/user/member/ui/tab_list_member.tsx
index 98ad48d..c7ec9ef 100644
--- a/src/module/user/member/ui/tab_list_member.tsx
+++ b/src/module/user/member/ui/tab_list_member.tsx
@@ -1,5 +1,5 @@
 
-import { globalRole, SkeletonSingle, WARNA } from "@/module/_global"
+import { globalRole, SkeletonSingle, TEMA, WARNA } from "@/module/_global"
 import { Box, Text, TextInput, Divider, Avatar, Grid } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
@@ -23,6 +23,7 @@ export default function TabListMember() {
    const status = searchParams.get('active')
    const roleLogin = useHookstate(globalRole)
    const [nameGroup, setNameGroup] = useState('')
+   const tema = useHookstate(TEMA)
 
 
    async function getAllUser() {
@@ -53,9 +54,9 @@ export default function TabListMember() {
             <TextInput
                styles={{
                   input: {
-                     color: WARNA.biruTua,
-                     borderRadius: WARNA.biruTua,
-                     borderColor: WARNA.biruTua,
+                     color: tema.get().utama,
+                     borderRadius: tema.get().utama,
+                     borderColor: tema.get().utama,
                   },
                }}
                size="md"
@@ -95,7 +96,7 @@ export default function TabListMember() {
                                        <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} size={50} alt="image" />
                                     </Grid.Col>
                                     <Grid.Col span={9}>
-                                       <Text fw={'bold'} c={WARNA.biruTua} lineClamp={1}>{_.startCase(v.name)}</Text>
+                                       <Text fw={'bold'} c={tema.get().utama} lineClamp={1}>{_.startCase(v.name)}</Text>
                                        <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
                                     </Grid.Col>
                                  </Grid>
diff --git a/src/module/user/profile/ui/profile.tsx b/src/module/user/profile/ui/profile.tsx
index 121ad2a..1c4ab10 100644
--- a/src/module/user/profile/ui/profile.tsx
+++ b/src/module/user/profile/ui/profile.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, WARNA } from "@/module/_global";
+import { LayoutIconBack, LayoutNavbarHome, SkeletonDetailProfile, TEMA, WARNA } from "@/module/_global";
 import { ActionIcon, Avatar, Box, Grid, Group, Skeleton, Stack, Text } from "@mantine/core";
 import { RiIdCardFill } from "react-icons/ri";
 import { FaSquarePhone } from "react-icons/fa6";
@@ -13,6 +13,7 @@ import { funGetProfileByCookies } from "../lib/api_profile";
 import { useShallowEffect } from "@mantine/hooks";
 import { IProfileById } from "../lib/type_profile";
 import { useRouter } from "next/navigation";
+import { useHookstate } from "@hookstate/core";
 
 export default function Profile() {
   const [openModal, setOpenModal] = useState(false);
@@ -20,6 +21,7 @@ export default function Profile() {
   const router = useRouter()
   const [loading, setLoading] = useState(true)
   const [img, setIMG] = useState<any | null>()
+  const tema = useHookstate(TEMA)
 
   async function getData() {
     try {
@@ -61,7 +63,7 @@ export default function Profile() {
         <LayoutNavbarHome  >
           <Group justify="space-between">
             <LayoutIconBack back="/home" />
-            <ActionIcon onClick={() => { setOpenModal(true) }} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
+            <ActionIcon onClick={() => { setOpenModal(true) }} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Info">
               <LuLogOut size={20} color='white' />
             </ActionIcon>
           </Group>