diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ea86769a..977cd343 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,8 +14,10 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@react-oauth/google": "^0.12.1",
         "axios": "^1.6.3",
+        "framer-motion": "^11.11.8",
         "install": "^0.13.0",
         "jwt-decode": "^4.0.0",
+        "lucide-react": "^0.452.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.26.2",
@@ -4287,6 +4289,31 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.8",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.8.tgz",
+      "integrity": "sha512-mnGQNEoz99GtFXBBPw+Ag5K4FcfP5XrXxrxHz+iE4Lmg7W3sf2gKmGuvfkZCW/yIfcdv5vJd6KiSPETH1Pw68Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -5368,6 +5395,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.452.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.452.0.tgz",
+      "integrity": "sha512-kNefjOUOGm+Mu3KDiryONyPba9r+nhcrz5oJs3N6JDzGboQNEXw5GB3yB8rnV9/FA4bPyggNU6CRSihZm9MvSw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -7042,6 +7078,12 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/tslib": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 08bf99f8..6eb95d0c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,8 +17,10 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-oauth/google": "^0.12.1",
     "axios": "^1.6.3",
+    "framer-motion": "^11.11.8",
     "install": "^0.13.0",
     "jwt-decode": "^4.0.0",
+    "lucide-react": "^0.452.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.26.2",
diff --git a/frontend/src/Components/Footer.jsx b/frontend/src/Components/Footer.jsx
index ca1790de..5b929450 100644
--- a/frontend/src/Components/Footer.jsx
+++ b/frontend/src/Components/Footer.jsx
@@ -12,6 +12,8 @@ import {
 import { Link, useLocation } from "react-router-dom";
 import { toast } from "react-toastify";
 import GoogleTranslate from "./GoogleTranslate";
+import { motion, AnimatePresence } from "framer-motion";
+
 const Footer = () => {
   const [showModal, setShowModal] = useState(false);
   const [rating, setRating] = useState(0);
@@ -23,7 +25,7 @@ const Footer = () => {
   const backendURL = import.meta.env.VITE_BACKEND_URL;
   const path = useLocation().pathname;
 
-  // Check if the content is smaller than the screen
+   // Check if the content is smaller than the screen
   useEffect(() => {
     const handleResize = () => {
       const contentHeight = document.documentElement.scrollHeight;
@@ -81,25 +83,48 @@ const Footer = () => {
   const openModal = () => {
     setSubmitStatus(null);
     setShowModal(true);
-
     setName("");
     setEmail("");
     setMessage("");
     setRating(0);
-    setShowModal(true);
+  };
+
+  const socialIconVariants = {
+    hover: { 
+      scale: 1.2, 
+      rotate: 5,
+      transition: {
+        duration: 0.3,
+        yoyo: Infinity
+      }
+    },
+    tap: { scale: 0.9 },
+  };
+
+  const buttonVariants = {
+    hover: { scale: 1.05, backgroundColor: "#DC2626", color: "#FFFFFF" },
+    tap: { scale: 0.95 },
   };
 
   return (
-    <div className="fixed bottom-0 bg-white  w-full">
+    <div className={`fixed bottom-0 bg-white w-full transition-all duration-300 ease-in-out ${isSticky ? 'shadow-lg' : ''}`}>
       {path !== "/user" && (
         <>
-          <footer className="text-gray-600 body-font">
+          <motion.footer 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="text-gray-600 body-font"
+          >
             <div className="container px-2 py-2 flex items-center sm:flex-row flex-col">
-              <span className="flex title-font font-bold items-center md:justify-start justify-center text-red-700">
+              <motion.span 
+                whileHover={{ scale: 1.05 }}
+                className="flex title-font font-bold items-center md:justify-start justify-center text-red-700"
+              >
                 <span className="ml-3 text-xl font-[Mrriweather]">
                   TastyTrails
                 </span>
-              </span>
+              </motion.span>
               <p className="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4 sm:text-center">
                 © {new Date().getFullYear()} TastyTrails Developer —
                 <Link
@@ -111,171 +136,202 @@ const Footer = () => {
                   @A_l_f_i_y_A
                 </Link>
                 <Link to="/contributors" className="ml-4">
-                  <button className="inline-flex items-center bg-transparent border-0 py-1 px-3 text-red-700 hover:bg-gray-200 rounded transition-all">
+                  <motion.button 
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    className="inline-flex items-center bg-transparent border-0 py-1 px-3 text-red-700 hover:bg-gray-200 rounded transition-all"
+                  >
                     Contributors
-                  </button>
+                  </motion.button>
                 </Link>
               </p>
               <span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
-                <Link
-                  to={"https://www.instagram.com/alfiya.17.siddiq/"}
-                  className="text-ref-500 text-red-700"
-                >
-                  <FontAwesomeIcon icon={faInstagramSquare} />
-                </Link>
-                <Link
-                  to={"https://www.linkedin.com/in/alfiya-siddique-987a59240/"}
-                  className="ml-3 text-red-700"
-                >
-                  <FontAwesomeIcon icon={faLinkedinIn} className="" />
-                </Link>
-                <Link
-                  to={"https://github.com/AlfiyaSiddique"}
-                  className="ml-3 text-red-700"
-                >
-                  <FontAwesomeIcon icon={faGithubSquare} />
-                </Link>
-
-            
+                {[
+                  { icon: faInstagramSquare, link: "https://www.instagram.com/alfiya.17.siddiq/" },
+                  { icon: faLinkedinIn, link: "https://www.linkedin.com/in/alfiya-siddique-987a59240/" },
+                  { icon: faGithubSquare, link: "https://github.com/AlfiyaSiddique" },
+                ].map((social, index) => (
+                  <motion.div
+                    key={index}
+                    whileHover="hover"
+                    whileTap="tap"
+                    variants={socialIconVariants}
+                  >
+                    <Link to={social.link} className={`${index > 0 ? 'ml-3' : ''} text-red-700`}>
+                      <FontAwesomeIcon icon={social.icon} />
+                    </Link>
+                  </motion.div>
+                ))}
               </span>
-                <div className="translate flex ml-4 my-auto">
-                  <GoogleTranslate />
-                </div>
-
-              <button
+              <div className="translate flex ml-4 my-auto">
+                <GoogleTranslate />
+              </div>
+              <motion.button
                 onClick={openModal} // Call openModal when feedback button is clicked
-                className="ml-4 py-2 px-4 bg-transparent border border-red-700 text-red-700 rounded hover:bg-red-700 hover:text-white"
+                variants={buttonVariants}
+                whileHover="hover"
+                whileTap="tap"
+                className="ml-4 py-2 px-4 bg-transparent border border-red-700 text-red-700 rounded transition-all duration-300"
               >
                 Feedback
-              </button>
+              </motion.button>
             </div>
-          </footer>
+          </motion.footer>
 
-          {/* Modal */}
-          {showModal && (
-            <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
-              <div className="bg-white p-6 rounded-lg w-full max-w-lg">
-                {submitStatus === null ? (
-                  <>
-                    {/* Show the form if no status has been set */}
-                    <h2 className="text-2xl font-bold mb-4">Feedback</h2>
-                    <form className="space-y-4" onSubmit={handleSubmit}>
-                      <div>
-                        <label className="block text-gray-700">Name</label>
-                        <input
-                          type="text"
-                          className="w-full px-4 py-2 border border-gray-300 rounded"
-                          placeholder="Your Name"
-                          value={name}
-                          onChange={(e) => setName(e.target.value)}
-                          required
+          <AnimatePresence>
+            {showModal && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50"
+              >
+                <motion.div
+                  initial={{ scale: 0.9, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0.9, opacity: 0 }}
+                  transition={{ type: "spring", damping: 15 }}
+                  className="bg-white p-6 rounded-lg w-full max-w-lg"
+                >
+                  {submitStatus === null ? (
+                    <>
+                      <h2 className="text-2xl font-bold mb-4">Feedback</h2>
+                      <form className="space-y-4" onSubmit={handleSubmit}>
+                        <div>
+                          <label className="block text-gray-700">Name</label>
+                          <input
+                            type="text"
+                            className="w-full px-4 py-2 border border-gray-300 rounded"
+                            placeholder="Your Name"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            required
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-gray-700">Email</label>
+                          <input
+                            type="email"
+                            className="w-full px-4 py-2 border border-gray-300 rounded"
+                            placeholder="Your Email"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            required
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-gray-700">Message</label>
+                          <textarea
+                            className="w-full px-4 py-2 border border-gray-300 rounded"
+                            placeholder="Your Message"
+                            value={message}
+                            onChange={(e) => setMessage(e.target.value)}
+                            required
+                          ></textarea>
+                        </div>
+                        <div>
+                          <label className="block text-gray-700">Rate Us</label>
+                          <div className="flex text-2xl">
+                            {[1, 2, 3, 4, 5].map((star) => (
+                              <motion.span
+                                key={star}
+                                whileHover={{ scale: 1.2 }}
+                                whileTap={{ scale: 0.9 }}
+                                className={`cursor-pointer ${
+                                  rating >= star
+                                    ? "text-yellow-400"
+                                    : "text-gray-400"
+                                }`}
+                                onClick={() => handleRating(star)}
+                              >
+                                {rating >= star ? "★" : "☆"}
+                              </motion.span>
+                            ))}
+                          </div>
+                          {!rating && (
+                            <p className="text-red-600 text-sm">
+                              Rating is required!
+                            </p>
+                          )}
+                        </div>
+                        <div className="flex justify-end">
+                          <motion.button
+                            type="button"
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                            className="mr-4 py-2 px-4 bg-red-500 text-white rounded hover:bg-red-700"
+                            onClick={() => setShowModal(false)}
+                          >
+                            Close
+                          </motion.button>
+                          <motion.button
+                            type="submit"
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                            className="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700"
+                          >
+                            Submit
+                          </motion.button>
+                        </div>
+                      </form>
+                    </>
+                  ) : submitStatus === "success" ? (
+                    <div className="text-center">
+                      <motion.div
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        transition={{ type: "spring", stiffness: 260, damping: 20 }}
+                      >
+                        <FontAwesomeIcon
+                          icon={faCheckCircle}
+                          className="text-green-500 text-5xl mb-4"
                         />
-                      </div>
-
-                      <div>
-                        <label className="block text-gray-700">Email</label>
-                        <input
-                          type="email"
-                          className="w-full px-4 py-2 border border-gray-300 rounded"
-                          placeholder="Your Email"
-                          value={email}
-                          onChange={(e) => setEmail(e.target.value)}
-                          required
+                      </motion.div>
+                      <h2 className="text-2xl font-bold mb-4">
+                        Feedback sent successfully!
+                      </h2>
+                      <motion.button
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                        className="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700"
+                        onClick={() => setShowModal(false)}
+                      >
+                        Close
+                      </motion.button>
+                    </div>
+                  ) : (
+                    <div className="text-center">
+                      <motion.div
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        transition={{ type: "spring", stiffness: 260, damping: 20 }}
+                      >
+                        <FontAwesomeIcon
+                          icon={faTimesCircle}
+                          className="text-red-500 text-5xl mb-4"
                         />
-                      </div>
-
-                      <div>
-                        <label className="block text-gray-700">Message</label>
-                        <textarea
-                          className="w-full px-4 py-2 border border-gray-300 rounded"
-                          placeholder="Your Message"
-                          value={message}
-                          onChange={(e) => setMessage(e.target.value)}
-                          required
-                        ></textarea>
-                      </div>
-
-                      <div>
-                        <label className="block text-gray-700">Rate Us</label>
-                        <div className="flex text-2xl">
-                          {[1, 2, 3, 4, 5].map((star) => (
-                            <span
-                              key={star}
-                              className={`cursor-pointer ${
-                                rating >= star
-                                  ? "text-yellow-400"
-                                  : "text-gray-400"
-                              }`}
-                              onClick={() => handleRating(star)}
-                            >
-                              {rating >= star ? "★" : "☆"}
-                            </span>
-                          ))}
-                        </div>
-                        {!rating && (
-                          <p className="text-red-600 text-sm">
-                            Rating is required!
-                          </p>
-                        )}
-                      </div>
-
-                      <div className="flex justify-end">
-                        <button
-                          type="button"
-                          className="mr-4 py-2 px-4 bg-red-500 text-white rounded hover:bg-red-700"
-                          onClick={() => setShowModal(false)}
-                        >
-                          Close
-                        </button>
-                        <button
-                          type="submit"
-                          className="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700"
-                        >
-                          Submit
-                        </button>
-                      </div>
-                    </form>
-                  </>
-                ) : submitStatus === "success" ? (
-                  <div className="text-center">
-                    <FontAwesomeIcon
-                      icon={faCheckCircle}
-                      className="text-green-500 text-5xl mb-4"
-                    />
-                    <h2 className="text-2xl font-bold mb-4">
-                      Feedback sent successfully!
-                    </h2>
-                    <button
-                      className="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700"
-                      onClick={() => setShowModal(false)}
-                    >
-                      Close
-                    </button>
-                  </div>
-                ) : (
-                  <div className="text-center">
-                    <FontAwesomeIcon
-                      icon={faTimesCircle}
-                      className="text-red-500 text-5xl mb-4"
-                    />
-                    <h2 className="text-2xl font-bold mb-4">
-                      Error in sending Feedback!
-                    </h2>
-                    <button
-                      className="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700"
-                      onClick={() => setShowModal(false)}
-                    >
-                      Close
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
+                      </motion.div>
+                      <h2 className="text-2xl font-bold mb-4">
+                        Error in sending Feedback!
+                      </h2>
+                      <motion.button
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                        className="py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700"
+                        onClick={() => setShowModal(false)}
+                      >
+                        Close
+                      </motion.button>
+                    </div>
+                  )}
+                </motion.div>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </>
       )}
     </div>
   );
 };
 
-export default Footer;
+export default Footer;
\ No newline at end of file