diff --git a/src/components/aceternity/input.tsx b/src/components/aceternity/input.tsx
new file mode 100644
index 0000000..4864b03
--- /dev/null
+++ b/src/components/aceternity/input.tsx
@@ -0,0 +1,61 @@
+// Input component extends from shadcnui - https://ui.shadcn.com/docs/components/input
+'use client'
+import { motion, useMotionTemplate, useMotionValue } from 'framer-motion'
+import { forwardRef, useState } from 'react'
+import { cn } from '@/components/utils/cn'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    const radius = 100 // change this to increase the rdaius of the hover effect
+    const [visible, setVisible] = useState(false)
+
+    const mouseX = useMotionValue(0)
+    const mouseY = useMotionValue(0)
+
+    function handleMouseMove({ currentTarget, clientX, clientY }: any) {
+      const { left, top } = currentTarget.getBoundingClientRect()
+
+      mouseX.set(clientX - left)
+      mouseY.set(clientY - top)
+    }
+    return (
+      <motion.div
+        style={{
+          background: useMotionTemplate`
+        radial-gradient(
+          ${visible ? `${radius}px` : '0px'} circle at ${mouseX}px ${mouseY}px,
+          var(--sky-700),
+          transparent 80%
+        )
+      `,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        className="p-[2px] rounded-lg transition duration-300 group/input"
+      >
+        <input
+          type={type}
+          className={cn(
+            `flex h-10 w-full border bg-background text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent 
+          file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600 
+          focus-visible:outline-none focus-visible:ring-[2px]  focus-visible:ring-neutral-400 dark:focus-visible:ring-info
+           disabled:cursor-not-allowed disabled:opacity-50
+           dark:shadow-[0px_0px_1px_1px_var(--sky-950)]
+           group-hover/input:shadow-none transition duration-400
+           `,
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+      </motion.div>
+    )
+  },
+)
+Input.displayName = 'Input'
+
+export { Input }
diff --git a/src/components/aceternity/label.tsx b/src/components/aceternity/label.tsx
new file mode 100644
index 0000000..e10a7ef
--- /dev/null
+++ b/src/components/aceternity/label.tsx
@@ -0,0 +1,25 @@
+// Label component extends from shadcnui - https://ui.shadcn.com/docs/components/label
+
+'use client'
+import * as LabelPrimitive from '@radix-ui/react-label'
+
+import type { ComponentPropsWithoutRef, ElementRef } from 'react'
+import { forwardRef } from 'react'
+import { cn } from '@/components/utils/cn'
+
+const Label = forwardRef<
+  ElementRef<typeof LabelPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      'text-sm font-medium text-black dark:text-white leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      className,
+    )}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/components/aceternity/text-area.tsx b/src/components/aceternity/text-area.tsx
new file mode 100644
index 0000000..ebb2c9b
--- /dev/null
+++ b/src/components/aceternity/text-area.tsx
@@ -0,0 +1,71 @@
+// Not originally from Aceternity, but uses the styles from the input component
+import * as React from 'react'
+import { motion, useMotionTemplate, useMotionValue } from 'framer-motion'
+import { cn } from '@/components/utils/cn'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    const radius = 100 // change this to increase the radius of the hover effect
+    const [visible, setVisible] = React.useState(false)
+
+    const mouseX = useMotionValue(0)
+    const mouseY = useMotionValue(0)
+
+    function handleMouseMove({ currentTarget, clientX, clientY }: any) {
+      const { left, top } = currentTarget.getBoundingClientRect()
+
+      mouseX.set(clientX - left)
+      mouseY.set(clientY - top)
+    }
+
+    return (
+    // <textarea
+    //   className={cn(
+    //     'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    //     className,
+    //   )}
+    //   ref={ref}
+    //   {...props}
+    // />
+
+      <motion.div
+        style={{
+          background: useMotionTemplate`
+          radial-gradient(
+            ${visible ? `${radius}px` : '0px'} circle at ${mouseX}px ${mouseY}px,
+            var(--sky-700),
+            transparent 80%
+          )
+        `,
+        }}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        className="p-[2px] rounded-lg transition duration-300 group/input"
+      >
+        <textarea
+          className={cn(
+            `flex min-h-[80px] w-full border dark:bg-background text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm  file:border-0 file:bg-transparent
+          file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600
+          focus-visible:outline-none focus-visible:ring-[2px]  focus-visible:ring-neutral-400 dark:focus-visible:ring-info
+          disabled:cursor-not-allowed disabled:opacity-50
+          dark:shadow-[0px_0px_1px_1px_var(--sky-950)]
+          group-hover/input:shadow-none transition duration-400
+          `,
+            className,
+          )}
+          ref={ref}
+          {...props}
+        />
+      </motion.div>
+
+    )
+  },
+)
+
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/src/components/sections/home/contact/contact.tsx b/src/components/sections/home/contact/contact.tsx
index 3f91fe0..225efc1 100644
--- a/src/components/sections/home/contact/contact.tsx
+++ b/src/components/sections/home/contact/contact.tsx
@@ -1,34 +1,72 @@
+// TODO: Remove these ESLint disables after Shadcn migration is complete
 /* eslint-disable no-alert */
 /* eslint-disable no-console */
 
 'use client'
 
