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/pages/_document.tsx b/src/pages/_document.tsx
index 816acc9..6e5b34b 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() {
@@ -12,10 +13,7 @@ export default function MyDocument() {
           name="description"
           content="Jelajahi saluran informasi dan materi pembelajaran untuk mahasiswa STEI-K. Tetap terupdate dengan pengumuman terbaru, konten edukatif, dan sumber daya yang disesuaikan untuk mahasiswa teknik elektro dan ilmu komputer."
         />
-        <meta
-          name="keywords"
-          content="STEI-K, Kampus, ITB, 2023, 23, Teknik Informatika, Sistem dan Teknologi Informasi"
-        />
+        <meta name="keywords" content="STEI-K, Kampus, ITB, 2023, 23, Teknik Informatika, Sistem dan Teknologi Informasi" />
         <meta name="author" content="BPA IT STEI-K 23" />
 
         {/* Open Graph meta tags (for Facebook) */}
@@ -24,10 +22,7 @@ export default function MyDocument() {
           property="og:description"
           content="Jelajahi saluran informasi dan materi pembelajaran untuk mahasiswa STEI-K. Tetap terupdate dengan pengumuman terbaru, konten edukatif, dan sumber daya yang disesuaikan untuk mahasiswa teknik elektro dan ilmu komputer."
         />
-        <meta
-          property="og:image"
-          content="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
-        />
+        <meta property="og:image" content="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg" />
         <meta property="og:url" content="https://steik23.netlify.app" />
         <meta property="og:type" content="website" />
 
@@ -38,10 +33,7 @@ export default function MyDocument() {
           name="twitter:description"
           content="Jelajahi saluran informasi dan materi pembelajaran untuk mahasiswa STEI-K. Tetap terupdate dengan pengumuman terbaru, konten edukatif, dan sumber daya yang disesuaikan untuk mahasiswa teknik elektro dan ilmu komputer."
         />
-        <meta
-          name="twitter:image"
-          content="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
-        />
+        <meta name="twitter:image" content="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg" />
 
         {/* JSON-LD for structured data */}
         <script type="application/ld+json">{`
@@ -61,21 +53,15 @@ export default function MyDocument() {
         `}</script>
 
         {/* Apple Touch Icon */}
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
-        />
+        <link rel="apple-touch-icon" sizes="180x180" href="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg" />
 
         {/* Add link to favicon */}
-        <link
-          rel="icon"
-          href="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
-        />
+        <link rel="icon" href="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg" />
       </Head>
       <body>
         <Main />
         <NextScript />
+        <Footer />
       </body>
     </Html>
   );