diff --git a/apcd-cms/src/apps/admin_extension/views.py b/apcd-cms/src/apps/admin_extension/views.py
index c27f0dbf..7c491002 100644
--- a/apcd-cms/src/apps/admin_extension/views.py
+++ b/apcd-cms/src/apps/admin_extension/views.py
@@ -158,7 +158,7 @@ def put(self, request, ext_id):
         updated_data['extension_id'] = ext_id
         updated_data['status'] = data['ext_status']
         updated_data['outcome'] = data['ext_outcome']
-        updated_data['approved-expiration-date'] = data['approved_expiration_date']
+        updated_data['approved_expiration_date'] = data['approved_expiration_date']
         updated_data['applicable_data_period'] = data['applicable_data_period']
         updated_data['notes'] = data['notes']
 
diff --git a/apcd-cms/src/apps/utils/apcd_database.py b/apcd-cms/src/apps/utils/apcd_database.py
index 4625d65d..7ffdc7bf 100644
--- a/apcd-cms/src/apps/utils/apcd_database.py
+++ b/apcd-cms/src/apps/utils/apcd_database.py
@@ -1023,10 +1023,10 @@ def update_extension(form):
         set_values = []
         # to set column names for query to the correct DB name
         columns = {
-            'applicable-data-period': 'applicable_data_period',
+            'applicable_data_period': 'applicable_data_period',
             'status': 'status',
             'outcome': 'outcome',
-            'approved-expiration-date': 'approved_expiration_date'
+            'approved_expiration_date': 'approved_expiration_date'
         }
         # To make sure fields are not blank. 
         # If they aren't, add column to update set operation
diff --git a/apcd-cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx b/apcd-cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
index f49a4788..89c28f44 100644
--- a/apcd-cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
+++ b/apcd-cms/src/client/src/components/Extensions/EditExtensionModal/EditExtensionModal.tsx
@@ -22,12 +22,15 @@ import {
 import { fetchUtil } from 'utils/fetchUtil';
 import * as Yup from 'yup';
 import { ExtensionRow } from 'hooks/admin';
+import { useEntities } from 'hooks/entities';
+import QueryWrapper from 'core-wrappers/QueryWrapper';
+import { convertPeriodLabelToApiValue } from 'utils/dateUtil';
 import styles from './EditExtensionModal.module.css';
 
 interface EditExtensionModalProps {
   isVisible: boolean;
   onClose: () => void;
-  extension: ExtensionEditRow | null;
+  extension: ExtensionRow | null;
   statusOptions: string[] | undefined;
   outcomeOptions: string[] | undefined;
   onEditSuccess?: (updatedExtension: ExtensionRow) => void;
@@ -66,6 +69,11 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
     { label: 'Exception Outcome', value: extension?.ext_outcome },
     { label: 'Exception Notes', value: extension?.notes || 'None' },
   ]);
+  const {
+    data: submitterData,
+    isLoading: entitiesLoading,
+    error: entitiesError,
+  } = useEntities();
 
   if (!extension) return null;
 
