diff --git a/.env b/.env
index 5e5e04b..41dfb31 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
 MEDOLS_CLIENT_KEY=bb65b1ad-e954-4a1a-b4d0-74df5bb0b640
-# NEXT_PUBLIC_API_URL=http://localhost:8800
-NEXT_PUBLIC_API_URL=https://qudo.id/api
\ No newline at end of file
+NEXT_PUBLIC_API_URL=http://localhost:8800
+# NEXT_PUBLIC_API_URL=https://qudo.id/api
\ No newline at end of file
diff --git a/app/details/[slug]/page.tsx b/app/details/[slug]/page.tsx
index b198ce7..339b8a3 100644
--- a/app/details/[slug]/page.tsx
+++ b/app/details/[slug]/page.tsx
@@ -11,7 +11,7 @@ import DocumentDetailSection from "@/components/details/document-selections";
 import AudioPlayerSection from "@/components/details/audio-selections";
 import DocumentSidebar from "@/components/details/document-sidebar-details";
 import AudioSidebar from "@/components/details/audio-sidebar-details";
-import FloatingMenuNews from "@/components/landing-page/floating-news";
+import LandingSiteNav from "@/components/landing-page/landing-site-nav";
 import Footer from "@/components/landing-page/footer";
 
 export default function DetailsPage() {
@@ -20,8 +20,13 @@ export default function DetailsPage() {
 
   return (
     <div className="min-h-screen bg-white">
-      <div className="max-w-7xl mx-auto px-6 py-10">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <LandingSiteNav
+        newsHub
+        searchFormAction="/news-services"
+        searchPlaceholder="Cari berita, artikel, atau topik..."
+      />
+      <div className="mx-auto max-w-7xl px-6 pt-28 pb-10 md:pt-36">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           {/* LEFT */}
           <div className="lg:col-span-2">
             {type === "video" && <VideoPlayerSection />}
@@ -37,7 +42,6 @@ export default function DetailsPage() {
             {type === "text" && <DocumentSidebar />}
             {type === "audio" && <AudioSidebar />}
           </div>
-          <FloatingMenuNews />
         </div>
       </div>
       <Footer />
diff --git a/app/news-services/page.tsx b/app/news-services/page.tsx
index cd338a3..9b11eaa 100644
--- a/app/news-services/page.tsx
+++ b/app/news-services/page.tsx
@@ -1,5 +1,5 @@
 import Footer from "@/components/landing-page/footer";
-import FloatingMenuNews from "@/components/landing-page/floating-news";
+import LandingSiteNav from "@/components/landing-page/landing-site-nav";
 import NewsAndServicesHeader from "@/components/landing-page/headers-news-services";
 import ContentLatest from "@/components/landing-page/content-latest";
 import ContentPopular from "@/components/landing-page/content-popular";
@@ -83,7 +83,12 @@ export default async function NewsAndServicesPage({ searchParams }: PageProps) {
 
   return (
     <div className="relative min-h-screen bg-white">
-      <FloatingMenuNews />
+      <LandingSiteNav
+        newsHub
+        searchFormAction="/news-services"
+        searchDefaultValue={q ?? ""}
+        searchPlaceholder="Cari berita, artikel, atau topik..."
+      />
       <Suspense fallback={null}>
         <NewsAndServicesHeader
           featured={featured}
diff --git a/app/news/detail/[idSlug]/page.tsx b/app/news/detail/[idSlug]/page.tsx
index a9a46e5..327996c 100644
--- a/app/news/detail/[idSlug]/page.tsx
+++ b/app/news/detail/[idSlug]/page.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import type { Metadata } from "next";
 import { notFound, redirect } from "next/navigation";
 import Footer from "@/components/landing-page/footer";
-import FloatingMenuNews from "@/components/landing-page/floating-news";
+import LandingSiteNav from "@/components/landing-page/landing-site-nav";
 import ArticleThumbnail from "@/components/landing-page/article-thumbnail";
 import { ARTICLE_TYPE } from "@/constants/article-content-types";
 import { fetchArticlePublic } from "@/lib/articles-public";
@@ -54,8 +54,12 @@ export default async function NewsDetailPage({ params }: Props) {
 
   return (
     <div className="relative min-h-screen bg-white">
-      <FloatingMenuNews />
-      <article className="container mx-auto max-w-4xl px-6 py-16">
+      <LandingSiteNav
+        newsHub
+        searchFormAction="/news-services"
+        searchPlaceholder="Cari berita, artikel, atau topik..."
+      />
+      <article className="container mx-auto max-w-4xl px-6 pt-28 pb-16 md:pt-36">
         <Link
           href="/news-services"
           className="mb-8 inline-block text-sm font-medium text-[#b07c18] hover:underline"
diff --git a/app/page.tsx b/app/page.tsx
index c640c36..8ef069c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,6 @@ import ProductSection from "@/components/landing-page/product";
 import ServiceSection from "@/components/landing-page/service";
 import Technology from "@/components/landing-page/technology";
 import Footer from "@/components/landing-page/footer";
-import FloatingMenu from "@/components/landing-page/floating";
 import PopupNewsBanner from "@/components/landing-page/popup-news";
 import { publicFetch } from "@/lib/public-api";
 import type {
@@ -42,7 +41,6 @@ export default async function Home() {
 
   return (
     <div className="relative min-h-screen bg-white font-[family-name:var(--font-geist-sans)]">
-      <FloatingMenu />
       <PopupNewsBanner popups={popups} />
       <Header hero={hero} />
       <AboutSection about={about} />
diff --git a/components/content-type/article-type-filter-page.tsx b/components/content-type/article-type-filter-page.tsx
index 871e2b7..d601389 100644
--- a/components/content-type/article-type-filter-page.tsx
+++ b/components/content-type/article-type-filter-page.tsx
@@ -7,9 +7,9 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import { useSearchParams } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import { Menu } from "lucide-react";
-import FloatingMenuNews from "@/components/landing-page/floating-news";
+import LandingSiteNav from "@/components/landing-page/landing-site-nav";
 import Footer from "@/components/landing-page/footer";
 import {
   fetchPublishedArticles,
@@ -30,6 +30,7 @@ type Props = {
 };
 
 export default function ArticleTypeFilterPage({ config, sidebar }: Props) {
+  const pathname = usePathname();
   const searchParams = useSearchParams();
   const q = searchParams.get("q")?.trim() ?? "";
   const tag = searchParams.get("tag")?.trim() ?? "";
@@ -76,7 +77,13 @@ export default function ArticleTypeFilterPage({ config, sidebar }: Props) {
 
   return (
     <div className="relative min-h-screen bg-white font-[family-name:var(--font-geist-sans)]">
-      <section className="min-h-screen py-10">
+      <LandingSiteNav
+        newsHub
+        searchFormAction={pathname}
+        searchDefaultValue={q}
+        searchPlaceholder="Cari konten..."
+      />
+      <section className="min-h-screen py-10 pt-24 md:pt-[5.5rem]">
         <div className="container mx-auto px-6">
           <div className="mb-6 flex items-center justify-between lg:hidden">
             <button
@@ -135,7 +142,6 @@ export default function ArticleTypeFilterPage({ config, sidebar }: Props) {
                     <option value="latest">Terbaru</option>
                     <option value="popular">Terpopuler</option>
                   </select>
-                  <FloatingMenuNews />
                 </div>
               </div>
 
diff --git a/components/landing-page/floating-news.tsx b/components/landing-page/floating-news.tsx
deleted file mode 100644
index ea3fecc..0000000
--- a/components/landing-page/floating-news.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  Menu,
-  X,
-  Home,
-  ChevronDown,
-  Video,
-  Music,
-  Image as ImageIcon,
-  FileText,
-} from "lucide-react";
-import Link from "next/link";
-
-export default function FloatingMenuNews() {
-  const [open, setOpen] = useState(false);
-  const [openKonten, setOpenKonten] = useState(false);
-
-  return (
-    <>
-      {/* FLOATING BUTTON */}
-      <button
-        onClick={() => setOpen(true)}
-        className="fixed right-6 top-6 z-[100] flex h-12 w-12 items-center justify-center rounded-md bg-[#966314] text-white shadow-lg"
-      >
-        <Menu />
-      </button>
-
-      {/* OVERLAY */}
-      {open && (
-        <div
-          onClick={() => setOpen(false)}
-          className="fixed inset-0 z-[90] bg-black/40"
-        />
-      )}
-
-      {/* SIDEBAR */}
-      <aside
-        className={`fixed right-0 top-0 z-[110] h-full w-[280px] bg-[#8a5a0c] text-white transition-transform duration-300 ${
-          open ? "translate-x-0" : "translate-x-full"
-        }`}
-      >
-        {/* HEADER */}
-        <div className="flex items-center justify-between border-b border-white/20 p-6">
-          <div className="flex rounded-full bg-white text-sm font-semibold text-[#8a5a0c]">
-            <button className="rounded-full bg-white px-3 py-1">ID</button>
-            <button className="px-3 py-1">EN</button>
-          </div>
-
-          <button onClick={() => setOpen(false)}>
-            <X />
-          </button>
-        </div>
-
-        {/* MENU */}
-        <nav className="flex flex-col text-base font-medium">
-          {/* HOME */}
-          <Link href="/news-services">
-            <div className="flex items-center justify-between border-b border-white/20 px-6 py-5 hover:bg-white/10 transition">
-              <span>Home</span>
-              <Home size={20} />
-            </div>
-          </Link>
-
-          {/* KONTEN */}
-          <div>
-            <button
-              onClick={() => setOpenKonten(!openKonten)}
-              className="flex w-full items-center justify-between border-b border-white/20 px-6 py-5 hover:bg-white/10 transition"
-            >
-              <span>Konten</span>
-              <ChevronDown
-                size={20}
-                className={`transition-transform duration-300 ${
-                  openKonten ? "rotate-180" : ""
-                }`}
-              />
-            </button>
-
-            {/* SUBMENU */}
-            <div
-              className={`overflow-hidden bg-[#a8772a] transition-all duration-300 ${
-                openKonten ? "max-h-60" : "max-h-0"
-              }`}
-            >
-              <Link href={"/video/filter"}>
-                <SubMenuItem icon={<Video size={18} />} label="Audio Visual" />
-              </Link>
-              <Link href={"/audio/filter"}>
-                <SubMenuItem icon={<Music size={18} />} label="Audio" />
-              </Link>
-              <Link href={"/image/filter"}>
-                <SubMenuItem icon={<ImageIcon size={18} />} label="Foto" />
-              </Link>
-              <Link href={"/document/filter"}>
-                <SubMenuItem icon={<FileText size={18} />} label="Teks" />
-              </Link>
-            </div>
-          </div>
-        </nav>
-      </aside>
-    </>
-  );
-}
-
-/* ================= SUBMENU ================= */
-
-function SubMenuItem({
-  icon,
-  label,
-}: {
-  icon: React.ReactNode;
-  label: string;
-}) {
-  return (
-    <div className="flex items-center justify-between px-8 py-4 text-sm hover:bg-white/20 transition cursor-pointer">
-      <span>{label}</span>
-      {icon}
-    </div>
-  );
-}
diff --git a/components/landing-page/footer.tsx b/components/landing-page/footer.tsx
index 6cc8ec2..09aa7cd 100644
--- a/components/landing-page/footer.tsx
+++ b/components/landing-page/footer.tsx
@@ -84,7 +84,7 @@ export default function Footer() {
 
         {/* Divider */}
         <div className="mt-14 border-t border-white/20 pt-6 text-center text-xs opacity-80">
-          © 2024 Copyrights by company. All Rights Reserved. Designed by{" "}
+          © 2026 Copyrights by company. All Rights Reserved. Designed by{" "}
           <span className="font-semibold">Qudoco Team</span>
         </div>
       </div>
diff --git a/components/landing-page/headers-news-services.tsx b/components/landing-page/headers-news-services.tsx
index 89124c8..a1fcce0 100644
--- a/components/landing-page/headers-news-services.tsx
+++ b/components/landing-page/headers-news-services.tsx
@@ -88,7 +88,7 @@ export default function NewsAndServicesHeader({
 
   return (
     <>
-      <section className="relative w-full bg-[#f8f8f8] py-24">
+      <section className="relative w-full bg-[#f8f8f8] pt-32 pb-24 md:pt-40 md:pb-32">
         <div className="container relative mx-auto px-6">
           {slideCount > 0 ? (
             <>
@@ -219,7 +219,7 @@ export default function NewsAndServicesHeader({
       <AnimatePresence>
         {open && slideCount > 0 && modalArticle && (
           <motion.div
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+            className="fixed inset-0 z-[110] flex items-center justify-center bg-black/60 backdrop-blur-sm"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
diff --git a/components/landing-page/headers.tsx b/components/landing-page/headers.tsx
index 49b5c83..36f6492 100644
--- a/components/landing-page/headers.tsx
+++ b/components/landing-page/headers.tsx
@@ -3,7 +3,8 @@
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
-import { Menu, X, Home, Box, Briefcase, Newspaper } from "lucide-react";
+import { X } from "lucide-react";
+import LandingSiteNav from "@/components/landing-page/landing-site-nav";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Textarea } from "../ui/textarea";
@@ -15,7 +16,6 @@ function isExternalUrl(url: string) {
 }
 
 export default function Header({ hero }: { hero?: CmsHeroContent | null }) {
-  const [open, setOpen] = useState(false);
   const [contactOpen, setContactOpen] = useState(false);
 
   // Only main title is required in CMS; optional fields stay empty (no placeholder dashes or fake CTAs).
@@ -33,35 +33,9 @@ export default function Header({ hero }: { hero?: CmsHeroContent | null }) {
 
   return (
     <>
-      <header className="relative w-full bg-white overflow-hidden">
-        {/* SIDEBAR */}
-        <aside
-          className={`fixed right-0 top-0 z-50 h-full w-[280px] bg-[#966314] text-white transition-transform duration-300 ${
-            open ? "translate-x-0" : "translate-x-full"
-          }`}
-        >
-          <div className="flex items-center justify-between border-b border-white/20 p-6">
-            <div className="flex rounded-full bg-white text-sm font-semibold text-[#966314]">
-              <button className="rounded-full bg-white px-3 py-1">ID</button>
-              <button className="px-3 py-1">EN</button>
-            </div>
-
-            <button onClick={() => setOpen(false)}>
-              <X />
-            </button>
-          </div>
-
-          <nav className="flex flex-col gap-6 p-6 text-sm font-medium">
-            <MenuItem icon={<Home size={18} />} label="Home" />
-            <MenuItem icon={<Box size={18} />} label="Product" />
-            <MenuItem icon={<Briefcase size={18} />} label="Services" />
-            <MenuItem
-              icon={<Newspaper size={18} />}
-              label="News and Services"
-            />
-          </nav>
-        </aside>
+      <LandingSiteNav />
 
+      <header className="relative w-full bg-white pt-20 md:pt-[5.5rem]">
         {/* HERO */}
         <div className="container mx-auto flex min-h-[90vh] items-center px-6">
           <div className="flex-1 space-y-6">
@@ -131,15 +105,6 @@ export default function Header({ hero }: { hero?: CmsHeroContent | null }) {
   );
 }
 
-function MenuItem({ icon, label }: { icon: React.ReactNode; label: string }) {
-  return (
-    <div className="flex cursor-pointer items-center justify-between border-b border-white/20 pb-3">
-      <span>{label}</span>
-      {icon}
-    </div>
-  );
-}
-
 function ContactDialog({ onClose }: { onClose: () => void }) {
   const [contactMethod, setContactMethod] = useState("office");
 
diff --git a/components/landing-page/landing-site-nav.tsx b/components/landing-page/landing-site-nav.tsx
new file mode 100644
index 0000000..07136a7
--- /dev/null
+++ b/components/landing-page/landing-site-nav.tsx
@@ -0,0 +1,298 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import {
+  Menu,
+  X,
+  Home,
+  Box,
+  Briefcase,
+  Newspaper,
+  Search,
+  Globe,
+  LogIn,
+  ChevronDown,
+  Video,
+  Music,
+  Image as ImageIcon,
+  FileText,
+} from "lucide-react";
+
+const LANDING_SECTION_IDS = new Set(["products", "services"]);
+
+function scrollToSectionId(id: string) {
+  document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+export type LandingSiteNavProps = {
+  /** GET form target for navbar search (e.g. `/news-services`). If omitted, search is display-only. */
+  searchFormAction?: string;
+  searchDefaultValue?: string;
+  searchPlaceholder?: string;
+  /** News hub pages: “Home” → `/news-services`, plus Konten submenu in drawer */
+  newsHub?: boolean;
+};
+
+export default function LandingSiteNav({
+  searchFormAction,
+  searchDefaultValue = "",
+  searchPlaceholder = "Search",
+  newsHub = false,
+}: LandingSiteNavProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [openKonten, setOpenKonten] = useState(false);
+
+  useEffect(() => {
+    if (pathname !== "/") return;
+    const syncFromHash = () => {
+      const raw = window.location.hash.replace(/^#/, "");
+      if (!LANDING_SECTION_IDS.has(raw)) return;
+      const el = document.getElementById(raw);
+      if (!el) return;
+      requestAnimationFrame(() =>
+        el.scrollIntoView({ behavior: "smooth", block: "start" }),
+      );
+    };
+    const t = window.setTimeout(syncFromHash, 0);
+    window.addEventListener("hashchange", syncFromHash);
+    return () => {
+      window.clearTimeout(t);
+      window.removeEventListener("hashchange", syncFromHash);
+    };
+  }, [pathname]);
+
+  const homePath = newsHub ? "/news-services" : "/";
+
+  const goHome = () => {
+    setOpen(false);
+    if (pathname === homePath) {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    } else {
+      router.push(homePath);
+    }
+  };
+
+  const searchField = (
+    <div className="relative min-w-0 max-w-[min(100%,11rem)] flex-1 sm:max-w-none sm:flex-initial md:w-56 lg:w-64">
+      <Search
+        className="pointer-events-none absolute left-3.5 top-1/2 size-[18px] -translate-y-1/2 text-gray-400"
+        aria-hidden
+      />
+      <input
+        type="search"
+        name="q"
+        defaultValue={searchDefaultValue}
+        placeholder={searchPlaceholder}
+        className="w-full rounded-full border border-[#966314]/55 bg-white py-2 pl-10 pr-4 text-sm text-gray-900 placeholder:text-gray-400 outline-none focus-visible:ring-2 focus-visible:ring-[#966314]/30"
+      />
+    </div>
+  );
+
+  return (
+    <>
+      <nav
+        className="fixed top-0 left-0 right-0 z-30 w-full border-b border-gray-100 bg-white/95 shadow-sm backdrop-blur-sm supports-[backdrop-filter]:bg-white/80"
+        aria-label="Main"
+      >
+        <div className="container mx-auto flex items-center justify-between gap-4 px-4 py-4 md:px-6">
+          <Link href="/" className="shrink-0">
+            <Image
+              src="/image/qudo1.png"
+              alt="Qudoco"
+              width={140}
+              height={56}
+              className="h-12 w-auto md:h-14"
+              priority
+            />
+          </Link>
+
+          <div className="flex min-w-0 flex-1 items-center justify-end gap-3 md:gap-5">
+            {searchFormAction ? (
+              <form
+                method="get"
+                action={searchFormAction}
+                className="contents"
+              >
+                {searchField}
+              </form>
+            ) : (
+              searchField
+            )}
+
+            <button
+              type="button"
+              className="hidden items-center gap-2 text-sm text-gray-800 sm:flex"
+            >
+              <Globe className="size-[18px] text-gray-600" strokeWidth={1.75} />
+              English
+            </button>
+
+            <span
+              className="hidden h-5 w-px shrink-0 bg-gray-300 sm:block"
+              aria-hidden
+            />
+
+            <button
+              type="button"
+              onClick={() => setOpen(true)}
+              className="flex items-center gap-2 text-sm font-semibold text-gray-900"
+            >
+              <Menu className="size-5 text-gray-900" strokeWidth={2} />
+              Menu
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      {open ? (
+        <button
+          type="button"
+          aria-label="Close menu"
+          className="fixed inset-0 z-[90] bg-black/40"
+          onClick={() => setOpen(false)}
+        />
+      ) : null}
+
+      <aside
+        className={`fixed top-0 right-0 z-[100] h-full w-[280px] bg-[#966314] text-white transition-transform duration-300 ${
+          open ? "translate-x-0" : "translate-x-full"
+        }`}
+      >
+        <div className="flex items-center justify-between border-b border-white/20 p-6">
+          <div className="flex rounded-full bg-white text-sm font-semibold text-[#966314]">
+            <button type="button" className="rounded-full bg-white px-3 py-1">
+              ID
+            </button>
+            <button type="button" className="px-3 py-1">
+              EN
+            </button>
+          </div>
+
+          <button type="button" onClick={() => setOpen(false)}>
+            <X />
+          </button>
+        </div>
+
+        <nav className="flex flex-col gap-6 overflow-y-auto p-6 text-sm font-medium">
+          <button
+            type="button"
+            className="w-full border-0 bg-transparent p-0 text-left text-inherit"
+            onClick={goHome}
+          >
+            <MenuItem icon={<Home size={18} />} label="Home" />
+          </button>
+
+          {newsHub ? (
+            <div className="-mt-2 border-b border-white/20 pb-2">
+              <button
+                type="button"
+                className="flex w-full items-center justify-between border-0 bg-transparent py-1 text-left text-inherit"
+                onClick={() => setOpenKonten((v) => !v)}
+              >
+                <span>Konten</span>
+                <ChevronDown
+                  size={18}
+                  className={`transition-transform ${openKonten ? "rotate-180" : ""}`}
+                />
+              </button>
+              <div
+                className={`mt-2 space-y-1 overflow-hidden pl-2 transition-all ${
+                  openKonten ? "max-h-60 opacity-100" : "max-h-0 opacity-0"
+                }`}
+              >
+                <Link
+                  href="/video/filter"
+                  className="block rounded-md px-2 py-2 hover:bg-white/10"
+                  onClick={() => setOpen(false)}
+                >
+                  <span className="flex items-center justify-between text-sm">
+                    Audio Visual <Video size={16} />
+                  </span>
+                </Link>
+                <Link
+                  href="/audio/filter"
+                  className="block rounded-md px-2 py-2 hover:bg-white/10"
+                  onClick={() => setOpen(false)}
+                >
+                  <span className="flex items-center justify-between text-sm">
+                    Audio <Music size={16} />
+                  </span>
+                </Link>
+                <Link
+                  href="/image/filter"
+                  className="block rounded-md px-2 py-2 hover:bg-white/10"
+                  onClick={() => setOpen(false)}
+                >
+                  <span className="flex items-center justify-between text-sm">
+                    Foto <ImageIcon size={16} />
+                  </span>
+                </Link>
+                <Link
+                  href="/document/filter"
+                  className="block rounded-md px-2 py-2 hover:bg-white/10"
+                  onClick={() => setOpen(false)}
+                >
+                  <span className="flex items-center justify-between text-sm">
+                    Teks <FileText size={16} />
+                  </span>
+                </Link>
+              </div>
+            </div>
+          ) : null}
+
+          <button
+            type="button"
+            className="w-full border-0 bg-transparent p-0 text-left text-inherit"
+            onClick={() => {
+              setOpen(false);
+              if (pathname === "/") {
+                scrollToSectionId("products");
+              } else {
+                router.push("/#products");
+              }
+            }}
+          >
+            <MenuItem icon={<Box size={18} />} label="Product" />
+          </button>
+          <button
+            type="button"
+            className="w-full border-0 bg-transparent p-0 text-left text-inherit"
+            onClick={() => {
+              setOpen(false);
+              if (pathname === "/") {
+                scrollToSectionId("services");
+              } else {
+                router.push("/#services");
+              }
+            }}
+          >
+            <MenuItem icon={<Briefcase size={18} />} label="Services" />
+          </button>
+          <Link href="/news-services?highlight=1" onClick={() => setOpen(false)}>
+            <MenuItem
+              icon={<Newspaper size={18} />}
+              label="News and Services"
+            />
+          </Link>
+          <Link href="/auth" onClick={() => setOpen(false)}>
+            <MenuItem icon={<LogIn size={18} />} label="Login" />
+          </Link>
+        </nav>
+      </aside>
+    </>
+  );
+}
+
+function MenuItem({ icon, label }: { icon: React.ReactNode; label: string }) {
+  return (
+    <div className="flex cursor-pointer items-center justify-between border-b border-white/20 pb-3">
+      <span>{label}</span>
+      {icon}
+    </div>
+  );
+}
diff --git a/components/landing-page/product.tsx b/components/landing-page/product.tsx
index f61abaa..d4b805e 100644
--- a/components/landing-page/product.tsx
+++ b/components/landing-page/product.tsx
@@ -144,7 +144,10 @@ export default function ProductSection({
 
   if (list.length === 0) {
     return (
-      <section className="bg-white py-24 md:py-32">
+      <section
+        id="products"
+        className="scroll-mt-24 bg-white py-24 md:scroll-mt-[5.5rem] md:py-32"
+      >
         <div className="container mx-auto px-6">
           <div className="mb-16 text-center md:mb-20">
             <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">
@@ -175,7 +178,10 @@ export default function ProductSection({
   }
 
   return (
-    <section className="bg-white py-24 md:py-32">
+    <section
+      id="products"
+      className="scroll-mt-24 bg-white py-24 md:scroll-mt-[5.5rem] md:py-32"
+    >
       <div className="container mx-auto px-6">
         <div className="mb-16 text-center md:mb-20">
           <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">
diff --git a/components/landing-page/service.tsx b/components/landing-page/service.tsx
index 903adc2..1bd46f6 100644
--- a/components/landing-page/service.tsx
+++ b/components/landing-page/service.tsx
@@ -118,7 +118,10 @@ export default function ServiceSection({
 
   if (list.length === 0) {
     return (
-      <section className="bg-white py-24 md:py-32">
+      <section
+        id="services"
+        className="scroll-mt-24 bg-white py-24 md:scroll-mt-[5.5rem] md:py-32"
+      >
         <div className="container mx-auto px-6">
           <div className="mb-16 text-center md:mb-20">
             <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">
@@ -144,7 +147,10 @@ export default function ServiceSection({
   }
 
   return (
-    <section className="bg-white py-24 md:py-32">
+    <section
+      id="services"
+      className="scroll-mt-24 bg-white py-24 md:scroll-mt-[5.5rem] md:py-32"
+    >
       <div className="container mx-auto px-6">
         <div className="mb-16 text-center md:mb-20">
           <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">
diff --git a/components/main/media-library.tsx b/components/main/media-library.tsx
index 5d2d3a2..8043ecb 100644
--- a/components/main/media-library.tsx
+++ b/components/main/media-library.tsx
@@ -4,101 +4,295 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { Upload, Search, Filter, ImageIcon, Film, Music } from "lucide-react";
-import { useState } from "react";
-
-const stats = [
-  { title: "Total Files", value: 24 },
-  { title: "Images", value: 18 },
-  { title: "Videos", value: 4 },
-  { title: "Audio", value: 2 },
-];
-
-const files = [
-  {
-    name: "hero-banner.jpg",
-    type: "image",
-    size: "2.4 MB",
-    date: "2024-01-20",
-  },
-  {
-    name: "product-showcase.jpg",
-    type: "image",
-    size: "2.4 MB",
-    date: "2024-01-20",
-  },
-  {
-    name: "company-logo.svg",
-    type: "image",
-    size: "124 KB",
-    date: "2024-01-20",
-  },
-  {
-    name: "promo-video.mp4",
-    type: "video",
-    size: "2.4 MB",
-    date: "2024-01-20",
-  },
-];
+import {
+  Upload,
+  Search,
+  ImageIcon,
+  Film,
+  Music,
+  FileText,
+  Link2,
+  Trash2,
+  Loader2,
+  Copy,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  deleteMediaLibraryItem,
+  getMediaLibrary,
+  parseMediaLibraryList,
+  registerMediaLibrary,
+  type MediaLibraryItem,
+  uploadMediaLibraryFile,
+} from "@/service/media-library";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
 
 const getFileIcon = (type: string) => {
   switch (type) {
     case "video":
-      return <Film className="w-8 h-8 text-purple-500" />;
+      return <Film className="h-8 w-8 text-purple-500" />;
     case "audio":
-      return <Music className="w-8 h-8 text-green-500" />;
+      return <Music className="h-8 w-8 text-green-500" />;
+    case "document":
+      return <FileText className="h-8 w-8 text-amber-600" />;
     default:
-      return <ImageIcon className="w-8 h-8 text-blue-500" />;
+      return <ImageIcon className="h-8 w-8 text-blue-500" />;
   }
 };
 
+function looksLikeImageUrl(url: string): boolean {
+  const path = url.split("?")[0].split("#")[0].toLowerCase();
+  return /\.(jpe?g|png|gif|webp|svg|bmp|avif)$/i.test(path);
+}
+
+function isDisplayableImage(file: MediaLibraryItem): boolean {
+  return file.file_category === "image" || looksLikeImageUrl(file.public_url);
+}
+
+function LibraryMediaPreview({ file }: { file: MediaLibraryItem }) {
+  const [broken, setBroken] = useState(false);
+  const showImg = isDisplayableImage(file) && !broken && Boolean(file.public_url?.trim());
+
+  if (showImg) {
+    return (
+      // eslint-disable-next-line @next/next/no-img-element -- dynamic API/MinIO URLs
+      <img
+        src={file.public_url}
+        alt={file.original_filename || "Preview"}
+        className="h-full w-full object-cover"
+        loading="lazy"
+        decoding="async"
+        onError={() => setBroken(true)}
+      />
+    );
+  }
+
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-slate-100">
+      {getFileIcon(file.file_category)}
+    </div>
+  );
+}
+
 const getBadgeStyle = (type: string) => {
   switch (type) {
     case "video":
       return "bg-purple-100 text-purple-600";
     case "audio":
       return "bg-green-100 text-green-600";
+    case "document":
+      return "bg-amber-100 text-amber-800";
     default:
       return "bg-blue-100 text-blue-600";
   }
 };
 
+function formatBytes(n: number | null | undefined): string {
+  if (n == null || Number.isNaN(n)) return "—";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function formatDate(iso: string): string {
+  try {
+    return new Date(iso).toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+const SOURCE_OPTIONS = [
+  { value: "all", label: "Semua sumber" },
+  { value: "article_file", label: "Artikel" },
+  { value: "cms", label: "Content Website" },
+  { value: "upload", label: "Upload langsung" },
+];
+
 export default function MediaLibrary() {
   const [search, setSearch] = useState("");
+  const [sourceFilter, setSourceFilter] = useState("all");
+  const [page, setPage] = useState(1);
+  const [items, setItems] = useState<MediaLibraryItem[]>([]);
+  const [totalPage, setTotalPage] = useState(1);
+  const [totalCount, setTotalCount] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [registerUrl, setRegisterUrl] = useState("");
+  const [registerLabel, setRegisterLabel] = useState("");
+  const [registering, setRegistering] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    const res = await getMediaLibrary({
+      page,
+      limit: 24,
+      q: search.trim() || undefined,
+      source_type: sourceFilter === "all" ? undefined : sourceFilter,
+    });
+    const { items: rows, meta } = parseMediaLibraryList(res);
+    setItems(rows);
+    setTotalPage(Math.max(1, meta?.totalPage ?? 1));
+    if (typeof meta?.count === "number") setTotalCount(meta.count);
+    setLoading(false);
+  }, [page, search, sourceFilter]);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- fetch on deps
+    void load();
+  }, [load]);
+
+  const stats = useMemo(() => {
+    const images = items.filter((i) => i.file_category === "image").length;
+    const videos = items.filter((i) => i.file_category === "video").length;
+    const audio = items.filter((i) => i.file_category === "audio").length;
+    const docs = items.filter((i) => i.file_category === "document").length;
+    return [
+      { title: "Total (filter)", value: totalCount ?? "—" },
+      { title: "Gambar (halaman)", value: images },
+      { title: "Video (halaman)", value: videos },
+      { title: "Audio/Dokumen (halaman)", value: audio + docs },
+    ];
+  }, [items, totalCount]);
+
+  const copyLink = async (url: string) => {
+    try {
+      await navigator.clipboard.writeText(url);
+    } catch {
+      window.prompt("Salin URL:", url);
+    }
+  };
+
+  const onSelectFiles = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files?.length) return;
+    setUploading(true);
+    for (let i = 0; i < files.length; i++) {
+      const fd = new FormData();
+      fd.append("file", files[i]);
+      await uploadMediaLibraryFile(fd);
+    }
+    setUploading(false);
+    e.target.value = "";
+    setPage(1);
+    await load();
+  };
+
+  const onRegisterManual = async () => {
+    const url = registerUrl.trim();
+    if (!url) return;
+    setRegistering(true);
+    await registerMediaLibrary({
+      public_url: url,
+      source_type: "upload",
+      source_label: registerLabel.trim() || "manual_register",
+    });
+    setRegisterUrl("");
+    setRegisterLabel("");
+    setRegistering(false);
+    setPage(1);
+    await load();
+  };
+
+  const onDelete = async (id: number) => {
+    if (!confirm("Hapus entri dari Media Library? (file di storage tidak dihapus)")) return;
+    await deleteMediaLibraryItem(id);
+    await load();
+  };
 
   return (
     <div className="space-y-8">
-      {/* ================= HEADER ================= */}
       <div>
         <h1 className="text-2xl font-semibold">Media Library</h1>
         <p className="text-sm text-muted-foreground">
-          Upload and manage images, videos, and documents
+          Katalog URL media dari artikel, Content Website, dan upload admin. File fisik
+          tetap satu; yang disimpan di sini adalah tautan publik untuk pencarian dan salin
+          cepat.
         </p>
       </div>
 
-      {/* ================= UPLOAD AREA ================= */}
-      <Card className="rounded-2xl overflow-hidden p-0">
+      <Card className="overflow-hidden rounded-2xl p-0">
         <CardContent className="p-0">
-          <div className="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-10 text-center space-y-4 rounded-2xl">
-            <Upload className="w-10 h-10 mx-auto" />
-            <h2 className="text-lg font-semibold">Upload Media Files</h2>
-            <p className="text-sm text-blue-100">
-              Drag and drop files here, or click to browse
+          <div className="space-y-4 bg-gradient-to-r from-[#966314] to-[#b07c18] p-8 text-center text-white">
+            <Upload className="mx-auto h-10 w-10" />
+            <h2 className="text-lg font-semibold">Upload ke Media Library</h2>
+            <p className="text-sm text-white/90">
+              File disimpan di MinIO (prefix cms/media-library) dan URL viewer otomatis
+              didaftarkan di tabel ini.
             </p>
-
-            <Button className="bg-white text-blue-600 hover:bg-blue-100">
-              Select Files
+            <input
+              ref={fileRef}
+              type="file"
+              className="hidden"
+              accept=".jpg,.jpeg,.png,.gif,.webp,.svg,.mp4,.webm,.mov,.mp3,.wav,.ogg,.m4a,.pdf,.doc,.docx,.txt,.csv"
+              multiple
+              onChange={(e) => void onSelectFiles(e)}
+            />
+            <Button
+              type="button"
+              className="bg-white text-[#966314] hover:bg-white/90"
+              disabled={uploading}
+              onClick={() => fileRef.current?.click()}
+            >
+              {uploading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Mengunggah…
+                </>
+              ) : (
+                "Pilih file"
+              )}
             </Button>
-
-            <p className="text-xs text-blue-200">
-              Supports: JPG, PNG, SVG, PDF, MP4 (Max 50MB)
+            <p className="text-xs text-white/80">
+              Gambar, video, audio, PDF/DOC/TXT (satu file per request batch di atas)
             </p>
           </div>
         </CardContent>
       </Card>
 
-      {/* ================= STATS ================= */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      <Card className="rounded-xl border-dashed p-4">
+        <div className="flex flex-col gap-3 md:flex-row md:items-end">
+          <div className="flex-1 space-y-2">
+            <Label>Daftarkan URL yang sudah ada</Label>
+            <Input
+              placeholder="https://… (mis. dari artikel atau CMS)"
+              value={registerUrl}
+              onChange={(e) => setRegisterUrl(e.target.value)}
+            />
+          </div>
+          <div className="w-full space-y-2 md:w-56">
+            <Label>Label (opsional)</Label>
+            <Input
+              placeholder="mis. campaign_q1"
+              value={registerLabel}
+              onChange={(e) => setRegisterLabel(e.target.value)}
+            />
+          </div>
+          <Button
+            type="button"
+            variant="secondary"
+            disabled={registering || !registerUrl.trim()}
+            onClick={() => void onRegisterManual()}
+          >
+            {registering ? <Loader2 className="h-4 w-4 animate-spin" /> : <Link2 className="h-4 w-4" />}
+            <span className="ml-2">Simpan ke library</span>
+          </Button>
+        </div>
+      </Card>
+
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
         {stats.map((item, i) => (
           <Card key={i} className="rounded-xl shadow-sm">
             <CardContent className="p-5">
@@ -109,48 +303,126 @@ export default function MediaLibrary() {
         ))}
       </div>
 
-      {/* ================= SEARCH + FILTER ================= */}
-      <div className="flex flex-col md:flex-row gap-3 md:items-center md:justify-between">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
         <div className="relative w-full md:max-w-md">
-          <Search className="absolute left-3 top-3 w-4 h-4 text-muted-foreground" />
+          <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
           <Input
-            placeholder="Search media files..."
+            placeholder="Cari nama file atau URL…"
             className="pl-9"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                setPage(1);
+                void load();
+              }
+            }}
           />
         </div>
-
-        <Button variant="outline" className="gap-2">
-          <Filter className="w-4 h-4" />
-          Filters
-        </Button>
+        <div className="flex flex-wrap items-center gap-2">
+          <Select value={sourceFilter} onValueChange={(v) => { setSourceFilter(v); setPage(1); }}>
+            <SelectTrigger className="w-[200px]">
+              <SelectValue placeholder="Sumber" />
+            </SelectTrigger>
+            <SelectContent>
+              {SOURCE_OPTIONS.map((o) => (
+                <SelectItem key={o.value} value={o.value}>
+                  {o.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Button variant="outline" type="button" onClick={() => void load()}>
+            Refresh
+          </Button>
+        </div>
       </div>
 
-      {/* ================= FILE GRID ================= */}
-      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
-        {files.map((file, index) => (
-          <Card
-            key={index}
-            className="rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition"
-          >
-            <div className="bg-slate-100 h-32 flex items-center justify-center">
-              {getFileIcon(file.type)}
-            </div>
-
-            <CardContent className="p-4 space-y-2">
-              <p className="text-sm font-medium truncate">{file.name}</p>
-
-              <div className="flex items-center justify-between text-xs text-muted-foreground">
-                <Badge className={getBadgeStyle(file.type)}>{file.type}</Badge>
-                <span>{file.size}</span>
+      {loading ? (
+        <div className="flex justify-center py-16 text-muted-foreground">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      ) : items.length === 0 ? (
+        <p className="py-12 text-center text-muted-foreground">Belum ada media.</p>
+      ) : (
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {items.map((file) => (
+            <Card
+              key={file.id}
+              className="overflow-hidden rounded-2xl shadow-sm transition hover:shadow-md"
+            >
+              <div className="relative h-36 w-full overflow-hidden bg-slate-100">
+                <LibraryMediaPreview file={file} />
               </div>
 
-              <p className="text-xs text-muted-foreground">{file.date}</p>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+              <CardContent className="space-y-2 p-4">
+                <p className="truncate text-sm font-medium" title={file.original_filename ?? ""}>
+                  {file.original_filename || "—"}
+                </p>
+
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <Badge className={getBadgeStyle(file.file_category)}>
+                    {file.file_category}
+                  </Badge>
+                  <span>{formatBytes(file.size_bytes ?? undefined)}</span>
+                </div>
+
+                <p className="text-xs text-muted-foreground">
+                  {file.source_type}
+                  {file.source_label ? ` · ${file.source_label}` : ""}
+                </p>
+                <p className="text-xs text-muted-foreground">{formatDate(file.created_at)}</p>
+
+                <div className="flex flex-wrap gap-2 pt-1">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="h-8 flex-1"
+                    onClick={() => void copyLink(file.public_url)}
+                  >
+                    <Copy className="mr-1 h-3.5 w-3.5" />
+                    Salin URL
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 text-destructive"
+                    onClick={() => void onDelete(file.id)}
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {totalPage > 1 ? (
+        <div className="flex justify-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page <= 1}
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+          >
+            Sebelumnya
+          </Button>
+          <span className="flex items-center px-2 text-sm text-muted-foreground">
+            Halaman {page} / {totalPage}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= totalPage}
+            onClick={() => setPage((p) => p + 1)}
+          >
+            Berikutnya
+          </Button>
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/service/media-library.ts b/service/media-library.ts
new file mode 100644
index 0000000..78fbfc9
--- /dev/null
+++ b/service/media-library.ts
@@ -0,0 +1,78 @@
+import {
+  httpDeleteInterceptor,
+  httpGetInterceptor,
+  httpPostFormDataInterceptor,
+  httpPostInterceptor,
+} from "./http-config/http-interceptor-services";
+export type MediaLibraryItem = {
+  id: number;
+  public_url: string;
+  object_key?: string | null;
+  original_filename?: string | null;
+  file_category: string;
+  size_bytes?: number | null;
+  source_type: string;
+  source_label?: string | null;
+  article_file_id?: number | null;
+  created_by_id: number;
+  created_at: string;
+  updated_at: string;
+};
+
+export type MediaLibraryListMeta = {
+  limit?: number;
+  page?: number;
+  count?: number;
+  totalPage?: number;
+  nextPage?: number;
+  previousPage?: number;
+};
+
+export async function getMediaLibrary(params: {
+  page?: number;
+  limit?: number;
+  q?: string;
+  source_type?: string;
+}) {
+  const sp = new URLSearchParams();
+  if (params.page != null) sp.set("page", String(params.page));
+  if (params.limit != null) sp.set("limit", String(params.limit));
+  if (params.q?.trim()) sp.set("q", params.q.trim());
+  if (params.source_type?.trim()) sp.set("source_type", params.source_type.trim());
+  const q = sp.toString();
+  return await httpGetInterceptor(`/media-library${q ? `?${q}` : ""}`);
+}
+
+export function parseMediaLibraryList(res: unknown): {
+  items: MediaLibraryItem[];
+  meta: MediaLibraryListMeta | null;
+} {
+  if (!res || typeof res !== "object") return { items: [], meta: null };
+  const r = res as { error?: boolean; data?: { data?: unknown; meta?: MediaLibraryListMeta } };
+  if (r.error || !r.data) return { items: [], meta: null };
+  const raw = r.data.data;
+  const items = Array.isArray(raw) ? (raw as MediaLibraryItem[]) : [];
+  return { items, meta: r.data.meta ?? null };
+}
+
+/** Multipart: field `file` */
+export async function uploadMediaLibraryFile(formData: FormData) {
+  return await httpPostFormDataInterceptor("/media-library/upload", formData);
+}
+
+export async function registerMediaLibrary(body: {
+  public_url: string;
+  object_key?: string;
+  original_filename?: string;
+  file_category?: string;
+  size_bytes?: number;
+  source_type: string;
+  source_label?: string;
+  article_file_id?: number;
+}) {
+  return await httpPostInterceptor("/media-library/register", body);
+}
+
+export async function deleteMediaLibraryItem(id: number) {
+  return await httpDeleteInterceptor(`/media-library/${id}`);
+}