diff --git a/user/src/components/pages/Footer.jsx b/user/src/components/pages/Footer.jsx
index ab1da6c..fa3ac80 100644
--- a/user/src/components/pages/Footer.jsx
+++ b/user/src/components/pages/Footer.jsx
@@ -1,19 +1,14 @@
 import React from "react";
-import facebook from "./../../assets/facebook2.png";
-import instagram from "./../../assets/instagram1.png";
-import whatsapp from "./../../assets/whatsapp.png";
-import youtube from "./../../assets/youtube2.png";
-import twitter from "./../../assets/twitter.png";
 import qrcode from "./../../assets/QRcode.jpg";
 import app from "./../../assets/app_store.svg";
 import play from "./../../assets/play_store.svg";
+import { FaInstagram, FaWhatsapp, FaFacebook, FaYoutube, FaXTwitter } from "react-icons/fa6";
 
 const Footer = () => {
   return (
     <footer className="bg-orange-950 dark:bg-gray-900 text-orange-200 dark:text-gray-300">
       <div className="container mx-auto px-5 py-16">
         <div className="flex flex-wrap md:text-left text-center order-first">
-          
           {/* Mobile App & Social Section */}
           <div className="lg:w-1/3 md:w-1/2 w-full px-4">
             <h2 className="font-extrabold text-white dark:text-orange-400 text-lg mb-3 tracking-widest jost">
@@ -40,13 +35,21 @@ const Footer = () => {
             </div>
             <div className="mt-8">
               <span className="inline-flex justify-center md:justify-start w-full gap-4">
-                {[facebook, whatsapp, youtube, instagram, twitter].map((icon, idx) => (
+                {[
+                  { icon: <FaFacebook />, link: "/" },
+                  { icon: <FaWhatsapp />, link: "/" },
+                  { icon: <FaYoutube />, link: "/" },
+                  { icon: <FaInstagram />, link: "/" },
+                  { icon: <FaXTwitter />, link: "/" },
+                ].map((item, idx) => (
                   <a
                     key={idx}
-                    href="#"
-                    className="text-gray-400 dark:text-gray-400 hover:text-white dark:hover:text-orange-400 transition-colors"
+                    href={item.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-gray-400 hover:text-blue-500 dark:hover:text-orange-400 transition-colors text-2xl"
                   >
-                    <img src={icon} alt="" className="w-8" />
+                    {item.icon}
                   </a>
                 ))}
               </span>
@@ -84,7 +87,10 @@ const Footer = () => {
                 ],
               },
             ].map((section, idx) => (
-              <div key={idx} className="lg:w-1/3 md:w-full w-1/2 px-4 mb-10 md:mb-0">
+              <div
+                key={idx}
+                className="lg:w-1/3 md:w-full w-1/2 px-4 mb-10 md:mb-0"
+              >
                 <h2 className="font-extrabold text-white dark:text-orange-400 text-lg mb-3 tracking-widest jost">
                   {section.title}
                 </h2>
@@ -106,7 +112,9 @@ const Footer = () => {
                   <div className="flex flex-col gap-1">
                     {section.content.map((item, i) =>
                       typeof item === "string" ? (
-                        <p key={i} className="text-sm">{item}</p>
+                        <p key={i} className="text-sm">
+                          {item}
+                        </p>
                       ) : item.type === "email" ? (
                         <a
                           key={i}
@@ -115,8 +123,14 @@ const Footer = () => {
                         >
                           {item.value}
                         </a>
+                      ) : item.type === "phone" ? (
+                        <a key={i} className="font-semibold" href={`tel:${item.value}`}>
+                          {item.value}
+                        </a>
                       ) : (
-                        <p key={i} className="font-semibold">{item.value}</p>
+                        <p key={i} className="font-semibold">
+                          {item.value}
+                        </p>
                       )
                     )}
                   </div>
@@ -129,7 +143,8 @@ const Footer = () => {
       <div className="bg-orange-900 dark:bg-gray-800">
         <div className="container mx-auto py-4 px-5">
           <p className="text-orange-200 dark:text-gray-300 text-center text-sm">
-            Copyright SaralSeva © {new Date().getFullYear()}. All Rights Reserved.
+            Copyright SaralSeva © {new Date().getFullYear()}. All Rights
+            Reserved.
           </p>
         </div>
       </div>