diff --git a/app/category/business/page.tsx b/app/category/business/page.tsx
new file mode 100644
index 0000000..c75c264
--- /dev/null
+++ b/app/category/business/page.tsx
@@ -0,0 +1,17 @@
+import BreakingNews from "@/components/landing-page/breaking-news";
+import Footer from "@/components/landing-page/footer";
+import HeaderLatest from "@/components/landing-page/header-bumn";
+import Navbar from "@/components/landing-page/navbar";
+import BumnNews from "@/components/landing-page/news";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+      <Navbar />
+
+      <BumnNews />
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/category/economy/page.tsx b/app/category/economy/page.tsx
new file mode 100644
index 0000000..c75c264
--- /dev/null
+++ b/app/category/economy/page.tsx
@@ -0,0 +1,17 @@
+import BreakingNews from "@/components/landing-page/breaking-news";
+import Footer from "@/components/landing-page/footer";
+import HeaderLatest from "@/components/landing-page/header-bumn";
+import Navbar from "@/components/landing-page/navbar";
+import BumnNews from "@/components/landing-page/news";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+      <Navbar />
+
+      <BumnNews />
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/category/markets/page.tsx b/app/category/markets/page.tsx
new file mode 100644
index 0000000..c75c264
--- /dev/null
+++ b/app/category/markets/page.tsx
@@ -0,0 +1,17 @@
+import BreakingNews from "@/components/landing-page/breaking-news";
+import Footer from "@/components/landing-page/footer";
+import HeaderLatest from "@/components/landing-page/header-bumn";
+import Navbar from "@/components/landing-page/navbar";
+import BumnNews from "@/components/landing-page/news";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+      <Navbar />
+
+      <BumnNews />
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/category/opinion/page.tsx b/app/category/opinion/page.tsx
new file mode 100644
index 0000000..c75c264
--- /dev/null
+++ b/app/category/opinion/page.tsx
@@ -0,0 +1,17 @@
+import BreakingNews from "@/components/landing-page/breaking-news";
+import Footer from "@/components/landing-page/footer";
+import HeaderLatest from "@/components/landing-page/header-bumn";
+import Navbar from "@/components/landing-page/navbar";
+import BumnNews from "@/components/landing-page/news";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+      <Navbar />
+
+      <BumnNews />
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/category/real-estate/page.tsx b/app/category/real-estate/page.tsx
new file mode 100644
index 0000000..c75c264
--- /dev/null
+++ b/app/category/real-estate/page.tsx
@@ -0,0 +1,17 @@
+import BreakingNews from "@/components/landing-page/breaking-news";
+import Footer from "@/components/landing-page/footer";
+import HeaderLatest from "@/components/landing-page/header-bumn";
+import Navbar from "@/components/landing-page/navbar";
+import BumnNews from "@/components/landing-page/news";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+      <Navbar />
+
+      <BumnNews />
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/category/tech/page.tsx b/app/category/tech/page.tsx
new file mode 100644
index 0000000..c75c264
--- /dev/null
+++ b/app/category/tech/page.tsx
@@ -0,0 +1,17 @@
+import BreakingNews from "@/components/landing-page/breaking-news";
+import Footer from "@/components/landing-page/footer";
+import HeaderLatest from "@/components/landing-page/header-bumn";
+import Navbar from "@/components/landing-page/navbar";
+import BumnNews from "@/components/landing-page/news";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+      <Navbar />
+
+      <BumnNews />
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/detail/[id]/page.tsx b/app/detail/[id]/page.tsx
new file mode 100644
index 0000000..6aba50d
--- /dev/null
+++ b/app/detail/[id]/page.tsx
@@ -0,0 +1,19 @@
+import DetailContent from "@/components/details/details-content";
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
+      <div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
+        <Navbar />
+        <div className="flex-1">
+          <DetailContent />
+        </div>
+
+        <Footer />
+      </div>
+    </div>
+  );
+}
diff --git a/components/details/details-content.tsx b/components/details/details-content.tsx
index 574b6bb..7dcee88 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -56,6 +56,8 @@ export default function DetailContent() {
     null
   );
 
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
   const [tabArticles, setTabArticles] = useState<Article[]>([]);
 
   const [activeTab, setActiveTab] = useState<TabKey>("trending");
