diff --git a/package-lock.json b/package-lock.json
index 186c6c0..a0667a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
         "@phosphor-icons/react": "^2.1.10",
         "next": "16.2.6",
         "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "react-fast-marquee": "^1.6.5"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -5457,6 +5458,16 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-fast-marquee": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz",
+      "integrity": "sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16.8.0 || ^18.0.0",
+        "react-dom": ">= 16.8.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index ab8ec40..ae7e893 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "@phosphor-icons/react": "^2.1.10",
     "next": "16.2.6",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "react-fast-marquee": "^1.6.5"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
diff --git a/public/image/portofolio/corner-footer-1.svg b/public/image/footer/corner-footer-1.svg
similarity index 100%
rename from public/image/portofolio/corner-footer-1.svg
rename to public/image/footer/corner-footer-1.svg
diff --git a/public/image/portofolio/corner-footer-2.svg b/public/image/footer/corner-footer-2.svg
similarity index 100%
rename from public/image/portofolio/corner-footer-2.svg
rename to public/image/footer/corner-footer-2.svg
diff --git a/public/image/portofolio/serba-mas.png b/public/image/portofolio/serba-mas.png
new file mode 100644
index 0000000..8219e07
Binary files /dev/null and b/public/image/portofolio/serba-mas.png differ
diff --git a/public/style/globals.css b/public/style/globals.css
index a6647b8..c3e9533 100644
--- a/public/style/globals.css
+++ b/public/style/globals.css
@@ -3,7 +3,13 @@
 @theme {
   --color-secondary-400: #f7a01f;
   --color-title: #020618;
+  --color-subtitle: #45556c;
+  --color-body: #62748e;
   --color-primary-800: #2852a3;
+  --color-primary-600: #337add;
+  --color-primary-100: #deedfb;
+  --color-border: #e2e8f0;
+  --color-subtle: #f1f5f9;
 }
 
 :root {
@@ -14,6 +20,11 @@ body {
   font-family: var(--font-open-sauce-one);
 }
 
+ul {
+  list-style-type: disc;
+  list-style-position: inside;
+}
+
 .primary-button {
   @apply bg-white p-2 flex gap-3 items-center justify-center text-title font-semibold w-fit cursor-pointer;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bb823e8..8172215 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { Metadata } from "next";
 import "@/style/globals.css";
 import Navbar from "@src/components/navbar";
 import localFont from "next/font/local";
+import Footer from "@src/components/footer";
 
 export const metadata: Metadata = {
   title: "Mulia Informasi Teknologi",
@@ -92,9 +93,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className={openSauceOne.variable}>
-      <body className="min-h-full w-full flex flex-col">
+      <body className="min-h-screen w-full flex flex-col">
         <Navbar />
         <div>{children}</div>
+        <Footer />
       </body>
     </html>
   );
diff --git a/src/app/portfolio/client-image.tsx b/src/app/portfolio/client-image.tsx
new file mode 100644
index 0000000..881065f
--- /dev/null
+++ b/src/app/portfolio/client-image.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import SmartIcon from "@/image/portofolio/smart.png";
+import GadaiMuliaIcon from "@/image/portofolio/gadai-mulia.png";
+import SerbaMasIcon from "@/image/portofolio/serba-mas.png";
+import PajakMasIcon from "@/image/portofolio/pajak-mas.png";
+import CashluxIcon from "@/image/portofolio/cashlux.png";
+import GadaiMasIcon from "@/image/portofolio/gadai-mas.png";
+import DanainIcon from "@/image/portofolio/danain.png";
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import Marquee from "react-fast-marquee";
+
+export default function ClientImage() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.offsetWidth);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, []);
+
+  const clients = [
+    <Image src={SmartIcon} key={"client-icon"} alt="client-icon" className="w-auto h-15" />,
+    <Image src={GadaiMuliaIcon} key={"client-icon"} alt="client-icon" className="w-auto h-7.5" />,
+    <Image src={SerbaMasIcon} key={"client-icon"} alt="client-icon" className="w-auto h-17.5" />,
+    <Image src={PajakMasIcon} key={"client-icon"} alt="client-icon" className="w-auto h-12.5" />,
+    <Image src={CashluxIcon} key={"client-icon"} alt="client-icon" className="w-auto h-7.5" />,
+    <Image src={GadaiMasIcon} key={"client-icon"} alt="client-icon" className="w-auto h-12.5" />,
+    <Image src={DanainIcon} key={"client-icon"} alt="client-icon" className="w-auto h-10" />,
+  ];
+
+  return (
+    <div className="w-full flex justify-center" ref={containerRef}>
+      {containerWidth < 1280 ? (
+        <Marquee>
+          {clients?.map((item, index) => (
+            <div className="w-45 h-25 border-border border flex justify-center items-center" key={index}>
+              {item}
+            </div>
+          ))}
+        </Marquee>
+      ) : (
+        <div className="flex">
+          {clients?.map((item, index) => (
+            <div className="w-45 h-25 border-border border flex justify-center items-center" key={index}>
+              {item}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 215cd4f..f783db0 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -1,9 +1,53 @@
 import BannerDesktop from "@/image/portofolio/banner-desktop.png";
 import BannerMobile from "@/image/portofolio/banner-mobile.png";
+import AboutUsImage from "@/image/portofolio/about-us.png";
+import SoftwareIcon from "@/image/portofolio/software-icon.svg";
+import AiIcon from "@/image/portofolio/ai-icon.svg";
+import SaasIcon from "@/image/portofolio/sas-icon.svg";
+import UiuxIcon from "@/image/portofolio/ui-ux-icon.svg";
+import Highlight1 from "@/image/portofolio/highlight-1.png";
+import Highlight2 from "@/image/portofolio/highlight-2.png";
+import Highlight3 from "@/image/portofolio/highlight-3.png";
+import Corner1 from "@/image/portofolio/corner-why-us-1.svg";
+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";
 
 export default function PortFolio() {
+  const ourService = [
+    { icon: SoftwareIcon, title: "Software Development", caption: "Kami mengembangkan sistem dan aplikasi yang disesuaikan dengan kebutuhan spesifik bisnis" },
+    { icon: AiIcon, title: "AI Development", caption: "Kami membantu bisnis memanfaatkan AI untuk meningkatkan efisiensi dan pengambilan keputusan." },
+    { icon: SaasIcon, title: "SaaS Development", caption: "Kami membangun produk digital berbasis langganan yang siap digunakan oleh banyak pengguna." },
+    { icon: UiuxIcon, title: "UIUX Design", caption: "Kami merancang user interface yang intuitif dan efektif untuk meningkatkan usability dan konversi." },
+  ];
+
+  const highlights = [
+    { icon: Highlight1, title: "Core Pawn System", caption: "Digitalisasi sistem pergadaian untuk meningkatkan efisiensi operasional dan akurasi transaksi.", list: ["Promas", "PajakMas", "Sopiga Pro"] },
+    { icon: Highlight2, title: "Mobile Application", caption: "Aplikasi mobile yang dirancang untuk memudahkan pengguna mengakses layanan dengan lebih cepat, praktis, dan nyaman.", list: ["Danain", "SmartFin", "GadaiMAS"] },
+    {
+      icon: Highlight3,
+      title: "AI Development",
+      caption: "Solusi berbasis AI untuk verifikasi identitas, pemrosesan dokumen, dan monitoring operasional.",
+      list: ["Face Verification", "OCR (Document Extraction),", "CCTV Monitoring (AI Detection)"],
+    },
+  ];
+
+  const process = [
+    "Discovery untuk memahami kebutuhan",
+    "Planning & Design untuk merancang solusi",
+    "Development untuk membangun sistem",
+    "Testing untuk memastikan kualitas",
+    "Deployment untuk implementasi",
+    "Continuous Improvement untuk pengembangan lanjutan",
+  ];
+
+  const whyUs = [
+    { title: "Experienced Team", caption: "Tim kami memiliki pengalaman dalam pengembangan software dan AI, dengan pemahaman terhadap berbagai kebutuhan bisnis dan industri." },
+    { title: "Integrated Solutions", caption: "Kami menghadirkan solusi yang terintegrasi dalam satu ekosistem, sehingga memudahkan pengelolaan dan pengembangan sistem secara lebih efisien." },
+    { title: "Cost-Efficient Approach", caption: "Pendekatan kami fleksibel dan disesuaikan dengan kebutuhan bisnis, sehingga Anda hanya berinvestasi pada solusi yang benar-benar dibutuhkan." },
+  ];
+
   return (
     <div className="flex flex-col">
       <div className="relative">
@@ -23,6 +67,126 @@ export default function PortFolio() {
           </div>
         </div>
       </div>
+
+      <div className="flex flex-col md:flex-row md:px-20 md:py-16">
+        <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>
+            <p className="text-title font-semibold text-[32px] md:text-[40px]">Who We Are</p>
+          </div>
+          <div className="text-body text-sm md:text-base">
+            <p>
+              Setiap bisnis punya tantangan yang berbeda. Namun di era digital, satu hal menjadi sama: kebutuhan untuk bergerak lebih cepat, lebih efisien, dan lebih terukur. Kami hadir untuk membantu menjawab kebutuhan tersebut melalui
+              solusi software dan AI yang relevan dan dapat dikembangkan. Mulia Informasi Teknologi (MIT) adalah perusahaan yang berfokus pada pengembangan software dan solusi berbasis Artificial Intelligence.
+            </p>
+            <p className="mt-4 md:mt-6">Kami bekerja dengan berbagai bisnis untuk:</p>
+            <ul>
+              <li>Mengembangkan sistem digital</li>
+              <li>Meningkatkan efisiensi operasional</li>
+              <li>Menciptakan produk yang scalable</li>
+            </ul>
+          </div>
+          <p className="text-body text-sm md:text-base">
+            MIT juga merupakan bagian dari Serba Mulia Group, sebuah strategic holding company yang menaungi berbagai unit bisnis di sektor otomotif, jasa keuangan, retail, dan teknologi yang didirikan sejak 1970 dan saat ini Serba Mulia
+            Group telah berkembang dengan jangkauan operasional di berbagai wilayah di Indonesia, serta ekspansi ke pasar internasional seperti Malaysia dan Singapura. Sebagai bagian dari ekosistem ini, MIT memiliki perspektif yang lebih
+            praktis dalam memahami kebutuhan bisnis, tidak hanya dari sisi teknologi tetapi juga dari pengalaman nyata di berbagai industri.
+          </p>
+        </div>
+        <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-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>
+        </div>
+        <div className="flex flex-col border-t border-border md:grid md:grid-cols-4 md:border-t-0 md:border-l">
+          {ourService?.map((item) => (
+            <div className="p-6 border-b border-x border-border flex flex-col gap-4 md:border-y md:border-x-0 md:border-r" key={item?.title}>
+              <Image src={item?.icon} alt="icon-service" className="size-16" />
+              <div className="flex flex-col gap-2">
+                <p className="text-title text-xl font-bold">{item?.title}</p>
+                <p className="text-body">{item?.caption}</p>
+              </div>
+            </div>
+          ))}
+        </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 gap-4 md:gap-6">
+          <div className="flex flex-col gap-1">
+            <p className="text-[13px] text-secondary-400 md:text-sm">PORTFOLIO</p>
+            <p className="text-[32px] text-title font-semibold md:text-[40px]">Case Highlights</p>
+          </div>
+          <div className="flex flex-col gap-4 md:grid md:grid-cols-3">
+            {highlights?.map((item) => (
+              <div key={item?.title} className="p-3 bg-white border border-border">
+                <Image src={item?.icon} className="w-full" alt="highlight-icon" />
+                <div className="flex flex-col gap-2 p-3">
+                  <p className="text-title font-bold text-xl">{item?.title}</p>
+                  <p className="text-body">{item?.caption}</p>
+                  {item?.list?.length > 0 && (
+                    <ul className="text-subtitle">
+                      {item?.list?.map((item_list) => (
+                        <li key={item_list}>{item_list}</li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="w-full h-px bg-border" />
+        <div className="flex flex-col gap-4 md:gap-6">
+          <div className="px-4 gap-1 flex flex-col text-center">
+            <p className="text-secondary-400 text-[13px] md:text-sm">OUR CLIENTS</p>
+            <p className="text-title text-[32px] font-semibold md:text-[40px]">Driving Impact with Our Clients</p>
+          </div>
+          <ClientImage />
+        </div>
+      </div>
+
+      <div className="relative">
+        <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">
+              <p className="text-[13px] text-secondary-400 md:text-sm">PROCESS</p>
+              <p className="font-semibold text-title text-[32px] md:text-[40px]">How We Work</p>
+            </div>
+            <p className="text-sm text-body md:text-base">Kami bekerja dengan pendekatan yang terstruktur dan kolaboratif. Kami tidak hanya fokus pada delivery, tetapi juga keberlanjutan solusi.</p>
+            <div className="flex flex-col gap-3 md:gap-4">
+              <p className="text-title font-semibold md:text-lg">Setiap proyek melalui tahapan:</p>
+              {process?.map((item, index) => (
+                <div className="flex gap-3" key={index}>
+                  <div className="rounded-xs bg-primary-100 size-6 backdrop-blur-xs font-semibold text-sm text-primary-800 justify-center items-center flex">{index + 1}</div>
+                  <p className="text-sm text-subtitle flex self-center md:text-base">{item}</p>
+                </div>
+              ))}
+            </div>
+            <p className="text-sm md:text-base text-body">Kami tidak hanya fokus pada delivery, tetapi juga keberlanjutan solusi.</p>
+          </div>
+          <div className="flex flex-col gap-4 px-4 py-6 z-10 md:gap-6">
+            <div className="flex flex-col gap-1">
+              <p className="text-[13px] md:text-sm text-secondary-400">WHY US</p>
+              <p className="font-semibold text-title text-[32px] md:text-[40px]">Why MIT</p>
+            </div>
+            <p className="text-sm text-body md:text-base">Kami bekerja dengan pendekatan yang terstruktur dan kolaboratif.</p>
+            <div className="flex flex-col gap-4">
+              {whyUs?.map((item) => (
+                <div className="p-3 md:p-4 flex flex-col gap-2 border border-border" key={item?.title}>
+                  <p className="text-title font-semibold md:text-lg">{item?.title}</p>
+                  <p className="text-sm text-body md:text-base">{item?.caption}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <Image src={Corner1} alt="corner-1" className="w-20 md:w-30 absolute top-0 right-0 z-0" />
+        <Image src={Corner2} alt="corner-2" className="w-20 md:w-30 absolute bottom-0 left-0 z-0" />
+      </div>
     </div>
   );
 }
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000..ba77ee8
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,41 @@
+import Corner1 from "@/image/footer/corner-footer-1.svg";
+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";
+
+export default function Footer() {
+  return (
+    <div className="bg-primary-800 w-full relative">
+      <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">
+            <Image src={LogoWhite} className="h-7.5 w-fit" alt="logo-white" />
+            <p className="text-sm md:text-lg">The Kensington Office Tower Lantai 2 Ruang B2, Jl. Boulevard Raya No. 1, Kelapa Gading Timur, Kelapa Gading, Jakarta Utara 14240</p>
+          </div>
+          <div className="w-full pt-4 border-t border-primary-600 text-lg">Mulia Informasi Teknologi @2026. All Right Reserved</div>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-4 md:gap-6">
+            <div className="flex flex-col gap-2 md:gap-6">
+              <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>
+          </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>
+        </div>
+      </div>
+
+      <Image src={Corner1} className="w-20 absolute z-0 top-0 right-0" alt="corner-1" />
+      <Image src={Corner2} className="w-20 absolute z-0 bottom-0 left-0" alt="corner-1" />
+    </div>
+  );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 05d36ff..432abab 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -17,7 +17,7 @@ export default function Navbar() {
   ];
 
   return (
-    <div className="bg-white px-4 py-6 flex items-center w-full justify-between md:py-5.5 md:px-16">
+    <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" />
       <div className="md:flex gap-7.5 hidden">
