diff --git a/app/api/brackets/[id]/mockBrackets.js b/app/api/brackets/[id]/mockBrackets.js
index 0fc344a..ba2782c 100644
--- a/app/api/brackets/[id]/mockBrackets.js
+++ b/app/api/brackets/[id]/mockBrackets.js
@@ -81,22 +81,20 @@ export default {
       name: "Revenant Esports",
     },
   ],
-  "stage": [
-    {
-      "id": 0,
-      "tournament_id": 1,
-      "name": "Elimination stage",
-      "type": "single_elimination",
-      "settings": {
-        "grandFinal": "single",
-        "consolationFinal": false,
-        "matchesChildCount": 0,
-        "size": 16,
-        "seedOrdering": [
-          "inner_outer"
-        ]
-      }
-    }
+  stage: [
+    {
+      id: 0,
+      tournament_id: 1,
+      name: "Elimination stage",
+      type: "single_elimination",
+      settings: {
+        grandFinal: "single",
+        consolationFinal: false,
+        matchesChildCount: 0,
+        size: 16,
+        seedOrdering: ["inner_outer"],
+      },
+    },
   ],
   group: [
     {
diff --git a/app/api/brackets/route.js b/app/api/brackets/route.js
index ad9d2de..d4eec57 100644
--- a/app/api/brackets/route.js
+++ b/app/api/brackets/route.js
@@ -1,71 +1,72 @@
-
-import dbConnect from '../../../lib/dbConnect';
-import Bracket from '../../../model/Bracket';
-import { NextResponse } from 'next/server';
-import Tournament from '../../../model/Tournament';
-import { z } from 'zod';
+import dbConnect from "../../../lib/dbConnect";
+import Bracket from "../../../model/Bracket";
+import { NextResponse } from "next/server";
+import Tournament from "../../../model/Tournament";
+import { z } from "zod";
 
 const bracketSchema = z.object({
-    tournament_name: z.string().min(1),
-    format: z.enum(['single_elimination', 'double_elimination']),
-    consolationFinal: z.boolean().default(false),
-    grandFinalType: z.enum(['simple', 'double']),
-    teams: z.array(z.string().min(1)).min(4, "At least 4 teams are required")
-})
+  tournament_name: z.string().min(1),
+  format: z.enum(["single_elimination", "double_elimination"]),
+  consolationFinal: z.boolean().default(false),
+  grandFinalType: z.enum(["simple", "double"]),
+  teams: z.array(z.string().min(1)).min(4, "At least 4 teams are required"),
+});
 
 export async function POST(request) {
   try {
     await dbConnect();
 
-        const body = await request.json();
-
-        const validation = bracketSchema.safeParse(body)
+    const body = await request.json();
 
-        if (!validation.success) {
-            return NextResponse.json(validation.error.format(), { status: 400 })
-        }
+    const validation = bracketSchema.safeParse(body);
 
-        console.log(validation.data)
+    if (!validation.success) {
+      return NextResponse.json(validation.error.format(), { status: 400 });
+    }
 
-        return NextResponse.json(validation.data, { status: 201 });
+    console.log(validation.data);
 
-        // const { tournament_id, consolationFinal, grandFinalType } = validation.data;
+    return NextResponse.json(validation.data, { status: 201 });
 
+    // const { tournament_id, consolationFinal, grandFinalType } = validation.data;
 
-        // const tournament = await Tournament.findById(tournament_id);
-        // if (!tournament) {
-        //     return NextResponse.json({ error: 'Tournament not found' }, { status: 404 });
-        // }
+    // const tournament = await Tournament.findById(tournament_id);
+    // if (!tournament) {
+    //     return NextResponse.json({ error: 'Tournament not found' }, { status: 404 });
+    // }
 
-        // const bracketName = tournament.tournamentName;
-        // const registeredCount = tournament.teamsRegistered.length
+    // const bracketName = tournament.tournamentName;
+    // const registeredCount = tournament.teamsRegistered.length
 
-        // const newBracket = new Bracket({
-        //     bracketName,
-        //     tournamentId: tournament_id,
-        //     BracketNumber: registeredCount,
-        //     consolationFinal,
-        //     grandFinalType,
-        // });
+    // const newBracket = new Bracket({
+    //     bracketName,
+    //     tournamentId: tournament_id,
+    //     BracketNumber: registeredCount,
+    //     consolationFinal,
+    //     grandFinalType,
+    // });
 
-        // await newBracket.save();
+    // await newBracket.save();
 
-        // // Update the tournament with the new bracket
-        // await Tournament.findByIdAndUpdate(tournament_id,
-        //     { $push: { brackets: newBracket._id } }
-        // );
+    // // Update the tournament with the new bracket
+    // await Tournament.findByIdAndUpdate(tournament_id,
+    //     { $push: { brackets: newBracket._id } }
+    // );
 
-        // return NextResponse.json({
-        //     message: 'Bracket created and associated with tournament successfully',
-        //     id: newBracket._id
-        // }, { status: 201 });
-    } catch (error) {
-        console.error('Error creating bracket:', error);
-        return NextResponse.json({
-            error: 'Internal Server Error',
-            details: error.message
-        }, { status: 500 });
-    }
+    // return NextResponse.json({
+    //     message: 'Bracket created and associated with tournament successfully',
+    //     id: newBracket._id
+    // }, { status: 201 });
+  } catch (error) {
+    console.error("Error creating bracket:", error);
+    return NextResponse.json(
+      {
+        error: "Internal Server Error",
+        details: error.message,
+      },
+      { status: 500 },
+    );
+  }
 }
 
 export async function GET() {
diff --git a/app/api/games/route.js b/app/api/games/route.js
index 6bf07c4..58cef80 100644
--- a/app/api/games/route.js
+++ b/app/api/games/route.js
@@ -22,4 +22,3 @@ export async function GET(req) {
     );
   }
 }
