diff --git a/app/contact/page.js b/app/contact/page.js
index d2f425d..0fe5dab 100644
--- a/app/contact/page.js
+++ b/app/contact/page.js
@@ -1,83 +1,13 @@
 "use client";
 
-import { Card, CardContent } from "../../@/components/ui/card";
-import { Input } from "../../@/components/ui/input";
-import { Label } from "../../@/components/ui/label";
-import { Textarea } from "../../@/components/ui/textarea";
-import { Button } from "../../@/components/ui/button";
-
-const contactdetails = [
-  {
-    title: "Email",
-    content: "contact@sanityesports.live",
-  },
-  {
-    title: "Phone",
-    content: "+1 (800) 123 XX21",
-  },
-  {
-    title: "Support",
-    content: "support@sanityesports.live",
-  },
-];
+import ContactLeftComp from "../../components/Contatct/Contact-left";
+import ContactRightComp from "../../components/Contatct/Contact-right";
 
 export default function ContactPage() {
   return (
-    <div className="min-h-[70vh] grid md:grid-cols-2 gap-10 items-center justify-center pt-10 px-10 lg:px-[5%] xl:px-[15%] transition-all">
-      <div className="flex flex-col items-start gap-10">
-        <div className="flex flex-col gap-4">
-          <h1 className="text-4xl font-medium tracking-tight transition-all">
-            Contact us
-          </h1>
-
-          <h6 className="text-foreground/80 max-w-md tracking-tight">
-            We are always looking for ways to improve our products and services.
-            Contact us and let us know how we can help you.
-          </h6>
-        </div>
-
-        <div className="flex flex-col gap-4">
-          {contactdetails.map((item, idx) => (
-            <div key={idx} className="">
-              <h1 className="">{item.title}</h1>
-              <p className="text-sm text-foreground/80">{item.content}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="w-full flex flex-col items-center lg:p-10">
-        <Card className="w-full p-5">
-          <CardContent className="w-full md:py-5">
-            <form className="flex flex-col gap-10">
-              <div>
-                <Label>Full Name</Label>
-
-                <Input className="mt-2" />
-              </div>
-
-              <div>
-                <Label>Email Address</Label>
-
-                <Input className="mt-2" />
-              </div>
-
-              <div>
-                <Label>Message</Label>
-
-                <Textarea rows={3} className="mt-2" />
-              </div>
-
-              <Button
-                // variant="outline"
-                className="w-1/3"
-              >
-                Submit
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
-      </div>
+    <div className=" w-11/12 mx-auto border border-neutral-700 rounded-sm flex flex-row justify-evenly md:max-w-7xl">
+      <ContactLeftComp className={"hidden sm:block md:w-1/2"} />
+      <ContactRightComp className={"w-full md:w-1/2"} />
     </div>
   );
 }
diff --git a/components/Contatct/Contact-left.jsx b/components/Contatct/Contact-left.jsx
new file mode 100644
index 0000000..f3b6b5a
--- /dev/null
+++ b/components/Contatct/Contact-left.jsx
@@ -0,0 +1,46 @@
+import cn from "classnames";
+import Image from "next/image";
+import Link from "next/link";
+import { socialLinks } from "../Footer";
+
+export default function ContactLeftComp({ className }) {
+  return (
+    <div className={cn(className, "relative ")}>
+      <Image
+        width={500}
+        height={500}
+        src={"/contact.jpg"}
+        alt="Contact-img"
+        className="z-[-1] absolute h-full w-full "
+      />
+      <div className="p-4 md:p-8 xl:p-12 flex flex-col justify-end gap-6 h-full">
+        <div className="flex gap-2 items-center">
+          <Image
+            width={1000}
+            height={1000}
+            src={"/assets/logo.jpg"}
+            alt="Contact-img"
+            className="w-8 md:w-12 rounded-full"
+          />
+          <p className="font-bold text-black text-3xl md:text-4xl lg:text-5xl">
+            Sanity Gaming
+          </p>
+        </div>
+        <p className="text-gray-500 md:w-3/4">
+          The Go-To Esports Platform at the intersection of esports and mental
+          well-being
+        </p>
+
+        <div className="flex gap-4">
+          {socialLinks.map((e, i) => {
+            return (
+              <Link href={e.link} key={i}>
+                <e.icon className="invert size-6" />
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Contatct/Contact-right.jsx b/components/Contatct/Contact-right.jsx
new file mode 100644
index 0000000..a4054a6
--- /dev/null
+++ b/components/Contatct/Contact-right.jsx
@@ -0,0 +1,165 @@
+"use form";
+
+import cn from "classnames";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+
+import { Button } from "../../@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../@/components/ui/form";
+import { Input } from "../../@/components/ui/input";
+import { Mail, PhoneCall, UserRoundCog } from "lucide-react";
+import { Textarea } from "../../@/components/ui/textarea";
+import { BiSupport } from "react-icons/bi";
+import Link from "next/link";
+import { socialLinks } from "../Footer";
+
+const formSchema = z.object({
+  fullName: z
+    .string({ message: "Full name is required" })
+    .min(3, { message: "Make it little longer" }),
+  email: z
+    .string({ message: "Email is required" })
+    .email({ message: "Invalid email type" }),
+  message: z
+    .string({ message: "Give some sort of message" })
+    .min(3, { message: "Make it little longer" }),
+});
+
+export default function ContactRightComp({ className }) {
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      fullName: "",
+      email: "",
+      message: "",
+    },
+  });
+
+  async function handleFormSubmission(data) {
+    try {
+      console.log(data);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  return (
+    <div className={cn(className, "bg-black p-4 md:p-12 ")}>
+      <p className="text-2xl font-bold tracking-wider ">GET IN TOUCH</p>
+      <p className="text-gray-400">
+        24/7 We will answer your questions and problems
+      </p>
+
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(handleFormSubmission)}
+          className="mt-12 flex flex-col gap-4"
+        >
+          <FormField
+            control={form.control}
+            name="fullName"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="text-gray-300 font-bold">
+                  Full Name
+                </FormLabel>
+                <FormControl>
+                  <div className="flex gap-2 items-center border-2 border-neutral-700 rounded-md px-4">
+                    <UserRoundCog className="size-4" />
+                    <Input
+                      placeholder="Sanity Gaming"
+                      {...field}
+                      className="outline-0 border-0"
+                    />
+                  </div>
+                </FormControl>
+
+                <FormMessage className="text-red-500" />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="text-gray-300 font-bold">
+                  Email Address
+                </FormLabel>
+                <FormControl>
+                  <div className="flex gap-2 items-center border-2 border-neutral-700 rounded-md px-4">
+                    <Mail className="size-4" />
+                    <Input
+                      placeholder="sanity@gmail.com"
+                      {...field}
+                      className="outline-0 border-0"
+                    />
+                  </div>
+                </FormControl>
+
+                <FormMessage className="text-red-500" />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="message"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="text-gray-300 font-bold">
+                  Message
+                </FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="Hello, i want to connect with you guys for promotion ."
+                    {...field}
+                    className="outline-0 border-2 border-neutral-700 resize-none h-44 no-scrollbar"
+                  />
+                </FormControl>
+
+                <FormMessage className="text-red-500" />
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Submit</Button>
+        </form>
+      </Form>
+
+      <div className="mt-8 flex flex-wrap gap-4">
+        <div className="flex gap-2 items-center text-gray-400 text-sm">
+          <PhoneCall className="size-4" />
+          <p>+1 (800) 123 XX21</p>
+        </div>
+
+        <div className="flex gap-2 items-center text-gray-400 text-sm">
+          <BiSupport className="size-4" />
+          <p>support@sanityesports.live</p>
+        </div>
+
+        <div className="flex gap-2 items-center text-gray-400 text-sm">
+          <Mail className="size-4" />
+          <p>contact@sanityesports.live</p>
+        </div>
+      </div>
+
+      <div className="sm:hidden justify-center mt-8 flex flex-wrap gap-4">
+        {socialLinks.map((e, i) => {
+          return (
+            <Link href={e.link} key={i}>
+              <e.icon className=" size-4" />
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/components/Footer.jsx b/components/Footer.jsx
index ee197f7..4e9e0c3 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -5,7 +5,7 @@ import React from "react";
 import Link from "next/link";
 import { FaDiscord, FaInstagram, FaLinkedin, FaYoutube } from "react-icons/fa";
 
-const socialLinks = [
+export const socialLinks = [
   {
     title: "instagram",
     icon: FaInstagram,
diff --git a/package-lock.json b/package-lock.json
index 0413621..ae961ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,18 +8,18 @@
       "name": "sanity",
       "version": "0.1.0",
       "dependencies": {
-        "@hookform/resolvers": "^3.7.0",
+        "@hookform/resolvers": "^3.9.1",
         "@material-tailwind/react": "2.1.9",
         "@portabletext/react": "3.0.18",
         "@radix-ui/react-avatar": "^1.1.2",
         "@radix-ui/react-dialog": "1.1.1",
         "@radix-ui/react-dropdown-menu": "2.1.1",
         "@radix-ui/react-icons": "1.3.0",
-        "@radix-ui/react-label": "2.1.0",
+        "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.4",
         "@radix-ui/react-select": "2.1.1",
         "@radix-ui/react-separator": "^1.1.1",
-        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "1.2.1",
         "@tabler/icons": "1.115.0",
         "@tabler/icons-react": "3.11.0",
@@ -29,6 +29,7 @@
         "bcryptjs": "2.4.3",
         "brackets-viewer": "^1.6.2",
         "class-variance-authority": "0.7.0",
+        "classnames": "^2.5.1",
         "clsx": "2.1.1",
         "cobe": "0.6.3",
         "dotenv": "16.4.5",
@@ -43,7 +44,7 @@
         "nextjs-toploader": "1.6.12",
         "react": "18.3.0",
         "react-dom": "18.3.0",
-        "react-hook-form": "^7.52.1",
+        "react-hook-form": "^7.54.2",
         "react-icons": "5.2.1",
         "react-loading-skeleton": "3.4.0",
         "react-spinners": "^0.15.0",
@@ -52,7 +53,7 @@
         "tailwind-merge": "2.4.0",
         "tailwindcss-animate": "1.0.7",
         "usehooks-ts": "3.1.0",
-        "zod": "^3.23.8"
+        "zod": "^3.24.1"
       },
       "devDependencies": {
         "@tailwindcss/typography": "0.5.13",
@@ -2540,9 +2541,9 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
     "node_modules/@hookform/resolvers": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.7.0.tgz",
-      "integrity": "sha512-42p5X18noBV3xqOpTlf2V5qJZwzNgO4eLzHzmKGh/w7z4+4XqRw5AsESVkqE+qwAuRRlg2QG12EVEjPkrRIbeg==",
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.1.tgz",
+      "integrity": "sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==",
       "license": "MIT",
       "peerDependencies": {
         "react-hook-form": "^7.0.0"
@@ -3083,6 +3084,12 @@
       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
       "optional": true
     },
+    "node_modules/@material-tailwind/react/node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "license": "MIT"
+    },
     "node_modules/@material-tailwind/react/node_modules/framer-motion": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
@@ -8045,9 +8052,10 @@
       }
     },
     "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
     },
     "node_modules/cli-cursor": {
       "version": "3.1.0",
@@ -15018,12 +15026,12 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.52.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.52.1.tgz",
-      "integrity": "sha512-uNKIhaoICJ5KQALYZ4TOaOLElyM+xipord+Ha3crEFhTntdLvWZqVY49Wqd/0GiVCA/f9NjemLeiNPjG7Hpurg==",
+      "version": "7.54.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
+      "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==",
       "license": "MIT",
       "engines": {
-        "node": ">=12.22.0"
+        "node": ">=18.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -18578,9 +18586,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.23.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
-      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/package.json b/package.json
index 49694da..d84b554 100644
--- a/package.json
+++ b/package.json
@@ -12,18 +12,18 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.7.0",
+    "@hookform/resolvers": "^3.9.1",
     "@material-tailwind/react": "2.1.9",
     "@portabletext/react": "3.0.18",
     "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dialog": "1.1.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-icons": "1.3.0",
-    "@radix-ui/react-label": "2.1.0",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slot": "1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "1.2.1",
     "@tabler/icons": "1.115.0",
     "@tabler/icons-react": "3.11.0",
@@ -33,6 +33,7 @@
     "bcryptjs": "2.4.3",
     "brackets-viewer": "^1.6.2",
     "class-variance-authority": "0.7.0",
+    "classnames": "^2.5.1",
     "clsx": "2.1.1",
     "cobe": "0.6.3",
     "dotenv": "16.4.5",
@@ -47,7 +48,7 @@
     "nextjs-toploader": "1.6.12",
     "react": "18.3.0",
     "react-dom": "18.3.0",
-    "react-hook-form": "^7.52.1",
+    "react-hook-form": "^7.54.2",
     "react-icons": "5.2.1",
     "react-loading-skeleton": "3.4.0",
     "react-spinners": "^0.15.0",
@@ -56,7 +57,7 @@
     "tailwind-merge": "2.4.0",
     "tailwindcss-animate": "1.0.7",
     "usehooks-ts": "3.1.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "0.5.13",
diff --git a/public/contact.jpg b/public/contact.jpg
new file mode 100644
index 0000000..6992e32
Binary files /dev/null and b/public/contact.jpg differ