diff --git a/src/Components/Shared/Footer.jsx b/src/Components/Shared/Footer.jsx
index a92b21c3..b1406fbc 100644
--- a/src/Components/Shared/Footer.jsx
+++ b/src/Components/Shared/Footer.jsx
@@ -1,64 +1,12 @@
-import Logo from "../../assets/Logo/logo.png";
-import { FaFacebook, FaInstagram, FaTiktok } from "react-icons/fa";
-
-const Footer = () => {
-  const emailAddress = "sipnplaynyc@gmail.com";
+import React from "react";
+import Footer from "./footer/Footer";
 
+const StickyFooter = () => {
   return (
-    <footer className="bg-[#E0F0B1] py-5">
-      <div className="justify-content mx-auto w-5/6 gap-16 md:flex">
-        <div className="mt-16 basis-1/2 md:mt-0">
-          <img className="w-20 h-20" alt="logo" src={Logo} />
-          <div className="my-5">
-            <h1 className="font-semibold">How to Reach Us</h1>
-            <p>471 5th Ave.</p>
-            <p>Brooklyn, NY 11215</p>
-          </div>
-        </div>
-        <div className="w-full md:w-1/3 mb-3 md:mb-0">
-          <h4 className="text-lg font-bold mb-4">Socials</h4>
-          <div className="flex space-x-6">
-            <a
-              href="https://www.facebook.com/sipnplaynyc/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-blue-600 transition-colors"
-            >
-              <FaFacebook className="w-8 h-8 hover:animate-bounce" />
-            </a>
-            <a
-              href="https://www.instagram.com/sipnplaynyc/?hl=en"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-pink-600 transition-colors"
-            >
-              <FaInstagram className="w-8 h-8 hover:animate-bounce" />
-            </a>
-            <a
-              href="https://www.tiktok.com/@sipnplaynycofficial?lang=en"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="hover:text-violet-500 transition-colors"
-            >
-              <FaTiktok className="w-8 h-8 hover:animate-bounce" />
-            </a>
-          </div>
-        </div>
-
-        <div className="w-full md:w-1/3">
-          <h4 className="text-lg font-bold mb-4">Contact Us</h4>
-          <a
-            href={`mailto:${emailAddress}`}
-            className="block mb-2 hover:underline"
-          >
-            {emailAddress}
-          </a>
-          <p className="mb-2">718-971-1684</p>
-          <p className="text-sm text-gray-600">©2024 by Sip & Play</p>
-        </div>
-      </div>
-    </footer>
+    <div>
+      <Footer />
+    </div>
   );
 };
 
-export default Footer;
+export default StickyFooter;
diff --git a/src/Components/Shared/footer/Content.jsx b/src/Components/Shared/footer/Content.jsx
new file mode 100644
index 00000000..d8f55062
--- /dev/null
+++ b/src/Components/Shared/footer/Content.jsx
@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from "react";
+import Logo from "../../../assets/Logo/logo.png";
+import { FaFacebook, FaInstagram, FaTiktok } from "react-icons/fa";
+
+export default function Content() {
+  return (
+    <div className="bg-black pt-24 py-8 px-12 h-full w-full flex flex-col justify-between">
+      <Section1 />
+      <Section2 />
+    </div>
+  );
+}
+
+const Section1 = () => {
+  return (
+    <div>
+      <Nav />
+    </div>
+  );
+};
+
+const Section2 = () => {
+  const [isWide, setIsWide] = useState(window.innerWidth > 640);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsWide(window.innerWidth > 640);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    // Cleanup the event listener on component unmount
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return (
+    <>
+      {!isWide && (
+        <div className="flex justify-center">
+          <img
+            className="w-20 bg-white p-2 rounded-3xl h-20"
+            alt="logo"
+            src={Logo}
+          />
+        </div>
+      )}
+
+      {isWide && (
+        <div className="flex justify-between items-end text-white">
+          <h1 className="text-[9vw] leading-[0.8] mt-10">BoardGame Cafe</h1>
+          <p>©2024 by Sip & Play</p>
+        </div>
+      )}
+      {!isWide && (
+        <>
+          <div className="flex relative font-bold text-[12vw] top-10 flex-wrap justify-between items-end text-white">
+            <div>
+              <h1 className=" leading-[0.8]">BoardGame</h1>
+            </div>
+            <div className="flex justify-center h-fit w-full">
+              <h1 className="leading-[0.8] mt-4">Cafe</h1>
+            </div>
+          </div>
+          <div className="flex justify-center text-white">
+            <p className="mt-8">©2024 by Sip & Play</p>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+const Nav = () => {
+  const navLinks = [
+    {
+      name: "Home",
+      link: "/",
+    },
+    {
+      name: "Events",
+      link: "/event",
+    },
+
+    {
+      name: "Reservation",
+      link: "/register",
+    },
+    {
+      name: "Boardgame",
+      link: "/boardgame",
+    },
+    {
+      name: "About",
+      link: "/about",
+    },
+  ];
+  const socialLink = [
+    { name: "Facebook", link: "https://www.facebook.com/sipnplaynyc/" },
+    { name: "Instagram", link: "https://www.instagram.com/sipnplaynyc/?hl=en" },
+    {
+      name: "Tiktok",
+      link: "https://www.tiktok.com/@sipnplaynycofficial?lang=en",
+    },
+  ];
+  const emailAddress = "sipnplaynyc@gmail.com";
+
+  return (
+    <div className="flex shrink-0 gap-4 sm:gap-20">
+      <div className="flex flex-col gap-2 text-gray-400">
+        <h3 className="mb-2 uppercase text-white">About</h3>
+        {navLinks.map((item, index) => (
+          <a
+            className="hover:text-white duration-300"
+            key={index}
+            href={item.link}
+          >
+            {item.name}
+          </a>
+        ))}
+      </div>
+      <div className="flex flex-col gap-2 text-gray-400">
+        <h3 className="mb-2 uppercase text-white">Socials</h3>
+        {socialLink.map((item, index) => (
+          <a
+            target="_black"
+            className="hover:text-white duration-300"
+            key={index}
+            href={item.link}
+          >
+            {item.name}
+          </a>
+        ))}
+      </div>
+      <div className="flex flex-col gap-2 text-gray-400">
+        <h3 className="mb-2 uppercase text-white">Contact Us</h3>
+        <a
+          href={`mailto:${emailAddress}`}
+          className="block mb-2 hover:underline"
+        >
+          {emailAddress}
+        </a>
+        <p className="mb-2">718-971-1684</p>
+      </div>
+    </div>
+  );
+};
diff --git a/src/Components/Shared/footer/Footer.jsx b/src/Components/Shared/footer/Footer.jsx
new file mode 100644
index 00000000..edaff748
--- /dev/null
+++ b/src/Components/Shared/footer/Footer.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import Content from "./Content";
+
+const Footer = () => {
+  return (
+    <div
+      className="relative h-[800px]"
+      style={{ clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)" }}
+    >
+      <div className="relative h-[calc(100vh+800px)] -top-[100vh]">
+        <div className="h-[600px] sticky top-[calc(100vh-600px)]">
+          <Content />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;