diff --git a/app/category/opinion-news/page.tsx b/app/category/opinion-news/page.tsx
new file mode 100644
index 0000000..4f922c1
--- /dev/null
+++ b/app/category/opinion-news/page.tsx
@@ -0,0 +1,22 @@
+import BreakingNews from "@/components/landing-page/breaking-news";
+import Footer from "@/components/landing-page/footer";
+import Header from "@/components/landing-page/header";
+import HeaderLatest from "@/components/landing-page/header-latest";
+import Navbar from "@/components/landing-page/navbar";
+import News from "@/components/landing-page/news";
+import Opini from "@/components/landing-page/opini";
+import PopularNews from "@/components/landing-page/popular-news";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+      <Navbar />
+      <div className="flex-1">
+        <HeaderLatest />
+      </div>
+      <BreakingNews />
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/category/popular-news/page.tsx b/app/category/popular-news/page.tsx
new file mode 100644
index 0000000..4f922c1
--- /dev/null
+++ b/app/category/popular-news/page.tsx
@@ -0,0 +1,22 @@
+import BreakingNews from "@/components/landing-page/breaking-news";
+import Footer from "@/components/landing-page/footer";
+import Header from "@/components/landing-page/header";
+import HeaderLatest from "@/components/landing-page/header-latest";
+import Navbar from "@/components/landing-page/navbar";
+import News from "@/components/landing-page/news";
+import Opini from "@/components/landing-page/opini";
+import PopularNews from "@/components/landing-page/popular-news";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+      <Navbar />
+      <div className="flex-1">
+        <HeaderLatest />
+      </div>
+      <BreakingNews />
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/app/category/protect/page.tsx b/app/category/protect/page.tsx
new file mode 100644
index 0000000..4f922c1
--- /dev/null
+++ b/app/category/protect/page.tsx
@@ -0,0 +1,22 @@
+import BreakingNews from "@/components/landing-page/breaking-news";
+import Footer from "@/components/landing-page/footer";
+import Header from "@/components/landing-page/header";
+import HeaderLatest from "@/components/landing-page/header-latest";
+import Navbar from "@/components/landing-page/navbar";
+import News from "@/components/landing-page/news";
+import Opini from "@/components/landing-page/opini";
+import PopularNews from "@/components/landing-page/popular-news";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen flex-col font-[family-name:var(--font-geist-sans)] bg-white">
+      <Navbar />
+      <div className="flex-1">
+        <HeaderLatest />
+      </div>
+      <BreakingNews />
+
+      <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..81cc136 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -154,16 +154,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 +189,12 @@ export default function DetailContent() {
     setThumbnail(data?.thumbnailUrl);
     setDiseId(data?.aiArticleId);
     setDetailFiles(data?.files);
-    setArticleDetail(data); // <-- Add this
+    setArticleDetail(data);
     close();
   }
 
   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 +202,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 +222,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>
@@ -337,11 +328,11 @@ export default function DetailContent() {
             </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}
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: articleDetail?.htmlDescription || "",
+                  }}
+                />
               </p>
               <Author />
               <div className="flex flex-row gap-2 items-center">
@@ -360,34 +351,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 +365,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 +379,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 +395,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 +434,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 +553,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/landing-page/breaking-news.tsx b/components/landing-page/breaking-news.tsx
index a2cfb0b..ee61bb7 100644
--- a/components/landing-page/breaking-news.tsx
+++ b/components/landing-page/breaking-news.tsx
@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { getListArticle } from "@/service/article";
+import Link from "next/link";
 
 type Article = {
   id: number;
@@ -72,29 +73,31 @@ export default function BreakingNews() {
       <div className="md:col-span-2 space-y-6">
         {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>
+            <Link className="flex gap-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>
@@ -146,29 +149,30 @@ export default function BreakingNews() {
 
         {popular.length > 0 && (
           <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>
+            <Link className="flex gap-4" href={`/detail/${popular[0]?.id}`}>
+              {/* 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>
               </div>
-            </div>
-
+            </Link>
             {/* Item sisanya */}
             <div className="space-y-4">
               {popular.slice(1).map((item, i) => (
@@ -176,15 +180,17 @@ export default function BreakingNews() {
                   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>
+                  <Link className="flex gap-4" 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>
diff --git a/components/landing-page/header-latest.tsx b/components/landing-page/header-latest.tsx
index 382ea7e..10ef041 100644
--- a/components/landing-page/header-latest.tsx
+++ b/components/landing-page/header-latest.tsx
@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { getListArticle } from "@/service/article";
+import Link from "next/link";
 
 type Article = {
   id: number;
@@ -50,26 +51,27 @@ export default function HeaderLatest() {
   return (
     <header className="w-full pt-3 flex justify-center">
       <div className="relative max-w-screen-xl w-full h-[320px] md:h-[480px] mx-3 md:mx-5 overflow-hidden group">
-        {/* Gambar utama */}
-        <Image
-          src={article?.thumbnailUrl || "/dummy.jpg"}
-          alt={article?.title || "No Title"}
-          fill
-          className="object-cover transition-transform duration-500 group-hover:scale-110"
-        />
+        <Link className="flex gap-4" href={`/detail/${article?.id}`}>
+          <Image
+            src={article?.thumbnailUrl || "/dummy.jpg"}
+            alt={article?.title || "No Title"}
+            fill
+            className="object-cover transition-transform duration-500 group-hover:scale-110"
+          />
 
-        {/* Overlay gradient */}
-        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
+          {/* Overlay gradient */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
 
-        {/* Konten teks */}
-        <div className="absolute bottom-5 left-5 text-white max-w-[80%]">
-          <span className="bg-orange-600 text-white text-[10px] md:text-xs px-2 py-1 mb-3 inline-block font-semibold uppercase tracking-wide">
-            {article?.categoryName || "Berita Terkini"}
-          </span>
-          <h1 className="text-lg md:text-2xl font-semibold leading-snug md:leading-tight">
-            {article?.title || "Memuat..."}
-          </h1>
-        </div>
+          {/* Konten teks */}
+          <div className="absolute bottom-5 left-5 text-white max-w-[80%]">
+            <span className="bg-orange-600 text-white text-[10px] md:text-xs px-2 py-1 mb-3 inline-block font-semibold uppercase tracking-wide">
+              {article?.categoryName || "Berita Terkini"}
+            </span>
+            <h1 className="text-lg md:text-2xl font-semibold leading-snug md:leading-tight">
+              {article?.title || "Memuat..."}
+            </h1>
+          </div>
+        </Link>
       </div>
     </header>
   );
diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx
index b512c5d..6043a40 100644
--- a/components/landing-page/header.tsx
+++ b/components/landing-page/header.tsx
@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { getListArticle } from "@/service/article";
+import Link from "next/link";
 
 type Article = {
   id: number;
@@ -51,82 +52,84 @@ export default function Header() {
   return (
     <header className="bg-white w-full pt-3 flex justify-center">
       <div className="relative max-w-screen-xl h-auto md:h-[483px] flex flex-col md:flex-row overflow-hidden shadow-md mx-3 md:mx-3 lg:mx-5">
-        <div className="w-full md:w-1/2 h-[250px] md:h-full">
-          <Image
-            src={article?.thumbnailUrl || "/dummy.jpg"}
-            alt={article?.title || "No Title"}
-            width={730}
-            height={483}
-            className="object-cover w-full h-full"
-          />
-        </div>
+        <Link className="flex" href={`/detail/${article?.id}`}>
+          <div className="w-full md:w-1/2 h-[250px] md:h-full">
+            <Image
+              src={article?.thumbnailUrl || "/dummy.jpg"}
+              alt={article?.title || "No Title"}
+              width={730}
+              height={483}
+              className="object-cover w-full h-full"
+            />
+          </div>
 
-        <div className="w-full md:w-1/2 bg-[#714C3D] text-white p-6 md:p-10 flex flex-col justify-center">
-          <span className="bg-black text-white text-xs px-2 py-1 mb-4 inline-block w-fit">
-            {article?.categoryName || "Berita Terkini"}
-          </span>
-          <h1 className="text-xl md:text-3xl font-semibold leading-snug md:leading-tight mb-4 md:mb-6">
-            {article?.title || "Memuat..."}
-          </h1>
-          <div className="flex flex-wrap gap-4 text-sm opacity-90">
-            <div className="flex items-center gap-1">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-              >
-                <g fill="none">
-                  <path d="M0 0h24v24H0z" />
+          <div className="w-full md:w-1/2 bg-[#714C3D] text-white p-6 md:p-10 flex flex-col justify-center">
+            <span className="bg-black text-white text-xs px-2 py-1 mb-4 inline-block w-fit">
+              {article?.categoryName || "Berita Terkini"}
+            </span>
+            <h1 className="text-xl md:text-3xl font-semibold leading-snug md:leading-tight mb-4 md:mb-6">
+              {article?.title || "Memuat..."}
+            </h1>
+            <div className="flex flex-wrap gap-4 text-sm opacity-90">
+              <div className="flex items-center gap-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                >
+                  <g fill="none">
+                    <path d="M0 0h24v24H0z" />
+                    <path
+                      fill="currentColor"
+                      d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8"
+                    />
+                  </g>
+                </svg>
+                <span>
+                  {article
+                    ? new Date(article.createdAt).toLocaleDateString("id-ID", {
+                        day: "numeric",
+                        month: "long",
+                        year: "numeric",
+                      })
+                    : ""}
+                </span>
+              </div>
+              <div className="flex items-center gap-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 32 32"
+                >
                   <path
                     fill="currentColor"
-                    d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8"
+                    d="M28 4h-2V2h-2v2H8V2H6v2H4a2.006 2.006 0 0 0-2 2v22a2.006 2.006 0 0 0 2 2h24a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2m0 24H4V10h24Z"
                   />
-                </g>
-              </svg>
-              <span>
-                {article
-                  ? new Date(article.createdAt).toLocaleDateString("id-ID", {
-                      day: "numeric",
-                      month: "long",
-                      year: "numeric",
-                    })
-                  : ""}
-              </span>
-            </div>
-            <div className="flex items-center gap-1">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 32 32"
-              >
-                <path
-                  fill="currentColor"
-                  d="M28 4h-2V2h-2v2H8V2H6v2H4a2.006 2.006 0 0 0-2 2v22a2.006 2.006 0 0 0 2 2h24a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2m0 24H4V10h24Z"
-                />
-              </svg>
-              <span>{article?.createdByName || ""}</span>
-            </div>
-            <div className="flex items-center gap-1">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                />
-              </svg>
-              <span>0</span>
+                </svg>
+                <span>{article?.createdByName || ""}</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                  />
+                </svg>
+                <span>0</span>
+              </div>
             </div>
           </div>
-        </div>
+        </Link>
       </div>
     </header>
   );
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 613ee9c..ff21fc1 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -41,16 +41,19 @@ export default function Navbar() {
             BERITA TERKINI
           </Link>
           <Link
-            href="/berita-populer"
+            href="/category/popular-news"
             className="text-black hover:text-[#795548]"
           >
             BERITA POPULER
           </Link>
-          <Link href="/jaga-negeri" className="text-black hover:text-[#795548]">
+          <Link
+            href="/category/protect"
+            className="text-black hover:text-[#795548]"
+          >
             JAGA NEGERI
           </Link>
           <Link
-            href="/berita-opini"
+            href="/category/opinion-news"
             className="text-black hover:text-[#795548]"
           >
             BERITA OPINI
diff --git a/components/landing-page/news.tsx b/components/landing-page/news.tsx
index c6f2c31..a4e0747 100644
--- a/components/landing-page/news.tsx
+++ b/components/landing-page/news.tsx
@@ -12,6 +12,7 @@ import {
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { getListArticle } from "@/service/article";
+import Link from "next/link";
 
 type Article = {
   id: number;
@@ -88,64 +89,66 @@ export default function News() {
                 key={item.id}
                 className="flex flex-col md:flex-row gap-4 pb-6"
               >
-                <div className="w-full md:w-[250px]">
-                  <Image
-                    src={item.thumbnailUrl || "/dummy.jpg"}
-                    alt={item.title}
-                    width={250}
-                    height={180}
-                    className="w-full h-auto object-cover"
-                  />
-                </div>
+                <Link className="flex gap-4" href={`/detail/${item?.id}`}>
+                  <div className="w-full md:w-[250px]">
+                    <Image
+                      src={item.thumbnailUrl || "/dummy.jpg"}
+                      alt={item.title}
+                      width={250}
+                      height={180}
+                      className="w-full h-auto object-cover"
+                    />
+                  </div>
 
-                <div className="flex-1">
-                  <span className="inline-block bg-black text-white text-xs px-2 py-1 mb-2">
-                    {item.categoryName || "Berita Terkini"}
-                  </span>
-                  <h3 className="font-semibold text-xl font-serif mb-2">
-                    {item.title}
-                  </h3>
-                  <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
-                    by {item.createdByName || "admin"}{" "}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                    >
-                      <g fill="none">
-                        <path d="M0 0h24v24H0z" />
+                  <div className="flex-1">
+                    <span className="inline-block bg-black text-white text-xs px-2 py-1 mb-2">
+                      {item.categoryName || "Berita Terkini"}
+                    </span>
+                    <h3 className="font-semibold text-xl font-serif mb-2">
+                      {item.title}
+                    </h3>
+                    <p className="text-xs text-[#999999] mb-2 flex items-center gap-2">
+                      by {item.createdByName || "admin"}{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                      >
+                        <g fill="none">
+                          <path d="M0 0h24v24H0z" />
+                          <path
+                            fill="currentColor"
+                            d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8"
+                          />
+                        </g>
+                      </svg>
+                      {new Date(item.createdAt).toLocaleDateString("id-ID", {
+                        day: "numeric",
+                        month: "long",
+                        year: "numeric",
+                      })}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
                         <path
-                          fill="currentColor"
-                          d="M12 8v4l3 3l1-1l-2.5-2.5V8zM12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2m0 18a8 8 0 1 1 8-8a8.009 8.009 0 0 1-8 8"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                         />
-                      </g>
-                    </svg>
-                    {new Date(item.createdAt).toLocaleDateString("id-ID", {
-                      day: "numeric",
-                      month: "long",
-                      year: "numeric",
-                    })}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                      />
-                    </svg>
-                    0
-                  </p>
-                  <p className="text-[#999999] text-sm font-serif">
-                    {truncateText(item.description, 50)}
-                  </p>
-                </div>
+                      </svg>
+                      0
+                    </p>
+                    <p className="text-[#999999] text-sm font-serif">
+                      {truncateText(item.description, 50)}
+                    </p>
+                  </div>
+                </Link>
               </div>
             ))}
           </div>
diff --git a/components/landing-page/opini.tsx b/components/landing-page/opini.tsx
index 2af2780..85b49cc 100644
--- a/components/landing-page/opini.tsx
+++ b/components/landing-page/opini.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import { getListArticle } from "@/service/article";
+import Link from "next/link";
 
 type Article = {
   id: number;
@@ -83,52 +84,56 @@ export default function Opini() {
                 key={item.id}
                 className="flex items-start gap-4 border-b pb-4"
               >
-                <Image
-                  src={item.thumbnailUrl || "/dummy.jpg"}
-                  alt={item.title}
-                  width={109}
-                  height={70}
-                  className="w-[109px] h-16 object-cover"
-                />
-                <div>
-                  <p className="text-sm font-medium font-serif">{item.title}</p>
-                  <p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                    >
-                      <g fill="none">
-                        <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" />
+                <Link className="flex gap-4" href={`/detail/${item?.id}`}>
+                  <Image
+                    src={item.thumbnailUrl || "/dummy.jpg"}
+                    alt={item.title}
+                    width={109}
+                    height={70}
+                    className="w-[109px] h-16 object-cover"
+                  />
+                  <div>
+                    <p className="text-sm font-medium font-serif">
+                      {item.title}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                      >
+                        <g fill="none">
+                          <path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z" />
+                          <path
+                            fill="currentColor"
+                            d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 4v4.586l2.707 2.707-1.414 1.414L11 13.414V8h2z"
+                          />
+                        </g>
+                      </svg>
+                      {new Date(item.createdAt).toLocaleDateString("id-ID", {
+                        day: "numeric",
+                        month: "long",
+                        year: "numeric",
+                      })}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
                         <path
-                          fill="currentColor"
-                          d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 4v4.586l2.707 2.707-1.414 1.414L11 13.414V8h2z"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                         />
-                      </g>
-                    </svg>
-                    {new Date(item.createdAt).toLocaleDateString("id-ID", {
-                      day: "numeric",
-                      month: "long",
-                      year: "numeric",
-                    })}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-4 w-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                      />
-                    </svg>
-                    0
-                  </p>
-                </div>
+                      </svg>
+                      0
+                    </p>
+                  </div>
+                </Link>
               </div>
             ))}
           </div>
@@ -144,40 +149,46 @@ export default function Opini() {
 
           {jagaNegeri.length > 0 && (
             <div className="mt-6 flex flex-col md:flex-row gap-6">
-              <div className="w-full md:w-[455px]">
-                <Image
-                  src={jagaNegeri[0].thumbnailUrl || "/dummy.jpg"}
-                  alt={jagaNegeri[0].title}
-                  width={700}
-                  height={400}
-                  className="w-full h-[330px] object-cover"
-                />
-                <p className="text-lg mt-4 font-serif">{jagaNegeri[0].title}</p>
-                <p className="text-xs text-gray-500 mt-1 flex items-center gap-2">
-                  {new Date(jagaNegeri[0].createdAt).toLocaleDateString(
-                    "id-ID",
-                    {
-                      day: "numeric",
-                      month: "long",
-                      year: "numeric",
-                    }
-                  )}
-                </p>
-              </div>
+              <Link className="flex" href={`/detail/${jagaNegeri[0]?.id}`}>
+                <div className="w-full md:w-[455px]">
+                  <Image
+                    src={jagaNegeri[0].thumbnailUrl || "/dummy.jpg"}
+                    alt={jagaNegeri[0].title}
+                    width={700}
+                    height={400}
+                    className="w-full h-[330px] object-cover"
+                  />
+                  <p className="text-lg mt-4 font-serif">
+                    {jagaNegeri[0].title}
+                  </p>
+                  <p className="text-xs text-gray-500 mt-1 flex items-center gap-2">
+                    {new Date(jagaNegeri[0].createdAt).toLocaleDateString(
+                      "id-ID",
+                      {
+                        day: "numeric",
+                        month: "long",
+                        year: "numeric",
+                      }
+                    )}
+                  </p>
+                </div>
+              </Link>
 
               <div className="w-full md:w-4/12 flex flex-col gap-4">
                 {jagaNegeri.slice(1).map((item) => (
                   <div key={item.id} className="flex flex-col gap-3">
-                    <Image
-                      src={item.thumbnailUrl || "/dummy.jpg"}
-                      alt={item.title}
-                      width={100}
-                      height={70}
-                      className="w-full md:w-[227px] h-auto md:h-[151px] object-cover"
-                    />
-                    <p className="text-sm font-serif font-medium leading-snug">
-                      {item.title}
-                    </p>
+                    <Link className=" gap-3" href={`/detail/${item?.id}`}>
+                      <Image
+                        src={item.thumbnailUrl || "/dummy.jpg"}
+                        alt={item.title}
+                        width={100}
+                        height={70}
+                        className="w-full md:w-[227px] h-auto md:h-[151px] object-cover"
+                      />
+                      <p className="text-sm font-serif font-medium leading-snug">
+                        {item.title}
+                      </p>
+                    </Link>
                   </div>
                 ))}
               </div>
diff --git a/components/landing-page/popular-news.tsx b/components/landing-page/popular-news.tsx
index 3c2e957..67aef36 100644
--- a/components/landing-page/popular-news.tsx
+++ b/components/landing-page/popular-news.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react";
 import Image from "next/image";
 import { getListArticle } from "@/service/article";
+import Link from "next/link";
 
 type Article = {
   id: number;
@@ -65,16 +66,20 @@ export default function PopularNews() {
                 key={news.id}
                 className="relative h-[358px] group overflow-hidden"
               >
-                <Image
-                  src={news.thumbnailUrl || "/dummy.jpg"}
-                  alt={news.title}
-                  width={361}
-                  height={358}
-                  className="w-full h-[358px] object-cover transition-transform duration-300 group-hover:scale-105"
-                />
-                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3">
-                  <p className="text-xl font-serif font-medium">{news.title}</p>
-                </div>
+                <Link className=" gap-3" href={`/detail/${news?.id}`}>
+                  <Image
+                    src={news.thumbnailUrl || "/dummy.jpg"}
+                    alt={news.title}
+                    width={361}
+                    height={358}
+                    className="w-full h-[358px] object-cover transition-transform duration-300 group-hover:scale-105"
+                  />
+                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent text-white p-3">
+                    <p className="text-xl font-serif font-medium">
+                      {news.title}
+                    </p>
+                  </div>
+                </Link>
               </div>
             ))}
           </div>
diff --git a/public/author.png b/public/author.png
new file mode 100644
index 0000000..7fd0cee
Binary files /dev/null and b/public/author.png differ