diff --git a/frontend/src/api.js b/frontend/src/api.js
index 2d01152af80f5bc10d62cef5a6666895dfba741b..9e955273a4adbe7506b71c83453ebd7b7dbc3b2e 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -109,6 +109,9 @@ export const getAgendaDonor = shouldReturnDefault =>
     ? Promise.resolve({ data: [] })
     : axios.get(`/donor/jadwal/agenda/`)
 
+export const getRiwayatAcaraDonor = page =>
+  axios.get(`/acara-donor/pengajuan/riwayat/${!!page ? "?page=" + page : ""}`)
+
 export const getRiwayatDonor = page =>
   axios.get(`/donor/jadwal/riwayat/${!!page ? "?page=" + page : ""}`)
 
diff --git a/frontend/src/pages/acara-donor.factory.js b/frontend/src/pages/acara-donor.factory.js
new file mode 100644
index 0000000000000000000000000000000000000000..7d6a6763e147750a14ac6c971e15a7e2f2d8738f
--- /dev/null
+++ b/frontend/src/pages/acara-donor.factory.js
@@ -0,0 +1,28 @@
+import moment from "moment"
+import { idGeneratorFactory } from "../utils/number"
+
+const idGenerator = idGeneratorFactory(1)
+
+export const acaraDonorFactory = override => ({
+  id: idGenerator(),
+  status: "false",
+  alamat_institusi: "Pacilkom",
+  alamat_lokasi_donor: "Sekre Pacil",
+  email_kantor: "pacil@cs.ui.ac.id",
+  email_koor: "pacilia@gmail.com",
+  kategori: "Terbuka",
+  kecamatan: "Beji",
+  keterangan: "",
+  nama_institusi: "Pacilkom",
+  nama_koor: "dr. Pacilia",
+  no_telp_kantor: "08165342342",
+  no_telp_koor: "08167021743",
+  perkiraan_jumlah_donor: 455,
+  waktu_berakhir: moment()
+    .add(1, "hours")
+    .format(),
+  waktu_mulai: moment()
+    .add(2, "hours")
+    .format(),
+  ...override,
+})
diff --git a/frontend/src/pages/profile.js b/frontend/src/pages/profile.js
index 2896a4253bb3bf33f7183bfdb555ce1e7778bfa1..09c03c70d19b0cb7daf9a616a22af189f6662eaa 100644
--- a/frontend/src/pages/profile.js
+++ b/frontend/src/pages/profile.js
@@ -5,6 +5,7 @@ import { useQuery } from "react-query"
 import {
   getAgendaDonor,
   getFormulirDaftarDonor,
+  getRiwayatAcaraDonor,
   getRiwayatDonor,
   getUserProfile,
 } from "../api"
