diff --git a/app/news/detail/[id]/page.tsx b/app/news/detail/[id]/page.tsx
index e21d5e9..eabe05f 100644
--- a/app/news/detail/[id]/page.tsx
+++ b/app/news/detail/[id]/page.tsx
@@ -1,29 +1,29 @@
 import { HumasLayout } from "@/components/layout/humas-layout";
 import DetailPage from "@/components/main/detail/new-detail";
-import { getArticleById } from "@/services/article";
+import { getArticleById, getArticleByIdHumas } from "@/services/article";
 import { Metadata } from "next";
 
 type Props = {
   params: { id: string };
 };
 
-// export async function generateMetadata({ params }: any): Promise<Metadata> {
-//   const res = await getArticleById(params.id?.split("-")[0]);
-//   const article = res?.data?.data;
-//   return {
-//     title: article.title,
-//     description: article.description,
-//     openGraph: {
-//       title: article.title,
-//       description: article.description,
-//       images: [`${article.thumbnailUrl}`],
-//     },
-//   };
-// }
+export async function generateMetadata({ params }: any): Promise<Metadata> {
+  const res = await getArticleByIdHumas(params.id?.split("-")[0]);
+  const article = res?.data?.data;
+  return {
+    title: article.title,
+    description: article.description,
+    openGraph: {
+      title: article.title,
+      description: article.description,
+      images: [`${article.thumbnailUrl}`],
+    },
+  };
+}
 
 export default async function NewsPage({ params }: any) {
   const articleId = params.id?.split("-")[0];
-  const res = await getArticleById(articleId);
+  const res = await getArticleByIdHumas(articleId);
   const article = res?.data?.data;
   return (
     <HumasLayout>
diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index 1eff6fa..e3721d6 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -69,7 +69,6 @@ export default function HeaderNews() {
       page: 1,
       search: "",
       limit: "10",
-      sortBy: "view_count",
       sort: "desc",
       category: "1906",
       isPublish: true,
diff --git a/components/page/sidebar-detail.tsx b/components/page/sidebar-detail.tsx
index 6a2530d..595e6ed 100644
--- a/components/page/sidebar-detail.tsx
+++ b/components/page/sidebar-detail.tsx
@@ -13,17 +13,33 @@ import { convertDateFormat, textEllipsis } from "@/utils/global";
 import Image from "next/image";
 
 export default function SidebarDetail() {
+  const [articleMabes, setArticleMabes] = useState<any>([]);
   const [article, setArticle] = useState<any>([]);
 
   useEffect(() => {
-    async function getArticle() {
-      const req = { page: 1, search: "", limit: "10", isPublish: true };
-
-      const response = await getListArticle(req);
-      setArticle(response?.data?.data);
-    }
     getArticle();
+    getArticleMabes();
   }, []);
+
+  async function getArticle() {
+    const req = { page: 1, search: "", limit: "10", isPublish: true };
+
+    const response = await getListArticle(req);
+    setArticle(response?.data?.data);
+  }
+
+  async function getArticleMabes() {
+    const req = {
+      page: 1,
+      search: "",
+      limit: "10",
+      isPublish: true,
+      category: "1906",
+    };
+
+    const response = await getListArticle(req);
+    setArticleMabes(response?.data?.data);
+  }
   return (
     <div className="mt-2 space-y-5">
       <div className="font-semibold flex flex-col items-center py-3 rounded-lg">
@@ -48,7 +64,7 @@ export default function SidebarDetail() {
             className="mySwiper"
             slidesPerView={1}
           >
-            {article?.map((newsItem: any) => (
+            {articleMabes?.map((newsItem: any) => (
               <SwiperSlide key={newsItem.id}>
                 <div className=" h-[320px] flex flex-col gap-2 bg-gray-100 dark:bg-black p-4 rounded-lg">
                   <Image
diff --git a/services/article.ts b/services/article.ts
index 558e1cd..16d48dd 100644
--- a/services/article.ts
+++ b/services/article.ts
@@ -7,6 +7,7 @@ import {
 } from "./http-config/axios-base-service";
 import Cookies from "js-cookie";
 import { stat } from "fs";
+import axiosInterceptorInstanceHumas from "./http-config/konten-humas-base-service";
 
 const token = Cookies.get("access_token");
 export async function getListArticle(props: PaginationRequest) {
@@ -184,3 +185,33 @@ export async function updateIsBannerArticle(id: number, status: boolean) {
   const pathUrl = `/articles/banner/${id}?isBanner=${status}`;
   return await httpPut(pathUrl, headers);
 }
+
+export async function httpGetHumas(pathUrl: any, headers: any) {
+  const response = await axiosInterceptorInstanceHumas
+    .get(pathUrl, { headers })
+    .catch(function (error: any) {
+      console.log(error);
+      return error.response;
+    });
+  console.log("Response base svc : ", response);
+  if (response?.status == 200 || response?.status == 201) {
+    return {
+      error: false,
+      message: "success",
+      data: response?.data,
+    };
+  } else {
+    return {
+      error: true,
+      message: response?.data?.message || response?.data || null,
+      data: null,
+    };
+  }
+}
+
+export async function getArticleByIdHumas(id: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGetHumas(`/articles/${id}`, headers);
+}
diff --git a/services/http-config/konten-humas-base-service.ts b/services/http-config/konten-humas-base-service.ts
new file mode 100644
index 0000000..8aa0079
--- /dev/null
+++ b/services/http-config/konten-humas-base-service.ts
@@ -0,0 +1,13 @@
+import axios from "axios";
+
+// const baseURL = "http://10.200.202.141:8802";
+const baseURL = "https://kontenhumas.com/api";
+
+const axiosInterceptorInstanceHumas = axios.create({
+  baseURL,
+  headers: {
+    "content-type": "application/json",
+  },
+});
+
+export default axiosInterceptorInstanceHumas;