diff --git a/package.json b/package.json
index 4946556688..7e91ddd465 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@gsap/react": "2.1.1",
     "@headlessui/react": "2.1.0",
     "@hookform/error-message": "2.0.1",
-    "@hookform/resolvers": "3.3.4",
+    "@hookform/resolvers": "3.9.0",
     "@paypal/react-paypal-js": "8.3.0",
     "@radix-ui/react-slider": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.2",
@@ -62,7 +62,7 @@
     "react-dropzone": "14.2.3",
     "react-fast-marquee": "1.6.4",
     "react-helmet": "6.1.0",
-    "react-hook-form": "7.51.5",
+    "react-hook-form": "7.53.0",
     "react-player": "2.16.0",
     "react-redux": "9.1.2",
     "react-router-dom": "6.23.0",
diff --git a/src/pages/Registration/Steps/ContactDetails/Form/ReferralMethodSelector.tsx b/src/pages/Registration/Steps/ContactDetails/Form/ReferralMethodSelector.tsx
new file mode 100644
index 0000000000..cd49dd1491
--- /dev/null
+++ b/src/pages/Registration/Steps/ContactDetails/Form/ReferralMethodSelector.tsx
@@ -0,0 +1,73 @@
+import {
+  Field,
+  Label,
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/react";
+import Icon from "components/Icon";
+import { forwardRef } from "react";
+import { referralOptions } from "../constants";
+import type { ReferralOption } from "./schema";
+
+interface Props {
+  disabled?: boolean;
+  value: ReferralOption;
+  onChange: (value: ReferralOption) => void;
+  error?: string;
+  classes?: string;
+}
+
+function Star() {
+  return <span className="text-red">*</span>;
+}
+
+export const ReferralMethodSelector = forwardRef<HTMLButtonElement, Props>(
+  function List({ classes = "", ...props }, ref) {
+    return (
+      <Field className={`${classes} grid`}>
+        <Label className="text-sm mb-1 block">
+          How did you find about us? <Star />
+        </Label>
+        <Listbox
+          disabled={props.disabled}
+          value={props.value}
+          by="value"
+          onChange={props.onChange}
+          as="div"
+          className="group"
+        >
+          <ListboxButton
+            ref={ref}
+            className="group flex items-center focus:outline outline-2 outline-blue-d1 outline-offset-[3px] text-sm justify-between w-full px-4 py-3.5 text-navy-d4 border border-gray-l3 font-heading rounded disabled:bg-gray-l5 disabled:text-navy-l1"
+          >
+            <span>{props.value.label}</span>
+            <Icon
+              size={20}
+              className="group-data-[open]:rotate-180 transition-transform ease-in-out"
+              type="ChevronDown"
+            />
+          </ListboxButton>
+          <ListboxOptions
+            anchor={{ to: "bottom", gap: 5, padding: 10 }}
+            className="border border-gray-l3 w-[var(--button-width)] bg-white z-10 rounded h-40"
+          >
+            {referralOptions.map((o) => (
+              <ListboxOption
+                key={o.value}
+                value={o}
+                className="py-1 px-4 hover:bg-blue-l4 text-sm font-heading data-[selected]:text-blue"
+              >
+                {o.label}
+              </ListboxOption>
+            ))}
+          </ListboxOptions>
+          <p className="mt-1 text-right text-xs text-red empty:hidden">
+            {props.error}
+          </p>
+        </Listbox>
+      </Field>
+    );
+  }
+);
diff --git a/src/pages/Registration/Steps/ContactDetails/Form/RoleSelector.tsx b/src/pages/Registration/Steps/ContactDetails/Form/RoleSelector.tsx
new file mode 100644
index 0000000000..83a79620e4
--- /dev/null
+++ b/src/pages/Registration/Steps/ContactDetails/Form/RoleSelector.tsx
@@ -0,0 +1,74 @@
+import {
+  Field,
+  Label,
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from "@headlessui/react";
+import Icon from "components/Icon";
+import { forwardRef } from "react";
+import { roleOptions } from "../constants";
+import type { RoleOption } from "./schema";
+
+interface Props {
+  disabled?: boolean;
+  value: RoleOption;
+  onChange: (value: RoleOption) => void;
+  error?: string;
+  classes?: string;
+}
+
+function Star() {
+  return <span className="text-red">*</span>;
+}
+
+export const RoleSelector = forwardRef<HTMLButtonElement, Props>(function List(
+  { classes = "", ...props },
+  ref
+) {
+  return (
+    <Field className={`${classes} grid`}>
+      <Label className="text-sm mb-1 block">
+        What's your role within the organization? <Star />
+      </Label>
+      <Listbox
+        disabled={props.disabled}
+        value={props.value}
+        by="value"
+        onChange={props.onChange}
+        as="div"
+        className=""
+      >
+        <ListboxButton
+          ref={ref}
+          className="group focus:outline outline-2 outline-blue-d1 outline-offset-[3px] flex items-center text-sm justify-between w-full px-4 py-3.5 text-navy-d4 border border-gray-l3 font-heading rounded disabled:bg-gray-l5 disabled:text-navy-l1"
+        >
+          <span>{props.value.label}</span>
+          <Icon
+            size={20}
+            className="group-data-[open]:rotate-180 transition-transform ease-in-out"
+            type="ChevronDown"
+          />
+        </ListboxButton>
+        <ListboxOptions
+          anchor={{ to: "bottom", gap: 5, padding: 10 }}
+          className="border border-gray-l3 w-[var(--button-width)] bg-white z-10 rounded h-40"
+        >
+          {roleOptions.map((o) => (
+            <ListboxOption
+              key={o.value}
+              value={o}
+              className="py-1 px-4 hover:bg-blue-l4 text-sm font-heading data-[selected]:text-blue"
+            >
+              {o.label}
+            </ListboxOption>
+          ))}
+        </ListboxOptions>
+        <p className="mt-1 text-right text-xs text-red empty:hidden">
+          {props.error}
+        </p>
+      </Listbox>
+    </Field>
+  );
+});
diff --git a/src/pages/Registration/Steps/ContactDetails/Form/index.tsx b/src/pages/Registration/Steps/ContactDetails/Form/index.tsx
index 1d1e6dda89..08588b9a00 100644
--- a/src/pages/Registration/Steps/ContactDetails/Form/index.tsx
+++ b/src/pages/Registration/Steps/ContactDetails/Form/index.tsx
@@ -1,18 +1,72 @@
-import type { ReferralMethod, Role } from "@better-giving/registration/models";
+import { Field, Input, Label } from "@headlessui/react";
 import LoadText from "components/LoadText";
-import { Selector } from "components/Selector";
-import { Field, Label } from "components/form";
 import { APP_NAME } from "constants/env";
-import { referralOptions, roleOptions } from "../constants";
-import type { FormValues as FV } from "../types";
-import useSubmit from "./useSubmit";
+import { useAuthenticatedUser } from "contexts/Auth";
+import { useErrorContext } from "contexts/ErrorContext";
+import type { SubmitHandler } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { useUpdateRegMutation } from "services/aws/registration";
+import { steps } from "../../../routes";
+import { useRegState } from "../../StepGuard";
+import { ReferralMethodSelector } from "./ReferralMethodSelector";
+import { RoleSelector } from "./RoleSelector";
+import type { FV } from "./schema";
+import { useRhf } from "./useRhf";
+
+function Star() {
+  return <span className="text-red">*</span>;
+}
 
 export default function Form({ classes = "" }: { classes?: string }) {
-  const { submit, isSubmitting } = useSubmit();
+  const state = useRegState<1>();
+  const user = useAuthenticatedUser();
+  const {
+    register,
+    errors,
+    orgRole,
+    onOrgRoleChange,
+    orgRoleRef,
+    referralMethod,
+    onReferralMethodChange,
+    referralMethodRef,
+    isDirty,
+    handleSubmit,
+    isSubmitting,
+  } = useRhf(state.data, user);
+  const navigate = useNavigate();
+
+  const [updateReg] = useUpdateRegMutation();
+  const { handleError } = useErrorContext();
+
+  const submit: SubmitHandler<FV> = async (fv) => {
+    try {
+      if (!isDirty && state.data.contact) {
+        return navigate(`../${steps.orgDetails}`, { state: state.data.init }); // go to latest step
+      }
+
+      const { org_role, referral_method, registrant_id, ...rest } = fv;
+
+      await updateReg({
+        type: "contact",
+        ...rest,
+        org_role: org_role.value,
+        referral_method: referral_method.value,
+        id: state.data.init.id,
+      }).unwrap();
+
+      navigate(`../${steps.orgDetails}`, { state: state.data.init });
+    } catch (err) {
+      handleError(err, { context: "updating registration" });
+    }
+  };
+
+  console.log({ errors });
+
   return (
     <form
+      // disabled={isSubmitting}
       className={`w-full bg-white dark:bg-blue-d6 ${classes}`}
-      onSubmit={submit}
+      onSubmit={handleSubmit(submit)}
     >
       <h2 className="text-center sm:text-left text-xl mb-2">
         Let's start with your contact details
@@ -22,98 +76,150 @@ export default function Form({ classes = "" }: { classes?: string }) {
         let us know more about you and your organization
       </p>
       <h3 className="mb-4">Personal information</h3>
-      <Field<FV>
-        name="first_name"
-        label="First name"
-        placeholder="e.g. John"
-        required
-        classes={{ container: "mb-4" }}
-      />
-      <Field<FV>
-        name="last_name"
-        label="Last name"
-        placeholder="e.g. Doe"
-        required
-        classes={{ container: "mb-4" }}
-      />
-      <Field<FV>
-        name="contact_number"
-        label="Phone number"
-        placeholder="000000000"
-        required={false}
-        classes={{ container: "mb-4" }}
-      />
-      <Field<FV>
-        name="registrant_id"
-        label="E-mail address"
-        required
-        disabled
-      />
+
+      <Field className="grid mb-4">
+        <Label className="mb-1 text-sm">
+          First name <Star />
+        </Label>
+        <Input
+          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          placeholder="e.g. John"
+          {...register("first_name")}
+        />
+        <p className="text-right text-red text-xs mt-1">
+          {errors.first_name?.message}
+        </p>
+      </Field>
+      <Field className="grid mb-4">
+        <Label className="mb-1 text-sm">
+          Last name <Star />
+        </Label>
+        <Input
+          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          placeholder="e.g. Doe"
+          {...register("last_name")}
+        />
+        <p className="text-right text-red text-xs mt-1">
+          {errors.last_name?.message}
+        </p>
+      </Field>
+      <Field className="grid mb-4">
+        <Label className="mb-1 text-sm">
+          Phone number <span className="text-navy-l1 text-sm">(optional)</span>
+        </Label>
+        <Input
+          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          placeholder="000000000"
+          {...register("contact_number")}
+        />
+        <p className="text-right text-red text-xs mt-1">
+          {errors.contact_number?.message}
+        </p>
+      </Field>
+
+      <Field className="grid" disabled>
+        <Label className="mb-1 text-sm">
+          E-mail address <Star />
+        </Label>
+        <Input
+          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          {...register("registrant_id")}
+          disabled
+        />
+      </Field>
+
       <h3 className="mt-8 mb-4">Organization information</h3>
-      <Field<FV>
-        name="org_name"
-        label="Name of your organization"
-        placeholder="Organization name"
-        classes={{ container: "mb-4" }}
-        required
+
+      <Field className="grid mb-4">
+        <Label className="mb-1 text-sm">
+          Organization name <Star />
+        </Label>
+        <Input
+          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          placeholder="Organization name"
+          {...register("org_name")}
+        />
+        <p className="text-right text-red text-xs mt-1">
+          {errors.org_name?.message}
+        </p>
+      </Field>
+
+      <RoleSelector
+        value={orgRole}
+        onChange={onOrgRoleChange}
+        ref={orgRoleRef}
+        error={errors.org_role?.value?.message}
       />
-      <Label required className="mb-2">
-        What's your role within the organization?
-      </Label>
-      <Selector<FV, "org_role", Role>
-        name="org_role"
-        options={roleOptions}
-        classes={{ options: "text-sm" }}
-      >
-        {({ value }) =>
-          value === "other" && (
-            <Field<FV>
-              name="other_role"
-              label="Specify your role"
-              required
-              classes={{ container: "mt-4" }}
-            />
-          )
-        }
-      </Selector>
+      {orgRole.value === "other" && (
+        <Field className="grid my-4">
+          <Label className="mb-1 text-sm">
+            Specify your role <Star />
+          </Label>
+          <Input
+            className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+            placeholder="Specify your role"
+            {...register("other_role", { shouldUnregister: true })}
+          />
+          <p className="text-right text-red text-xs mt-1">
+            {errors.other_role?.message}
+          </p>
+        </Field>
+      )}
 
       <h3 className="mt-8 mb-4">Other information</h3>
-      <Label required className="mb-2">
-        How did you find about us?
-      </Label>
-      <Selector<FV, "referral_method", ReferralMethod>
-        name="referral_method"
-        options={referralOptions}
-        classes={{ options: "text-sm" }}
-      >
-        {({ value }) => (
-          <>
-            {value === "other" && (
-              <Field<FV>
-                name="other_referral_method"
-                label="Please provide additional information"
-                required
-                classes={{ container: "mt-4" }}
-              />
-            )}
-            {value === "referral" && (
-              <Field<FV>
-                name="referral_code"
-                label="Referral Code"
-                required
-                classes={{ container: "mt-4" }}
-              />
-            )}
-          </>
-        )}
-      </Selector>
-      <Field<FV>
-        name="goals"
-        label="Goals"
-        placeholder={`What is your goal working with ${APP_NAME}?`}
-        classes={{ container: "mt-4" }}
-        required
+      <ReferralMethodSelector
+        classes="mb-4"
+        value={referralMethod}
+        onChange={onReferralMethodChange}
+        error={errors.referral_method?.value?.message}
+        ref={referralMethodRef}
       />
+      {referralMethod.value === "other" && (
+        <Field className="grid my-4">
+          <Label className="mb-1 text-sm">
+            Please provide additional information <Star />
+          </Label>
+          <Input
+            className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+            placeholder="Specify how you found us"
+            {...register("other_referral_method", { shouldUnregister: true })}
+          />
+          <p className="text-right text-red text-xs mt-1">
+            {errors.other_referral_method?.message}
+          </p>
+        </Field>
+      )}
+
+      {referralMethod.value === "referral" && (
+        <Field className="grid mb-4">
+          <Label className="mb-1 text-sm">
+            Referral Code <Star />
+          </Label>
+          <Input
+            className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+            placeholder="Referral Code"
+            {...register("referral_code", { shouldUnregister: true })}
+          />
+          <p className="text-right text-red text-xs mt-1">
+            {errors.referral_code?.message}
+          </p>
+        </Field>
+      )}
+
+      <Field className="grid mb-4">
+        <Label className="mb-1 text-sm">
+          Goals <Star />
+        </Label>
+        <Input
+          className="font-heading rounded outline-blue-d1 outline-offset-4 text-sm font-medium bg-transparent disabled:bg-gray-l5 disabled:text-navy-l1 px-4 py-3.5 placeholder:text-navy-l3 text-navy-d4 border border-gray-l3"
+          placeholder={`What is your goal working with ${APP_NAME}?`}
+          {...register("goals")}
+        />
+        <p className="text-right text-red text-xs mt-1">
+          {errors.goals?.message}
+        </p>
+      </Field>
+
       <button
         type="submit"
         className="mt-8 py-3 px-8 w-full sm:w-auto btn-blue btn-reg"
diff --git a/src/pages/Registration/Steps/ContactDetails/Form/schema.ts b/src/pages/Registration/Steps/ContactDetails/Form/schema.ts
new file mode 100644
index 0000000000..b23475f018
--- /dev/null
+++ b/src/pages/Registration/Steps/ContactDetails/Form/schema.ts
@@ -0,0 +1,73 @@
+import {
+  contact,
+  init,
+  orgRole,
+  referralMethod,
+} from "@better-giving/registration/models";
+import {
+  type InferOutput,
+  type Prettify,
+  forward,
+  nonEmpty,
+  object,
+  omit,
+  partialCheck,
+  pick,
+  pipe,
+  string,
+} from "valibot";
+
+const roleOption = object({
+  label: string(),
+  value: pipe(orgRole, nonEmpty("required")),
+});
+
+export interface RoleOption extends InferOutput<typeof roleOption> {}
+
+const referralOption = object({
+  label: string(),
+  value: pipe(referralMethod, nonEmpty("required")),
+});
+export interface ReferralOption extends InferOutput<typeof referralOption> {}
+
+export const schema = pipe(
+  object({
+    ...omit(contact, ["org_role", "referral_method"]).entries,
+    ...pick(init, ["registrant_id"]).entries,
+    org_role: roleOption,
+    referral_method: referralOption,
+  }),
+  forward(
+    partialCheck(
+      [["org_role"], ["other_role"]],
+      (inputs) =>
+        inputs.org_role.value === "other" ? !!inputs.other_role : true,
+      "required"
+    ),
+    ["other_role"]
+  ),
+  forward(
+    partialCheck(
+      [["referral_method"], ["referral_code"]],
+      (inputs) =>
+        inputs.referral_method.value === "referral"
+          ? !!inputs.referral_code
+          : true,
+      "required"
+    ),
+    ["referral_code"]
+  ),
+  forward(
+    partialCheck(
+      [["referral_method"], ["other_referral_method"]],
+      (inputs) =>
+        inputs.referral_method.value === "other"
+          ? !!inputs.other_referral_method
+          : true,
+      "required"
+    ),
+    ["other_referral_method"]
+  )
+);
+
+export interface FV extends Prettify<InferOutput<typeof schema>> {}
diff --git a/src/pages/Registration/Steps/ContactDetails/Form/useRhf.ts b/src/pages/Registration/Steps/ContactDetails/Form/useRhf.ts
new file mode 100644
index 0000000000..e99e60a269
--- /dev/null
+++ b/src/pages/Registration/Steps/ContactDetails/Form/useRhf.ts
@@ -0,0 +1,86 @@
+import type { ReferralMethod, Role } from "@better-giving/registration/models";
+import { valibotResolver } from "@hookform/resolvers/valibot";
+import type { Step1Data } from "pages/Registration/types";
+import { useController, useForm } from "react-hook-form";
+import type { AuthenticatedUser } from "types/auth";
+import { referralMethods, roles } from "../constants";
+import {
+  type FV,
+  type ReferralOption,
+  type RoleOption,
+  schema,
+} from "./schema";
+
+export function useRhf(data: Step1Data, user: AuthenticatedUser) {
+  const { contact, init } = data;
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<FV>({
+    resolver: valibotResolver(schema),
+    defaultValues: contact
+      ? {
+          ...contact,
+          registrant_id: init.registrant_id,
+          org_role: toRoleOption(contact.org_role),
+          referral_method: toReferralOption(
+            contact.referral_method === "better-giving-alliance"
+              ? "better-giving-alliance"
+              : contact.referral_method
+          ),
+        }
+      : {
+          registrant_id: init.registrant_id,
+          org_role: { value: "", label: roles[""] },
+          referral_method: {
+            value: "",
+            label: referralMethods[""],
+          },
+          first_name: user.firstName ?? "",
+          last_name: user.lastName ?? "",
+          org_name: init.claim?.name ?? "",
+          goals: "",
+        },
+  });
+
+  const {
+    field: {
+      value: referralMethod,
+      onChange: onReferralMethodChange,
+      ref: referralMethodRef,
+    },
+  } = useController({
+    control,
+    name: "referral_method",
+  });
+  const {
+    field: { value: orgRole, onChange: onOrgRoleChange, ref: orgRoleRef },
+  } = useController({ control, name: "org_role" });
+
+  return {
+    register,
+    handleSubmit,
+    errors,
+    isDirty,
+    isSubmitting,
+
+    //controllers
+    orgRole,
+    orgRoleRef,
+    onOrgRoleChange,
+    referralMethod,
+    onReferralMethodChange,
+    referralMethodRef,
+  };
+}
+
+function toRoleOption(value: Role): RoleOption {
+  return { value, label: roles[value] };
+}
+
+function toReferralOption(value: ReferralMethod): ReferralOption {
+  return { value, label: referralMethods[value] };
+}
diff --git a/src/pages/Registration/Steps/ContactDetails/Form/useSubmit.ts b/src/pages/Registration/Steps/ContactDetails/Form/useSubmit.ts
deleted file mode 100644
index 037fe16d30..0000000000
--- a/src/pages/Registration/Steps/ContactDetails/Form/useSubmit.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useErrorContext } from "contexts/ErrorContext";
-import { type SubmitHandler, useFormContext } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
-import { useUpdateRegMutation } from "services/aws/registration";
-import { steps } from "../../../routes";
-import { useRegState } from "../../StepGuard";
-import type { FormValues as FV } from "../types";
-
-export default function useSubmit() {
-  const {
-    handleSubmit,
-    formState: { isDirty, isSubmitting },
-  } = useFormContext<FV>();
-  const {
-    data: { init, contact },
-  } = useRegState<1>();
-
-  const [updateReg] = useUpdateRegMutation();
-  const { handleError } = useErrorContext();
-  const navigate = useNavigate();
-
-  const submit: SubmitHandler<FV> = async (fv) => {
-    if (!isDirty && contact) {
-      return navigate(`../${steps.orgDetails}`, { state: init }); // go to latest step
-    }
-
-    const { org_role, referral_method, id, registrant_id, ...rest } = fv;
-
-    const result = await updateReg({
-      type: "contact",
-      ...rest,
-      org_role: org_role.value,
-      referral_method: referral_method.value,
-      id,
-    });
-
-    if ("error" in result) {
-      return handleError(result.error, { context: "updating registration" });
-    }
-
-    navigate(`../${steps.orgDetails}`, { state: init });
-  };
-
-  return {
-    submit: handleSubmit(submit),
-    isSubmitting,
-  };
-}
diff --git a/src/pages/Registration/Steps/ContactDetails/index.tsx b/src/pages/Registration/Steps/ContactDetails/index.tsx
index 89ecc4d746..7059a7a37a 100644
--- a/src/pages/Registration/Steps/ContactDetails/index.tsx
+++ b/src/pages/Registration/Steps/ContactDetails/index.tsx
@@ -1,63 +1,4 @@
-import type { ReferralMethod, Role } from "@better-giving/registration/models";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { useAuthenticatedUser } from "contexts/Auth";
-import { FormProvider, useForm } from "react-hook-form";
-import type { OptionType } from "types/components";
-import { useRegState, withStepGuard } from "../StepGuard";
+import { withStepGuard } from "../StepGuard";
 import Form from "./Form";
-import { referralMethods, roles } from "./constants";
-import { schema } from "./schema";
-import type { FormValues } from "./types";
 
-function ContactDetails() {
-  const {
-    data: { contact, init },
-  } = useRegState<1>();
-
-  const { firstName = "", lastName = "" } = useAuthenticatedUser();
-
-  const methods = useForm<FormValues>({
-    resolver: yupResolver(schema),
-    defaultValues: contact
-      ? {
-          ...contact,
-          id: init.id,
-          registrant_id: init.registrant_id,
-          org_role: toRoleOption(contact.org_role),
-          referral_method: toReferralOption(
-            contact.referral_method === "better-giving-alliance"
-              ? "better-giving-alliance"
-              : contact.referral_method
-          ),
-        }
-      : {
-          id: init.id,
-          registrant_id: init.registrant_id,
-          org_role: { value: "", label: roles[""] },
-          referral_method: {
-            value: "",
-            label: referralMethods[""],
-          },
-          first_name: firstName,
-          last_name: lastName,
-          org_name: init.claim?.name ?? "",
-          goals: "",
-        },
-  });
-
-  return (
-    <FormProvider {...methods}>
-      <Form />
-    </FormProvider>
-  );
-}
-
-export default withStepGuard(ContactDetails);
-
-function toRoleOption(value: Role): OptionType<Role> {
-  return { value, label: roles[value] };
-}
-
-function toReferralOption(value: ReferralMethod): OptionType<ReferralMethod> {
-  return { value, label: referralMethods[value] };
-}
+export default withStepGuard(Form);
diff --git a/src/pages/Registration/types.ts b/src/pages/Registration/types.ts
index 6250dfc17e..0a6049d359 100644
--- a/src/pages/Registration/types.ts
+++ b/src/pages/Registration/types.ts
@@ -16,7 +16,7 @@ type Data<
   [key in Pending]?: Reg[key];
 };
 
-type Step1Data = Data<"init", "contact">;
+export type Step1Data = Data<"init", "contact">;
 type Step2Data = Data<"init" | "contact", "org">;
 export type Step3Data = Data<"init" | "contact" | "org", "irs501c3">;
 type Step4Data = Omit<
diff --git a/yarn.lock b/yarn.lock
index a81d3d754d..a7b866cb6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1201,12 +1201,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hookform/resolvers@npm:3.3.4":
-  version: 3.3.4
-  resolution: "@hookform/resolvers@npm:3.3.4"
+"@hookform/resolvers@npm:3.9.0":
+  version: 3.9.0
+  resolution: "@hookform/resolvers@npm:3.9.0"
   peerDependencies:
     react-hook-form: ^7.0.0
-  checksum: 10/0845e15f53b515ab5dc8d970d4ee7f47bbdfc4f4391bc166361535482d96b6ae3d1812669107fca05bf8687fa5447e3ed65f2eee3e349759b23b229ca978f917
+  checksum: 10/b878e92cebc703106a70987437ab4add0e71a327a0bb9864f82ab480b5d9a38b0d639f6154b138c3c4828af0db00c1b413279c102715146b19edc76b9786f1c3
   languageName: node
   linkType: hard
 
@@ -3431,7 +3431,7 @@ __metadata:
     "@gsap/react": "npm:2.1.1"
     "@headlessui/react": "npm:2.1.0"
     "@hookform/error-message": "npm:2.0.1"
-    "@hookform/resolvers": "npm:3.3.4"
+    "@hookform/resolvers": "npm:3.9.0"
     "@paypal/react-paypal-js": "npm:8.3.0"
     "@radix-ui/react-slider": "npm:1.1.2"
     "@radix-ui/react-tooltip": "npm:1.1.2"
@@ -3474,7 +3474,7 @@ __metadata:
     react-dropzone: "npm:14.2.3"
     react-fast-marquee: "npm:1.6.4"
     react-helmet: "npm:6.1.0"
-    react-hook-form: "npm:7.51.5"
+    react-hook-form: "npm:7.53.0"
     react-player: "npm:2.16.0"
     react-redux: "npm:9.1.2"
     react-router-dom: "npm:6.23.0"
@@ -5842,12 +5842,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hook-form@npm:7.51.5":
-  version: 7.51.5
-  resolution: "react-hook-form@npm:7.51.5"
+"react-hook-form@npm:7.53.0":
+  version: 7.53.0
+  resolution: "react-hook-form@npm:7.53.0"
   peerDependencies:
-    react: ^16.8.0 || ^17 || ^18
-  checksum: 10/f4ff77989202b1faf2dede7a7730210635a6225189dcaeaeb191cea12422bcb97d2adfef0712c50d13bf5c5e14b8debc00fbba16491f86a6d24945a52cacfa59
+    react: ^16.8.0 || ^17 || ^18 || ^19
+  checksum: 10/b7d73696b7c10e042f6ea6fcec01f951091146bfbc89d1378327a970bcd724b968e93fae1657bddada75caf648cfaf8693c5ba03c25e96816b755079d29f65da
   languageName: node
   linkType: hard