diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..c17cae3
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "Denlly",
+    "OFFDAY"
+  ]
+}
\ No newline at end of file
diff --git a/src/components/global/Footer.tsx b/src/components/global/Footer.tsx
index 05e77ed..49192a3 100644
--- a/src/components/global/Footer.tsx
+++ b/src/components/global/Footer.tsx
@@ -2,132 +2,139 @@ import React from "react";
 import {
   BiLogoFacebook,
   BiLogoInstagram,
-  BiLogoTelegram,
   BiLogoTwitter,
   BiLogoWhatsapp,
   BiPhoneCall,
-  BiSolidMap,
 } from "react-icons/bi";
 import { BsArrowRightShort } from "react-icons/bs";
+import { Link } from "react-router-dom";
+import { NavLinks } from "../../data";
 
 const Footer = () => {
+  const servicesLink = NavLinks.find((navItem) => navItem.name === "Services");
+  const availableServices = servicesLink?.subLinks;
   return (
     <React.Fragment>
-      <footer className="relative isolate bottom-0 left-0 bg-background w-full p-4 font-Poppins">
-        <div className="max-w-[1560px] mx-auto ">
+      <footer className="relative isolate bottom-0 bg-background w-full font-Poppins">
+        <div className="max-w-[1560px] mx-8 2xl:mx-auto">
           {/* Upper Footer Content */}
-          <div className="flex items-center justify-between border-b border-gray-300 pb-2">
-            <h2 className="font-semibold text-3xl">Denlly Group</h2>
-            <div className="flex items-center justify-center gap-2 font-semibold">
-              <BiPhoneCall stroke="5" className="h-10 w-10 text-violet-500" />
-              <div>
-                <span className="text-sm">Call Any Time</span>
-                <p>+254 729 994 794</p>
-              </div>
-            </div>
+          <div className="flex flex-col lg:flex-row items-center justify-between px-6 sm:px-8 lg:px-24 gap-4 border bg-primary/70 border-slate-200 py-4 -translate-y-1/2">
+            <h1 className="font-semibold text-center">See Our New Updates</h1>
+            <form method="post" className="flex items-center w-full lg:w-auto">
+              <input
+                type="email"
+                placeholder="Email here..."
+                aria-label="Email address"
+                className="p-2 bg-gray-200 outline-none placeholder:text-sm placeholder:text-green-950 flex-grow lg:flex-grow-0 md:w-80 lg:w-96"
+              />
+              <button type="submit" className="group p-2 bg-secondary">
+                <BsArrowRightShort className="text-2xl -rotate-45 group-hover:rotate-0 transition-all duration-500 ease-in-out " />
+              </button>
+            </form>
           </div>
 
           {/* Footer content */}
-          <div className="relative isolate grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
-            <div className="mt-4">
-              <div className="space-y">
-                <div className="flex items-center gap-2 mb-2">
-                  <span>
-                    <BiSolidMap className="text-violet-500 text-xl" />
-                  </span>
-                  <h1 className="font-bold text-lg text-gray-800">Address</h1>
+          <div className="relative isolate grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 px-4 lg:px:0 py-8">
+            {/* Denlly group section */}
+            <div>
+              <h2 className="font-bold font-Playfair text-3xl mb-2">
+                Denlly Group
+              </h2>
+              <p className="text-gray-900 mb-4">
+                Enhance wellness and beauty with expert, nature-based care
+              </p>
+              <div className="flex items-center gap-2 font-semibold mb-4">
+                <BiPhoneCall stroke="5" className="text-violet-500" size="36" />
+                <div>
+                  <span className="text-sm block">Call Any Time</span>
+                  <p>+254 729 994 794</p>
                 </div>
-                <p className="">PAC ln, Roysambu</p>
-                <p className="">Kenya</p>
               </div>
-              <div className="space-y">
-                <div className="flex items-center gap-2 mb-2">
-                  <span>
-                    <BiLogoTelegram className="text-violet-500 text-xl" />
-                  </span>
-                  <h1 className="font-bold text-lg text-gray-800">Say Hello</h1>
+              <div className="flex space-x-4">
+                <div className="rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                  <BiLogoFacebook className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
+                </div>
+                <div className="rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                  <BiLogoInstagram className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
+                </div>
+                <div className="rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                  <BiLogoWhatsapp className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
+                </div>
+                <div className="rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
+                  <BiLogoTwitter className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-700" />
                 </div>
-                <p className="mb-3">denllysparkagency@gmail.com</p>
-                <p>info.denllygroup@gmail.com</p>
-              </div>
-              <div className="mt-4">
-                <h1 className="font-bold text-sm text-gray-800 mb-2">
-                  See Our New Updates
-                </h1>
-
-                <form method="post" className="flex items-center ">
-                  <input
-                    type="email"
-                    placeholder="Email here..."
-                    aria-label="Email address"
-                    className="p-2 bg-gray-200 rounded-l-md outline-none placeholder:text-sm placeholder:text-green-950"
-                  />
-                  <button
-                    type="submit"
-                    className="group p-2 bg-violet-500 rounded-r-md "
-                  >
-                    <BsArrowRightShort className="text-2xl -rotate-45 group-hover:rotate-0 transition-all duration-500 ease-in-out " />
-                  </button>
-                </form>
               </div>
             </div>
 
-            <div className="mt-4">
-              <h1 className="font-bold text-lg text-gray-800 mb-4">
-                Our Services
-              </h1>
+            {/* Company section */}
+            <div>
+              <h1 className="font-bold text-lg mb-4">Company</h1>
               <ul className="space-y-3">
-                <li>Beauty</li>
-                <li>Cleaning</li>
-                <li>Insurance</li>
-              </ul>
-            </div>
-
-            <div className="mt-4">
-              <h1 className="font-bold text-lg text-gray-800 mb-4">Company</h1>
-              <ul className="space-y-3 ">
-                <li>About Us</li>
+                <li>
+                  <Link to="/about-us" className="hover:text-violet-700">
+                    About Us
+                  </Link>
+                </li>
                 <li>Our Team</li>
                 <li>Projects</li>
               </ul>
             </div>
 
-            <div className="mt-4">
-              <h1 className="font-bold text-lg text-gray-800 mb-4">
-                Resources
-              </h1>
+            {/* Services section */}
+            <div>
+              <h1 className="font-bold text-lg mb-4">Our Services</h1>
               <ul className="space-y-3">
-                <li>Support Area</li>
-                <li>Terms & Conditions</li>
-                <li>Privacy Policy</li>
-                <li>Career</li>
+                {availableServices?.map((service) => (
+                  <li key={service.name}>
+                    {service.isAvailable ? (
+                      <Link to={service.link} className="hover:text-violet-700">
+                        {service.name}
+                      </Link>
+                    ) : (
+                      <span>{service.name}</span>
+                    )}
+                  </li>
+                ))}
               </ul>
             </div>
+
+            {/* Working hours section */}
+            <div>
+              <h1 className="font-bold text-lg mb-4">Working Hours</h1>
+              <div className="space-y-2">
+                <div className="flex justify-between border-b border-gray-300 py-1">
+                  <p>Monday - Friday : </p>
+                  <p>7:00 am - 6:00 pm </p>
+                </div>
+                <div className="flex justify-between border-b border-gray-300 py-1">
+                  <p>Saturday : </p>
+                  <p>9:00 am - 7:00 pm </p>
+                </div>
+                <div className="flex justify-between border-b border-gray-300 py-1">
+                  <p>Sunday : </p>
+                  <p>1:00 pm - 6:00 pm </p>
+                </div>
+                <div className="flex justify-between py-1">
+                  <p>Holidays : </p>
+                  <p className="text-sm">OFFDAY</p>
+                </div>
+              </div>
+            </div>
           </div>
 
-          <hr className="my-6 border-gray-300 sm:mx-auto lg:my-8" />
           {/* Lower Footer Content */}
-          <div className="flex flex-col sm:flex-row items-center justify-between">
-            <h2 className="text-sm">
+          <div className="mt-6 border-t border-gray-300 flex flex-col sm:flex-row items-center justify-between text-xs px-2 py-6 space-y-2 sm:space-y-0">
+            <p>
               &copy;Copyright {new Date().getFullYear()}{" "}
-              <span className="font-bold hover:text-violet-500 transition-all duration-200 ease">
-                <a href="/"> Denlly Group</a>
-              </span>
-            </h2>
-
-            <div className="flex items-center justify-center mt-3 sm:mt-0">
-              <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                <BiLogoFacebook className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-500" />
-              </div>
-              <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                <BiLogoInstagram className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-500" />
-              </div>
-              <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                <BiLogoWhatsapp className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-500" />
-              </div>
-              <div className="mx-2 rounded-lg hover:bg-violet-500 border p-2 group transition-all ease-in-out duration-500">
-                <BiLogoTwitter className=" group-hover:text-gray-950 transition-all duration-500 ease-in-out text-violet-500" />
-              </div>
+              <span>Denlly Group All Rights Reserved</span>
+            </p>
+            <div className="flex space-x-8">
+              <Link to="#" className="hover:text-violet-700">
+                Privacy Policy
+              </Link>
+              <Link to="#" className="hover:text-violet-700">
+                Terms & Conditions
+              </Link>
             </div>
           </div>
         </div>