diff --git a/components/Form/Input/Input.tsx b/components/Form/Input/Input.tsx
index 41d8c2876..5ad1a55bc 100644
--- a/components/Form/Input/Input.tsx
+++ b/components/Form/Input/Input.tsx
@@ -8,16 +8,18 @@ import Alert from 'components/Alert/Alert';
 import styles from './Input.module.css';
 
 /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes_common_to_all_input_types */
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'form'> {
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'form'> {
   field: FieldInputProps<string>;
   form: FormikState<Record<string, string>> & FormikHelpers<Record<string, string>>;
   hasValidationStyling?: boolean;
+  isDisabled?: boolean;
   isLabelHidden?: boolean;
   label: string;
 }
 
 function Input({
   className,
+  isDisabled = false,
   field: { name, value, ...field },
   form: { touched, errors },
   hasValidationStyling = true,
@@ -47,6 +49,7 @@ function Input({
             [styles.valid]: touched[name] && !hasErrors && hasValidationStyling,
             [styles.invalid]: touched[name] && hasErrors && hasValidationStyling,
           })}
+          disabled={isDisabled}
           id={id || name}
           name={name}
           type={type}
diff --git a/components/Form/Input/__tests__/__snapshots__/Input.test.tsx.snap b/components/Form/Input/__tests__/__snapshots__/Input.test.tsx.snap
index dc8f4262d..8ad58b673 100644
--- a/components/Form/Input/__tests__/__snapshots__/Input.test.tsx.snap
+++ b/components/Form/Input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`Input > should render with required props 1`] = `
   >
     <input
       className="Input"
+      disabled={false}
       id="someInputName"
       name="someInputName"
       onBlur={[MockFunction spy]}
diff --git a/components/Form/MultiStepForm.module.css b/components/Form/MultiStepForm.module.css
deleted file mode 100644
index 173bc9af7..000000000
--- a/components/Form/MultiStepForm.module.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.MultiStepForm {
-  width: 100%;
-  max-width: 50ch;
-  margin: 0 !important;
-}
-
-.containerFormErrorMessage {
-  display: flex;
-  justify-content: center;
-}
-
-.buttonGrouping {
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-around;
-  align-items: center;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 2rem;
-
-  /*
-   * Specific value just so outer edges of each button visually aligns with
-   * the outer edges of inputs in our often-existing two-column forms
-   */
-  width: 92.5%;
-}
-
-.buttonGrouping button + button {
-  margin-left: 1rem;
-}
-
-.centerAligned {
-  text-align: center;
-}
-
-@media screen and (--small-viewport) {
-  .buttonGrouping button {
-    min-width: 100px;
-  }
-}
-
-.forceButtonRight {
-  justify-content: flex-end;
-}
diff --git a/components/Form/MultiStepForm.tsx b/components/Form/MultiStepForm.tsx
index 880107c8d..1a587580b 100644
--- a/components/Form/MultiStepForm.tsx
+++ b/components/Form/MultiStepForm.tsx
@@ -14,7 +14,13 @@ import Button from 'components/Buttons/Button/Button';
 import Form from 'components/Form/Form';
 import Alert from 'components/Alert/Alert';
 import ProgressIndicator from 'components/ProgressIndicator/ProgressIndicator';
-import styles from './MultiStepForm.module.css';
+
+const InlineLoadingSpinner = () => (
+  <span
+    aria-hidden
+    className="border-solid border-white border-4 !border-b-themePrimary rounded-[50%] h-5 w-5 box-border animate-spin group-hover:border-themeSecondary transition-colors"
+  />
+);
 
 interface MultiStepFormProps<T> {
   initialValues: T;
@@ -107,18 +113,16 @@ export function MultiStepForm<T extends Record<string, string | string[] | numbe
       onSubmit={handleSubmit}
     >
       {formikBag => (
-        <Form className={styles.MultiStepForm} onSubmit={formikBag.handleSubmit}>
-          <h3 className={styles.centerAligned}>{CurrentStep.title}</h3>
+        <Form className="w-full max-w-prose-sm !m-0" onSubmit={formikBag.handleSubmit}>
+          <h3 className="text-center">{CurrentStep.title}</h3>
 
           <ProgressIndicator stepNumber={stepNumber} totalSteps={steps.length} />
 
           <CurrentStep {...formikBag} />
 
-          <div className={styles.errorMessage}>
-            {errorMessage && <Alert type="error">{errorMessage}</Alert>}
-          </div>
+          <div className="mt-8">{errorMessage && <Alert type="error">{errorMessage}</Alert>}</div>
 
-          <div className={styles.buttonGrouping}>
+          <div className="flex flex-nowrap justify-around items-center mx-auto mt-8 w-full gap-x-4 min-w-[7rem]">
             {!isFirstStep && (
               <Button
                 theme="secondary"
@@ -136,8 +140,12 @@ export function MultiStepForm<T extends Record<string, string | string[] | numbe
                 theme="secondary"
                 disabled={formikBag.isSubmitting}
                 data-testid={MULTI_STEP_SUBMIT_BUTTON}
+                className="group"
               >
-                Submit ✓
+                <span className="flex items-center justify-center gap-x-2">
+                  {formikBag.isSubmitting && <InlineLoadingSpinner />}
+                  <span className="mt-[0.325rem]">Submit ✓</span>
+                </span>
               </Button>
             ) : (
               <Button
@@ -146,8 +154,12 @@ export function MultiStepForm<T extends Record<string, string | string[] | numbe
                 disabled={formikBag.isSubmitting}
                 fullWidth={isFirstStep}
                 data-testid={MULTI_STEP_STEP_BUTTON}
+                className="group"
               >
-                Next →
+                <span className="flex items-center justify-center gap-x-2">
+                  {formikBag.isSubmitting && <InlineLoadingSpinner />}
+                  <span className="mt-[0.325rem]">Next →</span>
+                </span>
               </Button>
             )}
           </div>
diff --git a/components/Form/Select/SelectMulti.tsx b/components/Form/Select/SelectMulti.tsx
index 09febc4bb..3eadfcdc4 100644
--- a/components/Form/Select/SelectMulti.tsx
+++ b/components/Form/Select/SelectMulti.tsx
@@ -10,7 +10,7 @@ import styles from './Select.module.css';
 export interface SelectMultiProps
   extends Pick<ThemedReactSelectProps<true>, 'id' | 'hasValidationStyling' | 'isSearchable'> {
   className?: string;
-  field: FieldInputProps<string[]>;
+  field: FieldInputProps<{ label: string; value: string }[]>;
   form: FormikState<Record<string, string[]>> & FormikHelpers<Record<string, string[]>>;
   isLabelHidden?: boolean;
   label: string;
@@ -29,22 +29,8 @@ export function SelectMulti({
   options,
   ...props // disabled, placeholder, etc.
 }: SelectMultiProps) {
-  const value = options.filter(option => fieldValue.includes(option.value));
   const hasErrors = Boolean(errors[name]);
 
-  const sharedProps = {
-    ...props,
-    id: id ? `${id}` : name,
-    hasErrors,
-    hasValidationStyling,
-    isTouched: Boolean(touched[name]),
-    isSearchable,
-    name,
-    onBlur: () => setFieldTouched(name),
-    options,
-    value,
-  };
-
   return (
     <div className={classNames(className, styles.field)}>
       <Label for={name} isHidden={isLabelHidden}>
@@ -53,20 +39,21 @@ export function SelectMulti({
 
       <div className={styles.selectFeedbackGrouping}>
         <ThemedReactSelect<true>
-          {...sharedProps}
-          isMulti={true} // eslint-disable-line react/jsx-boolean-value
-          onChange={selectedArray => {
-            if (selectedArray) {
-              setFieldValue(
-                name,
-                selectedArray.map(item => item.value),
-              );
-            } else {
-              setFieldValue(name, []);
-            }
+          {...props}
+          id={id ? `${id}` : name}
+          name={name}
+          hasErrors={hasErrors}
+          hasValidationStyling={hasValidationStyling}
+          isMulti
+          isSearchable={isSearchable}
+          isTouched={Boolean(touched[name])}
+          onBlur={() => setFieldTouched(name)}
+          onChange={async selectedArray => {
+            await setFieldValue(name, selectedArray ?? []);
+            await setFieldTouched(name, true);
           }}
           options={options}
-          value={value ?? []}
+          value={fieldValue}
         />
 
         <ErrorMessage name={name}>
diff --git a/components/Form/Select/SelectSingle.tsx b/components/Form/Select/SelectSingle.tsx
index 572f1e0fa..a3b6e508a 100644
--- a/components/Form/Select/SelectSingle.tsx
+++ b/components/Form/Select/SelectSingle.tsx
@@ -3,7 +3,6 @@ import { ErrorMessage } from 'formik';
 import Alert from 'components/Alert/Alert';
 import Label from 'components/Form/Label/Label';
 import classNames from 'classnames';
-import LogRocket from 'logrocket';
 import type { ThemedReactSelectProps, OptionType } from './ThemedReactSelect';
 import { ThemedReactSelect } from './ThemedReactSelect';
 import styles from './Select.module.css';
@@ -56,12 +55,9 @@ export function SelectSingle({
         <ThemedReactSelect<false>
           {...sharedProps}
           isMulti={false}
-          onChange={option => {
-            if (option) {
-              setFieldValue(name, option.value);
-            } else {
-              LogRocket.captureException(new Error('SelectSingle onChange received a null option'));
-            }
+          onChange={async option => {
+            await setFieldValue(name, option?.value ?? '');
+            await setFieldTouched(name, true);
           }}
           options={options}
           value={value}
diff --git a/components/Form/Select/ThemedReactSelect.tsx b/components/Form/Select/ThemedReactSelect.tsx
index 59fb1fddc..45d1872ff 100644
--- a/components/Form/Select/ThemedReactSelect.tsx
+++ b/components/Form/Select/ThemedReactSelect.tsx
@@ -52,11 +52,12 @@ export function ThemedReactSelect<TMulti extends boolean>({
       closeMenuOnSelect={!isMulti}
       isMulti={isMulti}
       isSearchable={isSearchable}
-      blurInputOnSelect={isMulti}
+      blurInputOnSelect={isMulti && !isTouched} // this is ideal UX for seeing-eye users
       styles={{
         control: base => {
           return {
             ...base,
+            backgroundColor: isDisabled ? 'transparent' : 'white',
             borderColor:
               isTouched && hasValidationStyling ? outerColor : `rgba(${rgbValuesSecondary}, 0.5)`,
             boxShadow: isTouched && hasValidationStyling ? `0 0 1px 1px ${outerColor}` : 'none',
diff --git a/components/Form/Select/__tests__/__snapshots__/SelectMulti.test.tsx.snap b/components/Form/Select/__tests__/__snapshots__/SelectMulti.test.tsx.snap
index b1766cc77..1da668973 100644
--- a/components/Form/Select/__tests__/__snapshots__/SelectMulti.test.tsx.snap
+++ b/components/Form/Select/__tests__/__snapshots__/SelectMulti.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`Select > should render with required props 1`] = `
         className="css-1f43avz-a11yText-A11yText"
       />
       <div
-        className=" css-1mgllov-control"
+        className=" css-1s1bmlz-control"
         onMouseDown={[Function]}
         onTouchEnd={[Function]}
       >
diff --git a/components/Form/Select/__tests__/__snapshots__/SelectSingle.test.tsx.snap b/components/Form/Select/__tests__/__snapshots__/SelectSingle.test.tsx.snap
index 188139366..7abbd5e71 100644
--- a/components/Form/Select/__tests__/__snapshots__/SelectSingle.test.tsx.snap
+++ b/components/Form/Select/__tests__/__snapshots__/SelectSingle.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`Select > should render with required props 1`] = `
         className="css-1f43avz-a11yText-A11yText"
       />
       <div
-        className=" css-1mgllov-control"
+        className=" css-1s1bmlz-control"
         onMouseDown={[Function]}
         onTouchEnd={[Function]}
       >
diff --git a/components/Form/Select/__tests__/__snapshots__/ThemedReactSelect.test.tsx.snap b/components/Form/Select/__tests__/__snapshots__/ThemedReactSelect.test.tsx.snap
index 1018e0b6f..2ebbedb35 100644
--- a/components/Form/Select/__tests__/__snapshots__/ThemedReactSelect.test.tsx.snap
+++ b/components/Form/Select/__tests__/__snapshots__/ThemedReactSelect.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`ThemedReactSelect > should render (multi) with required props 1`] = `
     className="css-1f43avz-a11yText-A11yText"
   />
   <div
