diff --git a/app/globals.css b/app/globals.css
index a7a905c..16d331b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -82,6 +82,9 @@ input[type="color"]::-webkit-color-swatch {
   left: 0;
   right: 0;
   bottom: 0;
+  background-color: blue;
+  transition: background-color 0.4s;
+  border-radius: 34px;
   background-color: #ccc;
   transition: .4s;
   border-radius: 24px;
@@ -100,8 +103,6 @@ input[type="color"]::-webkit-color-swatch {
   transition: opacity 0.4s ease-in-out;
 }
 
-
-
 .filter-white {
   filter: brightness(0) invert(1);
 }
@@ -109,8 +110,48 @@ input[type="color"]::-webkit-color-swatch {
 .filter-black {
   filter: brightness(0);
 }
+.hover-underline-animation {
+  position: relative;
+  cursor: pointer;
+}
+
+.hover-underline-animation::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: currentColor;
+  transition: width 0.3s ease;
+}
+
+.hover-underline-animation:hover::after {
+  width: 100%;
+}
+
+.hover-underline-animation {
+  position: relative;
+  cursor: pointer;
+}
 
+.hover-underline-animation::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: currentColor;
+  transition: width 0.3s ease;
+}
 
+.hover-underline-animation:hover::after {
+  width: 100%;
+}
+
+.slider.round {
+  border-radius: 34px; /* Match with the switch */
 .slider.round {
   border-radius: 34px;
   /* Match with the switch */
@@ -124,6 +165,16 @@ input[type="color"]::-webkit-color-swatch {
   left: 2px;
   bottom: 2px;
   background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: light-blue;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px); /* Move circle on toggle */
   transition: .4s;
   border-radius: 50%;
 }
diff --git a/components/ui/footer.tsx b/components/ui/footer.tsx
index 74d4e88..2c8871f 100644
--- a/components/ui/footer.tsx
+++ b/components/ui/footer.tsx
@@ -8,102 +8,114 @@ import { LuBookMinus } from 'react-icons/lu';
 import { GrBusinessService } from "react-icons/gr";
 import { FaBusinessTime } from "react-icons/fa";
 
-
-
 const Footer = () => {
   return (
     <footer className="bg-neutral-900 text-white py-10 px-4 w-full">
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div>
-          <h2 className="text-xl font-semibold mb-4">DesignDesk</h2>
-          <p className="text-gray-400 mb-4">
-  DesignDesk is a collaborative web application for <span className="hidden md:inline">interface design,</span> <span className="md:hidden">interface</span> design, with real-time collaboration features.
-</p>
-          <div className="flex space-x-4">
-            <Link href="https://twitter.com/figmak" target="_blank" rel="noopener noreferrer">
-              <div className="text-gray-400 hover:text-white">
-                <FaSquareXTwitter size={24} />
-              </div>
-            </Link>
-            <Link href="https://www.instagram.com/figma/" target="_blank" rel="noopener noreferrer">
-              <div className="text-gray-400 hover:text-white">
-                <FaInstagram size={24} />
-              </div>
-            </Link>
-            <Link href="https://www.linkedin.com/company/figma" target="_blank" rel="noopener noreferrer">
-              <div className="text-gray-400 hover:text-white">
-                <FaLinkedin size={24} />
-              </div>
-            </Link>
-          </div>
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
+        {/* First Section */}
+        <div className="flex flex-col">
+          <h2 className="text-xl font-semibold mb-6 transition-all duration-500 transform hover:scale-105 hover:text-purple-500">
+            DesignDesk
+          </h2> {/* Added hover scale and color change */}
+          <p className="text-gray-400 mb-6">
+            DesignDesk is a collaborative web application for interface design, with real-time collaboration features.
+          </p>
+          <div className="flex space-x-6 mt-auto">
+  <Link href="https://twitter.com/figmak" target="_blank" rel="noopener noreferrer">
+    <div className="text-gray-400 hover:text-white transition-all duration-300 transform hover:scale-110 hover:rotate-12 hover:shadow-lg">
+      <FaSquareXTwitter size={24} />
+    </div>
+  </Link>
+  <Link href="https://www.instagram.com/figma/" target="_blank" rel="noopener noreferrer">
+    <div className="text-gray-400 hover:text-white transition-all duration-300 transform hover:scale-110 hover:rotate-12 hover:shadow-lg">
+      <FaInstagram size={24} />
+    </div>
+  </Link>
+  <Link href="https://www.linkedin.com/company/figma" target="_blank" rel="noopener noreferrer">
+    <div className="text-gray-400 hover:text-white transition-all duration-300 transform hover:scale-110 hover:rotate-12 hover:shadow-lg">
+      <FaLinkedin size={24} />
+    </div>
+  </Link>
+</div>
+
         </div>
 
-        <div>
-          <h2 className="text-xl font-semibold mb-4">Product</h2>
-          <ul className="space-y-2">
+        {/* Second Section */}
+        <div className="flex flex-col">
+          <h2 className="text-xl font-semibold mb-6 transition-all duration-500 transform hover:scale-105 hover:text-pink-500">
+            Product
+          </h2> {/* Added hover scale and color change */}
+          <ul className="space-y-4">
             <li>
               <Link href="/features">
-                <div className="flex items-center text-gray-400 hover:text-white">
+                <div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
                   <GrBusinessService className="mr-2" size={20} />
-                  Features
+                  <span className="hover-underline-animation">Features</span>
                 </div>
               </Link>
             </li>
             <li>
               <Link href="/pricing">
-                <div className="flex items-center text-gray-400 hover:text-white">
+                <div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
                   <GiPriceTag className="mr-2" size={20} />
-                  Pricing
+                  <span className="hover-underline-animation">Pricing</span>
                 </div>
               </Link>
             </li>
             <li>
               <Link href="/community">
-                <div className="flex items-center text-gray-400 hover:text-white">
+                <div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
                   <AiOutlineUsergroupAdd className="mr-2" size={20} />
-                  Community
+                  <span className="hover-underline-animation">Community</span>
                 </div>
               </Link>
             </li>
             <li>
               <Link href="/support">
-                <div className="flex items-center text-gray-400 hover:text-white">
+                <div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
                   <MdQuestionAnswer className="mr-2" size={20} />
-                  Support
+                  <span className="hover-underline-animation">Support</span>
                 </div>
               </Link>
             </li>
           </ul>
         </div>
 
-        <div>
-          <h2 className="text-xl font-semibold mb-4">Contact</h2>
-          <ul className="space-y-2">
+        {/* Third Section */}
+        <div className="flex flex-col">
+          <h2 className="text-xl font-semibold mb-6 transition-all duration-500 transform hover:scale-105 hover:text-blue-500">
+            Contact
+          </h2> {/* Added hover scale and color change */}
+          <ul className="space-y-4">
             <li>
               <Link href="/faq">
-                <div className="flex items-center text-gray-400 hover:text-white">
+                <div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
                   <MdQuestionAnswer className="mr-2" size={20} />
-                  FAQ
+                  <span className="hover-underline-animation">FAQ</span>
                 </div>
               </Link>
             </li>
             <li>
               <Link href="/contact">
-                <div className="flex items-center text-gray-400 hover:text-white">
+                <div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
                   <MdEmail className="mr-2" size={20} />
-                  Contact Us
+                  <span className="hover-underline-animation">Contact Us</span>
                 </div>
               </Link>
             </li>
             <li>
               <Link href="/careers">
-                <div className="flex items-center text-gray-400 hover:text-white">
+                <div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
                   <FaBusinessTime className="mr-2" size={20} />
-                  Careers
+                  <span className="hover-underline-animation">Careers</span>
                 </div>
               </Link>
             </li>
             <li>
+              <Link href="/blog">
+                <div className="flex items-center text-gray-400 hover:text-white transition-colors duration-300">
+                  <LuBookMinus className="mr-2" size={20} />
+                  <span className="hover-underline-animation">Blog</span>
               <Link href="/blogs">
                 <div className="flex items-center text-gray-400 hover:text-white">
                   <LuBookMinus  className="mr-2" size={20} />
@@ -138,7 +150,7 @@ const Footer = () => {
         </div>
       </div>
 
-
+      <div className="mt-8 mb-1 border-t border-gray-700 pt-3 text-center text-gray-500">
       <div className="mt-4 mb-1 border-t start-0 z-21 border-gray-700 pt-3 text-center text-gray-500">
         <div>&copy; {new Date().getFullYear()} DesignDesk. All rights reserved.</div>
       </div>