diff --git a/package-lock.json b/package-lock.json
index 97afd30..9083f3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-fast-marquee": "^1.6.5",
+        "react-router-dom": "^7.9.4",
         "react-use-measure": "^2.1.7",
         "tailwind-merge": "^3.3.1"
       },
@@ -3071,7 +3072,6 @@
       "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -3082,7 +3082,6 @@
       "integrity": "sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -3149,7 +3148,6 @@
       "integrity": "sha512-4O3idHxhyzjClSMJ0a29AcoK0+YwnEqzI6oz3vlRf3xw0zbzt15MzXwItOlnr5nIth6zlY2RENLsOPvhyrKAQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.34.1",
         "@typescript-eslint/types": "8.34.1",
@@ -3666,7 +3664,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4086,7 +4083,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001718",
         "electron-to-chromium": "^1.5.160",
@@ -4304,6 +4300,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.46.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.46.0.tgz",
@@ -4764,7 +4769,6 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4938,7 +4942,6 @@
       "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.8",
@@ -7503,7 +7506,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7696,7 +7698,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7706,7 +7707,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -7778,6 +7778,44 @@
         }
       }
     },
+    "node_modules/react-router": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
+      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.9.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz",
+      "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.9.4"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -8026,6 +8064,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -8544,7 +8588,6 @@
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8710,7 +8753,6 @@
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index bc8be38..cc211cb 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-fast-marquee": "^1.6.5",
+    "react-router-dom": "^7.9.4",
     "react-use-measure": "^2.1.7",
     "tailwind-merge": "^3.3.1"
   },
