diff --git a/src/components/BPACard.tsx b/src/components/BPACard.tsx
index ec38f4d..07f3b50 100644
--- a/src/components/BPACard.tsx
+++ b/src/components/BPACard.tsx
@@ -11,7 +11,10 @@ const BPACard = ({ imgUrl, name, position, hideName }: memberBPA) => {
   return (
     <div className="w-[38%] sm:w-[18%] min-w-[200px] max-w-[200px] h-auto text-center drop-shadow-xl border-4 rounded-xl flex flex-col bg-slate-50 border-slate-50 hover:scale-110 duration-150 ease-in hover:shadow-lg hover:font-semibold flex-grow-0 aspect-[3/4]">
       <Image
-        src={imgUrl || "https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"}
+        src={
+          imgUrl ||
+          "https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
+        }
         alt={name}
         width={300}
         height={700}
@@ -21,7 +24,9 @@ const BPACard = ({ imgUrl, name, position, hideName }: memberBPA) => {
       {!hideName && (
         <div className="flex justify-center items-center flex-grow">
           <p className="border-t-2 border-slate-300 px-2 py-3">{name}</p>
-          {position && <p className="border-t-2 border-slate-300 px-2 py-3">{position}</p>}
+          {position && (
+            <p className="border-t-2 border-slate-300 px-2 py-3">{position}</p>
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/BPAbutton.tsx b/src/components/BPAbutton.tsx
index 6a5cb36..88ebdb6 100644
--- a/src/components/BPAbutton.tsx
+++ b/src/components/BPAbutton.tsx
@@ -7,10 +7,15 @@ const BPAbutton = ({ data }: { data: bpaType }) => {
   return (
     <Link
       href={`/tentang-bpa/#${getSlug(data.name)}`}
-      className="border-2 rounded-full border-[#101351] md:border-slate-200 h-fit px-2 py-0.5 hover:bg-slate-50/50 ease-in duration-75">
+      className="border-2 rounded-full border-[#101351] md:border-slate-200 h-fit px-2 py-0.5 hover:bg-slate-50/50 ease-in duration-75"
+    >
       <p className="button">
         <span className="text-[#101351] md:text-white">{data.name}</span>{" "}
-        {data.members.length > 1 && <span className="font-bold text-[#79B5EE]">{data.members.length}</span>}
+        {data.members.length > 1 && (
+          <span className="font-bold text-[#79B5EE]">
+            {data.members.length}
+          </span>
+        )}
       </p>
     </Link>
   );
diff --git a/src/components/BPAinfo.tsx b/src/components/BPAinfo.tsx
index 8176def..63aff27 100644
--- a/src/components/BPAinfo.tsx
+++ b/src/components/BPAinfo.tsx
@@ -26,20 +26,33 @@ const BPAInfo = ({ data }: { data: bpaType }) => {
   };
 
   return (
-    <div className="w-full pb-8 py-2" id={getSlug(data.name)} data-aos="fade-right">
+    <div
+      className="w-full pb-8 py-2"
+      id={getSlug(data.name)}
+      data-aos="fade-right"
+    >
       <div className="flex w-full border-b-2 gap-2 items-center">
         <h2 className="font-bold text-xl">{data.name}</h2>
-        <span className="text-xl font-bold text-blue-600 cursor-pointer hover:text-blue-500" onClick={handleCopyLink}>
+        <span
+          className="text-xl font-bold text-blue-600 cursor-pointer hover:text-blue-500"
+          onClick={handleCopyLink}
+        >
           #
         </span>
-        {copySuccess && <span className="text-blue-500 ml-2 text-sm">Copied!</span>}
+        {copySuccess && (
+          <span className="text-blue-500 ml-2 text-sm">Copied!</span>
+        )}
       </div>
       {data.members.length > 1 ? (
         <>
           <p className="py-2 font-light">{data.jobDesc}</p>
           <div className="flex gap-4 flex-wrap w-full justify-center sm:justify-start">
             {data.members.map((member, idx) => (
-              <BPACard key={`${idx}-${member}-${data.name}`} name={member.name} imgUrl={member.imgUrl} />
+              <BPACard
+                key={`${idx}-${member}-${data.name}`}
+                name={member.name}
+                imgUrl={member.imgUrl}
+              />
             ))}
           </div>
         </>
@@ -47,7 +60,12 @@ const BPAInfo = ({ data }: { data: bpaType }) => {
         <div className="flex flex-col lg:flex-row gap-2 w-full py-4">
           <div className="flex gap-4 flex-wrap w-full sm:w-fit flex-grow-0 justify-center sm:justify-start">
             {data.members.map((member, idx) => (
-              <BPACard key={`${idx}-${member}-${data.name}`} name={member.name} imgUrl={member.imgUrl} hideName={true} />
+              <BPACard
+                key={`${idx}-${member}-${data.name}`}
+                name={member.name}
+                imgUrl={member.imgUrl}
+                hideName={true}
+              />
             ))}
           </div>
           <p className="py-2 font-light">
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..3c0f243
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,57 @@
+import Link from "next/link";
+import React from "react";
+import { IoIosStarOutline } from "react-icons/io";
+import { FaInstagram } from "react-icons/fa";
+import { FaYoutube } from "react-icons/fa6";
+import { FaTiktok } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import { SiLinktree } from "react-icons/si";
+
+const Footer = () => {
+  return (
+    <footer className="w-full h-fit px-4 md:px-8 bg-[#151655] text-white">
+      <div className="w-full h-full grow-0 flex flex-col mx-auto py-2">
+        <div className="border-b-2 border-white flex flex-col md:flex-row justify-between py-2">
+          <div className="flex gap-2 items-center">
+            <div className="w-10 h-10 bg-white rounded-full" />
+            <div className="flex flex-col justify-center">
+              <p>Syntax</p>
+              <p>Code Create Connect</p>
+            </div>
+          </div>
+          <div className="flex gap-1 md:gap-12 pl-2 py-4 md:py-0 flex-col md:flex-row items-start md:items-center">
+            <Link href="/">About Us</Link>
+            <Link href="/">Support Us</Link>
+            <Link href="/">Contact Us</Link>
+            <Link href="/">Media Kit</Link>
+          </div>
+          <div className="flex flex-col justify-center pb-2 md:pb-0 items-start md:items-end">
+            <p>Like What You&apos;re Seeing?</p>
+            <p>Give us feedback!</p>
+            <div className="flex">
+              <IoIosStarOutline />
+              <IoIosStarOutline />
+              <IoIosStarOutline />
+              <IoIosStarOutline />
+              <IoIosStarOutline />
+            </div>
+          </div>
+        </div>
+        <div className="w-full flex justify-between gap-4">
+          <div className="py-2">
+            <p>&copy; 2024 BPA Academics STEI-K 2023. All rights reserved.</p>
+          </div>
+          <div className="py-2 gap-4 flex flex-row items-center">
+            <FaInstagram />
+            <FaYoutube />
+            <FaTiktok />
+            <FaXTwitter />
+            <SiLinktree />
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 016442b..cb8fda3 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -8,13 +8,26 @@ import { GoHome, GoCopilot } from "react-icons/go";
 import { IoMdBook } from "react-icons/io";
 import { RiGroupLine } from "react-icons/ri";
 
-const NavListDesktop = ({ href, routerPathname, lable }: { href: string; routerPathname: string; lable: string }) => (
+const NavListDesktop = ({
+  href,
+  routerPathname,
+  lable,
+}: {
+  href: string;
+  routerPathname: string;
+  lable: string;
+}) => (
   <Link href={href} className="hidden md:block h-full">
     <p
       className={
-        routerPathname === href ? "border-b-2 border-gray-400" : "hover:brightness-110 hover:border-b-2 border-gray-400"
-      }>
-      <span className="text-[16px] lg:text-[18px] font-outfit tracking-wider">{lable}</span>
+        routerPathname === href
+          ? "border-b-2 border-gray-400"
+          : "hover:brightness-110 hover:border-b-2 border-gray-400"
+      }
+    >
+      <span className="text-[16px] lg:text-[18px] font-outfit tracking-wider">
+        {lable}
+      </span>
     </p>
   </Link>
 );
@@ -68,12 +81,20 @@ const Navbar = () => {
     <>
       <header
         className={`sticky left-0 top-0 z-50 h-[5.2rem] flex w-full items-center px-0 duration-500 ease-in-out ${scrollDirection ? "translate-y-0" : "-translate-y-24"} ${
-          router.pathname === "/" && !scrolledOneThirdvw ? "bg-none" : "bg-[#101351]"
-        }`}>
+          router.pathname === "/" && !scrolledOneThirdvw
+            ? "bg-none"
+            : "bg-[#101351]"
+        }`}
+      >
         <div className="w-full px-2 mx-auto">
           <div className="relative flex items-center justify-between">
-            <Link href="/" className="w-fit h-[5rem] flex items-center gap-4 pl-4">
-              <div className={`h-4 min-h-full py-2 transition-all duration-300`}>
+            <Link
+              href="/"
+              className="w-fit h-[5rem] flex items-center gap-4 pl-4"
+            >
+              <div
+                className={`h-4 min-h-full py-2 transition-all duration-300`}
+              >
                 <Image
                   src="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
                   className={`w-full h-full cursor-pointer object-contain`}
@@ -86,11 +107,13 @@ const Navbar = () => {
               </div>
               <div className="flex flex-col justify-center gap-0 pt-1">
                 <h1
-                  className={`font-extrabold uppercase text-2xl duration-100 ease-in tracking-wider font-outfit h-fit leading-4 ${getTextColor()}`}>
+                  className={`font-extrabold uppercase text-2xl duration-100 ease-in tracking-wider font-outfit h-fit leading-4 ${getTextColor()}`}
+                >
                   Syntax
                 </h1>
                 <p
-                  className={`text-[16px] lg:text-lg duration-100 ease-in tracking-wider font-outfit leading-6 ${getTextColor()}`}>
+                  className={`text-[16px] lg:text-lg duration-100 ease-in tracking-wider font-outfit leading-6 ${getTextColor()}`}
+                >
                   code, create, connect
                 </p>
               </div>
@@ -100,11 +123,28 @@ const Navbar = () => {
             <div className="flex gap-2 sm:gap-4 md:gap-6 lg:gap-10 items-center">
               {/* Desktop navigation list */}
               <div
-                className={`flex gap-0 py-1 text-[#6B778C] md:gap-6 lg:gap-8 lg:py-5 xl:gap-12 uppercase items-center ${getTextColor()}`}>
-                <NavListDesktop href="/" routerPathname={router.pathname} lable="Home" />
-                <NavListDesktop href="/tentang-bpa" routerPathname={router.pathname} lable="BPA" />
-                <NavListDesktop href="/akademik" routerPathname={router.pathname} lable="Akademik" />
-                <NavListDesktop href="/acara-kemahasiswaan" routerPathname={router.pathname} lable="Acara" />
+                className={`flex gap-0 py-1 text-[#6B778C] md:gap-6 lg:gap-8 lg:py-5 xl:gap-12 uppercase items-center ${getTextColor()}`}
+              >
+                <NavListDesktop
+                  href="/"
+                  routerPathname={router.pathname}
+                  lable="Home"
+                />
+                <NavListDesktop
+                  href="/tentang-bpa"
+                  routerPathname={router.pathname}
+                  lable="BPA"
+                />
+                <NavListDesktop
+                  href="/akademik"
+                  routerPathname={router.pathname}
+                  lable="Akademik"
+                />
+                <NavListDesktop
+                  href="/acara-kemahasiswaan"
+                  routerPathname={router.pathname}
+                  lable="Acara"
+                />
               </div>
 
               {/* Mobile Nav Button */}
@@ -113,39 +153,54 @@ const Navbar = () => {
               </div>
               <button
                 className="block md:hidden hover:brightness-95 p-2 rounded-md ml-2 text-[#6B778C]"
-                onClick={() => handleNav(true)}>
+                onClick={() => handleNav(true)}
+              >
                 <RxHamburgerMenu size={30} />
               </button>
 
               {/* Mobile Nav List */}
               <div
                 onClick={() => handleNav(false)}
-                className={`text-slate-800 ${navMobile ? "md:hidden fixed left-0 top-0 w-full h-screen bg-black/70" : ""}`}>
+                className={`text-slate-800 ${navMobile ? "md:hidden fixed left-0 top-0 w-full h-screen bg-black/70" : ""}`}
+              >
                 <div
                   className={
                     navMobile
                       ? "fixed right-0 top-0 w-[240px] h-screen bg-slate-50 p-4 pt-10 ease-in duration-500 flex flex-col gap-4"
                       : "fixed right-[-150%] w-[240px] h-screen bg-slate-50 top-0 p-4 pt-10 ease-in duration-500 flex flex-col gap-4 items-start"
-                  }>
+                  }
+                >
                   <section className="space-y-2">
                     <p className="text-3xl font-bold leading-none">SYNTAX</p>
                     <p className="font-bold">STEI-K 23</p>
-                    <p className="text-sm font-bold italic leading-none mb-10">Code, Create, Connect!</p>
+                    <p className="text-sm font-bold italic leading-none mb-10">
+                      Code, Create, Connect!
+                    </p>
                   </section>
 
                   <section className="flex flex-col gap-1">
-                    <Link href="/" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
+                    <Link
+                      href="/"
+                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
+                    >
                       <GoHome size={19} /> Home
                     </Link>
-                    <Link href="/tentang-bpa" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
+                    <Link
+                      href="/tentang-bpa"
+                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
+                    >
                       <GoCopilot size={19} /> BPA
                     </Link>
-                    <Link href="/akademik" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
+                    <Link
+                      href="/akademik"
+                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
+                    >
                       <IoMdBook size={19} /> Akademik
                     </Link>
                     <Link
                       href="/acara-kemahasiswaan"
-                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
+                      className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
+                    >
                       <RiGroupLine size={19} /> Acara Kemahasiswaan
                     </Link>
                   </section>
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 816acc9..8aa34f6 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,3 +1,4 @@
+import Footer from "@/components/Footer";
 import { Html, Head, Main, NextScript } from "next/document";
 
 export default function MyDocument() {
@@ -76,6 +77,7 @@ export default function MyDocument() {
       <body>
         <Main />
         <NextScript />
+        <Footer />
       </body>
     </Html>
   );
diff --git a/src/pages/tentang-bpa/index.tsx b/src/pages/tentang-bpa/index.tsx
index 0ef49a2..7750617 100644
--- a/src/pages/tentang-bpa/index.tsx
+++ b/src/pages/tentang-bpa/index.tsx
@@ -4,7 +4,11 @@ import Navbar from "@/components/Navbar";
 import Head from "next/head";
 import Link from "next/link";
 import React from "react";
-import { bpaListExternal, bpaListGeneral, bpaListInternal } from "@/assets/data/bpaList";
+import {
+  bpaListExternal,
+  bpaListGeneral,
+  bpaListInternal,
+} from "@/assets/data/bpaList";
 import { IoMdPerson } from "react-icons/io";
 import Image from "next/image";
 import { getSlug } from "@/lib/utils/stringManipulation";
@@ -21,7 +25,9 @@ const TentangBpa = () => {
         <section className="h-full w-full flex flex-col items-start justify-start gap-2 px-0 md:px-4 self-stretch border-r-2 md:w-[210px]">
           <div className="block md:fixed top-0 left-0 px-4 md:h-[100svh] md:shadow-lg overflow-y-auto bg-white md:bg-[#101351]">
             <div className="w-fit h-[4.5rem] hidden md:flex items-center gap-2">
-              <div className={`h-4 min-h-full py-2 transition-all duration-300`}>
+              <div
+                className={`h-4 min-h-full py-2 transition-all duration-300`}
+              >
                 <Image
                   src="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
                   className={`w-full h-full cursor-pointer object-contain`}
@@ -32,29 +38,42 @@ const TentangBpa = () => {
                   priority
                 />
               </div>
-              <h1 className={`font-extrabold text-4xl duration-100 ease-in tracking-wider text-[#101351] md:text-white `}>
+              <h1
+                className={`font-extrabold text-4xl duration-100 ease-in tracking-wider text-[#101351] md:text-white `}
+              >
                 Syntax
               </h1>
             </div>
             <div className="h-fit w-auto pt-2 flex flex-col">
-              <h1 className="text-sm text-left text[#101351] md:text-white">Syntax | STEI-K 23</h1>
-              <h2 className="text-[#101351] md:text-white text-4xl py-1 font-bold">BPA &apos;23</h2>
+              <h1 className="text-sm text-left text[#101351] md:text-white">
+                Syntax | STEI-K 23
+              </h1>
+              <h2 className="text-[#101351] md:text-white text-4xl py-1 font-bold">
+                BPA &apos;23
+              </h2>
             </div>
             <div className="w-full flex flex-col h-fit">
               <div className="w-full md:w-[200px] h-fit space-y-1 hidden md:block">
-                <h2 className="text-sm font-light uppercase tracking-wider md:pt-4 text-white">Petinggi</h2>
+                <h2 className="text-sm font-light uppercase tracking-wider md:pt-4 text-white">
+                  Petinggi
+                </h2>
                 {bpaListGeneral.map((bpa) => (
                   <Link
                     href={`/tentang-bpa/#${getSlug(bpa.name)}`}
                     key={bpa.name}
-                    className="text-lg flex gap-2 items-center hover:bg-slate-50/50 ease-in duration-75">
+                    className="text-lg flex gap-2 items-center hover:bg-slate-50/50 ease-in duration-75"
+                  >
                     <IoMdPerson color="white" />
-                    <p className="text-[16px] text-white hover:brightness-95 rounded-md w-full py-1">{bpa.name}</p>
+                    <p className="text-[16px] text-white hover:brightness-95 rounded-md w-full py-1">
+                      {bpa.name}
+                    </p>
                   </Link>
                 ))}
               </div>
               <div className="block md:hidden">
-                <h2 className="pt-4 border-b border-[#101351] text-[#101351]">Petinggi</h2>
+                <h2 className="pt-4 border-b border-[#101351] text-[#101351]">
+                  Petinggi
+                </h2>
                 <div className="w-full md:w-[200px] h-fit flex flex-row flex-wrap justify-start items-start gap-2 pt-2">
                   {bpaListGeneral.map((bpa) => (
                     <BPAbutton key={bpa.name} data={bpa} />
@@ -62,7 +81,9 @@ const TentangBpa = () => {
                 </div>
               </div>
               <div>
-                <h2 className="pt-4 border-b border-[#101351] md:border-white text-[#101351] md:text-white">External</h2>
+                <h2 className="pt-4 border-b border-[#101351] md:border-white text-[#101351] md:text-white">
+                  External
+                </h2>
                 <div className="w-full md:w-[200px] h-fit flex flex-row flex-wrap justify-start items-start gap-2 pt-2">
                   {bpaListExternal.map((bpa) => (
                     <BPAbutton key={bpa.name} data={bpa} />
@@ -70,7 +91,9 @@ const TentangBpa = () => {
                 </div>
               </div>
               <div>
-                <h2 className="pt-4 border-b border-[#101351] md:border-white text-[#101351] md:text-white">Internal</h2>
+                <h2 className="pt-4 border-b border-[#101351] md:border-white text-[#101351] md:text-white">
+                  Internal
+                </h2>
                 <div className="w-full md:w-[200px] h-fit flex flex-row flex-wrap justify-start items-start gap-2 pt-2">
                   {bpaListInternal.map((bpa) => (
                     <BPAbutton key={bpa.name} data={bpa} />
@@ -82,7 +105,10 @@ const TentangBpa = () => {
         </section>
 
         {/* Info BPA */}
-        <section className="h-fit w-full md:w-0 flex-grow pt-10 sm:pt-0 px-4 md:px-20 bg-white" id="right">
+        <section
+          className="h-fit w-full md:w-0 flex-grow pt-10 sm:pt-0 px-4 md:px-20 bg-white"
+          id="right"
+        >
           {bpaListGeneral.map((bpa) => (
             <BPAInfo key={bpa.name} data={bpa} />
           ))}