diff --git a/src/app/api/event/riwayat/[name]/route.ts b/src/app/api/event/riwayat/[name]/route.ts
new file mode 100644
index 00000000..2c788ab6
--- /dev/null
+++ b/src/app/api/event/riwayat/[name]/route.ts
@@ -0,0 +1,153 @@
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export { GET };
+
+interface Props {
+  params: { name: string };
+}
+async function GET(request: Request, { params }: Props) {
+  try {
+    let fixData;
+    const { name } = params;
+    const { searchParams } = new URL(request.url);
+    const page = searchParams.get("page");
+    const takeData = 5;
+    const skipData = Number(page) * takeData - takeData;
+
+    const userLoginId = await funGetUserIdByToken();
+    if (!userLoginId) {
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Gagal mendapatkan data",
+          reason: "Unauthorized",
+        },
+        {
+          status: 401,
+        }
+      );
+    }
+
+    if (!page) {
+      if (name == "saya") {
+        fixData = await prisma.event.findMany({
+          orderBy: {
+            tanggal: "desc",
+          },
+          where: {
+            authorId: userLoginId,
+            eventMaster_StatusId: "1",
+            isArsip: true,
+          },
+          select: {
+            id: true,
+            title: true,
+            tanggal: true,
+            deskripsi: true,
+            active: true,
+            authorId: true,
+            Author: {
+              select: {
+                Profile: true,
+              },
+            },
+          },
+        });
+      } else if (name === "semua") {
+        fixData = await prisma.event.findMany({
+          orderBy: {
+            tanggal: "desc",
+          },
+          where: {
+            eventMaster_StatusId: "1",
+            isArsip: true,
+          },
+          select: {
+            id: true,
+            title: true,
+            tanggal: true,
+            deskripsi: true,
+            active: true,
+            authorId: true,
+            Author: {
+              select: {
+                Profile: true,
+              },
+            },
+          },
+        });
+      }
+    } else {
+      if (name == "saya") {
+        fixData = await prisma.event.findMany({
+          take: takeData,
+          skip: skipData,
+          orderBy: {
+            tanggal: "desc",
+          },
+          where: {
+            authorId: userLoginId,
+            eventMaster_StatusId: "1",
+            isArsip: true,
+          },
+          select: {
+            id: true,
+            title: true,
+            tanggal: true,
+            deskripsi: true,
+            active: true,
+            authorId: true,
+            Author: {
+              select: {
+                Profile: true,
+              },
+            },
+          },
+        });
+      } else if (name === "semua") {
+        fixData = await prisma.event.findMany({
+          take: takeData,
+          skip: skipData,
+          orderBy: {
+            tanggal: "desc",
+          },
+          where: {
+            eventMaster_StatusId: "1",
+            isArsip: true,
+          },
+          select: {
+            id: true,
+            title: true,
+            tanggal: true,
+            deskripsi: true,
+            active: true,
+            authorId: true,
+            Author: {
+              select: {
+                Profile: true,
+              },
+            },
+          },
+        });
+      }
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: "Berhasil mendapatkan data",
+      data: fixData,
+    });
+  } catch (error) {
+    backendLogger.error("Error get riwayat", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error get data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/dev/event/detail/main/[id]/page.tsx b/src/app/dev/event/detail/main/[id]/page.tsx
index 2550c407..34a13089 100644
--- a/src/app/dev/event/detail/main/[id]/page.tsx
+++ b/src/app/dev/event/detail/main/[id]/page.tsx
@@ -1,16 +1,13 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Event_DetailMain } from "@/app_modules/event";
-import { Event_countTotalPesertaById } from "@/app_modules/event/fun/count/count_total_peserta_by_id";
 
 export default async function Page() {
   const userLoginId = await funGetUserIdByToken();
-  // const totalPeserta = await Event_countTotalPesertaById(eventId);
 
   return (
     <>
       <Event_DetailMain
         userLoginId={userLoginId as string}
-        // totalPeserta={totalPeserta as any}
       />
     </>
   );
diff --git a/src/app/dev/event/detail/riwayat/[id]/page.tsx b/src/app/dev/event/detail/riwayat/[id]/page.tsx
index e0259a97..70a014a6 100644
--- a/src/app/dev/event/detail/riwayat/[id]/page.tsx
+++ b/src/app/dev/event/detail/riwayat/[id]/page.tsx
@@ -1,15 +1,9 @@
 import { Event_DetailRiwayat } from "@/app_modules/event";
-import { Event_countTotalPesertaById } from "@/app_modules/event/fun/count/count_total_peserta_by_id";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let eventId = params.id;
-  const totalPeserta = await Event_countTotalPesertaById(eventId);
 
+export default async function Page() {
   return (
     <>
-      <Event_DetailRiwayat
-        totalPeserta={totalPeserta as any}
-      />
+      <Event_DetailRiwayat />
     </>
   );
 }
diff --git a/src/app/dev/event/main/riwayat/[id]/page.tsx b/src/app/dev/event/main/riwayat/[id]/page.tsx
index 024aa414..9ae233cc 100644
--- a/src/app/dev/event/main/riwayat/[id]/page.tsx
+++ b/src/app/dev/event/main/riwayat/[id]/page.tsx
@@ -1,32 +1,9 @@
 import { Event_Riwayat } from "@/app_modules/event";
-import { event_getListRiwayatSaya } from "@/app_modules/event/fun/get/riwayat/get_list_riwayat_saya";
-import { event_getListSemuaRiwayat } from "@/app_modules/event/fun/get/riwayat/get_list_semua_riwayat";
 
-export default async function Page({ params }: { params: { id: string } }) {
-  let statusRiwayatId = params.id;
-
-  const dataSemuaRiwayat = await event_getListSemuaRiwayat({ page: 1 });
-  const dataRiwayatSaya = await event_getListRiwayatSaya({ page: 1 });
-
-  if (statusRiwayatId == "1") {
-    return (
-      <>
-        <Event_Riwayat
-          statusId={statusRiwayatId}
-          dataSemuaRiwayat={dataSemuaRiwayat as any}
-        />
-      </>
-    );
-  }
-
-  if (statusRiwayatId == "2") {
-    return (
-      <>
-        <Event_Riwayat
-          statusId={statusRiwayatId}
-          dataRiwayatSaya={dataRiwayatSaya as any}
-        />
-      </>
-    );
-  }
+export default async function Page() {
+  return (
+    <>
+      <Event_Riwayat />
+    </>
+  );
 }
diff --git a/src/app_modules/event/component/button/api_fetch_event.ts b/src/app_modules/event/component/button/api_fetch_event.ts
index 7106c4ac..1ff30b97 100644
--- a/src/app_modules/event/component/button/api_fetch_event.ts
+++ b/src/app_modules/event/component/button/api_fetch_event.ts
@@ -1,4 +1,4 @@
-export { apiGetEventByStatus, apiGetKontribusiEvent };
+export { apiGetEventByStatus, apiGetKontribusiEvent, apiGetRiwayatEvent };
 
 const apiGetEventByStatus = async ({
   status,
@@ -81,3 +81,47 @@ const apiGetKontribusiEvent = async ({ page }: { page: string }) => {
     throw error; // Re-throw the error to handle it in the calling function
   }
 };
+
+const apiGetRiwayatEvent = async ({
+  name,
+  page,
+}: {
+  name: string;
+  page: string;
+}) => {
+  try {
+    // Fetch token from cookie
+    const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+    if (!token) {
+      console.error("No token found");
+      return null;
+    }
+
+    // Send PUT request to update portfolio logo
+    const isPage = `?page=${page}`;
+    const response = await fetch(`/api/event/riwayat/${name}${isPage}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    // Check if the response is OK
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      console.error(
+        "Error updating portfolio logo:",
+        errorData?.message || "Unknown error"
+      );
+
+      return null;
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Error updating portfolio medsos:", error);
+    throw error; // Re-throw the error to handle it in the calling function
+  }
+};
diff --git a/src/app_modules/event/component/card_view/card_riwayat.tsx b/src/app_modules/event/component/card_view/card_riwayat.tsx
index 766054cc..9d1fd034 100644
--- a/src/app_modules/event/component/card_view/card_riwayat.tsx
+++ b/src/app_modules/event/component/card_view/card_riwayat.tsx
@@ -19,13 +19,6 @@ export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
     <>
       <ComponentGlobal_CardStyles marginBottom={"15px"}>
         <Stack>
-          {/* <ComponentGlobal_AuthorNameOnHeader
-            profileId={data.Author?.Profile?.id}
-            imagesId={data.Author?.Profile?.imagesId}
-            authorName={data.Author?.Profile?.name}
-            isPembatas={true}
-          /> */}
-
           <ComponentGlobal_AvatarAndUsername
             profile={data.Author?.Profile as any}
           />
@@ -45,7 +38,7 @@ export function ComponentEvent_CardRiwayat({ data }: { data: MODEL_EVENT }) {
               <Text align="right" fz={"sm"} lineClamp={1}>
                 {new Intl.DateTimeFormat("id-ID", {
                   dateStyle: "medium",
-                }).format(data.tanggal)}
+                }).format(new Date(data.tanggal))}
               </Text>
             </Group>
 
diff --git a/src/app_modules/event/component/detail/comp_box_sponsor.tsx b/src/app_modules/event/component/detail/comp_box_sponsor.tsx
index e5e0bc20..7f476c28 100644
--- a/src/app_modules/event/component/detail/comp_box_sponsor.tsx
+++ b/src/app_modules/event/component/detail/comp_box_sponsor.tsx
@@ -1,4 +1,3 @@
-import { RouterEvent } from "@/lib/router_hipmi/router_event";
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 import { ActionIcon, Flex, Loader, Paper, Text } from "@mantine/core";
diff --git a/src/app_modules/event/component/list_tab_riwayat.ts b/src/app_modules/event/component/list_tab_riwayat.ts
new file mode 100644
index 00000000..362d3714
--- /dev/null
+++ b/src/app_modules/event/component/list_tab_riwayat.ts
@@ -0,0 +1,12 @@
+export const listTabsRiwayatEvent = [
+  {
+    id: "1",
+    label: "Semua Riwayat",
+    value: "semua",
+  },
+  {
+    id: "2",
+    label: "Riwayat Saya",
+    value: "saya",
+  },
+];
\ No newline at end of file
diff --git a/src/app_modules/event/detail/riwayat/index.tsx b/src/app_modules/event/detail/riwayat/index.tsx
index 4c201c9b..34232b7b 100644
--- a/src/app_modules/event/detail/riwayat/index.tsx
+++ b/src/app_modules/event/detail/riwayat/index.tsx
@@ -1,26 +1,14 @@
 "use client";
 
 import { Stack } from "@mantine/core";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
 import ComponentEvent_DetailMainData from "../../component/detail/detail_main";
-import ComponentEvent_ListPeserta from "../../component/detail/list_peserta";
-
-export default function Event_DetailRiwayat({
-  totalPeserta,
-}: {
-  totalPeserta: number;
-}) {
-  const params = useParams<{ id: string }>();
-  const eventId = params.id;
-  const router = useRouter();
-  const [total, setTotal] = useState(totalPeserta);
 
+export default function Event_DetailRiwayat() {
   return (
     <>
       <Stack spacing={"lg"} py={"md"}>
         <ComponentEvent_DetailMainData />
-        <ComponentEvent_ListPeserta eventId={eventId} total={total} />
+        {/* <ComponentEvent_ListPeserta eventId={eventId}  /> */}
       </Stack>
     </>
   );
diff --git a/src/app_modules/event/main/riwayat/index.tsx b/src/app_modules/event/main/riwayat/index.tsx
index c6acdceb..ffd1079b 100644
--- a/src/app_modules/event/main/riwayat/index.tsx
+++ b/src/app_modules/event/main/riwayat/index.tsx
@@ -1,55 +1,28 @@
 "use client";
 
-import { Stack, Tabs } from "@mantine/core";
-import { RouterEvent } from "@/lib/router_hipmi/router_event";
 import {
-  AccentColor,
-  MainColor,
+  MainColor
 } from "@/app_modules/_global/color/color_pallet";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { MODEL_EVENT } from "../../_lib/interface";
-import Event_RiwayatSaya from "./saya";
-import Event_SemuaRiwayat from "./semua";
+import { RouterEvent } from "@/lib/router_hipmi/router_event";
+import { Stack, Tabs } from "@mantine/core";
+import { useParams, useRouter } from "next/navigation";
+import { listTabsRiwayatEvent } from "../../component/list_tab_riwayat";
+import Event_ViewRiwayat from "./view_riwayat";
 
-export default function Event_Riwayat({
-  statusId,
-  dataSemuaRiwayat,
-  dataRiwayatSaya,
-}: {
-  statusId: string;
-  dataSemuaRiwayat?: MODEL_EVENT[];
-  dataRiwayatSaya?: MODEL_EVENT[];
-}) {
+export default function Event_Riwayat() {
   const router = useRouter();
-  const [changeStatus, setChangeStatus] = useState(statusId);
-
-  const listTabs = [
-    {
-      id: "1",
-      label: "Semua Riwayat",
-      value: "Semua",
-    },
-    {
-      id: "2",
-      label: "Riwayat Saya",
-      value: "Saya",
-    },
-  ];
-
-  async function onChangeStatus({ statusId }: { statusId: string }) {
-    router.push(RouterEvent.riwayat({ id: statusId }));
-  }
+  const param = useParams<{ id: string }>();
+  const statusId = param.id;
 
   return (
     <>
       <Tabs
         variant="pills"
         radius={"xl"}
-        value={changeStatus}
+        defaultValue={statusId}
+        value={statusId}
         onTabChange={(val: any) => {
-          setChangeStatus(val);
-          onChangeStatus({ statusId: val });
+          router.replace(RouterEvent.riwayat({ id: val }));
         }}
         styles={{
           tabsList: {
@@ -62,32 +35,24 @@ export default function Event_Riwayat({
       >
         <Stack>
           <Tabs.List grow>
-            {listTabs.map((e) => (
+            {listTabsRiwayatEvent.map((e) => (
               <Tabs.Tab
                 key={e.id}
                 value={e.id}
                 fw={"bold"}
-                c={"black"}
                 style={{
                   transition: "0.5s",
                   backgroundColor:
-                    changeStatus === e.id ? MainColor.yellow : MainColor.white,
-                  border:
-                    changeStatus === e.id
-                      ? `1px solid ${AccentColor.yellow}`
-                      : `1px solid ${MainColor.white}`,
+                    statusId === e.id ? MainColor.yellow : MainColor.white,
+                  color: MainColor.darkblue,
                 }}
               >
                 {e.label}
               </Tabs.Tab>
             ))}
           </Tabs.List>
-          {statusId == "1" && (
-            <Event_SemuaRiwayat listData={dataSemuaRiwayat as any} />
-          )}
-          {statusId == "2" && (
-            <Event_RiwayatSaya listData={dataRiwayatSaya as any} />
-          )}
+
+          <Event_ViewRiwayat />
         </Stack>
       </Tabs>
     </>
diff --git a/src/app_modules/event/main/riwayat/view_riwayat.tsx b/src/app_modules/event/main/riwayat/view_riwayat.tsx
new file mode 100644
index 00000000..debc7c5a
--- /dev/null
+++ b/src/app_modules/event/main/riwayat/view_riwayat.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { clientLogger } from "@/util/clientLogger";
+import { Box, Center, Loader, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { MODEL_EVENT } from "../../_lib/interface";
+import {
+    apiGetRiwayatEvent
+} from "../../component/button/api_fetch_event";
+import { ComponentEvent_CardRiwayat } from "../../component/card_view/card_riwayat";
+import { listTabsRiwayatEvent } from "../../component/list_tab_riwayat";
+
+export default function Event_ViewRiwayat() {
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_EVENT[] | null>(null);
+  const [activePage, setActivePage] = useState(1);
+
+  useShallowEffect(() => {
+    handleLoadData();
+  }, []);
+
+  const handleLoadData = async () => {
+    try {
+      const cek = listTabsRiwayatEvent.find((e) => e.id === param.id);
+      const response = await apiGetRiwayatEvent({
+        name: cek?.value as string,
+        page: `${activePage}`,
+      });
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get job", error);
+    }
+  };
+
+  const hanldeMoreData = async () => {
+    try {
+      const cek = listTabsRiwayatEvent.find((e) => e.id === param.id);
+      const nextPage = activePage + 1;
+      const response = await apiGetRiwayatEvent({
+        name: cek?.value as string,
+        page: `${activePage}`,
+      });
+      if (response.success) {
+        setActivePage(nextPage);
+        return response.data;
+      }
+    } catch (error) {
+      clientLogger.error("Error get job", error);
+    }
+  };
+
+  if (!data)
+    return (
+      <>
+        <Stack>
+          <CustomSkeleton height={100} width={"100%"} />
+          <CustomSkeleton height={100} width={"100%"} />
+        </Stack>
+      </>
+    );
+
+  return (
+    <>
+      {_.isEmpty(data) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        // --- Main component --- //
+        <Box>
+          <ScrollOnly
+            height="77vh"
+            renderLoading={() => (
+              <Center mt={"lg"}>
+                <Loader color={"yellow"} />
+              </Center>
+            )}
+            data={data}
+            setData={setData as any}
+            moreData={hanldeMoreData}
+          >
+            {(item) => <ComponentEvent_CardRiwayat data={item} />}
+          </ScrollOnly>
+        </Box>
+      )}
+    </>
+  );
+}
diff --git a/src/middleware.ts b/src/middleware.ts
index 2d1112c2..80c3924f 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -120,6 +120,33 @@ export const middleware = async (req: NextRequest) => {
     return setCorsHeaders(response);
   }
 
+  // Handle API requests
+  if (pathname.startsWith(apiPath)) {
+
+    if (!token) {
+      return setCorsHeaders(unauthorizedResponse());
+    }
+
+    try {
+      const validationResponse = await fetch(
+        new URL(validationApiRoute, req.url),
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      if (!validationResponse.ok) {
+        throw new Error("Failed to validate API request");
+      }
+    } catch (error) {
+      console.error("Error validating API request:", error);
+      return setCorsHeaders(unauthorizedResponse());
+    }
+  }
+
   // Handle /dev routes that require active status
   if (pathname.startsWith("/dev")) {
     try {
@@ -153,32 +180,6 @@ export const middleware = async (req: NextRequest) => {
     }
   }
 
-  // Handle API requests
-  if (pathname.startsWith(apiPath)) {
-    if (!token) {
-      return setCorsHeaders(unauthorizedResponse());
-    }
-
-    try {
-      const validationResponse = await fetch(
-        new URL(validationApiRoute, req.url),
-        {
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
-        }
-      );
-
-      if (!validationResponse.ok) {
-        throw new Error("Failed to validate API request");
-      }
-    } catch (error) {
-      console.error("Error validating API request:", error);
-      return setCorsHeaders(unauthorizedResponse());
-    }
-  }
-
   const response = NextResponse.next();
   // Ensure token is preserved in cookie
   if (token) {