diff --git a/apps/react/src/components/Constraint.tsx b/apps/react/src/components/Constraint.tsx
index 5a7e22c..c9c15a4 100644
--- a/apps/react/src/components/Constraint.tsx
+++ b/apps/react/src/components/Constraint.tsx
@@ -18,6 +18,7 @@ type Constraint_Input = {
   label: React.ReactNode;
   children?: React.ReactNode;
   onClickAddField?: () => void;
+  className?: string;
 };
 
 /* -------------------------------------------------------------------------- */
@@ -29,11 +30,15 @@ const Constraint: React.FC<Constraint_Input> = ({
   label,
   children,
   onClickAddField,
+  className,
 }) => {
   return (
     <Disclosure defaultOpen={true}>
       {({ open }) => (
-        <Container makeGutter={true} className="p-3 bg-white">
+        <Container
+          makeGutter={true}
+          className={classNames("p-3 bg-white", className)}
+        >
           <Container>
             <Disclosure.Button as="button" className={COMMON_FOCUS_CLASSES}>
               {open && <ChevronUpIcon className="size-6" />}
diff --git a/apps/react/src/components/InputSelectButtons.tsx b/apps/react/src/components/InputSelectButtons.tsx
index c1cae01..d5c58e0 100644
--- a/apps/react/src/components/InputSelectButtons.tsx
+++ b/apps/react/src/components/InputSelectButtons.tsx
@@ -15,7 +15,7 @@ type InputSelectButtons_Input<
   value: TValue;
   onChange?: (value: TValue) => void;
   onBlur?: () => void;
-  canDeselect?: boolean,
+  canDeselect?: boolean;
   options: TOptions;
 };
 
@@ -41,7 +41,7 @@ export default function InputSelectButtons<
           key={opt.id}
           className={classNames("-uppercase", [
             isSelected(opt),
-            "bg-blue-200 hover:bg-blue-100",
+            "bg-blue-200 hover:bg-blue-100 selected",
           ])}
           disabled={opt?.specialStatus === "disabled"}
           onClick={() => {
diff --git a/apps/react/src/consts/classes.const.ts b/apps/react/src/consts/classes.const.ts
index b643697..4e49912 100644
--- a/apps/react/src/consts/classes.const.ts
+++ b/apps/react/src/consts/classes.const.ts
@@ -30,11 +30,11 @@ export const CODEX_BRAND_CLASSES = "font-bold text-xl text-gray-600";
 /*                                   Navbar                                   */
 /* -------------------------------------------------------------------------- */
 
-export const MAIN_CONTAINER_MT = "mt-20";
+export const MAIN_CONTAINER_MT = "mt-16";
 // Note: We can't just prepend a "-" to the const above
 // because Tailwind needs to find the whole class name
 // somewhere in the source code.
-export const MAIN_CONTAINER_REMOVE_MT = "-mt-20";
+export const MAIN_CONTAINER_REMOVE_MT = "-mt-16";
 
 /* -------------------------------------------------------------------------- */
 /*                                    Misc                                    */
diff --git a/apps/react/src/consts/options.const.ts b/apps/react/src/consts/options.const.ts
index b4051dc..b5aeef6 100644
--- a/apps/react/src/consts/options.const.ts
+++ b/apps/react/src/consts/options.const.ts
@@ -24,3 +24,7 @@ export const YES_OR_NO = [
   { id: "yes", label: "Yes" },
   { id: "no", label: "No" },
 ] satisfies BasicOption[];
+
+export const isYes = (value: any) => typeof value === "object" && value?.id === "yes";
+
+export const isNo = (value: any) => typeof value === "object" && value?.id === "no";
diff --git a/apps/react/src/pages/WaiveCardinalCare.tsx b/apps/react/src/pages/WaiveCardinalCare.tsx
index 4214958..646e728 100644
--- a/apps/react/src/pages/WaiveCardinalCare.tsx
+++ b/apps/react/src/pages/WaiveCardinalCare.tsx
@@ -1,781 +1,643 @@
-import React, { useState, useEffect } from 'react';
-
-type FormState = {
-    international: boolean;
-    evacCoverage: string;
-    repatriationCoverage: string;
-    jVisaHolder: boolean;
-    jVisaDeductible: string;
-    visaCopy: boolean;
-    internationalTranslated: boolean;
-    coverageStartDate: string;
-    coverageEndDate: string;
-    //coversEntireAcademicYear: boolean;
-    coversInpatientOutpatientMedicalSF: boolean;
-    coversInpatientOutpatientMentalHealthSF: boolean;
-    //annualDeductibleLessThanOrEqualTo1000: boolean;
-    annualDeductibleInput: string;
-    specialEmployerPlanAnnualDeductible: boolean;
-    //annualOutOfPocketMaximumLessThanOrEqualTo9100: boolean;
-    annualOutOfPocketMaximumInput: string;
-    specialEmployerPlanAnnualOutOfPocketMaximum: boolean;
-    providesEMBPPACA: boolean;
-    covers100PercentPreventiveCarePPACA: boolean;
-    exclusionsForPreExistingConditions: boolean;
-    offersPrescriptionDrugCoverage: boolean;
-    coverageForNonEmergencyAndEmergencyCare: boolean;
-    lifetimeAggregateMaxBenefit: boolean;
-  };
-
-  const initialState: FormState = {
-    international: false,
-    evacCoverage: '',
-    repatriationCoverage: '',
-    jVisaHolder: false,
-    jVisaDeductible: '',
-    visaCopy: false,
-    internationalTranslated: false,
-    coverageStartDate: '',
-    coverageEndDate: '',
-    //coversEntireAcademicYear: false,
-    coversInpatientOutpatientMedicalSF: false,
-    coversInpatientOutpatientMentalHealthSF: false,
-    //annualDeductibleLessThanOrEqualTo1000: false,
-    annualDeductibleInput: '',
-    specialEmployerPlanAnnualDeductible: false,
-    //annualOutOfPocketMaximumLessThanOrEqualTo9100: false,
-    annualOutOfPocketMaximumInput: '',
-    specialEmployerPlanAnnualOutOfPocketMaximum: false,
-    providesEMBPPACA: true, // Assuming true for US plans as mentioned
-    covers100PercentPreventiveCarePPACA: true, // Assuming true for US plans as mentioned
-    exclusionsForPreExistingConditions: false,
-    offersPrescriptionDrugCoverage: false,
-    coverageForNonEmergencyAndEmergencyCare: false,
-    lifetimeAggregateMaxBenefit: false,
-  };
-
-type ButtonStatus = 'moreInfoRequired' | 'yes' | 'no';
-
-const WaiveCardinalCare = () => {
-  const [formData, setFormData] = useState<FormState>(initialState);
-  const [buttonStatus, setButtonStatus] = useState<ButtonStatus>('moreInfoRequired');
-
-  // Handle input changes for various form elements
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value, type, checked } = event.target;
-    if (type === 'checkbox') {
-      setFormData((prevFormData) => ({
-        ...prevFormData,
-        [name]: checked,
-      }));
-    } else if (type === 'number') {
-      setFormData((prevFormData) => ({
-        ...prevFormData,
-        [name]: parseInt(value) || 0,
-      }));
-    } else if (type === 'button') {
-      // Toggle the boolean for workaround fields when 'Yes' or 'No' is clicked
-      setFormData((prevFormData) => ({
-        ...prevFormData,
-        [name]: !prevFormData[name],
-      }));
-    } else {
-      setFormData((prevFormData) => ({
-        ...prevFormData,
-        [name]: value,
-      }));
-    }
-  };  
-
-  // Example of a simple form submission handler
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (validateForm()) {
-      setButtonStatus('yes');
-    } else {
-      setButtonStatus('no');
-    }
-  };
-
-
-  const handleYesNoClick = (field) => {
-    handleChange({
-      target: {
-        name: field,
-        value: formData[field] ? 'No' : 'Yes', // Toggle between 'Yes' and 'No'
-        type: 'button',
-      },
-    } as React.ChangeEvent<HTMLInputElement>);
-  };
-
-  const allFieldsFilled = () => {
-    return Object.entries(formData).every(([key, value]) => {
-      if (!formData.international && (key === 'evacCoverage' || key === 'repatriationCoverage' || key.startsWith('jVisa'))) {
-        return true; // Assume these are 'filled' if the user is not international
+import { useCallback, useContext, useMemo } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { getButtonClassNames } from "../components/Button";
+import Constraint from "../components/Constraint";
+import Container from "../components/Container";
+import FormDataSpy from "../components/FormDataSpy";
+import Input from "../components/Input";
+import InputDate from "../components/InputDate";
+import InputSelectButtons from "../components/InputSelectButtons";
+import {
+  SIDEBAR_COLLAPSED_NAVBAR_LEFT,
+  SIDEBAR_NOT_COLLAPSED_NAVBAR_LEFT,
+  Z_INDEX_NAVBAR,
+} from "../consts/classes.const";
+import { YES_OR_NO, isNo, isYes } from "../consts/options.const";
+import { BasicOption } from "../types/basicOption";
+import { classNames } from "../utils/classNames";
+import { IsSidebarCollapsedContext } from "../contexts/isSidebarCollapsedContext";
+import useSessionUser from "../hooks/useSessionUser";
+
+/* -------------------------------------------------------------------------- */
+/*                                 Form Schema                                */
+/* -------------------------------------------------------------------------- */
+
+type FormValues = {
+  international: BasicOption | null;
+  /* ------------------------------ I18n student ------------------------------ */
+  evacCoverage: number;
+  repatriationCoverage: number;
+  jVisaHolder: BasicOption | null;
+  jVisaDeductible: number;
+  visaCopy: BasicOption | null;
+  internationalTranslated: BasicOption | null;
+  /* --------------------------------- Further -------------------------------- */
+  coverageStartDate: Date;
+  coverageEndDate: Date;
+  coversInpatientOutpatientMedicalSF: BasicOption | null;
+  coversInpatientOutpatientMentalHealthSF: BasicOption | null;
+  annualDeductible: number;
+  specialEmployerPlanAnnualDeductible: BasicOption | null;
+  annualOutOfPocketMaximum: number;
+  specialEmployerPlanAnnualOutOfPocketMaximum: BasicOption | null;
+  providesEMBPPACA: BasicOption | null;
+  covers100PercentPreventiveCarePPACA: BasicOption | null;
+  exclusionsForPreExistingConditions: BasicOption | null;
+  offersPrescriptionDrugCoverage: BasicOption | null;
+  coverageForNonEmergencyAndEmergencyCare: BasicOption | null;
+  lifetimeAggregateMaxBenefit: BasicOption | null;
+};
+
+const INTERNATIONAL_FIELDS = [
+  "evacCoverage",
+  "repatriationCoverage",
+  "jVisaHolder",
+  "jVisaDeductible",
+  "visaCopy",
+  "internationalTranslated",
+] as const satisfies (keyof FormValues)[];
+
+const DEFAULT_DATE = new Date();
+
+const DEFAULT_VALUES: FormValues = {
+  international: null,
+  /* ------------------------------ I18n student ------------------------------ */
+  evacCoverage: 0,
+  repatriationCoverage: 0,
+  jVisaHolder: null,
+  jVisaDeductible: 0,
+  visaCopy: null,
+  internationalTranslated: null,
+  /* --------------------------------- Common --------------------------------- */
+  coverageStartDate: DEFAULT_DATE,
+  coverageEndDate: DEFAULT_DATE,
+  coversInpatientOutpatientMedicalSF: null,
+  coversInpatientOutpatientMentalHealthSF: null,
+  annualDeductible: 0,
+  specialEmployerPlanAnnualDeductible: null,
+  annualOutOfPocketMaximum: 0,
+  specialEmployerPlanAnnualOutOfPocketMaximum: null,
+  providesEMBPPACA: null, // Assuming true for US plans as mentioned
+  covers100PercentPreventiveCarePPACA: null, // Assuming true for US plans as mentioned
+  exclusionsForPreExistingConditions: null,
+  offersPrescriptionDrugCoverage: null,
+  coverageForNonEmergencyAndEmergencyCare: null,
+  lifetimeAggregateMaxBenefit: null,
+};
+
+/* -------------------------------------------------------------------------- */
+/*                                  Component                                 */
+/* -------------------------------------------------------------------------- */
+
+export default function WaiveCardinalCarePage() {
+  /* ---------------------------------- Hooks --------------------------------- */
+  const user = useSessionUser();
+  const isUserLoggedIn = Boolean(user);
+
+  const { isSidebarCollapsed } = useContext(IsSidebarCollapsedContext);
+
+  const { control, watch, getValues } = useForm<FormValues>({
+    defaultValues: DEFAULT_VALUES,
+  });
+
+  /* ------------------------------ Record filter ----------------------------- */
+
+  // This function is used to filter out fields that are not displayed.
+  // This is useful when trying to find out which fields still have to be filled
+  // and which fields should influence the waiver decision.
+  const formDataFilterFunction = useCallback(
+    (
+      [key, value]: [key: keyof FormValues | string, value: any],
+      shouldFilterNulls = false,
+    ) => {
+      const { international, jVisaHolder } = getValues();
+
+      if (shouldFilterNulls && value === null) return false;
+
+      if (
+        !isYes(international) &&
+        (INTERNATIONAL_FIELDS as string[]).includes(key)
+      ) {
+        return false;
+      }
+
+      if (!isYes(jVisaHolder) && key === "jVisaDeductible") {
+        return false;
       }
-  
-      if (!formData.jVisaHolder && key.startsWith('jVisa')) {
-        return true; 
+
+      return true;
+    },
+    [getValues],
+  );
+
+  /* ------------------------------ Fields filled ----------------------------- */
+
+  const isFieldFilledRecord: Partial<Record<keyof FormValues, boolean>> =
+    useMemo(() => {
+      const formData = getValues();
+
+      const isFieldFilledRecord = Object.fromEntries(
+        Object.entries(formData)
+          .filter((keyValuePair) => formDataFilterFunction(keyValuePair))
+          .map(([key, value]) => {
+            if (value instanceof Date) {
+              return [key, value.getTime() !== DEFAULT_DATE.getTime()]; // Make sure dates have been changed.
+            }
+
+            return [key, Boolean(value)]; // i.e., not null or 0
+          }),
+      ) as Partial<Record<keyof FormValues, boolean>>;
+
+      console.debug("isFieldFilledRecord", isFieldFilledRecord);
+
+      return isFieldFilledRecord;
+    }, [JSON.stringify(watch())]);
+
+  const nextFieldToFill = useMemo(() => {
+    const undefinedOrNextFieldToFillEntry = Object.entries(
+      isFieldFilledRecord,
+    ).find(([, isFilled]) => !isFilled);
+
+    console.debug(
+      "undefinedOrNextFieldToFillEntry",
+      undefinedOrNextFieldToFillEntry,
+    );
+
+    return Array.isArray(undefinedOrNextFieldToFillEntry)
+      ? undefinedOrNextFieldToFillEntry[0] // Key of the field
+      : undefined;
+  }, [isFieldFilledRecord]);
+
+  const areAllFieldsFilled = typeof nextFieldToFill === "undefined";
+
+  /* ---------------- Fields' influence on the waiver decision ---------------- */
+
+  const doesFieldAllowWaiveRecord: Record<keyof FormValues, boolean | null> =
+    useMemo(() => {
+      // Destructure fields
+      const {
+        evacCoverage,
+        repatriationCoverage,
+        jVisaDeductible,
+        visaCopy,
+        internationalTranslated,
+        coverageStartDate,
+        coverageEndDate,
+        coversInpatientOutpatientMedicalSF,
+        coversInpatientOutpatientMentalHealthSF,
+        annualDeductible,
+        specialEmployerPlanAnnualDeductible,
+        annualOutOfPocketMaximum,
+        specialEmployerPlanAnnualOutOfPocketMaximum,
+        providesEMBPPACA,
+        covers100PercentPreventiveCarePPACA,
+        exclusionsForPreExistingConditions,
+        offersPrescriptionDrugCoverage,
+        coverageForNonEmergencyAndEmergencyCare,
+        lifetimeAggregateMaxBenefit,
+      } = getValues();
+
+      const academicStart = new Date("2023-09-26");
+      const academicEnd = new Date("2024-06-12");
+
+      const isDeductibleCovered =
+        annualDeductible <= 1000 || isYes(specialEmployerPlanAnnualDeductible);
+
+      const isOopCovered =
+        annualOutOfPocketMaximum <= 9100 ||
+        isYes(specialEmployerPlanAnnualOutOfPocketMaximum);
+
+      // Return them
+
+      const doesFieldAllowWaiveRecord = {
+        international: null, // Null because field doesn't affect the waiver decision.
+        evacCoverage: evacCoverage >= 50000,
+        repatriationCoverage: repatriationCoverage >= 25000,
+        jVisaHolder: null, // Null because field doesn't affect the waiver decision.
+        jVisaDeductible: jVisaDeductible <= 500,
+        visaCopy: isYes(visaCopy),
+        internationalTranslated: isYes(internationalTranslated),
+        coverageStartDate:
+          coverageStartDate.getTime() < academicStart.getTime(),
+        coverageEndDate: coverageEndDate.getTime() > academicEnd.getTime(),
+        coversInpatientOutpatientMedicalSF: isYes(
+          coversInpatientOutpatientMedicalSF,
+        ),
+        coversInpatientOutpatientMentalHealthSF: isYes(
+          coversInpatientOutpatientMentalHealthSF,
+        ),
+        annualDeductible: isDeductibleCovered,
+        specialEmployerPlanAnnualDeductible: isDeductibleCovered,
+        annualOutOfPocketMaximum: isOopCovered,
+        specialEmployerPlanAnnualOutOfPocketMaximum: isOopCovered,
+        providesEMBPPACA: isYes(providesEMBPPACA),
+        covers100PercentPreventiveCarePPACA: isYes(
+          covers100PercentPreventiveCarePPACA,
+        ),
+        exclusionsForPreExistingConditions: isNo(
+          exclusionsForPreExistingConditions,
+        ),
+        offersPrescriptionDrugCoverage: isYes(offersPrescriptionDrugCoverage),
+        coverageForNonEmergencyAndEmergencyCare: isYes(
+          coverageForNonEmergencyAndEmergencyCare,
+        ),
+        lifetimeAggregateMaxBenefit: isYes(lifetimeAggregateMaxBenefit),
+      };
+
+      console.debug("doesFieldAllowWaiveRecord", doesFieldAllowWaiveRecord);
+
+      return doesFieldAllowWaiveRecord;
+    }, [JSON.stringify(watch())]);
+
+  const canWaive = useMemo(() => {
+    const filteredEntries = Object.fromEntries(
+      Object.entries(doesFieldAllowWaiveRecord).filter(
+        (keyValuePair) => formDataFilterFunction(keyValuePair, true), // Unlike above, filter null values this time because they shouldn't affect the waiver decision.
+      ) as [keyof FormValues, boolean][],
+    ) as Partial<Record<keyof FormValues, boolean>>;
+
+    const canWaive = Object.values(filteredEntries).reduce(
+      (acc, value) => acc && value,
+    );
+
+    console.debug("canWaive", canWaive);
+
+    return canWaive;
+  }, [doesFieldAllowWaiveRecord]);
+
+  /* ------------------------------ Field display ----------------------------- */
+
+  const getFieldClassNames = useCallback(
+    (key: keyof FormValues) => {
+      if (isFieldFilledRecord[key]) {
+        if (doesFieldAllowWaiveRecord[key] === false)
+          return "[&_input]:bg-red-400 [&_input]:border-red-400 [&_button.selected]:bg-red-400 [&_button.selected]:border-red-400";
+
+        if (doesFieldAllowWaiveRecord[key] === true)
+          return "opacity-50 [&_input]:bg-green-400 [&_input]:border-green-400 [&_button.selected]:bg-green-400 [&_button.selected]:border-green-400";
       }
 
-      if (typeof value === 'boolean') return true; // checkboxes can be false
-      return value !== ''; // ensure text fields are not empty
-    });
-  };
-
-  // A simple function to validate form data (adjust according to your validation rules)
-  const validateForm = () => {
-    // Return false immediately if not all fields are filled
-    if (allFieldsFilled() === false) return false;
-  
-    // Now, we apply the specific rules for coverage
-    let covered = true;
-
-    const startDate = new Date(formData.coverageStartDate);
-    const endDate = new Date(formData.coverageEndDate);
-
-    const academicStart = new Date('2023-09-26');
-    const academicEnd = new Date('2024-06-12');
-
-    const academicYearCovered = startDate < academicStart && endDate > academicEnd;
-
-    const annualDeductibleAmount = Number(formData.annualDeductibleInput);
-    const annualOutOfPocketMaximumAmount = Number(formData.annualOutOfPocketMaximumInput); // Convert to number
-  
-    const evacCoverageAmount = Number(formData.evacCoverage);
-    const repatriationCoverageAmount = Number(formData.repatriationCoverage);
-    const jVisaDeductibleAmount = Number(formData.jVisaDeductible);
-
-    // Check for international student specific rules
-    if (formData.international) {
-      covered = covered &&
-                !isNaN(evacCoverageAmount) && evacCoverageAmount >= 50000 &&
-                !isNaN(repatriationCoverageAmount) && repatriationCoverageAmount >= 25000 &&
-                formData.visaCopy &&
-                formData.internationalTranslated &&
-                (formData.jVisaHolder ? !isNaN(jVisaDeductibleAmount) && jVisaDeductibleAmount <= 500 : true);
-    }
-  
-    // Common requirements for all students
-    
-    const sfBayCareCovered = formData.coversInpatientOutpatientMedicalSF && formData.coversInpatientOutpatientMentalHealthSF;
-    const deductibleCovered = !isNaN(annualDeductibleAmount) && annualDeductibleAmount <= 1000 || formData.specialEmployerPlanAnnualDeductible;
-    const oopCovered = (!isNaN(annualOutOfPocketMaximumAmount) && annualOutOfPocketMaximumAmount <= 9100) || formData.specialEmployerPlanAnnualOutOfPocketMaximum;
-    const conditionsCovered = !formData.exclusionsForPreExistingConditions;
-  
-    covered = covered &&
-              academicYearCovered &&
-              sfBayCareCovered &&
-              deductibleCovered &&
-              oopCovered &&
-              formData.providesEMBPPACA &&
-              formData.covers100PercentPreventiveCarePPACA &&
-              conditionsCovered &&
-              formData.offersPrescriptionDrugCoverage &&
-              formData.coverageForNonEmergencyAndEmergencyCare &&
-              formData.lifetimeAggregateMaxBenefit;
-
-    console.log("covered", covered);
-    console.log("academicYearCovered", academicYearCovered);
-    console.log("sfBayCareCovered", sfBayCareCovered);
-    console.log("deductibleCovered", deductibleCovered);
-    console.log("oopCovered", oopCovered);
-    console.log("formData.providesEMBPPACA", formData.providesEMBPPACA);
-    console.log("conditionsCovered", conditionsCovered);
-    console.log("formData.offersPrescriptionDrugCoverage", formData.offersPrescriptionDrugCoverage);
-    console.log("formData.coverageForNonEmergencyAndEmergencyCare", formData.coverageForNonEmergencyAndEmergencyCare);
-    console.log("formData.lifetimeAggregateMaxBenefit", formData.lifetimeAggregateMaxBenefit);
-  
-    return covered;
-  };
-
-  useEffect(() => {
-    if (!allFieldsFilled()) {
-      setButtonStatus('moreInfoRequired');
-    } else {
-      // All fields are filled, now check if the form data meets the criteria
-      const isCovered = validateForm();
-      setButtonStatus(isCovered ? 'yes' : 'no');
-    }
-  }, [formData]);
-
-  const formStyle = {
-    fontFamily: 'Arial, sans-serif',
-    maxWidth: '600px',
-    margin: '150px auto 40px',
-    padding: '20px',
-  };
-
-  const headerStyle = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '20px',
-    alignItems: 'center',
-    backgroundColor: buttonStatus === 'moreInfoRequired' ? '#cccccc' : buttonStatus === 'yes' ? '#4CAF50' : '#F44336', // Grey for more info, green for yes, red for no
-    position: 'fixed',
-    top: '60px',
-    width: '100%',
-    zIndex: 1000,
-  };
-
-  const titleStyle = {
-    fontSize: '32px', // Adjusted for a larger banner
-    fontWeight: 'bold',
-    flex: '1',
-    marginLeft: '20px',
-  };
-
-  const infoButtonStyle = {
-    padding: '10px 20px',
-    fontSize: '16px',
-    fontWeight: 'bold',
-    backgroundColor: '#ffffff',
-    color: '#000000',
-    border: 'none',
-    borderRadius: '4px',
-    cursor: 'default',
-    marginRight: '20px',
-  };
-
-  const labelStyle = {
-    display: 'block',
-    margin: '10px 0 20px',
-    fontSize: '20px',
-    fontWeight: 'normal',
-    marginBottom: '0px',
-  };
-
-
-  const buttonStyle = {
-    fontSize: '18px',
-    fontWeight: 'bold',
-    padding: '10px 15px',
-    backgroundColor: '#000000', // Adjust to match the actual button color
-    color: '#ffffff',
-    border: 'none',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    marginTop: '20px',
-  };
-
-  const inputContainerStyle = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginBottom: '20px',
-  };
-
-  const inputStyle = {
-    width: 'calc(50% - 10px)', // Subtract margin
-    height: '40px',
-    padding: '5px 10px',
-    fontSize: '16px',
-    borderColor: '#cccccc',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    marginTop: '0px',
-  };
-
-  const hrStyle = {
-    backgroundColor: '#000000',
-    color: '#000000',
-    height: '2px',
-  };
+      if (key === nextFieldToFill) return "";
+
+      return "opacity-50";
+    },
+    [isFieldFilledRecord, doesFieldAllowWaiveRecord],
+  );
+
+  /* ----------------------------- View conditions ---------------------------- */
+
+  const shouldShowInternationalSection = isYes(watch("international"));
+  const shouldShowJVisaDeductible = isYes(watch("jVisaHolder"));
+
+  /* --------------------------------- Render --------------------------------- */
 
   return (
-    <div>
-      <header style={headerStyle}>
-        <h1 style={titleStyle}>Can I waive goodbye to Cardinal Care?</h1>
-        <button style={infoButtonStyle}>
-          {buttonStatus === 'moreInfoRequired' ? 'More Info Required' : 
-            buttonStatus === 'yes' ? 'Yes, You Can Waive!' : 'No, You Can\'t Waive'}
-        </button>
-      </header>
-    <form onSubmit={handleSubmit} style={formStyle}>
-      <div className="flex gap-3 items-center p-3 bg-yellow-200 font-bold">
-        Answer the following questions about your current health insurance coverage to determine whether you can waive Cardinal Care!
+    <>
+      <Container
+        className={classNames(
+          Z_INDEX_NAVBAR,
+          "fixed right-0 top-16 p-3",
+          [!isUserLoggedIn, "left-0"],
+          [isUserLoggedIn && isSidebarCollapsed, SIDEBAR_COLLAPSED_NAVBAR_LEFT],
+          [
+            isUserLoggedIn && !isSidebarCollapsed,
+            SIDEBAR_NOT_COLLAPSED_NAVBAR_LEFT,
+          ],
+          [!areAllFieldsFilled, "bg-gray-200"],
+          [areAllFieldsFilled && canWaive, "bg-green-400"],
+          [areAllFieldsFilled && !canWaive, "bg-red-400"],
+        )}
+      >
+        <h1 className="flex-1 text-xl">
+          Can I waive goodbye to Cardinal Care?
+        </h1>
+        <div
+          className={classNames(
+            getButtonClassNames("white"),
+            "hover:bg-white cursor-auto",
+            [areAllFieldsFilled && canWaive, "text-green-400"],
+            [areAllFieldsFilled && !canWaive, "text-red-400"],
+          )}
+        >
+          {!areAllFieldsFilled ? "More Info Required" : canWaive ? "Yes" : "No"}
         </div>
-        
-        <hr/>
-      <label style={labelStyle}>
-        Are you an international student?
-        </label>
-      <div style={inputContainerStyle}>
-        <input
-          type="button"
-          value="Yes"
-          onClick={() => setFormData({ ...formData, international: true })}
-          style={{ ...inputStyle, backgroundColor: formData.international ? '#cccccc' : '#ffffff' }}
-        />
-        <input
-          type="button"
-          value="No"
-          onClick={() => setFormData({ ...formData, international: false })}
-          style={{ ...inputStyle, backgroundColor: !formData.international ? '#cccccc' : '#ffffff' }}
-        />
-      </div>
-
-      <div style={{ display: formData.international ? 'block' : 'none' }}>
-        <strong>Additional Questions For International Students</strong>
-        
-        <div>
-        <label style={labelStyle}>
-          How much medical evacuation coverage to your home country do you have?
-          </label>
-          <div style={{ display: 'flex', alignItems: 'center', backgroundColor: '#FFF', border: '1px solid #CCC', borderRadius: '4px', padding: '5px 10px', marginTop: '10px' }}>
-            <span style={{ marginRight: '10px', fontWeight: 'bold' }}>$</span>
-            <input
-                type="text"
+      </Container>
+      <Container
+        makeBoxed="narrow"
+        addVerticalPadding={true}
+        makeGutter={true}
+        className="max-w-3xl mt-20"
+      >
+        <Constraint
+          id="international"
+          label={"Are you an international student?"}
+          className={getFieldClassNames("international")}
+        >
+          <Controller
+            name="international"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        {/* ------------------------------ I18n student ------------------------------ */}
+        {shouldShowInternationalSection && (
+          <Container makeGutter={true} className="border-2 border-gray-200 p-3">
+            <h2 className="text-center font-bold">
+              Additional Questions For International Students
+            </h2>
+            <Constraint
+              id="evacCoverage"
+              label={
+                "How much medical evacuation coverage to your home country do you have?"
+              }
+              className={getFieldClassNames("evacCoverage")}
+            >
+              <Controller
                 name="evacCoverage"
-                value={formData.evacCoverage}
-                onChange={handleChange}
-                placeholder="Enter amount"
-                style={{
-                flexGrow: 1,
-                border: '2px solid #DDD', // Slightly darker border for the input field
-                outline: 'none',
-                color: '#333',
-                fontSize: '16px',
-                padding: '5px', // Added padding for better text alignment
-                borderRadius: '4px', // Matching border radius for consistency
-                backgroundColor: 'transparent', // Ensure the input background matches the div background
-                }}
-            />
-        </div>
-        
-        
-        </div>
-        <div>
-        <label style={labelStyle}>
-        How much repatriation coverage to your home country do you have?:
-        </label>
-        <div style={{ display: 'flex', alignItems: 'center', backgroundColor: '#FFF', border: '1px solid #CCC', borderRadius: '4px', padding: '5px 10px', marginTop: '10px' }}>
-            <span style={{ marginRight: '10px', fontWeight: 'bold' }}>$</span>
-            <input
-                type="text"
+                control={control}
+                render={({ field: { ref, ...field } }) => (
+                  <Input type="number" {...field} />
+                )}
+              />
+            </Constraint>
+            <Constraint
+              id="repatriationCoverage"
+              label={
+                "How much repatriation coverage to your home country do you have?"
+              }
+              className={getFieldClassNames("repatriationCoverage")}
+            >
+              <Controller
                 name="repatriationCoverage"
-                value={formData.repatriationCoverage}
-                onChange={handleChange}
-                placeholder="Enter amount"
-                style={{
-                flexGrow: 1,
-                border: '2px solid #DDD', // Slightly darker border for the input field
-                outline: 'none',
-                color: '#333',
-                fontSize: '16px',
-                padding: '5px', // Added padding for better text alignment
-                borderRadius: '4px', // Matching border radius for consistency
-                backgroundColor: 'transparent', // Ensure the input background matches the div background
-                }}
-            />
-        </div>
-        
-            
-        </div>
-        
-        <div>
-        <label style={labelStyle}>
-          Are you a J Visa holder?
-          </label>
-        <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, jVisaHolder: true })}
-
-            style={{ ...inputStyle, backgroundColor: formData.jVisaHolder ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, jVisaHolder: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.jVisaHolder ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-            
-            <div style={{ display: formData.jVisaHolder ? 'block' : 'none' }}>
-            <label style={labelStyle}>
-            If you are a J Visa holder, what is your insurance deductible?
-            </label>
-            <div style={{ display: 'flex', alignItems: 'center', backgroundColor: '#FFF', border: '1px solid #CCC', borderRadius: '4px', padding: '5px 10px', marginTop: '10px' }}>
-            <span style={{ marginRight: '10px', fontWeight: 'bold' }}>$</span>
-            <input
-                type="text"
-                name="jVisaDeductible"
-                value={formData.jVisaDeductible}
-                onChange={handleChange}
-                placeholder="Enter amount"
-                style={{
-                flexGrow: 1,
-                border: '2px solid #DDD', // Slightly darker border for the input field
-                outline: 'none',
-                color: '#333',
-                fontSize: '16px',
-                padding: '5px', // Added padding for better text alignment
-                borderRadius: '4px', // Matching border radius for consistency
-                backgroundColor: 'transparent', // Ensure the input background matches the div background
-                }}
-            />
-            </div>
-                
-            </div>
-        </div>
-        <div>
-        <label style={labelStyle}>
-        Can you submit a copy of your Visa?
-        </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, visaCopy: true })}
-
-            style={{ ...inputStyle, backgroundColor: formData.visaCopy ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, visaCopy: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.visaCopy ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-            
-            <label style={labelStyle}>
-            Can you submit a copy of all policy documents expressed in English, and under U.S. dollars?
-            </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, internationalTranslated: true })}
-
-            style={{ ...inputStyle, backgroundColor: formData.internationalTranslated ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, internationalTranslated: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.internationalTranslated ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-            
-        </div>
-      </div>
-      <hr style={hrStyle}/>
-      <label style={labelStyle}>
-        Coverage Start Date
-        </label>
-        <div style={inputContainerStyle}>
-            <input
-            type="date"
+                control={control}
+                render={({ field: { ref, ...field } }) => (
+                  <Input type="number" {...field} />
+                )}
+              />
+            </Constraint>
+            <Constraint
+              id="jVisaHolder"
+              label={"Are you a J-Visa holder?"}
+              className={getFieldClassNames("jVisaHolder")}
+            >
+              <Controller
+                name="jVisaHolder"
+                control={control}
+                render={({ field: { ref, ...field } }) => (
+                  <InputSelectButtons {...field} options={YES_OR_NO} />
+                )}
+              />
+            </Constraint>
+            {shouldShowJVisaDeductible && (
+              <Constraint
+                id="jVisaDeductible"
+                label={"What is your insurance deductible?"}
+                className={getFieldClassNames("jVisaDeductible")}
+              >
+                <Controller
+                  name="jVisaDeductible"
+                  control={control}
+                  render={({ field: { ref, ...field } }) => (
+                    <Input type="number" {...field} />
+                  )}
+                />
+              </Constraint>
+            )}
+            <Constraint
+              id="visaCopy"
+              label={"Can you submit a copy of your Visa?"}
+              className={getFieldClassNames("visaCopy")}
+            >
+              <Controller
+                name="visaCopy"
+                control={control}
+                render={({ field: { ref, ...field } }) => (
+                  <InputSelectButtons {...field} options={YES_OR_NO} />
+                )}
+              />
+            </Constraint>
+            <Constraint
+              id="internationalTranslated"
+              label={
+                "Can you submit a copy of all policy documents expressed in English, and under U.S. dollars?"
+              }
+              className={getFieldClassNames("internationalTranslated")}
+            >
+              <Controller
+                name="internationalTranslated"
+                control={control}
+                render={({ field: { ref, ...field } }) => (
+                  <InputSelectButtons {...field} options={YES_OR_NO} />
+                )}
+              />
+            </Constraint>
+          </Container>
+        )}
+        {/* --------------------------------- Further -------------------------------- */}
+        <Constraint
+          id="coverageStartDate"
+          label={"Coverage Start Date"}
+          className={getFieldClassNames("coverageStartDate")}
+        >
+          <Controller
             name="coverageStartDate"
-            value={formData.coverageStartDate}
-            onChange={handleChange}
-            style={inputStyle}
-            />
-        </div>
-        
-
-        <label style={labelStyle}>
-        Coverage End Date
-        </label>
-        <div style={inputContainerStyle}>
-            <input
-            type="date"
+            control={control}
+            render={({ field: { ref, ...field } }) => <InputDate {...field} />}
+          />
+        </Constraint>
+        <Constraint
+          id="coverageEndDate"
+          label={"Coverage End Date"}
+          className={getFieldClassNames("coverageEndDate")}
+        >
+          <Controller
             name="coverageEndDate"
-            value={formData.coverageEndDate}
-            onChange={handleChange}
-            style={inputStyle}
-            />
-        </div>
-        {/*<label style={labelStyle}>
-        Does it Cover the Entire Academic Year?
-        </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, coversEntireAcademicYear: true })}
-            style={{ ...inputStyle, backgroundColor: formData.coversEntireAcademicYear ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, coversEntireAcademicYear: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.coversEntireAcademicYear ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-            </label>*/}
-        <label style={labelStyle}>
-        Does it Cover Inpatient and Outpatient Medical Care in the San Francisco Bay Area?
-        </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, coversInpatientOutpatientMedicalSF: true })}
-            style={{ ...inputStyle, backgroundColor: formData.coversInpatientOutpatientMedicalSF ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, coversInpatientOutpatientMedicalSF: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.coversInpatientOutpatientMedicalSF ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-
-            <label style={labelStyle}>
-        Does it Cover Inpatient and Outpatient Mental Health Care in the San Francisco Bay Area? 
-        </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, coversInpatientOutpatientMentalHealthSF: true })}
-            style={{ ...inputStyle, backgroundColor: formData.coversInpatientOutpatientMentalHealthSF ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, coversInpatientOutpatientMentalHealthSF: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.coversInpatientOutpatientMentalHealthSF ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-
-            {/*<label style={labelStyle}>
-            Is your annual deductible $1000 USD or less?
-            </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, annualDeductibleLessThanOrEqualTo1000: true })}
-            style={{ ...inputStyle, backgroundColor: formData.annualDeductibleLessThanOrEqualTo1000 ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, annualDeductibleLessThanOrEqualTo1000: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.annualDeductibleLessThanOrEqualTo1000 ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-            </label>*/}
-            <label style={labelStyle}>
-            What is your annual deductible?
-            </label>
-            <div style={{ display: 'flex', alignItems: 'center', backgroundColor: '#FFF', border: '1px solid #CCC', borderRadius: '4px', padding: '5px 10px', marginTop: '10px' }}>
-                <span style={{ marginRight: '10px', fontWeight: 'bold' }}>$</span>
-                <input
-                    type="text"
-                    name="annualDeductibleInput" // Corrected the name attribute
-                    value={formData.annualDeductibleInput}
-                    onChange={handleChange}
-                    placeholder="Enter amount"
-                    style={{
-                        flexGrow: 1,
-                        border: '2px solid #DDD',
-                        outline: 'none',
-                        color: '#333',
-                        fontSize: '16px',
-                        padding: '5px',
-                        borderRadius: '4px',
-                        backgroundColor: 'transparent',
-                    }}
-                />
-            </div>
-        
-            <label style={labelStyle}>
-            Do you have a special employer plan with an annual deductible above $1000?
-            </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, specialEmployerPlanAnnualDeductible: true })}
-            style={{ ...inputStyle, backgroundColor: formData.specialEmployerPlanAnnualDeductible ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, specialEmployerPlanAnnualDeductible: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.specialEmployerPlanAnnualDeductible ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-            {/*<label style={labelStyle}>
-            Is your annual out of pocket maximum $9100 USD or less?
-            </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, annualOutOfPocketMaximumLessThanOrEqualTo9100: true })}
-            style={{ ...inputStyle, backgroundColor: formData.annualOutOfPocketMaximumLessThanOrEqualTo9100 ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, annualOutOfPocketMaximumLessThanOrEqualTo9100: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.annualOutOfPocketMaximumLessThanOrEqualTo9100 ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-            </label>*/}
-
-            <label style={labelStyle}>
-            What is your annual out of pocket maximum?
-            </label>
-                <div style={{ display: 'flex', alignItems: 'center', backgroundColor: '#FFF', border: '1px solid #CCC', borderRadius: '4px', padding: '5px 10px', marginTop: '10px' }}>
-                    <span style={{ marginRight: '10px', fontWeight: 'bold' }}>$</span>
-                    <input
-                        type="text"
-                        name="annualOutOfPocketMaximumInput" // Corrected the name attribute
-                        value={formData.annualOutOfPocketMaximumInput}
-                        onChange={handleChange}
-                        placeholder="Enter amount"
-                        style={{
-                            flexGrow: 1,
-                            border: '2px solid #DDD',
-                            outline: 'none',
-                            color: '#333',
-                            fontSize: '16px',
-                            padding: '5px',
-                            borderRadius: '4px',
-                            backgroundColor: 'transparent',
-                        }}
-                    />
-                </div>
-            
-
-            <label style={labelStyle}>
-            Do you have a special employer plan with an annual out of pocket maximum above $9100?
-            </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, specialEmployerPlanAnnualOutOfPocketMaximum: true })}
-            style={{ ...inputStyle, backgroundColor: formData.specialEmployerPlanAnnualOutOfPocketMaximum ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, specialEmployerPlanAnnualOutOfPocketMaximum: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.specialEmployerPlanAnnualOutOfPocketMaximum ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-
-            <label style={labelStyle}>
-            Does it provide the Essential Minimum Benefits required by the Patient Protection and Affordable Care Act (PPACA) with no annual or lifetime maximums?
-          (Virtually all major US-based policies do.)
-          </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, providesEMBPPACA: true })}
-            style={{ ...inputStyle, backgroundColor: formData.providesEMBPPACA ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, providesEMBPPACA: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.providesEMBPPACA ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-
-            <label style={labelStyle}>
-            Does it cover 100% of Preventive Care as defined by the PPACA?
-          </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, covers100PercentPreventiveCarePPACA: true })}
-            style={{ ...inputStyle, backgroundColor: formData.covers100PercentPreventiveCarePPACA ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, covers100PercentPreventiveCarePPACA: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.covers100PercentPreventiveCarePPACA ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-
-            <label style={labelStyle}>
-            Does it contain ANY exclusions for pre-existing conditions?
-            </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, exclusionsForPreExistingConditions: true })}
-            style={{ ...inputStyle, backgroundColor: formData.exclusionsForPreExistingConditions ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, exclusionsForPreExistingConditions: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.exclusionsForPreExistingConditions ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-
-            <label style={labelStyle}>
-            Does it offer Prescription Drug Coverage?
-            </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, offersPrescriptionDrugCoverage: true })}
-            style={{ ...inputStyle, backgroundColor: formData.offersPrescriptionDrugCoverage ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, offersPrescriptionDrugCoverage: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.offersPrescriptionDrugCoverage ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-
-            <label style={labelStyle}>
-            Does it offer coverage for both non-emergency AND emergency care?
-            </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, coverageForNonEmergencyAndEmergencyCare: true })}
-            style={{ ...inputStyle, backgroundColor: formData.coverageForNonEmergencyAndEmergencyCare ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, coverageForNonEmergencyAndEmergencyCare: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.coverageForNonEmergencyAndEmergencyCare ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-
-            <label style={labelStyle}>
-            Does it have a lifetime aggregate maximum benefit of at least $2,000,000 USD, OR a maximum per condition/per lifetime benefit of $500,000 USD?
-            </label>
-          <div style={inputContainerStyle}>
-            <input
-            type="button"
-            value="Yes"
-            onClick={() => setFormData({ ...formData, lifetimeAggregateMaxBenefit: true })}
-            style={{ ...inputStyle, backgroundColor: formData.lifetimeAggregateMaxBenefit ? '#cccccc' : '#ffffff' }}
-            />
-            <input
-            type="button"
-            value="No"
-            onClick={() => setFormData({ ...formData, lifetimeAggregateMaxBenefit: false })}
-            style={{ ...inputStyle, backgroundColor: !formData.lifetimeAggregateMaxBenefit ? '#cccccc' : '#ffffff' }}
-            />
-            </div>
-    </form>
-    </div>
+            control={control}
+            render={({ field: { ref, ...field } }) => <InputDate {...field} />}
+          />
+        </Constraint>
+        <Constraint
+          id="coversInpatientOutpatientMedicalSF"
+          label={
+            "Does it Cover Inpatient and Outpatient Medical Care in the San Francisco Bay Area?"
+          }
+          className={getFieldClassNames("coversInpatientOutpatientMedicalSF")}
+        >
+          <Controller
+            name="coversInpatientOutpatientMedicalSF"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="coversInpatientOutpatientMentalHealthSF"
+          label={
+            "Does it Cover Inpatient and Outpatient Mental Health Care in the San Francisco Bay Area?"
+          }
+          className={getFieldClassNames(
+            "coversInpatientOutpatientMentalHealthSF",
+          )}
+        >
+          <Controller
+            name="coversInpatientOutpatientMentalHealthSF"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="annualDeductible"
+          label={"What is your annual deductible?"}
+          className={getFieldClassNames("annualDeductible")}
+        >
+          <Controller
+            name="annualDeductible"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <Input type="number" {...field} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="specialEmployerPlanAnnualDeductible"
+          label={
+            "Do you have a special employer plan with an annual deductible above $1,000?"
+          }
+          className={getFieldClassNames("specialEmployerPlanAnnualDeductible")}
+        >
+          <Controller
+            name="specialEmployerPlanAnnualDeductible"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="annualOutOfPocketMaximum"
+          label={"What is your annual out of pocket maximum?"}
+          className={getFieldClassNames("annualOutOfPocketMaximum")}
+        >
+          <Controller
+            name="annualOutOfPocketMaximum"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <Input type="number" {...field} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="specialEmployerPlanAnnualOutOfPocketMaximum"
+          label={
+            "Do you have a special employer plan with an annual out of pocket maximum above $9,100?"
+          }
+          className={getFieldClassNames(
+            "specialEmployerPlanAnnualOutOfPocketMaximum",
+          )}
+        >
+          <Controller
+            name="specialEmployerPlanAnnualOutOfPocketMaximum"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="providesEMBPPACA"
+          label={
+            "Does it provide the Essential Minimum Benefits required by the Patient Protection and Affordable Care Act (PPACA) with no annual or lifetime maximums? (Virtually all major US-based policies do.)"
+          }
+          className={getFieldClassNames("providesEMBPPACA")}
+        >
+          <Controller
+            name="providesEMBPPACA"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="covers100PercentPreventiveCarePPACA"
+          label={
+            "Does it cover 100% of Preventive Care as defined by the PPACA?"
+          }
+          className={getFieldClassNames("covers100PercentPreventiveCarePPACA")}
+        >
+          <Controller
+            name="covers100PercentPreventiveCarePPACA"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="exclusionsForPreExistingConditions"
+          label={"Does it contain ANY exclusions for pre-existing conditions?"}
+          className={getFieldClassNames("exclusionsForPreExistingConditions")}
+        >
+          <Controller
+            name="exclusionsForPreExistingConditions"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="offersPrescriptionDrugCoverage"
+          label={"Does it offer Prescription Drug Coverage?"}
+          className={getFieldClassNames("offersPrescriptionDrugCoverage")}
+        >
+          <Controller
+            name="offersPrescriptionDrugCoverage"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="coverageForNonEmergencyAndEmergencyCare"
+          label={
+            "Does it offer coverage for both non-emergency AND emergency care?"
+          }
+          className={getFieldClassNames(
+            "coverageForNonEmergencyAndEmergencyCare",
+          )}
+        >
+          <Controller
+            name="coverageForNonEmergencyAndEmergencyCare"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <Constraint
+          id="lifetimeAggregateMaxBenefit"
+          label={
+            "Does it have a lifetime aggregate maximum benefit of at least $2,000,000 USD, OR a maximum per condition/per lifetime benefit of $500,000 USD?"
+          }
+          className={getFieldClassNames("lifetimeAggregateMaxBenefit")}
+        >
+          <Controller
+            name="lifetimeAggregateMaxBenefit"
+            control={control}
+            render={({ field: { ref, ...field } }) => (
+              <InputSelectButtons {...field} options={YES_OR_NO} />
+            )}
+          />
+        </Constraint>
+        <FormDataSpy data={watch()} />
+      </Container>
+    </>
   );
-};
-
-export default WaiveCardinalCare;
\ No newline at end of file
+}
diff --git a/apps/server/var/sessions.db b/apps/server/var/sessions.db
index bd28a13..4bbe8fb 100644
Binary files a/apps/server/var/sessions.db and b/apps/server/var/sessions.db differ