diff --git a/components/Intro.jsx b/components/Intro.jsx
index 99c5a29..6a76c9f 100644
--- a/components/Intro.jsx
+++ b/components/Intro.jsx
@@ -55,131 +55,149 @@ export default function Intro() {
 
   return (
     <>
-      <div className="w-full h-full flex items-center lg:justify-start pt-24 justify-center flex-wrap">
-        <div className="lg:w-3/6 w-full sm:p-2 h-full my-2 flex items-center justify-center px-4 md:items-start md:justify-start md:p-20 flex-col">
-          <motion.h1
-            initial={{ opacity: 0, x: -100 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{
-              duration: 0.8,
-              type: "spring",
-              stiffness: 100,
-              delay: 0,
-            }}
-            className="md:text-6xl text-3xl sm:text-2xl font-extrabold mb-4 text-black"
-          >
-            To Choose Right Jobs.{" "}
-            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-sky-700 via-indigo-400 to-indigo-400 "> JobSewa is for You</span>{" "}
-          </motion.h1>
-
-          <motion.p
-            initial={{ opacity: 0, x: -100 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{
-              duration: 0.8,
-              type: "spring",
-              stiffness: 100,
-              delay: 0,
-            }}
-            className="md:text-lg sm:text-sm text-xs font-medium mb-8 text-gray-500"
+      
+
+      <div className="w-full min-h-screen flex flex-col justify-between bg-gradient-to-br from-sky-100 to-indigo-200">
+        <div className="flex-grow flex flex-col items-center justify-center">
+          <motion.div 
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="w-full max-w-4xl px-4 sm:px-6 lg:px-8 flex flex-col items-center"
           >
-            Thousands of people search for jobs daily on job portals on average.
-          </motion.p>
-          <div className="bg-white mb-6 w-full md:px-4 py-2 md:py-4 pl-4 flex sm:flex-row items-center justify-center">
-            <div className="flex xs:w-full w-3/4 md:h-full p-2 md:px-2 md:py-3 bg-gray-200 rounded">
-              <BiSearchAlt className="text-2xl text-sky-700 mx-2 hidden sm:flex" />
-              <input
-                onChange={(e) => setSearch(e.target.value)}
-                onKeyPress={handleKeyPress}
-                value={search}
-                type="text"
-                placeholder="Search Jobs with Job Categories like electrician ..."
-                className="flex-1 bg-transparent text-base outline-none"
-              />
-              {search && (
-                <RxCross2
-                  onClick={clearSearch}
-                  className="text-2xl text-sky-700 cursor-pointer"
-                />
-              )}
-            </div>
-            <button
-              onClick={handleSearch}
-              className="px-3 py-2 my-2 sm:my-0 border border-sky-700 rounded uppercase tracking-widest mx-4 text-white bg-sky-700 transition-all duration-700 hover:bg-transparent font-semibold text-base hover:text-sky-700"
+            <motion.h1
+              initial={{ opacity: 0, y: -50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+              className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-center mb-8"
             >
-              Search
-            </button>
-          </div>
-          <div className="w-full px-2 py-2 flex items-center justify-start flex-wrap gap-2">
-            <div className="flex items-center justify-center mb-2">
-              <BsFillBookmarkFill className="text-sky-700 text-xl mx-2" />
-              <h1 className="font-semibold text-lg">Suggest Tag:</h1>
-            </div>
-            {/* Tags */}
-            {["Electrician", "Labourer", "Driver", "Plumber"].map((tag) => (
-              <span
-                key={tag}
-                className="bg-blue-100 text-blue-800 py-1 px-3 font-medium text-sm rounded-full cursor-pointer hover:bg-blue-200"
-                onClick={() => onTagClick(tag)}
-              >
-                {tag}
+              Find Your Perfect Job with{" "}
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-700 via-indigo-600 to-indigo-800">
+                JobSewa
               </span>
-            ))}
-          </div>
-        </div>
-        <motion.div
-          initial={{ opacity: 0, x: -100 }}
-          whileInView={{ opacity: 1, x: 0 }}
-          viewport={{ once: true }}
-          transition={{
-            duration: 0.8,
-            type: "spring",
-            stiffness: 100,
-            delay: 0,
-          }}
-          className="md:w-3/6 md:my-2 h-full items-center justify-center flex-col md:p-20 lg:flex"
-        >
-          <Image
-            width={1000}
-            height={1000}
-            src="/intro.png"
-            alt="no-image-found"
-          />
-        </motion.div>
-      </div>
-      {doneSearch && (
-        <div className="w-full flex flex-wrap items-center justify-center py-2 px-2">
-          {Array.isArray(filterJobs) && filterJobs.length > 0 ? (
-            filterJobs.map((job) => <JobsCard job={job} key={job?._id} />)
-          ) : (
-            <p className="text-sm text-center font-semibold text-red-500">
-              Sorry, no such category job available right now.
-            </p>
-          )}
+            </motion.h1>
+
+            <motion.p
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+              className="text-lg sm:text-xl text-gray-700 text-center mb-12"
+            >
+              Connecting thousands of job seekers with their dream careers daily.
+            </motion.p>
+
+            <motion.div 
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: 0.6 }}
+              className="bg-white rounded-lg shadow-xl p-6 mb-12 w-full max-w-2xl"
+            >
+              <div className="flex flex-col sm:flex-row items-center">
+                <div className="flex-grow mb-4 sm:mb-0 sm:mr-4 relative w-full">
+                  <BiSearchAlt className="absolute left-3 top-1/2 transform -translate-y-1/2 text-2xl text-sky-700" />
+                  <input
+                    onChange={(e) => setSearch(e.target.value)}
+                    onKeyPress={handleKeyPress}
+                    value={search}
+                    type="text"
+                    placeholder="Search job categories (e.g., electrician)"
+                    className="w-full pl-12 pr-4 py-3 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-sky-600 transition duration-300"
+                  />
+                  {search && (
+                    <RxCross2
+                      onClick={clearSearch}
+                      className="absolute right-3 top-1/2 transform -translate-y-1/2 text-2xl text-sky-700 cursor-pointer hover:text-sky-900 transition duration-300"
+                    />
+                  )}
+                </div>
+                <motion.button
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={handleSearch}
+                  className="w-full sm:w-auto px-6 py-3 bg-sky-700 text-white rounded-lg uppercase tracking-wider font-semibold hover:bg-sky-800 transition duration-300"
+                >
+                  Search
+                </motion.button>
+              </div>
+            </motion.div>
+
+            <motion.div 
+              initial={{ opacity: 0, y: 50 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.8 }}
+              className="flex flex-wrap justify-center items-center gap-4 mb-8"
+            >
+              <span className="font-semibold text-lg text-gray-700 mr-2">Popular Tags:</span>
+              {["Electrician", "Labourer", "Driver", "Plumber"].map((tag) => (
+                <motion.span
+                  key={tag}
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                  className="bg-blue-100 text-blue-800 py-2 px-4 rounded-full cursor-pointer hover:bg-blue-200 transition duration-300"
+                  onClick={() => onTagClick(tag)}
+                >
+                  {tag}
+                </motion.span>
+              ))}
+            </motion.div>
+          </motion.div>
         </div>
-      )}
-      {/* Footer Component */}
+
+        {doneSearch && (
+          <motion.div 
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="w-full bg-gray-100 py-12 px-4 sm:px-6 lg:px-8"
+          >
+            <div className="max-w-7xl mx-auto">
+              <h2 className="text-3xl font-bold text-center mb-8 text-gray-800">
+                Search Results
+              </h2>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+                {Array.isArray(filterJobs) && filterJobs.length > 0 ? (
+                  filterJobs.map((job) => (
+                    <motion.div
+                      key={job?._id}
+                      initial={{ opacity: 0, scale: 0.9 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ duration: 0.5 }}
+                    >
+                      <JobsCard job={job} />
+                    </motion.div>
+                  ))
+                ) : (
+                  <p className="text-xl text-center font-semibold text-red-500 col-span-full">
+                    Sorry, no jobs found in this category at the moment.
+                  </p>
+                )}
+              </div>
+            </div>
+          </motion.div>
+        )}
+
+        {/* Footer Component */}
         <footer className="w-full h-20 px-6 flex justify-between text-lg items-center bg-[#1B263B] text-[#D3D3D3]">
-        <div className="left gap-6">
-           &copy; {new Date().getFullYear()} JobSewa. All rights reserved.
-        </div>
+          <div className="left gap-6">
+             &copy; {new Date().getFullYear()} JobSewa. All rights reserved.
+          </div>
 
-        <div className="right flex gap-11">
-          <a href="https://twitter.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
-          <FiTwitter size={22} />
-          </a>
+          <div className="right flex gap-11">
+            <a href="https://twitter.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
+            <FiTwitter size={22} />
+            </a>
 
-          <a href="https://linkedin.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
-          <GrLinkedin size={22} />
-          </a>
+            <a href="https://linkedin.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
+            <GrLinkedin size={22} />
+            </a>
 
-          <a href="https://facebook.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
-          <BsFacebook size={22} />
-          </a>
-        </div>
-      </footer>
+            <a href="https://facebook.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
+            <BsFacebook size={22} />
+            </a>
+          </div>
+        </footer>
+      </div>
+      
     </>
   );
 }
diff --git a/components/NavBar.jsx b/components/NavBar.jsx
index d5b718a..78a84b9 100644
--- a/components/NavBar.jsx
+++ b/components/NavBar.jsx
@@ -87,8 +87,8 @@ export default function NavBar() {
     <>
       <div
         className={`w-full ${
-          scrolled ? "bg-white" : "bg-white"
-        } px-6 h-16 bg-gray-600 text-white flex items-center justify-between fixed top-0 left-0 z-50 shadow-md`}
+          scrolled ? "bg-white/80 backdrop-blur-md" : "bg-transparent"
+        } px-6 h-16 text-white flex items-center justify-between fixed top-0 left-0 z-50 shadow-md transition-all duration-300`}
       >
         <div className="px-2 h-full flex items-center justify-center">
           <p className="lowercase font-semibold tracking-widest text-lg">
@@ -98,8 +98,6 @@ export default function NavBar() {
             >
             <img src="/Jobsewa_logo.png" alt="JobSewa Logo"  
             className="h-[6vw] w-[6vw]" />
-
-             
             </Link>
           </p>
         </div>
@@ -115,78 +113,26 @@ export default function NavBar() {
             <Link
               key={item.href}
               href={item.href}
-              className={`px-3 mx-2 text-xs text-base font-medium transition-all duration-700 hover:translate-y-2 text-glow uppercase text-black ${
-                router.pathname === item.href
-                  ? "text-sky-500 font-bold border-b-4 border-sky-700" : ""
-              }`}
+              className={`
+                px-3 mx-2 text-base font-medium uppercase text-black
+                relative overflow-hidden group
+                transition-all duration-300 ease-in-out
+                ${router.pathname === item.href ? "text-sky-500 font-bold" : ""}
+              `}
             >
-              {item.label}
+              <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                {item.label}
+              </span>
+              <span className="
+                absolute inset-0 bg-black rounded-full
+                transform scale-0 group-hover:scale-100
+                transition-transform duration-300 ease-out
+                origin-center
+              "></span>
             </Link>
           ))}
         </div>
 
-{/* //if you want in older format
-        <div className="px-2 h-full hidden items-center justify-center lg:flex">
-          <Link
-            href={"/"}
-            className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-              router.pathname === "/" ? "text-sky-100 font-bold border-b-4 border-sky-500" : ""
-            }`}
-          >
-            Home
-          </Link>
-          <Link
-            href={"/frontend/postAJob"}
-            className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-              router.pathname === "/frontend/postAJob"
-                ? "ext-sky-100 font-bold border-b-4 border-sky-500"
-                : ""
-            }`}
-          >
-            Post Jobs
-          </Link>
-          <Link
-            href={"/frontend/displayJobs"}
-            className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-              router.pathname === "/frontend/displayJobs"
-                ? "text-sky-200 font-bold"
-                : ""
-            }`}
-          >
-            View Jobs
-          </Link>
-          <Link
-            href={"/frontend/postedJob"}
-            className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-              router.pathname === "/frontend/postedJob"
-                ? "text-sky-100 font-bold border-b-4 border-sky-500"
-                : ""
-            }`}
-          >
-            Posted Jobs
-          </Link>
-          <Link
-            href={"/frontend/dashboard"}
-            className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-              router.pathname === "/frontend/dashboard"
-                ? "text-sky-100 font-bold border-b-4 border-sky-500"
-                : ""
-            }`}
-          >
-            Dashboard
-          </Link>
-          <Link
-            href={"/frontend/organizations"}
-            className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-              router.pathname === "/frontend/organizations"
-                ? "text-sky-100 font-bold border-b-4 border-sky-500"
-                : ""
-            }`}
-          >
-            Organizations
-          </Link>
-        </div> */}
-
         <div className="px-2 h-full hidden items-center justify-center lg:flex space-x-4">
           {user !== null ? (
             <>
@@ -200,23 +146,49 @@ export default function NavBar() {
             <div className="flex items-center space-x-4">
               <Link
                 href={"/auth/login"}
-                className="px-4 py-2 uppercase tracking-widest mx-2 transition-all duration-200 hover:underline font-semibold text-base hover:text-sky-700 text-black text-xs"
+                className="
+                  px-3 mx-2 text-base font-medium uppercase text-black
+                  relative overflow-hidden group
+                  transition-all duration-300 ease-in-out
+                "
               >
-                Log in
+                <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                  Log in
+                </span>
+                <span className="
+                  absolute inset-0 bg-black rounded-full
+                  transform scale-0 group-hover:scale-100
+                  transition-transform duration-300 ease-out
+                  origin-center
+                "></span>
               </Link>
               <Link
                 href={"/auth/register"}
-                className="px-4 py-2 border  rounded uppercase bg-custom-color tracking-widest mx-4 transition-all duration-700 hover:bg-sky-300 font-semibold text-xs hover:text-sky-700"
+                className="
+                  px-3 mx-2 border rounded uppercase
+                  tracking-widest
+                  font-semibold text-base text-black
+                  relative overflow-hidden group
+                  transition-all duration-300 ease-in-out
+                "
               >
-                SIGN IN
+                <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                  SIGN IN
+                </span>
+                <span className="
+                  absolute inset-0 bg-black rounded-full
+                  transform scale-0 group-hover:scale-100
+                  transition-transform duration-300 ease-out
+                  origin-center
+                "></span>
               </Link>
             </div>
           )}
         </div>
 
-        <div className="flex lg:hidden  px-2 py-2 ">
+        <div className="flex lg:hidden px-2 py-2">
           <GiHamburgerMenu
-            className="text-4xl"
+            className="text-4xl text-black cursor-pointer"
             onClick={() => setIsOpen((state) => !state)}
           />
         </div>
@@ -224,23 +196,47 @@ export default function NavBar() {
         {isOpen && (
           <div
             ref={hamburgerRef}
-            className="flex w-full py-2 animate-fade-in-down bg-indigo-600 transition-all fade duration-1000 absolute top-20 left-0 items-center justify-center flex-col"
+            className="flex w-full py-2 animate-fade-in-down bg-white/80 backdrop-blur-md transition-all fade duration-1000 absolute top-16 left-0 items-center justify-center flex-col shadow-lg"
           >
             <div className="px-2 h-full flex items-center justify-center flex-col py-2">
               <Link
                 href={"/"}
                 onClick={() => setIsOpen(false)}
-                className={`px-3  m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-                  router.pathname === "/" ? "text-sky-100 font-bold border-b-4 border-sky-500" : ""
-                }`}
+                className={`
+                  px-3 m-4 text-base font-medium uppercase text-black
+                  relative overflow-hidden group
+                  transition-all duration-300 ease-in-out
+                  ${router.pathname === "/" ? "text-sky-500 font-bold" : ""}
+                `}
               >
-                Home
+                <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                  Home
+                </span>
+                <span className="
+                  absolute inset-0 bg-black rounded-full
+                  transform scale-0 group-hover:scale-100
+                  transition-transform duration-300 ease-out
+                  origin-center
+                "></span>
               </Link>
               <button
                 onClick={() => setOpenJobs((state) => !state)}
-                className="px-3  m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase flex items-center justify-center"
+                className="
+                  px-3 m-4 text-base font-medium uppercase text-black
+                  flex items-center justify-center
+                  relative overflow-hidden group
+                  transition-all duration-300 ease-in-out
+                "
               >
-                Jobs {openJobs ? <AiFillCaretUp /> : <AiFillCaretDown />}
+                <span className="relative z-10 group-hover:text-white transition-colors duration-300 flex items-center">
+                  Jobs {openJobs ? <AiFillCaretUp className="ml-1" /> : <AiFillCaretDown className="ml-1" />}
+                </span>
+                <span className="
+                  absolute inset-0 bg-black rounded-full
+                  transform scale-0 group-hover:scale-100
+                  transition-transform duration-300 ease-out
+                  origin-center
+                "></span>
               </button>
 
               {openJobs && (
@@ -248,67 +244,112 @@ export default function NavBar() {
                   <Link
                     href={"/frontend/displayJobs"}
                     onClick={() => setIsOpen(false)}
-                    className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-                      router.pathname === "/frontend/displayJobs"
-                        ? " text-sky-100 font-bold border-b-4 border-sky-500"
-                        : ""
-                    }`}
+                    className={`
+                      px-3 m-4 text-base font-medium uppercase text-black
+                      relative overflow-hidden group
+                      transition-all duration-300 ease-in-out
+                      ${router.pathname === "/frontend/displayJobs" ? "text-sky-500 font-bold" : ""}
+                    `}
                   >