-    className=" css-1mgllov-control"
+    className=" css-1s1bmlz-control"
     onMouseDown={[Function]}
     onTouchEnd={[Function]}
   >
@@ -192,7 +192,7 @@ exports[`ThemedReactSelect > should render (non-multi) with required props 1`] =
     className="css-1f43avz-a11yText-A11yText"
   />
   <div
-    className=" css-1mgllov-control"
+    className=" css-1s1bmlz-control"
     onMouseDown={[Function]}
     onTouchEnd={[Function]}
   >
diff --git a/components/Forms/RegistrationForm/RegistrationForm.tsx b/components/Forms/RegistrationForm/RegistrationForm.tsx
index 044b775be..b5eade0be 100644
--- a/components/Forms/RegistrationForm/RegistrationForm.tsx
+++ b/components/Forms/RegistrationForm/RegistrationForm.tsx
@@ -117,7 +117,7 @@ export function RegistrationForm({
               name="email"
               label="Email*"
               component={Input}
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
               autoComplete="username email"
             />
 
@@ -126,7 +126,7 @@ export function RegistrationForm({
               name="confirm-email"
               label="Confirm Email*"
               component={Input}
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
               autoComplete="username email"
             />
 
@@ -136,7 +136,7 @@ export function RegistrationForm({
               name="password"
               label="Password*"
               component={Input}
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
               autoComplete="new-password"
             />
 
@@ -146,7 +146,7 @@ export function RegistrationForm({
               name="confirm-password"
               label="Confirm Password*"
               component={Input}
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
               autoComplete="new-password"
             />
 
@@ -155,7 +155,7 @@ export function RegistrationForm({
               name="firstName"
               label="First Name*"
               component={Input}
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
               autoComplete="given-name"
             />
 
@@ -164,7 +164,7 @@ export function RegistrationForm({
               name="lastName"
               label="Last Name*"
               component={Input}
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
               autoComplete="family-name"
             />
 
@@ -173,7 +173,7 @@ export function RegistrationForm({
               name="zipcode"
               label="Zipcode*"
               component={Input}
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
               autoComplete="postal-code"
             />
 
@@ -194,7 +194,7 @@ export function RegistrationForm({
                 </span>
               }
               component={Checkbox}
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
             />
 
             <Field
@@ -214,14 +214,14 @@ export function RegistrationForm({
                 </span>
               }
               component={Checkbox}
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
             />
           </div>
 
           {errorMessage && <Alert type="error">{errorMessage}</Alert>}
 
           <div className="max-w-md px-3 mt-5">
-            <Button type="submit" theme="secondary" disabled={isSubmitting}>
+            <Button type="submit" theme="secondary" isDisabled={isSubmitting}>
               Submit
             </Button>
             <p className="pt-5 text-xs">
diff --git a/components/Forms/UpdateProfileForm/UpdateProfileForm.tsx b/components/Forms/UpdateProfileForm/UpdateProfileForm.tsx
index 1f4d5b25f..270789e9b 100644
--- a/components/Forms/UpdateProfileForm/UpdateProfileForm.tsx
+++ b/components/Forms/UpdateProfileForm/UpdateProfileForm.tsx
@@ -56,7 +56,7 @@ function UpdateProfileForm({
     return getServerErrorMessage(errorObject);
   };
 
-  const onValueChange = async (values: UpdateProfileFormShape) => {
+  const onStepSubmit = async (values: UpdateProfileFormShape) => {
     const hasMilitaryExperience = [
       'Active Duty U.S. Military Service Member',
       'U.S. Reserve or National Guard member',
@@ -91,7 +91,7 @@ function UpdateProfileForm({
     <MultiStepForm
       initialValues={initialValues}
       getErrorMessage={generateError}
-      onEachStepSubmit={onValueChange}
+      onEachStepSubmit={onStepSubmit}
       onFinalSubmit={goToProfile}
       steps={steps}
     />
diff --git a/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.tsx.snap b/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.tsx.snap
index c935136ad..8917775aa 100644
--- a/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.tsx.snap
+++ b/components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`UpdateProfileForm > should render with required props 1`] = `
 <form
-  className="MultiStepForm"
+  className="w-full max-w-prose-sm !m-0"
   noValidate={true}
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <h3
-    className="centerAligned"
+    className="text-center"
   >
     Professional Details
   </h3>
@@ -59,7 +59,7 @@ exports[`UpdateProfileForm > should render with required props 1`] = `
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className=" css-1mgllov-control"
+            className=" css-1s1bmlz-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
@@ -212,19 +212,29 @@ exports[`UpdateProfileForm > should render with required props 1`] = `
       </div>
     </div>
   </div>
-  <div />
   <div
-    className="buttonGrouping"
+    className="mt-8"
+  />
+  <div
+    className="flex flex-nowrap justify-around items-center mx-auto mt-8 w-full gap-x-4 min-w-[7rem]"
   >
     <button
-      className="Button secondary fullWidth"
+      className="Button group secondary fullWidth"
       data-testid="SUBMIT_STEP_BUTTON"
       disabled={false}
       onClick={[Function]}
       tabIndex={0}
       type="submit"
     >
-      Next →
+      <span
+        className="flex items-center justify-center gap-x-2"
+      >
+        <span
+          className="mt-[0.325rem]"
+        >
+          Next →
+        </span>
+      </span>
     </button>
   </div>
 </form>
diff --git a/components/Forms/UpdateProfileForm/steps/MilitaryDetails.tsx b/components/Forms/UpdateProfileForm/steps/MilitaryDetails.tsx
index 172b12ee7..46a03769f 100644
--- a/components/Forms/UpdateProfileForm/steps/MilitaryDetails.tsx
+++ b/components/Forms/UpdateProfileForm/steps/MilitaryDetails.tsx
@@ -9,12 +9,9 @@ MilitaryDetails.title = 'Military Details';
 
 MilitaryDetails.validationSchema = Yup.object().shape({
   branchOfService: Yup.array()
-    .of(Yup.string())
-    .min(1, validationErrorMessages.required)
-    .required(validationErrorMessages.required),
-  payGrade: Yup.string()
-    .min(1, validationErrorMessages.required)
-    .required(validationErrorMessages.required),
+    .of(Yup.object().shape({ label: Yup.string(), value: Yup.string() }))
+    .min(1, validationErrorMessages.required),
+  payGrade: Yup.string().required(validationErrorMessages.required),
 });
 
 MilitaryDetails.initialValues = {
@@ -49,7 +46,7 @@ export function MilitaryDetails({ isSubmitting }: MilitaryDetailsProps) {
         label="Branch Of Service*"
         component={SelectMulti}
         options={branchOptions.map(option => ({ value: option, label: option }))}
-        disabled={isSubmitting}
+        isDisabled={isSubmitting}
       />
 
       <Field
@@ -57,7 +54,7 @@ export function MilitaryDetails({ isSubmitting }: MilitaryDetailsProps) {
         label="Pay Grade*"
         component={SelectSingle}
         options={payGradeOptions.map(option => ({ value: option, label: option }))}
-        disabled={isSubmitting}
+        isDisabled={isSubmitting}
       />
     </div>
   );
diff --git a/components/Forms/UpdateProfileForm/steps/MilitaryStatus.tsx b/components/Forms/UpdateProfileForm/steps/MilitaryStatus.tsx
index 79adffb27..04f55ae49 100644
--- a/components/Forms/UpdateProfileForm/steps/MilitaryStatus.tsx
+++ b/components/Forms/UpdateProfileForm/steps/MilitaryStatus.tsx
@@ -47,7 +47,7 @@ export function MilitaryStatus({ isSubmitting }: MilitaryStatusProps) {
           label="Military Affiliation*"
           component={SelectSingle}
           options={options.map(option => ({ value: option, label: option }))}
-          disabled={isSubmitting}
+          isDisabled={isSubmitting}
         />
       </div>
     </div>
diff --git a/components/Forms/UpdateProfileForm/steps/PersonalDetails.tsx b/components/Forms/UpdateProfileForm/steps/PersonalDetails.tsx
index 9a9bdd485..fb316046c 100644
--- a/components/Forms/UpdateProfileForm/steps/PersonalDetails.tsx
+++ b/components/Forms/UpdateProfileForm/steps/PersonalDetails.tsx
@@ -10,14 +10,12 @@ PersonalDetails.title = 'Personal Details';
 
 PersonalDetails.validationSchema = Yup.object().shape({
   joinReason: Yup.array()
-    .of(Yup.string())
-    .min(1, validationErrorMessages.required)
-    .required(validationErrorMessages.required),
+    .of(Yup.object().shape({ label: Yup.string(), value: Yup.string() }))
+    .min(1, validationErrorMessages.required),
   gender: Yup.string().required(validationErrorMessages.required),
   ethnicity: Yup.array()
-    .of(Yup.string())
-    .min(1, validationErrorMessages.required)
-    .required(validationErrorMessages.required),
+    .of(Yup.object().shape({ label: Yup.string(), value: Yup.string() }))
+    .min(1, validationErrorMessages.required),
   educationLevel: Yup.string().required(validationErrorMessages.required),
 });
 
@@ -64,7 +62,7 @@ const ethnicityOptions = mapStringsToSelectOptions([
 const educationLevelOptions = mapStringsToSelectOptions([
   'High school',
   'College/Associates degree',
-  "4 year Bachelor's degree",
+  '4 year Bachelor’s degree',
   'Graduate degree',
   'Post-Graduate degree',
   'Coding Bootcamp/other Professional Certifications',
@@ -80,7 +78,7 @@ export function PersonalDetails({ isSubmitting }: PersonalDetailsProps) {
         label="Join Reason*"
         component={SelectMulti}
         options={joinReasonOptions}
-        disabled={isSubmitting}
+        isDisabled={isSubmitting}
       />
 
       <Field
@@ -89,7 +87,7 @@ export function PersonalDetails({ isSubmitting }: PersonalDetailsProps) {
         label="Gender*"
         component={SelectSingle}
         options={genderOptions}
-        disabled={isSubmitting}
+        isDisabled={isSubmitting}
       />
 
       <Field
@@ -98,7 +96,7 @@ export function PersonalDetails({ isSubmitting }: PersonalDetailsProps) {
         label="Ethnicity*"
         component={SelectMulti}
         options={ethnicityOptions}
-        disabled={isSubmitting}
+        isDisabled={isSubmitting}
       />
 
       <Field
@@ -107,7 +105,7 @@ export function PersonalDetails({ isSubmitting }: PersonalDetailsProps) {
         label="Education Level*"
         component={SelectSingle}
         options={educationLevelOptions}
-        disabled={isSubmitting}
+        isDisabled={isSubmitting}
       />
     </div>
   );
diff --git a/components/Forms/UpdateProfileForm/steps/ProfessionalDetails.tsx b/components/Forms/UpdateProfileForm/steps/ProfessionalDetails.tsx
index 75f9ac523..7c09f8e55 100644
--- a/components/Forms/UpdateProfileForm/steps/ProfessionalDetails.tsx
+++ b/components/Forms/UpdateProfileForm/steps/ProfessionalDetails.tsx
@@ -37,7 +37,7 @@ export function ProfessionalDetails({ isSubmitting }: ProfessionalDetailsProps)
         label="Employment Status*"
         component={SelectSingle}
         options={options}
-        disabled={isSubmitting}
+        isDisabled={isSubmitting}
       />
 
       <Field
@@ -45,7 +45,7 @@ export function ProfessionalDetails({ isSubmitting }: ProfessionalDetailsProps)
         name="companyName"
         label="Company Name"
         component={Input}
-        disabled={isSubmitting}
+        isDisabled={isSubmitting}
       />
 
       <Field
@@ -53,7 +53,7 @@ export function ProfessionalDetails({ isSubmitting }: ProfessionalDetailsProps)
         name="companyRole"
         label="Company Role"
         component={Input}
-        disabled={isSubmitting}
+        isDisabled={isSubmitting}
       />
     </div>
   );
diff --git a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryDetails.test.tsx.snap b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryDetails.test.tsx.snap
index 03efb3ee2..6395de01b 100644
--- a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryDetails.test.tsx.snap
+++ b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryDetails.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`UpdateProfileForm/Steps/MilitaryDetails > should render in context of F
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className=" css-1mgllov-control"
+            className=" css-1s1bmlz-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
@@ -156,7 +156,7 @@ exports[`UpdateProfileForm/Steps/MilitaryDetails > should render in context of F
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className=" css-1mgllov-control"
+            className=" css-1s1bmlz-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
diff --git a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryStatus.test.tsx.snap b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryStatus.test.tsx.snap
index ba44bffbc..4b9bbed42 100644
--- a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryStatus.test.tsx.snap
+++ b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/MilitaryStatus.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`UpdateProfileForm/Steps/MilitaryStatus > should render in context of Fo
               className="css-1f43avz-a11yText-A11yText"
             />
             <div
-              className=" css-1mgllov-control"
+              className=" css-1s1bmlz-control"
               onMouseDown={[Function]}
               onTouchEnd={[Function]}
             >
diff --git a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/PersonalDetails.test.tsx.snap b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/PersonalDetails.test.tsx.snap
index 7821e4a0e..837e80238 100644
--- a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/PersonalDetails.test.tsx.snap
+++ b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/PersonalDetails.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`UpdateProfileForm/Steps/PersonalDetails > should render in context of F
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className=" css-1mgllov-control"
+            className=" css-1s1bmlz-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
@@ -156,7 +156,7 @@ exports[`UpdateProfileForm/Steps/PersonalDetails > should render in context of F
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className=" css-1mgllov-control"
+            className=" css-1s1bmlz-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
@@ -279,7 +279,7 @@ exports[`UpdateProfileForm/Steps/PersonalDetails > should render in context of F
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className=" css-1mgllov-control"
+            className=" css-1s1bmlz-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
@@ -401,7 +401,7 @@ exports[`UpdateProfileForm/Steps/PersonalDetails > should render in context of F
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className=" css-1mgllov-control"
+            className=" css-1s1bmlz-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
diff --git a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/ProfessionalDetails.test.tsx.snap b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/ProfessionalDetails.test.tsx.snap
index 2e4aa5953..3438935f1 100644
--- a/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/ProfessionalDetails.test.tsx.snap
+++ b/components/Forms/UpdateProfileForm/steps/__tests__/__snapshots__/ProfessionalDetails.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`UpdateProfileForm/Steps/ProfessionalDetails > should render in context
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className=" css-1mgllov-control"
+            className=" css-1s1bmlz-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
diff --git a/package.json b/package.json
index e3f3ea0fa..5fa386ff9 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "react-select": "^4.0.2",
     "react-youtube": "9.0.3",
     "tailwind-merge": "^2.6.0",
-    "yup": "^0.32.11"
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.26.7",
diff --git a/tailwind.config.js b/tailwind.config.js
index e81ef9702..520720ea6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
       xl: '1200px',
     },
     extend: {
+      // TODO: Move colors into theme (not extension), kebab-case keys, use hsl, and update naming
       colors: {
         themePrimary: '#3ed6f0',
         themeSecondary: '#252e3e',
@@ -28,6 +29,7 @@ module.exports = {
       },
       maxWidth: {
         girderWidth: '700px',
+        'prose-sm': '50ch',
       },
       fontFamily: {
         dinCondensed: '"DIN Condensed Bold"',
@@ -38,11 +40,7 @@ module.exports = {
   plugins: [
     plugin(({ matchUtilities, theme }) => {
       matchUtilities(
-        {
-          'text-shadow': value => ({
-            textShadow: value,
-          }),
-        },
+        { 'text-shadow': value => ({ textShadow: value }) },
         { values: theme('textShadow') },
       );
     }),
diff --git a/yarn.lock b/yarn.lock
index 8766d8a41..f6d013d09 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1379,7 +1379,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8"
   integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==
@@ -4590,7 +4590,7 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/lodash@^4.14.167", "@types/lodash@^4.14.175":
+"@types/lodash@^4.14.167":
   version "4.14.195"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
   integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
@@ -11760,11 +11760,6 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoclone@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
-  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
-
 nanoid@^3.3.4, nanoid@^3.3.6:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
@@ -13030,10 +13025,10 @@ prop-types@15.8.1, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, p
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-property-expr@^2.0.4:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
-  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+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-addr@~2.0.7:
   version "2.0.7"
@@ -15217,6 +15212,11 @@ timers-browserify@^2.0.12:
   dependencies:
     setimmediate "^1.0.4"
 
+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-invariant@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
@@ -16474,15 +16474,12 @@ youtube-player@5.5.2:
     load-script "^1.0.0"
     sister "^3.0.0"
 
-yup@^0.32.11:
-  version "0.32.11"
-  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
-  integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
+yup@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-1.6.1.tgz#8defcff9daaf9feac178029c0e13b616563ada4b"
+  integrity sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==
   dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@types/lodash" "^4.14.175"
-    lodash "^4.17.21"
-    lodash-es "^4.17.21"
-    nanoclone "^0.2.1"
-    property-expr "^2.0.4"
+    property-expr "^2.0.5"
+    tiny-case "^1.0.3"
     toposort "^2.0.2"
+    type-fest "^2.19.0"