diff --git a/components/main/detail/new-detail.tsx b/components/main/detail/new-detail.tsx
index c308668..af2446e 100644
--- a/components/main/detail/new-detail.tsx
+++ b/components/main/detail/new-detail.tsx
@@ -4,21 +4,29 @@ import DetailNews from "../../page/detail-news";
 import SidebarDetail from "../../page/sidebar-detail";
 import RelatedNews from "../../page/related-news";
 import Comment from "./comment";
-import { getArticleById } from "@/service/article";
+import { getArticleById, getListArticle } from "@/service/article";
 import { useParams } from "next/navigation";
 import Link from "next/link";
-import { ChevronLeftIcon, ChevronRightIcon } from "@/components/icons";
+import { ChevronRightIcon } from "@/components/icons";
 import { close, loading } from "@/config/swal";
 
 export default function NewsDetailPage() {
   const params = useParams();
   const id: any = params?.id;
   const [detailArticle, setDetailArticle] = useState();
+  const [articles, setArticles] = useState<any>([]);
 
   useEffect(() => {
     initFetch();
+    getArticles();
   }, []);
 
+  async function getArticles() {
+    const req = { page: 1, search: "", limit: "50" };
+    const response = await getListArticle(req);
+    setArticles(response?.data?.data);
+  }
+
   const initFetch = async () => {
     loading();
     const res = await getArticleById(id?.split("-")[0]);
@@ -37,7 +45,7 @@ export default function NewsDetailPage() {
           <p className=" text-lg">Berita</p>
         </div>
         <div className="text-black lg:flex bg-white gap-4">
-          <DetailNews data={detailArticle} />
+          <DetailNews data={detailArticle} listArticle={articles} />
           <div className="w-auto lg:w-[25%] hidden lg:block">
             <SidebarDetail />
           </div>
diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index a630882..e8056ed 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -22,11 +22,14 @@ import {
 import { Button } from "@nextui-org/button";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 
-export default function DetailNews(props: { data: any }) {
-  const { data } = props;
+export default function DetailNews(props: { data: any; listArticle: any }) {
+  const { data, listArticle } = props;
+  const [prevArticle, setPrevArticle] = useState("");
+  const [nextArticle, setNextArticle] = useState("");
   const pathname = usePathname();
-  const shareText = "Cek situs ini!";
+  const shareText = "Humas Polri";
 
   const handleShare = (platform: string) => {
     let shareLink = "";
@@ -68,6 +71,26 @@ export default function DetailNews(props: { data: any }) {
       `width=${popupWidth},height=${popupHeight},top=${top},left=${left},resizable=no,scrollbars=no,toolbar=no,menubar=no,status=no`
     );
   };
+
+  useEffect(() => {
+    const index = listArticle.findIndex((item: any) => item?.id === data?.id);
+    if (index - 1 == -1) {
+      setPrevArticle("");
+    } else {
+      const prevString = `${listArticle[index - 1]?.id}-${
+        listArticle[index - 1]?.slug
+      }`;
+      setPrevArticle(prevString);
+    }
+    if (index + 1 == listArticle?.length) {
+      setNextArticle("");
+    } else {
+      const nextString = `${listArticle[index + 1]?.id}-${
+        listArticle[index + 1]?.slug
+      }`;
+      setNextArticle(nextString);
+    }
+  }, [data, listArticle]);
   return (
     <div className="flex flex-col gap-2 py-4">
       <p className="font-semibold text-xl lg:text-3xl">{data?.title}</p>
@@ -157,15 +180,33 @@ export default function DetailNews(props: { data: any }) {
           <div className="w-3/4 text-xl ">Whatsapp</div>
         </Button>
       </div>
-      {/* <div className="flex justify-between text-black">
-        <Link href={`#`} className="flex flex-row itesm-center gap-3 w-fit">
-          <ChevronLeftIcon /> Sebelumnya
-        </Link>
-        <Link href={`#`} className="flex flex-row itesm-center gap-3 w-fit">
-          <ChevronRightIcon /> Selanjutnya
-        </Link>
-        <Link href={`#`}></Link>
-      </div> */}
+      <div className="grid grid-cols-2 text-black">
+        {prevArticle === "" ? (
+          <p className="flex flex-row items-center gap-3">
+            <ChevronLeftIcon /> Sebelumnya
+          </p>
+        ) : (
+          <Link
+            href={`/news/detail/${prevArticle}`}
+            className="flex flex-row items-center gap-3 font-semibold"
+          >
+            <ChevronLeftIcon /> Sebelumnya
+          </Link>
+        )}
+
+        {nextArticle === "" ? (
+          <p className="flex flex-row justify-end items-center gap-3">
+            Selanjutnya <ChevronRightIcon />
+          </p>
+        ) : (
+          <Link
+            href={`/news/detail/${nextArticle}`}
+            className="flex flex-row justify-end items-center gap-3 font-semibold"
+          >
+            Selanjutnya <ChevronRightIcon />
+          </Link>
+        )}
+      </div>
     </div>
   );
 }