-                    View Jobs
+                    <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                      View Jobs
+                    </span>
+                    <span className="
+                      absolute inset-0 bg-black rounded-full
+                      transform scale-0 group-hover:scale-100
+                      transition-transform duration-300 ease-out
+                      origin-center
+                    "></span>
                   </Link>
                   <Link
                     href={"/frontend/postAJob"}
                     onClick={() => setIsOpen(false)}
-                    className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-                      router.pathname === "/frontend/postAJob"
-                        ? "text-sky-100 font-bold border-b-4 border-sky-500"
-                        : ""
-                    }`}
+                    className={`
+                      px-3 m-4 text-base font-medium uppercase text-black
+                      relative overflow-hidden group
+                      transition-all duration-300 ease-in-out
+                      ${router.pathname === "/frontend/postAJob" ? "text-sky-500 font-bold" : ""}
+                    `}
                   >
-                    Post Jobs
+                    <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                      Post Jobs
+                    </span>
+                    <span className="
+                      absolute inset-0 bg-black rounded-full
+                      transform scale-0 group-hover:scale-100
+                      transition-transform duration-300 ease-out
+                      origin-center
+                    "></span>
                   </Link>
                   <Link
                     href={"/frontend/postedJob"}
                     onClick={() => setIsOpen(false)}
-                    className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-                      router.pathname === "/frontend/postedJob"
-                        ? "text-sky-100 font-bold border-b-4 border-sky-500"
-                        : ""
-                    }`}
+                    className={`
+                      px-3 m-4 text-base font-medium uppercase text-black
+                      relative overflow-hidden group
+                      transition-all duration-300 ease-in-out
+                      ${router.pathname === "/frontend/postedJob" ? "text-sky-500 font-bold" : ""}
+                    `}
                   >
