diff --git a/frontend/package.json b/frontend/package.json
index 7615523..57705a9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "clsx": "^2.1.1",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.0",
+    "motion": "^12.0.11",
     "next": "^15.1.4",
     "overlayscrollbars": "^2.10.1",
     "overlayscrollbars-react": "^0.5.6",
diff --git a/frontend/src/app/home/components/TrustedBy.tsx b/frontend/src/app/home/components/TrustedBy.tsx
index a9dd843..0edd871 100644
--- a/frontend/src/app/home/components/TrustedBy.tsx
+++ b/frontend/src/app/home/components/TrustedBy.tsx
@@ -60,8 +60,8 @@ const PartnersCarousel: React.FC<IPartnersCarousel> = ({ partners }) => (
           <div
             key={name}
             className={clsx(
-              "relative mx-2 inline-block h-16 w-16 rounded-full bg-white lg:mx-10",
-              "hover:cursor-pointer",
+              "relative mx-2 inline-block h-16 w-16 rounded-full bg-white",
+              "hover:cursor-pointer lg:mx-10",
             )}
           >
             <Image
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 9014a70..5f82d50 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import clsx from "clsx";
 import { Urbanist } from "next/font/google";
 
 import Footer from "@/components/Footer";
@@ -25,7 +26,7 @@ export default async function RootLayout({
   return (
     <html lang="en" data-overlayscrollbars-initialize>
       <OverlayScrollbarBody className="bg-background-1 antialiased">
-        <main className={urbanist.className}>
+        <main className={clsx(urbanist.className)}>
           <Navbar {...{ navbarData }} />
           {children}
           <Footer />
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index cd8b4a2..1e3d6ef 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -21,11 +21,16 @@ const Footer: React.FC = async () => {
   }));
   return (
     <div>
-      <div className={"bg-primary-purple py-16"}>
-        <div className="flex flex-col gap-12 px-6">
+      <div className={"bg-background-dark py-16 md:px-16 xl:px-32"}>
+        <div
+          className={clsx(
+            "grid grid-flow-col grid-cols-2 grid-rows-2 gap-12 px-6",
+            "lg:grid-cols-4 lg:grid-rows-1",
+          )}
+        >
           {sections.map(({ title, links }) => (
             <div key={title} className="flex flex-col gap-4">
-              <h2 className="text-background-2">{title}</h2>
+              <h2 className="text-primary-purple">{title}</h2>
               {links.map(({ name, url }) => (
                 <CustomLink
                   className={clsx(hoverScaleUp, "w-max")}
@@ -38,7 +43,7 @@ const Footer: React.FC = async () => {
             </div>
           ))}
         </div>
-        <hr className="mx-6 mb-6 mt-16 h-0.5 border-t-0 bg-secondary-purple" />
+        <hr className="mx-6 mb-6 mt-16 h-0.5 border-t-0 bg-primary-purple" />
         <div className="flex items-center justify-center gap-8">
           {socials.map(({ name, icon_white: icon, url }) => (
             <CustomLink className={hoverScaleUp} key={name} href={url}>
diff --git a/frontend/src/components/IntegrateSection/index.tsx b/frontend/src/components/IntegrateSection/index.tsx
index 210e07c..ec6b2cb 100644
--- a/frontend/src/components/IntegrateSection/index.tsx
+++ b/frontend/src/components/IntegrateSection/index.tsx
@@ -23,12 +23,15 @@ const IntegrateSection: React.FC = async () => {
       <p className="text-base text-secondary-text lg:mb-4 lg:text-lg">
         {integrateData.description}
       </p>
-      <AppsDropdownContent appsSection={integrateData.appsSection} />
+      <AppsDropdownContent
+        appsSection={integrateData.appsSection}
+        className="pt-8 lg:pt-16"
+      />
       <LearnMore
         background={integrateData.getInTouchSection.background}
         title={integrateData.header}
         button={integrateData.arrowLink}
-        className="!mt-16 lg:!mt-4"
+        className="!mt-12 lg:!mt-16"
       />
       <ExternalLink
         className="mt-12 flex-wrap justify-center text-center lg:mt-16"
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
index 3db3739..ac5f0e6 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
@@ -3,40 +3,29 @@ import Image from "next/image";
 
 import CustomLink from "@/components/CustomLink";
 import { Solution } from "@/queries/navbar";
-import { hoverEffect } from "@/styles";
 
-const cardBaseStyle = clsx(
-  "bg-background-2 rounded-2xl border border-stroke text-wrap",
-  "p-4 flex gap-4 h-full lg:items-start",
-);
-const headerTextStyle = clsx("text-primary-purple font-bold text-base");
-const descriptionTextStyle = clsx(
-  "text-secondary-text text-base leading-tight",
-);
-
-interface CardProps {
+interface ICard {
   solution: Solution;
   variant: "large" | "medium" | "small";
+  onClick?: () => void;
   className?: string;
 }
 
-const Card: React.FC<CardProps> = ({ solution, variant, className }) => {
+const Card: React.FC<ICard> = ({ solution, variant, onClick, className }) => {
   return (
     <CustomLink
-      key={solution?.solution_name}
       href={solution?.url}
       className={clsx(
-        cardBaseStyle,
-        hoverEffect,
-        "flex-row",
-        "w-full",
+        className,
+        "flex h-full w-full transform flex-row gap-4 text-wrap rounded-2xl",
+        "border border-stroke bg-background-2 p-4 transition duration-100",
+        "hover:scale-[1.01] lg:items-start",
         {
-          "xl:flex-col xl:pb-8": variant === "large",
-          "xl:flex-row": variant === "medium" || variant === "small",
-          "xl:w-[380px]": true,
+          "lg:flex-col": variant === "large",
+          "lg:flex-row": variant === "medium" || variant === "small",
         },
-        className,
       )}
+      {...{ onClick }}
     >
       <Image
         src={solution?.logo_svg?.url}
@@ -44,29 +33,26 @@ const Card: React.FC<CardProps> = ({ solution, variant, className }) => {
         width={64}
         height={64}
       />
-      <div>
-        <h2 className={headerTextStyle}>{solution?.solution_name}</h2>
+      <div className="space-y-2">
+        <h2 className="text-base font-medium text-primary-purple">
+          {solution?.solution_name}
+        </h2>
 
         <h3
-          className={clsx(
-            headerTextStyle,
-            "mt-1 leading-tight text-primary-text",
-            {
-              "font-normal": variant === "small",
-              "xl:text-xl": variant === "large",
-              "xl:text-lg": variant === "medium",
-              "xl:text-base": variant === "small",
-            },
-          )}
+          className={clsx("text-base font-medium text-primary-text", {
+            "md:text-lg lg:text-xl": variant === "large",
+            "md:text-lg": variant === "medium",
+            "md:text-lg lg:text-base": variant === "small",
+          })}
         >
           {solution?.header_title}
         </h3>
 
         {solution?.header_description && (
           <p
-            className={clsx(descriptionTextStyle, "mt-2", {
+            className={clsx("mt-2 text-base text-secondary-text", {
               hidden: true,
-              "lg:block": variant !== "small",
+              "md:block": variant !== "small",
             })}
           >
             {solution?.header_description}
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
index 4a4a196..d4e5315 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
@@ -7,56 +7,51 @@ import Card from "./Card";
 
 interface AppsDropdownContentProps {
   appsSection: AppsSection;
+  closeFn?: () => void;
+  className?: string;
 }
 
 const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
   appsSection,
-}) => {
-  const columnOne = appsSection?.solutions.slice(0, 1);
-  const columnTwo = appsSection?.solutions.slice(1, 3);
-  const columnThree = appsSection?.solutions.slice(3, 7);
-
-  return (
+  closeFn,
+  className,
+}) => (
+  <div className={clsx(className, "mx-auto lg:max-w-[1172px]")}>
     <div
       className={clsx(
-        "mt-4 grid w-full gap-3 py-2 xl:mt-0 xl:w-[1172px] xl:gap-4 xl:py-12",
-        "mx-auto grid-cols-1 bg-background-2 xl:grid-cols-3",
+        "grid w-full grid-cols-1 gap-3 bg-background-2 lg:grid-flow-col",
+        "lg:grid-cols-3 lg:grid-rows-4 lg:gap-4",
       )}
     >
-      <div className="flex flex-col gap-3 xl:gap-4">
-        {columnOne?.map((solution) => (
-          <Card
-            key={solution.solution_name}
-            solution={solution}
-            variant="large"
-          />
-        ))}
-      </div>
-      <div className="flex flex-col gap-3 xl:gap-4">
-        {columnTwo?.map((solution) => (
-          <Card
-            key={solution.solution_name}
-            solution={solution}
-            variant="medium"
-          />
-        ))}
-      </div>
-      <div className="flex flex-col gap-3 xl:gap-4">
-        {columnThree?.map((solution) => (
-          <Card
-            key={solution.solution_name}
-            solution={solution}
-            variant="small"
-          />
-        ))}
-        <ExternalLink
-          url={appsSection?.arrowLink.link.url}
-          text={appsSection?.arrowLink.text}
-          className="self-start xl:self-end"
+      {appsSection?.solutions.map((solution, i) => (
+        <Card
+          className={getRowSpan(i)}
+          key={solution.solution_name}
+          {...{ solution }}
+          variant={getVariant(i)}
+          onClick={closeFn}
         />
-      </div>
+      ))}
     </div>
-  );
+    <ExternalLink
+      className="ml-auto mt-2 w-max"
+      url={appsSection?.arrowLink.link.url}
+      text={appsSection?.arrowLink.text}
+    />
+  </div>
+);
+
+const getVariant = (index: number): "large" | "medium" | "small" => {
+  if (index === 0) return "large";
+  if (index < 3) return "medium";
+  return "small";
+};
+
+const getRowSpan = (
+  index: number,
+): "lg:row-span-4" | "lg:row-span-2" | undefined => {
+  if (index === 0) return "lg:row-span-4";
+  if (index < 3) return "lg:row-span-2";
 };
 
 export default AppsDropdownContent;
diff --git a/frontend/src/components/Navbar/DesktopNavigation.tsx b/frontend/src/components/Navbar/DesktopNavigation.tsx
index 409750d..97ae8d3 100644
--- a/frontend/src/components/Navbar/DesktopNavigation.tsx
+++ b/frontend/src/components/Navbar/DesktopNavigation.tsx
@@ -2,6 +2,8 @@
 
 import { useState } from "react";
 
+import clsx from "clsx";
+import { motion, AnimatePresence } from "motion/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useLockBodyScroll } from "react-use";
@@ -51,6 +53,7 @@ const DesktopNavigation: React.FC<DesktopNavigationProps> = ({
               className={`${
                 pathname === `/${navLink.path_name}` ? "font-bold" : ""
               }`}
+              onClick={() => setOpenDropdownIndex(null)}
             >
               {navLink.title}
             </Link>
@@ -70,30 +73,51 @@ const DesktopNavigation: React.FC<DesktopNavigationProps> = ({
                   alt="Down Arrow"
                   width={12}
                   height={12}
-                  className="ml-2"
+                  className={clsx("ml-2 transition", {
+                    "rotate-180": openDropdownIndex === index,
+                  })}
                 />
               </button>
 
-              {openDropdownIndex === index && navLink.is_dropdown ? (
-                <div
-                  className="animate-slideInFromTop fixed inset-0 z-40 bg-black bg-opacity-50"
-                  onClick={() => setOpenDropdownIndex(null)}
-                >
-                  <div
-                    className="relative mt-20 bg-background-2"
-                    onClick={(e) => e.stopPropagation()}
+              <AnimatePresence>
+                {openDropdownIndex === index && navLink.is_dropdown ? (
+                  <motion.div
+                    className={clsx(
+                      "fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)]",
+                      "bg-black/50",
+                    )}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    onClick={() => setOpenDropdownIndex(null)}
                   >
-                    {navLink?.title === "Apps" ? (
-                      <AppsDropdownContent {...{ appsSection }} />
-                    ) : null}
-                    {navLink?.title === "Resources" ? (
-                      <ResourcesDropdownContent
-                        {...{ resourceSections, socials }}
-                      />
-                    ) : null}
-                  </div>
-                </div>
-              ) : null}
+                    <motion.div
+                      className={clsx(
+                        "absolute top-0 max-h-full w-full overflow-y-auto",
+                        "bg-background-2",
+                      )}
+                      initial={{ translateY: "-5%" }}
+                      animate={{ translateY: 0 }}
+                      exit={{ translateY: "-5%" }}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {navLink?.title === "Apps" ? (
+                        <AppsDropdownContent
+                          className="px-6 py-12"
+                          {...{ appsSection }}
+                          closeFn={() => setOpenDropdownIndex(null)}
+                        />
+                      ) : null}
+                      {navLink?.title === "Resources" ? (
+                        <ResourcesDropdownContent
+                          {...{ resourceSections, socials }}
+                          closeFn={() => setOpenDropdownIndex(null)}
+                        />
+                      ) : null}
+                    </motion.div>
+                  </motion.div>
+                ) : null}
+              </AnimatePresence>
             </>
           )}
         </div>
diff --git a/frontend/src/components/Navbar/HamburgerButton.tsx b/frontend/src/components/Navbar/HamburgerButton.tsx
new file mode 100644
index 0000000..811f919
--- /dev/null
+++ b/frontend/src/components/Navbar/HamburgerButton.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React from "react";
+
+import clsx from "clsx";
+import { motion, Variants } from "motion/react";
+
+interface IHamburgerButton {
+  className?: string;
+  isOpen: boolean;
+}
+
+const variants: Variants = {
+  topClose: {
+    top: [null, "50%", "50%"],
+    translateY: [null, "-50%", "-50%"],
+    rotate: [null, 0, "45deg"],
+    transition: { duration: 0.3 },
+  },
+  botClose: {
+    bottom: [null, "50%", "50%"],
+    translateY: [null, "50%", "50%"],
+    rotate: [null, 0, "-45deg"],
+    transition: { duration: 0.3 },
+  },
+  topOpen: {
+    top: ["50%", "50%", 0],
+    translateY: ["-50%", 0, 0],
+    rotate: ["45deg", "0deg", "0deg"],
+    transition: { duration: 0.3 },
+  },
+  midOpen: {
+    bottom: ["50%", "50%", "50%"],
+    translateY: ["50%", "50%", "50%"],
+    rotate: ["-45deg", "0deg", "0deg"],
+    transition: { duration: 0.3 },
+  },
+  botOpen: {
+    bottom: ["50%", "50%", 0],
+    translateY: ["50%", 0, 0],
+    rotate: ["-45deg", "0deg", "0deg"],
+    transition: { duration: 0.3 },
+  },
+};
+
+const HamburgerButton: React.FC<IHamburgerButton> = ({ className, isOpen }) => {
+  return (
+    <div className={clsx("relative", className)}>
+      <motion.div
+        {...{ variants }}
+        animate={isOpen ? "topClose" : "topOpen"}
+        initial={false}
+        className={clsx("absolute h-1 w-full bg-white transition")}
+      />
+      <motion.div
+        {...{ variants }}
+        animate={isOpen ? "botClose" : "midOpen"}
+        initial={false}
+        className={clsx("absolute h-1 w-full bg-white transition")}
+      />
+      <motion.div
+        {...{ variants }}
+        animate={isOpen ? "botClose" : "botOpen"}
+        initial={false}
+        className={clsx("absolute h-1 w-full bg-white transition")}
+      />
+    </div>
+  );
+};
+
+export default HamburgerButton;
diff --git a/frontend/src/components/Navbar/MobileMenu.tsx b/frontend/src/components/Navbar/MobileMenu.tsx
index 62ed86d..aaf5e9f 100644
--- a/frontend/src/components/Navbar/MobileMenu.tsx
+++ b/frontend/src/components/Navbar/MobileMenu.tsx
@@ -3,11 +3,12 @@
 import { useState } from "react";
 
 import clsx from "clsx";
+import { motion, AnimatePresence } from "motion/react";
 import Image from "next/image";
-import Link from "next/link";
 
 import DownArrowIcon from "@/assets/svgs/icons/down-arrow.svg";
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import {
   AppsSection,
   NavbarButton,
@@ -16,34 +17,29 @@ import {
   Social,
 } from "@/queries/navbar";
 
-import CustomLink from "../CustomLink";
-
 import AppsDropdownContent from "./AppsDropdownContent";
 import ResourcesDropdownContent from "./ResourcesDropdownContent";
 
-const menuContainerStyle = clsx(
-  "z-50 fixed w-screen top-20 right-0 bg-background-2 p-6",
-  "rounded-lg shadow-lg overflow-y-auto animate-slideInFromRight",
-);
-
-const linkStyle = clsx("text-white block");
-
-interface MobileMenuProps {
+interface IMobileMenu extends React.ComponentProps<"div"> {
   pathname: string;
   navLinks: NavLink[];
   appsSection: AppsSection;
   resourceSections: ResourceSection[];
   socials: Social[];
   navbarButton: NavbarButton;
+  closeFn: () => void;
 }
 
-const MobileMenu: React.FC<MobileMenuProps> = ({
+const MobileMenu: React.FC<IMobileMenu> = ({
   pathname,
   navLinks,
   appsSection,
   resourceSections,
   socials,
   navbarButton,
+  closeFn,
+  className,
+  ...props
 }) => {
   const [openDropdownIndex, setOpenDropdownIndex] = useState<number | null>(
     null,
@@ -54,20 +50,28 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
   };
 
   return (
-    <div className={menuContainerStyle}>
+    <div
+      className={clsx(
+        className,
+        "z-50 w-screen overflow-y-auto rounded-b-lg",
+        "bg-background-2 p-6 shadow-lg",
+      )}
+      {...props}
+    >
       <nav className="flex flex-col gap-y-4">
         {navLinks?.map((navLink, index) => (
           <div key={navLink.path_name || navLink.title} className="relative">
             {!navLink.is_dropdown ? (
-              <Link
+              <CustomLink
                 href={`/${navLink.path_name}`}
                 className={clsx(
-                  linkStyle,
+                  "block text-white",
                   pathname === `/${navLink.path_name}` && "font-bold",
                 )}
+                onClick={closeFn}
               >
                 {navLink.title}
-              </Link>
+              </CustomLink>
             ) : (
               <>
                 <button
@@ -76,26 +80,36 @@ const MobileMenu: React.FC<MobileMenuProps> = ({
                 >
                   {navLink.title}
                   <Image
+                    className={clsx("transition", {
+                      "rotate-180": openDropdownIndex === index,
+                    })}
                     src={DownArrowIcon}
                     alt="Down Arrow"
                     width={12}
                     height={12}
                   />
                 </button>
-                <div
-                  className={clsx(
-                    "transition-accordionHeight h-auto overflow-y-auto",
-                    openDropdownIndex === index && "accordionOpen",
-                  )}
-                >
-                  {navLink?.title === "Apps" ? (
-                    <AppsDropdownContent {...{ appsSection }} />
-                  ) : navLink?.title === "Resources" ? (
-                    <ResourcesDropdownContent
-                      {...{ resourceSections, socials }}
-                    />
+                <AnimatePresence>
+                  {openDropdownIndex === index ? (
+                    <motion.div
+                      initial={{ height: 0 }}
+                      animate={{ height: "auto" }}
+                      exit={{ height: 0 }}
+                      className="mt-2 max-h-[30dvh] overflow-y-scroll pl-2 pr-4"
+                    >
+                      {navLink?.title === "Apps" ? (
+                        <AppsDropdownContent
+                          {...{ appsSection, closeFn }}
+                          className="mt-2"
+                        />
+                      ) : navLink?.title === "Resources" ? (
+                        <ResourcesDropdownContent
+                          {...{ resourceSections, socials, closeFn }}
+                        />
+                      ) : null}
+                    </motion.div>
                   ) : null}
-                </div>
+                </AnimatePresence>
               </>
             )}
           </div>
diff --git a/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx b/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
index 2f0990b..3fe386c 100644
--- a/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
+++ b/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
@@ -4,55 +4,50 @@ import Image from "next/image";
 import CustomLink from "@/components/CustomLink";
 import { ResourceSection, Social } from "@/queries/navbar";
 
-const hoverScaleUp = clsx("transform transition duration-75");
-const hoverScaleUpLink = clsx(hoverScaleUp, "hover:scale-[1.01]");
-const hoverScaleUpLogo = clsx(hoverScaleUp, "hover:scale-[1.10]");
-const borderStyle = clsx(
-  "border-stroke border-t lg:border-l lg:border-t-0 lg:pl-8 lg:pt-0 pt-5",
-);
-
 interface ResourcesDropdownContentProps {
   resourceSections: ResourceSection[];
   socials: Social[];
+  closeFn: () => void;
 }
 
 const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
   resourceSections,
   socials,
+  closeFn,
 }) => {
   return (
-    <div
-      className={clsx(
-        "mt-4 flex flex-col bg-background-2",
-        "items-center lg:mt-0",
-      )}
-    >
+    <div className="flex flex-col items-center bg-background-2">
       <div
         className={clsx(
-          "grid w-full grid-cols-1 gap-4",
-          "max-w-screen-lg lg:grid-cols-3 lg:py-12",
+          "grid w-full max-w-screen-lg grid-cols-1 divide-y-2 lg:grid-cols-3",
+          "lg:divide-x-2 lg:divide-y-0 lg:py-8",
         )}
       >
-        {resourceSections?.map((section, index) => (
+        {resourceSections?.map((section) => (
           <div
             key={section.title}
             className={clsx(
-              "flex items-start gap-4",
-              index !== 0 && borderStyle,
+              "flex w-full flex-col gap-4 border-stroke bg-background-2",
+              "py-4 lg:px-4 lg:py-0",
             )}
           >
-            <div className="flex w-full flex-col gap-4 rounded-lg bg-background-2 lg:w-96">
-              <h3 className="text-base font-bold text-primary-purple">
-                {section.title}
-              </h3>
-              <ul className="flex flex-col gap-2">
-                {section.links?.map((link) => (
-                  <li key={link.url} className={hoverScaleUpLink}>
-                    <CustomLink href={link.url}>{link.name}</CustomLink>
-                  </li>
-                ))}
-              </ul>
-            </div>
+            <h3 className="text-base font-bold text-primary-purple">
+              {section.title}
+            </h3>
+            <ul className="flex flex-col gap-2">
+              {section.links?.map((link) => (
+                <li
+                  key={link.url}
+                  className={
+                    "w-max transform transition duration-75 hover:scale-[1.01]"
+                  }
+                >
+                  <CustomLink href={link.url} onClick={closeFn}>
+                    {link.name}
+                  </CustomLink>
+                </li>
+              ))}
+            </ul>
           </div>
         ))}
       </div>
@@ -66,7 +61,8 @@ const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
           <CustomLink
             key={social.name}
             href={social.url}
-            className={hoverScaleUpLogo}
+            className={"transform transition duration-75 hover:scale-[1.10]"}
+            onClick={closeFn}
           >
             <Image
               src={social.icon.url}
diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
index 502e88f..05f6637 100644
--- a/frontend/src/components/Navbar/index.tsx
+++ b/frontend/src/components/Navbar/index.tsx
@@ -1,21 +1,17 @@
 "use client";
 
-import { useState } from "react";
-
 import clsx from "clsx";
+import { motion, AnimatePresence } from "motion/react";
 import Image from "next/image";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useLockBodyScroll } from "react-use";
+import { useLockBodyScroll, useToggle } from "react-use";
 
-import HamburgerIcon from "@/assets/svgs/icons/hamburger.svg";
 import Button from "@/components/Button";
+import CustomLink from "@/components/CustomLink";
 import { NavbarQueryType } from "@/queries/navbar";
-import { responsiveSize } from "@/styles/responsiveSize";
-
-import CustomLink from "../CustomLink";
 
 import DesktopNavigation from "./DesktopNavigation";
+import HamburgerButton from "./HamburgerButton";
 import MobileMenu from "./MobileMenu";
 
 interface INavbar {
@@ -23,7 +19,7 @@ interface INavbar {
 }
 
 const Navbar: React.FC<INavbar> = ({ navbarData }) => {
-  const [menuOpen, setMenuOpen] = useState(false);
+  const [menuOpen, toggleMenuOpen] = useToggle(false);
   const pathname = usePathname();
 
   const klerosLogo = navbarData?.klerosLogo;
@@ -33,8 +29,6 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
   const appsSection = navbarData?.navbarAppsSection;
   const socials = navbarData?.socials;
 
-  const toggleMenu = () => setMenuOpen(!menuOpen);
-
   useLockBodyScroll(menuOpen);
 
   return (
@@ -43,31 +37,27 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
         "fixed left-0 right-0 top-0 z-50 flex h-20 w-full",
         "items-center justify-between bg-black/35 px-2 py-2",
         "text-base text-white backdrop-blur-md",
+        "md:px-16 xl:px-32",
       )}
-      style={{
-        paddingLeft: responsiveSize(24, 128, 1024, 1920),
-        paddingRight: responsiveSize(24, 128, 1024, 1920),
-      }}
     >
-      <Link href="/" className="flex items-center">
+      <CustomLink
+        href="/home"
+        className="flex items-center"
+        onClick={() => toggleMenuOpen(false)}
+      >
         <Image
           alt="Kleros"
           src={klerosLogo?.logo_svg.url}
           width={184}
           height={48}
         />
-      </Link>
+      </CustomLink>
 
       <button
         className="ml-auto block text-white lg:hidden"
-        onClick={toggleMenu}
+        onClick={toggleMenuOpen}
       >
-        <Image
-          src={HamburgerIcon}
-          alt="Hamburger Icon"
-          width={24}
-          height={24}
-        />
+        <HamburgerButton className="h-5 w-6" isOpen={menuOpen} />
       </button>
 
       <div className="hidden lg:flex">
@@ -84,25 +74,40 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
         </CustomLink>
       </div>
 
-      {menuOpen && (
-        <div
-          className={"fixed inset-0 z-40 flex bg-black bg-opacity-50"}
-          onClick={() => setMenuOpen(false)}
-        >
-          <div className="relative" onClick={(e) => e.stopPropagation()}>
-            <MobileMenu
-              {...{
-                pathname,
-                navLinks,
-                resourceSections,
-                appsSection,
-                socials,
-                navbarButton,
-              }}
-            />
-          </div>
-        </div>
-      )}
+      <AnimatePresence>
+        {menuOpen ? (
+          <motion.div
+            className={clsx(
+              "fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)] bg-black/50",
+            )}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => toggleMenuOpen(false)}
+          >
+            <motion.div
+              className="absolute bottom-0 top-0"
+              initial={{ right: "-100%" }}
+              animate={{ right: 0 }}
+              exit={{ right: "-100%" }}
+            >
+              <MobileMenu
+                {...{
+                  pathname,
+                  navLinks,
+                  resourceSections,
+                  appsSection,
+                  socials,
+                  navbarButton,
+                }}
+                className="h-full overflow-y-auto md:h-auto"
+                closeFn={() => toggleMenuOpen(false)}
+                onClick={(e) => e.stopPropagation()}
+              />
+            </motion.div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
     </header>
   );
 };
diff --git a/frontend/src/components/OverlayScrollbarMain.tsx b/frontend/src/components/OverlayScrollbarMain.tsx
index b359ad2..3a2ad61 100644
--- a/frontend/src/components/OverlayScrollbarMain.tsx
+++ b/frontend/src/components/OverlayScrollbarMain.tsx
@@ -18,7 +18,10 @@ const OverlayScrollbarBody: React.FC<IOverlayScrollbarBody> = ({
     {...{ className }}
     defer
     data-overlayscrollbars-initialize
-    options={{ scrollbars: { autoHide: "move" } }}
+    options={{
+      scrollbars: { autoHide: "move" },
+      overflow: { y: "visible" },
+    }}
   >
     {children}
   </OverlayScrollbarsComponent>
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 1f3b229..6504b00 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -60,47 +60,6 @@ body {
   }
 }
 
-@keyframes slideInFromRight {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-.animate-slideInFromRight {
-  animation: slideInFromRight 0.3s ease-out;
-}
-
-@keyframes slideInFromTop {
-  from {
-    transform: translateY(-5%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.animate-slideInFromTop {
-  animation: slideInFromTop 0.5s ease-out;
-}
-
-.transition-accordionHeight {
-  max-height: 0;
-  transition:
-    max-height 0.3s ease-out,
-    opacity 0.3s ease-out;
-  opacity: 0;
-}
-
-.accordionOpen {
-  max-height: 332px;
-  opacity: 1;
-}
-
 .border-gradient-purple-blue {
   position: relative;
   border-radius: 9999px;
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 99cacb6..6cd5c22 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -30,6 +30,7 @@ const config: Config = {
         "secondary-blue": "#7CE2FF",
         "background-1": "#1B003F",
         "background-2": "#220050",
+        "background-dark": "#13002D",
         "background-translucent": "rgba(34, 0, 80, 0.24)",
         success: "#00F068",
       },
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 6539c34..8c7b90a 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2103,6 +2103,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-motion@npm:^12.0.11":
+  version: 12.0.11
+  resolution: "framer-motion@npm:12.0.11"
+  dependencies:
+    motion-dom: "npm:^12.0.0"
+    motion-utils: "npm:^12.0.0"
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10/1cf4c49dc098e5763dbe91ff400328f78b8c121e4b1e07c221499b14eb79ce10836b23cd9305445cb823438f8d0f890ac460810896a7faf74e50be90dca0471d
+  languageName: node
+  linkType: hard
+
 "frontend@workspace:.":
   version: 0.0.0-use.local
   resolution: "frontend@workspace:."
@@ -2119,6 +2141,7 @@ __metadata:
     graphql-request: "npm:^7.1.0"
     husky: "npm:^9.1.7"
     lint-staged: "npm:^15.3.0"
+    motion: "npm:^12.0.11"
     next: "npm:^15.1.4"
     overlayscrollbars: "npm:^2.10.1"
     overlayscrollbars-react: "npm:^0.5.6"
@@ -3282,6 +3305,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"motion-dom@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "motion-dom@npm:12.0.0"
+  dependencies:
+    motion-utils: "npm:^12.0.0"
+  checksum: 10/ddb50b0dc0ca08bbcbba78850d0530840821944158849776af11110a7c32f6b53d02afc16880f70b4bd33d105dce3c1c69a37df57675f2882bf7f7cb2a814438
+  languageName: node
+  linkType: hard
+
+"motion-utils@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "motion-utils@npm:12.0.0"
+  checksum: 10/e73b82cf36746f6d498bc48450d34bf8d51128279d8f542cab8a02edf13368d0b99e4208c6d60c670fac5481c60e09d590db7345e390070ed0499dd4367d1695
+  languageName: node
+  linkType: hard
+
+"motion@npm:^12.0.11":
+  version: 12.0.11
+  resolution: "motion@npm:12.0.11"
+  dependencies:
+    framer-motion: "npm:^12.0.11"
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10/810e57977d4cc4a4643f7f57271b6b8fd26d77ef3e0ffd6452df49c88bc77dcc6c31b9f9c93e28012e1d980f62504528093405f003bf9bc7d50adaf25cb8c855
+  languageName: node
+  linkType: hard
+
 "ms@npm:^2.1.1, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