-
diff --git a/app/bracket/create/page.js b/app/bracket/create/page.js
index 450581c..806f0b5 100644
--- a/app/bracket/create/page.js
+++ b/app/bracket/create/page.js
@@ -1,8 +1,6 @@
-import React from 'react'
-import BracketForm from '../../../components/BracketForm'
+import React from "react";
+import BracketForm from "../../../components/BracketForm";
 
 export default function Page() {
-  return (
-    <BracketForm />
-  )
+  return <BracketForm />;
 }
diff --git a/app/bracket/page.js b/app/bracket/page.js
index 89ee16c..e70d4fd 100644
--- a/app/bracket/page.js
+++ b/app/bracket/page.js
@@ -1,20 +1,23 @@
 import TournamentBracket from "../../components/TournamentBracket";
-import React from "react"
+import React from "react";
 import BracketList from "../../components/BracketList";
-import { buttonVariants } from "../../components/ui/button"
+import { buttonVariants } from "../../components/ui/button";
 import Link from "next/link";
 
 const BracketPage = () => {
-    return (
-        <div className="min-h-[70vh] px-7">
-            <div className="border-b pb-4 px-4 flex">
-                <Link href="/bracket/create" className={`ml-auto ${buttonVariants({ variant: "default" })}`}>
-                    Create a bracket
-                </Link>
-            </div>
-            <BracketList />
-        </div>
-    );
+  return (
+    <div className="min-h-[70vh] px-7">
+      <div className="border-b pb-4 px-4 flex">
+        <Link
+          href="/bracket/create"
+          className={`ml-auto ${buttonVariants({ variant: "default" })}`}
+        >
+          Create a bracket
+        </Link>
+      </div>
+      <BracketList />
+    </div>
+  );
 };
 
 export default BracketPage;
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/app/games/page.js b/app/games/page.js
index c473977..5fd1853 100644
--- a/app/games/page.js
+++ b/app/games/page.js
@@ -3,28 +3,34 @@ import Link from "next/link";
 import { games } from "./data/index";
 import Filter from "../../components/Filter";
 