@@ -154,16 +156,17 @@ export default function DetailContent() {
 
   useEffect(() => {
     initState();
-  }, [page, showData, startDateValue, selectedCategories]);
+  }, [page, showData]);
 
   async function initState() {
     // loading();
     const req = {
       limit: showData,
-      page,
-      search,
-      categorySlug: Array.from(selectedCategories).join(","),
+      page: 1,
+      search: "",
+      categorySlug: "",
       sort: "desc",
+      isPublish: true,
       sortBy: "created_at",
     };
 
@@ -188,22 +191,20 @@ export default function DetailContent() {
     setThumbnail(data?.thumbnailUrl);
     setDiseId(data?.aiArticleId);
     setDetailFiles(data?.files);
-    setArticleDetail(data); // <-- Add this
+    setArticleDetail(data);
     close();
   }
 
+  if (!articleDetail?.files || articleDetail.files.length === 0) {
+    return (
+      <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
+        <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
+      </div>
+    );
+  }
+
   return (
     <>
-      <div className="flex items-center bg-[#F2F4F3] w-full overflow-hidden mb-4 py-6 px-8">
-        <Image
-          src={"/mikul.png"}
-          alt="Background"
-          width={272}
-          height={90}
-          className="w-full md:w-[272px] h-[90px] object-cover border"
-          priority
-        />
-      </div>
       <div className="bg-white grid grid-cols-1 md:grid-cols-3 gap-6 px-8 py-8">
         <div className="md:col-span-2">
           <p className="text-sm text-gray-500 mb-2">Home {">"}Detail</p>
@@ -211,7 +212,7 @@ export default function DetailContent() {
             {articleDetail?.title}
           </h1>
           <div className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
-            <div className="text-[#31942E]">
+            <div className="text-orange-400">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
@@ -231,7 +232,7 @@ export default function DetailContent() {
               </svg>
             </div>
 
-            <span className="text-[#31942E] font-medium">
+            <span className="text-orange-400 font-medium">
               {articleDetail?.createdByName}
             </span>
             <span>•</span>
@@ -252,19 +253,41 @@ export default function DetailContent() {
           </div>
 
           <div className="w-full h-auto mb-6">
-            {articleDetail?.files?.[0]?.fileUrl ? (
+            {/* Gambar utama */}
+            <div className="w-full">
               <Image
-                src={articleDetail.files[0].fileUrl}
-                alt="Berita"
+                src={articleDetail.files[selectedIndex].fileUrl}
+                alt={articleDetail.files[selectedIndex].fileAlt || "Berita"}
                 width={800}
                 height={400}
                 className="rounded-lg w-full object-cover"
               />
-            ) : (
-              <div className="w-full h-[400px] bg-gray-100 flex items-center justify-center rounded-lg">
-                <p className="text-gray-400 text-sm">Gambar tidak tersedia</p>
-              </div>
-            )}
+            </div>
+
+            {/* Thumbnail */}
+            <div className="flex gap-2 mt-3 overflow-x-auto">
+              {articleDetail.files.map((file: any, index: number) => (
+                <button
+                  key={file.id || index}
+                  onClick={() => setSelectedIndex(index)}
+                  className={`border-2 rounded-lg overflow-hidden ${
+                    selectedIndex === index
+                      ? "border-red-500"
+                      : "border-transparent"
+                  }`}
+                >
+                  <Image
+                    src={file.fileUrl}
+                    alt={file.fileAlt || "Thumbnail"}
+                    width={100}
+                    height={80}
+                    className="object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+
+            {/* Slug */}
             <p className="text-sm text-gray-500 mt-2 text-end">
               {articleDetail?.slug}
             </p>
@@ -336,13 +359,13 @@ export default function DetailContent() {
               </Link>
             </div>
             <div className="flex-1 overflow-y-auto">
-              <p className="text-gray-700 leading-relaxed text-justify">
-                <span className="text-black font-bold text-md">
-                  Mikulnews.com -
-                </span>
-
-                {articleDetail?.description}
-              </p>
+              <div className="text-gray-700 leading-relaxed text-justify">
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: articleDetail?.htmlDescription || "",
+                  }}
+                />
+              </div>
               <Author />
               <div className="flex flex-row gap-2 items-center">
                 <span className="font-semibold text-sm text-gray-700">
@@ -360,34 +383,12 @@ export default function DetailContent() {
               </div>
             </div>
           </div>
-          <div className="relative  mb-2 h-[120px] overflow-hidden flex items-center border my-8">
-            <Image
-              src={"/image-kolom.png"}
-              alt="Berita Utama"
-              fill
-              className="object-contain"
-            />
-          </div>
-          <div className="mt-10">
-            <div className="flex items-center space-x-4 p-4 border rounded-lg mb-6">
-              <Image
-                src={"/author.png"}
-                alt="Author"
-                width={60}
-                height={60}
-                className="rounded-full"
-              />
-              <div>
-                <p className="text-green-600 font-bold text-lg">
-                  christine natalia
-                </p>
-              </div>
-            </div>
 
+          <div className="mt-10">
             <h2 className="text-2xl font-bold mb-2">Tinggalkan Balasan</h2>
             <p className="text-gray-600 mb-4 text-sm">
               Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib
-              ditandai <span className="text-green-600">*</span>
+              ditandai <span className="text-orange-600">*</span>
             </p>
 
             <form className="space-y-6 mt-6">
@@ -396,7 +397,7 @@ export default function DetailContent() {
                   htmlFor="komentar"
                   className="block text-sm font-medium mb-1"
                 >
-                  Komentar <span className="text-green-600">*</span>
+                  Komentar <span className="text-orange-600">*</span>
                 </label>
                 <textarea
                   id="komentar"
@@ -410,7 +411,7 @@ export default function DetailContent() {
                   htmlFor="nama"
                   className="block text-sm font-medium mb-1"
                 >
-                  Nama <span className="text-green-600">*</span>
+                  Nama <span className="text-orange-600">*</span>
                 </label>
                 <input
                   type="text"
@@ -426,7 +427,7 @@ export default function DetailContent() {
                     htmlFor="email"
                     className="block text-sm font-medium mb-1"
                   >
-                    Email <span className="text-green-600">*</span>
+                    Email <span className="text-orange-600">*</span>
                   </label>
                   <input
                     type="email"
@@ -465,7 +466,7 @@ export default function DetailContent() {
 
               <button
                 type="submit"
-                className="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2"
+                className="bg-orange-600 hover:bg-orange-700 text-white font-semibold px-6 py-2 rounded-md transition mt-2"
               >
                 KIRIM KOMENTAR
               </button>
@@ -584,82 +585,64 @@ export default function DetailContent() {
               </h3>
 
               <div className="space-y-4">
-                <div className="relative">
-                  <Image
-                    src={"/gaza.png"}
-                    alt="Recommended Article"
-                    width={400}
-                    height={200}
-                    className="rounded-lg w-full h-auto object-cover"
-                  />
-                  <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-lg">
-                    <p className="text-sm font-semibold leading-tight">
-                      Bom Bunuh Diri Guncang Gereja di Damaskus, 20 Orang Tewas
-                      dan Puluhan Terluka
-                    </p>
-                    <p className="text-xs text-gray-300 mt-1">
-                      📅 23 JUNI 2025
-                    </p>
+                {/* Artikel utama (featured) */}
+                {articles.length > 0 && (
+                  <div className="relative">
+                    <Image
+                      src={articles[0]?.thumbnailUrl || "/default.jpg"}
+                      alt={articles[0]?.title || "Recommended Article"}
+                      width={400}
+                      height={200}
+                      className="rounded-lg w-full h-auto object-cover"
+                    />
+                    <div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white p-3 rounded-b-lg">
+                      <p className="text-sm font-semibold leading-tight">
+                        {articles[0]?.title}
+                      </p>
+                      <p className="text-xs text-gray-300 mt-1">
+                        📅{" "}
+                        {new Date(articles[0]?.createdAt).toLocaleDateString(
+                          "id-ID",
+                          {
+                            day: "2-digit",
+                            month: "long",
+                            year: "numeric",
+                          }
+                        )}
+                      </p>
+                    </div>
                   </div>
-                </div>
+                )}
 
+                {/* List artikel lain */}
                 <div className="space-y-3">
-                  <div className="flex space-x-3">
-                    <Image
-                      src={"/perang.png"}
-                      alt="OPM Serang Gereja"
-                      width={80}
-                      height={60}
-                      className="rounded object-cover w-[80px] h-[60px]"
-                    />
-                    <div>
-                      <p className="text-sm font-semibold leading-snug">
-                        OPM Mulai Kehilangan Simpati dari Masyarakat Papua Usai
-                        Serang Gereja
-                      </p>
-                      <p className="text-xs text-gray-500 mt-1">
-                        📅 15 JUNI 2025
-                      </p>
+                  {articles.slice(1, 4).map((item) => (
+                    <div key={item.id} className="flex space-x-3">
+                      <Image
+                        src={item.thumbnailUrl || "/default.jpg"}
+                        alt={item.title}
+                        width={80}
+                        height={60}
+                        className="rounded object-cover w-[80px] h-[60px]"
+                      />
+                      <div>
+                        <p className="text-sm font-semibold leading-snug">
+                          {item.title}
+                        </p>
+                        <p className="text-xs text-gray-500 mt-1">
+                          📅{" "}
+                          {new Date(item.createdAt).toLocaleDateString(
+                            "id-ID",
+                            {
+                              day: "2-digit",
+                              month: "long",
+                              year: "numeric",
+                            }
+                          )}
+                        </p>
+                      </div>
                     </div>
-                  </div>
-
-                  <div className="flex space-x-3">
-                    <Image
-                      src={"/jateng.png"}
-                      alt="Denda Merokok"
-                      width={80}
-                      height={60}
-                      className="rounded object-cover w-[80px] h-[60px]"
-                    />
-                    <div>
-                      <p className="text-sm font-semibold leading-snug">
-                        Jakarta Terapkan Denda Rp 250.000 bagi Warga yang
-                        Merokok Sembarangan
-                      </p>
-                      <p className="text-xs text-gray-500 mt-1">
-                        📅 13 JUNI 2025
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="flex space-x-3">
-                    <Image
-                      src={"/investasi.jpg"}
-                      alt="Pengguna Internet"
-                      width={80}
-                      height={60}
-                      className="rounded object-cover w-[80px] h-[60px]"
-                    />
-                    <div>
-                      <p className="text-sm font-semibold leading-snug">
-                        Warga Indonesia Jadi Pengguna Internet via Ponsel
-                        Terbanyak di Dunia
-                      </p>
-                      <p className="text-xs text-gray-500 mt-1">
-                        📅 26 MEI 2025
-                      </p>
-                    </div>
-                  </div>
+                  ))}
                 </div>
               </div>
             </div>
diff --git a/components/editor/tinymce-editor.tsx b/components/editor/tinymce-editor.tsx
index b8d8e57..ca67548 100644
--- a/components/editor/tinymce-editor.tsx
+++ b/components/editor/tinymce-editor.tsx
@@ -197,8 +197,8 @@ const TinyMCEEditor: React.FC<TinyMCEEditorProps> = ({
     height,
     language,
     placeholder,
-    readonly: readOnly,
-    disabled,
+    // readonly: readOnly,
+    // disabled,
     branding: false,
     elementpath: false,
     resize: false,
@@ -270,9 +270,9 @@ const TinyMCEEditor: React.FC<TinyMCEEditorProps> = ({
         onInit={handleEditorInit}
         initialValue={initialData}
         onEditorChange={handleEditorChange}
-        disabled={disabled}
+        disabled={disabled || readOnly}
         apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
-        // init={editorConfig}
+        init={editorConfig}
       />
 
       {/* Status bar */}
diff --git a/components/form/article/create-article-form.tsx b/components/form/article/create-article-form.tsx
index 40f25d6..e7a4270 100644
--- a/components/form/article/create-article-form.tsx
+++ b/components/form/article/create-article-form.tsx
@@ -524,13 +524,21 @@ export default function CreateArticleForm() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="single">Single Article</SelectItem>
-                <SelectItem value="rewrite">Content Rewrite</SelectItem>
+                {/* <SelectItem value="rewrite">Content Rewrite</SelectItem> */}
               </SelectContent>
             </Select>
             {selectedWritingType === "single" ? (
               <GenerateSingleArticleForm
                 content={(data) => {
                   setDiseData(data);
+                  // setValue("title", data?.title ?? "", {
+                  //   shouldValidate: true,
+                  //   shouldDirty: true,
+                  // });
+                  // setValue("slug", generateSlug(data?.title ?? ""), {
+                  //   shouldValidate: true,
+                  //   shouldDirty: true,
+                  // });
                   setValue(
                     "description",
                     data?.articleBody ? data?.articleBody : ""
diff --git a/components/form/article/edit-article-form.tsx b/components/form/article/edit-article-form.tsx
index 99124eb..d55147c 100644
--- a/components/form/article/edit-article-form.tsx
+++ b/components/form/article/edit-article-form.tsx
@@ -681,6 +681,7 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
                 </div>
 
                 <Button
+                  type="button"
                   className=" border-none rounded-full"
                   variant="outline"
                   color="danger"
diff --git a/components/form/article/generate-ai-content-rewrite-form.tsx b/components/form/article/generate-ai-content-rewrite-form.tsx
index 39fd808..efa630d 100644
--- a/components/form/article/generate-ai-content-rewrite-form.tsx
+++ b/components/form/article/generate-ai-content-rewrite-form.tsx
@@ -1,11 +1,20 @@
 "use client";
 
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
 import { useEffect, useState } from "react";
 import { close, error, loading } from "@/config/swal";
 import { delay } from "@/utils/global";
 import dynamic from "next/dynamic";
-import { getDetailArticle, getGenerateRewriter } from "@/service/generate-article";
+import {
+  getDetailArticle,
+  getGenerateRewriter,
+} from "@/service/generate-article";
 import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import GetSeoScore from "./get-seo-score-form";
@@ -69,8 +78,11 @@ interface DiseData {
   additionalKeywords: string;
 }
 
-export default function GenerateContentRewriteForm(props: { content: (data: DiseData) => void }) {
-  const [selectedWritingSyle, setSelectedWritingStyle] = useState("Informational");
+export default function GenerateContentRewriteForm(props: {
+  content: (data: DiseData) => void;
+}) {
+  const [selectedWritingSyle, setSelectedWritingStyle] =
+    useState("Informational");
   const [selectedArticleSize, setSelectedArticleSize] = useState("News");
   const [selectedLanguage, setSelectedLanguage] = useState("id");
   const [mainKeyword, setMainKeyword] = useState("");
@@ -166,7 +178,10 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
               ))}
             </SelectSection>
           </Select> */}
-          <Select value={selectedWritingSyle} onValueChange={(value) => setSelectedWritingStyle(value)}>
+          <Select
+            value={selectedWritingSyle}
+            onValueChange={(value) => setSelectedWritingStyle(value)}
+          >
             <SelectTrigger className="w-full border rounded-lg text-black dark:border-gray-400">
               <SelectValue placeholder="Writing Style" />
             </SelectTrigger>
@@ -198,7 +213,10 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
               ))}
             </SelectSection>
           </Select> */}
-          <Select value={selectedArticleSize} onValueChange={(value) => setSelectedArticleSize(value)}>
+          <Select
+            value={selectedArticleSize}
+            onValueChange={(value) => setSelectedArticleSize(value)}
+          >
             <SelectTrigger className="w-full border rounded-lg text-black dark:border-gray-400">
               <SelectValue placeholder="Writing Style" />
             </SelectTrigger>
@@ -229,7 +247,10 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
               <SelectItem key="en">English</SelectItem>
             </SelectSection>
           </Select> */}
-          <Select value={selectedLanguage} onValueChange={(value) => setSelectedLanguage(value)}>
+          <Select
+            value={selectedLanguage}
+            onValueChange={(value) => setSelectedLanguage(value)}
+          >
             <SelectTrigger className="w-full border rounded-lg text-black dark:border-gray-400">
               <SelectValue placeholder="Writing Style" />
             </SelectTrigger>
@@ -239,6 +260,7 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
             </SelectContent>
           </Select>
         </div>
+
         <div className="flex flex-col mt-3">
           <div className="flex flex-row gap-2 items-center">
             <p className="text-sm">Text</p>
@@ -246,9 +268,16 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
           <div className="w-[78vw] lg:w-full">
             <CustomEditor onChange={setMainKeyword} initialData={mainKeyword} />
           </div>
-          {mainKeyword == "" && <p className="text-red-400 text-sm">Required</p>}
+          {mainKeyword == "" && (
+            <p className="text-red-400 text-sm">Required</p>
+          )}
           {articleIds.length < 3 && (
-            <Button onClick={onSubmit} type="button" disabled={mainKeyword === "" || isLoading} className="my-5 w-full py-5 text-xs md:text-base">
+            <Button
+              onClick={onSubmit}
+              type="button"
+              disabled={mainKeyword === "" || isLoading}
+              className="my-5 w-full py-5 text-xs md:text-base"
+            >
               {isLoading ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -263,7 +292,14 @@ export default function GenerateContentRewriteForm(props: { content: (data: Dise
         {articleIds.length > 0 && (
           <div className="flex flex-row gap-1 mt-2">
             {articleIds?.map((id, index) => (
-              <Button key={id} onClick={() => setSelectedId(id)} disabled={isLoading && selectedId === id} variant={selectedId === id ? "default" : "outline"} className="flex items-center gap-2">
+              <Button
+                type="button"
+                key={id}
+                onClick={() => setSelectedId(id)}
+                disabled={isLoading && selectedId === id}
+                variant={selectedId === id ? "default" : "outline"}
+                className="flex items-center gap-2"
+              >
                 {isLoading && selectedId === id ? (
                   <>
                     <Loader2 className="w-4 h-4 animate-spin" />
diff --git a/components/form/article/generate-ai-single-form.tsx b/components/form/article/generate-ai-single-form.tsx
index cd35c14..f008adf 100644
--- a/components/form/article/generate-ai-single-form.tsx
+++ b/components/form/article/generate-ai-single-form.tsx
@@ -85,7 +85,7 @@ export default function GenerateSingleArticleForm(props: {
   const [additionalKeyword, setAdditionalKeyword] = useState("");
   const [articleIds, setArticleIds] = useState<number[]>([]);
   const [selectedId, setSelectedId] = useState<number>();
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
   const generateAll = async (keyword: string | undefined) => {
     if (keyword) {
@@ -319,6 +319,7 @@ export default function GenerateSingleArticleForm(props: {
           <div className="flex flex-row gap-2 items-center">
             <p className="text-sm">Main Keyword</p>
             <Button
+              type="button"
               variant="default"
               size="sm"
               onClick={() => generateAll(mainKeyword)}
@@ -350,6 +351,7 @@ export default function GenerateSingleArticleForm(props: {
           <div className="flex flex-row gap-2 items-center mt-3">
             <p className="text-sm">Title</p>
             <Button
+              type="button"
               variant="default"
               size="sm"
               onClick={() => generateTitle(mainKeyword)}
@@ -373,6 +375,7 @@ export default function GenerateSingleArticleForm(props: {
           <div className="flex flex-row gap-2 items-center mt-2">
             <p className="text-sm">Additional Keyword</p>
             <Button
+              type="button"
               className="text-sm"
               size="sm"
               onClick={() => generateKeywords(mainKeyword)}
@@ -417,6 +420,7 @@ export default function GenerateSingleArticleForm(props: {
           <div className="flex flex-row gap-1 mt-2">
             {articleIds.map((id, index) => (
               <Button
+                type="button"
                 key={id}
                 onClick={() => setSelectedId(id)}
                 disabled={isLoading && selectedId === id}
diff --git a/components/landing-page/breaking-news.tsx b/components/landing-page/breaking-news.tsx
index 096e0a1..ebf041e 100644
--- a/components/landing-page/breaking-news.tsx
+++ b/components/landing-page/breaking-news.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import { Calendar } from "lucide-react";
 import { getListArticle } from "@/service/article";
+import Link from "next/link";
 
 type Article = {
   id: number;
@@ -83,58 +84,60 @@ export default function BreakingNews() {
         <div className="w-9/12">
           {mainArticle && (
             <div className="">
-              <div className="grid md:grid-cols-2 gap-6 items-center">
-                {/* LEFT - Image */}
-                <div className="relative w-full h-[220px] md:h-[300px] overflow-hidden">
-                  <Image
-                    src={
-                      mainArticle.thumbnailUrl ||
-                      mainArticle.files?.[0]?.fileUrl ||
-                      "/placeholder.png"
-                    }
-                    alt={mainArticle.title}
-                    fill
-                    className="object-cover"
-                  />
-                </div>
-
-                {/* RIGHT - Content */}
-                <div className="flex flex-col justify-center">
-                  <span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3 w-fit">
-                    {mainArticle.categoryName?.toUpperCase()}
-                  </span>
-
-                  <h2 className="text-xl md:text-2xl font-bold mb-2 leading-snug hover:underline cursor-pointer">
-                    {mainArticle.title}
-                  </h2>
-
-                  <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
-                    <span className="font-semibold text-blue-600">
-                      {mainArticle.createdByName}
-                    </span>
-                    <div className="flex items-center gap-1">
-                      <Calendar size={14} />
-                      {new Date(mainArticle.createdAt).toLocaleDateString(
-                        "en-GB",
-                        {
-                          day: "2-digit",
-                          month: "long",
-                          year: "numeric",
-                        }
-                      )}
-                    </div>
-                    <span>0</span>
+              <Link href={`/detail/${mainArticle?.id}`}>
+                <div className="grid md:grid-cols-2 gap-6 items-center">
+                  {/* LEFT - Image */}
+                  <div className="relative w-full h-[220px] md:h-[300px] overflow-hidden">
+                    <Image
+                      src={
+                        mainArticle.thumbnailUrl ||
+                        mainArticle.files?.[0]?.fileUrl ||
+                        "/placeholder.png"
+                      }
+                      alt={mainArticle.title}
+                      fill
+                      className="object-cover"
+                    />
                   </div>
 
-                  <p className="text-sm text-gray-600 mb-4 line-clamp-3">
-                    {mainArticle.description}
-                  </p>
+                  {/* RIGHT - Content */}
+                  <div className="flex flex-col justify-center">
+                    <span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3 w-fit">
+                      {mainArticle.categoryName?.toUpperCase()}
+                    </span>
 
-                  <button className="border border-gray-400 px-4 py-2 text-xs font-semibold hover:bg-black hover:text-white transition w-fit">
-                    READ MORE
-                  </button>
+                    <h2 className="text-xl md:text-2xl font-bold mb-2 leading-snug hover:underline cursor-pointer">
+                      {mainArticle.title}
+                    </h2>
+
+                    <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
+                      <span className="font-semibold text-blue-600">
+                        {mainArticle.createdByName}
+                      </span>
+                      <div className="flex items-center gap-1">
+                        <Calendar size={14} />
+                        {new Date(mainArticle.createdAt).toLocaleDateString(
+                          "en-GB",
+                          {
+                            day: "2-digit",
+                            month: "long",
+                            year: "numeric",
+                          }
+                        )}
+                      </div>
+                      <span>0</span>
+                    </div>
+
+                    <p className="text-sm text-gray-600 mb-4 line-clamp-3">
+                      {mainArticle.description}
+                    </p>
+
+                    <button className="border border-gray-400 px-4 py-2 text-xs font-semibold hover:bg-black hover:text-white transition w-fit">
+                      READ MORE
+                    </button>
+                  </div>
                 </div>
-              </div>
+              </Link>
             </div>
           )}
           <div className="relative mb-2 h-[120px] overflow-hidden flex items-center border my-8">
@@ -165,33 +168,38 @@ export default function BreakingNews() {
 
                 return (
                   <div key={article.id} className="group">
-                    {/* Image */}
-                    <div className="relative w-full h-[180px] overflow-hidden mb-3">
-                      <Image
-                        src={imageUrl}
-                        alt={article.title}
-                        fill
-                        className="object-cover group-hover:scale-105 transition-transform duration-300"
-                      />
-                      <span className="absolute bottom-2 left-2 bg-yellow-400 text-black px-2 py-1 text-[10px] font-bold">
-                        {category.toUpperCase()}
-                      </span>
-                    </div>
+                    <Link href={`/detail/${article?.id}`}>
+                      {/* Image */}
+                      <div className="relative w-full h-[180px] overflow-hidden mb-3">
+                        <Image
+                          src={imageUrl}
+                          alt={article.title}
+                          fill
+                          className="object-cover group-hover:scale-105 transition-transform duration-300"
+                        />
+                        <span className="absolute bottom-2 left-2 bg-yellow-400 text-black px-2 py-1 text-[10px] font-bold">
+                          {category.toUpperCase()}
+                        </span>
+                      </div>
 
-                    {/* Title */}
-                    <h3 className="font-semibold text-sm md:text-base mb-2 leading-snug group-hover:underline cursor-pointer">
-                      {article.title}
-                    </h3>
+                      {/* Title */}
+                      <h3 className="font-semibold text-sm md:text-base mb-2 leading-snug group-hover:underline cursor-pointer">
+                        {article.title}
+                      </h3>
 
-                    {/* Date */}
-                    <div className="flex items-center gap-2 text-xs text-gray-500">
-                      <Calendar size={14} />
-                      {new Date(article.createdAt).toLocaleDateString("en-GB", {
-                        day: "2-digit",
-                        month: "long",
-                        year: "numeric",
-                      })}
-                    </div>
+                      {/* Date */}
+                      <div className="flex items-center gap-2 text-xs text-gray-500">
+                        <Calendar size={14} />
+                        {new Date(article.createdAt).toLocaleDateString(
+                          "en-GB",
+                          {
+                            day: "2-digit",
+                            month: "long",
+                            year: "numeric",
+                          }
+                        )}
+                      </div>
+                    </Link>
                   </div>
                 );
               })}
@@ -219,48 +227,50 @@ export default function BreakingNews() {
                   "/placeholder.png";
 
                 return (
-                  <div
-                    key={article.id}
-                    className="grid grid-cols-1 md:grid-cols-3 gap-4"
-                  >
-                    {/* LEFT - Image */}
-                    <div className="relative w-full h-[180px] md:h-[140px] rounded-md overflow-hidden md:col-span-1">
-                      <Image
-                        src={imageUrl}
-                        alt={article.title}
-                        fill
-                        className="object-cover"
-                      />
-                    </div>
-
-                    {/* RIGHT - Content */}
-                    <div className="md:col-span-2 flex flex-col justify-center">
-                      <h3 className="font-bold text-lg md:text-xl mb-2 leading-snug hover:underline cursor-pointer">
-                        {article.title}
-                      </h3>
-
-                      <div className="flex items-center gap-4 text-xs text-gray-500 mb-2">
-                        <span className="font-semibold text-blue-600">
-                          {article.createdByName || "DODDODYDOD"}
-                        </span>
-                        <div className="flex items-center gap-1">
-                          <Calendar size={14} />
-                          {new Date(article.createdAt).toLocaleDateString(
-                            "en-GB",
-                            {
-                              day: "2-digit",
-                              month: "long",
-                              year: "numeric",
-                            }
-                          )}
-                        </div>
-                        <span>0</span>
+                  <div key={article.id}>
+                    <Link
+                      className="grid grid-cols-1 md:grid-cols-3 gap-4"
+                      href={`/detail/${article?.id}`}
+                    >
+                      {/* LEFT - Image */}
+                      <div className="relative w-full h-[180px] md:h-[140px] rounded-md overflow-hidden md:col-span-1">
+                        <Image
+                          src={imageUrl}
+                          alt={article.title}
+                          fill
+                          className="object-cover"
+                        />
                       </div>
 
-                      <p className="text-sm text-gray-600 line-clamp-2">
-                        {article.description}
-                      </p>
-                    </div>
+                      {/* RIGHT - Content */}
+                      <div className="md:col-span-2 flex flex-col justify-center">
+                        <h3 className="font-bold text-lg md:text-xl mb-2 leading-snug hover:underline cursor-pointer">
+                          {article.title}
+                        </h3>
+
+                        <div className="flex items-center gap-4 text-xs text-gray-500 mb-2">
+                          <span className="font-semibold text-blue-600">
+                            {article.createdByName || "DODDODYDOD"}
+                          </span>
+                          <div className="flex items-center gap-1">
+                            <Calendar size={14} />
+                            {new Date(article.createdAt).toLocaleDateString(
+                              "en-GB",
+                              {
+                                day: "2-digit",
+                                month: "long",
+                                year: "numeric",
+                              }
+                            )}
+                          </div>
+                          <span>0</span>
+                        </div>
+
+                        <p className="text-sm text-gray-600 line-clamp-2">
+                          {article.description}
+                        </p>
+                      </div>
+                    </Link>
                   </div>
                 );
               })}
@@ -291,31 +301,36 @@ export default function BreakingNews() {
           <div className="space-y-4">
             {sideArticles.map((a) => (
               <div key={a.id} className="flex gap-3 items-center">
-                <div className="relative w-20 h-16 flex-shrink-0 rounded overflow-hidden">
-                  <Image
-                    src={
-                      a.thumbnailUrl ||
-                      a.files?.[0]?.fileUrl ||
-                      "/placeholder.png"
-                    }
-                    alt={a.title}
-                    fill
-                    className="object-cover"
-                  />
-                </div>
-                <div className="flex-1">
-                  <h4 className="text-sm font-semibold line-clamp-2 hover:underline">
-                    {a.title}
-                  </h4>
-                  <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
-                    <Calendar size={12} />
-                    {new Date(a.createdAt).toLocaleDateString("en-GB", {
-                      day: "2-digit",
-                      month: "long",
-                      year: "numeric",
-                    })}
+                <Link
+                  className="flex gap-3 items-center"
+                  href={`/detail/${a?.id}`}
+                >
+                  <div className="relative w-20 h-16 flex-shrink-0 rounded overflow-hidden">
+                    <Image
+                      src={
+                        a.thumbnailUrl ||
+                        a.files?.[0]?.fileUrl ||
+                        "/placeholder.png"
+                      }
+                      alt={a.title}
+                      fill
+                      className="object-cover"
+                    />
                   </div>
-                </div>
+                  <div className="flex-1">
+                    <h4 className="text-sm font-semibold line-clamp-2 hover:underline">
+                      {a.title}
+                    </h4>
+                    <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
+                      <Calendar size={12} />
+                      {new Date(a.createdAt).toLocaleDateString("en-GB", {
+                        day: "2-digit",
+                        month: "long",
+                        year: "numeric",
+                      })}
+                    </div>
+                  </div>
+                </Link>
               </div>
             ))}
           </div>
@@ -365,48 +380,55 @@ export default function BreakingNews() {
             {/* Artikel Utama (Top 1) */}
             {popularArticles.length > 0 && (
               <div className="mb-6">
-                <div className="relative w-full h-[220px] md:h-[280px] rounded overflow-hidden">
-                  <Image
-                    src={
-                      popularArticles[0].thumbnailUrl ||
-                      popularArticles[0].files?.[0]?.fileUrl ||
-                      "/placeholder.png"
-                    }
-                    alt={popularArticles[0].title}
-                    fill
-                    className="object-cover"
-                  />
-                </div>
-                <div className="flex items-start justify-between mt-3">
-                  <h3 className="font-bold text-base md:text-lg leading-snug max-w-[85%]">
-                    {popularArticles[0].title}
-                  </h3>
-                  <span className="text-3xl font-bold text-gray-300">01</span>
-                </div>
-                <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
-                  <span>154 Shares</span>
-                </div>
+                <Link href={`/detail/${popularArticles[0]?.id}`}>
+                  <div className="relative w-full h-[220px] md:h-[280px] rounded overflow-hidden">
+                    <Image
+                      src={
+                        popularArticles[0].thumbnailUrl ||
+                        popularArticles[0].files?.[0]?.fileUrl ||
+                        "/placeholder.png"
+                      }
+                      alt={popularArticles[0].title}
+                      fill
+                      className="object-cover"
+                    />
+                  </div>
+                  <div className="flex items-start justify-between mt-3">
+                    <h3 className="font-bold text-base md:text-lg leading-snug max-w-[85%]">
+                      {popularArticles[0].title}
+                    </h3>
+                    <span className="text-3xl font-bold text-gray-300">01</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
+                    <span>154 Shares</span>
+                  </div>
+                </Link>
               </div>
             )}
 
             {/* Artikel 2 - 5 */}
             <div className="space-y-4">
               {popularArticles.slice(1, 5).map((a, i) => (
-                <div key={a.id} className="flex items-center gap-3">
-                  {/* Nomor Urut */}
-                  <div className="w-10 h-10 flex items-center justify-center rounded-full border text-sm font-bold text-gray-500">
-                    {String(i + 2).padStart(2, "0")}
-                  </div>
-
-                  {/* Judul & Info */}
-                  <div className="flex-1">
-                    <h4 className="text-sm font-semibold line-clamp-2 hover:underline">
-                      {a.title}
-                    </h4>
-                    <div className="flex items-center gap-2 text-xs text-gray-400 mt-1">
-                      <span>{154 - i} Shares</span>
+                <div key={a.id}>
+                  <Link
+                    className="flex items-center gap-3"
+                    href={`/detail/${a?.id}`}
+                  >
+                    {/* Nomor Urut */}
+                    <div className="w-10 h-10 flex items-center justify-center rounded-full border text-sm font-bold text-gray-500">
+                      {String(i + 2).padStart(2, "0")}
                     </div>
-                  </div>
+
+                    {/* Judul & Info */}
+                    <div className="flex-1">
+                      <h4 className="text-sm font-semibold line-clamp-2 hover:underline">
+                        {a.title}
+                      </h4>
+                      <div className="flex items-center gap-2 text-xs text-gray-400 mt-1">
+                        <span>{154 - i} Shares</span>
+                      </div>
+                    </div>
+                  </Link>
                 </div>
               ))}
             </div>
diff --git a/components/landing-page/headers.tsx b/components/landing-page/headers.tsx
index 3343842..ca3b99b 100644
--- a/components/landing-page/headers.tsx
+++ b/components/landing-page/headers.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import { Calendar } from "lucide-react";
 import { getListArticle } from "@/service/article";
+import Link from "next/link";
 
 type Article = {
   id: number;
@@ -72,38 +73,40 @@ export default function Header() {
               key={article.id}
               className="relative h-[438px] md:h-[438px] overflow-hidden"
             >
-              {/* Background Image */}
-              <Image
-                src={imageUrl}
-                alt={article.title}
-                fill
-                className="object-cover"
-              />
+              <Link href={`/detail/${article?.id}`}>
+                {/* Background Image */}
+                <Image
+                  src={imageUrl}
+                  alt={article.title}
+                  fill
+                  className="object-cover"
+                />
 
-              {/* Overlay Warna */}
-              <div
-                className={`absolute inset-0 ${
-                  overlayColors[idx] || "bg-black/50"
-                }`}
-              ></div>
+                {/* Overlay Warna */}
+                <div
+                  className={`absolute inset-0 ${
+                    overlayColors[idx] || "bg-black/50"
+                  }`}
+                ></div>
 
-              {/* Content */}
-              <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-white text-center">
-                <span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3">
-                  {category.toUpperCase()}
-                </span>
-                <h3 className="text-lg md:text-2xl font-bold mb-3 leading-snug">
-                  {article.title}
-                </h3>
-                <div className="flex items-center gap-2 text-xs md:text-sm text-gray-200">
-                  <Calendar size={14} />
-                  {new Date(article.createdAt).toLocaleDateString("en-GB", {
-                    day: "2-digit",
-                    month: "long",
-                    year: "numeric",
-                  })}
+                {/* Content */}
+                <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-white text-center">
+                  <span className="bg-yellow-400 text-black px-2 py-1 text-xs font-bold inline-block mb-3">
+                    {category.toUpperCase()}
+                  </span>
+                  <h3 className="text-lg md:text-2xl font-bold mb-3 leading-snug">
+                    {article.title}
+                  </h3>
+                  <div className="flex items-center gap-2 text-xs md:text-sm text-gray-200">
+                    <Calendar size={14} />
+                    {new Date(article.createdAt).toLocaleDateString("en-GB", {
+                      day: "2-digit",
+                      month: "long",
+                      year: "numeric",
+                    })}
+                  </div>
                 </div>
-              </div>
+              </Link>
             </div>
           );
         })}
diff --git a/components/landing-page/news.tsx b/components/landing-page/news.tsx
index f6704f6..45bf0c3 100644
--- a/components/landing-page/news.tsx
+++ b/components/landing-page/news.tsx
@@ -3,6 +3,8 @@
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { getListArticle } from "@/service/article";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 type Article = {
   id: number;
@@ -24,7 +26,19 @@ type Article = {
 export default function BumnNews() {
   const [articles, setArticles] = useState<Article[]>([]);
   const [popular, setPopular] = useState<Article[]>([]);
-  const [categoryName, setCategoryName] = useState("Bumn News");
+  const pathname = usePathname(); // ⬅️ "/bumn-news" misalnya
+  const categoryName =
+    pathname
+      .split("/")
+      .filter(Boolean)
+      .pop()
+      ?.replace(/-/g, " ") // ubah slug jadi teks rapi
+      ?.replace(/\b\w/g, (c) => c.toUpperCase()) || "News";
+
+  useEffect(() => {
+    fetchArticles();
+    fetchPopular();
+  }, []);
 
   useEffect(() => {
     fetchArticles();
@@ -84,30 +98,35 @@ export default function BumnNews() {
           <h1 className="text-3xl font-bold">{categoryName}</h1>
         </div>
         {articles.map((item) => (
-          <div key={item.id} className="flex gap-4 border-b pb-4">
-            <Image
-              src={item.thumbnailUrl || "/dummy.jpg"}
-              alt={item.title}
-              width={160}
-              height={100}
-              className="object-cover rounded-md w-40 h-28"
-            />
-            <div className="flex-1">
-              <h3 className="text-base font-semibold hover:text-blue-600 cursor-pointer">
-                {item.title}
-              </h3>
-              <p className="text-xs text-gray-500 mt-1">
-                By {item.createdByName} •{" "}
-                {new Date(item.createdAt).toLocaleDateString("id-ID", {
-                  day: "numeric",
-                  month: "long",
-                  year: "numeric",
-                })}
-              </p>
-              <p className="text-sm text-gray-600 mt-2 line-clamp-2">
-                {item.description}
-              </p>
-            </div>
+          <div key={item.id}>
+            <Link
+              className="flex gap-4 border-b pb-4"
+              href={`/detail/${item?.id}`}
+            >
+              <Image
+                src={item.thumbnailUrl || "/dummy.jpg"}
+                alt={item.title}
+                width={160}
+                height={100}
+                className="object-cover rounded-md w-40 h-28"
+              />
+              <div className="flex-1">
+                <h3 className="text-base font-semibold hover:text-blue-600 cursor-pointer">
+                  {item.title}
+                </h3>
+                <p className="text-xs text-gray-500 mt-1">
+                  By {item.createdByName} •{" "}
+                  {new Date(item.createdAt).toLocaleDateString("id-ID", {
+                    day: "numeric",
+                    month: "long",
+                    year: "numeric",
+                  })}
+                </p>
+                <p className="text-sm text-gray-600 mt-2 line-clamp-2">
+                  {item.description}
+                </p>
+              </div>
+            </Link>
           </div>
         ))}
       </div>
@@ -147,43 +166,47 @@ export default function BumnNews() {
           <div className="space-y-5">
             {/* Item pertama tampil besar */}
             <div className="relative">
-              <Image
-                src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"}
-                alt={
-                  popular[0]?.files?.[0]?.file_alt ||
-                  popular[0]?.title ||
-                  "No Title"
-                }
-                width={400}
-                height={200}
-                className="w-full h-48 object-cover rounded-md"
-              />
-              <div className="mt-2">
-                <h5 className="text-sm font-semibold hover:text-blue-600 cursor-pointer">
-                  {popular[0]?.title}
-                </h5>
-                <span className="absolute top-2 right-2 text-4xl font-bold text-gray-300/80">
-                  01
-                </span>
-              </div>
+              <Link href={`/detail/${popular[0]?.id}`}>
+                <Image
+                  src={popular[0]?.files?.[0]?.fileUrl || "/dummy.jpg"}
+                  alt={
+                    popular[0]?.files?.[0]?.file_alt ||
+                    popular[0]?.title ||
+                    "No Title"
+                  }
+                  width={400}
+                  height={200}
+                  className="w-full h-48 object-cover rounded-md"
+                />
+                <div className="mt-2">
+                  <h5 className="text-sm font-semibold hover:text-blue-600 cursor-pointer">
+                    {popular[0]?.title}
+                  </h5>
+                  <span className="absolute top-2 right-2 text-4xl font-bold text-gray-300/80">
+                    01
+                  </span>
+                </div>
+              </Link>
             </div>
 
             {/* Item sisanya */}
             <div className="space-y-4">
               {popular.slice(1).map((item, i) => (
-                <div
-                  key={item.id}
-                  className="flex gap-3 items-start border-b pb-2 last:border-b-0"
-                >
-                  <span className="text-lg font-bold text-gray-400">
-                    0{i + 2}
-                  </span>
-                  <div>
-                    <h5 className="text-sm font-medium hover:text-blue-600 cursor-pointer">
-                      {item.title}
-                    </h5>
-                    <p className="text-xs text-gray-400">0 Shares</p>
-                  </div>
+                <div key={item.id}>
+                  <Link
+                    className="flex gap-3 items-start border-b pb-2 last:border-b-0"
+                    href={`/detail/${item?.id}`}
+                  >
+                    <span className="text-lg font-bold text-gray-400">
+                      0{i + 2}
+                    </span>
+                    <div>
+                      <h5 className="text-sm font-medium hover:text-blue-600 cursor-pointer">
+                        {item.title}
+                      </h5>
+                      <p className="text-xs text-gray-400">0 Shares</p>
+                    </div>
+                  </Link>
                 </div>
               ))}
             </div>