diff --git a/src/components/footer/FooterList.tsx b/src/components/footer/FooterList.tsx
new file mode 100644
index 0000000..fc0ceab
--- /dev/null
+++ b/src/components/footer/FooterList.tsx
@@ -0,0 +1,32 @@
+import HeroLinks from '@/data/HeroLinks';
+import { links } from '@/data/menu-links';
+import Link from 'next/link';
+import { FC } from 'react';
+
+const FooterList: FC = () => {
+  return (
+    <div className="space-y-6">
+      <ul className="flex flex-wrap items-center gap-x-6 gap-y-2">
+        {links.map((link, indx) => (
+          <Link href={link.to} key={link.title + indx}>
+            <li className="cursor-pointer transition-colors duration-200 ease-in-out hover:text-accent">
+              {link.title}
+            </li>
+          </Link>
+        ))}
+      </ul>
+      <ul className="flex flex-wrap items-center gap-x-6 gap-y-3">
+        {HeroLinks.map((link, indx) => (
+          <Link href={link.href} key={link.title + indx}>
+            <li className="flex cursor-pointer items-center gap-x-2 transition-colors duration-200 ease-in-out hover:text-accent">
+              <link.Icon className="h-5 w-5" />
+              {link.title}
+            </li>
+          </Link>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default FooterList;
diff --git a/src/components/footer/Slogun.tsx b/src/components/footer/Slogun.tsx
new file mode 100644
index 0000000..e750ba9
--- /dev/null
+++ b/src/components/footer/Slogun.tsx
@@ -0,0 +1,17 @@
+import TypoComp from '@utilities/typo-component';
+import { FC } from 'react';
+
+const Slogun: FC = () => {
+  const year = new Date().getFullYear();
+  return (
+    <div className="">
+      <TypoComp className="prose-headings:my-0 prose-h1:italic prose-p:my-2 prose-p:text-skin-muted/80">
+        <h2>On your mark, Get Set,</h2>
+        <h1>Open Source</h1>
+        <p>© {year} PBC Life. All rights reserved </p>
+      </TypoComp>
+    </div>
+  );
+};
+
+export default Slogun;
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index 622ef80..361f137 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -1,3 +1,48 @@
+import { StarIcon } from '@heroicons/react/24/solid';
+import Container from '@layouts/container';
+import Logo from '@utilities/logo';
+import colors from 'tailwindcss/colors';
+import Glow from '../utilities/glow';
+import GradientBG from '../utilities/gradient-bg';
+import FooterList from './FooterList';
+import Slogun from './Slogun';
+
 export default function Footer() {
-  return <div>Footer</div>;
+  return (
+    <footer className="relative z-0 border-t border-accent/90">
+      <Glow className="!top-0 right-0 w-full max-w-6xl" />
+      <div className="absolute inset-0 -z-10 bg-grid-slate-500/50 [mask-image:linear-gradient(0deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1),rgba(255,255,255,0))] "></div>
+      <div className="pointer-events-none absolute inset-0 -z-20 bg-gradient-to-b from-primary via-primary/90 to-primary/70 backdrop-blur-2xl"></div>
+      <GradientBG
+        className="absolute inset-0 -z-30 h-full w-full animate-bg-shift"
+        colors={[
+          colors.yellow[400],
+          colors.teal[500],
+          colors.purple[600],
+          colors.pink[600],
+        ]}
+      />
+      <Container className=" py-8 font-semibold text-skin-base">
+        <div className="mb-4 flex flex-col xs:flex-row xs:items-center xs:justify-between">
+          <Logo />
+          <a
+            href="https://github.com/pbclife/gitopener.vercel.app"
+            target="_blank"
+            rel="norefferer noreferrer"
+            className="rounded-btn flex items-center justify-center gap-x-2 bg-skin-inverted text-skin-inverted"
+          >
+            <StarIcon className="h-5 w-5" />
+            Star Us
+          </a>
+        </div>
+        {/* Slogun & links */}
+        <div className="flex flex-col-reverse gap-8 xs:flex-col sm:flex-row sm:items-start sm:justify-between sm:px-8">
+          {/* sm:left */}
+          <Slogun />
+          {/* sm:right */}
+          <FooterList />
+        </div>
+      </Container>
+    </footer>
+  );
 }
diff --git a/src/data/HeroLinks.ts b/src/data/HeroLinks.ts
new file mode 100644
index 0000000..0a28792
--- /dev/null
+++ b/src/data/HeroLinks.ts
@@ -0,0 +1,19 @@
+import ForkIcon from '@/components/icons/fork';
+import GithubIcon from '@/components/icons/github';
+
+const HeroLinks = [
+  {
+    id: 1,
+    Icon: ForkIcon,
+    title: `Fork`,
+    href: `https://github.com/pbclife/gitopener.vercel.app/fork`,
+  },
+  {
+    id: 2,
+    Icon: GithubIcon,
+    title: `Repository`,
+    href: `https://github.com/pbclife/gitopener.vercel.app`,
+  },
+];
+
+export default HeroLinks;
diff --git a/src/styles/components.css b/src/styles/components.css
index 020aaba..d25e363 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -1 +1,6 @@
 @tailwind components;
+@layer components {
+  .rounded-btn {
+    @apply rounded-full px-6 py-3 outline-none;
+  }
+}