diff --git a/apcd_cms/src/client/src/components/Admin/EditExceptionModal/EditExceptionModal.tsx b/apcd_cms/src/client/src/components/Admin/EditExceptionModal/EditExceptionModal.tsx
index 226ba6c8..ec621a46 100644
--- a/apcd_cms/src/client/src/components/Admin/EditExceptionModal/EditExceptionModal.tsx
+++ b/apcd_cms/src/client/src/components/Admin/EditExceptionModal/EditExceptionModal.tsx
@@ -21,8 +21,11 @@ import * as Yup from 'yup';
 import { ExceptionRow } from 'hooks/admin';
 import { formatDate } from 'utils/dateUtil';
 import styles from './EditExceptionModal.module.css';
+
+import QueryWrapper from 'core-wrappers/QueryWrapper';
 import FieldWrapper from 'core-wrappers/FieldWrapperFormik';
 import Button from 'core-components/Button';
+import Message from 'core-components/Message';
 
 interface EditRecordModalProps {
   isOpen: boolean;
@@ -53,6 +56,10 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
   const [showSuccessMessage, setShowSuccessMessage] = useState(false);
   const [showErrorMessage, setShowErrorMessage] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadingError, setLoadingError] = useState<Error | null>(
+    Error('Exception data is not avalible')
+  );
   const dateFormat: Intl.DateTimeFormatOptions = {
     year: 'numeric',
     month: 'short',
@@ -60,6 +67,10 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
   };
 
   if (!exception) return null;
