diff --git a/package-lock.json b/package-lock.json
index 43e0cb4..2cfcbbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "bost-portal",
       "version": "0.1.0",
       "dependencies": {
+        "@gsap/react": "^2.1.1",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -23,6 +24,7 @@
         "date-fns": "^3.6.0",
         "embla-carousel-react": "^8.1.5",
         "framer-motion": "^11.2.11",
+        "gsap": "^3.12.5",
         "html-react-parser": "^5.1.10",
         "lucide-react": "^0.379.0",
         "mongoose": "^8.4.0",
@@ -144,6 +146,15 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
       "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
     },
+    "node_modules/@gsap/react": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.1.tgz",
+      "integrity": "sha512-apGPRrmpqxvl1T6Io1KgT8tFU+IuACI6z4zmT7t8+PASserJeLVRFJdSNUFA2Xb/eVkZI1noE8LIrY/w/oJECw==",
+      "dependencies": {
+        "gsap": "^3.12.5",
+        "react": ">=16"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -2454,6 +2465,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
diff --git a/package.json b/package.json
index 544d768..65041dc 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.1",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -24,6 +25,7 @@
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.1.5",
     "framer-motion": "^11.2.11",
+    "gsap": "^3.12.5",
     "html-react-parser": "^5.1.10",
     "lucide-react": "^0.379.0",
     "mongoose": "^8.4.0",
diff --git a/src/components/Home/Hero.jsx b/src/components/Home/Hero.jsx
index ace1726..fb5795f 100644
--- a/src/components/Home/Hero.jsx
+++ b/src/components/Home/Hero.jsx
@@ -1,12 +1,13 @@
+
 export default function Hero() {
   return (
     <section className="w-full h-[90vh]  flex flex-col lg:flex-row justify-center items-center px-6">
       <div className="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center">
-        <h1 className="w-full text-center font-bold text-5xl lg:text-7xl">BOST PORTAL</h1>
-        <p className="roboto-light text-xl lg:text-3xl">To manage all things Bost</p>
+        <h1 className="w-full text-center font-bold text-5xl lg:text-7xl LandingHeroTitle">BOST PORTAL</h1>
+        <p className="roboto-light text-xl lg:text-3xl LandingHeroSubtitle">To manage all things Bost</p>
       </div>
-      <div className="w-full lg:w-1/2  h-1/2 lg:h-full flex justify-center items-center">
-        <img src="./home/Globe.svg" className="object-cover h-3/5 " />{" "}
+      <div className="w-full lg:w-1/2  h-1/2 lg:h-full flex justify-center LandingHeroImage items-center">
+        <img src="./home/Globe.svg" className="object-cover Globe h-3/5 " />{" "}
       </div>
     </section>
   );
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 6889963..961afc2 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -7,37 +7,45 @@ import Link from "next/link";
 import { handleLogin } from "@/app/actions/authentication";
 import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
+import { useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+gsap.registerPlugin(useGSAP);
 
 export default function Navbar({ session }) {
   const pathname = usePathname();
   const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const container = useRef();
 
   useEffect(() => {
     setIsSheetOpen(false);
   }, [pathname]);
 
-  // useEffect(() => {
-  //   const handleKeyDown = (event) => {
-  //     if (event.key === "L" || event.key === "l") {
-  //       handleLogin();
-  //     }
-  //   };
-
-  //   window.addEventListener("keydown", handleKeyDown);
-
-  //   return () => {
-  //     window.removeEventListener("keydown", handleKeyDown);
-  //   };
-  // }, []);
+  useGSAP(
+    () => {
+      gsap.from([".hamburger",".Logo"], { y:-50,
+        opacity:0,
+        duration:1
+      });
+      gsap.from([".Globe",".LandingHeroTitle",".LandingHeroSubtitle"], { opacity:0,
+        delay:1,
+        duration:1
+      });
+    },
+    {  }
+  );
 
   if (pathname.startsWith("/dashboard")) return null;
 
   return (
-    <header className="flex select-none  h-[10vh] bg-secondary w-full justify-between shrink-0 items-center px-4 md:px-6">
-      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+    <header
+      // ref={container}
+      className="flex  select-none  h-[10vh] bg-secondary w-full justify-between shrink-0 items-center px-4 md:px-6"
+    >
+      <Sheet  open={isSheetOpen} onOpenChange={setIsSheetOpen}>
         <SheetTrigger asChild>
           <Button
-            className="lg:hidden  overflow-hidden p-0"
+            className="lg:hidden hamburger  overflow-hidden p-0"
             size="icon"
             variant="outline"
           >
@@ -75,10 +83,10 @@ export default function Navbar({ session }) {
           </div>
         </SheetContent>
       </Sheet>
-      <Link className="mr-6 hidden lg:flex" href="/">
+      <Link className="mr-6 Logo hidden lg:flex" href="/">
         <img src="/Logo.png" className=" h-[60px]"></img>
       </Link>
-      <nav className="ml-auto hidden lg:flex gap-6">
+      <nav className="ml-auto hidden hamburger  lg:flex gap-6">
         {session ? (
           <>
             <NavDropdown />
@@ -108,7 +116,7 @@ export default function Navbar({ session }) {
           </>
         )}
       </nav>
-      <Link href="/" className="lg:hidden">
+      <Link href="/" className="lg:hidden Logo">
         <img src="/Logo.png" className=" h-[60px]"></img>
       </Link>
     </header>
@@ -135,22 +143,3 @@ function MenuIcon(props) {
     </svg>
   );
 }
-
-function MountainIcon(props) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
-    </svg>
-  );
-}