-                    Posted Jobs
+                    <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                      Posted Jobs
+                    </span>
+                    <span className="
+                      absolute inset-0 bg-black rounded-full
+                      transform scale-0 group-hover:scale-100
+                      transition-transform duration-300 ease-out
+                      origin-center
+                    "></span>
                   </Link>
                 </>
               )}
               <Link
                 href={"/frontend/dashboard"}
                 onClick={() => setIsOpen(false)}
-                className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-                  router.pathname === "/frontend/dashboard"
-                    ? "text-sky-100 font-bold border-b-4 border-sky-500"
-                    : ""
-                }`}
+                className={`
+                  px-3 m-4 text-base font-medium uppercase text-black
+                  relative overflow-hidden group
+                  transition-all duration-300 ease-in-out
+                  ${router.pathname === "/frontend/dashboard" ? "text-sky-500 font-bold" : ""}
+                `}
               >
-                Dashboard
+                <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                  Dashboard
+                </span>
+                <span className="
+                  absolute inset-0 bg-black rounded-full
+                  transform scale-0 group-hover:scale-100
+                  transition-transform duration-300 ease-out
+                  origin-center
+                "></span>
               </Link>
               <Link
                 href={"/frontend/organizations"}
                 onClick={() => setIsOpen(false)}
-                className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-                  router.pathname === "/frontend/organizations"
-                    ? "text-sky-100 font-bold border-b-4 border-sky-500"
-                    : ""
-                }`}
+                className={`
+                  px-3 m-4 text-base font-medium uppercase text-black
+                  relative overflow-hidden group
+                  transition-all duration-300 ease-in-out
+                  ${router.pathname === "/frontend/organizations" ? "text-sky-500 font-bold" : ""}
+                `}
               >
-                Organizations
+                <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                  Organizations
+                </span>
+                <span className="
+                  absolute inset-0 bg-black rounded-full
+                  transform scale-0 group-hover:scale-100
+                  transition-transform duration-300 ease-out
+                  origin-center
+                "></span>
               </Link>
             </div>
-            <div className="px-2 h-full  items-center justify-center flex">
+            <div className="px-2 h-full items-center justify-center flex">
               {user !== null ? (
                 <>
                   <BiLogOut
                     onClick={handleLogout}
-                    className="cursor-pointer text-3xl hover:text-red-500 transition-all duration-700"
+                    className="cursor-pointer text-black text-3xl hover:text-red-500 transition-all duration-700"
                   />
                   <p className="text-lg px-4 font-semibold text-sky-700">{user?.name}</p>
                 </>
@@ -316,15 +357,41 @@ export default function NavBar() {
                 <>
                   <Link
                     href={"/auth/login"}
-                    className="px-4 py-2 uppercase tracking-widest mx-2 transition-all duration-700 hover:underline font-semibold text-xs hover:text-sky-300 text-black"
+                    className="
+                      px-3 mx-2 text-base font-medium uppercase text-black
+                      relative overflow-hidden group
+                      transition-all duration-300 ease-in-out
+                    "
                   >
-                    Log in
+                    <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                      Log in
+                    </span>
+                    <span className="
+                      absolute inset-0 bg-black rounded-full
+                      transform scale-0 group-hover:scale-100
+                      transition-transform duration-300 ease-out
+                      origin-center
+                    "></span>
                   </Link>
                   <Link
                     href={"/auth/register"}
-                    className="px-4 py-2 border  rounded uppercase tracking-widest mx-4 text-sky-700 bg-white transition-all duration-700 hover:bg-transparent font-semibold text-base hover:text-white"
+                    className="
+                      px-3 mx-2 border rounded uppercase
+                      tracking-widest
+                      font-semibold text-base text-black
+                      relative overflow-hidden group
+                      transition-all duration-300 ease-in-out
+                    "
                   >
-                    SIGN IN
+                    <span className="relative z-10 group-hover:text-white transition-colors duration-300">
+                      SIGN IN
+                    </span>
+                    <span className="
+                      absolute inset-0 bg-black rounded-full
+                      transform scale-0 group-hover:scale-100
+                      transition-transform duration-300 ease-out
+                      origin-center
+                    "></span>
                   </Link>
                 </>
               )}
@@ -335,316 +402,3 @@ export default function NavBar() {
     </>
   );
 }
-
-// import React, { useState, useEffect } from "react";
-// import Link from "next/link";
-// import { useDispatch, useSelector } from "react-redux";
-// import { BiLogOut } from "react-icons/bi";
-// import Cookies from "js-cookie";
-// import { useRouter } from "next/router";
-// import { GiHamburgerMenu } from "react-icons/gi";
-// import { setUserData } from "@/Utils/UserSlice";
-// import { AiFillCaretDown, AiFillCaretUp } from "react-icons/ai";
-
-// export default function NavBar() {
-//   const dispatch = useDispatch();
-//   const router = useRouter();  // useRouter to get current path
-
-//   const [openJobs, setOpenJobs] = useState(false);
-
-//   useEffect(() => {
-//     dispatch(
-//       setUserData(
-//         localStorage.getItem("user")
-//           ? JSON.parse(localStorage.getItem("user"))
-//           : null
-//       )
-//     );
-//   }, [dispatch]);
-
-//   const user = useSelector((state) => state.User.userData);
-//   const [isOpen, setIsOpen] = useState(false);
-//   const [scrolled, isScrolled] = useState(false);
-//   const hamburgerRef = React.useRef(null);
-
-//   const useOutsideClick = (callback, exceptions) => {
-//     const ref = React.useRef();
-
-//     React.useEffect(() => {
-//       const handleClick = (event) => {
-//         if (ref.current && 
-//           !ref.current.contains(event.target) &&
-//           !exceptions.some((exception) => exception.current.contains(event.target))
-//         ) {
-//           callback();
-//         }
-//       };
-
-//       document.addEventListener("click", handleClick, true);
-
-//       return () => {
-//         document.removeEventListener("click", handleClick, true);
-//       };
-//     }, [ref, exceptions]);
-
-//     return ref;
-//   };
-
-//   useEffect(() => {
-//     window.addEventListener("scroll", () => {
-//       if (window.scrollY > 20) {
-//         isScrolled(true);
-//       } else {
-//         isScrolled(false);
-//       }
-//     });
-//     return () => {
-//       window.removeEventListener("scroll", () => {
-//         if (window.scrollY > 20) {
-//           isScrolled(true);
-//         } else {
-//           isScrolled(false);
-//         }
-//       });
-//     };
-//   }, [scrolled]);
-
-//   const handleLogout = async () => {
-//     Cookies.remove("token");
-//     localStorage.removeItem("user");
-//     router.reload();
-//   };
-
-//   const handleClickOutside = () => {
-//     setIsOpen(false);
-//   };
-
-//   const ref = useOutsideClick(handleClickOutside, [hamburgerRef]);
-
-//   return (
-//     <>
-//       <div
-//         className={`w-full ${
-//           scrolled ? "bg-custom-color" : "bg-custom-color"
-//         } px-6 h-20 bg-gray-600 text-white flex items-center justify-between fixed top-0 left-0 z-50`}
-//       >
-//         <div className="px-2 h-full flex items-center justify-center">
-//           <p className="lowercase font-semibold tracking-widest text-lg">
-//             <Link
-//               href={"/"}
-//               className="px-3 mx-4 text-2xl font-medium transition-all duration-700 hover:translate-y-2 uppercase"
-//             >
-//               𝓙ob𝓢𝓮𝔀𝓪
-//             </Link>
-//           </p>
-//         </div>
-
-//         <div className="px-2 h-full hidden items-center justify-center lg:flex">
-//           <Link
-//             href={"/"}
-//             className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//               router.pathname === "/" ? "text-sky-200 font-bold" : ""
-//             }`}
-//           >
-//             Home
-//           </Link>
-//           <Link
-//             href={"/frontend/postAJob"}
-//             className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//               router.pathname === "/frontend/postAJob"
-//                 ? "text-sky-200 font-bold"
-//                 : ""
-//             }`}
-//           >
-//             Post Jobs
-//           </Link>
-//           <Link
-//             href={"/frontend/displayJobs"}
-//             className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//               router.pathname === "/frontend/displayJobs"
-//                 ? "text-sky-200 font-bold"
-//                 : ""
-//             }`}
-//           >
-//             View Jobs
-//           </Link>
-//           <Link
-//             href={"/frontend/postedJob"}
-//             className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//               router.pathname === "/frontend/postedJob"
-//                 ? "text-sky-200 font-bold"
-//                 : ""
-//             }`}
-//           >
-//             Posted Jobs
-//           </Link>
-//           <Link
-//             href={"/frontend/dashboard"}
-//             className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//               router.pathname === "/frontend/dashboard"
-//                 ? "text-sky-200 font-bold"
-//                 : ""
-//             }`}
-//           >
-//             Dashboard
-//           </Link>
-//           <Link
-//             href={"/frontend/organizations"}
-//             className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//               router.pathname === "/frontend/organizations"
-//                 ? "text-sky-200 font-bold"
-//                 : ""
-//             }`}
-//           >
-//             Organizations
-//           </Link>
-//         </div>
-
-//         <div className="px-2 h-full hidden items-center justify-center lg:flex ">
-//           {user !== null ? (
-//             <>
-//               <BiLogOut
-//                 onClick={handleLogout}
-//                 className="cursor-pointer text-3xl hover:text-red-500 transition-all duration-700"
-//               />
-//               <p className="text-lg px-4 font-semibold">{user?.name}</p>
-//             </>
-//           ) : (
-//             <>
-//               <Link
-//                 href={"/auth/login"}
-//                 className="px-4 py-2 border border-white rounded uppercase tracking-widest mx-4 transition-all duration-700 hover:bg-white font-semibold text-base hover:text-sky-700"
-//               >
-//                 Login
-//               </Link>
-//               <Link
-//                 href={"/auth/register"}
-//                 className="px-4 py-2 border border-white rounded uppercase tracking-widest mx-4 transition-all duration-700 hover:bg-white font-semibold text-base hover:text-sky-700"
-//               >
-//                 REGISTER
-//               </Link>
-//             </>
-//           )}
-//         </div>
-
-//         <div className="flex lg:hidden  px-2 py-2 ">
-//           <GiHamburgerMenu
-//             className="text-4xl"
-//             onClick={() => setIsOpen((state) => !state)}
-//           />
-//         </div>
-
-//         {isOpen && (
-//           <div
-//             ref={hamburgerRef}
-//             className="flex w-full py-2 animate-fade-in-down bg-indigo-600 transition-all fade duration-1000 absolute top-20 left-0 items-center justify-center flex-col"
-//           >
-//             <div className="px-2 h-full flex items-center justify-center flex-col py-2">
-//               <Link
-//                 href={"/"}
-//                 onClick={() => setIsOpen(false)}
-//                 className={`px-3  m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//                   router.pathname === "/" ? "text-sky-200 font-bold" : ""
-//                 }`}
-//               >
-//                 Home
-//               </Link>
-//               <button
-//                 onClick={() => setOpenJobs((state) => !state)}
-//                 className="px-3  m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase flex items-center justify-center"
-//               >
-//                 Jobs {openJobs ? <AiFillCaretUp /> : <AiFillCaretDown />}
-//               </button>
-
-//               {openJobs && (
-//                 <>
-//                   <Link
-//                     href={"/frontend/displayJobs"}
-//                     onClick={() => setIsOpen(false)}
-//                     className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//                       router.pathname === "/frontend/displayJobs"
-//                         ? "text-sky-200 font-bold"
-//                         : ""
-//                     }`}
-//                   >
-//                     View Jobs
-//                   </Link>
-//                   <Link
-//                     href={"/frontend/postAJob"}
-//                     onClick={() => setIsOpen(false)}
-//                     className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//                       router.pathname === "/frontend/postAJob"
-//                         ? "text-sky-200 font-bold"
-//                         : ""
-//                     }`}
-//                   >
-//                     Post Jobs
-//                   </Link>
-//                   <Link
-//                     href={"/frontend/postedJob"}
-//                     onClick={() => setIsOpen(false)}
-//                     className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//                       router.pathname === "/frontend/postedJob"
-//                         ? "text-sky-200 font-bold"
-//                         : ""
-//                     }`}
-//                   >
-//                     Posted Jobs
-//                   </Link>
-//                 </>
-//               )}
-//               <Link
-//                 href={"/frontend/dashboard"}
-//                 onClick={() => setIsOpen(false)}
-//                 className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//                   router.pathname === "/frontend/dashboard"
-//                     ? "text-sky-200 font-bold"
-//                     : ""
-//                 }`}
-//               >
-//                 Dashboard
-//               </Link>
-//               <Link
-//                 href={"/frontend/organizations"}
-//                 onClick={() => setIsOpen(false)}
-//                 className={`px-3 m-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
-//                   router.pathname === "/frontend/organizations"
-//                     ? "text-sky-200 font-bold"
-//                     : ""
-//                 }`}
-//               >
-//                 Organizations
-//               </Link>
-//             </div>
-//             <div className="px-2 h-full  items-center justify-center flex">
-//               {user !== null ? (
-//                 <>
-//                   <BiLogOut
-//                     onClick={handleLogout}
-//                     className="cursor-pointer text-3xl hover:text-red-500 transition-all duration-700"
-//                   />
-//                   <p className="text-lg px-4 font-semibold">{user?.name}</p>
-//                 </>
-//               ) : (
-//                 <>
-//                   <Link
-//                     href={"/auth/login"}
-//                     className="px-4 py-2 border border-white rounded uppercase tracking-widest mx-4 transition-all duration-700 hover:bg-white font-semibold text-base hover:text-sky-700"
-//                   >
-//                     Login
-//                   </Link>
-//                   <Link
-//                     href={"/auth/register"}
-//                     className="px-4 py-2 border border-white rounded uppercase tracking-widest mx-4 text-sky-700 bg-white transition-all duration-700 hover:bg-transparent font-semibold text-base hover:text-white"
-//                   >
-//                     REGISTER
-//                   </Link>
-//                 </>
-//               )}
-//             </div>
-//           </div>
-//         )}
-//       </div>
-//     </>
-//   );
-// }
diff --git a/components/NgoCard.jsx b/components/NgoCard.jsx
index aff9f4d..bce9d8a 100644
--- a/components/NgoCard.jsx
+++ b/components/NgoCard.jsx
@@ -27,10 +27,10 @@ const NgosCard = ({ data }) => {
       }}
       className="w-full md:w-[420px] m-2"
     >
-      <Card className="h-full min-h-[300px] transition-all duration-400 hover:shadow-xl flex flex-col justify-between">
-        <div>
+      <Card className="h-full min-h-[300px] transition-all duration-400 hover:shadow-xl flex flex-col justify-between bg-white bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-2xl border border-white border-opacity-20 shadow-lg">
+        <div className="bg-white bg-opacity-60 backdrop-filter backdrop-blur-xl rounded-t-2xl">
           <CardHeader className="flex flex-col items-center space-y-4 pb-2">
-            <div className="h-20 w-20 shrink-0 overflow-hidden rounded-full">
+            <div className="h-20 w-20 shrink-0 overflow-hidden rounded-full border-2 border-white border-opacity-50">
               <img
                 src={data.image}
                 alt={data.name}
@@ -38,24 +38,24 @@ const NgosCard = ({ data }) => {
               />
             </div>
             <div className="space-y-2 text-center w-full">
-              <h3 className="font-semibold text-xl leading-tight min-h-[3rem] flex items-center justify-center">
+              <h3 className="font-bold text-xl leading-tight min-h-[3rem] flex items-center justify-center text-gray-800">
                 {data.name}
               </h3>
-              <Badge variant="secondary" className="text-xs bg-[#C9D3FA]">
+              <Badge variant="secondary" className="text-xs bg-white bg-opacity-70 text-gray-700">
                 {data.category}
               </Badge>
             </div>
           </CardHeader>
 
-          <CardContent className="pb-4">
-            <div className="text-md text-gray-600 leading-relaxed">
+          <CardContent className="pb-4 bg-white bg-opacity-50 backdrop-filter backdrop-blur-xl">
+            <div className="text-md text-gray-700 leading-relaxed">
               {isExpanded ? data.description : `${data.description.substring(0, 200)}`}
               {data.description.length > 150 && (
                 <>
                   {!isExpanded && "..."}
                   <button
                     onClick={toggleReadMore}
-                    className="ml-1 text-indigo-600 hover:text-indigo-800 font-medium text-sm"
+                    className="ml-1 text-blue-600 hover:text-blue-800 font-medium text-sm"
                   >
                     {isExpanded ? "Read less" : "Read more"}
                   </button>
@@ -64,21 +64,8 @@ const NgosCard = ({ data }) => {
             </div>
           </CardContent>
         </div>
-        {/* <div className="mb-4 flex   items-start justify-center py-2 flex-col">
-//         <div className="flex  px-2 py-2 items-center justify-center ">
-//           <BsDot className="text-4xl font-extrabold text-sky-700" />
-//           <h1 className="text-lg text-gray-900">Salary :</h1>
-//           <p className="text-base  font-semibold">10$ / month</p>
-//         </div>
-//         <div className="flex px-2 py-2 items-center  justify-center">
-//           <BsDot className="text-4xl font-extrabold text-sky-700" />
-//           <h1 className="text-lg text-gray-900">Deadline :</h1>
-//           <p className="text-base  font-semibold">
-//             {new Date(Date.now()).toLocaleDateString("en-GB")}
-//           </p>
-//         </div>
-//       </div> */}
-        <CardFooter className="mt-auto">
+       
+        <CardFooter className="mt-auto bg-white bg-opacity-60 backdrop-filter backdrop-blur-xl rounded-b-2xl">
           <a
             href={data.link}
             target="_blank"
@@ -87,7 +74,7 @@ const NgosCard = ({ data }) => {
           >
             <Button
               variant="outline"
-              className="w-full group transition-all duration-200 hover:bg-[#C9D3FA] hover:text-[#343680]"
+              className="w-full group transition-all duration-200 bg-white bg-opacity-70 hover:bg-opacity-90 text-gray-800 border border-white border-opacity-50 rounded-xl"
             >
               More details
               <ExternalLink className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-300" />
diff --git a/package-lock.json b/package-lock.json
index ab41cdb..cb05a76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "eslint-config-next": "13.2.3",
         "formidable": "^2.1.1",
         "framer-motion": "^11.11.9",
+        "gsap": "^3.12.5",
         "joi": "^17.8.3",
         "js-cookie": "^3.0.1",
         "jsonwebtoken": "^9.0.0",
@@ -3579,6 +3580,12 @@
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
     },
+    "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==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -9559,6 +9566,11 @@
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
     },
+    "gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
diff --git a/package.json b/package.json
index f17cd63..48db82d 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "eslint-config-next": "13.2.3",
     "formidable": "^2.1.1",
     "framer-motion": "^11.11.9",
+    "gsap": "^3.12.5",
     "joi": "^17.8.3",
     "js-cookie": "^3.0.1",
     "jsonwebtoken": "^9.0.0",