diff --git a/client/package-lock.json b/client/package-lock.json
index fdaf9b22..88193fb1 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8,6 +8,7 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-label": "^2.1.8",
@@ -27,9 +28,11 @@
         "react": "19.1.2",
         "react-dom": "19.1.2",
         "react-google-recaptcha": "^3.1.0",
+        "react-hook-form": "^7.67.0",
         "react-icons": "^5.5.0",
         "tailwind-merge": "^3.3.1",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^4.1.13"
       },
       "devDependencies": {
         "@csstools/postcss-oklab-function": "^4.0.10",
@@ -459,6 +462,18 @@
       "version": "0.2.10",
       "license": "MIT"
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+      "integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "dev": true,
@@ -1946,6 +1961,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "license": "Apache-2.0",
@@ -5798,6 +5819,22 @@
         "react": ">=16.4.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.67.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.67.0.tgz",
+      "integrity": "sha512-E55EOwKJHHIT/I6J9DmQbCWToAYSw9nN5R57MZw9rMtjh+YQreMDxRLfdjfxQbiJ3/qbg3Z02wGzBX4M+5fMtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "license": "MIT",
@@ -7142,6 +7179,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz",
+      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/client/package.json b/client/package.json
index 430127d5..0afd0808 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,7 @@
     "prepare": "cd .. && husky client/.husky"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
@@ -34,9 +35,11 @@
     "react": "19.1.2",
     "react-dom": "19.1.2",
     "react-google-recaptcha": "^3.1.0",
+    "react-hook-form": "^7.67.0",
     "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.1.13"
   },
   "devDependencies": {
     "@csstools/postcss-oklab-function": "^4.0.10",
diff --git a/client/src/app/test/form/page.tsx b/client/src/app/test/form/page.tsx
new file mode 100644
index 00000000..99832f32
--- /dev/null
+++ b/client/src/app/test/form/page.tsx
@@ -0,0 +1,265 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+
+import InputField from "@/components/input";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+const FREQUENCIES = [
+  { label: "Daily", value: "daily" },
+  { label: "Weekly", value: "weekly" },
+  { label: "Monthly", value: "monthly" },
+];
+
+const AMENITIES = [
+  "Audio",
+  "Video",
+  "White Board",
+  "HDMI",
+  "Projector",
+  "Speaker Phone",
+];
+
+const schema = z.object({
+  firstname: z.string().min(1, "Firstname is required"),
+  lastname: z.string().min(1, "Lastname is required"),
+  middlename: z.string().optional(),
+  age: z
+    .string()
+    .min(1, "Age is required")
+    .regex(/^\d+$/, { message: "Age must be a non-negative integer" })
+    .refine(
+      (val) => {
+        const num = Number(val);
+        return num >= 1 && num <= 120;
+      },
+      {
+        message: "Age must be between 1 and 120",
+      },
+    ),
+  frequency: z.enum(["daily", "weekly", "monthly"], {
+    error: () => ({ message: "Invalid frequency" }),
+  }),
+  amenities: z
+    .array(
+      z.enum(AMENITIES, { error: () => ({ message: "Invalid amenities" }) }),
+    )
+    .optional(),
+  recurrenceDate: z.enum(["Monday", "Tuesday", "Wednesday"], {
+    error: () => ({ message: "Invalid recurrence date" }),
+  }),
+});
+
+export default function TestFormPage() {
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    mode: "onChange",
+  });
+
+  return (
+    <div className="mx-auto w-full max-w-xl px-10 py-10">
+      <Form
+        form={form}
+        onSubmit={form.handleSubmit((data) => {
+          alert("submitted data:\n" + JSON.stringify(data));
+        })}
+      >
+        <div className="flex flex-row gap-3">
+          <FormField
+            name="firstname"
+            control={form.control}
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <InputField
+                    kind="text"
+                    label="First Name"
+                    name="firstname"
+                    value={field.value || ""}
+                    onChange={field.onChange}
+                    placeholder="First Name"
+                    required={true}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            name="middlename"
+            control={form.control}
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <InputField
+                    kind="text"
+                    label="Middle Name"
+                    name="middlename"
+                    value={field.value || ""}
+                    onChange={field.onChange}
+                    placeholder="Middle Name"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            name="lastname"
+            control={form.control}
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <InputField
+                    kind="text"
+                    label="Last Name"
+                    name="lastname"
+                    value={field.value || ""}
+                    onChange={field.onChange}
+                    placeholder="Last Name"
+                    required={true}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <FormField
+          name="age"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <InputField
+                  kind="number"
+                  label="Age"
+                  name="age"
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  placeholder="Age"
+                  required={true}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Frequency */}
+        <FormField
+          name="frequency"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <InputField
+                  kind="select"
+                  label="Frequency"
+                  name="frequency"
+                  options={FREQUENCIES}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  placeholder="Select frequency"
+                  required={true}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Amenities (badges / multiselect) */}
+        <FormField
+          name="amenities"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <InputField
+                  kind="badge"
+                  label="Amenities"
+                  name="amenities"
+                  options={AMENITIES}
+                  value={field.value || []}
+                  onChange={field.onChange}
+                  placeholder="Select Amenities"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Recurrence Date (Radio Group) */}
+        <FormField
+          name="recurrenceDate"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="font-bold">
+                Recurrence Date <span className="text-red-600">*</span>
+              </FormLabel>
+              <FormControl>
+                <RadioGroup
+                  value={field.value}
+                  onValueChange={field.onChange}
+                  className="flex space-x-4"
+                >
+                  <div className="space-x-2">
+                    <RadioGroupItem value="Monday" id="Monday" />
+                    <Label htmlFor="Monday">Monday</Label>
+                  </div>
+
+                  <div className="space-x-2">
+                    <RadioGroupItem value="Tuesday" id="Tuesday" />
+                    <Label htmlFor="Tuesday">Tuesday</Label>
+                  </div>
+
+                  <div className="space-x-2">
+                    <RadioGroupItem value="Wednesday" id="Wednesday" />
+                    <Label htmlFor="Wednesday">Wednesday</Label>
+                  </div>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* Buttons */}
+        <div className="ml-auto space-x-3 space-y-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => alert(JSON.stringify("Cancel button triggered"))}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            variant="confirm"
+            disabled={!form.formState.isValid}
+          >
+            Okay
+          </Button>
+        </div>
+      </Form>
+    </div>
+  );
+}
diff --git a/client/src/components/ui/form.tsx b/client/src/components/ui/form.tsx
new file mode 100644
index 00000000..c9fb7d61
--- /dev/null
+++ b/client/src/components/ui/form.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import React from "react";
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+  type UseFormReturn,
+  useFormState,
+} from "react-hook-form";
+
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+/**
+ * Helper: create context to share name within each field
+ */
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+type FormItemContextValue = {
+  id: string;
+};
+
+/**
+ * Helper: create context to share id within each field
+ */
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+type FormProps<T extends FieldValues> = {
+  form: UseFormReturn<T>;
+} & React.ComponentProps<"form">;
+
+/**
+ * Write `<Form></Form>` to use the form component to group a form
+ * Use the form props to pass zod schema, set default values, etc.
+ * ```
+ * const form = useForm<z.infer<typeof schema>>({
+ *  resolver: zodResolver(schema),  // pass zod schema
+ *  mode: "onChange",               // validate the form each time values change
+ * });
+ * ```
+ */
+const FormComponent = React.forwardRef<HTMLFormElement, FormProps<FieldValues>>(
+  ({ form, className, children, ...props }, ref) => {
+    return (
+      <FormProvider {...form}>
+        <form
+          ref={ref}
+          className={cn(
+            "flex w-full flex-col space-y-3 rounded-md border border-[hsl(var(--border))] bg-background px-8 py-8",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </form>
+      </FormProvider>
+    );
+  },
+);
+FormComponent.displayName = "Form";
+
+/**
+ * Wrapper to wrap each form field. Example:
+ * ```
+ *    <FormField
+ *      name="firstname"  // field name
+ *      control={form.control}  // to let react hook form manage the state
+ *      render={({ field }) => (
+ *        <FormItem>
+ *          <FormControl>
+ *            <InputField
+ *              // other fields
+ *              value={field.value}  // pass field.value for react hook form management
+ *              onChange={field.onChange}   // pass field.onChange for react hook form management
+ *            />
+ *           </FormControl>
+ *           <FormMessage />
+ *        </FormItem>
+ *      )}
+ * ```
+ */
+const 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>
+  );
+};
+
+/**
+ * Custom hook to get states and other infos within a FormField
+ */
+const useFormCustom = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  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,
+  };
+};
+
+/**
+ * Wrapper to wrap each field's rendering components
+ */
+const FormItem = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div
+          ref={ref}
+          data-slot="form-item"
+          className={cn("grid gap-2", className)}
+          {...props}
+        />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
+
+/**
+ * Optional if label is not included in input field
+ * If FormLabel is use, FormControl must be used to wrap the children to let label control the children
+ */
+const FormLabel = React.forwardRef<
+  HTMLLabelElement,
+  React.ComponentProps<typeof Label> & { required?: boolean }
+>(({ required = false, className, ...props }, ref) => {
+  const { error, formItemId } = useFormCustom();
+  return (
+    <Label
+      ref={ref}
+      data-slot="form-label"
+      data-error={!!error}
+      htmlFor={formItemId}
+      className={cn("", className)}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+/**
+ * Wrapper to used with FormLabel and provide accessibility info
+ */
+const FormControl = React.forwardRef<
+  HTMLElement,
+  React.ComponentProps<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormCustom();
+
+  return (
+    <Slot
+      ref={ref}
+      className="peer"
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+/**
+ * Optional if you want to render messages (e.g., error message)
+ */
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentProps<"p">
+>(({ className, ...props }, ref) => {
+  const { error, formMessageId } = useFormCustom();
+  const body = error ? String(error?.message ?? "") : props.children;
+
+  if (!body) return null;
+
+  return (
+    <p
+      ref={ref}
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-sm text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+// to avoid type issues
+export const Form = FormComponent as <T extends FieldValues>(
+  props: FormProps<T> & { ref?: React.Ref<HTMLFormElement> },
+) => React.ReactElement;
+
+export {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormCustom,
+};