diff --git a/app/details/[slug]/page.tsx b/app/details/[slug]/page.tsx
new file mode 100644
index 0000000..6adfd1f
--- /dev/null
+++ b/app/details/[slug]/page.tsx
@@ -0,0 +1,30 @@
+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="fixed top-0 left-0 w-full h-auto z-0">
+        <Image
+          src="/rumput.jpg"
+          alt="Background"
+          width={1450}
+          height={600}
+          className="w-full h-auto object-cover"
+          priority
+        />
+      </div>
+
+      <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 1c6ee5d..ee34d50 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -20,6 +20,8 @@ import {
   postArticleComment,
 } from "@/service/master-user";
 import { useForm } from "react-hook-form";
+import { Badge } from "../ui/badge";
+import { map } from "zod";
 
 type TabKey = "trending" | "comments" | "latest";
 
@@ -299,7 +301,7 @@ export default function DetailContent() {
 
   async function initStateData() {
     loading();
-    const res = await getArticleById(id);
+    const res = await getArticleBySlug(slug);
     const data = res?.data?.data;
 
     setThumbnail(data?.thumbnailUrl);
@@ -570,9 +572,17 @@ export default function DetailContent() {
                 </span>
                 <div className="flex flex-wrap gap-2 mt-1">
                   {articleDetail?.tags ? (
-                    <span className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded">
-                      {articleDetail.tags}
-                    </span>
+                    articleDetail.tags
+                      .split(",") // pisahkan berdasarkan koma
+                      .map((tag: string, index: number) => (
+                        <Badge
+                          key={index}
+                          variant="secondary"
+                          className="text-sm"
+                        >
+                          {tag.trim()}
+                        </Badge>
+                      ))
                   ) : (
                     <span className="text-sm text-gray-500">Tidak ada tag</span>
                   )}
diff --git a/components/landing-page/citizen-news/citizen-news.tsx b/components/landing-page/citizen-news/citizen-news.tsx
index d2d03d8..ff9d296 100644
--- a/components/landing-page/citizen-news/citizen-news.tsx
+++ b/components/landing-page/citizen-news/citizen-news.tsx
@@ -13,6 +13,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   customCreatorName: string;
   thumbnailUrl: string;
@@ -150,7 +151,7 @@ export default function CitizenNews() {
           <div key={item.id}>
             <Link
               className="flex flex-col md:flex-row gap-6"
-              href={`/detail/${item?.id}`}
+              href={`/details/${item?.slug}`}
             >
               {/* Image + Category */}
               <div className="relative w-full md:w-1/2 h-64">
@@ -319,7 +320,7 @@ export default function CitizenNews() {
               <div key={item.id} className="flex gap-3 items-center">
                 <Link
                   className="flex gap-3 items-center"
-                  href={`/detail/${item?.id}`}
+                  href={`/details/${item?.slug}`}
                 >
                   <Image
                     src={item.thumbnailUrl || "/no-image.jpg"}
@@ -344,7 +345,7 @@ export default function CitizenNews() {
             </h2>
             <div className=" w-full">
               <div className="relative w-full aspect-video mb-5">
-                <Link href={`/detail/${articles[0]?.id}`}>
+                <Link href={`/details/${articles[0]?.slug}`}>
                   <Image
                     src={
                       articles[0]?.thumbnailUrl ||
@@ -394,7 +395,7 @@ export default function CitizenNews() {
                   <div key={index}>
                     <Link
                       className="flex gap-3"
-                      href={`/detail/${article?.id}`}
+                      href={`/details/${article?.slug}`}
                     >
                       <div className="relative w-[120px] h-[86px] shrink-0">
                         <Image
diff --git a/components/landing-page/citizen-news/header-citizen.tsx b/components/landing-page/citizen-news/header-citizen.tsx
index f25ca35..c47c797 100644
--- a/components/landing-page/citizen-news/header-citizen.tsx
+++ b/components/landing-page/citizen-news/header-citizen.tsx
@@ -12,6 +12,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   customCreatorName: string;
   thumbnailUrl: string;
@@ -109,7 +110,7 @@ export default function HeaderCitizen() {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
           {mainArticle && (
             <div className="md:col-span-2 relative">
-              <Link href={`/detail/${mainArticle.id}`}>
+              <Link href={`/details/${mainArticle.slug}`}>
                 <Image
                   src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
                   alt={mainArticle.title}
@@ -145,7 +146,7 @@ export default function HeaderCitizen() {
           <div className="grid grid-rows-2 gap-2">
             {otherArticles.map((article, index) => (
               <div key={index} className="relative">
-                <Link href={`/detail/${article.id}`}>
+                <Link href={`/details/${article.slug}`}>
                   <Image
                     src={
                       article.thumbnailUrl ||
diff --git a/components/landing-page/development/development-news.tsx b/components/landing-page/development/development-news.tsx
index c5abc03..dde8db8 100644
--- a/components/landing-page/development/development-news.tsx
+++ b/components/landing-page/development/development-news.tsx
@@ -14,6 +14,7 @@ type Article = {
   categoryName: string;
   createdAt: string;
   createdByName: string;
+  slug: string;
   customCreatorName: string;
   thumbnailUrl: string;
   categories: {
@@ -152,7 +153,7 @@ export default function DevelopmentNews() {
           <div key={item.id}>
             <Link
               className="flex flex-col md:flex-row gap-6"
-              href={`/detail/${item?.id}`}
+              href={`/details/${item?.slug}`}
             >
               {/* Image + Category */}
               <div className="relative w-full md:w-1/2 h-64">
@@ -318,7 +319,7 @@ export default function DevelopmentNews() {
               <div key={item.id} className="flex gap-3 items-center">
                 <Link
                   className="flex gap-3 items-center"
-                  href={`/detail/${item?.id}`}
+                  href={`/details/${item?.slug}`}
                 >
                   <Image
                     src={item.thumbnailUrl || "/no-image.jpg"}
@@ -343,7 +344,7 @@ export default function DevelopmentNews() {
             </h2>
             <div className=" w-full">
               <div className="relative w-full aspect-video mb-5">
-                <Link href={`/detail/${articles[0]?.id}`}>
+                <Link href={`/details/${articles[0]?.slug}`}>
                   <Image
                     src={
                       articles[0]?.thumbnailUrl ||
@@ -393,7 +394,7 @@ export default function DevelopmentNews() {
                   <div key={index}>
                     <Link
                       className="flex gap-3"
-                      href={`/detail/${article?.id}`}
+                      href={`/details/${article?.slug}`}
                     >
                       <div className="relative w-[120px] h-[86px] shrink-0">
                         <Image
diff --git a/components/landing-page/development/header-development.tsx b/components/landing-page/development/header-development.tsx
index a813b10..a011bed 100644
--- a/components/landing-page/development/header-development.tsx
+++ b/components/landing-page/development/header-development.tsx
@@ -12,6 +12,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   customCreatorName: string;
   thumbnailUrl: string;
@@ -115,7 +116,7 @@ export default function HeaderDevelopment() {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
           {mainArticle && (
             <div className="md:col-span-2 relative">
-              <Link href={`/detail/${mainArticle.id}`}>
+              <Link href={`/details/${mainArticle.slug}`}>
                 <Image
                   src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
                   alt={mainArticle.title}
@@ -151,7 +152,7 @@ export default function HeaderDevelopment() {
           <div className="grid grid-rows-2 gap-2">
             {otherArticles.map((article, index) => (
               <div key={index} className="relative">
-                <Link href={`/detail/${article.id}`}>
+                <Link href={`/details/${article.slug}`}>
                   <Image
                     src={
                       article.thumbnailUrl ||
diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx
index e0bcae6..8c95c45 100644
--- a/components/landing-page/header.tsx
+++ b/components/landing-page/header.tsx
@@ -118,7 +118,7 @@ export default function HeroNewsSection() {
         <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2 m-8 ">
           {articles.length > 0 && (
             <div className="md:col-span-2 lg:col-span-3 relative">
-              <Link href={`/detail/${articles[0]?.id}`}>
+              <Link href={`/details/${articles[0]?.slug}`}>
                 <Image
                   src={
                     articles[0]?.files?.[0]?.fileUrl ||
@@ -172,7 +172,7 @@ export default function HeroNewsSection() {
           <div className="md:col-span-1 lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-2">
             {articles.slice(1, 5).map((article, index) => (
               <div key={index} className="relative">
-                <Link href={`/detail/${article?.id}`}>
+                <Link href={`/details/${article?.slug}`}>
                   <Image
                     src={
                       article.thumbnailUrl ||
diff --git a/components/landing-page/health/header-health.tsx b/components/landing-page/health/header-health.tsx
index eee056c..937c4ce 100644
--- a/components/landing-page/health/header-health.tsx
+++ b/components/landing-page/health/header-health.tsx
@@ -12,6 +12,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   customCreatorName: string;
   thumbnailUrl: string;
@@ -109,7 +110,7 @@ export default function HeaderHealth() {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
           {mainArticle && (
             <div className="md:col-span-2 relative">
-              <Link href={`/detail/${mainArticle.id}`}>
+              <Link href={`/details/${mainArticle.slug}`}>
                 <Image
                   src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
                   alt={mainArticle.title}
@@ -145,7 +146,7 @@ export default function HeaderHealth() {
           <div className="grid grid-rows-2 gap-2">
             {otherArticles.map((article, index) => (
               <div key={index} className="relative">
-                <Link href={`/detail/${article.id}`}>
+                <Link href={`/details/${article.slug}`}>
                   <Image
                     src={
                       article.thumbnailUrl ||
diff --git a/components/landing-page/health/health-news.tsx b/components/landing-page/health/health-news.tsx
index 0b71217..7ae6bea 100644
--- a/components/landing-page/health/health-news.tsx
+++ b/components/landing-page/health/health-news.tsx
@@ -13,6 +13,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   customCreatorName: string;
   thumbnailUrl: string;
@@ -149,7 +150,7 @@ export default function HealthNews() {
           <div key={item.id}>
             <Link
               className="flex flex-col md:flex-row gap-6"
-              href={`/detail/${item?.id}`}
+              href={`/details/${item?.slug}`}
             >
               <div className="relative w-full md:w-1/2 h-64">
                 <Image
@@ -309,7 +310,7 @@ export default function HealthNews() {
               <div key={item.id} className="flex gap-3 items-center">
                 <Link
                   className="flex gap-3 items-center"
-                  href={`/detail/${item?.id}`}
+                  href={`/details/${item?.slug}`}
                 >
                   <Image
                     src={item.thumbnailUrl || "/no-image.jpg"}
@@ -334,7 +335,7 @@ export default function HealthNews() {
             </h2>
             <div className=" w-full">
               <div className="relative w-full aspect-video mb-5">
-                <Link href={`/detail/${articles[0]?.id}`}>
+                <Link href={`/details/${articles[0]?.slug}`}>
                   <Image
                     src={
                       articles[0]?.thumbnailUrl ||
@@ -384,7 +385,7 @@ export default function HealthNews() {
                   <div key={index}>
                     <Link
                       className="flex gap-3"
-                      href={`/detail/${article?.id}`}
+                      href={`/details/${article?.slug}`}
                     >
                       <div className="relative w-[120px] h-[86px] shrink-0">
                         <Image
diff --git a/components/landing-page/latest-and-popular.tsx b/components/landing-page/latest-and-popular.tsx
index b26f265..1ea0358 100644
--- a/components/landing-page/latest-and-popular.tsx
+++ b/components/landing-page/latest-and-popular.tsx
@@ -173,6 +173,7 @@ type Article = {
   categoryName: string;
   createdAt: string;
   createdByName: string;
+  slug: string;
   customCreatorName: string;
   thumbnailUrl: string;
   categories: {
@@ -251,7 +252,7 @@ export default function LatestandPopular() {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
             {currentArticles.map((article, index) => (
               <div key={index}>
-                <Link href={`/detail/${article?.id}`}>
+                <Link href={`/details/${article?.slug}`}>
                   <div className="relative w-full aspect-video mb-3">
                     <Image
                       src={
@@ -368,7 +369,7 @@ export default function LatestandPopular() {
             </h2>
             <div className=" w-full">
               <div className="relative w-full aspect-video mb-5">
-                <Link href={`/detail/${articles[0]?.id}`}>
+                <Link href={`/details/${articles[0]?.slug}`}>
                   <Image
                     src={
                       articles[0]?.thumbnailUrl ||
@@ -418,7 +419,7 @@ export default function LatestandPopular() {
                   <div key={index} className="flex gap-3">
                     <Link
                       className="flex gap-3"
-                      href={`/detail/${article?.id}`}
+                      href={`/details/${article?.slug}`}
                     >
                       <div className="relative w-[120px] h-[86px] shrink-0">
                         <Image
diff --git a/components/landing-page/latest.tsx b/components/landing-page/latest.tsx
index e8b806c..4146871 100644
--- a/components/landing-page/latest.tsx
+++ b/components/landing-page/latest.tsx
@@ -178,6 +178,7 @@ type Article = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   thumbnailUrl: string;
   categories: {
@@ -249,7 +250,7 @@ export default function Latest({ id }: { id: number }) {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 ">
             <div className=" w-full">
               <div className="relative w-full aspect-video mb-5">
-                <Link href={`/detail/${articles[0]?.id}`}>
+                <Link href={`/details/${articles[0]?.slug}`}>
                   <Image
                     src={articles[0]?.files?.[0]?.fileUrl || "/nodata.png"}
                     alt={"articles[0]?.title"}
@@ -295,7 +296,7 @@ export default function Latest({ id }: { id: number }) {
                   <div key={index} className="flex gap-3">
                     <Link
                       className="flex gap-3"
-                      href={`/detail/${article?.id}`}
+                      href={`/details/${article?.slug}`}
                     >
                       <div className="relative w-[120px] h-[86px] shrink-0">
                         <Image
@@ -342,7 +343,7 @@ export default function Latest({ id }: { id: number }) {
 
             <div className="w-full">
               <div className="relative w-full aspect-video mb-5">
-                <Link href={`/detail/${articles[0]?.id}`}>
+                <Link href={`/details/${articles[0]?.slug}`}>
                   <Image
                     src={
                       articles[0]?.files?.[0]?.fileUrl || "/default-image.jpg"
@@ -390,7 +391,7 @@ export default function Latest({ id }: { id: number }) {
                   <div key={index} className="flex gap-3">
                     <Link
                       className="flex gap-3"
-                      href={`/detail/${article?.id}`}
+                      href={`/details/${article?.slug}`}
                     >
                       <div className="relative w-[120px] h-[86px] shrink-0">
                         <Image
@@ -474,7 +475,7 @@ export default function Latest({ id }: { id: number }) {
             <div className="space-y-8">
               {popularPosts.slice(1, 5).map((post, index) => (
                 <div key={index} className="space-y-3">
-                  <Link href={`/detail/${post?.id}`}>
+                  <Link href={`/details/${post?.slug}`}>
                     <div
                       className={`flex gap-4 ${
                         post.files?.[0]?.fileUrl
diff --git a/components/landing-page/news.tsx b/components/landing-page/news.tsx
index f5a04b3..d7e08ff 100644
--- a/components/landing-page/news.tsx
+++ b/components/landing-page/news.tsx
@@ -12,6 +12,7 @@ type postsData = {
   description: string;
   categoryName: string;
   createdAt: string;
+  slug: string;
   createdByName: string;
   customCreatorName: string;
   thumbnailUrl: string;
@@ -123,7 +124,7 @@ export default function Beranda() {
           .slice(0, 6) // Ambil 4 artikel pertama setelah difilter
           .map((post, index) => (
             <div key={index} className="bg-white overflow-hidden">
-              <Link href={`/detail/${post?.id}`}>
+              <Link href={`/details/${post?.slug}`}>
                 <div className="relative">
                   <Image
                     src={
@@ -212,7 +213,7 @@ export default function Beranda() {
           .slice(0, 6) // Ambil 4 artikel pertama setelah difilter
           .map((post, index) => (
             <div key={index} className="bg-white overflow-hidden">
-              <Link href={`/detail/${post?.id}`}>
+              <Link href={`/details/${post?.slug}`}>
                 <div className="relative">
                   <Image
                     src={
diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx
index d1a732c..3a50853 100644
--- a/components/table/article-table.tsx
+++ b/components/table/article-table.tsx
@@ -199,11 +199,11 @@ export default function ArticleTable() {
     initState();
   };
 
-  const copyUrlArticle = async (id: number) => {
+  const copyUrlArticle = async (slug: any) => {
     const url =
       `${window.location.protocol}//${window.location.host}` +
-      "/detail/" +
-      `${id}`;
+      "/details/" +
+      `${slug}`;
     try {
       await navigator.clipboard.writeText(url);
       successToast("Success", "Article Copy to Clipboard");
@@ -263,7 +263,9 @@ export default function ArticleTable() {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56">
-                  <DropdownMenuItem onClick={() => copyUrlArticle(article.id)}>
+                  <DropdownMenuItem
+                    onClick={() => copyUrlArticle(article.slug)}
+                  >
                     <CopyIcon className="mr-2 h-4 w-4" />
                     Copy Url Article
                   </DropdownMenuItem>