+import { zodResolver } from '@hookform/resolvers/zod'
+import z from 'zod'
+import { useForm } from 'react-hook-form'
+import { EnvelopeOpenIcon } from '@radix-ui/react-icons'
+import { Loader2 } from 'lucide-react'
 import { useState } from 'react'
+import { Input } from '@/components/aceternity/input'
+import { Textarea } from '@/components/aceternity/text-area'
+import { Label as FormLabel } from '@/components/aceternity/label'
+import { Button } from '@/components/shadcn/ui/button/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form'
+
+const formSchema = z.object({
+  fullName: z.string().trim().min(1, {
+    message: 'To whom do we speak to? :/',
+  }).max(255),
+  email: z.string().trim().email({
+    message: 'Without a valid email, how are we going to send you our newsletter full of cat memes? :/',
+  }).max(255),
+  subject: z.string().trim().min(1, {
+    message: 'A subject helps us pretend we\'re organized. :/ ',
+  }).max(255),
+  message: z.string().trim().min(1, {
+    message: 'A message without content is like a sandwich without filling. :/',
+  }).max(255),
+})
 
 export function Contact() {
-  const [formData, setFormData] = useState({
-    fullName: '',
-    email: '',
-    subject: '',
-    message: '',
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      fullName: '',
+      email: '',
+      subject: '',
+      message: '',
+    },
   })
 
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const { name, value } = e.target
-    setFormData(prev => ({ ...prev, [name]: value }))
-  }
+  const [isSubmitting, setIsSubmitting] = useState(false) // Add this state variable
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    setIsSubmitting(true)
     try {
       const response = await fetch('/api/send', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify(formData),
+        body: JSON.stringify(values),
       })
       const result = await response.json()
       console.log(result)
@@ -37,12 +75,14 @@ export function Contact() {
       }
       else {
         alert('Message sent successfully!')
+        form.reset()
       }
     }
     catch (error) {
       console.error('Error:', error)
       alert('Error sending message. Please try again.')
     }
