diff --git a/app/(application)/(user)/collaboration/[id]/list-of-participants.tsx b/app/(application)/(user)/collaboration/[id]/list-of-participants.tsx
index 15263d2..91e064d 100644
--- a/app/(application)/(user)/collaboration/[id]/list-of-participants.tsx
+++ b/app/(application)/(user)/collaboration/[id]/list-of-participants.tsx
@@ -42,36 +42,38 @@ export default function CollaborationListOfParticipants() {
       >
         <StackCustom>
           <TextCustom bold>Deskripsi diri</TextCustom>
-          <ScrollView style={{ height: "80%" }}>
-            <TextCustom>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
-              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-              tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum
-              dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-              incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit
-              amet, consectetur adipiscing elit, sed do eiusmod tempor
-              incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit
-              amet, consectetur adipiscing elit, sed do eiusmod tempor
-              incididunt ut iqua.Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-              dolore magna aliqua.
-            </TextCustom>
-          </ScrollView>
+          <BaseBox>
+            <ScrollView style={{ height: "80%" }}>
+              <TextCustom>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
+                ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
+                ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
+                ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut iqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.Lorem ipsum dolor sit amet,
+                consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+                labore et dolore magna aliqua.
+              </TextCustom>
+            </ScrollView>
+          </BaseBox>
           <Spacing />
         </StackCustom>
       </DrawerCustom>
diff --git a/components/Divider/Divider.tsx b/components/Divider/Divider.tsx
new file mode 100644
index 0000000..810ab6e
--- /dev/null
+++ b/components/Divider/Divider.tsx
@@ -0,0 +1,25 @@
+import { AccentColor } from "@/constants/color-palet";
+import { View } from "react-native";
+
+export default function Divider({
+    color = AccentColor.blue,
+    size = 1,
+    marginTop= 12,
+    marginBottom= 12, 
+}: {
+    color?: string;
+    size?: number;
+    marginTop?: number;
+    marginBottom?: number;
+}) {
+  return (
+    <View
+      style={{
+        borderTopColor: color,
+        borderTopWidth: size,
+        marginTop,
+        marginBottom,
+      }}
+    />
+  );
+}
diff --git a/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx b/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx
index 9a3f317..9a3ed9e 100644
--- a/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx
+++ b/components/_ShareComponent/AvataraAndOtherHeaderComponent.tsx
@@ -2,17 +2,20 @@ import { ImageSourcePropType, View } from "react-native";
 import Grid from "../Grid/GridCustom";
 import AvatarCustom from "../Image/AvatarCustom";
 import TextCustom from "../Text/TextCustom";
+import Divider from "../Divider/Divider"
 
 const AvatarUsernameAndOtherComponent = ({
   avatarHref,
   avatar,
   name,
   rightComponent,
+  withBottomLine = false,
 }: {
   avatarHref?: string;
   avatar?: ImageSourcePropType;
   name?: string;
   rightComponent?: React.ReactNode;
+  withBottomLine?: boolean;
 }) => {
   return (
     <>
@@ -38,6 +41,7 @@ const AvatarUsernameAndOtherComponent = ({
             </Grid.Col>
           )}
         </Grid>
+        {withBottomLine && <Divider marginTop={0} />}
       </View>
     </>
   );
diff --git a/components/index.ts b/components/index.ts
index 25d9b1e..ea78045 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -31,6 +31,7 @@ import SelectCustom from "./Select/SelectCustom";
 import AvatarCustom from "./Image/AvatarCustom";
 import LandscapeFrameUploaded from "./Image/LandscapeFrameUploaded";
 // Divider
+import Divider from "./Divider/Divider";
 import DividerCustom from "./Divider/DividerCustom";
 // Map
 import MapCustom from "./Map/MapCustom";
@@ -60,12 +61,14 @@ export {
   BoxButtonOnFooter,
   BoxWithHeaderSection, ButtonCenteredOnly,
   ButtonCustom,
+  DotButton,
   // Center
   CenterCustom,
   // Clickable
   ClickableCustom,
   // Divider
-  DividerCustom, DotButton,
+  Divider,
+  DividerCustom, 
   // Drawer
   DrawerCustom, FloatingButton,
   // Grid
diff --git a/screens/Collaboration/BoxPublishSection.tsx b/screens/Collaboration/BoxPublishSection.tsx
index 4732d28..7694b18 100644
--- a/screens/Collaboration/BoxPublishSection.tsx
+++ b/screens/Collaboration/BoxPublishSection.tsx
@@ -1,11 +1,9 @@
 import {
+  AvatarUsernameAndOtherComponent,
   BoxWithHeaderSection,
   StackCustom,
-  AvatarUsernameAndOtherComponent,
-  TextCustom,
-  BaseBox,
+  TextCustom
 } from "@/components";
-import { MainColor } from "@/constants/color-palet";
 import { Href } from "expo-router";
 
 function Collaboration_BoxPublishSection({
@@ -38,22 +36,21 @@ function Collaboration_BoxPublishSection({
             name={username || "Username"}
             rightComponent={rightComponentAvatar}
             avatar={sourceAvatar as any}
+            withBottomLine
           />
-          <BaseBox backgroundColor={MainColor.soft_darkblue}>
-            <StackCustom>
-              <TextCustom truncate={2} size="large" bold align="center">
-                {title || "Lorem ipsum dolor sit"}
-              </TextCustom>
-              <TextCustom truncate={2}>
-                {description ||
-                  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, obcaecati quia suscipit numquam, voluptates commodi porro impedit natus quos doloremque!"}
-              </TextCustom>
-            </StackCustom>
-          </BaseBox>
 
-          <TextCustom bold size="small" align="center">
+          <StackCustom>
+            <TextCustom truncate={2} size="large" bold align="center">
+              {title || "Lorem ipsum dolor sit"}
+            </TextCustom>
+            <TextCustom truncate={2}>
+              {description ||
+                "Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro sed doloremque tempora soluta. Dolorem ex quidem ipsum tempora, ipsa, obcaecati quia suscipit numquam, voluptates commodi porro impedit natus quos doloremque!"}
+            </TextCustom>
+            {/* <TextCustom bold size="small" >
             2 Partisipan
-          </TextCustom>
+          </TextCustom> */}
+          </StackCustom>
         </StackCustom>
       </BoxWithHeaderSection>
     </>