diff --git a/src/componenets/Footer/Footer.jsx b/src/componenets/Footer/Footer.jsx
index e166b7c..c06891c 100644
--- a/src/componenets/Footer/Footer.jsx
+++ b/src/componenets/Footer/Footer.jsx
@@ -1,318 +1,152 @@
 import { useState } from "react";
+import { Link } from "react-router-dom";
 import Logo from "../Logo";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 function Footer() {
-  return (
-    <>
-      <footer className="bg-gray-200">
-        <div className="mx-auto max-w-screen-xl space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8">
-          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-            <div>
-              <div className="mb-4">
-                <Logo width="100px" />
-              </div>
-
-
-              <p className="mt-4 max-w-xs text-gray-500">
-                MegaBlog is a blog post website user by beginners and creators
-                staring out on their Journey.
-              </p>
-
-              <ul className="mt-8 flex gap-6">
-                <li>
-                  <a
-                    href="#"
-                    rel="noreferrer"
-                    target="_blank"
-                    className="text-gray-700 transition hover:opacity-75"
-
-                  >
-                    <span className="sr-only">Facebook</span>
-
-                    <svg
-                      className="size-6"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </a>
-                </li>
-
-                <li>
-                  <a
-                    href="#"
-                    rel="noreferrer"
-                    target="_blank"
-                    className="text-gray-700 transition hover:opacity-75"
-                  >
-                    <span className="sr-only">Instagram</span>
-
-                    <svg
-                      className="size-6"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </a>
-                </li>
-
-                <li>
-                  <a
-                    href="#"
-                    rel="noreferrer"
-                    target="_blank"
-                    className="text-gray-700 transition hover:opacity-75"
-                  >
-                    <span className="sr-only">Twitter</span>
-
-                    <svg
-                      className="size-6"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
-                    </svg>
-                  </a>
-                </li>
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await fetch("http://localhost:5000/api/newsletter/suscribe", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ name, email }),
+      });
+
+      if (response.ok) {
+        toast.success("Subscription successful!");
+        setName("");
+        setEmail("");
+      } else {
+        toast.error("Failed to subscribe.");
+      }
+    } catch (error) {
+      toast.error("An error occurred. Please try again.");
+    }
+  };
 
