diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 3ead61b..186493e 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { FaClock, FaFacebook, FaFax, FaLinkedin, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
+import { FaClock, FaFacebookF, FaFax, FaLinkedinIn, FaMapMarkerAlt, FaPhone } from "react-icons/fa";
 import ScrollToTop from "./ScrollToTop";
 import { fetchContact } from "@/services/payload/contact";
 import { Suspense } from "react";
@@ -38,7 +38,7 @@ async function FooterWithData() {
           <h3 className="text-lg font-semibold mb-4">Contact Us</h3>
           <ul className="space-y-4 border-gray-400 pl-0">
             <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
-              <FaMapMarkerAlt className="text-2xl text-gray-300" />
+              <FaMapMarkerAlt className="text-2xl text-white-300" />
               <div className="leading-tight">
                 <a
                   href={contact?.location?.href ?? ""}
@@ -49,11 +49,11 @@ async function FooterWithData() {
                   {contact?.location?.street ?? ""}
                 </a>
                 <br />
-                <span className="text-sm text-gray-300">{contact?.fullLocation ?? ""}</span>
+                <span className="text-sm text-white-300">{contact?.fullLocation ?? ""}</span>
               </div>
             </li>
             <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
-              <FaPhone className="text-2xl text-gray-300" />
+              <FaPhone className="text-2xl text-white-300" />
               <a
                 href={`tel:${contact?.phone ?? ""}`}
                 target="_blank"
@@ -64,7 +64,7 @@ async function FooterWithData() {
               </a>
             </li>
             <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
-              <FaFax className="text-2xl text-gray-300" />
+              <FaFax className="text-2xl text-white-300" />
               <a
                 href={`tel:${contact?.fax ?? ""}`}
                 target="_blank"
@@ -75,7 +75,7 @@ async function FooterWithData() {
               </a>
             </li>
             <li className="flex items-center space-x-4 border-b border-gray-500 pb-2">
-              <FaFacebook className="text-2xl text-gray-300" />
+              <FaFacebookF className="text-2xl text-white-300" />
               <a
                 href={contact?.facebook ?? ""}
                 target="_blank"
@@ -86,7 +86,7 @@ async function FooterWithData() {
               </a>
             </li>
             <li className="flex items-center space-x-4">
-              <FaLinkedin className="text-2xl text-gray-300" />
+              <FaLinkedinIn className="text-2xl text-white-300" />
               <a
                 href={contact?.linkedin ?? ""}
                 target="_blank"
@@ -151,12 +151,12 @@ function FooterSkeleton() {
               <div className="h-2 bg-gray-300 rounded flex-1"></div>
             </li>
             <li className="flex items-center space-x-4">
-              <FaFacebook className="text-2xl text-gray-300" />
+              <FaFacebookF className="text-2xl text-gray-300" />
               <div className="h-2 bg-gray-300 rounded flex-1"></div>
               <div className="h-2 bg-gray-300 rounded flex-1"></div>
             </li>
             <li className="flex items-center space-x-4">
-              <FaLinkedin className="text-2xl text-gray-300" />
+              <FaLinkedinIn className="text-2xl text-gray-300" />
               <div className="h-2 bg-gray-300 rounded flex-1"></div>
               <div className="h-2 bg-gray-300 rounded flex-1"></div>
             </li>
@@ -167,8 +167,8 @@ function FooterSkeleton() {
           <h3 className="text-lg font-semibold mb-4">Business Hours</h3>
           <div className="flex items-center space-x-2">
             <FaClock className="text-xl" />
-            <div className="h-2 bg-gray-300 rounded flex-1"></div>
-            <div className="h-2 bg-gray-300 rounded flex-1"></div>
+            <div className="h-2 bg-white-300 rounded flex-1"></div>
+            <div className="h-2 bg-white-300 rounded flex-1"></div>
           </div>
         </div>
       </div>