@@ -34,6 +35,29 @@ const Profile = () => {
       ? dataAgenda.data[0]
       : null
 
+  const [pageRiwayatAcaraDonor, setPageRiwayatAcaraDonor] = useState(1)
+  const {
+    status: statusRiwayatAcaraDonor,
+    data: dataRiwayatAcaraDonor,
+    refetch: refetchRiwayatAcaraDonor,
+    isFetching: isFetchingRiwayatAcaraDonor,
+  } = useQuery(
+    ["riwayat-acara-donor", pageRiwayatAcaraDonor],
+    (queryKey, page) => getRiwayatAcaraDonor(page)
+  )
+  const paginationItemCountRiwayatAcaraDonor = 5
+  const riwayatAcaraDonorCountPerPage = 3
+  const pageCountRiwayatAcaraDonor = dataRiwayatAcaraDonor
+    ? Math.ceil(
+        dataRiwayatAcaraDonor.data.count / riwayatAcaraDonorCountPerPage
+      )
+    : 0
+  const paginationRiwayatAcaraDonor = paginationArray(
+    pageRiwayatAcaraDonor,
+    pageCountRiwayatAcaraDonor,
+    paginationItemCountRiwayatAcaraDonor
+  )
+
   const [pageRiwayatDonor, setPageRiwayatDonor] = useState(1)
   const {
     status: statusRiwayatDonor,
@@ -182,7 +206,120 @@ const Profile = () => {
         <div className="row justify-content-center">
           <div className="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4 my-3">
             <div className="card profile-card border-light shadow bg-white rounded mt-2 card">
-              <div className="card-body fluid"></div>
+              <div className="card-body fluid d-flex flex-column">
+                <h5 className="text-center text-red mb-3">
+                  <b>Riwayat Acara Donor Darah</b>
+                </h5>
+                {isFetchingRiwayatAcaraDonor ? (
+                  <Spinner />
+                ) : statusRiwayatAcaraDonor === "error" ? (
+                  <ErrorRetry retry={refetchRiwayatAcaraDonor} />
+                ) : (
+                  <div className="container flex-grow-1 d-flex flex-column">
+                    {dataRiwayatAcaraDonor.data.count === 0 ? (
+                      <div className="text-center">
+                        Belum ada riwayat acara donor.
+                      </div>
+                    ) : (
+                      <>
+                        <div className="flex-grow-1">
+                          <table className="table table-riwayat-donor table-striped">
+                            <thead>
+                              <tr>
+                                <th>Alamat</th>
+                                <th>Waktu</th>
+                                <th>Status</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {dataRiwayatAcaraDonor.data.results.map(
+                                riwayatAcaraDonor => {
+                                  return (
+                                    <tr key={riwayatAcaraDonor.id}>
+                                      <td>
+                                        {riwayatAcaraDonor.alamat_lokasi_donor}
+                                      </td>
+                                      <td>
+                                        {moment(
+                                          riwayatAcaraDonor.waktu_mulai
+                                        ).format("D MMMM YYYY, (HH:mm")}
+                                        {moment(
+                                          riwayatAcaraDonor.waktu_berakhir
+                                        ).format(" - HH:mm)")}
+                                      </td>
+                                      <td>
+                                        {riwayatAcaraDonor.status ? (
+                                          <p>Diterima</p>
+                                        ) : (
+                                          <p>Ditolak</p>
+                                        )}
+                                      </td>
+                                    </tr>
+                                  )
+                                }
+                              )}
+                            </tbody>
+                          </table>
+                        </div>
+                        <ul className="pagination d-flex justify-content-center">
+                          <li
+                            className={`page-item ${
+                              pageRiwayatAcaraDonor === 1 ? "disabled" : ""
+                            }`}
+                            onClick={() =>
+                              pageRiwayatAcaraDonor > 1 &&
+                              setPageRiwayatAcaraDonor(curPage => curPage - 1)
+                            }
+                          >
+                            <span className="page-link">
+                              «
+                              <span className="sr-only">
+                                Halaman sebelumnya riwayat acara donor
+                              </span>
+                            </span>
+                          </li>
+                          {paginationRiwayatAcaraDonor.map(val => (
+                            <li
+                              className={`page-item ${
+                                pageRiwayatAcaraDonor === val ? "active" : ""
+                              }`}
+                              onClick={() => setPageRiwayatAcaraDonor(val)}
+                              key={val}
+                            >
+                              <span className="page-link">
+                                {val}
+                                <span className="sr-only">
+                                  {`Halaman ${val} riwayat acara donor`}
+                                </span>
+                              </span>
+                            </li>
+                          ))}
+                          <li
+                            className={`page-item ${
+                              pageRiwayatAcaraDonor ===
+                              pageCountRiwayatAcaraDonor
+                                ? "disabled"
+                                : ""
+                            }`}
+                            onClick={() =>
+                              pageRiwayatAcaraDonor <
+                                pageCountRiwayatAcaraDonor &&
+                              setPageRiwayatAcaraDonor(curPage => curPage + 1)
+                            }
+                          >
+                            <span className="page-link">
+                              »
+                              <span className="sr-only">
+                                Halaman selanjutnya riwayat acara donor
+                              </span>
+                            </span>
+                          </li>
+                        </ul>
+                      </>
+                    )}
+                  </div>
+                )}
+              </div>
             </div>
           </div>
           <div className="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-4 my-3">
diff --git a/frontend/src/pages/profile.test.js b/frontend/src/pages/profile.test.js
index 9942507820219b44fa64fa218c75a2ea3fe1bc92..79f9d0b3c9ec0586a6aaa601062ceca3ed0c4259 100644
--- a/frontend/src/pages/profile.test.js
+++ b/frontend/src/pages/profile.test.js
@@ -2,15 +2,18 @@ import { fireEvent, screen, waitFor } from "@testing-library/react"
 import React from "react"
 import {
   getAgendaDonor,
+  getRiwayatAcaraDonor,
   getRiwayatDonor,
   getUserProfile,
   getFormulirDaftarDonor,
 } from "../api"
 import { renderAuthenticated } from "../utils/test-util"
+import { acaraDonorFactory } from "./acara-donor.factory"
 import { jadwalDonorFactory } from "./jadwal-donor.factory"
 import ProfilePage from "./profile"
 getAgendaDonor.mockResolvedValue({ data: [] })
 getUserProfile.mockResolvedValue({ data: { profile: {} } })
+getRiwayatAcaraDonor.mockResolvedValue({ data: { count: 0, results: [] } })
 getRiwayatDonor.mockResolvedValue({ data: { count: 0, results: [] } })
 
 describe(`Kartu Donor`, () => {
@@ -267,3 +270,123 @@ describe("Riwayat Donor", () => {
     )
   })
 })
+
+describe("Riwayat Acara Donor", () => {
+  it("shows descriptive message when there is no riwayat acara donor", async () => {
+    getRiwayatAcaraDonor.mockResolvedValueOnce({
+      data: {
+        count: 0,
+        results: [],
+      },
+    })
+    renderAuthenticated(<ProfilePage />)
+    expect(
+      await screen.findByText(/Belum ada riwayat acara donor/i)
+    ).toBeInTheDocument()
+    await waitFor(() =>
+      expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+    )
+  })
+
+  it("shows riwayat acara donor on success", async () => {
+    getRiwayatAcaraDonor.mockResolvedValue({
+      data: {
+        count: 1,
+        results: [
+          {
+            id: 1,
+            status: false,
+            alamat_institusi: "Pacilkom",
+            alamat_lokasi_donor: "Sekre Pacil",
+            email_kantor: "pacil@cs.ui.ac.id",
+            email_koor: "pacilia@gmail.com",
+            kategori: "Terbuka",
+            kecamatan: "Beji",
+            keterangan: "",
+            nama_institusi: "Pacilkom",
+            nama_koor: "dr. Pacilia",
+            no_telp_kantor: "08165342342",
+            no_telp_koor: "08167021743",
+            perkiraan_jumlah_donor: 455,
+            waktu_berakhir: "2020-06-02T12:00:00+07:00",
+            waktu_mulai: "2020-06-02T10:00:00+07:00",
+          },
+        ],
+      },
+    })
+    renderAuthenticated(<ProfilePage />)
+    await screen.findByText("Alamat")
+    expect(screen.getByText("Sekre Pacil"))
+    expect(screen.getByText("Ditolak"))
+    await waitFor(() =>
+      expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+    )
+  })
+
+  it("has clickable pagination", async () => {
+    const acara_donor1 = acaraDonorFactory({
+      alamat_lokasi_donor: "Yuli Pacil",
+    })
+    const acara_donor4 = acaraDonorFactory({
+      alamat_lokasi_donor: "Belyos Pacil",
+    })
+    getRiwayatAcaraDonor
+      .mockResolvedValueOnce({
+        data: {
+          count: 4,
+          results: [acara_donor1, acaraDonorFactory(), acaraDonorFactory()],
+        },
+      })
+      .mockResolvedValueOnce({
+        data: {
+          count: 4,
+          results: [acara_donor4],
+        },
+      })
+      .mockResolvedValueOnce({
+        data: {
+          count: 4,
+          results: [acara_donor1, acaraDonorFactory(), acaraDonorFactory()],
+        },
+      })
+      .mockResolvedValueOnce({
+        data: {
+          count: 4,
+          results: [acara_donor4],
+        },
+      })
+    renderAuthenticated(<ProfilePage />)
+    expect(await screen.findByText("Yuli Pacil")).toBeInTheDocument()
+    fireEvent.click(screen.getByText("Halaman 2 riwayat acara donor"))
+    expect(await screen.findByText("Belyos Pacil")).toBeInTheDocument()
+    fireEvent.click(screen.getByText("Halaman sebelumnya riwayat acara donor"))
+    expect(await screen.findByText("Yuli Pacil")).toBeInTheDocument()
+    fireEvent.click(screen.getByText("Halaman selanjutnya riwayat acara donor"))
+    expect(await screen.findByText("Belyos Pacil")).toBeInTheDocument()
+    await waitFor(() =>
+      expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+    )
+  })
+
+  it("shows retry button on error and can be retried", async () => {
+    getRiwayatAcaraDonor
+      .mockRejectedValueOnce(new Error("Network error"))
+      .mockResolvedValueOnce({
+        data: {
+          count: 1,
+          results: [
+            acaraDonorFactory({
+              alamat_lokasi_donor: "Yuli Pacil",
+            }),
+          ],
+        },
+      })
+    renderAuthenticated(<ProfilePage />)
+    expect(await screen.findByText(/Coba lagi/i)).toBeInTheDocument()
+    fireEvent.click(screen.getByText(/Coba lagi/i))
+    expect(await screen.findByText("Yuli Pacil")).toBeInTheDocument()
+    await waitFor(() =>
+      expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+    )
+  })
+})