diff --git a/src/app_modules/_global/color/color_pallet.ts b/src/app_modules/_global/color/color_pallet.ts
index 6b417815..bb9d7e65 100644
--- a/src/app_modules/_global/color/color_pallet.ts
+++ b/src/app_modules/_global/color/color_pallet.ts
@@ -4,7 +4,8 @@ export const MainColor = {
   yellow: "#E1B525",
   white: "#D4D0D0",
   red: "#C74E4E",
-  orange: "#E58958"
+  orange: "#E58958",
+  green: "#468A56"
 };
 
 export const AccentColor = {
diff --git a/src/app_modules/_global/component/comp_card_box_and_background.tsx b/src/app_modules/_global/component/comp_card_box_and_background.tsx
index c3064edd..cee4c5f7 100644
--- a/src/app_modules/_global/component/comp_card_box_and_background.tsx
+++ b/src/app_modules/_global/component/comp_card_box_and_background.tsx
@@ -1,4 +1,4 @@
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { Card } from "@mantine/core";
 import React from "react";
 
@@ -30,7 +30,7 @@ export function ComponentGlobal_CardStyles({
           paddingInline: "16px",
           paddingBlock: "16px",
           borderRadius: "10px",
-          color: color ? color : "white",
+          color: color ? color : MainColor.white,
           height: height ? height : "auto",
           marginBottom: marginBottom ? marginBottom : "15px",
         }}
diff --git a/src/app_modules/_global/component/comp_tampilan_angka_ratusan.tsx b/src/app_modules/_global/component/comp_tampilan_angka_ratusan.tsx
index aa7b2565..ccf3c540 100644
--- a/src/app_modules/_global/component/comp_tampilan_angka_ratusan.tsx
+++ b/src/app_modules/_global/component/comp_tampilan_angka_ratusan.tsx
@@ -1,4 +1,5 @@
 import { Group, Text } from "@mantine/core";
+import { MainColor } from "../color";
 
 export default function ComponentGlobal_TampilanAngkaRatusan({
   nominal,
@@ -32,7 +33,7 @@ export default function ComponentGlobal_TampilanAngkaRatusan({
           fw={fontWeight ? fontWeight : "bold"}
           fz={fontSize ? fontSize : "md"}
           style={{
-            color: color ? color : "white",
+            color: color ? color : MainColor.white,
           }}
         >
           {new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
@@ -43,6 +44,9 @@ export default function ComponentGlobal_TampilanAngkaRatusan({
           <Text
             fw={fontWeight ? fontWeight : "bold"}
             fz={fontSize ? fontSize : "md"}
+            style={{
+              color: color ? color : MainColor.white,
+            }}
           >
             {textAfter}
           </Text>
diff --git a/src/app_modules/_global/component/comp_tampilan_rupiah.tsx b/src/app_modules/_global/component/comp_tampilan_rupiah.tsx
index 9271882f..e5baf1a3 100644
--- a/src/app_modules/_global/component/comp_tampilan_rupiah.tsx
+++ b/src/app_modules/_global/component/comp_tampilan_rupiah.tsx
@@ -1,4 +1,5 @@
 import { Text } from "@mantine/core";
+import { MainColor } from "../color";
 
 export default function ComponentGlobal_TampilanRupiah({
   nominal,
@@ -17,7 +18,7 @@ export default function ComponentGlobal_TampilanRupiah({
         fw={fontWeight ? fontWeight : "bold"}
         fz={fontSize ? fontSize : "md"}
         style={{
-          color: color ? color : "white",
+          color: color ? color : MainColor.white,
         }}
       >
         Rp.{" "}
diff --git a/src/app_modules/_global/ui/ui_drawer.tsx b/src/app_modules/_global/ui/ui_drawer.tsx
index b1f51ef3..fad1cd9d 100644
--- a/src/app_modules/_global/ui/ui_drawer.tsx
+++ b/src/app_modules/_global/ui/ui_drawer.tsx
@@ -64,7 +64,7 @@ export default function UIGlobal_Drawer({
             borderRight: `1px solid ${AccentColor.blue}`,
             borderLeft: `1px solid ${AccentColor.blue}`,
             borderRadius: "20px 20px 0px 0px",
-            color: "white",
+            color: MainColor.white,
             paddingBottom: "5%",
           },
         }}
@@ -86,7 +86,7 @@ export default function UIGlobal_Drawer({
               >
                 <ActionIcon
                   variant="transparent"
-                  c="white"
+                  c={MainColor.white}
                 >
                   {/* PAKE LOADING */}
                   {/* {isLoading && e?.id === pageId ? (
diff --git a/src/app_modules/donasi/component/card_view/card_publish_new.tsx b/src/app_modules/donasi/component/card_view/card_publish_new.tsx
index 885fa359..c832683f 100644
--- a/src/app_modules/donasi/component/card_view/card_publish_new.tsx
+++ b/src/app_modules/donasi/component/card_view/card_publish_new.tsx
@@ -5,6 +5,7 @@ import { Grid, Progress, Stack, Text } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentDonasi_CardPublishNew({ data }: { data: any; }) {
   const router = useRouter();
@@ -27,7 +28,7 @@ export default function ComponentDonasi_CardPublishNew({ data }: { data: any; })
             <Grid.Col span={6}>
               <Stack spacing={"xs"}>
                 <Stack spacing={0}>
-                  <Text fz={"sm"} fw={"bold"} lineClamp={2}>
+                  <Text c={MainColor.white} fz={"sm"} fw={"bold"} lineClamp={2}>
                     {data.title}
                   </Text>
                   <ComponentDonasi_TampilanHitungMundur
@@ -38,8 +39,8 @@ export default function ComponentDonasi_CardPublishNew({ data }: { data: any; })
                 </Stack>
                 <Progress value={+data.progres} color="yellow" />
                 <Stack spacing={0}>
-                  <Text fz={"sm"}>Terkumpul</Text>
-                  <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
+                  <Text c={MainColor.white} fz={"sm"}>Terkumpul</Text>
+                  <Text c={MainColor.white} fz={"sm"} fw={"bold"}  truncate>
                     <TampilanRupiahDonasi nominal={+data.terkumpul} />
                   </Text>
                 </Stack>
diff --git a/src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx b/src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx
index 433fff92..19d8af63 100644
--- a/src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx
+++ b/src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx
@@ -2,7 +2,8 @@
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { AccentColor, MainColor, } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import { ActionIcon, Avatar, Group, Paper, Skeleton, Stack, Text, Title, } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { ActionIcon, Avatar, Group, Paper, Stack, Text, Title } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconCircleChevronRight } from "@tabler/icons-react";
 import _ from "lodash";
@@ -54,7 +55,7 @@ export default function ComponentDonasi_InformasiPenggalangMainNew() {
                }}
             >
                {
-                  loading ? <Skeleton height={100} radius="md" width={"100%"} />
+                  loading ? <CustomSkeleton height={100} radius="md" width={"100%"} />
                      :
                      <Stack>
                         <Group position="apart">
diff --git a/src/app_modules/donasi/component/detail_main/skeleton_cerita_penggalang.tsx b/src/app_modules/donasi/component/detail_main/skeleton_cerita_penggalang.tsx
index 3c3eb2d7..ffb25e4a 100644
--- a/src/app_modules/donasi/component/detail_main/skeleton_cerita_penggalang.tsx
+++ b/src/app_modules/donasi/component/detail_main/skeleton_cerita_penggalang.tsx
@@ -1,13 +1,14 @@
-import { Box, Skeleton } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box } from "@mantine/core";
 
 export default function SkeletonCeritaPenggalangDonasi() {
    return (
       <>
          <Box mb={"md"}>
-            <Skeleton height={10} mt={0} radius="xl" width={"50%"} />
-            <Skeleton height={10} mt={10} radius="xl" />
-            <Skeleton height={10} mt={10} radius="xl" />
-            <Skeleton height={10} mt={10} radius="xl" />
+            <CustomSkeleton height={10} mt={0} radius="xl" width={"50%"} />
+            <CustomSkeleton height={10} mt={10} radius="xl" />
+            <CustomSkeleton height={10} mt={10} radius="xl" />
+            <CustomSkeleton height={10} mt={10} radius="xl" />
          </Box>
       </>
    );
diff --git a/src/app_modules/donasi/component/detail_main/skeleton_detail_dana_donasi.tsx b/src/app_modules/donasi/component/detail_main/skeleton_detail_dana_donasi.tsx
index a8f287a6..ea512c2a 100644
--- a/src/app_modules/donasi/component/detail_main/skeleton_detail_dana_donasi.tsx
+++ b/src/app_modules/donasi/component/detail_main/skeleton_detail_dana_donasi.tsx
@@ -1,19 +1,20 @@
-import { Box, Skeleton } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box } from "@mantine/core";
 
 export default function SkeletonDetailDanaDonasi() {
    return (
       <>
          <Box>
             <Box mb={"md"}>
-               <Skeleton height={150} radius="md" />
+               <CustomSkeleton height={150} radius="md" />
             </Box>
             <Box mb={"md"}>
-               <Skeleton height={10} mt={10} radius="xl" width={"50%"} />
-               <Skeleton height={10} mt={10} radius="xl" />
-               <Skeleton height={10} mt={10} radius="xl" />
+               <CustomSkeleton height={10} mt={10} radius="xl" width={"50%"} />
+               <CustomSkeleton height={10} mt={10} radius="xl" />
+               <CustomSkeleton height={10} mt={10} radius="xl" />
             </Box>
             <Box>
-               <Skeleton height={50} radius="md" />
+               <CustomSkeleton height={50} radius="md" />
             </Box>
          </Box>
       </>
diff --git a/src/app_modules/donasi/component/skeleton_donasi.tsx b/src/app_modules/donasi/component/skeleton_donasi.tsx
index 7f461e64..333d70af 100644
--- a/src/app_modules/donasi/component/skeleton_donasi.tsx
+++ b/src/app_modules/donasi/component/skeleton_donasi.tsx
@@ -1,5 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Box, Grid, Skeleton } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Grid } from "@mantine/core";
 
 export default function SkeletonDonasi() {
    return <>
@@ -8,7 +9,7 @@ export default function SkeletonDonasi() {
             <ComponentGlobal_CardStyles key={index}>
                <Grid>
                   <Grid.Col span={6}>
-                     <Skeleton w={"100%"} height={100} radius="md" />
+                     <CustomSkeleton w={"100%"} height={100} radius="md" />
                   </Grid.Col>
                   <Grid.Col span={6}>
                      <Box>
@@ -16,7 +17,7 @@ export default function SkeletonDonasi() {
                            <Box key={index} py={5}>
                               <Grid align="center">
                                  <Grid.Col span={12}>
-                                    <Skeleton w={"100%"} h={15} />
+                                    <CustomSkeleton w={"100%"} h={15} />
                                  </Grid.Col>
                               </Grid>
                            </Box>
diff --git a/src/app_modules/donasi/component/skeleton_donasi_saya.tsx b/src/app_modules/donasi/component/skeleton_donasi_saya.tsx
index 1b3b3a2b..998e328e 100644
--- a/src/app_modules/donasi/component/skeleton_donasi_saya.tsx
+++ b/src/app_modules/donasi/component/skeleton_donasi_saya.tsx
@@ -1,5 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Box, Grid, Skeleton } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Grid } from "@mantine/core";
 
 export default function SkeletonDonasiSaya() {
    return <>
@@ -13,7 +14,7 @@ export default function SkeletonDonasiSaya() {
                            <Box key={index} py={5}>
                               <Grid align="center">
                                  <Grid.Col span={12}>
-                                    <Skeleton w={"100%"} h={15} />
+                                    <CustomSkeleton w={"100%"} h={15} />
                                  </Grid.Col>
                               </Grid>
                            </Box>
@@ -22,7 +23,7 @@ export default function SkeletonDonasiSaya() {
 
                   </Grid.Col>
                   <Grid.Col span={6}>
-                     <Skeleton w={"100%"} height={100} radius="md" />
+                     <CustomSkeleton w={"100%"} height={100} radius="md" />
                   </Grid.Col>
                </Grid>
             </ComponentGlobal_CardStyles>
diff --git a/src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx b/src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx
index 922e275e..e073fcc9 100644
--- a/src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx
+++ b/src/app_modules/donasi/edit/edit_donasi/skeleton_edit_donasi.tsx
@@ -1,20 +1,21 @@
-import { Box, Skeleton, Stack } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Stack } from "@mantine/core";
 
 export default function SkeletonEditDonasi() {
    return (
       <>
          <Box>
             <Stack align="center" mb={40}>
-               <Skeleton height={40} width={"100%"} />
-               <Skeleton height={300} width={"100%"} my={"xs"} />
-               <Skeleton height={40} width={"40%"} radius={"lg"} />
+               <CustomSkeleton height={40} width={"100%"} />
+               <CustomSkeleton height={300} width={"100%"} my={"xs"} />
+               <CustomSkeleton height={40} width={"40%"} radius={"lg"} />
             </Stack>
 
             <Stack align="center">
                {[...Array(5)].map((_, index) => (
-                  <Skeleton key={index} height={40} width={"100%"} my={"xs"} />
+                  <CustomSkeleton key={index} height={40} width={"100%"} my={"xs"} />
                ))}
-               <Skeleton height={40} width={"100%"} radius={"lg"} mt={30} />
+               <CustomSkeleton height={40} width={"100%"} radius={"lg"} mt={30} />
             </Stack>
          </Box>
 
diff --git a/src/app_modules/event/component/skeleton/comp_skeleton_detail.tsx b/src/app_modules/event/component/skeleton/comp_skeleton_detail.tsx
index 200491a5..2b30756c 100644
--- a/src/app_modules/event/component/skeleton/comp_skeleton_detail.tsx
+++ b/src/app_modules/event/component/skeleton/comp_skeleton_detail.tsx
@@ -1,5 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Stack, Center, Skeleton, Grid } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Center, Grid, Stack } from "@mantine/core";
 
 export function Event_ComponentSkeletonDetail() {
   return (
@@ -8,26 +9,26 @@ export function Event_ComponentSkeletonDetail() {
         <Stack>
           <Grid align="center">
             <Grid.Col span={"content"}>
-              <Skeleton radius={"100%"} h={50} w={50} />
+              <CustomSkeleton radius={"100%"} h={50} w={50} />
             </Grid.Col>
             <Grid.Col span={"auto"}>
-              <Skeleton h={20} w={"50%"} />
+              <CustomSkeleton h={20} w={"50%"} />
             </Grid.Col>
           </Grid>
         </Stack>
         <Stack spacing={"xl"}>
           <Center>
-            <Skeleton h={20} w={"50%"} />
+            <CustomSkeleton h={20} w={"50%"} />
           </Center>
-          <Skeleton h={20} w={"100%"} />
-          <Skeleton h={20} w={"100%"} />
-          <Skeleton h={20} w={"50%"} />
-          <Skeleton h={20} w={"100%"} />
-          <Skeleton h={20} w={"100%"} />
+          <CustomSkeleton h={20} w={"100%"} />
+          <CustomSkeleton h={20} w={"100%"} />
+          <CustomSkeleton h={20} w={"50%"} />
+          <CustomSkeleton h={20} w={"100%"} />
+          <CustomSkeleton h={20} w={"100%"} />
           <Stack>
-            <Skeleton h={20} w={"50%"} />
-            <Skeleton h={20} w={"100%"} />
-            <Skeleton h={20} w={"100%"} />
+            <CustomSkeleton h={20} w={"50%"} />
+            <CustomSkeleton h={20} w={"100%"} />
+            <CustomSkeleton h={20} w={"100%"} />
           </Stack>
         </Stack>
       </ComponentGlobal_CardStyles>
diff --git a/src/app_modules/event/detail/main_detail/index.tsx b/src/app_modules/event/detail/main_detail/index.tsx
index 3438ba1a..bbfefbda 100644
--- a/src/app_modules/event/detail/main_detail/index.tsx
+++ b/src/app_modules/event/detail/main_detail/index.tsx
@@ -4,8 +4,9 @@ import { API_RouteEvent } from "@/app/lib/api_user_router/route_api_event";
 import { IRealtimeData } from "@/app/lib/global_state";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import notifikasiToUser_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_user";
-import { Button, Skeleton, Stack } from "@mantine/core";
+import { Button, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
@@ -49,7 +50,7 @@ export default function Event_DetailMain({
         />
 
         {isJoinSuccess == null ? (
-          <Skeleton radius={"xl"} h={40} />
+          <CustomSkeleton radius={"xl"} h={40} />
         ) : isJoinSuccess ? (
           <Button disabled radius={"xl"} color="green">
             Anda Telah Ikut Serta
diff --git a/src/app_modules/home/component/body_home.tsx b/src/app_modules/home/component/body_home.tsx
index 41ebcb52..456ee0b4 100644
--- a/src/app_modules/home/component/body_home.tsx
+++ b/src/app_modules/home/component/body_home.tsx
@@ -2,16 +2,18 @@ import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import {
   ActionIcon,
   Box,
+  Flex,
+  Grid,
   Group,
   Image,
   Paper,
   SimpleGrid,
-  Skeleton,
   Stack,
-  Text,
+  Text
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconUserSearch } from "@tabler/icons-react";
@@ -129,11 +131,11 @@ export default function BodyHome() {
                 <ActionIcon
                   size={50}
                   variant="transparent"
-                  c={e.link == "" ? "gray.3" : "white"}
+                  c={e.link == "" ? "gray.3" : MainColor.white}
                 >
                   {e.icon}
                 </ActionIcon>
-                <Text c={e.link == "" ? "gray.3" : "white"} fz={"xs"}>
+                <Text c={e.link == "" ? "gray.3" : MainColor.white} fz={"xs"}>
                   {e.name}
                 </Text>
               </Stack>
@@ -180,22 +182,29 @@ export default function BodyHome() {
               <ActionIcon
                 variant="transparent"
                 size={40}
-                c={menuHomeJob.link == "" ? "gray.3" : "white"}
+                c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}
               >
                 {menuHomeJob.icon}
               </ActionIcon>
-              <Text c={menuHomeJob.link == "" ? "gray.3" : "white"}>
+              <Text c={menuHomeJob.link == "" ? "gray.3" : MainColor.white}>
                 {menuHomeJob.name}
               </Text>
             </Group>
             {loadingJob ? (
-              Array(2)
+              Array(1)
                 .fill(null)
                 .map((_, i) => (
                   <Box key={i} mb={"md"}>
-                    <Skeleton height={10} mt={0} radius="xl" width={"50%"} />
-                    <Skeleton height={10} mt={10} radius="xl" />
-                    <Skeleton height={10} mt={10} radius="xl" />
+                    <Grid>
+                      <Grid.Col span={6}>
+                        <CustomSkeleton height={10} mt={0} radius="xl" width={"75%"} />
+                        <CustomSkeleton height={10} mt={10} radius="xl"  />
+                      </Grid.Col >
+                      <Grid.Col span={6}>
+                        <CustomSkeleton height={10} mt={0} radius="xl" width={"75%"} />
+                        <CustomSkeleton height={10} mt={10} radius="xl"  />
+                      </Grid.Col>
+                    </Grid>
                   </Box>
                 ))
             ) : _.isEmpty(dataJob) ? (
@@ -206,7 +215,7 @@ export default function BodyHome() {
                   <Stack key={e.id}>
                     <Group spacing={"xs"}>
                       <Stack h={"100%"} align="center" justify="flex-start">
-                        <IconUserSearch size={20} color="white" />
+                        <IconUserSearch size={20} color={MainColor.white} />
                       </Stack>
                       <Stack spacing={0} w={"60%"}>
                         <Text
@@ -217,7 +226,7 @@ export default function BodyHome() {
                         >
                           {e?.Author.username}
                         </Text>
-                        <Text fz={"sm"} c={"white"} lineClamp={2}>
+                        <Text fz={"sm"} c={MainColor.white} lineClamp={2}>
                           {e?.title}
                         </Text>
                       </Stack>
diff --git a/src/app_modules/home/component/footer_home.tsx b/src/app_modules/home/component/footer_home.tsx
index 9fe2d9a1..7699a86e 100644
--- a/src/app_modules/home/component/footer_home.tsx
+++ b/src/app_modules/home/component/footer_home.tsx
@@ -16,6 +16,7 @@ import { useState } from "react";
 import { apiGetDataHome } from "../fun/get/api_home";
 import { Home_ComponentAvatarProfile } from "./comp_avatar_profile";
 import { listMenuHomeFooter } from "./list_menu_home";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function FooterHome() {
   const router = useRouter();
@@ -74,12 +75,12 @@ export default function FooterHome() {
             >
               <ActionIcon
                 radius={"xl"}
-                c={e.link === "" ? "gray" : "white"}
+                c={e.link === "" ? "gray" : MainColor.white}
                 variant="transparent"
               >
                 {e.icon}
               </ActionIcon>
-              <Text lineClamp={1} c={e.link === "" ? "gray" : "white"} fz={12}>
+              <Text lineClamp={1} c={e.link === "" ? "gray" : MainColor.white} fz={12}>
                 {e.name}
               </Text>
             </Stack>
@@ -105,7 +106,7 @@ export default function FooterHome() {
           >
             <ActionIcon variant={"transparent"}>
               {dataUser.profile === undefined || dataUser?.profile === null ? (
-                <IconUserCircle color="white" />
+                <IconUserCircle color={MainColor.white} />
               ) : (
                 <Home_ComponentAvatarProfile
                   url={APIs.GET({
@@ -115,7 +116,7 @@ export default function FooterHome() {
                 />
               )}
             </ActionIcon>
-            <Text fz={10} c={"white"}>
+            <Text fz={10} c={MainColor.white}>
               Profile
             </Text>
           </Stack>
diff --git a/src/app_modules/home/view_home_new.tsx b/src/app_modules/home/view_home_new.tsx
index bd5cc8cc..67980668 100644
--- a/src/app_modules/home/view_home_new.tsx
+++ b/src/app_modules/home/view_home_new.tsx
@@ -79,7 +79,7 @@ export default function HomeViewNew() {
                   }
                 }}
               >
-                <IconUserSearch color="white" />
+                <IconUserSearch color={MainColor.white} />
               </ActionIcon>
             }
             customButtonRight={
@@ -113,10 +113,10 @@ export default function HomeViewNew() {
                       </Text>
                     }
                   >
-                    <IconBell color="white" />
+                    <IconBell color={MainColor.white} />
                   </Indicator>
                 ) : (
-                  <IconBell color="white" />
+                  <IconBell color={MainColor.white} />
                 )}
               </ActionIcon>
             }
diff --git a/src/app_modules/investasi/_component/comp_card_border_and_background.tsx b/src/app_modules/investasi/_component/comp_card_border_and_background.tsx
index a6942af2..28c496b0 100644
--- a/src/app_modules/investasi/_component/comp_card_border_and_background.tsx
+++ b/src/app_modules/investasi/_component/comp_card_border_and_background.tsx
@@ -1,4 +1,4 @@
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { Card } from "@mantine/core";
 import React from "react";
 
@@ -26,7 +26,7 @@ export function Investasi_ComponentStylesCard({
           paddingInline: "15px",
           paddingBlock: "15px",
           borderRadius: "10px",
-          color: "white",
+          color: MainColor.white,
           marginBottom: marginBottom ? marginBottom : "0x",
         }}
         onClick={onClickHandler}
diff --git a/src/app_modules/investasi/_component/detail/comp_box_daftar_berita.tsx b/src/app_modules/investasi/_component/detail/comp_box_daftar_berita.tsx
index 84919ace..9ad879b3 100644
--- a/src/app_modules/investasi/_component/detail/comp_box_daftar_berita.tsx
+++ b/src/app_modules/investasi/_component/detail/comp_box_daftar_berita.tsx
@@ -2,7 +2,7 @@ import {
   NEW_RouterInvestasi,
   RouterInvestasi_OLD,
 } from "@/app/lib/router_hipmi/router_investasi";
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -34,12 +34,12 @@ export function Investasi_ComponentBoxDaftarBerita({
         }}
       >
         <Flex direction={"column"} align={"center"} justify={"center"}>
-          <Text fz={12}>Berita </Text>
+          <Text c={MainColor.white} fz={12}>Berita </Text>
           <ActionIcon radius={"xl"} variant="transparent" size={60}>
             {isLoading ? (
               <Loader color="yellow" />
             ) : (
-              <IconFileDescription size={70} color="white" />
+              <IconFileDescription size={70} color={MainColor.white} />
             )}
           </ActionIcon>
         </Flex>
diff --git a/src/app_modules/investasi/_component/detail/comp_box_daftar_dokumen.tsx b/src/app_modules/investasi/_component/detail/comp_box_daftar_dokumen.tsx
index a422ac7c..b930f4e1 100644
--- a/src/app_modules/investasi/_component/detail/comp_box_daftar_dokumen.tsx
+++ b/src/app_modules/investasi/_component/detail/comp_box_daftar_dokumen.tsx
@@ -2,7 +2,7 @@ import {
   NEW_RouterInvestasi,
   RouterInvestasi_OLD,
 } from "@/app/lib/router_hipmi/router_investasi";
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -35,12 +35,12 @@ export function Investasi_ComponentBoxDaftarDokumen({
         }}
       >
         <Flex direction={"column"} align={"center"} justify={"center"}>
-          <Text fz={12}>Dokumen</Text>
+          <Text c={MainColor.white} fz={12}>Dokumen</Text>
           <ActionIcon radius={"xl"} variant="transparent" size={60}>
             {isLoading ? (
               <Loader color="yellow" />
             ) : (
-              <IconFileDescription size={70} color="white" />
+              <IconFileDescription size={70} color={MainColor.white} />
             )}
           </ActionIcon>
         </Flex>
diff --git a/src/app_modules/investasi/_component/detail/comp_box_prospektus.tsx b/src/app_modules/investasi/_component/detail/comp_box_prospektus.tsx
index 1af7d87e..8c94af37 100644
--- a/src/app_modules/investasi/_component/detail/comp_box_prospektus.tsx
+++ b/src/app_modules/investasi/_component/detail/comp_box_prospektus.tsx
@@ -1,5 +1,5 @@
 import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
 import { IconBookDownload } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -32,12 +32,12 @@ export function Investasi_ComponentBoxProspektus({
         }}
       >
         <Flex direction={"column"} align={"center"} justify={"center"}>
-          <Text fz={12}>Prospektus</Text>
+          <Text c={MainColor.white} fz={12}>Prospektus</Text>
           <ActionIcon radius={"xl"} variant="transparent" size={60}>
             {isLoading ? (
               <Loader color="yellow" />
             ) : (
-              <IconBookDownload size={70} color="white" />
+              <IconBookDownload size={70} color={MainColor.white} />
             )}
           </ActionIcon>
         </Flex>
diff --git a/src/app_modules/investasi/_component/detail/comp_title_and_value_in_detail.tsx b/src/app_modules/investasi/_component/detail/comp_title_and_value_in_detail.tsx
index 3f8ca614..84e93f58 100644
--- a/src/app_modules/investasi/_component/detail/comp_title_and_value_in_detail.tsx
+++ b/src/app_modules/investasi/_component/detail/comp_title_and_value_in_detail.tsx
@@ -1,3 +1,4 @@
+import { MainColor } from "@/app_modules/_global/color";
 import { Grid, Text } from "@mantine/core";
 import { data } from "autoprefixer";
 import React from "react";
@@ -13,7 +14,7 @@ export function Investasi_ComponentTitleAndValueInDetail({
     <>
       <Grid>
         <Grid.Col span={5}>
-          <Text fw={"bold"}>{title} </Text>
+          <Text c={MainColor.white} fw={"bold"}>{title} </Text>
         </Grid.Col>
         <Grid.Col span={1}>: </Grid.Col>
         <Grid.Col span={6}>{value}</Grid.Col>
diff --git a/src/app_modules/investasi/_component/detail/saham_saya/comp_detail_data.tsx b/src/app_modules/investasi/_component/detail/saham_saya/comp_detail_data.tsx
index 7457c457..5df62a04 100644
--- a/src/app_modules/investasi/_component/detail/saham_saya/comp_detail_data.tsx
+++ b/src/app_modules/investasi/_component/detail/saham_saya/comp_detail_data.tsx
@@ -15,6 +15,7 @@ import {
 import { Investasi_ComponentBoxDaftarBerita } from "../comp_box_daftar_berita";
 import { Investasi_ComponentBoxDaftarDokumen } from "../comp_box_daftar_dokumen";
 import { Investasi_ComponentBoxProspektus } from "../comp_box_prospektus";
+import { MainColor } from "@/app_modules/_global/color";
 
 export function Investasi_ComponentBoxDetailData({
   data,
@@ -31,7 +32,7 @@ export function Investasi_ComponentBoxDetailData({
 
           <ComponentGlobal_LoadImageLandscape fileId={data.Investasi.imageId} />
 
-          <Title order={3} mb={"xs"} align="center">
+          <Title c={MainColor.white} order={3} mb={"xs"} align="center">
             {data?.Investasi.title}
           </Title>
 
diff --git a/src/app_modules/investasi/_component/detail/saham_saya/comp_harga_dan_lembar.tsx b/src/app_modules/investasi/_component/detail/saham_saya/comp_harga_dan_lembar.tsx
index 5effc7a5..91a5d44f 100644
--- a/src/app_modules/investasi/_component/detail/saham_saya/comp_harga_dan_lembar.tsx
+++ b/src/app_modules/investasi/_component/detail/saham_saya/comp_harga_dan_lembar.tsx
@@ -6,6 +6,7 @@ import { Stack, Grid, Text } from "@mantine/core";
 import { data } from "autoprefixer";
 import { Investasi_ComponentStylesCard } from "../../comp_card_border_and_background";
 import { MODEL_INVOICE_INVESTASI } from "@/app_modules/investasi/_lib/interface";
+import { MainColor } from "@/app_modules/_global/color";
 
 export function Investasi_ComponentBoxHargaDanLembarSaham({
   data,
@@ -19,7 +20,7 @@ export function Investasi_ComponentBoxHargaDanLembarSaham({
           <Stack spacing={5}>
             <Grid>
               <Grid.Col span={6}>
-                <Text fw={"bold"}>Transaksi Saham</Text>
+                <Text c={MainColor.white} fw={"bold"}>Transaksi Saham</Text>
               </Grid.Col>
               <Grid.Col span={6}>
                 <ComponentGlobal_TampilanRupiah
@@ -31,7 +32,7 @@ export function Investasi_ComponentBoxHargaDanLembarSaham({
 
             <Grid>
               <Grid.Col span={6}>
-                <Text fw={"bold"}>Saham Terbeli</Text>
+                <Text c={MainColor.white} fw={"bold"}>Saham Terbeli</Text>
               </Grid.Col>
               <Grid.Col span={6}>
                 <ComponentGlobal_TampilanAngkaRatusan
diff --git a/src/app_modules/investasi/_component/detail/saham_saya/comp_progress_saham.tsx b/src/app_modules/investasi/_component/detail/saham_saya/comp_progress_saham.tsx
index 77df56f1..cf71be03 100644
--- a/src/app_modules/investasi/_component/detail/saham_saya/comp_progress_saham.tsx
+++ b/src/app_modules/investasi/_component/detail/saham_saya/comp_progress_saham.tsx
@@ -11,7 +11,7 @@ export function Investasi_ComponentBoxProgress({
     <>
       <Investasi_ComponentStylesCard>
         <Stack>
-          <Text fw={"bold"}>Progres Saham</Text>
+          <Text c={MainColor.white} fw={"bold"}>Progres Saham</Text>
           <Progress
             styles={{ label: { color: "black" } }}
             color={MainColor.yellow}
@@ -19,6 +19,7 @@ export function Investasi_ComponentBoxProgress({
             value={+progress}
             label={progress + "%"}
             radius={"xl"}
+            bg={MainColor.white}
           />
         </Stack>
       </Investasi_ComponentStylesCard>
diff --git a/src/app_modules/investasi/_component/main/comp_card_daftar_transaksi_new.tsx b/src/app_modules/investasi/_component/main/comp_card_daftar_transaksi_new.tsx
index 0ada112b..70b0ae09 100644
--- a/src/app_modules/investasi/_component/main/comp_card_daftar_transaksi_new.tsx
+++ b/src/app_modules/investasi/_component/main/comp_card_daftar_transaksi_new.tsx
@@ -1,5 +1,5 @@
 import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { Card, Group, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
@@ -48,7 +48,7 @@ export function Investasi_ComponentCardDaftarTransaksiNew({ data }: { data: IDat
                backgroundColor: AccentColor.darkblue,
                border: `2px solid ${AccentColor.blue}`,
                borderRadius: "10px",
-               color: "white",
+               color: MainColor.white,
             }}
             mb={"md"}
             onClick={() =>
diff --git a/src/app_modules/investasi/_component/main/comp_card_saham_saya_new.tsx b/src/app_modules/investasi/_component/main/comp_card_saham_saya_new.tsx
index bfaee9d9..9e4a7f7a 100644
--- a/src/app_modules/investasi/_component/main/comp_card_saham_saya_new.tsx
+++ b/src/app_modules/investasi/_component/main/comp_card_saham_saya_new.tsx
@@ -27,12 +27,12 @@ export function Investasi_ComponentSahamSayaNew({ data }: { data: IDataSahamSaya
                      </Text>
                      <ComponentGlobal_TampilanRupiah
                         nominal={+data?.nominal}
-                        color="white"
+                        color={MainColor.white}
                         fontSize={"xs"}
                      />
                      <ComponentGlobal_TampilanAngkaRatusan
                         nominal={+data?.lembarTerbeli}
-                        color="white"
+                        color={MainColor.white}
                         fontSize={"xs"}
                         textAfter="Lembar"
                      />
@@ -51,7 +51,7 @@ export function Investasi_ComponentSahamSayaNew({ data }: { data: IDataSahamSaya
                            backgroundColor: MainColor.yellow,
                         },
                         root: {
-                           backgroundColor: "whitesmoke",
+                           backgroundColor: MainColor.white,
                         },
                         label: {
                            color: "black",
diff --git a/src/app_modules/investasi/_ui/detail/ui_detail_main.tsx b/src/app_modules/investasi/_ui/detail/ui_detail_main.tsx
index 94bfc7b1..c8e7d345 100644
--- a/src/app_modules/investasi/_ui/detail/ui_detail_main.tsx
+++ b/src/app_modules/investasi/_ui/detail/ui_detail_main.tsx
@@ -16,6 +16,7 @@ import {
   RouterInvestasi_OLD,
 } from "@/app/lib/router_hipmi/router_investasi";
 import { IconDeviceIpadPlus } from "@tabler/icons-react";
+import { MainColor } from "@/app_modules/_global/color";
 
 export function Investasi_UiDetailMain({
   dataInvestasi,
@@ -54,7 +55,7 @@ export function Investasi_UiDetailMain({
                   variant="transparent"
                   onClick={() => setOpenDrawer(true)}
                 >
-                  <IconDotsVertical color="white" />
+                  <IconDotsVertical color={MainColor.white} />
                 </ActionIcon>
               ) : (
                 <ActionIcon disabled variant="transparent" />
diff --git a/src/app_modules/investasi/_ui/detail/ui_detail_portofolio.tsx b/src/app_modules/investasi/_ui/detail/ui_detail_portofolio.tsx
index aae4d214..1399f467 100644
--- a/src/app_modules/investasi/_ui/detail/ui_detail_portofolio.tsx
+++ b/src/app_modules/investasi/_ui/detail/ui_detail_portofolio.tsx
@@ -23,6 +23,7 @@ import {
   Investasi_ViewDetailReview,
 } from "../../_view";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { MainColor } from "@/app_modules/_global/color";
 
 export function Investasi_UiDetailPortofolio({
   dataInvestasi,
@@ -69,7 +70,7 @@ export function Investasi_UiDetailPortofolio({
                   variant="transparent"
                   onClick={() => setOpenDrawer(true)}
                 >
-                  <IconDotsVertical color="white" />
+                  <IconDotsVertical color={MainColor.white} />
                 </ActionIcon>
               }
             />
@@ -93,7 +94,7 @@ export function Investasi_UiDetailPortofolio({
                 <Stack key={i} align="center" spacing={"xs"}>
                   <ActionIcon
                     variant="transparent"
-                    c="white"
+                    c={MainColor.white}
                     onClick={() => {
                       setPageId(e?.id);
                       setLoading(true);
@@ -109,7 +110,7 @@ export function Investasi_UiDetailPortofolio({
                       e?.icon
                     )}
                   </ActionIcon>
-                  <Text fz={"sm"} align="center" color="white">
+                  <Text fz={"sm"} align="center" color={MainColor.white}>
                     {e?.name}
                   </Text>
                 </Stack>
diff --git a/src/app_modules/investasi/_ui/main/ui_portofolio_new.tsx b/src/app_modules/investasi/_ui/main/ui_portofolio_new.tsx
index 05b97ad2..aabae637 100644
--- a/src/app_modules/investasi/_ui/main/ui_portofolio_new.tsx
+++ b/src/app_modules/investasi/_ui/main/ui_portofolio_new.tsx
@@ -61,7 +61,7 @@ export function Investasi_UiPortofolioNew() {
                            transition: "ease 0.5s ",
                            backgroundColor:
                               param.id === e.id ? MainColor.yellow : AccentColor.blue,
-                           color: param.id === e.id ? "black" : "white",
+                           color: param.id === e.id ? "black" : MainColor.white,
                         }}
                      >
                         {e.name}
diff --git a/src/app_modules/investasi/_view/detail/portofolio/view_detail_publish.tsx b/src/app_modules/investasi/_view/detail/portofolio/view_detail_publish.tsx
index e13258de..c06d20cc 100644
--- a/src/app_modules/investasi/_view/detail/portofolio/view_detail_publish.tsx
+++ b/src/app_modules/investasi/_view/detail/portofolio/view_detail_publish.tsx
@@ -80,7 +80,7 @@ export default function Investasi_ViewDetailPublish({
 
           {/* Title dan Persentase */}
           <Center>
-            <Title order={3} align="center">
+            <Title color={MainColor.white} order={3} align="center">
               {_.startCase(data.title)}
             </Title>
           </Center>
@@ -90,12 +90,12 @@ export default function Investasi_ViewDetailPublish({
           <Stack>
             <Investasi_ComponentTitleAndValueInDetail
               title="Investor"
-              value={<Text>{data.Investasi_Invoice.length} </Text>}
+              value={<Text c={MainColor.white}>{data.Investasi_Invoice.length} </Text>}
             />
             <Investasi_ComponentTitleAndValueInDetail
               title="Target Dana"
               value={
-                <Text>
+                <Text c={MainColor.white}>
                   Rp.{" "}
                   {new Intl.NumberFormat("id-ID", {
                     maximumSignificantDigits: 20,
@@ -107,7 +107,7 @@ export default function Investasi_ViewDetailPublish({
             <Investasi_ComponentTitleAndValueInDetail
               title="Harga Per Lembar"
               value={
-                <Text>
+                <Text c={MainColor.white}>
                   Rp.{" "}
                   {new Intl.NumberFormat("id-ID", {
                     maximumSignificantDigits: 10,
@@ -117,14 +117,14 @@ export default function Investasi_ViewDetailPublish({
             />
 
             <Investasi_ComponentTitleAndValueInDetail
-              title={<Text fs={"italic"}>Return Of Invesment (RoI)</Text>}
-              value={<Text>{data.roi} %</Text>}
+              title={<Text c={MainColor.white} fs={"italic"}>Return Of Invesment (RoI)</Text>}
+              value={<Text c={MainColor.white}>{data.roi} %</Text>}
             />
 
             <Investasi_ComponentTitleAndValueInDetail
               title="Total Lembar"
               value={
-                <Text>
+                <Text c={MainColor.white}>
                   {new Intl.NumberFormat("id-ID", {
                     maximumSignificantDigits: 10,
                   }).format(+data.totalLembar)}{" "}
@@ -136,7 +136,7 @@ export default function Investasi_ViewDetailPublish({
             <Investasi_ComponentTitleAndValueInDetail
               title="Sisa Lembar"
               value={
-                <Text>
+                <Text c={MainColor.white}>
                   {new Intl.NumberFormat("id-ID", {
                     maximumSignificantDigits: 10,
                   }).format(+data.sisaLembar)}{" "}
@@ -147,15 +147,15 @@ export default function Investasi_ViewDetailPublish({
 
             <Investasi_ComponentTitleAndValueInDetail
               title="Jadwal Pembagian"
-              value={<Text>{data.MasterPembagianDeviden.name} Bulan </Text>}
+              value={<Text c={MainColor.white}>{data.MasterPembagianDeviden.name} Bulan </Text>}
             />
             <Investasi_ComponentTitleAndValueInDetail
               title="Pembagian Deviden"
-              value={<Text>{data.MasterPeriodeDeviden.name}</Text>}
+              value={<Text c={MainColor.white}>{data.MasterPeriodeDeviden.name}</Text>}
             />
             <Investasi_ComponentTitleAndValueInDetail
               title="Pencarian Investor"
-              value={<Text>{data.MasterPencarianInvestor.name} Hari </Text>}
+              value={<Text c={MainColor.white}>{data.MasterPencarianInvestor.name} Hari </Text>}
             />
           </Stack>
 
diff --git a/src/app_modules/investasi/_view/main/portofolio/skeleton_portofolio.tsx b/src/app_modules/investasi/_view/main/portofolio/skeleton_portofolio.tsx
index 8fc3463b..1d834c21 100644
--- a/src/app_modules/investasi/_view/main/portofolio/skeleton_portofolio.tsx
+++ b/src/app_modules/investasi/_view/main/portofolio/skeleton_portofolio.tsx
@@ -1,5 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Box, Grid, Skeleton } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Grid } from "@mantine/core";
 
 export default function SkeletonInvestasiPortofolio() {
    return (
@@ -13,7 +14,7 @@ export default function SkeletonInvestasiPortofolio() {
                            <Box key={i} py={5}>
                               <Grid align="center">
                                  <Grid.Col span={12}>
-                                    <Skeleton w={"90%"} h={23} />
+                                    <CustomSkeleton w={"90%"} h={23} />
                                  </Grid.Col>
                               </Grid>
                            </Box>
@@ -21,7 +22,7 @@ export default function SkeletonInvestasiPortofolio() {
                      </Box>
                   </Grid.Col>
                   <Grid.Col span={5}>
-                     <Skeleton w={"100%"} height={100} radius="md" />
+                     <CustomSkeleton w={"100%"} height={100} radius="md" />
                   </Grid.Col>
                </Grid>
             </ComponentGlobal_CardStyles>
diff --git a/src/app_modules/investasi/_view/main/skeleton_saham_saya.tsx b/src/app_modules/investasi/_view/main/skeleton_saham_saya.tsx
index 1aada275..2334fe63 100644
--- a/src/app_modules/investasi/_view/main/skeleton_saham_saya.tsx
+++ b/src/app_modules/investasi/_view/main/skeleton_saham_saya.tsx
@@ -1,5 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Grid, Skeleton } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Grid } from "@mantine/core";
 
 export default function SkeletonInvestasiSahamSaya() {
    return (
@@ -8,7 +9,7 @@ export default function SkeletonInvestasiSahamSaya() {
             <ComponentGlobal_CardStyles key={index}>
                <Grid>
                   <Grid.Col span={12}>
-                     <Skeleton w={"100%"} height={70} radius="md" />
+                     <CustomSkeleton w={"100%"} height={70} radius="md" />
                   </Grid.Col>
                </Grid>
             </ComponentGlobal_CardStyles>
diff --git a/src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx b/src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx
index 87317b8a..0b3a9fcf 100644
--- a/src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx
+++ b/src/app_modules/investasi/_view/status_transaksi/view_invoice_berhasil.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_LoadImage,
   ComponentGlobal_TampilanRupiah,
@@ -44,7 +44,7 @@ export function Investasi_ViewTransaksiBerhasil({
             padding: "15px",
             cursor: "pointer",
             borderRadius: "10px",
-            color: "white",
+            color: MainColor.white,
           }}
         >
           <IconBrandCashapp size={100} />
@@ -61,7 +61,7 @@ export function Investasi_ViewTransaksiBerhasil({
             padding: "15px",
             cursor: "pointer",
             borderRadius: "10px",
-            color: "white",
+            color: MainColor.white,
             marginBottom: "15px",
           }}
         >
diff --git a/src/app_modules/investasi/_view/transaksi/view_invoice.tsx b/src/app_modules/investasi/_view/transaksi/view_invoice.tsx
index ac6855c7..22b21722 100644
--- a/src/app_modules/investasi/_view/transaksi/view_invoice.tsx
+++ b/src/app_modules/investasi/_view/transaksi/view_invoice.tsx
@@ -110,7 +110,7 @@ export function Investasi_ViewInvoice({
             padding: "15px",
             cursor: "pointer",
             borderRadius: "10px",
-            color: "white",
+            color: MainColor.white,
           }}
         >
           <Title order={5}>Mohon transfer ke rekening dibawah</Title>
@@ -123,7 +123,7 @@ export function Investasi_ViewInvoice({
             padding: "15px",
             cursor: "pointer",
             borderRadius: "10px",
-            color: "white",
+            color: MainColor.white,
             marginBottom: "15px",
           }}
         >
@@ -181,7 +181,7 @@ export function Investasi_ViewInvoice({
             padding: "15px",
             cursor: "pointer",
             borderRadius: "10px",
-            color: "white",
+            color: MainColor.white,
             marginBottom: "15px",
           }}
         >
@@ -196,7 +196,7 @@ export function Investasi_ViewInvoice({
                 padding: "15px",
                 cursor: "pointer",
                 borderRadius: "10px",
-                color: "white",
+                color: MainColor.white,
               }}
             >
               <Grid>
@@ -272,7 +272,7 @@ export function Investasi_ViewInvoice({
             {file ? (
               <Center>
                 <Group spacing={"xs"}>
-                  <Text fz={"xs"} fs={"italic"}>
+                  <Text c={MainColor.white} fz={"xs"} fs={"italic"}>
                     Upload berhasil{" "}
                   </Text>
                   <IconCircleCheck color="green" />
@@ -280,7 +280,7 @@ export function Investasi_ViewInvoice({
               </Center>
             ) : (
               <Center>
-                <Text fz={"xs"} fs={"italic"}>
+                <Text c={MainColor.white} fz={"xs"} fs={"italic"}>
                   Upload bukti transfer anda !
                 </Text>
               </Center>
diff --git a/src/app_modules/investasi/_view/transaksi/view_metode_pembayaran.tsx b/src/app_modules/investasi/_view/transaksi/view_metode_pembayaran.tsx
index eabb3f3d..ba719598 100644
--- a/src/app_modules/investasi/_view/transaksi/view_metode_pembayaran.tsx
+++ b/src/app_modules/investasi/_view/transaksi/view_metode_pembayaran.tsx
@@ -101,19 +101,19 @@ export function Investasi_ViewMetodePembayaran({
                 padding: "15px",
                 cursor: "pointer",
                 borderRadius: "10px",
-                color: "white",
+                color: MainColor.white,
                 marginBottom: "15px",
               }}
             >
               <Radio
                 styles={{
                   radio: {
-                    color: "yellow",
+                    color: "yellow", backgroundColor: MainColor.white
                   },
                 }}
                 value={e.id}
                 label={
-                  <Title order={6} color="white">
+                  <Title order={6} color={MainColor.white}>
                     {e.namaBank}
                   </Title>
                 }
diff --git a/src/app_modules/investasi/_view/transaksi/view_proses_pembelian.tsx b/src/app_modules/investasi/_view/transaksi/view_proses_pembelian.tsx
index c84522bb..78aae922 100644
--- a/src/app_modules/investasi/_view/transaksi/view_proses_pembelian.tsx
+++ b/src/app_modules/investasi/_view/transaksi/view_proses_pembelian.tsx
@@ -52,8 +52,8 @@ export function Investasi_ViewProsesPembelian({
       >
         {/* Sisa Lembar Saham */}
         <Group position="apart" mb={"md"}>
-          <Text>Sisa Lembar Saham</Text>
-          <Text fz={23}>
+          <Text c={MainColor.white}>Sisa Lembar Saham</Text>
+          <Text c={MainColor.white} fz={23}>
             {new Intl.NumberFormat("id-ID", {
               maximumFractionDigits: 10,
             }).format(+data.sisaLembar)}{" "}
@@ -62,8 +62,8 @@ export function Investasi_ViewProsesPembelian({
 
         {/* Harga perlembar saham */}
         <Group position="apart" mb={"md"}>
-          <Text>Harga Perlembar</Text>
-          <Text fz={23}>
+          <Text c={MainColor.white}>Harga Perlembar</Text>
+          <Text c={MainColor.white} fz={23}>
             Rp.{" "}
             {new Intl.NumberFormat("id-ID", {
               maximumFractionDigits: 10,
@@ -74,12 +74,13 @@ export function Investasi_ViewProsesPembelian({
         {/* Lembar saham */}
         <Group position="apart" mb={"md"}>
           <Box>
-            <Text>Jumlah Pembelian</Text>
+            <Text c={MainColor.white}>Jumlah Pembelian</Text>
             <Text c={"blue"} fs={"italic"} fz={10}>
               minimal pembelian 10 lembar
             </Text>
           </Box>
           <NumberInput
+            styles={{ input: { backgroundColor: MainColor.white } }}
             type="number"
             ref={focusTrapRef}
             w={100}
@@ -94,13 +95,13 @@ export function Investasi_ViewProsesPembelian({
           />
         </Group>
 
-        <Divider my={"lg"} />
+        <Divider color={MainColor.white} my={"lg"} />
 
         <Group position="apart" mb={"md"}>
           <Box>
-            <Text>Total Harga</Text>
+            <Text c={MainColor.white}>Total Harga</Text>
           </Box>
-          <Text fz={25}>
+          <Text c={MainColor.white} fz={25}>
             Rp.{" "}
             {new Intl.NumberFormat("id-ID", {
               maximumFractionDigits: 10,
diff --git a/src/app_modules/investasi/_view/transaksi/view_proses_transaksi.tsx b/src/app_modules/investasi/_view/transaksi/view_proses_transaksi.tsx
index 267cea6d..6d8882f6 100644
--- a/src/app_modules/investasi/_view/transaksi/view_proses_transaksi.tsx
+++ b/src/app_modules/investasi/_view/transaksi/view_proses_transaksi.tsx
@@ -30,7 +30,7 @@ export function Investasi_ViewProsesTransaksi({
             padding: "15px",
             cursor: "pointer",
             borderRadius: "10px",
-            color: "white",
+            color: MainColor.white,
           }}
         >
           <Stack spacing={"md"}>
@@ -41,13 +41,13 @@ export function Investasi_ViewProsesTransaksi({
                 padding: "15px",
                 cursor: "pointer",
                 borderRadius: "10px",
-                color: "white",
+                color: MainColor.white,
               }}
             >
               <Stack align="center" justify="center">
                 <Title order={6}>Admin sedang memproses transaksimu</Title>
                 <Paper radius={1000} w={100} h={100}>
-                  <Center h={"100%"}>
+                  <Center style={{ backgroundColor: MainColor.white, borderRadius: "100%"}} h={"100%"}>
                     <Loader size={"lg"} color="yellow" variant="dots" />
                   </Center>
                 </Paper>
@@ -73,7 +73,7 @@ export function Investasi_ViewProsesTransaksi({
               padding: "15px",
               cursor: "pointer",
               borderRadius: "10px",
-              color: "white",
+              color: MainColor.white,
             }}
           >
             <Group position="center">
@@ -94,7 +94,7 @@ export function Investasi_ViewProsesTransaksi({
                 target="_blank"
                 href={`https://wa.me/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer investasi !`}
               >
-                <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
+                <IconBrandWhatsapp size={40} color={MainColor.green} />
               </Link>
             </Group>
           </Paper>
diff --git a/src/app_modules/investasi/component/detail/card_status.tsx b/src/app_modules/investasi/component/detail/card_status.tsx
index 85b79514..2fc26c32 100644
--- a/src/app_modules/investasi/component/detail/card_status.tsx
+++ b/src/app_modules/investasi/component/detail/card_status.tsx
@@ -3,7 +3,7 @@ import { Paper, Grid, Stack, AspectRatio, Text, Image } from "@mantine/core";
 import _ from "lodash";
 
 import { MODEL_INVESTASI } from "../../_lib/interface";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import { useRouter } from "next/navigation";
 
 export function ComponentInvestasi_CardStatus({
@@ -23,7 +23,7 @@ export function ComponentInvestasi_CardStatus({
           backgroundColor: AccentColor.darkblue,
           borderRadius: "10px",
           border: `2px solid ${AccentColor.blue}`,
-          color: "white",
+          color: MainColor.white,
           marginBottom: "15px",
         }}
       >
diff --git a/src/app_modules/investasi/create/view_new.tsx b/src/app_modules/investasi/create/view_new.tsx
index 98ae33be..ce1e4921 100644
--- a/src/app_modules/investasi/create/view_new.tsx
+++ b/src/app_modules/investasi/create/view_new.tsx
@@ -276,8 +276,14 @@ export default function InvestasiCreateNew() {
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              required: {
+                color: MainColor.red,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              }
             }}
             withAsterisk
             label="Judul Investasi"
@@ -294,8 +300,14 @@ export default function InvestasiCreateNew() {
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              required: {
+                color: MainColor.red,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              }
             }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
@@ -331,8 +343,14 @@ export default function InvestasiCreateNew() {
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              required: {
+                color: MainColor.red,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              }
             }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
@@ -378,16 +396,28 @@ export default function InvestasiCreateNew() {
             readOnly
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              required: {
+                color: MainColor.red,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              }
             }}
           />
 
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              required: {
+                color: MainColor.red,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              }
             }}
             rightSection={
               <Text fw={"bold"} c={"gray"}>
@@ -409,8 +439,14 @@ export default function InvestasiCreateNew() {
           <Select
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              required: {
+                color: MainColor.red,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              }
             }}
             withAsterisk
             label="Pencarian Investor"
@@ -432,8 +468,14 @@ export default function InvestasiCreateNew() {
           <Select
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              required: {
+                color: MainColor.red,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              }
             }}
             withAsterisk
             label="Periode Deviden"
@@ -452,8 +494,14 @@ export default function InvestasiCreateNew() {
           <Select
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              required: {
+                color: MainColor.red,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              }
             }}
             withAsterisk
             label="Pembagian Deviden"
diff --git a/src/app_modules/investasi/portofolio/publish.tsx b/src/app_modules/investasi/portofolio/publish.tsx
index 3bc61aa2..5b5408d1 100644
--- a/src/app_modules/investasi/portofolio/publish.tsx
+++ b/src/app_modules/investasi/portofolio/publish.tsx
@@ -18,7 +18,7 @@ import { useState } from "react";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
 import { MODEL_INVESTASI } from "../_lib/interface";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function Publish({ data }: { data: MODEL_INVESTASI[] }) {
   const router = useRouter();
@@ -39,7 +39,7 @@ export default function Publish({ data }: { data: MODEL_INVESTASI[] }) {
             backgroundColor: AccentColor.darkblue,
             borderRadius: "10px",
             border: `2px solid ${AccentColor.blue}`,
-            color: "white",
+            color: MainColor.white,
             marginBottom: "15px",
           }}
         >
diff --git a/src/app_modules/notifikasi/component/skeleton_view.tsx b/src/app_modules/notifikasi/component/skeleton_view.tsx
index c5d8f302..57a7a664 100644
--- a/src/app_modules/notifikasi/component/skeleton_view.tsx
+++ b/src/app_modules/notifikasi/component/skeleton_view.tsx
@@ -1,25 +1,26 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Stack, Group, Skeleton, Divider } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Divider, Group, Stack } from "@mantine/core";
 
 export default function Notifikasi_ComponentSkeletonView() {
   return (
     <>
-      {Array.from({ length: 10 }).map((_, i) => (
+      {Array.from({ length: 3 }).map((_, i) => (
         <ComponentGlobal_CardStyles key={i}>
           <Stack>
             <Group position="apart">
-              <Skeleton h={15} w={70} radius={"xl"} />
-              <Skeleton h={15} w={100} radius={"xl"} />
+              <CustomSkeleton h={15} w={70} radius={"xl"} />
+              <CustomSkeleton h={15} w={100} radius={"xl"} />
             </Group>
 
-            <Divider color="gray" />
-            <Skeleton h={15} w={50} radius={"xl"} />
-            <Skeleton h={15} w={"100%"} radius={"xl"} />
-            <Skeleton h={15} w={"100%"} radius={"xl"} />
+            <Divider color="#1F5B9E" />
+            <CustomSkeleton h={15} w={50} radius={"xl"} />
+            <CustomSkeleton h={15} w={"100%"} radius={"xl"} />
+            <CustomSkeleton h={15} w={"100%"} radius={"xl"} />
 
             <Group position="apart">
-              <Skeleton h={15} w={100} radius={"xl"} />
-              <Skeleton h={15} w={50} radius={"xl"} />
+              <CustomSkeleton h={15} w={100} radius={"xl"} />
+              <CustomSkeleton h={15} w={50} radius={"xl"} />
             </Group>
           </Stack>
         </ComponentGlobal_CardStyles>
diff --git a/src/app_modules/vote/component/card_view_publish.tsx b/src/app_modules/vote/component/card_view_publish.tsx
index bc5288a0..c955100a 100644
--- a/src/app_modules/vote/component/card_view_publish.tsx
+++ b/src/app_modules/vote/component/card_view_publish.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_AvatarAndUsername,
   ComponentGlobal_CardLoadingOverlay,
@@ -66,7 +66,7 @@ export default function ComponentVote_CardViewPublish({
                     root: {
                       backgroundColor: AccentColor.blue,
                       border: `1px solid ${AccentColor.skyblue}`,
-                      color: "white",
+                      color: MainColor.white,
                       width: "70%",
                     },
                   }}
diff --git a/src/app_modules/vote/component/card_view_status.tsx b/src/app_modules/vote/component/card_view_status.tsx
index 58fd92d0..713e9768 100644
--- a/src/app_modules/vote/component/card_view_status.tsx
+++ b/src/app_modules/vote/component/card_view_status.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_CardLoadingOverlay,
   ComponentGlobal_CardStyles,
@@ -46,7 +46,7 @@ export default function ComponentVote_CardViewStatus({
               root: {
                 backgroundColor: AccentColor.blue,
                 border: `1px solid ${AccentColor.skyblue}`,
-                color: "white",
+                color: MainColor.white,
                 width: "70%",
               },
             }}
diff --git a/src/app_modules/vote/component/detail/comp_layout_header_detail_publish.tsx b/src/app_modules/vote/component/detail/comp_layout_header_detail_publish.tsx
index 2024bb93..dca98de4 100644
--- a/src/app_modules/vote/component/detail/comp_layout_header_detail_publish.tsx
+++ b/src/app_modules/vote/component/detail/comp_layout_header_detail_publish.tsx
@@ -1,5 +1,5 @@
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
@@ -26,6 +26,7 @@ import { voting_funUpdateIsArsipById } from "../../fun";
 import { MODEL_VOTING } from "../../model/interface";
 import { voting_funGetOneVotingbyId } from "../../fun/get/fun_get_one_by_id";
 
+
 export function Voting_ComponentLayoutHeaderDetailPublish({
   votingId,
   title,
@@ -177,7 +178,7 @@ function BoxIsAuthor({
           {/* Daftar Kontributor */}
           <ActionIcon
             variant="transparent"
-            c="white"
+            c={MainColor.white}
             onClick={() => {
               setIsLoading(true);
               router.push(RouterVote.daftar_kontributor + votingId, {
@@ -187,7 +188,7 @@ function BoxIsAuthor({
           >
             {isLoading ? <ComponentGlobal_Loader /> : <IconUsersGroup />}
           </ActionIcon>
-          <Text fz={"sm"} align="center" color="white">
+          <Text fz={"sm"} align="center" color={MainColor.white}>
             Daftar Kontributor
           </Text>
         </Stack>
@@ -195,7 +196,7 @@ function BoxIsAuthor({
           {/* Arsip button */}
           <ActionIcon
             variant="transparent"
-            c="white"
+            c={MainColor.white}
             onClick={() => {
               onSetDrawer({
                 drawer: false,
@@ -206,7 +207,7 @@ function BoxIsAuthor({
           >
             <IconArchive />
           </ActionIcon>
-          <Text fz={"sm"} align="center" color="white">
+          <Text fz={"sm"} align="center" color={MainColor.white}>
             Update Arsip
           </Text>
         </Stack>
diff --git a/src/app_modules/vote/component/detail/detail_data_sebelum_publish.tsx b/src/app_modules/vote/component/detail/detail_data_sebelum_publish.tsx
index 476c2888..da48b86d 100644
--- a/src/app_modules/vote/component/detail/detail_data_sebelum_publish.tsx
+++ b/src/app_modules/vote/component/detail/detail_data_sebelum_publish.tsx
@@ -10,7 +10,7 @@ import {
 } from "@mantine/core";
 import { IconCircle } from "@tabler/icons-react";
 import { MODEL_VOTING } from "../../model/interface";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentVote_DetailDataSebelumPublish
 ({
@@ -26,7 +26,7 @@ export default function ComponentVote_DetailDataSebelumPublish
           backgroundColor: AccentColor.darkblue,
           borderRadius: "10px",
           border: `2px solid ${AccentColor.blue}`,
-          color: "white",
+          color: MainColor.white,
         }}
       >
         <Card.Section px={"xs"}>
@@ -49,7 +49,7 @@ export default function ComponentVote_DetailDataSebelumPublish
                   root: {
                     backgroundColor: AccentColor.blue,
                     border: `1px solid ${AccentColor.skyblue}`,
-                    color: "white",
+                    color: MainColor.white,
                     width: "80%",
                   },
                 }}
diff --git a/src/app_modules/vote/component/detail/detail_data_setelah_publish.tsx b/src/app_modules/vote/component/detail/detail_data_setelah_publish.tsx
index a78d5d47..d7f222c3 100644
--- a/src/app_modules/vote/component/detail/detail_data_setelah_publish.tsx
+++ b/src/app_modules/vote/component/detail/detail_data_setelah_publish.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_AvatarAndUsername,
   ComponentGlobal_CardStyles,
@@ -43,7 +43,7 @@ export default function ComponentVote_DetailDataSetelahPublish({
                     root: {
                       backgroundColor: AccentColor.blue,
                       border: `1px solid ${AccentColor.skyblue}`,
-                      color: "white",
+                      color: MainColor.white,
                       width: "80%",
                     },
                   }}
diff --git a/src/app_modules/vote/component/detail/detail_hasil_voting.tsx b/src/app_modules/vote/component/detail/detail_hasil_voting.tsx
index 61a872b6..53963913 100644
--- a/src/app_modules/vote/component/detail/detail_hasil_voting.tsx
+++ b/src/app_modules/vote/component/detail/detail_hasil_voting.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
   Avatar,
   Card,
@@ -25,7 +25,7 @@ export default function ComponentVote_HasilVoting({
           backgroundColor: AccentColor.darkblue,
           borderRadius: "10px",
           border: `2px solid ${AccentColor.blue}`,
-          color: "white",
+          color: MainColor.white,
         }}
       >
         <Card.Section>
diff --git a/src/app_modules/vote/component/skeleton_view.tsx b/src/app_modules/vote/component/skeleton_view.tsx
index 21baff8c..5496b500 100644
--- a/src/app_modules/vote/component/skeleton_view.tsx
+++ b/src/app_modules/vote/component/skeleton_view.tsx
@@ -1,5 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Center, Grid, Group, Skeleton, Stack } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Center, Grid, Group, Stack } from "@mantine/core";
 
 export {
   Voting_ComponentSkeletonDetail,
@@ -17,25 +18,25 @@ function Voting_ComponentSkeletonViewPublish() {
           <Stack spacing={"lg"}>
             <Grid align="center">
               <Grid.Col span={"content"}>
-                <Skeleton circle height={40} />
+                <CustomSkeleton circle height={40} />
               </Grid.Col>
               <Grid.Col span={4}>
-                <Skeleton height={20} w={150} />
+                <CustomSkeleton height={20} w={150} />
               </Grid.Col>
             </Grid>
 
             <Stack align="center">
-              <Skeleton height={20} w={150} />
-              <Skeleton height={20} w={300} />
-              {/* <Skeleton height={20} w={70} /> */}
+              <CustomSkeleton height={20} w={150} />
+              <CustomSkeleton height={20} w={300} />
+              {/* <CustomSkeleton height={20} w={70} /> */}
             </Stack>
 
             <Grid grow>
               {Array.from({ length: 2 }).map((e, i) => (
                 <Grid.Col span={4} key={i}>
                   <Stack align="center">
-                    <Skeleton circle height={70} />
-                    <Skeleton height={20} w={50} />
+                    <CustomSkeleton circle height={70} />
+                    <CustomSkeleton height={20} w={50} />
                   </Stack>
                 </Grid.Col>
               ))}
@@ -53,8 +54,8 @@ function Voting_ComponentSkeletonViewStatus() {
       {Array.from({ length: 2 }).map((e, i) => (
         <ComponentGlobal_CardStyles key={i}>
           <Stack align="center" spacing="lg">
-            <Skeleton height={20} w={150} />
-            <Skeleton height={20} w={300} />
+            <CustomSkeleton height={20} w={150} />
+            <CustomSkeleton height={20} w={300} />
           </Stack>
         </ComponentGlobal_CardStyles>
       ))}
@@ -70,31 +71,31 @@ function Voting_ComponentSkeletonViewKontribusi() {
           <Stack spacing={"lg"}>
             <Grid align="center">
               <Grid.Col span={"content"}>
-                <Skeleton circle height={40} />
+                <CustomSkeleton circle height={40} />
               </Grid.Col>
               <Grid.Col span={4}>
-                <Skeleton height={20} w={150} />
+                <CustomSkeleton height={20} w={150} />
               </Grid.Col>
             </Grid>
 
             <Stack align="center">
-              <Skeleton height={20} w={150} />
-              <Skeleton height={20} w={300} />
+              <CustomSkeleton height={20} w={150} />
+              <CustomSkeleton height={20} w={300} />
             </Stack>
 
             <Group position="center" spacing={100}>
               <Stack align="center">
-                <Skeleton circle height={70} />
-                <Skeleton height={20} w={50} />
+                <CustomSkeleton circle height={70} />
+                <CustomSkeleton height={20} w={50} />
               </Stack>
               <Stack align="center">
-                <Skeleton circle height={70} />
-                <Skeleton height={20} w={50} />
+                <CustomSkeleton circle height={70} />
+                <CustomSkeleton height={20} w={50} />
               </Stack>
             </Group>
 
             <Stack align="center">
-              <Skeleton height={15} w={50} /> <Skeleton height={20} w={50} />
+              <CustomSkeleton height={15} w={50} /> <CustomSkeleton height={20} w={50} />
             </Stack>
           </Stack>
         </ComponentGlobal_CardStyles>
@@ -111,30 +112,30 @@ function Voting_ComponentSkeletonDetail() {
           <Stack spacing={"xl"}>
             <Grid align="center">
               <Grid.Col span={"content"}>
-                <Skeleton circle height={40} />
+                <CustomSkeleton circle height={40} />
               </Grid.Col>
               <Grid.Col span={4}>
-                <Skeleton height={20} w={150} />
+                <CustomSkeleton height={20} w={150} />
               </Grid.Col>
             </Grid>
 
             <Stack align="center">
-              <Skeleton height={20} w={150} />
-              <Skeleton height={20} w={"100%"} />
-              <Skeleton height={20} w={"100%"} />
-              <Skeleton height={20} w={"100%"} />
-              <Skeleton height={20} w={50} />
-              <Skeleton height={20} w={200} />
+              <CustomSkeleton height={20} w={150} />
+              <CustomSkeleton height={20} w={"100%"} />
+              <CustomSkeleton height={20} w={"100%"} />
+              <CustomSkeleton height={20} w={"100%"} />
+              <CustomSkeleton height={20} w={50} />
+              <CustomSkeleton height={20} w={200} />
             </Stack>
 
             {/* <Stack>
-              <Skeleton height={20} w={70} />
-              <Skeleton height={20} w={150} />
-              <Skeleton height={20} w={150} />
+              <CustomSkeleton height={20} w={70} />
+              <CustomSkeleton height={20} w={150} />
+              <CustomSkeleton height={20} w={150} />
             </Stack> */}
 
             <Stack align="center">
-              <Skeleton height={20} w={70} />
+              <CustomSkeleton height={20} w={70} />
             </Stack>
           </Stack>
         </ComponentGlobal_CardStyles>
@@ -142,17 +143,17 @@ function Voting_ComponentSkeletonDetail() {
         <ComponentGlobal_CardStyles>
           <Stack>
             <Center>
-              <Skeleton h={20} w={"30%"} />
+              <CustomSkeleton h={20} w={"30%"} />
             </Center>
 
             <Group position="center" spacing={50}>
               <Stack align="center">
-                <Skeleton circle height={70} />
-                <Skeleton height={20} w={50} />
+                <CustomSkeleton circle height={70} />
+                <CustomSkeleton height={20} w={50} />
               </Stack>
               <Stack align="center">
-                <Skeleton circle height={70} />
-                <Skeleton height={20} w={50} />
+                <CustomSkeleton circle height={70} />
+                <CustomSkeleton height={20} w={50} />
               </Stack>
             </Group>
           </Stack>
@@ -169,13 +170,13 @@ function  Voting_ComponentSkeletonDaftarKontributor(){
         <Stack spacing={"xl"}>
           <Grid align="center" gutter={"md"}>
             <Grid.Col span={"content"}>
-              <Skeleton circle height={40} />
+              <CustomSkeleton circle height={40} />
             </Grid.Col>
             <Grid.Col span={3}>
-              <Skeleton height={20} w={150} />
+              <CustomSkeleton height={20} w={150} />
             </Grid.Col>
             <Grid.Col span={3} offset={3}>
-              <Skeleton height={20} w={150} />
+              <CustomSkeleton height={20} w={150} />
             </Grid.Col>
           </Grid>
         </Stack>
diff --git a/src/app_modules/vote/main/beranda.tsx b/src/app_modules/vote/main/beranda.tsx
index a0d8e193..069e9d1c 100644
--- a/src/app_modules/vote/main/beranda.tsx
+++ b/src/app_modules/vote/main/beranda.tsx
@@ -2,7 +2,7 @@
 
 import { gs_votingTiggerBeranda } from "@/app/lib/global_state";
 import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { clientLogger } from "@/util/clientLogger";
@@ -119,6 +119,7 @@ export default function Vote_Beranda() {
         radius={"xl"}
         placeholder="Masukan judul voting"
         onChange={(val) => onSearch(val.target.value)}
+        styles={{ input: { backgroundColor: MainColor.white } }}
       />
 
       <ComponentGlobal_CreateButton path={RouterVote.create} />
diff --git a/src/app_modules/vote/main/layout.tsx b/src/app_modules/vote/main/layout.tsx
index fb31f83b..2f82295c 100644
--- a/src/app_modules/vote/main/layout.tsx
+++ b/src/app_modules/vote/main/layout.tsx
@@ -70,7 +70,7 @@ export default function LayoutVote_Main({
                 <ActionIcon
                   // disabled={e.path === "" ? true : false}
                   variant="transparent"
-                  c={hotMenu === e.id ? MainColor.yellow : "white"}
+                  c={hotMenu === e.id ? MainColor.yellow : MainColor.white}
                   onClick={() =>
                     e.path === ""
                       ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
diff --git a/src/app_modules/vote/main/riwayat/index.tsx b/src/app_modules/vote/main/riwayat/index.tsx
index 8231546b..6ac85b19 100644
--- a/src/app_modules/vote/main/riwayat/index.tsx
+++ b/src/app_modules/vote/main/riwayat/index.tsx
@@ -60,11 +60,11 @@ export default function Vote_Riwayat() {
                 style={{
                   transition: "0.5s",
                   backgroundColor:
-                    params.id === e.id ? MainColor.yellow : "white",
+                    params.id === e.id ? MainColor.yellow : MainColor.white,
                   border:
                     params.id === e.id
                       ? `1px solid ${AccentColor.yellow}`
-                      : `1px solid white`,
+                      : `1px solid ${MainColor.white}`,
                 }}
               >
                 {e.label}
diff --git a/src/app_modules/vote/main/status/draft.tsx b/src/app_modules/vote/main/status/draft.tsx
index 7d0ab754..be70dbb6 100644
--- a/src/app_modules/vote/main/status/draft.tsx
+++ b/src/app_modules/vote/main/status/draft.tsx
@@ -69,7 +69,7 @@ export default function Vote_StatusDraft() {
             {(item) => (
               <ComponentVote_CardViewStatus
                 data={item}
-                path={RouterVote.detail_review}
+                path={RouterVote.detail_draft}
               />
             )}
           </ScrollOnly>
diff --git a/src/app_modules/vote/main/status/index.tsx b/src/app_modules/vote/main/status/index.tsx
index 11a59a44..9d464d4a 100644
--- a/src/app_modules/vote/main/status/index.tsx
+++ b/src/app_modules/vote/main/status/index.tsx
@@ -68,7 +68,7 @@ export default function Vote_Status() {
                 style={{
                   transition: "0.5s",
                   backgroundColor:
-                    params.id === e.id ? MainColor.yellow : "white",
+                    params.id === e.id ? MainColor.yellow : MainColor.white,
                   border:
                     params.id === e.id
                       ? `1px solid ${AccentColor.yellow}`
diff --git a/src/app_modules/vote/main/status/reject.tsx b/src/app_modules/vote/main/status/reject.tsx
index c66f902c..1db98190 100644
--- a/src/app_modules/vote/main/status/reject.tsx
+++ b/src/app_modules/vote/main/status/reject.tsx
@@ -69,7 +69,7 @@ export default function Vote_StatusReject() {
             {(item) => (
               <ComponentVote_CardViewStatus
                 data={item}
-                path={RouterVote.detail_review}
+                path={RouterVote.detail_reject}
               />
             )}
           </ScrollOnly>