+  if (isLoading) {
+    setIsLoading(false);
+    setLoadingError(null);
+  }
 
   // Use the custom hook to get form fields and validation
   const useFormFields = () => {
@@ -240,23 +251,52 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
         </ModalHeader>
         <ModalBody>
           <h4 className="modal-header">Edit Selected Exception</h4>
-          <FormikProvider value={formik}>
-            <form onSubmit={formik.handleSubmit}>
-              <Row>
-                {exception.request_type == 'Threshold' && (
+
+          <QueryWrapper isLoading={false} error={loadingError}>
+            <FormikProvider value={formik}>
+              <form onSubmit={formik.handleSubmit}>
+                <Row>
+                  {exception.request_type == 'Threshold' && (
+                    <Col md={3}>
+                      <FieldWrapper
+                        name="approved_threshold"
+                        label="Approved Threshold"
+                        required={true}
+                      >
+                        <Field
+                          type="text"
+                          name="approved_threshold"
+                          id="approved_threshold"
+                          value={
+                            formik.values.approved_threshold
+                              ? formik.values.approved_threshold
+                              : ''
+                          }
+                          onChange={formik.handleChange}
+                          onBlur={formik.handleBlur}
+                        />
+                        <small
+                          className="form-text text-muted"
+                          style={{ fontStyle: 'italic' }}
+                        >
+                          Requested: {exception.requested_threshold}%
+                        </small>
+                      </FieldWrapper>
+                    </Col>
+                  )}
                   <Col md={3}>
                     <FieldWrapper
-                      name="approved_threshold"
-                      label="Approved Threshold"
+                      name="approved_expiration_date"
+                      label="Expiration Date"
                       required={false}
                     >
                       <Field
-                        type="text"
-                        name="approved_threshold"
-                        id="approved_threshold"
+                        type="date"
+                        name="approved_expiration_date"
+                        id="approved_expiration_date"
                         value={
-                          formik.values.approved_threshold
-                            ? formik.values.approved_threshold
+                          formik.values.approved_expiration_date
+                            ? formik.values.approved_expiration_date
                             : ''
                         }
                         onChange={formik.handleChange}
@@ -266,144 +306,118 @@ const EditExceptionModal: React.FC<EditRecordModalProps> = ({
                         className="form-text text-muted"
                         style={{ fontStyle: 'italic' }}
                       >
-                        Requested: {exception.requested_threshold}%
+                        Current:{' '}
+                        {exception.approved_expiration_date
+                          ? new Date(
+                              exception.approved_expiration_date
+                            ).toLocaleDateString()
+                          : 'None'}
                       </small>
                     </FieldWrapper>
                   </Col>
-                )}
-                <Col md={3}>
-                  <FieldWrapper
-                    name="approved_expiration_date"
-                    label="Approved Expiration Date"
-                    required={false}
-                  >
-                    <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}
-                    />
-                    <small
-                      className="form-text text-muted"
-                      style={{ fontStyle: 'italic' }}
-                    >
-                      Current:{' '}
-                      {exception.approved_expiration_date
-                        ? new Date(
-                            exception.approved_expiration_date
-                          ).toLocaleDateString()
-                        : 'None'}
-                    </small>
-                  </FieldWrapper>
-                </Col>
-                <Col md={3}>
-                  <FieldWrapper
-                    name="status"
-                    label="Exception Status"
-                    required={false}
-                  >
-                    <Field
-                      as="select"
+                  <Col md={3}>
+                    <FieldWrapper
                       name="status"
-                      id="status"
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      value={formik.values.status}
+                      label="Exception Status"
+                      required={false}
                     >
-                      {statusOptions?.map(
-                        (val, index) =>
-                          val !== 'All' && (
-                            <option
-                              className="dropdown-text"
-                              key={index}
-                              value={val}
-                            >
-                              {val}
-                            </option>
-                          )
-                      )}
-                    </Field>
-                  </FieldWrapper>
-                </Col>
-                <Col md={3}>
-                  <FieldWrapper
-                    name="outcome"
-                    label="Exception Outcome"
-                    required={false}
-                  >
-                    <Field
-                      as="select"
+                      <Field
+                        as="select"
+                        name="status"
+                        id="status"
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        value={formik.values.status}
+                      >
+                        {statusOptions?.map(
+                          (val, index) =>
+                            val !== 'All' && (
+                              <option
+                                className="dropdown-text"
+                                key={index}
+                                value={val}
+                              >
+                                {val}
+                              </option>
+                            )
+                        )}
+                      </Field>
+                    </FieldWrapper>
+                  </Col>
+                  <Col md={3}>
+                    <FieldWrapper
                       name="outcome"
-                      id="outcome"
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      value={formik.values.outcome}
-                    >
-                      {outcomeOptions?.map((val, index) => (
-                        <option
-                          className="dropdown-text"
-                          key={index}
-                          value={val}
-                        >
-                          {val}
-                        </option>
-                      ))}
-                    </Field>
-                  </FieldWrapper>
-                </Col>
-                <Col md={6}>
-                  <FieldWrapper name="notes" label="Notes" required={false}>
-                    <Field
-                      as="textarea"
-                      name="notes"
-                      id="notes"
-                      rows="5"
-                      cols="40"
-                      maxLength="2000" // Set the maxLength attribute
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                    />
-                    <small
-                      className="form-text text-muted"
-                      style={{ fontStyle: 'italic' }}
+                      label="Exception Outcome"
+                      required={false}
                     >
-                      2000 character limit
-                    </small>
-                  </FieldWrapper>
-                </Col>
-              </Row>
-              <br />
-              <Alert color="success" isOpen={showSuccessMessage}>
-                Success: The exception data has been successfully updated.
-              </Alert>
-              <Alert color="danger" isOpen={showErrorMessage}>
-                Error: {errorMessage}
-              </Alert>
-              <Button
-                type="primary"
-                attr="submit"
-                disabled={!formik.dirty || formik.isSubmitting}
-              >
-                Submit
-              </Button>
-            </form>
-          </FormikProvider>
-          <hr />
-          <h4 className="modal-header">Current Exception Information</h4>
-          <div>
-            {currentException.map((field, index) => (
-              <Row key={index}>
-                <Col md={{ size: 4, offset: 1 }}>{field.label}:</Col>
-                <Col md={7}>{field.value}</Col>
-              </Row>
-            ))}
-          </div>
+                      <Field
+                        as="select"
+                        name="outcome"
+                        id="outcome"
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                        value={formik.values.outcome}
+                      >
+                        {outcomeOptions?.map((val, index) => (
+                          <option
+                            className="dropdown-text"
+                            key={index}
+                            value={val}
+                          >
+                            {val}
+                          </option>
+                        ))}
+                      </Field>
+                    </FieldWrapper>
+                  </Col>
+                  <Col md={6}>
+                    <FieldWrapper name="notes" label="Notes" required={false}>
+                      <Field
+                        as="textarea"
+                        name="notes"
+                        id="notes"
+                        rows="5"
+                        cols="40"
+                        maxLength="2000" // Set the maxLength attribute
+                        onChange={formik.handleChange}
+                        onBlur={formik.handleBlur}
+                      />
+                      <small
+                        className="form-text text-muted"
+                        style={{ fontStyle: 'italic' }}
+                      >
+                        2000 character limit
+                      </small>
+                    </FieldWrapper>
+                  </Col>
+                </Row>
+                <br />
+                <Alert color="success" isOpen={showSuccessMessage}>
+                  Success: The exception data has been successfully updated.
+                </Alert>
+                <Alert color="danger" isOpen={showErrorMessage}>
+                  Error: {errorMessage}
+                </Alert>
+                <Button
+                  type="primary"
+                  attr="submit"
+                  disabled={!formik.dirty || formik.isSubmitting}
+                >
+                  Submit
+                </Button>
+              </form>
+            </FormikProvider>
+            <hr />
+            <h4 className="modal-header">Current Exception Information</h4>
+            <div>
+              {currentException.map((field, index) => (
+                <Row key={index}>
+                  <Col md={{ size: 4, offset: 1 }}>{field.label}:</Col>
+                  <Col md={7}>{field.value}</Col>
+                </Row>
+              ))}
+            </div>
+          </QueryWrapper>
         </ModalBody>
       </Modal>
     </>
diff --git a/apcd_cms/src/client/src/components/Admin/ViewUsers/EditRecordModal.tsx b/apcd_cms/src/client/src/components/Admin/ViewUsers/EditRecordModal.tsx
index f55b65e3..1dcf73df 100644
--- a/apcd_cms/src/client/src/components/Admin/ViewUsers/EditRecordModal.tsx
+++ b/apcd_cms/src/client/src/components/Admin/ViewUsers/EditRecordModal.tsx
@@ -14,6 +14,8 @@ import * as Yup from 'yup';
 import { UserRow } from 'hooks/admin';
 import styles from './ViewUsers.module.scss';
 import { formatDate } from 'utils/dateUtil';
+import QueryWrapper from 'core-wrappers/QueryWrapper';
+import FieldWrapper from 'core-wrappers/FieldWrapperFormik';
 import Button from 'core-components/Button';
 
 interface EditRecordModalProps {
@@ -32,8 +34,17 @@ const EditRecordModal: React.FC<EditRecordModalProps> = ({
   const [successModalOpen, setSuccessModalOpen] = useState(false);
   const [errorModalOpen, setErrorModalOpen] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadingError, setLoadingError] = useState<Error | null>(
+    Error('User data is not avalible')
+  );
 
   if (!user) return null;
+  console.log('The user is ', user);
+  if (isLoading) {
+    setIsLoading(false);
+    setLoadingError(null);
+  }
 
   const initialValues: UserRow = {
     ...user,
@@ -118,146 +129,173 @@ const EditRecordModal: React.FC<EditRecordModalProps> = ({
         </ModalHeader>
         <ModalBody>
           <div className={styles.greyRectangle}>Edit Selected User</div>
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleSave}
-          >
-            {({ isSubmitting, dirty }) => (
-              <Form>
-                <Row>
-                  <Col md={3}>
-                    <FormGroup>
-                      <Label for="user_name" className={styles.customLabel}>
-                        <strong>Name</strong>
-                      </Label>
-                      <Field
-                        type="text"
-                        name="user_name"
-                        id="user_name"
-                        className={`form-control ${styles.viewRecord}`}
-                      />
-                      <ErrorMessage
-                        name="user_name"
-                        component="div"
-                        className="text-danger"
-                      />
-                    </FormGroup>
-                  </Col>
-                  <Col md={3}>
-                    <FormGroup>
-                      <Label for="user_email" className={styles.customLabel}>
-                        <strong>Email</strong>
-                      </Label>
-                      <Field
-                        type="email"
-                        name="user_email"
-                        id="user_email"
-                        className={`form-control ${styles.viewRecord}`}
-                      />
-                      <ErrorMessage
-                        name="user_email"
-                        component="div"
-                        className="text-danger"
-                      />
-                    </FormGroup>
-                  </Col>
-                  <Col md={2}>
-                    <FormGroup>
-                      <Label for="status" className={styles.customLabel}>
-                        <strong>Active Status</strong>
-                      </Label>
-                      <Field
-                        as="select"
-                        name="status"
-                        id="status"
-                        className={`form-control ${styles.viewRecord}`}
-                      >
-                        <option value="Active">Active</option>
-                        <option value="Inactive">Inactive</option>
-                      </Field>
-                      <ErrorMessage
-                        name="status"
-                        component="div"
-                        className="text-danger"
-                      />
-                    </FormGroup>
-                  </Col>
-                  <Col md={3}>
-                    <FormGroup>
-                      <Label for="role_name" className={styles.customLabel}>
-                        <strong>Role</strong>
-                      </Label>
-                      <Field
-                        as="select"
-                        name="role_name"
-                        id="role_name"
-                        className={`form-control ${styles.viewRecord}`}
-                      >
-                        <option value="SUBMITTER_USER">SUBMITTER_USER</option>
-                        <option value="SUBMITTER_ADMIN">SUBMITTER_ADMIN</option>
-                        <option value="APCD_ADMIN">APCD_ADMIN</option>
-                      </Field>
-                      <ErrorMessage
-                        name="role_name"
-                        component="div"
-                        className="text-danger"
-                      />
-                    </FormGroup>
+          <QueryWrapper isLoading={false} error={loadingError}>
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema}
+              onSubmit={handleSave}
+            >
+              {({ isSubmitting, dirty }) => (
+                <Form>
+                  <Row>
+                    <Col md={3}>
+                      <FormGroup>
+                        <FieldWrapper
+                          name="user_name"
+                          label="Name"
+                          className={styles.customLabel}
+                          required={true}
+                        >
+                          <Field
+                            type="text"
+                            name="user_name"
+                            id="user_name"
+                            className={`form-control ${styles.viewRecord}`}
+                          />
+                        </FieldWrapper>
+                        <ErrorMessage
+                          name="user_name"
+                          component="div"
+                          className="text-danger"
+                        />
+                      </FormGroup>
+                    </Col>
+                    <Col md={3}>
+                      <FormGroup>
+                        <FieldWrapper
+                          name="user_email"
+                          label="Email"
+                          className={styles.customLabel}
+                          required={true}
+                        >
+                          <Field
+                            type="email"
+                            name="user_email"
+                            id="user_email"
+                            className={`form-control ${styles.viewRecord}`}
+                          />
+                        </FieldWrapper>
+
+                        <ErrorMessage
+                          name="user_email"
+                          component="div"
+                          className="text-danger"
+                        />
+                      </FormGroup>
+                    </Col>
+                    <Col md={2}>
+                      <FormGroup>
+                        <FieldWrapper
+                          name="status"
+                          label="Status"
+                          className={styles.customLabel}
+                          required={true}
+                        >
+                          <Field
+                            as="select"
+                            name="status"
+                            id="status"
+                            className={`form-control ${styles.viewRecord}`}
+                          >
+                            <option value="Active">Active</option>
+                            <option value="Inactive">Inactive</option>
+                          </Field>
+                        </FieldWrapper>
+
+                        <ErrorMessage
+                          name="status"
+                          component="div"
+                          className="text-danger"
+                        />
+                      </FormGroup>
+                    </Col>
+                    <Col md={3}>
+                      <FormGroup>
+                        <FieldWrapper
+                          name="role_name"
+                          label="Role"
+                          className={styles.customLabel}
+                          required={true}
+                        >
+                          <Field
+                            as="select"
+                            name="role_name"
+                            id="role_name"
+                            className={`form-control ${styles.viewRecord}`}
+                          >
+                            <option value="SUBMITTER_USER">
+                              SUBMITTER_USER
+                            </option>
+                            <option value="SUBMITTER_ADMIN">
+                              SUBMITTER_ADMIN
+                            </option>
+                            <option value="APCD_ADMIN">APCD_ADMIN</option>
+                          </Field>
+                        </FieldWrapper>
+                        <ErrorMessage
+                          name="role_name"
+                          component="div"
+                          className="text-danger"
+                        />
+                      </FormGroup>
+                    </Col>
+                  </Row>
+                  <Row>
+                    <Col md={6}>
+                      <FormGroup>
+                        <FieldWrapper
+                          name="notes"
+                          label="Notes"
+                          className={styles.customLabel}
+                          required={false}
+                        ></FieldWrapper>
+                        <Field
+                          as="textarea"
+                          name="notes"
+                          id="notes"
+                          rows="5"
+                          maxLength="2000" // Set the maxLength attribute
+                          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 />
+                  <Button
+                    attr="submit"
+                    disabled={isSubmitting || !dirty}
+                    className={styles.customSubmitButton}
+                  >
+                    Submit
+                  </Button>
+                </Form>
+              )}
+            </Formik>
+            <hr />
+            <div className={styles.viewRecord}>
+              {userFields.map((field, index) => (
+                <Row key={index}>
+                  <Col md={6}>
+                    <p>{field.label}:</p>
                   </Col>
-                </Row>
-                <Row>
                   <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
-                        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>
+                    <p>{field.value}</p>
                   </Col>
                 </Row>
-                <br />
-                <Button
-                  attr="submit"
-                  disabled={isSubmitting || !dirty}
-                  className={styles.customSubmitButton}
-                >
-                  Submit
-                </Button>
-              </Form>
-            )}
-          </Formik>
-          <hr />
-          <div className={styles.viewRecord}>
-            {userFields.map((field, index) => (
-              <Row key={index}>
-                <Col md={6}>
-                  <p>{field.label}:</p>
-                </Col>
-                <Col md={6}>
-                  <p>{field.value}</p>
-                </Col>
-              </Row>
-            ))}
-          </div>
+              ))}
+            </div>
+          </QueryWrapper>
         </ModalBody>
       </Modal>
 
@@ -266,6 +304,7 @@ const EditRecordModal: React.FC<EditRecordModalProps> = ({
         toggle={() => setSuccessModalOpen(false)}
         className={styles.customModal}
       >
+        {/* Success must be in line with submit button*/}
         <div className={`modal-header ${styles.modalHeader}`}>
           <Label className={styles.customModalTitle}>Success</Label>
           <button