diff --git a/src/app/contact-form/page.tsx b/src/app/contact-form/page.tsx
new file mode 100644
index 0000000..ad96dfc
--- /dev/null
+++ b/src/app/contact-form/page.tsx
@@ -0,0 +1,123 @@
+
+"use client";
+
+import Aurora from "@/components/Backgrounds/Aurora";
+import { useState } from "react";
+
+
+export default function ContactFormPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setSuccess(false);
+    setError("");
+
+    try {
+      console.log({ name, email, message });
+      setTimeout(() => {
+        setSuccess(true);
+        setName("");
+        setEmail("");
+        setMessage("");
+      }, 1000);
+    } catch {
+      setError("Something went wrong.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="relative min-h-screen flex items-center justify-center bg-gray-900 overflow-hidden">
+      {/* Aurora Background */}
+      <div className="absolute inset-0 z-0">
+        <Aurora
+          colorStops={["#3A29FF", "#7CFF67", "#FF3232"]}
+          amplitude={1.0}
+          blend={0.4}
+          speed={1.0}
+        />
+      </div>
+
+      {/* Form Card */}
+      <div className="relative z-10 max-w-lg w-full bg-black/70 backdrop-blur-md p-8 rounded-2xl shadow-xl border border-white/10">
+        <h2 className="text-3xl font-bold text-white mb-6 text-center text-shadow-glow">
+          Contact Us
+        </h2>
+
+        {success && (
+          <p className="text-green-400 mb-4 text-center font-medium text-shadow-glow">
+            Message sent successfully!
+          </p>
+        )}
+        {error && (
+          <p className="text-red-400 mb-4 text-center font-medium text-shadow-glow">
+            {error}
+          </p>
+        )}
+
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="name" className="block text-white font-medium mb-1">
+              Name
+            </label>
+            <input
+              id="name"
+              type="text"
+              placeholder="Your Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              className="w-full p-3 rounded-lg border border-white/20 bg-black/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="email" className="block text-white font-medium mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full p-3 rounded-lg border border-white/20 bg-black/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="message" className="block text-white font-medium mb-1">
+              Message
+            </label>
+            <textarea
+              id="message"
+              rows={5}
+              placeholder="Your message..."
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              required
+              className="w-full p-3 rounded-lg border border-white/20 bg-black/30 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-3 rounded-lg bg-gradient-to-r from-blue-600 via-purple-600 to-red-600 text-white font-medium hover:scale-105 transition-all disabled:opacity-50"
+          >
+            {loading ? "Sending..." : "Send Message"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 0c94bfc..e146aa0 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -1,4 +1,4 @@
-d 'use client';
+'use client';
 import React from "react";
 import { useRouter } from "next/navigation";
 
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 562c687..a2485b8 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,4 +1,15 @@
 "use client";
+
+import React from "react";
+import Link from "next/link";
+import { Twitter, Facebook, Linkedin } from "lucide-react";
+
+const Footer: React.FC = () => {
+  const navItems = [
+    { name: "Features", link: "/" },
+    { name: "AI Generator", link: "/ai-generator" },
+    { name: "Contact", link: "/contact-form" },
+  ];
 import React, { useState } from 'react';
 import Link from 'next/link';
 import { Mail, Facebook, X, Instagram, Linkedin, Send } from 'lucide-react';
@@ -189,41 +200,76 @@ export default function Footer() {
 import React from 'react';
 import { Twitter, Facebook, Linkedin } from 'lucide-react';
 
-const Footer = () => {
   return (
     <footer className="relative z-10 bg-gray-800 text-white py-12">
       <div className="container mx-auto px-4">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {/* Company Info */}
           <div>
             <h3 className="text-xl font-bold mb-4">asHelp</h3>
             <p className="text-gray-400">
               Get professional assignment writing services from verified experts.
             </p>
           </div>
+
+          {/* Services */}
           <div>
             <h3 className="text-xl font-bold mb-4">Services</h3>
             <ul className="space-y-2">
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Assignment Writing</a></li>
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Term Papers</a></li>
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Presentations</a></li>
+              {navItems.map((item) => (
+                <li key={item.name}>
+                  <Link
+                    href={item.link}
+                    className="text-gray-400 hover:text-white transition-colors"
+                  >
+                    {item.name}
+                  </Link>
+                </li>
+              ))}
             </ul>
           </div>
+
+          {/* About */}
           <div>
             <h3 className="text-xl font-bold mb-4">About</h3>
             <ul className="space-y-2">
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">About Us</a></li>
-              <li><a href="#" className="text-gray-400 hover:text-white transition-colors">Contact Us</a></li>
+              <li>
+                <Link
+                  href="/about-us"
+                  className="text-gray-400 hover:text-white transition-colors"
+                >
+                  About Us
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/contact-form"
+                  className="text-gray-400 hover:text-white transition-colors"
+                >
+                  Contact Us
+                </Link>
+              </li>
             </ul>
           </div>
+
+          {/* Social */}
           <div>
             <h3 className="text-xl font-bold mb-4">Follow Us</h3>
             <div className="flex space-x-4">
-              <a href="#" className="text-gray-400 hover:text-white transition-colors"><Twitter /></a>
-              <a href="#" className="text-gray-400 hover:text-white transition-colors"><Facebook /></a>
-              <a href="#" className="text-gray-400 hover:text-white transition-colors"><Linkedin /></a>
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                <Twitter />
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                <Facebook />
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white transition-colors">
+                <Linkedin />
+              </a>
             </div>
           </div>
         </div>
+
+        {/* Footer Bottom */}
         <div className="mt-8 pt-8 border-t border-gray-700 text-center text-gray-500">
           <p>&copy; {new Date().getFullYear()} asHelp. All rights reserved.</p>
         </div>
diff --git a/src/components/nav.tsx b/src/components/nav.tsx
index 9ec0731..4899918 100644
--- a/src/components/nav.tsx
+++ b/src/components/nav.tsx
@@ -33,6 +33,7 @@ export function NavbarDemo() {
     },
     {
       name: "Contact",
+      link: "/contact-form",
       link: "/contact",
     },
   ];
diff --git a/src/components/usage-tracker.tsx b/src/components/usage-tracker.tsx
index 30df52a..54e02ec 100644
--- a/src/components/usage-tracker.tsx
+++ b/src/components/usage-tracker.tsx
@@ -22,6 +22,7 @@ export function UsageTracker() {
 
   useEffect(() => {
     // Load usage from localStorage
+    
     const savedUsage = localStorage.getItem('ai-generator-usage');
     if (savedUsage) {
       setUsage(JSON.parse(savedUsage));