diff --git a/public/style/globals.css b/public/style/globals.css
index c3e9533..ba8debf 100644
--- a/public/style/globals.css
+++ b/public/style/globals.css
@@ -8,6 +8,7 @@
   --color-primary-800: #2852a3;
   --color-primary-600: #337add;
   --color-primary-100: #deedfb;
+  --color-primary-surface: #f0f7fe;
   --color-border: #e2e8f0;
   --color-subtle: #f1f5f9;
 }
@@ -20,6 +21,10 @@ body {
   font-family: var(--font-open-sauce-one);
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 ul {
   list-style-type: disc;
   list-style-position: inside;
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index f783db0..a857e0b 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -13,6 +13,8 @@ import Corner2 from "@/image/portofolio/corner-why-us-2.svg";
 import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
 import Image from "next/image";
 import ClientImage from "./client-image";
+import Link from "next/link";
+import ContactUs from "@src/components/contact-us";
 
 export default function PortFolio() {
   const ourService = [
@@ -50,7 +52,7 @@ export default function PortFolio() {
 
   return (
     <div className="flex flex-col">
-      <div className="relative">
+      <div className="relative scroll-mt-19.5 md:scroll-mt-18.5" id="home">
         <Image src={BannerMobile} alt="banner" className="w-full md:hidden" />
         <Image src={BannerDesktop} alt="banner" className="w-full hidden md:block" />
         <div className="absolute top-0 left-0 md:left-20 md:top-1/2 md:-translate-y-1/2">
@@ -58,17 +60,12 @@ export default function PortFolio() {
             <div className="py-2 px-3 backdrop-blur-[19px] bg-[#FFFFFF1F] font-medium w-fit">Part of Serba Mulia Group</div>
             <p className="font-semibold text-[40px] md:text-5xl">Build Fast, Scale Smart</p>
             <p className="md:text-lg">Software & AI Solutions for Modern Business</p>
-            <div className="primary-button pl-3">
-              Contact Us
-              <div className="p-2 bg-secondary-400">
-                <ArrowUpRightIcon className="size-5 text-white" />
-              </div>
-            </div>
+            <ContactUs />
           </div>
         </div>
       </div>
 
-      <div className="flex flex-col md:flex-row md:px-20 md:py-16">
+      <div className="flex flex-col md:flex-row md:px-20 md:py-16 scroll-mt-19.5 md:scroll-mt-18.5" id="about-us">
         <div className="flex flex-col gap-4 py-6 px-4 md:w-1/2 md:pr-20 md:gap-6 md:px-0 md:py-0">
           <div className="flex flex-col gap-1">
             <p className="text-secondary-400 text-[13px] md:text-sm">ABOUT US</p>
@@ -95,7 +92,7 @@ export default function PortFolio() {
         <Image src={AboutUsImage} alt="about-us" className="w-full md:w-1/2 object-contain" />
       </div>
 
-      <div className="flex flex-col gap-4 px-4 py-6 md:px-20 md:py-16 md:gap-6">
+      <div className="flex flex-col gap-4 px-4 py-6 md:px-20 md:py-16 md:gap-6 scroll-mt-19.5 md:scroll-mt-18.5" id="services">
         <div className="flex flex-col gap-1">
           <p className="text-[13px] md:text-sm text-secondary-400">SERVICES</p>
           <p className="text-[32px] md:text-[40px] text-title font-semibold">Our Services</p>
@@ -113,7 +110,7 @@ export default function PortFolio() {
         </div>
       </div>
 
-      <div className="flex flex-col px-4 py-6 gap-4 bg-linear-to-b from-subtle to-white md:py-16 md:px-20 md:gap-10">
+      <div className="flex flex-col px-4 py-6 gap-4 bg-linear-to-b from-subtle to-white md:py-16 md:px-20 md:gap-10 scroll-mt-19.5 md:scroll-mt-18.5" id="portfolio">
         <div className="flex flex-col gap-4 md:gap-6">
           <div className="flex flex-col gap-1">
             <p className="text-[13px] text-secondary-400 md:text-sm">PORTFOLIO</p>
@@ -148,7 +145,7 @@ export default function PortFolio() {
         </div>
       </div>
 
-      <div className="relative">
+      <div className="relative scroll-mt-19.5 md:scroll-mt-18.5" id="process">
         <div className="flex flex-col md:py-16 md:px-20 md:grid md:grid-cols-2 md:gap-6">
           <div className="flex flex-col gap-4 px-4 py-6 z-10 md:gap-6">
             <div className="flex flex-col gap-1">
diff --git a/src/components/contact-us.tsx b/src/components/contact-us.tsx
new file mode 100644
index 0000000..53eff06
--- /dev/null
+++ b/src/components/contact-us.tsx
@@ -0,0 +1,13 @@
+"use client";
+import { ArrowUpRightIcon } from "@phosphor-icons/react";
+
+export default function ContactUs() {
+  return (
+    <div className="primary-button pl-3" onClick={() => window.open("https://mail.google.com/mail/?view=cm&fs=1&to=connect@muliainformasi.co.id", "_blank")}>
+      Contact Us
+      <div className="p-2 bg-secondary-400">
+        <ArrowUpRightIcon className="size-5 text-white" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index ba77ee8..6dcf24d 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -3,10 +3,12 @@ import Corner2 from "@/image/footer/corner-footer-2.svg";
 import LogoWhite from "@/image/logo-white.png";
 import { ArrowUpRightIcon } from "@phosphor-icons/react/dist/ssr";
 import Image from "next/image";
+import Link from "next/link";
+import ContactUs from "./contact-us";
 
 export default function Footer() {
   return (
-    <div className="bg-primary-800 w-full relative">
+    <div className="bg-primary-800 w-full relative scroll-mt-19.5 md:scroll-mt-18.5" id="kontak">
       <div className="flex flex-col gap-4 px-4 py-6 z-10 text-white md:py-16 md:px-20 md:grid md:grid-cols-2 md:gap-6">
         <div className="flex flex-col gap-4 md:justify-between">
           <div className="flex flex-col gap-3">
@@ -22,12 +24,7 @@ export default function Footer() {
               <p className="text-[32px] md:text-[40px] font-semibold">Let’s Collaborate</p>
               <p className="md:text-lg">Let’s build something that works and grows.</p>
             </div>
-            <div className="primary-button pl-3">
-              Contact Us
-              <div className="p-2 bg-secondary-400">
-                <ArrowUpRightIcon className="size-5 text-white" />
-              </div>
-            </div>
+            <ContactUs />
           </div>
 
           <p className="text-center z-10 pt-4 border-t border-primary-600 flex w-full md:hidden">Mulia Informasi Teknologi @2026. All Right Reserved</p>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 432abab..08450f0 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,29 +1,53 @@
 "use client";
 import Image from "next/image";
 import Logo from "@/image/logo.png";
-import { ListIcon } from "@phosphor-icons/react/dist/ssr";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { ListIcon, XIcon } from "@phosphor-icons/react";
 
 export default function Navbar() {
-  const pathname = usePathname();
+  const [selectedMenu, setSelectedMenu] = useState<string>("#home");
+  const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false);
 
   const menu = [
-    { label: "About Us", url: "/" },
-    { label: "Services", url: "/" },
-    { label: "Portfolio", url: "/portfolio" },
-    { label: "Process", url: "/" },
-    { label: "Kontak", url: "/" },
+    { label: "About Us", url: "#about-us" },
+    { label: "Services", url: "#services" },
+    { label: "Portfolio", url: "#portfolio" },
+    { label: "Process", url: "#process" },
+    { label: "Kontak", url: "#kontak" },
   ];
 
   return (
     <div className="bg-white px-4 h-19.5 md:h-18.5 flex items-center w-full justify-between md:py-5.5 md:px-16 sticky top-0 left-0 right-0 z-50">
-      <Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
-      <ListIcon className="size-8 text-secondary-400 cursor-pointer md:hidden" />
+      <Link href={"#home"}>
+        <Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
+      </Link>
+      <div className="size-8 cursor-pointer text-secondary-400 md:hidden" onClick={() => setIsOpenMenu(!isOpenMenu)}>
+        {isOpenMenu ? <XIcon className="size-8" /> : <ListIcon className="size-8" />}
+      </div>
+      {isOpenMenu && (
+        <>
+          <div className="absolute w-full h-dvh left-0 bg-black top-18.5 -z-10 opacity-50" />
+          <div className="bg-white absolute top-18.5 w-full flex flex-col left-0">
+            {menu?.map((item) => (
+              <Link
+                href={item?.url}
+                key={item?.label}
+                onClick={() => {
+                  setSelectedMenu(item?.url);
+                  setIsOpenMenu(!isOpenMenu);
+                }}
+              >
+                <div className={`cursor-pointer px-4 py-4.75 ${selectedMenu === item?.url ? "bg-primary-surface font-semibold text-primary-800" : "text-title font-medium"}`}>{item?.label}</div>
+              </Link>
+            ))}
+          </div>
+        </>
+      )}
       <div className="md:flex gap-7.5 hidden">
         {menu?.map((item) => (
-          <Link href={item?.url} key={item?.label}>
-            <div className={`font-medium ${pathname === item?.url ? "text-primary-800" : "text-title"}`}>{item?.label}</div>
+          <Link href={item?.url} key={item?.label} onClick={() => setSelectedMenu(item?.url)}>
+            <div className={`font-medium ${selectedMenu === item?.url ? "text-primary-800" : "text-title"}`}>{item?.label}</div>
           </Link>
         ))}
       </div>