diff --git a/app/(application)/(user)/donation/(tabs)/index.tsx b/app/(application)/(user)/donation/(tabs)/index.tsx
index dc91c4f..0e7f85e 100644
--- a/app/(application)/(user)/donation/(tabs)/index.tsx
+++ b/app/(application)/(user)/donation/(tabs)/index.tsx
@@ -1,11 +1,39 @@
 import {
   FloatingButton,
-  ViewWrapper
+  LoaderCustom,
+  TextCustom,
+  ViewWrapper,
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
-import { router } from "expo-router";
+import { apiDonationGetAll } from "@/service/api-client/api-donation";
+import { router, useFocusEffect } from "expo-router";
+import _ from "lodash";
+import { useCallback, useState } from "react";
 
 export default function DonationBeranda() {
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationGetAll();
+      console.log("[RES GET ALL]", JSON.stringify(response.data, null, 2));
+
+      setList(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <ViewWrapper
       hideFooter
@@ -13,9 +41,15 @@ export default function DonationBeranda() {
         <FloatingButton onPress={() => router.push("/donation/create")} />
       }
     >
-      {Array.from({ length: 10 }).map((_, index) => (
-        <Donation_BoxPublish key={index} id={index.toString()}/>
-      ))}
+      {loadList ? (
+        <LoaderCustom />
+      ) : _.isEmpty(list) ? (
+        <TextCustom>Belum ada data</TextCustom>
+      ) : (
+        list?.map((item: any, index: number) => (
+          <Donation_BoxPublish data={item} key={index} id={item.id} />
+        ))
+      )}
     </ViewWrapper>
   );
 }
diff --git a/app/(application)/(user)/donation/[id]/edit-rekening.tsx b/app/(application)/(user)/donation/[id]/edit-rekening.tsx
index 915a7b9..7e71a1e 100644
--- a/app/(application)/(user)/donation/[id]/edit-rekening.tsx
+++ b/app/(application)/(user)/donation/[id]/edit-rekening.tsx
@@ -1,7 +1,80 @@
-import { ViewWrapper, StackCustom, InformationBox, TextInputCustom, Spacing, ButtonCustom } from "@/components";
-import { router } from "expo-router";
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  ViewWrapper,
+  StackCustom,
+  InformationBox,
+  TextInputCustom,
+  Spacing,
+  ButtonCustom,
+} from "@/components";
+import {
+  apiDonationGetOne,
+  apiDonationUpdateData,
+} from "@/service/api-client/api-donation";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationEditRekening() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState({
+    namaBank: "",
+    rekening: "",
+  });
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      const resData = response.data;
+      console.log("[RESPONSE]", JSON.stringify(resData, null, 2));
+
+      setData({
+        namaBank: resData.namaBank,
+        rekening: resData.rekening,
+      });
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    try {
+      setLoading(true);
+
+      const response = await apiDonationUpdateData({
+        id: id as string,
+        data: data,
+        category: "edit-bank-account",
+      });
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal mengupdate data bank",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Data bank berhasil diupdate",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -10,17 +83,22 @@ export default function DonationEditRekening() {
           label="Nama Bank"
           placeholder="Masukkan nama bank"
           required
+          value={data.namaBank}
+          onChangeText={(value) => setData({ ...data, namaBank: value })}
         />
         <TextInputCustom
           label="Nomor Rekening"
           placeholder="Masukkan nomor rekening"
           required
+          value={data.rekening}
+          onChangeText={(value) => setData({ ...data, rekening: value })}
         />
 
         <Spacing />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmitUpdate();
           }}
         >
           Update
@@ -29,4 +107,4 @@ export default function DonationEditRekening() {
       <Spacing />
     </ViewWrapper>
   );
-}
\ No newline at end of file
+}
diff --git a/app/(application)/(user)/donation/[id]/edit-story.tsx b/app/(application)/(user)/donation/[id]/edit-story.tsx
index d21bfad..b0aef59 100644
--- a/app/(application)/(user)/donation/[id]/edit-story.tsx
+++ b/app/(application)/(user)/donation/[id]/edit-story.tsx
@@ -1,16 +1,97 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
-    ButtonCenteredOnly,
-    ButtonCustom,
-    InformationBox,
-    LandscapeFrameUploaded,
-    Spacing,
-    StackCustom,
-    TextAreaCustom,
-    ViewWrapper
+  ButtonCenteredOnly,
+  ButtonCustom,
+  InformationBox,
+  LandscapeFrameUploaded,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  ViewWrapper,
 } from "@/components";