-                <li>
-                  <a
-                    href="https://github.com/anuj123upadhyay/MegaBlog"
-                    rel="noreferrer"
-                    target="_blank"
-                    className="text-gray-700 transition hover:opacity-75"
-                  >
-                    <span className="sr-only">GitHub</span>
-
-                    <svg
-                      className="size-6"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </a>
-                </li>
-
-                <li>
-                  <a
-                    href="#"
-                    rel="noreferrer"
-                    target="_blank"
-                    className="text-gray-700 transition hover:opacity-75"
-                  >
-                    <span className="sr-only">Dribbble</span>
-
-                    <svg
-                      className="size-6"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </a>
-                </li>
-              </ul>
+  return (
+    <footer className="custom-theme w-full bg-gray-300 border-t-1 border-t-black py-10">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 text-center md:text-left">
+          
+          {/* Logo */}
+          <section className="p-6 flex flex-col items-center md:items-start">
+            <div className="mb-4">
+              <Logo width="100px" />
             </div>
+          </section>
+
+          {/* Company Links */}
+          <section className="p-6">
+            <h3 className="text-xs font-semibold uppercase text-gray-500 mb-6">
+              Company
+            </h3>
+            <nav>
+              <ul className="space-y-4">
+                <li><Link className="toggle text-base font-medium text-gray-900 hover:text-gray-700" to="/features">Features</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/pricing">Pricing</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/affiliate-program">Affiliate Program</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/">Press Kit</Link></li>
+              </ul>
+            </nav>
+          </section>
+
+          {/* Support Links */}
+          <section className="p-6">
+            <h3 className="text-xs font-semibold uppercase text-gray-500 mb-6">
+              Support
+            </h3>
+            <nav>
+              <ul className="space-y-4">
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/">Account</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/">Help</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/contactus">Contact Us</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/customer-support">Customer Support</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/frequently-asked-questions">FAQ</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/Feedback">Feedback</Link></li>
+              </ul>
+            </nav>
+          </section>
+
+          {/* Legal Links */}
+          <section className="p-6">
+            <h3 className="text-xs font-semibold uppercase text-gray-500 mb-6">
+              Legals
+            </h3>
+            <nav>
+              <ul className="space-y-4">
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/termsandconditions">Terms & Conditions</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/privacypolicy">Privacy Policy</Link></li>
+                <li><Link className="text-base font-medium text-gray-900 hover:text-gray-700" to="/licensing">Licensing</Link></li>
+              </ul>
+            </nav>
+          </section>
+        </div>
 
-            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:col-span-2 lg:grid-cols-4">
-              <div>
-                <p className="font-medium text-gray-900">Services</p>
-
-                <ul className="mt-6 space-y-4 text-sm">
-                  <li>
-                    <a
-                      href="/features"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Features{" "}
-                    </a>
-                  </li>
-
-                  <li>
-                    <a
-                      href="/pricing"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Pricing{" "}
-                    </a>
-                  </li>
-
-                  <li>
-                    <a
-                      href="/affiliate-program"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Affiliate Program{" "}
-                    </a>
-                  </li>
-                </ul>
-              </div>
-
-              <div>
-                <p className="font-medium text-gray-900">Company</p>
-
-                <ul className="mt-6 space-y-4 text-sm">
-                  <li>
-                    <a
-                      href="/about"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      About{" "}
-                    </a>
-                  </li>
-
-                  <li>
-                    <a
-                      href="/contributors"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Meet the Team{" "}
-                    </a>
-                  </li>
-
-                  <li>
-                    <a
-                      href="/presskit"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Press Kit{" "}
-                    </a>
-                  </li>
-                </ul>
-              </div>
-
-              <div>
-                <p className="font-medium text-gray-900">Helpful Links</p>
-
-                <ul className="mt-6 space-y-4 text-sm">
-                  <li>
-                    <a
-                      href="/contactus"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Contact Us{" "}
-                    </a>
-                  </li>
-
-                  <li>
-                    <a
-                      href="/frequently-asked-questions"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      FAQs{" "}
-                    </a>
-                  </li>
-
-                  <li>
-                    <a
-                      href="/helpPage"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Help{" "}
-                    </a>
-                  </li>
-
-                  <li>
-                    <a
-                      href="/customer-support"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Customer Support{" "}
-                    </a>
-                  </li>
-
-                  <li>
-                    <a
-                      href="/Feedback"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Feedback{" "}
-                    </a>
-                  </li>
-                </ul>
-              </div>
-
-              <div>
-                <p className="font-medium text-gray-900">Legal</p>
-
-                <ul className="mt-6 space-y-4 text-sm">
-                  <li>
-                    <a
-                      href="/termsandconditions"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Terms & Conditions{" "}
-                    </a>
-                  </li>
-
-                  <li>
-                    <a
-                      href="/privacypolicy"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Privacy Policy{" "}
-                    </a>
-                  </li>
+        {/* Newsletter Section */}
+        <div className="p-6 w-full flex flex-col items-center justify-center">
+          <form onSubmit={handleSubmit} className="w-full md:w-8/12 flex flex-col items-center md:flex-row">
+            <input
+              type="text"
+              placeholder="Your Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="mb-4 md:mb-0 md:mr-2 px-4 py-2 w-full md:w-1/2 rounded-md border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500"
+            />
+            <input
+              type="email"
+              placeholder="Your Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="mb-4 md:mb-0 md:mr-2 px-4 py-2 w-full md:w-1/2 rounded-md border border-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500"
+            />
+            <button
+              type="submit"
+              className="px-6 py-2 text-white bg-black rounded-md hover:bg-gray-800 transition-colors duration-200"
+            >
+              Subscribe
+            </button>
+          </form>
+        </div>
 
-                  <li>
-                    <a
-                      href="/licensing"
-                      className="text-gray-700 transition hover:opacity-75"
-                    >
-                      {" "}
-                      Licensing{" "}
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
+        {/* Social Media Links */}
+        <div className="p-6 w-full flex justify-center items-center">
+          <h3 className="tracking-px mb-9 text-xs font-semibold uppercase text-gray-500">
+            Follow Us
+          </h3>
+          <div className="flex space-x-4">
+            <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
+              <i className="fab fa-facebook text-2xl"></i>
+            </a>
+            <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" aria-label="Twitter" className="text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
+              <i className="fab fa-twitter text-2xl"></i>
+            </a>
+            <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
+              <i className="fab fa-instagram text-2xl"></i>
+            </a>
+            <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" className="text-gray-900 hover:text-gray-700 transition ease-in-out duration-150">
+              <i className="fab fa-linkedin text-2xl"></i>
+            </a>
           </div>
+        </div>
 
-          <p className="text-xs text-gray-500">
-            &copy; 2024. MegaBlog. All rights reserved.
+        {/* Copyright Section */}
+        <div className="w-full mt-10 border-t border-black pt-6 text-center">
+          <p className="text-sm text-gray-600">
+            &copy; 2023 DevUI. All Rights Reserved.
           </p>
         </div>
-      </footer>
-    </>
+      </div>
+      <ToastContainer />
+    </footer>
   );
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index a4a839b..45d5466 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
-    "compilerOptions": {
+     "compilerOptions": {
       "target": "es5", // For broader browser compatibility
       "module": "commonjs", // For Node.js compatibility
       "outDir": "./dist", // Output directory for compiled JavaScript