diff --git a/package.json b/package.json
index fc08b70..5034b3a 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,13 @@
     "@aws-sdk/lib-dynamodb": "^3.529.1",
     "@trussworks/react-uswds": "7.0.0",
     "@uswds/uswds": "^3.7.1",
+    "formik": "^2.4.5",
     "mixpanel-browser": "^2.49.0",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
-    "react-hook-form": "^7.51.0",
-    "sharp": "^0.33.2"
+    "sharp": "^0.33.2",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@testing-library/cypress": "^10.0.1",
diff --git a/src/app/[id]/apply/page.tsx b/src/app/[id]/apply/page.tsx
index 3b09182..5cd7eb6 100644
--- a/src/app/[id]/apply/page.tsx
+++ b/src/app/[id]/apply/page.tsx
@@ -1,7 +1,7 @@
-import { ApplicationForm } from "../../components/form/ApplicationForm";
+import { AppForm } from "../../components/form/AppForm";
 
 export default function ApplyPage({ params }: Props) {
-  return <ApplicationForm institutionId={params.id} />;
+  return <AppForm institutionId={params.id} />;
 }
 
 type Props = {
diff --git a/src/app/components/form/ApplicationForm.tsx b/src/app/components/form/AppForm.tsx
similarity index 84%
rename from src/app/components/form/ApplicationForm.tsx
rename to src/app/components/form/AppForm.tsx
index 46745d2..e9d5da0 100644
--- a/src/app/components/form/ApplicationForm.tsx
+++ b/src/app/components/form/AppForm.tsx
@@ -1,7 +1,9 @@
 "use client";
 
-import { useForm } from "react-hook-form";
+import * as yup from "yup";
 import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 // components
 import {
   Button,
@@ -10,21 +12,24 @@ import {
   CardBody,
   GridContainer,
 } from "@trussworks/react-uswds";
-import { TextField, TextArea, Spinner } from "@/src/app/components";
-import NotFound from "@/src/app/not-found";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { Spinner, TextArea, TextField, USWDSForm } from "../index";
+// pages
+import NotFound from "../../not-found";
 // utils
-import { getInstitutionApplication } from "@/src/app/utils/institutions";
-import { saveApplication } from "@/src/app/utils/applications";
+import { getInstitutionApplication } from "../../utils/institutions";
+import { saveApplication } from "../../utils/applications";
+// schemas
+import { email, number, numberOptional, text } from "../../schemas/schemas";
 
-export const ApplicationForm = ({ institutionId }: Props) => {
+export const AppForm = ({ institutionId }: Props) => {
   const router = useRouter();
   const [application, setApplication] = useState<
     Record<string, any> | undefined
   >();
   const [loading, setLoading] = useState(true);
 
+  const appq = application?.questions;
+
   useEffect(() => {
     getInstitutionApplication(Number(institutionId)).then((application) => {
       setApplication(application);
@@ -32,10 +37,6 @@ export const ApplicationForm = ({ institutionId }: Props) => {
     });
   }, [institutionId]);
 
-  const { handleSubmit, register } = useForm();
-
-  const appq = application?.questions;
-
   const onSubmit = async (data: any) => {
     const submission = {
       questions: appq,
@@ -53,15 +54,45 @@ export const ApplicationForm = ({ institutionId }: Props) => {
 
   //Handle SAT score questions
   const hasSATQ: boolean = appq?.includes("What is your SAT score?");
-  //Handle EssayQuestions
+  const satSchema = hasSATQ ? number() : numberOptional();
+
+  const validationSchema = yup.object().shape({
+    "first-name": text(),
+    "last-name": text(),
+    email: email(),
+    phone: text(),
+    "math-score": satSchema,
+    "reading-score": satSchema,
+    "writing-score": satSchema,
+    "question-1": text(),
+    "question-2": text(),
+    "question-3": text(),
+  });
+  // Handle EssayQuestions
   const essayQ1: string | undefined = appq?.[4];
   const essayQ2: string | undefined = appq?.[5];
   const essayQ3: string | undefined = appq?.[6];
+
   const ApplicationView = !application ? (
     <NotFound />
   ) : (
-    <div className="application">
-      <form onSubmit={handleSubmit(onSubmit)}>
+    <main className="application">
+      <USWDSForm
+        initialValues={{
+          "first-name": "",
+          "last-name": "",
+          email: "",
+          phone: "",
+          "math-score": "",
+          "reading-score": "",
+          "writing-score": "",
+          "question-1": "",
+          "question-2": "",
+          "question-3": "",
+        }}
+        validationSchema={validationSchema}
+        submit={onSubmit}
+      >
         <div className="application_header">
           <h1 className="application_header-title">
             {application?.institutionName}
@@ -80,32 +111,24 @@ export const ApplicationForm = ({ institutionId }: Props) => {
                   </legend>
                   <div className="application_questions-grid">
                     <TextField
-                      id={"given-name"}
                       label={"First name (required)"}
                       name={"first-name"}
                       required
-                      registerField={register}
                     />
                     <TextField
-                      id={"family-name"}
                       label={"Last name (required)"}
                       name={"last-name"}
                       required
-                      registerField={register}
                     />
                     <TextField
-                      id={"email-address"}
                       label={"Email (required)"}
                       name={"email"}
                       required
-                      registerField={register}
                     />
                     <TextField
-                      id={"phone-number"}
                       label={"Phone number (required)"}
                       name={"phone"}
                       required
-                      registerField={register}
                     />
                   </div>
                 </fieldset>
@@ -120,27 +143,21 @@ export const ApplicationForm = ({ institutionId }: Props) => {
                   </legend>
                   <div className="application_questions-grid">
                     <TextField
-                      id={"math-sat"}
                       label={"Math (required)"}
                       name={"math-score"}
                       required={hasSATQ}
-                      registerField={register}
                     />
 
                     <TextField
-                      id={"crit-reading-sat"}
                       label={"Critical reading (required)"}
                       name={"reading-score"}
                       required={hasSATQ}
-                      registerField={register}
                     />
 
                     <TextField
-                      id={"writing-sat"}
                       label={"Writing (required)"}
                       name={"writing-score"}
                       required={hasSATQ}
-                      registerField={register}
                     />
                   </div>
                 </fieldset>
@@ -172,7 +189,6 @@ export const ApplicationForm = ({ institutionId }: Props) => {
                     label={essayQ1}
                     name={"question-1"}
                     required={false}
-                    registerField={register}
                   />
                 </fieldset>
               </CardBody>
@@ -190,7 +206,6 @@ export const ApplicationForm = ({ institutionId }: Props) => {
                     label={essayQ2}
                     name={"question-2"}
                     required={false}
-                    registerField={register}
                   />
                 </fieldset>
               </CardBody>
@@ -209,7 +224,6 @@ export const ApplicationForm = ({ institutionId }: Props) => {
                     label={essayQ3}
                     name={"question-3"}
                     required={false}
-                    registerField={register}
                   />
                 </fieldset>
               </CardBody>
@@ -224,8 +238,8 @@ export const ApplicationForm = ({ institutionId }: Props) => {
             <Button type={"submit"}>Submit application</Button>
           </ButtonGroup>
         </div>
-      </form>
-    </div>
+      </USWDSForm>
+    </main>
   );
 
   return <main>{loading ? <Spinner /> : ApplicationView}</main>;
diff --git a/src/app/components/form/CheckboxField.tsx b/src/app/components/form/CheckboxField.tsx
index 1c3840d..eb42beb 100644
--- a/src/app/components/form/CheckboxField.tsx
+++ b/src/app/components/form/CheckboxField.tsx
@@ -1,17 +1,20 @@
-import { FieldValues, UseFormRegister } from "react-hook-form";
+"use client";
+
+import { Field } from "formik";
+//types
 import { CheckboxOptions } from "../../types";
 
-export const CheckboxField = ({ name, registerField, options }: Props) => (
+export const CheckboxField = ({ name, options }: Props) => (
   <fieldset className="usa-fieldset">
     <div>
       {options.map((option: CheckboxOptions) => (
         <div className="usa-checkbox" key={option.id}>
-          <input
+          <Field
             className="usa-checkbox__input"
             id={option.id}
             type="checkbox"
             value={option.id}
-            {...registerField(`${name}`)}
+            name={name}
           />
           <label className="usa-checkbox__label" htmlFor={option.id}>
             {option.label}
@@ -25,6 +28,5 @@ export const CheckboxField = ({ name, registerField, options }: Props) => (
 type Props = {
   id: string;
   name: string;
-  registerField: UseFormRegister<FieldValues>;
   options: CheckboxOptions[];
 };
diff --git a/src/app/components/form/DropdownField.tsx b/src/app/components/form/DropdownField.tsx
index 132249e..601a8e6 100644
--- a/src/app/components/form/DropdownField.tsx
+++ b/src/app/components/form/DropdownField.tsx
@@ -1,12 +1,13 @@
-import { FieldValues, UseFormRegister } from "react-hook-form";
+"use client";
+
 import { FieldHint, DropdownOptions } from "../../types";
+import { Field } from "formik";
 
 export const DropdownField = ({
   id,
   label,
   required,
   name,
-  registerField,
   options,
   hint,
 }: Props) => {
@@ -21,11 +22,12 @@ export const DropdownField = ({
           {hint.text}
         </div>
       )}
-      <select
+      <Field
         className="usa-select"
         id={id}
-        {...registerField(`${name}`)}
+        name={name}
         aria-describedby={hint?.id}
+        as="select"
       >
         <option value={undefined}>- Select -</option>
         {options.map((option: DropdownOptions) => (
@@ -33,7 +35,7 @@ export const DropdownField = ({
             {option.label}
           </option>
         ))}
-      </select>
+      </Field>
     </>
   );
 };
@@ -43,7 +45,6 @@ type Props = {
   label: string;
   required: boolean;
   name: string;
-  registerField: UseFormRegister<FieldValues>;
   options: DropdownOptions[];
   hint?: FieldHint;
 };
diff --git a/src/app/components/form/TextArea.tsx b/src/app/components/form/TextArea.tsx
index b084a0b..323f3af 100644
--- a/src/app/components/form/TextArea.tsx
+++ b/src/app/components/form/TextArea.tsx
@@ -1,31 +1,21 @@
-import { FieldHint } from "../../types";
-import { FieldValues, UseFormRegister } from "react-hook-form";
+"use client";
 
-export const TextArea = ({
-  id,
-  label,
-  name,
-  required,
-  registerField,
-  hint,
-}: Props) => {
+import { ErrorMessage, Field } from "formik";
+
+export const TextArea = ({ id, label, name, required }: Props) => {
   const fieldLabel = required ? `${label} *` : `${label}`;
   return (
     <div>
       <label className="usa-labe input_textarea-label" htmlFor={id}>
         {fieldLabel}
       </label>
-      {hint && (
-        <div className="usa-hint" id={hint.id}>
-          {hint.text}
-        </div>
-      )}
-      <textarea
-        id={id}
-        aria-describedby={hint?.id}
+      <Field
+        id={name}
+        name={name}
         className="usa-textarea input_textarea-input"
-        {...registerField(`${name}`, { required: required })}
+        as="textarea"
       />
+      <ErrorMessage name={name} component="div" className="formError" />
     </div>
   );
 };
@@ -35,6 +25,4 @@ type Props = {
   label?: string;
   name: string;
   required: boolean;
-  registerField: UseFormRegister<FieldValues>;
-  hint?: FieldHint;
 };
diff --git a/src/app/components/form/TextField.tsx b/src/app/components/form/TextField.tsx
index 3d0a75d..9f64c7f 100644
--- a/src/app/components/form/TextField.tsx
+++ b/src/app/components/form/TextField.tsx
@@ -1,17 +1,11 @@
-import { FieldValues, UseFormRegister } from "react-hook-form";
-import { FieldHint } from "../../types";
+"use client";
 
-export const TextField = ({
-  id,
-  label,
-  required,
-  name,
-  registerField,
-  hint,
-}: Props) => {
+import { ErrorMessage, Field } from "formik";
+
+export const TextField = ({ name, label, required }: Props) => {
   return (
     <div>
-      <label className="usa-label" htmlFor={id}>
+      <label className="usa-label" htmlFor={name}>
         {required ? (
           <>
             {label} <span className="required">*</span>
@@ -20,26 +14,14 @@ export const TextField = ({
           label
         )}
       </label>
-      {hint && (
-        <div className="usa-hint" id={hint.id}>
-          {hint.text}
-        </div>
-      )}
-      <input
-        className="usa-input usa-input--lg"
-        id={id}
-        aria-describedby={hint?.id}
-        {...registerField(`${name}`, { required: required })}
-      />
+      <Field id={name} name={name} className="usa-input usa-input--lg" />
+      <ErrorMessage name={name} component="div" className="formError" />
     </div>
   );
 };
 
 type Props = {
-  id: string;
+  name: string;
   label: string;
   required: boolean;
-  name: string;
-  registerField: UseFormRegister<FieldValues>;
-  hint?: FieldHint;
 };
diff --git a/src/app/components/form/USWDSForm.tsx b/src/app/components/form/USWDSForm.tsx
new file mode 100644
index 0000000..5410f25
--- /dev/null
+++ b/src/app/components/form/USWDSForm.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { Form, Formik } from "formik";
+import * as yup from "yup";
+
+export const USWDSForm = ({
+  initialValues,
+  validationSchema,
+  submit,
+  children,
+}: Props) => {
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={(values, { setSubmitting }) => {
+        setSubmitting(true);
+        submit(values);
+        setSubmitting(false);
+      }}
+    >
+      {() => <Form>{children}</Form>}
+    </Formik>
+  );
+};
+
+type Props = {
+  initialValues: { [key: string]: any };
+  validationSchema?: yup.ObjectSchema<any>;
+  submit: Function;
+  children: any;
+};
diff --git a/src/app/components/index.tsx b/src/app/components/index.tsx
index 02f6da4..3aa54c5 100644
--- a/src/app/components/index.tsx
+++ b/src/app/components/index.tsx
@@ -8,6 +8,7 @@ export { CheckboxField } from "./form/CheckboxField";
 export { DropdownField } from "./form/DropdownField";
 export { TextArea } from "./form/TextArea";
 export { TextField } from "./form/TextField";
+export { USWDSForm } from "./form/USWDSForm";
 // layout elements
 export { HeroImage } from "./layout/HeroImage";
 export { PageHeader } from "./layout/PageHeader";
diff --git a/src/app/components/modals/FilterModal.tsx b/src/app/components/modals/FilterModal.tsx
index 2461763..a6dbce8 100644
--- a/src/app/components/modals/FilterModal.tsx
+++ b/src/app/components/modals/FilterModal.tsx
@@ -1,23 +1,24 @@
 "use client";
+
 import { MouseEventHandler, useContext } from "react";
+import Image from "next/image";
+//components
 import {
   Button,
   ButtonGroup,
   ModalFooter,
   ModalHeading,
 } from "@trussworks/react-uswds";
-import Image from "next/image";
-import close from "../../assets/icons/close.svg";
-import { CollegeType, stateOptions } from "../../types";
-
-import { CheckboxField } from "../form/CheckboxField";
-import { DropdownField } from "../form/DropdownField";
-import { useForm } from "react-hook-form";
+import { CheckboxField, DropdownField, USWDSForm } from "../../components";
+// utils
 import { InstitutionContext } from "../institutions/InstitutionProvider";
 import { filterInstitutions } from "../../utils/filtering";
+//assets
+import close from "../../assets/icons/close.svg";
+//types
+import { CollegeType, stateOptions } from "../../types";
 
 export const FilterModal = ({ closeHandler }: Props) => {
-  const form = useForm();
   const { institutionsArray, setFilteredInstitutions } =
     useContext(InstitutionContext);
   // const [filterState, setFilterState] = useState<Object | undefined>(undefined);
@@ -46,7 +47,7 @@ export const FilterModal = ({ closeHandler }: Props) => {
       aria-describedby="modal-1-description"
     >
       <div data-testid="modalOverlay" className="usa-modal-overlay">
-        <form id="" onSubmit={form.handleSubmit(applyFilters)}>
+        <USWDSForm initialValues={{}} submit={applyFilters}>
           <div className="usa-modal usa-modal--lg" tabIndex={-1}>
             <ModalHeading>Filter schools</ModalHeading>
             <div className="filter_section">
@@ -57,7 +58,6 @@ export const FilterModal = ({ closeHandler }: Props) => {
                 label="State"
                 required={false}
                 options={stateOptions}
-                registerField={form.register}
               />
             </div>
             <div className="filter_section">
@@ -70,7 +70,6 @@ export const FilterModal = ({ closeHandler }: Props) => {
                   { id: CollegeType.PRIVATE_NP, label: CollegeType.PRIVATE_NP },
                   { id: CollegeType.PRIVATE_FP, label: CollegeType.PRIVATE_FP },
                 ]}
-                registerField={form.register}
               />
             </div>
             <div className="filter_section">
@@ -85,7 +84,6 @@ export const FilterModal = ({ closeHandler }: Props) => {
                   { id: "10-20", label: "10,000 - 20,000" },
                   { id: ">20", label: "20,000 +" },
                 ]}
-                registerField={form.register}
               />
             </div>
             <div className="filter_section">
@@ -99,7 +97,6 @@ export const FilterModal = ({ closeHandler }: Props) => {
                   { id: "30-60", label: "30% - 60%" },
                   { id: "<30", label: "Less than 30%" },
                 ]}
-                registerField={form.register}
               />
             </div>
             <div className="filter_section">
@@ -108,13 +105,12 @@ export const FilterModal = ({ closeHandler }: Props) => {
                 id="filter-avg-cost-per-year"
                 name="filter-avg-cost-per-year"
                 options={[
-                  { id: "<10", label: "Less than $10,000" },
-                  { id: "10-20", label: "$10,000 - $20,000" },
-                  { id: "20-40", label: "$20,000 - $40,000" },
-                  { id: "40-60", label: "$40,000 - $60,000" },
-                  { id: ">60", label: "More than $60,000" },
+                  { id: "<10$", label: "Less than $10,000" },
+                  { id: "10-20$", label: "$10,000 - $20,000" },
+                  { id: "20-40$", label: "$20,000 - $40,000" },
+                  { id: "40-60$", label: "$40,000 - $60,000" },
+                  { id: ">60$", label: "More than $60,000" },
                 ]}
-                registerField={form.register}
               />
             </div>
             <ModalFooter>
@@ -146,7 +142,7 @@ export const FilterModal = ({ closeHandler }: Props) => {
               />
             </button>
           </div>
-        </form>
+        </USWDSForm>
       </div>
     </div>
   );
diff --git a/src/app/schemas/schemas.ts b/src/app/schemas/schemas.ts
new file mode 100644
index 0000000..936c4ba
--- /dev/null
+++ b/src/app/schemas/schemas.ts
@@ -0,0 +1,25 @@
+import { string, number as numberSchema } from "yup";
+import { validationErrors as error } from "../verbiage/errors";
+
+const isWhitespaceString = (value?: string) => value?.trim().length === 0;
+
+// TEXT
+export const text = () =>
+  string()
+    .typeError(error.INVALID_GENERIC)
+    .required(error.REQUIRED_GENERIC)
+    .test({
+      test: (value) => !isWhitespaceString(value),
+      message: error.REQUIRED_GENERIC,
+    });
+export const textOptional = () => string().typeError(error.INVALID_GENERIC);
+
+export const number = () =>
+  numberSchema()
+    .typeError(error.INVALID_NUMBER)
+    .required(error.REQUIRED_GENERIC);
+
+export const numberOptional = () => numberSchema().notRequired().nullable();
+
+export const email = () => text().email(error.INVALID_EMAIL);
+export const emailOptional = () => email().notRequired();
diff --git a/src/app/styles/globals.scss b/src/app/styles/globals.scss
index 5f60e77..b95d3cd 100644
--- a/src/app/styles/globals.scss
+++ b/src/app/styles/globals.scss
@@ -72,3 +72,7 @@ h1 {
   @include typeset("ui", "md", 1);
   @include u-line-height('body', 3);
 }
+
+.formError {
+  @include u-color($theme-color-error);
+}
diff --git a/src/app/testing/jest/frontend/components/form/TextArea.test.tsx b/src/app/testing/jest/frontend/components/form/TextArea.test.tsx
index 0b937aa..f4e15a5 100644
--- a/src/app/testing/jest/frontend/components/form/TextArea.test.tsx
+++ b/src/app/testing/jest/frontend/components/form/TextArea.test.tsx
@@ -1,65 +1,68 @@
-import { TextArea } from "@/src/app/components";
-import { render, screen } from "@testing-library/react";
+import * as yup from "yup";
+import { act, render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+// components
+import { TextArea } from "@/src/app/components";
+import { USWDSForm } from "@/src/app/components/form/USWDSForm";
 
-const mockRegister = jest.fn();
+const fieldSchema = yup.object().shape({
+  "field-name": yup.string(),
+});
+
+const mockOnSubmit = jest.fn();
 
 const notRequiredTextArea = (
-  <TextArea
-    id={"field-id"}
-    label={"field-label"}
-    required={false}
-    name={"field-name"}
-    registerField={mockRegister}
-  />
+  <USWDSForm
+    initialValues={{ "field-name": "" }}
+    validationSchema={fieldSchema}
+    submit={mockOnSubmit}
+  >
+    <TextArea
+      id={"field-id"}
+      label={"field-label"}
+      required={false}
+      name={"field-name"}
+    />
+  </USWDSForm>
 );
 
 const requiredTextArea = (
-  <TextArea
-    id={"field-id"}
-    label={"field-label"}
-    required={true}
-    name={"field-name"}
-    registerField={mockRegister}
-  />
-);
-
-const textAreaWithHint = (
-  <TextArea
-    id={"field-id"}
-    label={"field-label"}
-    required={false}
-    name={"field-name"}
-    hint={{ id: "field-id", text: "This is a hint" }}
-    registerField={mockRegister}
-  />
+  <USWDSForm
+    initialValues={{ "field-name": "" }}
+    validationSchema={fieldSchema}
+    submit={mockOnSubmit}
+  >
+    <TextArea
+      id={"field-id"}
+      label={"field-label"}
+      required={true}
+      name={"field-name"}
+    />
+  </USWDSForm>
 );
 
 describe("Test TextArea", () => {
-  test("TextArea is visible", () => {
-    render(notRequiredTextArea);
+  test("TextArea is visible", async () => {
+    await act(async () => {
+      await render(await notRequiredTextArea);
+    });
     expect(screen.getByText("field-label")).toBeVisible();
   });
 
-  test("TextArea required star is visible", () => {
-    render(requiredTextArea);
+  test("TextArea required star is visible", async () => {
+    await act(async () => {
+      await render(await requiredTextArea);
+    });
     expect(screen.getByText("field-label *")).toBeVisible();
   });
-  test("TextArea hint is visible", () => {
-    render(textAreaWithHint);
-    expect(screen.getByText("This is a hint")).toBeVisible();
-  });
-
-  test("TextArea is registered", () => {
-    render(notRequiredTextArea);
-    expect(mockRegister).toHaveBeenCalled();
-  });
 });
 
 describe("Test TextArea accessibility", () => {
   it("Should not have basic accessibility issues", async () => {
-    const { container } = render(notRequiredTextArea);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
+    await act(async () => {
+      const { container } = render(notRequiredTextArea);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
   });
 });
diff --git a/src/app/testing/jest/frontend/components/form/TextField.test.tsx b/src/app/testing/jest/frontend/components/form/TextField.test.tsx
index a5bac34..d1b0ba7 100644
--- a/src/app/testing/jest/frontend/components/form/TextField.test.tsx
+++ b/src/app/testing/jest/frontend/components/form/TextField.test.tsx
@@ -1,65 +1,58 @@
-import { TextField } from "@/src/app/components";
-import { render, screen } from "@testing-library/react";
+import * as yup from "yup";
+import { act, render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+// components
+import { TextField } from "@/src/app/components";
+import { USWDSForm } from "@/src/app/components/form/USWDSForm";
 
-const mockRegister = jest.fn();
+const fieldSchema = yup.object().shape({
+  "field-name": yup.string(),
+});
+
+const mockOnSubmit = jest.fn();
 
 const notRequiredTextField = (
-  <TextField
-    id={"field-id"}
-    label={"field-label"}
-    required={false}
-    name={"field-name"}
-    registerField={mockRegister}
-  />
+  <USWDSForm
+    initialValues={{ "field-name": "" }}
+    validationSchema={fieldSchema}
+    submit={mockOnSubmit}
+  >
+    <TextField label={"field-label"} required={false} name={"field-name"} />
+  </USWDSForm>
 );
 
 const requiredTextField = (
-  <TextField
-    id={"field-id"}
-    label={"field-label"}
-    required={true}
-    name={"field-name"}
-    registerField={mockRegister}
-  />
-);
-
-const textFieldWithHint = (
-  <TextField
-    id={"field-id"}
-    label={"field-label"}
-    required={false}
-    name={"field-name"}
-    hint={{ id: "field-id", text: "This is a hint" }}
-    registerField={mockRegister}
-  />
+  <USWDSForm
+    initialValues={{ "field-name": "" }}
+    validationSchema={fieldSchema}
+    submit={mockOnSubmit}
+  >
+    <TextField label={"field-label"} required={true} name={"field-name"} />
+  </USWDSForm>
 );
 
 describe("Test TextField", () => {
-  test("TextField is visible", () => {
-    render(notRequiredTextField);
+  test("TextField is visible", async () => {
+    await act(async () => {
+      await render(await notRequiredTextField);
+    });
     expect(screen.getByText("field-label")).toBeVisible();
   });
 
-  test("TextField required star is visible", () => {
-    render(requiredTextField);
+  test("TextField required star is visible", async () => {
+    await act(async () => {
+      await render(await requiredTextField);
+    });
     expect(screen.getByText("*")).toBeVisible();
   });
-  test("TextField hint is visible", () => {
-    render(textFieldWithHint);
-    expect(screen.getByText("This is a hint")).toBeVisible();
-  });
-
-  test("TextField is registered", () => {
-    render(notRequiredTextField);
-    expect(mockRegister).toHaveBeenCalled();
-  });
 });
 
 describe("Test TextField accessibility", () => {
   it("Should not have basic accessibility issues", async () => {
-    const { container } = render(notRequiredTextField);
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
+    await act(async () => {
+      const { container } = render(requiredTextField);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
   });
 });
diff --git a/src/app/utils/filtering.ts b/src/app/utils/filtering.ts
index a74e177..9e70f3d 100644
--- a/src/app/utils/filtering.ts
+++ b/src/app/utils/filtering.ts
@@ -5,14 +5,12 @@ export const filterInstitutions = (
   filters: FilterShape,
 ) => {
   let filteredArr = instArr;
-
   // filter by state
-  if (filters["filter-state"] !== "- Select -") {
+  if (filters["filter-state"]) {
     filteredArr = filteredArr.filter(
       (el: College) => el.state === filters["filter-state"],
     );
   }
-
   // filter by institution type
   if (filters["filter-type"]) {
     filteredArr = filteredArr.filter((el: College) =>
@@ -95,23 +93,23 @@ const populationMap: { [key: string]: FilterRangeShape } = {
 };
 
 const costMap: { [key: string]: FilterRangeShape } = {
-  "<10": {
+  "<10$": {
     lower: 0,
     upper: 10000,
   },
-  "10-20": {
+  "10-20$": {
     lower: 10000,
     upper: 20000,
   },
-  "20-40": {
+  "20-40$": {
     lower: 20000,
     upper: 40000,
   },
-  "40-60": {
+  "40-60$": {
     lower: 40000,
     upper: 60000,
   },
-  ">60": {
+  ">60$": {
     lower: 60000,
     upper: 100000,
   },
diff --git a/src/app/verbiage/errors.ts b/src/app/verbiage/errors.ts
new file mode 100644
index 0000000..cf47c6d
--- /dev/null
+++ b/src/app/verbiage/errors.ts
@@ -0,0 +1,6 @@
+export const validationErrors = {
+  REQUIRED_GENERIC: "A response is required",
+  INVALID_GENERIC: "Response must be valid",
+  INVALID_EMAIL: "Response must be a valid email address",
+  INVALID_NUMBER: "Response must be a valid number",
+};
diff --git a/yarn.lock b/yarn.lock
index db63bc0..9370b36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2674,6 +2674,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
@@ -3952,6 +3960,11 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -4744,6 +4757,20 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@^2.4.5:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.5.tgz#f899b5b7a6f103a8fabb679823e8fafc7e0ee1b4"
+  integrity sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^2.0.0"
+
 fs-extra@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
@@ -4990,6 +5017,13 @@ hasown@^2.0.0, hasown@^2.0.1:
   dependencies:
     function-bind "^1.1.2"
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -6044,6 +6078,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -6617,6 +6656,11 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-expr@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.6.tgz#f77bc00d5928a6c748414ad12882e83f24aec1e8"
+  integrity sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==
+
 proxy-from-env@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
@@ -6670,12 +6714,12 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-hook-form@^7.51.0:
-  version "7.51.0"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.0.tgz#757ae71b37c26e00590bd3788508287dcc5ecdaf"
-  integrity sha512-BggOy5j58RdhdMzzRUHGOYhSz1oeylFAv6jUSG86OvCIvlAvS7KvnRY7yoAf2pfEiPN7BesnR0xx73nEk3qIiw==
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -7295,6 +7339,16 @@ through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
+tiny-case@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
+  integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
+
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@~0.2.1:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
@@ -7317,6 +7371,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 tough-cookie@^4.1.2, tough-cookie@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
@@ -7373,7 +7432,7 @@ tslib@^1.11.1, tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0:
+tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -7419,6 +7478,11 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
+type-fest@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
+
 typed-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
@@ -7737,3 +7801,13 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yup@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-1.4.0.tgz#898dcd660f9fb97c41f181839d3d65c3ee15a43e"
+  integrity sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==
+  dependencies:
+    property-expr "^2.0.5"
+    tiny-case "^1.0.3"
+    toposort "^2.0.2"
+    type-fest "^2.19.0"