diff --git a/src/app_modules/colab/component/detail/list_partisipasi_user.tsx b/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
index eab27c28..609d4f58 100644
--- a/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
+++ b/src/app_modules/colab/component/detail/list_partisipasi_user.tsx
@@ -254,7 +254,7 @@ export default function ComponentColab_DetailListPartisipasiUser({
             borderRight: `1px solid ${AccentColor.blue}`,
             borderLeft: `1px solid ${AccentColor.blue}`,
             borderRadius: "20px 20px 0px 0px",
-            color: "white",
+            color: MainColor.white,
             paddingBottom: "5%",
           },
         }}
@@ -262,16 +262,21 @@ export default function ComponentColab_DetailListPartisipasiUser({
         <Stack spacing={"xs"}>
           <Group position="right">
             <ActionIcon onClick={close} variant="transparent">
-              <IconX color="white" />
+              <IconX color={MainColor.white} />
             </ActionIcon>
           </Group>
           <Textarea
             maxLength={300}
             label={
-              <Text c={"white"} mb={"sm"} fw={"bold"}>
+              <Text c={MainColor.white} mb={"sm"} fw={"bold"}>
                 Deskripsi Diri
               </Text>
             }
+            styles={{
+              input: {
+                backgroundColor: MainColor.white
+              }
+            }}
             placeholder="Deskripsikan diri anda yang sesuai dengan proyek ini.."
             minRows={4}
             onChange={(val) => {
diff --git a/src/app_modules/colab/edit/index.tsx b/src/app_modules/colab/edit/index.tsx
index abee16f1..2196907d 100644
--- a/src/app_modules/colab/edit/index.tsx
+++ b/src/app_modules/colab/edit/index.tsx
@@ -30,8 +30,14 @@ export default function Colab_Edit({
           maxLength={100}
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            input: {
+              backgroundColor: MainColor.white,
+            },
+            required: {
+              color: MainColor.red,
+            }
           }}
           label="Judul"
           withAsterisk
@@ -49,8 +55,14 @@ export default function Colab_Edit({
           maxLength={100}
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            input: {
+              backgroundColor: MainColor.white,
+            },
+            required: {
+              color: MainColor.red,
+            }
           }}
           label="Lokasi"
           withAsterisk
@@ -67,8 +79,17 @@ export default function Colab_Edit({
         <Select
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            input: {
+              backgroundColor: MainColor.white,
+            },
+            required: {
+              color: MainColor.red,
+            },
+            dropdown: {
+              backgroundColor: MainColor.white,
+            }
           }}
           placeholder="Pilih kategori industri"
           label="Pilih Industri"
@@ -113,8 +134,14 @@ export default function Colab_Edit({
           <Textarea
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white,
+              },
+              required: {
+                color: MainColor.red,
+              }
             }}
             label="Tujuan Proyek"
             placeholder="Masukan tujuan proyek"
@@ -138,7 +165,10 @@ export default function Colab_Edit({
           <Textarea
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
+              },
+              input: {
+                backgroundColor: MainColor.white,
               },
             }}
             label="Keuntungan "
diff --git a/src/app_modules/event/component/detail/detail_data.tsx b/src/app_modules/event/component/detail/detail_data.tsx
index 2ca548f8..5adc68b7 100644
--- a/src/app_modules/event/component/detail/detail_data.tsx
+++ b/src/app_modules/event/component/detail/detail_data.tsx
@@ -4,6 +4,7 @@ import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import { Grid, Stack, Text, Title } from "@mantine/core";
 import { MODEL_EVENT } from "../../model/interface";
 import { MainColor } from "@/app_modules/_global/color";
+import { Event_ComponentSkeletonDetailData } from "../skeleton/comp_skeleton_detail_data";
 
 export default function ComponentEvent_DetailData({
   data,
@@ -84,7 +85,7 @@ export default function ComponentEvent_DetailData({
             <Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
           </Stack>
         </Stack>
-      </ComponentGlobal_CardStyles>
+      </ComponentGlobal_CardStyles >
     </>
   );
 }
diff --git a/src/app_modules/event/detail/draft/index.tsx b/src/app_modules/event/detail/draft/index.tsx
index a1249c92..a17357a2 100644
--- a/src/app_modules/event/detail/draft/index.tsx
+++ b/src/app_modules/event/detail/draft/index.tsx
@@ -19,6 +19,7 @@ import { Event_funDeleteById } from "../../fun/delete/fun_delete";
 import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
 import { MODEL_EVENT } from "../../model/interface";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Event_DetailDraft({
   dataEvent,
@@ -68,12 +69,18 @@ function ButtonAction({
 
   async function onDelete() {
     const res = await Event_funDeleteById(eventId);
-    if (res.status === 200) {
-      router.back();
-      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+    try {
       setLoadingDelete(true);
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
+      if (res.status === 200) {
+        router.back();
+        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+      } else {
+        setLoadingDelete(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      setLoadingDelete(false);
+      clientLogger.error("Error delete event", error);
     }
   }
 
@@ -158,7 +165,7 @@ function ButtonAction({
         }
         buttonKanan={
           <Button
-          style={{ backgroundColor: AccentColor.yellow }}
+            style={{ backgroundColor: AccentColor.yellow }}
             loaderPosition="center"
             loading={isLoadingAjukan ? true : false}
             radius={"xl"}
diff --git a/src/app_modules/event/detail/main_detail/index.tsx b/src/app_modules/event/detail/main_detail/index.tsx
index 95750c46..70768a65 100644
--- a/src/app_modules/event/detail/main_detail/index.tsx
+++ b/src/app_modules/event/detail/main_detail/index.tsx
@@ -16,6 +16,7 @@ import { Event_countTotalPesertaById } from "../../fun/count/count_total_peserta
 import { Event_funJoinEvent } from "../../fun/create/fun_join_event";
 import { Event_getListPesertaById } from "../../fun/get/get_list_peserta_by_id";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Event_DetailMain({
   userLoginId,
@@ -57,7 +58,7 @@ export default function Event_DetailMain({
             Anda Telah Ikut Serta
           </Button>
         ) : (
-            <Button
+          <Button
             style={{ backgroundColor: MainColor.green }}
             loaderPosition="center"
             loading={isLoading ? true : false}
@@ -104,40 +105,46 @@ async function onJoin(
 
   const userLoginId = userId;
 
-  const res = await Event_funJoinEvent(body as any);
-  if (res.status === 200) {
-    const resPeserta = await Event_getListPesertaById(eventId);
-    setIsNewPeserta(true);
-
-    const resTotal = await Event_countTotalPesertaById(eventId);
-    setTotal(resTotal);
-
-    if (userLoginId !== res.data?.Event?.authorId) {
-      const dataNotifikasi: IRealtimeData = {
-        appId: res?.data?.Event?.id as any,
-        status: "Peserta Event" as any,
-        userId: res.data?.Event?.authorId as any,
-        pesan: res.data?.Event?.title as any,
-        kategoriApp: "EVENT",
-        title: "Peserta baru event anda !",
-      };
-
-      const createNotifikasi = await notifikasiToUser_funCreate({
-        data: dataNotifikasi as any,
-      });
-
-      if (createNotifikasi.status === 201) {
-        WibuRealtime.setData({
-          type: "notification",
-          pushNotificationTo: "USER",
-          dataMessage: dataNotifikasi,
-        });
-      }
-    }
-    setIsJoinSuccess(true);
+  try {
     setLoading(true);
-    ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
-  } else {
-    ComponentGlobal_NotifikasiGagal(res.message);
+    const res = await Event_funJoinEvent(body as any);
+    if (res.status === 200) {
+      const resPeserta = await Event_getListPesertaById(eventId);
+      setIsNewPeserta(true);
+
+      const resTotal = await Event_countTotalPesertaById(eventId);
+      setTotal(resTotal);
+
+      if (userLoginId !== res.data?.Event?.authorId) {
+        const dataNotifikasi: IRealtimeData = {
+          appId: res?.data?.Event?.id as any,
+          status: "Peserta Event" as any,
+          userId: res.data?.Event?.authorId as any,
+          pesan: res.data?.Event?.title as any,
+          kategoriApp: "EVENT",
+          title: "Peserta baru event anda !",
+        };
+
+        const createNotifikasi = await notifikasiToUser_funCreate({
+          data: dataNotifikasi as any,
+        });
+
+        if (createNotifikasi.status === 201) {
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "USER",
+            dataMessage: dataNotifikasi,
+          });
+        }
+      }
+      setIsJoinSuccess(true);
+      ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+    } else {
+      setLoading(false);
+      ComponentGlobal_NotifikasiGagal(res.message);
+    }
+  } catch (error) {
+    setLoading(false);
+    clientLogger.error("Error join event", error);
   }
 }
diff --git a/src/app_modules/event/detail/reject/index.tsx b/src/app_modules/event/detail/reject/index.tsx
index 98e25510..46667743 100644
--- a/src/app_modules/event/detail/reject/index.tsx
+++ b/src/app_modules/event/detail/reject/index.tsx
@@ -14,6 +14,7 @@ import { Event_funDeleteById } from "../../fun/delete/fun_delete";
 import { Event_funEditStatusById } from "../../fun/edit/fun_edit_status_by_id";
 import { MODEL_EVENT } from "../../model/interface";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Event_DetailReject({
   dataEvent,
@@ -21,6 +22,7 @@ export default function Event_DetailReject({
   dataEvent: MODEL_EVENT;
 }) {
   const [data, setData] = useState(dataEvent);
+  
   return (
     <>
       <Stack spacing={"lg"}>
@@ -32,11 +34,50 @@ export default function Event_DetailReject({
   );
 }
 
-function ButtonAction({ eventId }: { eventId: string }) {
+
+function ButtonAction({ eventId,  }: { eventId: string }) {
   const router = useRouter();
   const [openModal1, setOpenModal1] = useState(false);
   const [openModal2, setOpenModal2] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+  const [isLoading2, setLoading2] = useState(false);
 
+  async function onUpdate(router: AppRouterInstance, eventId: string, setLoading: any) {
+    await Event_funEditStatusById("3", eventId).then((res) => {
+      try {
+        setLoading(true);
+        if (res.status === 200) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          router.push(RouterEvent.status({ id: "3" }));
+        } else {
+          setLoading(false);
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      } catch (error) {
+        setLoading(false);
+        clientLogger.error("Error update event", error);
+      }
+     
+    });
+  }
+  
+  async function onDelete(router: AppRouterInstance, eventId: string, setLoading2: any) {
+    const res = await Event_funDeleteById(eventId);
+    try {
+      setLoading2(true);
+      if (res.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
+        router.back();
+      } else {
+        setLoading2(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    } catch (error) {
+      setLoading2(false);
+      clientLogger.error("Error delete event", error);
+    }
+  }
+  
   return (
     <>
       <SimpleGrid cols={2}>
@@ -74,12 +115,13 @@ function ButtonAction({ eventId }: { eventId: string }) {
         }
         buttonKanan={
           <Button
+            loaderPosition="center"
             style={{ backgroundColor: AccentColor.yellow }}
             radius={"xl"}
             c={MainColor.darkblue}
+            loading={isLoading ? true : false}
             onClick={() => {
-              onUpdate(router, eventId);
-              setOpenModal1(false);
+              onUpdate(router, eventId, setLoading);
             }}
           >
             Edit
@@ -93,18 +135,19 @@ function ButtonAction({ eventId }: { eventId: string }) {
         opened={openModal2}
         close={() => setOpenModal2(false)}
         buttonKiri={
-          <Button style={{ color: "black" }} radius={"xl"} onClick={() => setOpenModal2(false)}>
+          <Button style={{ color: AccentColor.white }} radius={"xl"} onClick={() => setOpenModal2(false)}>
             Batal
           </Button>
         }
         buttonKanan={
           <Button
-            style={{ color: "black" }}
+            loading={isLoading2 ? true : false}
+            loaderPosition="center"
+            style={{ color: AccentColor.white }}
             radius={"xl"}
             color={"red"}
             onClick={() => {
-              onDelete(router, eventId);
-              setOpenModal2(false);
+              onDelete(router, eventId, setLoading2);
             }}
           >
             Hapus
@@ -115,23 +158,3 @@ function ButtonAction({ eventId }: { eventId: string }) {
   );
 }
 
-async function onUpdate(router: AppRouterInstance, eventId: string) {
-  await Event_funEditStatusById("3", eventId).then((res) => {
-    if (res.status === 200) {
-      ComponentGlobal_NotifikasiBerhasil(res.message);
-      router.push(RouterEvent.status({ id: "3" }));
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
-    }
-  });
-}
-
-async function onDelete(router: AppRouterInstance, eventId: string) {
-  const res = await Event_funDeleteById(eventId);
-  if (res.status === 200) {
-    ComponentGlobal_NotifikasiBerhasil(res.message, 2000);
-    router.back();
-  } else {
-    ComponentGlobal_NotifikasiGagal(res.message);
-  }
-}
diff --git a/src/app_modules/event/detail/review/index.tsx b/src/app_modules/event/detail/review/index.tsx
index 436516f3..a6b8462d 100644
--- a/src/app_modules/event/detail/review/index.tsx
+++ b/src/app_modules/event/detail/review/index.tsx
@@ -55,7 +55,7 @@ function ButtonAction({ eventId }: { eventId: string }) {
         }
         buttonKanan={
           <Button
-          style={{ backgroundColor: MainColor.orange }}
+          style={{ backgroundColor: AccentColor.yellow }}
             loaderPosition="center"
             loading={isLoading}
             radius={"xl"}
diff --git a/src/app_modules/event/edit/index.tsx b/src/app_modules/event/edit/index.tsx
index 6afc296d..86b13683 100644
--- a/src/app_modules/event/edit/index.tsx
+++ b/src/app_modules/event/edit/index.tsx
@@ -24,6 +24,7 @@ import { useState } from "react";
 import { Event_funEditById } from "../fun/edit/fun_edit_by_id";
 import { MODEL_EVENT } from "../model/interface";
 import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Event_Edit({
   dataEvent,
@@ -320,14 +321,19 @@ async function onUpdate(
   if (_.values(value).includes(""))
     return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
 
-  const res = await Event_funEditById(value);
-  setLoading(true);
+  try {
+    setLoading(true);
+    const res = await Event_funEditById(value);
 
   if (res.status === 200) {
     ComponentGlobal_NotifikasiBerhasil(res.message);
     router.back();
-    setLoading(false);
   } else {
+    setLoading(false);
     ComponentGlobal_NotifikasiGagal(res.message);
   }
+  } catch (error) {
+    setLoading(false);
+    clientLogger.error("Error update event", error);
+  }
 }
diff --git a/src/app_modules/vote/create/index.tsx b/src/app_modules/vote/create/index.tsx
index 20440462..4830f297 100644
--- a/src/app_modules/vote/create/index.tsx
+++ b/src/app_modules/vote/create/index.tsx
@@ -28,6 +28,7 @@ import { useState } from "react";
 import { WibuRealtime } from "wibu-pkg";
 import { Vote_funCreate } from "../fun/create/create_vote";
 import { gs_vote_hotMenu } from "../global_state";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Vote_Create() {
   const router = useRouter();
@@ -69,40 +70,49 @@ export default function Vote_Create() {
 
     // console.log("berhasil");
 
-    const res = await Vote_funCreate(data as any, listVote);
-    if (res.status === 201) {
-       const dataNotifikasi: IRealtimeData = {
-        appId: res.data?.id as any,
-        status: res.data?.Voting_Status?.name as any,
-        userId: res.data?.authorId as any,
-        pesan: res.data?.title as any,
-        kategoriApp: "VOTING",
-        title: "Voting baru",
-      };
+    try {
+      setIsLoading(true);
+      const res = await Vote_funCreate(data as any, listVote);
+      if (res.status === 201) {
+        const dataNotifikasi: IRealtimeData = {
+          appId: res.data?.id as any,
+          status: res.data?.Voting_Status?.name as any,
+          userId: res.data?.authorId as any,
+          pesan: res.data?.title as any,
+          kategoriApp: "VOTING",
+          title: "Voting baru",
+        };
 
-      const notif = await notifikasiToAdmin_funCreate({
-        data: dataNotifikasi as any,
-      });
-
-      if (notif.status === 201) {
-        WibuRealtime.setData({
-          type: "notification",
-          pushNotificationTo: "ADMIN",
+        const notif = await notifikasiToAdmin_funCreate({
+          data: dataNotifikasi as any,
         });
 
-        WibuRealtime.setData({
-          type: "trigger",
-          pushNotificationTo: "ADMIN",
-          dataMessage: dataNotifikasi,
-        });
+        if (notif.status === 201) {
+          WibuRealtime.setData({
+            type: "notification",
+            pushNotificationTo: "ADMIN",
+          });
 
-        setHotMenu(2);
-        router.replace(RouterVote.status({ id: "2" }));
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-        setIsLoading(true);
+          WibuRealtime.setData({
+            type: "trigger",
+            pushNotificationTo: "ADMIN",
+            dataMessage: dataNotifikasi,
+          });
+
+          setHotMenu(2);
+          router.replace(RouterVote.status({ id: "2" }));
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+
+        }
+      } else {
+        setIsLoading(false);
+        ComponentGlobal_NotifikasiGagal(res.message);
       }
-    } else {
-      ComponentGlobal_NotifikasiGagal(res.message);
+
+    } catch (error) {
+      setIsLoading(false);
+      clientLogger.error("Error create voting", error);
+
     }
   }
 
@@ -273,10 +283,10 @@ export default function Vote_Create() {
         <Button
           disabled={
             !data.title ||
-            !data.deskripsi ||
-            !data.awalVote ||
-            !data.akhirVote ||
-            listVote.map((e, i) => e.value).includes("")
+              !data.deskripsi ||
+              !data.awalVote ||
+              !data.akhirVote ||
+              listVote.map((e, i) => e.value).includes("")
               ? true
               : false
           }
diff --git a/src/app_modules/vote/edit/index.tsx b/src/app_modules/vote/edit/index.tsx
index 36a1fdf8..e3f56543 100644
--- a/src/app_modules/vote/edit/index.tsx
+++ b/src/app_modules/vote/edit/index.tsx
@@ -31,6 +31,7 @@ import {
   MODEL_VOTING,
   MODEL_VOTING_DAFTAR_NAMA_VOTE,
 } from "../model/interface";
+import { clientLogger } from "@/util/clientLogger";
 
 export default function Vote_Edit({
   dataVote,
@@ -270,17 +271,24 @@ function ButtonAction({
   async function onUpdate() {
     // console.log(listVoting);
 
-    await Vote_funEditById(data, listVoting).then((res) => {
-      if (res.status === 200) {
-        ComponentGlobal_NotifikasiBerhasil("Berhasil Update");
-        // setHotMenu(1);
-        // setTabsStatus("Draft");
-        router.back();
-        setIsLoading(true);
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
+    try {
+      setIsLoading(true);
+      await Vote_funEditById(data, listVoting).then((res) => {
+        if (res.status === 200) {
+          ComponentGlobal_NotifikasiBerhasil("Berhasil Update");
+          // setHotMenu(1);
+          // setTabsStatus("Draft");
+          router.back();
+        } else {
+          setIsLoading(false);
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      });
+    
+    } catch (error) {
+      setIsLoading(false);
+    clientLogger.error("Error update voting", error);
+    } 
   }
 
   return (