diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..df5289b
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,5 @@
+import ContactPage from "@/components/contact-page";
+
+export default function Contact() {
+  return <ContactPage />;
+}
diff --git a/src/components/FeatureCardSection.tsx b/src/components/FeatureCardSection.tsx
index 4f2d9ac..075d40c 100644
--- a/src/components/FeatureCardSection.tsx
+++ b/src/components/FeatureCardSection.tsx
@@ -65,7 +65,12 @@ const FeatureCardSection: React.FC<FeatureCardSectionProps> = ({
                   alt={card.imageAlt}
                   width={360}
                   height={480}
-                  className="h-full w-full"
+                  className="h-full w-full clip-path"
+                  style={
+                    card.imageUrl.endsWith(".gif")
+                      ? { clipPath: "inset(0 4px 0 0)" }
+                      : {}
+                  }
                 />
               </div>
               <div className="text-[#252525] w-[90%] mx-auto mt-[20px] text-2xl font-semibold font-['Inter']">
diff --git a/src/components/FeatureSection.tsx b/src/components/FeatureSection.tsx
index 14de2e8..62bf6ce 100644
--- a/src/components/FeatureSection.tsx
+++ b/src/components/FeatureSection.tsx
@@ -66,13 +66,16 @@ const FeatureSection: React.FC<DesignToolProps> = ({
       className={`w-full  rotate-180 ${imageContainerClasses}`}
       style={{ backgroundColor }}
     >
-      <div className="rotate-180 ">
+      <div className="rotate-180">
         <Image
           className="clip-path"
           src={imageUrl}
           alt={imageAlt}
-          width={684}
+          width={650}
           height={491}
+          style={
+            imageUrl.endsWith(".gif") ? { clipPath: "inset(0 4px 0 0)" } : {}
+          }
         />
       </div>
     </div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 79b3f6f..3d3e28c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -7,7 +7,7 @@ import Link from "next/link";
 
 export default function Footer() {
   const freeTools = [
-    { label: "Planpost Canvas", url: "https://canvas.planpostai.com/" },
+    // { label: "Planpost Canvas", url: "https://canvas.planpostai.com/" },
     {
       label: "Color Pallet Generator",
       url: "https://colors.planpostai.com/color-palate-generator",
@@ -35,7 +35,7 @@ export default function Footer() {
 
   const planpostAi = [
     { label: "About Us", url: "https://blog.planpostai.com/about/" },
-    { label: "Contact", url: "https://blog.planpostai.com/contact/" },
+    { label: "Contact", url: "/contact" },
     { label: "FAQ", url: "/#faqSection" },
     { label: "Privacy Policy", url: "/privacy-policy" },
     { label: "Terms & Condition", url: "/terms-and-conditions" },
@@ -116,7 +116,7 @@ export default function Footer() {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
             <div className="space-y-2">
               <h3 className="text-xl font-semibold">Need help?</h3>
-              <p className="text-sm">Reach us at: contact@planpostai.com</p>
+              <p className="text-sm">Reach us at: shahin@planpostai.com</p>
             </div>
             <div className="flex gap-4 md:justify-end">
               <Link
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8b87b9a..fdc3e61 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -24,17 +24,17 @@ export default function Header() {
           </Link>
         </li>
         <li>
-          <Link href="#feature" className="hover:text-purple-600">
+          <Link href="/#feature" className="hover:text-purple-600">
             Feature
           </Link>
         </li>
         <li>
-          <Link href="#pricingSection" className="hover:text-purple-600">
+          <Link href="/#pricingSection" className="hover:text-purple-600">
             Pricing
           </Link>
         </li>
         <li>
-          <Link href="#footerSection" className="hover:text-purple-600">
+          <Link href="/contact" className="hover:text-purple-600">
             Contact
           </Link>
         </li>
@@ -86,7 +86,7 @@ export default function Header() {
                   </li>
                   <li>
                     <Link
-                      href="#feature"
+                      href="/#feature"
                       className="hover:text-purple-600 text-lg"
                     >
                       Feature
@@ -94,7 +94,7 @@ export default function Header() {
                   </li>
                   <li>
                     <Link
-                      href="#pricingSection"
+                      href="/#pricingSection"
                       className="hover:text-purple-600 text-lg"
                     >
                       Pricing
@@ -102,7 +102,7 @@ export default function Header() {
                   </li>
                   <li>
                     <Link
-                      href="#footerSection"
+                      href="/contact"
                       className="hover:text-purple-600 text-lg"
                     >
                       Contact
diff --git a/src/components/PricingSection.tsx b/src/components/PricingSection.tsx
index 123ce76..6daef3b 100644
--- a/src/components/PricingSection.tsx
+++ b/src/components/PricingSection.tsx
@@ -178,7 +178,7 @@ export default function PricingSection() {
                   </div>
                 ))}
               </div>
-              <Link href="https://dashboard.planpostai.com/">
+              <Link href="https://dashboard.planpostai.com/payment">
                 <Button
                   className={`w-full ${
                     tier.highlight
diff --git a/src/components/contact-page.tsx b/src/components/contact-page.tsx
new file mode 100644
index 0000000..62724e1
--- /dev/null
+++ b/src/components/contact-page.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import type React from "react";
+
+import { useState } from "react";
+import { Facebook, Twitter, Linkedin, Instagram, MapPin } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+export default function ContactPage() {
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    company: "",
+    message: "",
+  });
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Form submitted:", formData);
+    // toast({
+    //   title: "Message sent!",
+    //   description: "We'll be in touch with you shortly.",
+    // });
+    // Reset form
+    setFormData({
+      name: "",
+      email: "",
+      phone: "",
+      company: "",
+      message: "",
+    });
+  };
+
+  return (
+    <main className="min-h-screen bg-gray-50">
+      <div className="h-20"></div>
+      <div className="container mx-auto px-4 py-12">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
+          {/* Left Column - Contact Information */}
+          <div className="space-y-8">
+            <div>
+              <h1 className="text-5xl font-bold leading-tight">
+                Get in touch <br />
+                with us directly
+              </h1>
+              <p className="mt-6 text-lg text-gray-700">
+                We are here to help you! Tell us how we can help & we&apos;ll be
+                in touch with an expert within the next 24 hours.
+              </p>
+            </div>
+
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-xl font-semibold">Send us an email:</h3>
+                <a
+                  href="mailto:contact@adspillar.com"
+                  className="text-xl hover:underline"
+                >
+                  shahin@adspillar.com
+                </a>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold">Give us a call:</h3>
+                <a
+                  href="tel:+8801784493232"
+                  className="text-xl hover:underline"
+                >
+                  +880 1784-493232
+                </a>
+              </div>
+
+              <div>
+                <h3 className="text-xl font-semibold mb-4">Follow us:</h3>
+                <div className="flex space-x-4">
+                  <a
+                    href="#"
+                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
+                    aria-label="Facebook"
+                  >
+                    <Facebook size={20} />
+                  </a>
+                  <a
+                    href="#"
+                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
+                    aria-label="Twitter"
+                  >
+                    <Twitter size={20} />
+                  </a>
+                  <a
+                    href="#"
+                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
+                    aria-label="LinkedIn"
+                  >
+                    <Linkedin size={20} />
+                  </a>
+                  <a
+                    href="#"
+                    className="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600 transition-colors"
+                    aria-label="Instagram"
+                  >
+                    <Instagram size={20} />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column - Contact Form */}
+          <div className="bg-white p-8 rounded-lg shadow-sm">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <label htmlFor="name" className="text-lg font-medium">
+                    Enter your name
+                  </label>
+                  <Input
+                    id="name"
+                    name="name"
+                    placeholder="Enter your name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="email" className="text-lg font-medium">
+                    Email address
+                  </label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    placeholder="example@gmail.com"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-2">
+                  <label htmlFor="phone" className="text-lg font-medium">
+                    Phone number
+                  </label>
+                  <Input
+                    id="phone"
+                    name="phone"
+                    placeholder="(123) 456 - 7890"
+                    value={formData.phone}
+                    onChange={handleChange}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="company" className="text-lg font-medium">
+                    Company
+                  </label>
+                  <Input
+                    id="company"
+                    name="company"
+                    placeholder="EX Facebook"
+                    value={formData.company}
+                    onChange={handleChange}
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label htmlFor="message" className="text-lg font-medium">
+                  Message
+                </label>
+                <Textarea
+                  id="message"
+                  name="message"
+                  placeholder="Write your message here..."
+                  rows={6}
+                  value={formData.message}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full md:w-auto px-8 py-6 bg-pink-500 hover:bg-pink-600 text-white text-lg rounded-full"
+              >
+                Submit
+              </Button>
+            </form>
+          </div>
+        </div>
+
+        {/* Map Section */}
+        <div className="mt-16 space-y-6">
+          <div className="flex items-center space-x-2">
+            <MapPin className="text-pink-500" size={24} />
+            <h2 className="text-2xl font-semibold">Our Location</h2>
+          </div>
+          <p className="text-lg">
+            Ads Pillar - 965 (6th Floor, Apartment D, Begum Rokeya Avenue, Dhaka
+            1216)
+          </p>
+
+          <div className="w-full h-[400px] rounded-lg overflow-hidden shadow-md">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3650.7368281727336!2d90.37267777531028!3d23.792384087163313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c5548eab48e1%3A0xdadd813caa2f692a!2sAds%20Pillar%20-!5e0!3m2!1sen!2sbd!4v1740984344459!5m2!1sen!2sbd"
+              width="100%"
+              height="100%"
+              style={{ border: 0 }}
+              allowFullScreen
+              loading="lazy"
+              referrerPolicy="no-referrer-when-downgrade"
+              title="Ads Pillar Location"
+            ></iframe>
+          </div>
+        </div>
+      </div>
+      {/* <Toaster /> */}
+    </main>
+  );
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..e56b0af
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }