diff --git a/src/app_modules/colab/component/card_view/card_section_data.tsx b/src/app_modules/colab/component/card_view/card_section_data.tsx
index 66255d8e..af12bdec 100644
--- a/src/app_modules/colab/component/card_view/card_section_data.tsx
+++ b/src/app_modules/colab/component/card_view/card_section_data.tsx
@@ -6,6 +6,8 @@ import { useRouter } from "next/navigation";
 import { MODEL_COLLABORATION } from "../../model/interface";
 import { useState } from "react";
 import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentColab_CardSectionData({
   colabId,
@@ -19,10 +21,25 @@ export default function ComponentColab_CardSectionData({
   const router = useRouter();
   const [visible, setVisible] = useState(false);
 
+  const listData = [
+    {
+      title: "Industri",
+      value: data?.ProjectCollaborationMaster_Industri.name
+        ? data.ProjectCollaborationMaster_Industri.name
+        : "Industri",
+    },
+    {
+      title: "Lokasi",
+      value: data?.lokasi ? data.lokasi : "-",
+    },
+  ];
+
   return (
     <>
       <Card.Section
-        px={"md"}
+        mt={0}
+        bg={MainColor.soft_darkblue}
+        p={"sm"}
         onClick={() => {
           if (path) {
             setVisible(true);
@@ -37,51 +54,10 @@ export default function ComponentColab_CardSectionData({
             {data?.title ? data.title : "Judul Proyek"}
           </Title>
         </Center>
-        <Stack spacing={"xs"}>
-          <Grid>
-            <Grid.Col span={2}>
-              <Text fw={"bold"} >
-                Industri
-              </Text>
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <Text >:</Text>
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text  lineClamp={1}>
-                {data?.ProjectCollaborationMaster_Industri.name
-                  ? data?.ProjectCollaborationMaster_Industri?.name
-                  : "Industri"}
-              </Text>
-            </Grid.Col>
-          </Grid>
-
-          <Grid>
-            <Grid.Col span={2}>
-              <Text fw={"bold"} >
-                Lokasi
-              </Text>
-            </Grid.Col>
-            <Grid.Col span={1}>
-              <Text >:</Text>
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text  lineClamp={1}>
-                {data?.lokasi ? data?.lokasi : "Lokasi dari proyek"}
-              </Text>
-            </Grid.Col>
-          </Grid>
-
-          <Stack spacing={5}>
-            <Text fw={"bold"} >
-              Tujuan proyek
-            </Text>
-            <Text lineClamp={2} >
-              {data?.purpose
-                ? data?.purpose
-                : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores odio nihil in animi expedita, suscipit excepturi pariatur totam esse officiis enim cumque. Quidem, facere aliquam. Sunt laboriosam incidunt iste amet"}
-            </Text>
-          </Stack>
+        <Stack spacing={5}>
+          {listData.map((e, i) => (
+            <Component_V3_GridDetailData item={e} key={i} />
+          ))}
         </Stack>
         {visible && <ComponentGlobal_CardLoadingOverlay />}
       </Card.Section>
diff --git a/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx b/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx
index 9c241cc7..48a209a8 100644
--- a/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx
+++ b/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx
@@ -12,7 +12,7 @@ export default function ComponentColab_JumlahPartisipan({
     <>
       <Card.Section px={"md"} >
         <Stack>
-          <Divider />
+          {/* <Divider /> */}
           <Center>
             <Grid>
               <Grid.Col span={"content"}>
diff --git a/src/app_modules/colab/component/detail/detail_data.tsx b/src/app_modules/colab/component/detail/detail_data.tsx
index e2f2f12a..89a57ce6 100644
--- a/src/app_modules/colab/component/detail/detail_data.tsx
+++ b/src/app_modules/colab/component/detail/detail_data.tsx
@@ -3,31 +3,60 @@
 import { Stack, Box, Center, Title, Grid, Text } from "@mantine/core";
 import ComponentColab_AuthorNameOnHeader from "../header_author_name";
 import { MODEL_COLLABORATION } from "../../model/interface";
+import { Comp_V3_SetInnerHTML } from "@/app_modules/_global/component/new/comp_V3_set_html_with_stiker";
+import { Component_V3_GridDetailData } from "@/app_modules/_global/component/new/comp_V3_grid_detail_data";
 
 export default function ComponentColab_DetailData({
   data,
 }: {
   data?: MODEL_COLLABORATION;
 }) {
+
+  const listData = [
+    {
+      title: "Industri",
+      value: data?.ProjectCollaborationMaster_Industri.name
+        ? data.ProjectCollaborationMaster_Industri.name
+        : "Industri",
+    },
+    {
+      title: "Lokasi",
+      value: data?.lokasi ? data.lokasi : "-",
+    },
+    {
+      title: "Tujuan Proyek",
+      value: <Comp_V3_SetInnerHTML props={data?.purpose} />,
+    },
+    {
+      title: "Keuntungan Proyek",
+      value: <Comp_V3_SetInnerHTML props={data?.benefit} />,
+    },
+  ];
+
+
   return (
     <>
-      <Stack>
-        <Box>
-          <Center px={"md"} mb={"lg"}>
-            <Title order={4}>{data?.title ? data.title : "Judul Proyek"}</Title>
-          </Center>
-          <Stack spacing={"sm"}>
+      <Box>
+        <Center px={"md"} mb={"lg"}>
+          <Title order={3}>{data?.title ? data.title : "Judul Proyek"}</Title>
+        </Center>
+
+        <Stack>
+          {listData.map((e, i) => (
+            <Component_V3_GridDetailData item={e} key={i} />
+          ))}
+        </Stack>
+
+        {/* <Stack spacing={"sm"}>
             <Grid>
               <Grid.Col span={2}>
-                <Text fw={"bold"} >
-                  Industri
-                </Text>
+                <Text fw={"bold"}>Industri</Text>
               </Grid.Col>
               <Grid.Col span={1}>
-                <Text >:</Text>
+                <Text>:</Text>
               </Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text >
+                <Text>
                   {data?.ProjectCollaborationMaster_Industri.name
                     ? data.ProjectCollaborationMaster_Industri.name
                     : "Industri"}
@@ -37,35 +66,32 @@ export default function ComponentColab_DetailData({
 
             <Grid>
               <Grid.Col span={2}>
-                <Text fw={"bold"} >
-                  Lokasi
-                </Text>
+                <Text fw={"bold"}>Lokasi</Text>
               </Grid.Col>
               <Grid.Col span={1}>
-                <Text >:</Text>
+                <Text>:</Text>
               </Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text  lineClamp={1}>
+                <Text lineClamp={1}>
                   {data?.lokasi ? data.lokasi : " Lokasi dari proyek"}
                 </Text>
               </Grid.Col>
             </Grid>
 
             <Stack spacing={5}>
-              <Text fw={"bold"} >
-                Tujuan proyek
-              </Text>
-              <Text >{data?.purpose ? data?.purpose : "-"}</Text>
+              <Text fw={"bold"}>Tujuan proyek</Text>
+              <Comp_V3_SetInnerHTML
+                props={data?.purpose}
+              />
             </Stack>
             <Stack spacing={5}>
-              <Text fw={"bold"} >
-                Keuntungan
-              </Text>
-              <Text >{data?.benefit ? data?.benefit : "-"}</Text>
+              <Text fw={"bold"}>Keuntungan</Text>
+              <Comp_V3_SetInnerHTML
+                props={data?.benefit}
+              />
             </Stack>
-          </Stack>
-        </Box>
-      </Stack>
+          </Stack> */}
+      </Box>
     </>
   );
 }
diff --git a/src/app_modules/colab/create/index.tsx b/src/app_modules/colab/create/index.tsx
index 6d71cfe4..b43f9e11 100644
--- a/src/app_modules/colab/create/index.tsx
+++ b/src/app_modules/colab/create/index.tsx
@@ -2,12 +2,16 @@
 
 import { MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
+import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
+import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { clientLogger } from "@/util/clientLogger";
 import mqtt_client from "@/util/mqtt_client";
-import { Button, Select, Stack, TextInput, Textarea } from "@mantine/core";
+import { Button, Select, Stack, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -16,14 +20,21 @@ import { apiGetMasterCollaboration } from "../component/lib/api_collaboration";
 import colab_funCreateProyek from "../fun/create/fun_create_proyek";
 import { MODEL_COLLABORATION_MASTER } from "../model/interface";
 
+interface IValue {
+  title: string;
+  lokasi: string;
+  purpose: string;
+  benefit: string;
+  projectCollaborationMaster_IndustriId: number;
+}
+
 export default function Colab_Create() {
-  const [value, setValue] = useState({
+  const [value, setValue] = useState<IValue>({
     title: "",
     lokasi: "",
     purpose: "",
     benefit: "",
     projectCollaborationMaster_IndustriId: 0,
-    // jumlah_partisipan: 0,
   });
 
   const [listIndustri, setListIndustri] = useState<
@@ -55,7 +66,7 @@ export default function Colab_Create() {
 
   return (
     <>
-      <Stack px={"xl"} pb={"md"}>
+      <Stack px={"xs"} pb={"md"}>
         <TextInput
           maxLength={100}
           styles={{
@@ -115,6 +126,44 @@ export default function Colab_Create() {
         />
 
         <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Tujuan Proyek" />
+
+          <Component_V3_TextEditor
+            data={value.purpose}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                purpose: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.purpose }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Keuntungan" />
+
+          <Component_V3_TextEditor
+            data={value.benefit}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                benefit: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.benefit }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        {/* <Stack spacing={5}>
           <Textarea
             styles={{
               label: { color: MainColor.white },
@@ -137,9 +186,9 @@ export default function Colab_Create() {
             lengthInput={value.purpose.length}
             maxInput={500}
           />
-        </Stack>
+        </Stack> */}
 
-        <Stack spacing={5}>
+        {/* <Stack spacing={5}>
           <Textarea
             styles={{
               label: { color: MainColor.white },
@@ -160,7 +209,7 @@ export default function Colab_Create() {
             lengthInput={value.benefit.length}
             maxInput={500}
           />
-        </Stack>
+        </Stack> */}
 
         <ButtonAction value={value as any} />
       </Stack>
@@ -168,7 +217,7 @@ export default function Colab_Create() {
   );
 }
 
-function ButtonAction({ value }: { value: any }) {
+function ButtonAction({ value }: { value: IValue }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
@@ -190,7 +239,7 @@ function ButtonAction({ value }: { value: any }) {
     try {
       setLoading(true);
 
-      const res = await colab_funCreateProyek(value);
+      const res = await colab_funCreateProyek(value as any);
       if (res.status === 201) {
         router.back();
         ComponentGlobal_NotifikasiBerhasil(res.message);
@@ -210,11 +259,13 @@ function ButtonAction({ value }: { value: any }) {
         disabled={
           !value.title ||
           !value.lokasi ||
-          !value.purpose ||
-          !value.benefit ||
-          value.projectCollaborationMaster_IndustriId === 0
-            ? true
-            : false
+          value.projectCollaborationMaster_IndustriId === 0 ||
+          // value.purpose
+          // value.benefit
+          funReplaceHtml({ html: value.purpose }).length > maxInputLength ||
+          funReplaceHtml({ html: value.purpose }).length === 0 ||
+          funReplaceHtml({ html: value.benefit }).length > maxInputLength ||
+          funReplaceHtml({ html: value.benefit }).length === 0
         }
         loaderPosition="center"
         loading={loading ? true : false}
diff --git a/src/app_modules/colab/edit/index.tsx b/src/app_modules/colab/edit/index.tsx
index 25666409..4d1d13e2 100644
--- a/src/app_modules/colab/edit/index.tsx
+++ b/src/app_modules/colab/edit/index.tsx
@@ -14,6 +14,10 @@ import {
   MODEL_COLLABORATION_MASTER,
 } from "../model/interface";
 import { clientLogger } from "@/util/clientLogger";
+import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
+import { Component_V3_TextEditor } from "@/app_modules/_global/component/new/comp_V3_text_editor";
+import { funReplaceHtml } from "@/app_modules/_global/fun/fun_replace_html";
+import { maxInputLength } from "@/app_modules/_global/lib/maximal_setting";
 
 export default function Colab_Edit({
   selectedData,
@@ -25,8 +29,7 @@ export default function Colab_Edit({
   const [value, setValue] = useState(selectedData);
   return (
     <>
-      <Stack px={"xl"} py={"md"}>
-        {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
+      <Stack px={"xs"} py={"md"}>
         <TextInput
           maxLength={100}
           styles={{
@@ -38,7 +41,7 @@ export default function Colab_Edit({
             },
             required: {
               color: MainColor.red,
-            }
+            },
           }}
           label="Judul"
           withAsterisk
@@ -63,7 +66,7 @@ export default function Colab_Edit({
             },
             required: {
               color: MainColor.red,
-            }
+            },
           }}
           label="Lokasi"
           withAsterisk
@@ -90,7 +93,7 @@ export default function Colab_Edit({
             },
             dropdown: {
               backgroundColor: MainColor.white,
-            }
+            },
           }}
           placeholder="Pilih kategori industri"
           label="Pilih Industri"
@@ -112,26 +115,45 @@ export default function Colab_Edit({
           }
         />
 
-        {/* <TextInput
-          description={
-            <Text fz={10}>
-              minimal partisipan yang akan di pilih untuk mendiskusikan proyek
-            </Text>
-          }
-          type="number"
-          withAsterisk
-          label="Jumlah Partisipan"
-          placeholder={"2"}
-          value={value.jumlah_partisipan ? value.jumlah_partisipan : ""}
-          onChange={(val) => {
-            setValue({
-              ...value,
-              jumlah_partisipan: + val.currentTarget.value
-            });
-          }}
-        /> */}
+        <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Tujuan Proyek" />
+
+          <Component_V3_TextEditor
+            data={value.purpose}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                purpose: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.purpose }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
 
         <Stack spacing={5}>
+          <Component_V3_Label_TextInput text="Keuntungan" />
+
+          <Component_V3_TextEditor
+            data={value.benefit}
+            onSetData={(val) => {
+              setValue({
+                ...value,
+                benefit: val,
+              });
+            }}
+          />
+
+          <ComponentGlobal_InputCountDown
+            lengthInput={funReplaceHtml({ html: value.benefit }).length}
+            maxInput={maxInputLength}
+          />
+        </Stack>
+
+        {/* <Stack spacing={5}>
           <Textarea
             styles={{
               label: {
@@ -160,9 +182,9 @@ export default function Colab_Edit({
             lengthInput={value.purpose.length}
             maxInput={500}
           />
-        </Stack>
+        </Stack> */}
 
-        <Stack spacing={5}>
+        {/* <Stack spacing={5}>
           <Textarea
             styles={{
               label: {
@@ -187,7 +209,7 @@ export default function Colab_Edit({
             lengthInput={value.benefit.length}
             maxInput={500}
           />
-        </Stack>
+        </Stack> */}
 
         <ButtonAction value={value as any} />
       </Stack>
@@ -211,18 +233,18 @@ function ButtonAction({ value }: { value: any }) {
     // if (value.jumlah_partisipan < 2)
     //   return ComponentGlobal_NotifikasiPeringatan("Minimal Ada 2 Partisipan");
 
+    setLoading(true);
     await colab_funEditById(value as any).then((res) => {
       try {
-        setLoading(true);
         if (res.status === 200) {
           router.back();
           ComponentGlobal_NotifikasiBerhasil(res.message);
         } else {
-        setLoading(false)
+          setLoading(false);
           ComponentGlobal_NotifikasiGagal(res.message);
         }
       } catch (error) {
-        setLoading(false)
+        setLoading(false);
         clientLogger.error("Error update proyek", error);
       }
     });
@@ -234,11 +256,11 @@ function ButtonAction({ value }: { value: any }) {
         disabled={
           !value.title ||
           !value.lokasi ||
-          !value.purpose ||
-          !value.benefit ||
-          value.projectCollaborationMaster_IndustriId === 0
-            ? true
-            : false
+          value.projectCollaborationMaster_IndustriId === 0 ||
+          funReplaceHtml({ html: value.purpose }).length > maxInputLength ||
+          funReplaceHtml({ html: value.purpose }).length === 0 ||
+          funReplaceHtml({ html: value.benefit }).length > maxInputLength ||
+          funReplaceHtml({ html: value.benefit }).length === 0
         }
         loaderPosition="center"
         loading={loading ? true : false}
diff --git a/src/app_modules/colab/fun/edit/fun_edit_by_id.ts b/src/app_modules/colab/fun/edit/fun_edit_by_id.ts
index 6a3b4e2e..ce9cf81f 100644
--- a/src/app_modules/colab/fun/edit/fun_edit_by_id.ts
+++ b/src/app_modules/colab/fun/edit/fun_edit_by_id.ts
@@ -6,7 +6,6 @@ import { revalidatePath } from "next/cache";
 import { RouterColab } from "@/lib/router_hipmi/router_colab";
 
 export default async function colab_funEditById(value: MODEL_COLLABORATION) {
-  console.log(value);
   const updt = await prisma.projectCollaboration.update({
     where: {
       id: value.id,