-export default async function page({searchParams}) {
-
-  let filterUrl
-  if(searchParams?.filter){
-    filterUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/api/games?filter=${searchParams.filter}`
-  }else{
-    filterUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/api/games`
+export default async function page({ searchParams }) {
+  let filterUrl;
+  if (searchParams?.filter) {
+    filterUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/api/games?filter=${searchParams.filter}`;
+  } else {
+    filterUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/api/games`;
   }
 
   const response = await fetch(`${filterUrl}`, {
-    method: "GET"
+    method: "GET",
   });
 
-  const gameData = await response.json()
+  const gameData = await response.json();
 
-  const filterss = [{
-    name: 'FPS', value: 'fps'
-  }, {
-    name: 'Battle Royale', value: 'battle royale'
-  },{
-    name: "None", value: 'none'
-  }]
+  const filterss = [
+    {
+      name: "FPS",
+      value: "fps",
+    },
+    {
+      name: "Battle Royale",
+      value: "battle royale",
+    },
+    {
+      name: "None",
+      value: "none",
+    },
+  ];
 
   return (
     <section className="px-[5%] xl:px-[12%] pt-10 pb-20 transition-all">
diff --git a/components/BracketForm.jsx b/components/BracketForm.jsx
index 3b86918..b242499 100644
--- a/components/BracketForm.jsx
+++ b/components/BracketForm.jsx
@@ -1,7 +1,7 @@
-"use client"
+"use client";
 
-import React, { useState } from 'react'
-import { Button } from "../@/components/ui/button"
+import React, { useState } from "react";
+import { Button } from "../@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -10,57 +10,57 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "../@/components/ui/form"
+} from "../@/components/ui/form";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../@/components/ui/select"
-import { Input } from "../@/components/ui/input"
-import { z } from 'zod'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useToast } from "../@/components/ui/use-toast"
+} from "../@/components/ui/select";
+import { Input } from "../@/components/ui/input";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useToast } from "../@/components/ui/use-toast";
 
 const bracketSchema = z.object({
   tournament_name: z.string().min(1),
-  format: z.enum(['single_elimination', 'double_elimination']),
+  format: z.enum(["single_elimination", "double_elimination"]),
   consolationFinal: z.boolean().default(false),
-  grandFinalType: z.enum(['simple', 'double'])
-})
+  grandFinalType: z.enum(["simple", "double"]),
+});
 
 const teamSchema = z.object({
-  teams: z.array(z.string().min(1)).min(4, "At least 4 teams are required")
-})
+  teams: z.array(z.string().min(1)).min(4, "At least 4 teams are required"),
+});
 
 export default function BracketForm() {
-  const [bracketCreated, setBracketCreated] = useState(false)
-  const [bracketInfo, setBracketInfo] = useState(null)
-  const toast = useToast()
+  const [bracketCreated, setBracketCreated] = useState(false);
+  const [bracketInfo, setBracketInfo] = useState(null);
+  const toast = useToast();
 
   const bracketForm = useForm({
     resolver: zodResolver(bracketSchema),
     defaultValues: {
-      tournament_name: '',
-      format: 'single_elimination',
+      tournament_name: "",
+      format: "single_elimination",
       consolationFinal: false,
-      grandFinalType: 'simple'
-    }
-  })
+      grandFinalType: "simple",
+    },
+  });
 
   const teamForm = useForm({
     resolver: zodResolver(teamSchema),
     defaultValues: {
-      teams: ['', '', '', '']
-    }
-  })
+      teams: ["", "", "", ""],
+    },
+  });
 
   async function onBracketSubmit(values) {
-    console.log("Bracket Info:", values)
-    setBracketInfo(values)
-    setBracketCreated(true)
+    console.log("Bracket Info:", values);
+    setBracketInfo(values);
+    setBracketCreated(true);
   }
 
   async function onTeamSubmit(values) {
@@ -77,17 +77,20 @@ export default function BracketForm() {
         title: "An unexpected error occurred",
         description: "Please try again later",
         variant: "error",
-      })
+      });
       return;
     }
     return;
   }
 
   return (
-    <div className='bg-card border p-6 rounded-md max-w-[80%] mx-auto'>
+    <div className="bg-card border p-6 rounded-md max-w-[80%] mx-auto">
       {!bracketCreated ? (
         <Form {...bracketForm}>
-          <form onSubmit={bracketForm.handleSubmit(onBracketSubmit)} className='grid grid-cols-2 gap-8'>
+          <form
+            onSubmit={bracketForm.handleSubmit(onBracketSubmit)}
+            className="grid grid-cols-2 gap-8"
+          >
             <FormField
               control={bracketForm.control}
               name="tournament_name"
@@ -106,15 +109,22 @@ export default function BracketForm() {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Format</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue placeholder="Format" />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      <SelectItem value="single_elimination">Single Elimination</SelectItem>
-                      <SelectItem value="double_elimination">Double Elimination</SelectItem>
+                      <SelectItem value="single_elimination">
+                        Single Elimination
+                      </SelectItem>
+                      <SelectItem value="double_elimination">
+                        Double Elimination
+                      </SelectItem>
                     </SelectContent>
                   </Select>
                 </FormItem>
@@ -126,7 +136,10 @@ export default function BracketForm() {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Consolation Final</FormLabel>
-                  <Select onValueChange={(value) => field.onChange(value === 'true')} defaultValue={field.value.toString()}>
+                  <Select
+                    onValueChange={(value) => field.onChange(value === "true")}
+                    defaultValue={field.value.toString()}
+                  >
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue placeholder="Consolation Final" />
@@ -146,7 +159,10 @@ export default function BracketForm() {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Grand Final Type</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue placeholder="Grand Final Type" />
@@ -167,10 +183,15 @@ export default function BracketForm() {
         </Form>
       ) : (
         <Form {...teamForm}>
-          <form onSubmit={teamForm.handleSubmit(onTeamSubmit)} className='space-y-6'>
+          <form
+            onSubmit={teamForm.handleSubmit(onTeamSubmit)}
+            className="space-y-6"
+          >
             <h2 className="text-2xl font-bold mb-4">Enter Team Names</h2>
-            <p className="text-sm text-muted-foreground mb-4">Please enter at least 4 team names.</p>
-            {teamForm.watch('teams').map((_, index) => (
+            <p className="text-sm text-muted-foreground mb-4">
+              Please enter at least 4 team names.
+            </p>
+            {teamForm.watch("teams").map((_, index) => (
               <FormField
                 key={index}
                 control={teamForm.control}
@@ -179,7 +200,10 @@ export default function BracketForm() {
                   <FormItem>
                     <FormLabel>Team {index + 1}</FormLabel>
                     <FormControl>
-                      <Input {...field} placeholder={`Team ${index + 1} Name`} />
+                      <Input
+                        {...field}
+                        placeholder={`Team ${index + 1} Name`}
+                      />
                     </FormControl>
                   </FormItem>
                 )}
@@ -188,17 +212,20 @@ export default function BracketForm() {
             <Button
               type="button"
               variant="outline"
-              onClick={() => teamForm.setValue('teams', [...teamForm.watch('teams'), ''])}
+              onClick={() =>
+                teamForm.setValue("teams", [...teamForm.watch("teams"), ""])
+              }
             >
               Add Another Team
             </Button>
             <div>
-              <Button type="submit" disabled={form.formState.isSubmitting}>Submit Teams</Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                Submit Teams
+              </Button>
             </div>
           </form>
         </Form>
       )}
     </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/components/ui/select.jsx b/components/ui/select.jsx
index d97464b..3e1ae4e 100644
--- a/components/ui/select.jsx
+++ b/components/ui/select.jsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef(
       ref={ref}
       className={cn(
         "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-        className
+        className,
       )}
       {...props}
     >
@@ -27,7 +27,7 @@ const SelectTrigger = React.forwardRef(
         <ChevronDown className="h-4 w-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  )
+  ),
 );
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
@@ -35,12 +35,15 @@ const SelectScrollUpButton = React.forwardRef(
   ({ className, ...props }, ref) => (
     <SelectPrimitive.ScrollUpButton
       ref={ref}
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
       {...props}
     >
       <ChevronUp className="h-4 w-4" />
     </SelectPrimitive.ScrollUpButton>
-  )
+  ),
 );
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
@@ -48,14 +51,18 @@ const SelectScrollDownButton = React.forwardRef(
   ({ className, ...props }, ref) => (
     <SelectPrimitive.ScrollDownButton
       ref={ref}
-      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
       {...props}
     >
       <ChevronDown className="h-4 w-4" />
     </SelectPrimitive.ScrollDownButton>
-  )
+  ),
 );
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef(
   ({ className, children, position = "popper", ...props }, ref) => (
@@ -66,7 +73,7 @@ const SelectContent = React.forwardRef(
           "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
+          className,
         )}
         position={position}
         {...props}
@@ -76,7 +83,7 @@ const SelectContent = React.forwardRef(
           className={cn(
             "p-1",
             position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
           )}
         >
           {children}
@@ -84,19 +91,17 @@ const SelectContent = React.forwardRef(
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  )
+  ),
 );
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
-const SelectLabel = React.forwardRef(
-  ({ className, ...props }, ref) => (
-    <SelectPrimitive.Label
-      ref={ref}
-      className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-      {...props}
-    />
-  )
-);
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef(
@@ -105,7 +110,7 @@ const SelectItem = React.forwardRef(
       ref={ref}
       className={cn(
         "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -116,19 +121,17 @@ const SelectItem = React.forwardRef(
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  )
+  ),
 );
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = React.forwardRef(
-  ({ className, ...props }, ref) => (
-    <SelectPrimitive.Separator
-      ref={ref}
-      className={cn("-mx-1 my-1 h-px bg-muted", className)}
-      {...props}
-    />
-  )
-);
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 3bef539..a5f7b82 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -1,15 +1,14 @@
-import qs from "query-string"
-
+import qs from "query-string";
 
 export const formUrlQuery = ({ params, key, value }) => {
-    const currentUrl = qs.parse(params);
-    currentUrl[key] = value;
-  
-    return qs.stringifyUrl(
-      {
-        url: window.location.pathname,
-        query: currentUrl
-      },
-      { skipNull: true }
-    );
-  };
\ No newline at end of file
+  const currentUrl = qs.parse(params);
+  currentUrl[key] = value;
+
+  return qs.stringifyUrl(
+    {
+      url: window.location.pathname,
+      query: currentUrl,
+    },
+    { skipNull: true },
+  );
+};
diff --git a/model/Bracket.js b/model/Bracket.js
index 8a05693..db8dcae 100644
--- a/model/Bracket.js
+++ b/model/Bracket.js
@@ -2,11 +2,15 @@ const mongoose = require("mongoose");
 const Schema = mongoose.Schema;
 
 const BracketSchema = new Schema({
-    tournamentName: { type: String, required: true },
-    BracketNumber: {type: Number, required: true},
-    consolationFinal: {type: Boolean, required: true},
-    grandFinalType: { type: String, enum: ['none', 'simple', 'double'], required: true },
-    createdAt: { type: Date, default: Date.now }
+  tournamentName: { type: String, required: true },
+  BracketNumber: { type: Number, required: true },
+  consolationFinal: { type: Boolean, required: true },
+  grandFinalType: {
+    type: String,
+    enum: ["none", "simple", "double"],
+    required: true,
+  },
+  createdAt: { type: Date, default: Date.now },
 });
 
 module.exports =
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 6359053..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",
@@ -75,4 +76,4 @@
   "prisma": {
     "seed": "node prisma/seed.js"
   }
-}
\ No newline at end of file
+}
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