-import { router } from "expo-router";
+import API_IMAGE from "@/constants/api-storage";
+import DIRECTORY_ID from "@/constants/directory-id";
+import {
+  apiDonationGetOne,
+  apiDonationUpdateData,
+} from "@/service/api-client/api-donation";
+import { uploadFileService } from "@/service/upload-service";
+import pickFile from "@/utils/pickFile";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function DonationEditStory() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+  const [imageStory, setImageStory] = useState<string | null>(null);
+  const [isLoading, setLoading] = useState(false);
+
+  useEffect(() => {
+    onLoadData();
+  }, [id]);
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      setData(response.data.CeritaDonasi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  const handlerSubmitUpdate = async () => {
+    let newData;
+    try {
+      setLoading(true);
+
+      newData = {
+        ...data,
+      };
+
+      if (imageStory) {
+        const responseUploadImageDonasi = await uploadFileService({
+          imageUri: imageStory,
+          dirId: DIRECTORY_ID.donasi_cerita_image,
+        });
+
+        newData = {
+          ...data,
+          newImageId: responseUploadImageDonasi.data.id,
+        };
+      }
+
+      const response = await apiDonationUpdateData({
+        id: id as string,
+        data: newData,
+        category: "edit-story",
+      });
+
+      console.log("[RESPONSE]", JSON.stringify(response, null, 2));
+
+      if (!response.success) {
+        Toast.show({
+          type: "error",
+          text1: "Gagal membuat donasi",
+        });
+      }
+
+      Toast.show({
+        type: "success",
+        text1: "Donasi berhasil disimpan",
+      });
+      router.back();
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <ViewWrapper>
       <StackCustom gap={"xs"}>
@@ -21,12 +102,23 @@ export default function DonationEditStory() {
           required
           showCount
           maxLength={1000}
+          value={data?.pembukaan}
+          onChangeText={(value) => setData({ ...data, pembukaan: value })}
         />
 
-        <LandscapeFrameUploaded />
+        <LandscapeFrameUploaded
+          image={
+            imageStory ? imageStory : API_IMAGE.GET({ fileId: data?.imageId })
+          }
+        />
         <ButtonCenteredOnly
           onPress={() => {
-            router.push("/(application)/(image)/take-picture/123");
+            pickFile({
+              allowedType: "image",
+              setImageUri: ({ uri }) => {
+                setImageStory(uri);
+              },
+            });
           }}
           icon="upload"
         >
@@ -39,12 +131,15 @@ export default function DonationEditStory() {
           required
           showCount
           maxLength={1000}
+          value={data?.cerita}
+          onChangeText={(value) => setData({ ...data, cerita: value })}
         />
 
         <Spacing height={40} />
         <ButtonCustom
+          isLoading={isLoading}
           onPress={() => {
-            router.back();
+            handlerSubmitUpdate();
           }}
         >
           Update
diff --git a/app/(application)/(user)/donation/[id]/index.tsx b/app/(application)/(user)/donation/[id]/index.tsx
index 5cea0cd..8f2e5c9 100644
--- a/app/(application)/(user)/donation/[id]/index.tsx
+++ b/app/(application)/(user)/donation/[id]/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
   BackButton,
   BoxButtonOnFooter,
@@ -9,24 +10,54 @@ import {
   ViewWrapper,
 } from "@/components";
 import { IconNews } from "@/components/_Icon";
+import { useAuth } from "@/hooks/use-auth";
 import Donation_ComponentBoxDetailData from "@/screens/Donation/ComponentBoxDetailData";
 import Donation_ComponentInfoFundrising from "@/screens/Donation/ComponentInfoFundrising";
 import Donation_ComponentStoryFunrising from "@/screens/Donation/ComponentStoryFunrising";
 import Donation_ProgressSection from "@/screens/Donation/ProgressSection";
-import { router, Stack, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { apiDonationGetOne } from "@/service/api-client/api-donation";
+import {
+  router,
+  Stack,
+  useFocusEffect,
+  useLocalSearchParams,
+} from "expo-router";
+import { useCallback, useState } from "react";
 
 export default function DonasiDetailBeranda() {
+  const { user } = useAuth();
   const { id } = useLocalSearchParams();
+  console.log("ID ", id);
   const [openDrawer, setOpenDrawer] = useState(false);
 
+  const [data, setData] = useState<any>();
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      const response = await apiDonationGetOne({
+        id: id as string,
+        category: "permanent",
+      });
+
+      console.log("[RES GET ONE]", JSON.stringify(response.data, null, 2));
+
+      setData(response.data);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
   const buttonSection = (
     <>
       <BoxButtonOnFooter>
         <ButtonCustom
-          onPress={() =>
-            router.navigate(`/donation/${id}/(transaction-flow)`)
-          }
+          onPress={() => router.navigate(`/donation/${id}/(transaction-flow)`)}
         >
           Donasi
         </ButtonCustom>
@@ -40,16 +71,23 @@ export default function DonasiDetailBeranda() {
         options={{
           title: `Detail Donasi`,
           headerLeft: () => <BackButton />,
-          headerRight: () => <DotButton onPress={() => setOpenDrawer(true)} />,
+          headerRight: () =>
+            user?.id === data?.Author?.id ? (
+              <DotButton onPress={() => setOpenDrawer(true)} />
+            ) : null,
         }}
       />
       <ViewWrapper footerComponent={buttonSection}>
         <StackCustom>
           <Donation_ComponentBoxDetailData
+            data={data}
             bottomSection={<Donation_ProgressSection id={id as string} />}
           />
-          <Donation_ComponentInfoFundrising id={id as string} />
-          <Donation_ComponentStoryFunrising id={id as string} />
+          <Donation_ComponentInfoFundrising dataAuthor={data?.Author} />
+          <Donation_ComponentStoryFunrising
+            id={id as string}
+            dataStory={data?.CeritaDonasi}
+          />
         </StackCustom>
       </ViewWrapper>
 
diff --git a/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx b/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx
index 4bf6d94..0fa3da8 100644
--- a/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx
+++ b/app/(application)/(user)/donation/[id]/infromation-fundrising.tsx
@@ -1,32 +1,74 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import {
+  AvatarComp,
   AvatarCustom,
   BaseBox,
   ButtonCustom,
   CenterCustom,
   Grid,
+  LoaderCustom,
   Spacing,
   TextCustom,
-  ViewWrapper
+  ViewWrapper,
 } from "@/components";
 import Donation_BoxPublish from "@/screens/Donation/BoxPublish";
-import React from "react";
+import { apiDonationFundrising } from "@/service/api-client/api-donation";
+import { useFocusEffect, useLocalSearchParams } from "expo-router";
+import _ from "lodash";
+import React, { useCallback, useState } from "react";
+import { View } from "react-native";
 
 export default function DonationInformationFunrising() {
+  const { id } = useLocalSearchParams();
+  const [data, setData] = useState<any>();
+  const [list, setList] = useState<any[] | null>(null);
+  const [loadList, setLoadList] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      onLoadData();
+    }, [id])
+  );
+
+  const onLoadData = async () => {
+    try {
+      setLoadList(true);
+      const response = await apiDonationFundrising({ id: id as string });
+      console.log(
+        "[RES GET FUNDRISING]",
+        JSON.stringify(response.data, null, 2)
+      );
+
+      setData(response?.data?.user);
+      setList(response?.data?.donasi);
+    } catch (error) {
+      console.log("[ERROR]", error);
+    } finally {
+      setLoadList(false);
+    }
+  };
+
   return (
     <>
       <ViewWrapper>
         <BaseBox>
           <Grid>
             <Grid.Col span={6} style={{ justifyContent: "center" }}>
-              <CenterCustom>
-                <AvatarCustom size="lg" />
+              <View
+                style={{
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 10,
+                }}
+              >
+                <AvatarComp size="lg" fileId={data?.Profile?.imageId} />
                 <TextCustom bold size="large" truncate>
-                  @Username
+                  @{data?.username}
                 </TextCustom>
-              </CenterCustom>
+              </View>
             </Grid.Col>
             <Grid.Col span={6} style={{ justifyContent: "center" }}>
-              <ButtonCustom href={`/profile/1234`}>
+              <ButtonCustom href={`/profile/${data?.Profile?.id}`}>
                 Kunjungi Profile
               </ButtonCustom>
             </Grid.Col>
@@ -35,9 +77,15 @@ export default function DonationInformationFunrising() {
 
         <Spacing />
 
-        {Array.from({ length: 10 }).map((_, index) => (
-          <Donation_BoxPublish key={index} id={index.toString()} />
-        ))}
+        {loadList ? (
+          <LoaderCustom />
+        ) : _.isEmpty(list) ? (
+          <TextCustom>Belum ada data</TextCustom>
+        ) : (
+          list?.map((item: any, index: number) => (
+            <Donation_BoxPublish key={index} id={item?.id} data={item} />
+          ))
+        )}
       </ViewWrapper>
     </>
   );
diff --git a/screens/Donation/BoxPublish.tsx b/screens/Donation/BoxPublish.tsx
index e3da36a..029cfd1 100644
--- a/screens/Donation/BoxPublish.tsx
+++ b/screens/Donation/BoxPublish.tsx
@@ -8,27 +8,42 @@ import {
 } from "@/components";
 import { View } from "react-native";
 
-export default function Donation_BoxPublish({ id }: { id: string }) {
+export default function Donation_BoxPublish({
+  id,
+  data,
+}: {
+  id: string;
+  data: any;
+}) {
   return (
     <>
       <BaseBox paddingTop={7} paddingBottom={7} href={`/donation/${id}`}>
         <Grid>
           <Grid.Col span={5}>
-            <DummyLandscapeImage unClickPath height={100} />
+            <DummyLandscapeImage
+              unClickPath
+              height={100}
+              imageId={data?.imageId}
+            />
           </Grid.Col>
           <Grid.Col span={1}>
             <View />
           </Grid.Col>
           <Grid.Col span={6}>
             <StackCustom>
-              <View>
-                <TextCustom truncate>
-                  Judul Donasi: Lorem ipsum dolor sit amet consectetur
-                  adipisicing elit.
+              <View style={{ gap: 10 }}>
+                <TextCustom truncate={2} bold>
+                  {data?.title || "-"}
+                </TextCustom>
+                <TextCustom size="small">
+                  Sisa hari: {data?.durasiDonasi || 0}
                 </TextCustom>
-                <TextCustom size="small">Sisa hari: 0</TextCustom>
               </View>
-              <ProgressCustom value={(Number(id) % 5) * 20} size="lg" />
+              <ProgressCustom
+                label={data?.progres + "%" || "0%"}
+                value={data?.progres || 0}
+                size="lg"
+              />
               {/* <TextCustom>
                  Terkumpul : Rp 300.000
                 </TextCustom> */}
diff --git a/screens/Donation/ComponentInfoFundrising.tsx b/screens/Donation/ComponentInfoFundrising.tsx
index 20a95bf..5eac0e8 100644
--- a/screens/Donation/ComponentInfoFundrising.tsx
+++ b/screens/Donation/ComponentInfoFundrising.tsx
@@ -11,13 +11,16 @@ import { ICON_SIZE_SMALL } from "@/constants/constans-value";
 import { Ionicons } from "@expo/vector-icons";
 
 export default function Donation_ComponentInfoFundrising({
-  id,
+  dataAuthor,
 }: {
-  id: string;
+  dataAuthor: any;
 }) {
   return (
     <>
-      <BaseBox href={`/donation/${id}/infromation-fundrising`} style={{paddingBottom: 0}}>
+      <BaseBox
+        href={`/donation/${dataAuthor?.id}/infromation-fundrising`}
+        style={{ paddingBottom: 0 }}
+      >
         <StackCustom gap={"xs"}>
           <Grid>
             <Grid.Col span={10}>
@@ -37,10 +40,12 @@ export default function Donation_ComponentInfoFundrising({
             </Grid.Col>
           </Grid>
 
-          <AvatarUsernameAndOtherComponent />
-          <InformationBox
-            text="Semua dana yang terkumpul akan disalurkan ke penggalang dana, kabar penyaluran dapat dilihat di halaman kabar terbaru."
+          <AvatarUsernameAndOtherComponent
+            avatar={dataAuthor?.Profile?.imageId}
+            name={dataAuthor?.username}
+            avatarHref={`/profile/${dataAuthor?.Profile?.id}`}
           />
+          <InformationBox text="Semua dana yang terkumpul akan disalurkan ke penggalang dana, kabar penyaluran dapat dilihat di halaman kabar terbaru." />
         </StackCustom>
       </BaseBox>
     </>
diff --git a/service/api-client/api-donation.ts b/service/api-client/api-donation.ts
index 4047094..c9e98cc 100644
--- a/service/api-client/api-donation.ts
+++ b/service/api-client/api-donation.ts
@@ -91,11 +91,32 @@ export async function apiDonationUpdateData({
   category: "edit-donation" | "edit-story" | "edit-bank-account";
 }) {
   try {
-    const response = await apiConfig.put(`/mobile/donation/${id}?category=${category}`, {
-      data: data,
-    });
+    const response = await apiConfig.put(
+      `/mobile/donation/${id}?category=${category}`,
+      {
+        data: data,
+      }
+    );
     return response.data;
   } catch (error) {
     throw error;
   }
 }
+
+export async function apiDonationGetAll() {
+  try {
+    const response = await apiConfig.get(`/mobile/donation`);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiDonationFundrising({id}: {id: string}) {
+    try {
+        const response = await apiConfig.get(`/mobile/donation/${id}/fundrising`);
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+}