+    finally { setIsSubmitting(false) }
   }
 
   return (
@@ -51,88 +91,91 @@ export function Contact() {
       className="overflow-none mx-auto my-20 max-w-3xl space-y-10 px-3 md:px-8"
     >
       <h3 className="text-5xl font-bold text-primary sm:text-6xl">Contact</h3>
+      <Card>
+        <CardHeader>
+          <CardTitle className="font-bold text-xl text-neutral-800 dark:text-neutral-200">Get in Touch</CardTitle>
+          <CardDescription
+            className="text-neutral-600 text-sm mt-2 dark:text-neutral-300"
+          >
+            Questions or feedback? Drop us a message, and we'll get back to you soon.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(onSubmit)}
+              className="space-y-6"
+            >
+              <div className="flex flex-col w-full space-y-2 xs:space-y-0 xs:space-x-6 xs:flex-row">
+                <FormField
+                  control={form.control}
+                  name="fullName"
+                  render={({ field }) => (
+                    <FormItem className="w-full">
+                      <FormLabel>Full Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Your Full Name*" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem className="w-full">
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Your Email*" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
 
-      {/* Browser Container */}
-      <div className="mockup-browser border border-base-300 transition-all duration-700 hover:shadow-[0_0px_15px_rgba(0,202,255,0.5)]">
-        {/* Browser Toolbar */}
-        <div className="mockup-browser-toolbar">
-          <p className="input border border-base-300">Get in touch :)</p>
-        </div>
-
-        {/* Form Container */}
-        <form
-          action=""
-          onSubmit={handleSubmit}
-          className="flex w-full flex-col items-center justify-center space-y-5 border-t border-base-300 px-4 py-16"
-        >
-          {/* Full Name */}
-          <label className="form-control w-full max-w-lg">
-            <div className="label">
-              <span className="label-text text-base">Full Name</span>
-            </div>
-            <input
-              type="text"
-              name="fullName"
-              placeholder="Your Full Name"
-              className="input input-bordered focus:input-secondary"
-              onChange={handleChange}
-              value={formData.fullName}
-            />
-          </label>
-
-          {/* E-Mail Address */}
-          <label className="form-control w-full max-w-lg">
-            <div className="label">
-              <span className="label-text text-base">E-Mail Address</span>
-            </div>
-            <input
-              type="email"
-              name="email"
-              placeholder="Your E-mail Address"
-              className="input input-bordered focus:input-secondary"
-              onChange={handleChange}
-              value={formData.email}
-            />
-          </label>
-
-          {/* Subject */}
-          <label className="form-control w-full max-w-lg">
-            <div className="label">
-              <span className="label-text text-base">Subject</span>
-            </div>
-            <input
-              type="text"
-              name="subject"
-              placeholder="Subject"
-              className="input input-bordered focus:input-secondary"
-              onChange={handleChange}
-              value={formData.subject}
-            />
-          </label>
-
-          {/* Message */}
-          <label className="form-control w-full max-w-lg">
-            <div className="label">
-              <span className="label-text text-base">Message</span>
-            </div>
-            <textarea
-              name="message"
-              className="textarea textarea-bordered min-h-56 text-base focus:input-secondary"
-              placeholder="Your Message"
-              onChange={handleChange}
-              value={formData.message}
-            />
-          </label>
+              <FormField
+                control={form.control}
+                name="subject"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Subject</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Subject*" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-          {/* Submit Button */}
-          <button
-            type="button"
-            className="btn btn-outline btn-accent btn-wide text-base uppercase md:text-lg"
+              <FormField
+                control={form.control}
+                name="message"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Message</FormLabel>
+                    <FormControl>
+                      <Textarea placeholder="Your Message*" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </CardContent>
+        <CardFooter className="place-content-center">
+          <Button
+            variant="outline"
+            size="lg"
+            onClick={() => form.handleSubmit(onSubmit)()}
           >
-            Submit
-          </button>
-        </form>
-      </div>
+            {isSubmitting ? <Loader2 className="animate-spin mr-2 size-4" /> : <EnvelopeOpenIcon className="mr-2 size-4" />}
+            {isSubmitting ? 'Sending...' : 'Submit'}
+          </Button>
+        </CardFooter>
+      </Card>
     </div>
   )
 }
diff --git a/src/components/shadcn/ui/input/input.tsx b/src/components/shadcn/ui/input/input.tsx
new file mode 100644
index 0000000..a2e71eb
--- /dev/null
+++ b/src/components/shadcn/ui/input/input.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { cn } from '@/components/utils/cn'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Input.displayName = 'Input'
+
+export { Input }
diff --git a/src/components/twilight/button/button.tsx b/src/components/twilight/button/button.tsx
index 7b59855..d850f18 100644
--- a/src/components/twilight/button/button.tsx
+++ b/src/components/twilight/button/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-input bg-background shadow-sm hover:bg-primary hover:text-primary-foreground',
         secondary:
           'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..360dbe5
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { cn } from '@/components/utils/cn'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..d477da8
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react'
+
+import { cn } from '@/components/utils/cn'
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-xl border bg-card text-card-foreground shadow',
+      className,
+    )}
+    {...props}
+  />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn('font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+))
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 0000000..29bd7b6
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,183 @@
+// TODO: Rmoeve this ESLint disable after Shadcn migration is complete
+/* eslint-disable react/no-unstable-context-value */
+
+'use client'
+
+import * as React from 'react'
+import type * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import type {
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+} from 'react-hook-form'
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form'
+
+import { cn } from '@/components/utils/cn'
+import { Label } from '@/components/ui/label'
+
+const Form = FormProvider
+
+interface FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+)
+
+function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+)
+
+function useFormField() {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+interface FormItemContextValue {
+  id: string
+}
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-[0.8rem] text-muted-foreground', className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-[0.8rem] font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = 'FormMessage'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..e395976
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { type VariantProps, cva } from 'class-variance-authority'
+
+import { cn } from '@/components/utils/cn'
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }