diff --git a/components/landing/banner-new.tsx b/components/landing/banner-new.tsx
index 48b96e9..700cb1a 100644
--- a/components/landing/banner-new.tsx
+++ b/components/landing/banner-new.tsx
@@ -198,7 +198,7 @@ export default function BannerHumasNew() {
             <Image
               src={img}
               alt={`humasbanner-${index}`}
-              className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70"
+              className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
             />
           </Link>
         ))}
diff --git a/components/main/detail/new-detail.tsx b/components/main/detail/new-detail.tsx
index e157f9d..57b4cf4 100644
--- a/components/main/detail/new-detail.tsx
+++ b/components/main/detail/new-detail.tsx
@@ -11,6 +11,7 @@ import { ChevronRightIcon, UserIcon } from "@/components/icons";
 import { close, loading } from "@/config/swal";
 import { saveActivity } from "@/service/activity-log";
 import Cookies from "js-cookie";
+import Head from "next/head";
 
 const token = Cookies.get("access_token");
 const uid = Cookies.get("uie");
@@ -19,7 +20,7 @@ export default function NewsDetailPage() {
   const params = useParams();
   const id: any = params?.id;
   const pathname = usePathname();
-  const [detailArticle, setDetailArticle] = useState();
+  const [detailArticle, setDetailArticle] = useState<any>();
   const [articles, setArticles] = useState<any>([]);
 
   useEffect(() => {
@@ -55,33 +56,51 @@ export default function NewsDetailPage() {
     const resActivity = await saveActivity(req, token);
   };
   return (
-    <div className="bg-white dark:bg-stone-900">
-      <div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
-        <div className="flex flex-row gap-4 items-end ">
-          <Link href="/" className=" font-semibold text-lg">
-            Beranda
-          </Link>
-          <ChevronRightIcon />
-          <p className=" text-lg">Berita</p>
-        </div>
-        <div className=" lg:flex lg:justify-around  gap-4 lg:gap-16 w-full">
-          <DetailNews data={detailArticle} listArticle={articles} />
-          <div className="w-auto lg:w-[25%] hidden lg:block">
+    <>
+      {" "}
+      <Head>
+        <title>{detailArticle?.title}</title>
+        <meta property="og:title" content={detailArticle.title} />
+        <meta property="og:description" content={detailArticle.description} />
+        <meta property="og:image" content={detailArticle.thumbnailUrl} />
+        <meta
+          property="og:url"
+          content={`https://kontenhumas.com/news/detail/${detailArticle?.id}-${detailArticle?.slug}`}
+        />
+        <meta property="og:type" content="article" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={detailArticle?.title} />
+        <meta name="twitter:description" content={detailArticle?.description} />
+        <meta name="twitter:image" content={detailArticle?.thumbnailUrl} />
+      </Head>
+      <div className="bg-white dark:bg-stone-900">
+        <div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
+          <div className="flex flex-row gap-4 items-end ">
+            <Link href="/" className=" font-semibold text-lg">
+              Beranda
+            </Link>
+            <ChevronRightIcon />
+            <p className=" text-lg">Berita</p>
+          </div>
+          <div className=" lg:flex lg:justify-around  gap-4 lg:gap-16 w-full">
+            <DetailNews data={detailArticle} listArticle={articles} />
+            <div className="w-auto lg:w-[25%] hidden lg:block">
+              <SidebarDetail />
+            </div>
+          </div>
+
+          <div className="w-full lg:w-[70%] h-auto my-2 md:my-5 lg:my-10 px-0 lg:px-3">
+            <Comment id={id?.split("-")[0]} />
+          </div>
+
+          <div className="bg-gray-50 text-black dark:bg-black dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
+            <RelatedNews />
+          </div>
+          <div className="md:hidden text-black">
             <SidebarDetail />
           </div>
         </div>
-
-        <div className="w-full lg:w-[70%] h-auto my-2 md:my-5 lg:my-10 px-0 lg:px-3">
-          <Comment id={id?.split("-")[0]} />
-        </div>
-
-        <div className="bg-gray-50 text-black dark:bg-black dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
-          <RelatedNews />
-        </div>
-        <div className="md:hidden text-black">
-          <SidebarDetail />
-        </div>
       </div>
-    </div>
+    </>
   );
 }
