diff --git a/app/news/detail/[id]/page.tsx b/app/news/detail/[id]/page.tsx
index 73a53f0..d64a9e1 100644
--- a/app/news/detail/[id]/page.tsx
+++ b/app/news/detail/[id]/page.tsx
@@ -8,7 +8,10 @@ type Props = {
 };
 
 export async function generateMetadata({ params }: any): Promise<Metadata> {
-  const res = await getArticleById(params?.id?.split("-")[0]);
+  // const params = await props.params;
+  const { id } = await params;
+
+  const res = await getArticleById(id?.split("-")[0]);
   const article = res?.data?.data;
   return {
     title: article.title,
@@ -22,7 +25,10 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
 }
 
 export default async function NewsPage({ params }: any) {
-  const articleId = params?.id?.split("-")[0];
+  // const params = await props.params;
+  const { id } = await params;
+
+  const articleId = id?.split("-")[0];
   const res = await getArticleById(articleId);
   const article = res?.data?.data;
   return (
diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index 3cb6676..bb4ad60 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -371,7 +371,7 @@ export default function HeaderNews() {
                       key={list?.id}
                       className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
                     >
-                      <Link href={`news/detail/${list?.id}`}>
+                      <Link href={`news/detail/${list?.id}-${list.slug}`}>
                         <p className="text-left font-semibold">{list?.title}</p>
                       </Link>
                       <div className="flex flex-row gap-1">
diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index 65912bb..9aa2e8a 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -37,7 +37,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
   const params = useParams();
   const id: any = params?.id;
   const shareText = "Humas Polri";
-  const [filteredFiles, setFilteredFiles] = useState<any>([]);
+  // const [filteredFiles, setFilteredFiles] = useState<any>([]);
 
   const [uid, setUid] = useState<any>("");
   const [token, setToken] = useState<any>("");
@@ -166,9 +166,9 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         </p>
       </div>
       <div className="flex justify-center my-2 lg:my-5">
-        {filteredFiles ? (
-          filteredFiles[0]?.file_name.split(".")[1].includes("doc") ||
-          filteredFiles[0]?.file_name.split(".")[1].includes("pdf") ? (
+        {data.files.length > 0 ? (
+          data.files[0]?.file_name.split(".")[1].includes("doc") ||
+          data.files[0]?.file_name.split(".")[1].includes("pdf") ? (
             <Image
               classNames={{
                 wrapper: "!w-full !max-w-full",
@@ -179,23 +179,14 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
               className="object-cover w-[100%] rounded-md"
             />
           ) : (
-            filteredFiles?.length > 0 && (
-              // <Image
-              //   // classNames={{
-              //   //   wrapper: "!w-full !max-w-full",
-              //   //   img: "!w-full",
-              //   // }}
-              //   alt="Main Image"
-              //   src={filteredFiles[imageNow]?.file_url}
-              //   className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
-              // />
-              <img
+            data.files?.length > 0 && (
+              <Image
                 // classNames={{
                 //   wrapper: "!w-full !max-w-full",
                 //   img: "!w-full",
                 // }}
                 alt="Main Image"
-                src={filteredFiles[imageNow]?.file_url}
+                src={data.files[imageNow]?.file_url}
                 className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
               />
             )
@@ -204,10 +195,10 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           ""
         )}
       </div>
-      {filteredFiles?.length > 0 &&
-        (filteredFiles[0].file_name.split(".")[1].includes("doc") ||
-        filteredFiles[0].file_name.split(".")[1].includes("pdf") ? (
-          filteredFiles?.map((file: any, index: number) => (
+      {data.files?.length > 0 &&
+        (data.files[0].file_name.split(".")[1].includes("doc") ||
+        data.files[0].file_name.split(".")[1].includes("pdf") ? (
+          data.files?.map((file: any, index: number) => (
             <Accordion key={file?.id} variant="splitted" className="px-0">
               <AccordionItem
                 key={file?.id}
@@ -260,7 +251,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           ))
         ) : (
           <div className="flex flex-row gap-3 flex-nowrap overflow-x-auto">
-            {filteredFiles?.map((file: any, index: number) => (
+            {data.files?.map((file: any, index: number) => (
               <a
                 key={file.id}
                 onClick={() => setImageNow(index)}