diff --git a/app/detail/[slug]/page.tsx b/app/detail/[slug]/page.tsx
new file mode 100644
index 0000000..69af48a
--- /dev/null
+++ b/app/detail/[slug]/page.tsx
@@ -0,0 +1,31 @@
+import DetailContent from "@/components/details/details-content";
+import Navbar from "@/components/landing-page/navbar";
+
+import Image from "next/image";
+import { Footer } from "react-day-picker";
+
+export default function Slug() {
+  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/app/detail/slug/[slug]/page.tsx b/app/detail/slug/[slug]/page.tsx
new file mode 100644
index 0000000..69af48a
--- /dev/null
+++ b/app/detail/slug/[slug]/page.tsx
@@ -0,0 +1,31 @@
+import DetailContent from "@/components/details/details-content";
+import Navbar from "@/components/landing-page/navbar";
+
+import Image from "next/image";
+import { Footer } from "react-day-picker";
+
+export default function Slug() {
+  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 de2ba5c..724f846 100644
--- a/components/details/details-content.tsx
+++ b/components/details/details-content.tsx
@@ -3,7 +3,11 @@ import Image from "next/image";
 import Author from "../landing-page/author";
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { getArticleById, getListArticle } from "@/service/article";
+import {
+  getArticleById,
+  getArticleBySlug,
+  getListArticle,
+} from "@/service/article";
 import { close, error, loading } from "@/config/swal";
 import { useParams, usePathname } from "next/navigation";
 import { Link2, MailIcon } from "lucide-react";
@@ -21,6 +25,7 @@ type TabKey = "trending" | "comments" | "latest";
 
 type Article = {
   id: number;
+  slug: string;
   title: string;
   description: string;
   htmlDescription: string;
@@ -56,6 +61,7 @@ type Advertise = {
 export default function DetailContent() {
   const params = useParams();
   const id = params?.id;
+  const slug = params?.slug;
   const pathname = usePathname();
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
@@ -293,7 +299,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);
@@ -372,7 +378,7 @@ export default function DetailContent() {
             <span>•</span>
             <span>
               <span>
-                {new Date(articleDetail?.createdAt).toLocaleDateString(
+                {new Date(articleDetail?.publishedAt).toLocaleDateString(
                   "id-ID",
                   {
                     day: "numeric",
diff --git a/components/landing-page/header.tsx b/components/landing-page/header.tsx
index 96ea7fc..2ae28a0 100644
--- a/components/landing-page/header.tsx
+++ b/components/landing-page/header.tsx
@@ -13,6 +13,7 @@ type Article = {
   categoryName: string;
   createdAt: string;
   createdByName: string;
+  slug: string;
   customCreatorName: string;
   thumbnailUrl: string;
   categories: {
@@ -117,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={`/detail/slug/${articles[0]?.slug}`}>
                 <Image
                   src={
                     articles[0]?.files?.[0]?.fileUrl ||
@@ -171,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={`/detail/slug/${article?.slug}`}>
                   <Image
                     src={
                       article.thumbnailUrl ||
diff --git a/service/article.ts b/service/article.ts
index 569cef0..4f338cd 100644
--- a/service/article.ts
+++ b/service/article.ts
@@ -106,6 +106,13 @@ export async function getArticleById(id: any) {
   return await httpGet(`/articles/${id}`, headers);
 }
 
+export async function getArticleBySlug(slug: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(`/articles/slug/${slug}`, headers);
+}
+
 export async function deleteArticle(id: string) {
   const headers = {
     "content-type": "application/json",