@@ -73,7 +81,7 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
   const useFormFields = () => {
     const initialValues: FormValues = {
       ...extension,
-      extension_id: extension?.ext_id,
+      ext_id: extension?.ext_id,
       notes: extension?.notes || 'None', // Set notes to 'None' if it is null
     };
 
@@ -193,190 +201,207 @@ const EditExtensionModal: React.FC<EditExtensionModalProps> = ({
             Success: The extension data has been successfully updated.
           </Alert>
           <div className={styles.greyRectangle}>Edit Selected Extension</div>
-          <FormikProvider value={formik}>
-            <form onSubmit={formik.handleSubmit}>
-              <Row>
-                <Col md={6}>
-                  <FormGroup>
-                    <Label
-                      for="applicable_data_period"
-                      className={styles.customLabel}
-                    >
-                      <strong>Applicable Data Period</strong>
-                    </Label>
-                    <Field
-                      type="text"
-                      name="applicable_data_period"
-                      id="applicable_data_period"
-                      value={
-                        formik.values.applicable_data_period
-                          ? formik.values.applicable_data_period
-                          : ''
-                      }
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      className={`form-control ${styles.viewRecord}`}
-                    />
-                    <small
-                      className="form-text text-muted"
-                      style={{ fontStyle: 'italic' }}
-                    >
-                      Current: {extension.applicable_data_period}
-                    </small>
-                    <ErrorMessage
-                      name="applicable_data_period"
-                      component="div"
-                      className="text-danger"
-                    />
-                  </FormGroup>
-                </Col>
-                <Col md={6}>
-                  <FormGroup>
-                    <Label
-                      for="approved_expiration_date"
-                      className={styles.customLabel}
-                    >
-                      <strong>Approved Expiration Date</strong>
-                    </Label>
-                    <Field
-                      type="date"
-                      name="approved_expiration_date"
-                      id="approved_expiration_date"
-                      value={
-                        formik.values.approved_expiration_date
-                          ? formik.values.approved_expiration_date
-                          : ''
-                      }
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      className={`form-control ${styles.viewRecord}`}
-                    />
-                    <small
-                      className="form-text text-muted"
-                      style={{ fontStyle: 'italic' }}
-                    >
-                      Current:{' '}
-                      {extension.approved_expiration_date
-                        ? new Date(
-                            extension.approved_expiration_date
-                          ).toLocaleDateString()
-                        : 'None'}
-                    </small>
-                    <ErrorMessage
-                      name="approved_expiration_date"
-                      component="div"
-                      className="text-danger"
-                    />
-                  </FormGroup>
-                </Col>
-                <Col md={6}>
-                  <FormGroup>
-                    <Label for="ext_status" className={styles.customLabel}>
-                      <strong>Extension Status</strong>
-                    </Label>
-                    <Field
-                      as="select"
-                      name="ext_status"
-                      id="ext_status"
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      className={`form-control ${styles.viewRecord}`}
-                      value={formik.values.ext_status}
-                    >
-                      {statusOptions?.map(
-                        (opt) =>
-                          opt.value !== 'All' && (
+          <QueryWrapper
+            isLoading={entitiesLoading}
+            error={entitiesError as Error}
+          >
+            <FormikProvider value={formik}>
+              <form onSubmit={formik.handleSubmit}>
+                <Row>
+                  <Col md={6}>
+                    <FormGroup>
+                      <Label
+                        for="applicable_data_period"
+                        className={styles.customLabel}
+                      >
+                        <strong>Applicable Data Period</strong>
+                      </Label>
+                      <Field
+                        as="select"
+                        name="applicable_data_period"
+                        id="applicable_data_period"
+                        value={convertPeriodLabelToApiValue(
+                          formik.values.applicable_data_period
+                        )}
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        className={`form-control ${styles.viewRecord}`}
+                      >
+                        {submitterData?.submitters
+                          .find(
+                            (s) =>
+                              s.submitter_id === Number(extension.submitter_id)
+                          )
+                          ?.data_periods?.map((item) => (
                             <option
-                              className="dropdown-text"
-                              key={opt.key}
-                              value={opt.value}
+                              key={item.data_period}
+                              value={item.data_period}
                             >
-                              {opt.value}
+                              {item.data_period}
                             </option>
-                          )
-                      )}
-                    </Field>
-                    <ErrorMessage
-                      name="ext_status"
-                      component="div"
-                      className="text-danger"
-                    />
-                  </FormGroup>
-                </Col>
-                <Col md={6}>
-                  <FormGroup>
-                    <Label for="ext_outcome" className={styles.customLabel}>
-                      <strong>Extension Outcome</strong>
-                    </Label>
-                    <Field
-                      as="select"
-                      name="ext_outcome"
-                      id="ext_outcome"
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      className={`form-control ${styles.viewRecord}`}
-                      value={formik.values.ext_outcome}
-                    >
-                      {outcomeOptions?.map((opt) => (
-                        <option
-                          className="dropdown-text"
-                          key={opt.key}
-                          value={opt.value}
-                        >
-                          {opt.value}
-                        </option>
-                      ))}
-                    </Field>
-                    <ErrorMessage
-                      name="ext_outcome"
-                      component="div"
-                      className="text-danger"
-                    />
-                  </FormGroup>
-                </Col>
-                <Col md={6}>
-                  <FormGroup>
-                    <Label for="notes" className={styles.customLabel}>
-                      <strong>Notes</strong>
-                    </Label>
-                    <Field
-                      as="textarea"
-                      name="notes"
-                      id="notes"
-                      rows="5"
-                      maxLength="2000" // Set the maxLength attribute
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      className={`form-control ${styles.viewRecord}`}
-                    />
-                    <small
-                      className="form-text text-muted"
-                      style={{ fontStyle: 'italic' }}
-                    >
-                      2000 character limit
-                    </small>
-                    <ErrorMessage
-                      name="notes"
-                      component="div"
-                      className="text-danger"
-                    />
-                  </FormGroup>
-                </Col>
-              </Row>
-              <br />
-              <Alert color="danger" isOpen={showErrorMessage}>
-                Error: {errorMessage}
-              </Alert>
-              <Button
-                type="submit"
-                color="primary"
-                disabled={formik.isSubmitting}
-                className={styles.customSubmitButton}
-              >
-                Submit
-              </Button>
-            </form>
-          </FormikProvider>
+                          ))}
+                      </Field>
+                      <small
+                        className="form-text text-muted"
+                        style={{ fontStyle: 'italic' }}
+                      >
+                        Current: {extension.applicable_data_period}
+                      </small>
+                      <ErrorMessage
+                        name="applicable_data_period"
+                        component="div"
+                        className="text-danger"
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col md={6}>
+                    <FormGroup>
+                      <Label
+                        for="approved_expiration_date"
+                        className={styles.customLabel}
+                      >
+                        <strong>Approved Expiration Date</strong>
+                      </Label>
+                      <Field
+                        type="date"
+                        name="approved_expiration_date"
+                        id="approved_expiration_date"
+                        value={
+                          formik.values.approved_expiration_date
+                            ? formik.values.approved_expiration_date
+                            : ''
+                        }
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        className={`form-control ${styles.viewRecord}`}
+                      />
+                      <small
+                        className="form-text text-muted"
+                        style={{ fontStyle: 'italic' }}
+                      >
+                        Current:{' '}
+                        {extension.approved_expiration_date
+                          ? new Date(
+                              extension.approved_expiration_date
+                            ).toLocaleDateString()
+                          : 'None'}
+                      </small>
+                      <ErrorMessage
+                        name="approved_expiration_date"
+                        component="div"
+                        className="text-danger"
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col md={6}>
+                    <FormGroup>
+                      <Label for="ext_status" className={styles.customLabel}>
+                        <strong>Extension Status</strong>
+                      </Label>
+                      <Field
+                        as="select"
+                        name="ext_status"
+                        id="ext_status"
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        className={`form-control ${styles.viewRecord}`}
+                        value={formik.values.ext_status}
+                      >
+                        {statusOptions?.map(
+                          (opt) =>
+                            opt.value !== 'All' && (
+                              <option
+                                className="dropdown-text"
+                                key={opt.key}
+                                value={opt.value}
+                              >
+                                {opt.value}
+                              </option>
+                            )
+                        )}
+                      </Field>
+                      <ErrorMessage
+                        name="ext_status"
+                        component="div"
+                        className="text-danger"
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col md={6}>
+                    <FormGroup>
+                      <Label for="ext_outcome" className={styles.customLabel}>
+                        <strong>Extension Outcome</strong>
+                      </Label>
+                      <Field
+                        as="select"
+                        name="ext_outcome"
+                        id="ext_outcome"
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        className={`form-control ${styles.viewRecord}`}
+                        value={formik.values.ext_outcome}
+                      >
+                        {outcomeOptions?.map((opt) => (
+                          <option
+                            className="dropdown-text"
+                            key={opt.key}
+                            value={opt.value}
+                          >
+                            {opt.value}
+                          </option>
+                        ))}
+                      </Field>
+                      <ErrorMessage
+                        name="ext_outcome"
+                        component="div"
+                        className="text-danger"
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col md={6}>
+                    <FormGroup>
+                      <Label for="notes" className={styles.customLabel}>
+                        <strong>Notes</strong>
+                      </Label>
+                      <Field
+                        as="textarea"
+                        name="notes"
+                        id="notes"
+                        rows="5"
+                        maxLength="2000" // Set the maxLength attribute
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        className={`form-control ${styles.viewRecord}`}
+                      />
+                      <small
+                        className="form-text text-muted"
+                        style={{ fontStyle: 'italic' }}
+                      >
+                        2000 character limit
+                      </small>
+                      <ErrorMessage
+                        name="notes"
+                        component="div"
+                        className="text-danger"
+                      />
+                    </FormGroup>
+                  </Col>
+                </Row>
+                <br />
+                <Alert color="danger" isOpen={showErrorMessage}>
+                  Error: {errorMessage}
+                </Alert>
+                <Button
+                  type="submit"
+                  color="primary"
+                  disabled={formik.isSubmitting}
+                  className={styles.customSubmitButton}
+                >
+                  Submit
+                </Button>
+              </form>
+            </FormikProvider>
+          </QueryWrapper>
           <hr />
           <div className={styles.viewRecord}>
             {userFields.map((field, index) => (
diff --git a/apcd-cms/src/client/src/utils/dateUtil.ts b/apcd-cms/src/client/src/utils/dateUtil.ts
index 1fd75db6..869fbb3d 100644
--- a/apcd-cms/src/client/src/utils/dateUtil.ts
+++ b/apcd-cms/src/client/src/utils/dateUtil.ts
@@ -13,3 +13,45 @@ export const formatDate = (dateString: string | number | Date): string => {
     hour12: true,
   }).format(date);
 };
+
+/**
+ *
+ * @param period string - Jan. 2024 as example
+ * @returns string. 2024-01 for Jan. 2024.
+ */
+export const convertPeriodLabelToApiValue = (period: string): string | null => {
+  // Return as-is if already in expected format
+  if (/^\d{4}-(0[1-9]|1[0-2])$/.test(period)) {
+    return period;
+  }
+  const monthMap: Record<string, string> = {
+    Jan: '01',
+    Feb: '02',
+    Mar: '03',
+    Apr: '04',
+    May: '05',
+    Jun: '06',
+    Jul: '07',
+    Aug: '08',
+    Sep: '09',
+    Oct: '10',
+    Nov: '11',
+    Dec: '12',
+  };
+
+  const match = period.match(/^([A-Za-z]{3})\.?\s(\d{4})$/);
+  if (!match) {
+    console.log(`Invalid period format: ${period}`);
+    return period;
+  }
+
+  const [_, month, year] = match;
+  const numericMonth = monthMap[month];
+
+  if (!numericMonth) {
+    console.log(`Invalid month: ${month} in ${period}`);
+    return period;
+  }
+
+  return `${year}-${numericMonth}`;
+};