diff --git a/app/(application)/(user)/_layout.tsx b/app/(application)/(user)/_layout.tsx
index 7a633a4..c8ad9c0 100644
--- a/app/(application)/(user)/_layout.tsx
+++ b/app/(application)/(user)/_layout.tsx
@@ -404,7 +404,21 @@ export default function UserLayout() {
             headerLeft: () => <BackButton />,
           }}
         />
-
+        <Stack.Screen
+          name="donation/[id]/list-of-donatur"
+          options={{
+            title: "Daftar Donatur",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        <Stack.Screen
+          name="donation/[id]/fund-disbursement"
+          options={{
+            title: "Pencairan Dana",
+            headerLeft: () => <BackButton />,
+          }}
+        />
+        
         <Stack.Screen
           name="donation/[id]/(news)/recap-of-news"
           options={{
diff --git a/app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx b/app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx
new file mode 100644
index 0000000..1035efa
--- /dev/null
+++ b/app/(application)/(user)/donation/[id]/(news)/list-of-news.tsx
@@ -0,0 +1,67 @@
+import {
+    BackButton,
+    BaseBox,
+    DrawerCustom,
+    Grid,
+    MenuDrawerDynamicGrid,
+    TextCustom,
+    ViewWrapper
+} from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import dayjs from "dayjs";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+
+export default function DonationRecapOfNews() {
+  const { id } = useLocalSearchParams();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: "Daftar Kabar",
+          headerLeft: () => <BackButton />, }}
+      />
+      <ViewWrapper>
+        {Array.from({ length: 15 }).map((_, index) => (
+          <BaseBox key={index} href={`/donation/${id}/(news)/${index}`}>
+            <Grid>
+              <Grid.Col span={8}>
+                <TextCustom truncate bold>
+                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
+                </TextCustom>
+              </Grid.Col>
+              <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                <TextCustom size="small">
+                  {dayjs().format("DD MMM YYYY")}
+                </TextCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+
+      <DrawerCustom
+        isVisible={openDrawer}
+        closeDrawer={() => setOpenDrawer(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconPlus />,
+              label: "Tambah Berita",
+              path: `/donation/${id}/(news)/add-news`,
+            },
+          ]}
+          onPressItem={(item) => {
+            console.log("PATH ", item.path);
+            router.navigate(item.path as any);
+            setOpenDrawer(false);
+          }}
+        />
+      </DrawerCustom>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/donation/[id]/fund-disbursement.tsx b/app/(application)/(user)/donation/[id]/fund-disbursement.tsx
new file mode 100644
index 0000000..6f28714
--- /dev/null
+++ b/app/(application)/(user)/donation/[id]/fund-disbursement.tsx
@@ -0,0 +1,67 @@
+import {
+  BaseBox,
+  ButtonCenteredOnly,
+  Grid,
+  InformationBox,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import dayjs from "dayjs";
+import { router, useLocalSearchParams } from "expo-router";
+
+export default function DonationFundDisbursement() {
+  const { id } = useLocalSearchParams();
+  return (
+    <>
+      <ViewWrapper>
+        <InformationBox text="Pencairan dana akan dilakukan oleh Admin HIPMI tanpa campur tangan pihak manapun, jika berita pencairan dana dibawah tidak sesuai dengan kabar yang diberikan oleh PENGGALANG DANA. Maka pegguna lain dapat melaporkannya pada Admin HIPMI !" />
+        <BaseBox>
+          <Grid>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                Rp. 0
+              </TextCustom>
+              <TextCustom size="small">Total Pencairan Dana</TextCustom>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextCustom bold color="yellow">
+                0 kali
+              </TextCustom>
+              <TextCustom size="small">Akumulasi Pencairan</TextCustom>
+            </Grid.Col>
+          </Grid>
+        </BaseBox>
+
+        {Array.from({ length: 10 }).map((_, index) => (
+          <BaseBox key={index}>
+            <StackCustom>
+              <Grid>
+                <Grid.Col span={8}>
+                  <TextCustom bold>Pencairan ke - {index + 1}</TextCustom>
+                </Grid.Col>
+                <Grid.Col span={4} style={{ alignItems: "flex-end" }}>
+                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                </Grid.Col>
+              </Grid>
+              <TextCustom>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                Nesciunt dolor ad sit? Eaque rem nihil natus, id, esse possimus
+                perferendis provident velit illo consectetur distinctio ab
+                accusantium quis earum omnis!
+              </TextCustom>
+              <ButtonCenteredOnly
+                onPress={() => {
+                  router.navigate(`/(application)/(file)/${id}`);
+                }}
+                icon="file-text"
+              >
+                Bukti Transaksi
+              </ButtonCenteredOnly>
+            </StackCustom>
+          </BaseBox>
+        ))}
+      </ViewWrapper>
+    </>
+  );
+}
diff --git a/app/(application)/(user)/donation/[id]/index.tsx b/app/(application)/(user)/donation/[id]/index.tsx
index c158476..be91868 100644
--- a/app/(application)/(user)/donation/[id]/index.tsx
+++ b/app/(application)/(user)/donation/[id]/index.tsx
@@ -40,7 +40,7 @@ export default function DonasiDetailBeranda() {
       <ViewWrapper footerComponent={buttonSection}>
         <StackCustom>
           <Donation_ComponentBoxDetailData
-            bottomSection={<Donation_ProgressSection />}
+            bottomSection={<Donation_ProgressSection id={id as string} />}
           />
           <Donation_ComponentInfoFundrising id={id as string} />
           <Donation_ComponentStoryFunrising id={id as string} />
diff --git a/app/(application)/(user)/donation/[id]/list-of-donatur.tsx b/app/(application)/(user)/donation/[id]/list-of-donatur.tsx
index 22309fc..d9f65af 100644
--- a/app/(application)/(user)/donation/[id]/list-of-donatur.tsx
+++ b/app/(application)/(user)/donation/[id]/list-of-donatur.tsx
@@ -1,10 +1,46 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  BaseBox,
+  Grid,
+  StackCustom,
+  TextCustom,
+  ViewWrapper,
+} from "@/components";
+import { MainColor } from "@/constants/color-palet";
+import { FontAwesome6 } from "@expo/vector-icons";
+import dayjs from "dayjs";
 
 export default function Donation_ListOfDonatur() {
   return (
     <>
       <ViewWrapper>
-        <TextCustom>Daftar Donatur</TextCustom>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <BaseBox key={index}>
+            <Grid>
+              <Grid.Col
+                span={3}
+                style={{ alignItems: "center", justifyContent: "center" }}
+              >
+                <FontAwesome6
+                  name="face-smile-wink"
+                  size={50}
+                  style={{ color: MainColor.yellow }}
+                />
+              </Grid.Col>
+              <Grid.Col span={9}>
+                <StackCustom gap={"xs"}>
+                  <TextCustom bold size="large">
+                    Username
+                  </TextCustom>
+                  <TextCustom>Berdonas sebesar </TextCustom>
+                  <TextCustom bold size="large" color="yellow">
+                    Rp. 100.000
+                  </TextCustom>
+                  <TextCustom>{dayjs().format("DD MMM YYYY")}</TextCustom>
+                </StackCustom>
+              </Grid.Col>
+            </Grid>
+          </BaseBox>
+        ))}
       </ViewWrapper>
     </>
   );
diff --git a/components/Button/ButtonCenteredOnly.tsx b/components/Button/ButtonCenteredOnly.tsx
index 8ec937a..0b7b09c 100644
--- a/components/Button/ButtonCenteredOnly.tsx
+++ b/components/Button/ButtonCenteredOnly.tsx
@@ -7,7 +7,7 @@ import ButtonCustom from "./ButtonCustom";
 
 interface ButtonCenteredOnlyProps {
   children?: React.ReactNode;
-  icon?: "plus" | "upload";
+  icon?: "plus" | "upload" | string;
   onPress: () => void;
 }
 export default function ButtonCenteredOnly({
@@ -19,7 +19,7 @@ export default function ButtonCenteredOnly({
     <ButtonCustom
       onPress={onPress}
       iconLeft={
-        <Feather name={icon} size={ICON_SIZE_BUTTON} color={MainColor.black} />
+        <Feather name={icon as any} size={ICON_SIZE_BUTTON} color={MainColor.black} />
       }
       style={[GStyles.buttonCentered50Percent]}
     >
diff --git a/screens/Donation/ProgressSection.tsx b/screens/Donation/ProgressSection.tsx
index 93e12a1..b0fcf5b 100644
--- a/screens/Donation/ProgressSection.tsx
+++ b/screens/Donation/ProgressSection.tsx
@@ -1,17 +1,27 @@
-import { ProgressCustom, Spacing, Grid, TextCustom } from "@/components";
+import {
+  ClickableCustom,
+  Grid,
+  ProgressCustom,
+  Spacing,
+  TextCustom,
+} from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_MEDIUM } from "@/constants/constans-value";
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
+import { router } from "expo-router";
 import { View } from "react-native";
 
-export default function Donation_ProgressSection() {
-    return (
-      <>
-        <View>
-          <ProgressCustom size="lg" />
-          <Spacing />
-          <Grid>
-            <Grid.Col span={4}>
+export default function Donation_ProgressSection({ id }: { id: string }) {
+  return (
+    <>
+      <View>
+        <ProgressCustom size="lg" />
+        <Spacing />
+        <Grid>
+          <Grid.Col span={4}>
+            <ClickableCustom
+              onPress={() => router.push(`/donation/${id}/list-of-donatur`)}
+            >
               <View style={{ alignItems: "center" }}>
                 <Ionicons
                   name="flower-sharp"
@@ -21,15 +31,11 @@ export default function Donation_ProgressSection() {
                 <Spacing height={10} />
                 <TextCustom size="small">Donatur</TextCustom>
               </View>
-            </Grid.Col>
-            <Grid.Col
-              span={4}
-              style={{
-                borderLeftWidth: 1,
-                borderLeftColor: MainColor.white,
-                borderRightWidth: 1,
-                borderRightColor: MainColor.white,
-              }}
+            </ClickableCustom>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <ClickableCustom
+              onPress={() => router.push(`/donation/${id}/(news)/list-of-news`)}
             >
               <View style={{ alignItems: "center" }}>
                 <Ionicons
@@ -40,8 +46,12 @@ export default function Donation_ProgressSection() {
                 <Spacing height={10} />
                 <TextCustom size="small">Kabar Terbaru</TextCustom>
               </View>
-            </Grid.Col>
-            <Grid.Col span={4}>
+            </ClickableCustom>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <ClickableCustom
+              onPress={() => router.push(`/donation/${id}/fund-disbursement`)}
+            >
               <View style={{ alignItems: "center" }}>
                 <MaterialIcons
                   name="transfer-within-a-station"
@@ -51,9 +61,10 @@ export default function Donation_ProgressSection() {
                 <Spacing height={10} />
                 <TextCustom size="small">Pencairan Dana</TextCustom>
               </View>
-            </Grid.Col>
-          </Grid>
-        </View>
-      </>
-    );
-}
\ No newline at end of file
+            </ClickableCustom>
+          </Grid.Col>
+        </Grid>
+      </View>
+    </>
+  );
+}