diff --git a/ui/src/__tests__/pages/workflow/__snapshots__/admin.test.js.snap b/ui/src/__tests__/pages/workflow/__snapshots__/admin.test.js.snap
index dc4910d9d97..c65654ee84a 100644
--- a/ui/src/__tests__/pages/workflow/__snapshots__/admin.test.js.snap
+++ b/ui/src/__tests__/pages/workflow/__snapshots__/admin.test.js.snap
@@ -981,210 +981,6 @@ exports[`PendingApprovalPage should render 1`] = `
 }
 
 .emotion-115 {
-  background-color: #3570f40D;
-}
-
-.emotion-117 {
-  text-align: left;
-  vertical-align: middle;
-  word-break: break-all;
-  padding: 5px 0px 5px 15px;
-  white-space: nowrap;
-}
-
-.emotion-120 {
-  text-align: left;
-  vertical-align: middle;
-  word-break: break-all;
-  padding: 5px 0px 5px 0px;
-}
-
-.emotion-128 {
-  text-align: left;
-  vertical-align: middle;
-  padding: 5px 0px 5px 15px;
-}
-
-.emotion-138 {
-  font-family: Helvetica,Arial,sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-  box-sizing: border-box;
-  display: inline-flex;
-  -webkit-box-flex-flow: column nowrap;
-  -webkit-flex-flow: column nowrap;
-  -ms-flex-flow: column nowrap;
-  flex-flow: column nowrap;
-  position: relative;
-  width: 100%;
-}
-
-.emotion-138>textarea {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  background: rgba(53,112,244,0.05);
-  border-top: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  border-right: transparent;
-  border-left: transparent;
-  border-radius: 2px;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #303030;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  font: inherit;
-  height: auto;
-  line-height: 1.5;
-  margin: 0;
-  outline: none;
-  padding: 0.25em 0.75rem;
-  text-align: left;
-  -webkit-transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-  transition: background-color 0.2s ease-in-out,color 0.2s ease-in-out,border 0.2s ease-in-out;
-  width: auto;
-}
-
-.emotion-138>textarea::-webkit-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-138>textarea::-moz-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-138>textarea:-ms-input-placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-138>textarea::placeholder {
-  color: rgba(48,48,48,0.6);
-}
-
-.emotion-138>textarea:active,
-.emotion-138>textarea:focus {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #3570f4;
-  color: #303030;
-}
-
-.emotion-138>textarea:invalid {
-  background: rgba(53,112,244,0.05);
-  border-bottom: 2px solid #d01111;
-  color: #303030;
-}
-
-.emotion-138>textarea[disabled] {
-  background: rgba(48,48,48,0.05);
-  border-bottom: 2px solid rgba(48,48,48,0.05);
-  color: rgba(48,48,48,0.25);
-  cursor: not-allowed;
-}
-
-.emotion-138 .message {
-  font-size: 12px;
-  color: #303030;
-  left: 0;
-  line-height: 1.8;
-  position: absolute;
-  top: 2.571rem;
-}
-
-.emotion-143>div input {
-  position: relative;
-  font: 300 14px HelveticaNeue-Reg,Helvetica,Arial,sans-serif;
-  background-color: rgba(53, 112, 244, 0.05);
-  box-shadow: none;
-  color: rgb(48, 48, 48);
-  height: 16px;
-  min-width: 50px;
-  text-align: left;
-  border-width: 2px;
-  border-style: solid;
-  border-color: transparent;
-  border-image: initial;
-  border-radius: 2px;
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  margin: 5px 7px 0px 0px;
-  outline: none;
-  padding: 0.6em 12px;
-  -webkit-transition: background-color 0.2s ease-in-out 0s,color 0.2s ease-in-out 0s,border 0.2s ease-in-out 0s;
-  transition: background-color 0.2s ease-in-out 0s,color 0.2s ease-in-out 0s,border 0.2s ease-in-out 0s;
-  width: 10em;
-}
-
-.emotion-159 {
-  vertical-align: middle;
-  word-break: break-all;
-  text-align: center;
-  position: absolute;
-  width: 6em;
-  right: 6em;
-  height: 96px;
-  background-color: rgba(244, 248, 254, 1);
-  padding: 5px 0px 5px 14px;
-}
-
-.emotion-161 {
-  margin-top: 45px;
-}
-
-.emotion-163 {
-  fill: #1dad51;
-  cursor: pointer;
-  vertical-align: text-bottom;
-}
-
-.emotion-164 {
-  vertical-align: middle;
-  word-break: break-all;
-  text-align: center;
-  border-right: none;
-  position: absolute;
-  width: 6em;
-  right: 0em;
-  height: 96px;
-  background-color: rgba(244, 248, 254, 1);
-  padding: 5px 0px 5px 0px;
-}
-
-.emotion-168 {
-  fill: #ea0000;
-  cursor: pointer;
-  vertical-align: text-bottom;
-}
-
-.emotion-213 {
-  vertical-align: middle;
-  word-break: break-all;
-  text-align: center;
-  position: absolute;
-  width: 6em;
-  right: 6em;
-  height: 96px;
-  background-color: rgba(255, 255, 255, 1);
-  padding: 5px 0px 5px 14px;
-}
-
-.emotion-218 {
-  vertical-align: middle;
-  word-break: break-all;
-  text-align: center;
-  border-right: none;
-  position: absolute;
-  width: 6em;
-  right: 0em;
-  height: 96px;
-  background-color: rgba(255, 255, 255, 1);
-  padding: 5px 0px 5px 0px;
-}
-
-.emotion-223 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1207,7 +1003,7 @@ exports[`PendingApprovalPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-225 {
+.emotion-117 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
@@ -1300,10 +1096,10 @@ exports[`PendingApprovalPage should render 1`] = `
             width="25px"
           >
             <title>
-              notification-solid
+              notification
             </title>
             <path
-              d="M925.867 627.2l-68.267-68.267c-15.132-16.256-24.706-37.864-25.595-61.692l-0.005-0.174v-134.4c0-172.8-115.2-320-320-320s-320 142.933-320 320v149.333c-0.424 14.075-6.029 26.765-14.962 36.297l0.028-0.030-78.933 78.933c-7.763 7.612-12.628 18.155-12.8 29.835l-0 0.032v153.6c0 23.564 19.103 42.667 42.667 42.667v0h236.8c12.454 70.953 73.611 124.182 147.2 124.182s134.746-53.229 147.069-123.285l0.131-0.897h236.8c23.564 0 42.667-19.103 42.667-42.667v0-153.6c-0.172-11.712-5.037-22.255-12.793-29.86l-0.007-0.007z"
+              d="M925.867 627.2l-68.267-68.267c-15.132-16.256-24.706-37.864-25.595-61.692l-0.005-0.174v-134.4c0-172.8-115.2-320-320-320s-320 142.933-320 320v149.333c-0.424 14.075-6.029 26.765-14.962 36.297l0.028-0.030-78.933 78.933c-7.763 7.612-12.628 18.155-12.8 29.835l-0 0.032v153.6c0 23.564 19.103 42.667 42.667 42.667v0h236.8c12.454 70.953 73.611 124.182 147.2 124.182s134.746-53.229 147.069-123.285l0.131-0.897h236.8c23.564 0 42.667-19.103 42.667-42.667v0-153.6c-0.172-11.712-5.037-22.255-12.793-29.86l-0.007-0.007zM853.333 768h-682.667v-91.733l66.133-68.267c24.782-24.511 40.224-58.423 40.533-95.941l0-0.059v-149.333c0-113.067 61.867-234.667 234.667-234.667s234.667 125.867 234.667 234.667v134.4c0.879 47.11 19.381 89.736 49.168 121.71l-0.102-0.11 57.6 57.6z"
             />
           </svg>
           <div
@@ -1374,7 +1170,7 @@ exports[`PendingApprovalPage should render 1`] = `
                     Pending Members Approval 
                     <br />
                     (
-                    Admin View) *
+                    Admin View)
                   </span>
                 </div>
                 <div
@@ -1681,490 +1477,7 @@ exports[`PendingApprovalPage should render 1`] = `
                     </th>
                   </tr>
                 </thead>
-                <tbody>
-                  <tr
-                    class="emotion-115 emotion-116"
-                    color="#3570f40D"
-                    data-testid="pending-approval-table-row"
-                  >
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      <div
-                        class="emotion-41 denali-checkbox"
-                        data-testid="checkbox-wrapper"
-                      >
-                        <input
-                          data-partial="false"
-                          id="home.domain1user.test1testrole1"
-                          name="checkbox-row"
-                          type="checkbox"
-                        />
-                        <label
-                          for="home.domain1user.test1testrole1"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-120 emotion-121"
-                    >
-                      home.domain1
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      role
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    />
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      testrole1
-                    </td>
-                    <td
-                      class="emotion-128 emotion-129"
-                    >
-                      <p>
-                        Test
-                      </p>
-                      <p>
-                        (
-                        user.test1
-                        )
-                      </p>
-                    </td>
-                    <td
-                      class="emotion-128 emotion-129"
-                      colspan="2"
-                    >
-                      testing1
-                    </td>
-                    <td
-                      class="emotion-128 emotion-129"
-                    >
-                      <p>
-                        Test
-                      </p>
-                      <p>
-                        (
-                        user.craman
-                        )
-                      </p>
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      2022-02-15 18:14 UTC
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      <div
-                        class="emotion-138 denali-textarea emotion-57 emotion-140"
-                        data-testid="textarea-wrapper"
-                      >
-                        <textarea
-                          data-testid="textarea"
-                          id="home.domain1user.test1testrole1"
-                          placeholder="Justification"
-                          rows="4"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      <div
-                        class="emotion-143 emotion-144"
-                      >
-                        <div
-                          class="fp-home_domain1user_test1testrole1expiry emotion-63 emotion-64"
-                        >
-                          <input
-                            class="flatpickr-input"
-                            data-input=""
-                            data-testid="flatPicker"
-                            placeholder="Expiration (Optional)"
-                            type="hidden"
-                            value=""
-                          />
-                          <input
-                            class=" form-control input"
-                            placeholder="Expiration (Optional)"
-                            readonly="readonly"
-                            tabindex="0"
-                            type="text"
-                          />
-                          <a
-                            class="emotion-65 emotion-66"
-                            data-clear=""
-                          >
-                            <svg
-                              class="emotion-67"
-                              data-testid="icon"
-                              data-wdio=""
-                              height="1.25em"
-                              id=""
-                              viewBox="0 0 1024 1024"
-                              width="1.25em"
-                            >
-                              <title>
-                                close
-                              </title>
-                              <path
-                                d="M571.733 512l226.133-224c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042-226.133 226.133-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 226.133 224-226.133 224c-7.901 8.071-12.777 19.131-12.777 31.33 0 9.87 3.192 18.994 8.599 26.397l-0.088-0.127c7.382 10.88 19.691 17.934 33.649 17.934 12.060 0 22.89-5.267 30.315-13.626l0.036-0.042 226.133-226.133 226.133 226.133c7.461 8.401 18.291 13.668 30.351 13.668 13.957 0 26.267-7.055 33.558-17.793l0.091-0.142c5.319-7.276 8.51-16.4 8.51-26.27 0-12.199-4.876-23.259-12.785-31.338l0.008 0.008z"
-                              />
-                            </svg>
-                          </a>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      <div
-                        class="emotion-143 emotion-144"
-                      >
-                        <div
-                          class="fp-home_domain1user_test1testrole1reviewReminder emotion-63 emotion-64"
-                        >
-                          <input
-                            class="flatpickr-input"
-                            data-input=""
-                            data-testid="flatPicker"
-                            placeholder="Reminder (Optional)"
-                            type="hidden"
-                            value=""
-                          />
-                          <input
-                            class=" form-control input"
-                            placeholder="Reminder (Optional)"
-                            readonly="readonly"
-                            tabindex="0"
-                            type="text"
-                          />
-                          <a
-                            class="emotion-65 emotion-66"
-                            data-clear=""
-                          >
-                            <svg
-                              class="emotion-67"
-                              data-testid="icon"
-                              data-wdio=""
-                              height="1.25em"
-                              id=""
-                              viewBox="0 0 1024 1024"
-                              width="1.25em"
-                            >
-                              <title>
-                                close
-                              </title>
-                              <path
-                                d="M571.733 512l226.133-224c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042-226.133 226.133-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 226.133 224-226.133 224c-7.901 8.071-12.777 19.131-12.777 31.33 0 9.87 3.192 18.994 8.599 26.397l-0.088-0.127c7.382 10.88 19.691 17.934 33.649 17.934 12.060 0 22.89-5.267 30.315-13.626l0.036-0.042 226.133-226.133 226.133 226.133c7.461 8.401 18.291 13.668 30.351 13.668 13.957 0 26.267-7.055 33.558-17.793l0.091-0.142c5.319-7.276 8.51-16.4 8.51-26.27 0-12.199-4.876-23.259-12.785-31.338l0.008 0.008z"
-                              />
-                            </svg>
-                          </a>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-159 emotion-160"
-                      color="rgba(244, 248, 254, 1)"
-                    >
-                      <div
-                        class="emotion-161 emotion-162"
-                      >
-                        <svg
-                          class="emotion-163"
-                          data-testid="icon"
-                          data-wdio=""
-                          height="1.25em"
-                          id=""
-                          viewBox="0 0 1024 1024"
-                          width="1.25em"
-                        >
-                          <title>
-                            check-circle
-                          </title>
-                          <path
-                            d="M512 128c212.077 0 384 171.923 384 384s-171.923 384-384 384c-212.077 0-384-171.923-384-384v0c0-212.077 171.923-384 384-384v0zM512 42.667c-259.206 0-469.333 210.128-469.333 469.333s210.128 469.333 469.333 469.333c259.206 0 469.333-210.128 469.333-469.333v0c0-259.206-210.128-469.333-469.333-469.333v0z"
-                          />
-                          <path
-                            d="M396.16 691.413l-126.293-126.293c-8.506-8.066-13.798-19.448-13.798-32.066 0-9.118 2.763-17.59 7.498-24.625l-0.1 0.158c7.83-10.919 20.483-17.949 34.778-17.949 11.841 0 22.556 4.824 30.286 12.613l0.003 0.003 98.133 97.707 268.373-268.373c7.549-6.884 17.635-11.1 28.706-11.1 23.564 0 42.667 19.103 42.667 42.667 0 11.017-4.176 21.060-11.031 28.63l0.032-0.036-298.667 298.667c-7.733 7.795-18.45 12.621-30.293 12.621s-22.56-4.826-30.291-12.618l-0.003-0.003z"
-                          />
-                        </svg>
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-164 emotion-165"
-                      color="rgba(244, 248, 254, 1)"
-                    >
-                      <div
-                        class="emotion-161 emotion-162"
-                      >
-                        <svg
-                          class="emotion-168"
-                          data-testid="icon"
-                          data-wdio=""
-                          height="1.25em"
-                          id=""
-                          viewBox="0 0 1024 1024"
-                          width="1.25em"
-                        >
-                          <title>
-                            decline
-                          </title>
-                          <path
-                            d="M512 42.667c-259.206 0-469.333 210.128-469.333 469.333s210.128 469.333 469.333 469.333c259.206 0 469.333-210.128 469.333-469.333v0c0.003-0.635 0.005-1.387 0.005-2.138 0-258.027-209.173-467.2-467.2-467.2-0.752 0-1.504 0.002-2.255 0.005l0.117-0zM130.133 467.2c22.95-192.169 184.962-339.729 381.44-339.729 90.864 0 174.356 31.559 240.114 84.314l-0.754-0.585-539.733 539.733c-52.076-65.227-83.563-148.885-83.563-239.896 0-15.446 0.907-30.681 2.671-45.653l-0.174 1.816zM554.667 893.867c-12.252 1.372-26.457 2.154-40.844 2.154-92.264 0-177.012-32.182-243.63-85.933l0.741 0.579 539.733-537.6c53.445 64.395 85.876 147.901 85.876 238.983 0 15.772-0.972 31.316-2.861 46.577l0.184-1.826c-22.136 177.253-161.672 316.060-337.376 336.891l-1.824 0.176z"
-                          />
-                        </svg>
-                      </div>
-                    </td>
-                  </tr>
-                  <tr
-                    class="emotion-169 emotion-116"
-                    color=""
-                    data-testid="pending-approval-table-row"
-                  >
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      <div
-                        class="emotion-41 denali-checkbox"
-                        data-testid="checkbox-wrapper"
-                      >
-                        <input
-                          data-partial="false"
-                          id="home.domain2user.test2add-test"
-                          name="checkbox-row"
-                          type="checkbox"
-                        />
-                        <label
-                          for="home.domain2user.test2add-test"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-120 emotion-121"
-                    >
-                      home.domain2
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      role
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    />
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      add-test
-                    </td>
-                    <td
-                      class="emotion-128 emotion-129"
-                    >
-                      <p>
-                        Test
-                      </p>
-                      <p>
-                        (
-                        user.test2
-                        )
-                      </p>
-                    </td>
-                    <td
-                      class="emotion-128 emotion-129"
-                      colspan="2"
-                    >
-                      test
-                    </td>
-                    <td
-                      class="emotion-128 emotion-129"
-                    >
-                      <p>
-                        Test
-                      </p>
-                      <p>
-                        (
-                        user.craman
-                        )
-                      </p>
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      2022-02-16 16:02 UTC
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      <div
-                        class="emotion-138 denali-textarea emotion-57 emotion-140"
-                        data-testid="textarea-wrapper"
-                      >
-                        <textarea
-                          data-testid="textarea"
-                          id="home.domain2user.test2add-test"
-                          placeholder="Justification"
-                          rows="4"
-                        />
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      <div
-                        class="emotion-143 emotion-144"
-                      >
-                        <div
-                          class="fp-home_domain2user_test2add_testexpiry emotion-63 emotion-64"
-                        >
-                          <input
-                            class="flatpickr-input"
-                            data-input=""
-                            data-testid="flatPicker"
-                            placeholder="Expiration (Optional)"
-                            type="hidden"
-                            value=""
-                          />
-                          <input
-                            class=" form-control input"
-                            placeholder="Expiration (Optional)"
-                            readonly="readonly"
-                            tabindex="0"
-                            type="text"
-                          />
-                          <a
-                            class="emotion-65 emotion-66"
-                            data-clear=""
-                          >
-                            <svg
-                              class="emotion-67"
-                              data-testid="icon"
-                              data-wdio=""
-                              height="1.25em"
-                              id=""
-                              viewBox="0 0 1024 1024"
-                              width="1.25em"
-                            >
-                              <title>
-                                close
-                              </title>
-                              <path
-                                d="M571.733 512l226.133-224c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042-226.133 226.133-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 226.133 224-226.133 224c-7.901 8.071-12.777 19.131-12.777 31.33 0 9.87 3.192 18.994 8.599 26.397l-0.088-0.127c7.382 10.88 19.691 17.934 33.649 17.934 12.060 0 22.89-5.267 30.315-13.626l0.036-0.042 226.133-226.133 226.133 226.133c7.461 8.401 18.291 13.668 30.351 13.668 13.957 0 26.267-7.055 33.558-17.793l0.091-0.142c5.319-7.276 8.51-16.4 8.51-26.27 0-12.199-4.876-23.259-12.785-31.338l0.008 0.008z"
-                              />
-                            </svg>
-                          </a>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-117 emotion-118"
-                    >
-                      <div
-                        class="emotion-143 emotion-144"
-                      >
-                        <div
-                          class="fp-home_domain2user_test2add_testreviewReminder emotion-63 emotion-64"
-                        >
-                          <input
-                            class="flatpickr-input"
-                            data-input=""
-                            data-testid="flatPicker"
-                            placeholder="Reminder (Optional)"
-                            type="hidden"
-                            value=""
-                          />
-                          <input
-                            class=" form-control input"
-                            placeholder="Reminder (Optional)"
-                            readonly="readonly"
-                            tabindex="0"
-                            type="text"
-                          />
-                          <a
-                            class="emotion-65 emotion-66"
-                            data-clear=""
-                          >
-                            <svg
-                              class="emotion-67"
-                              data-testid="icon"
-                              data-wdio=""
-                              height="1.25em"
-                              id=""
-                              viewBox="0 0 1024 1024"
-                              width="1.25em"
-                            >
-                              <title>
-                                close
-                              </title>
-                              <path
-                                d="M571.733 512l226.133-224c7.901-8.071 12.777-19.131 12.777-31.33 0-9.87-3.192-18.994-8.599-26.397l0.088 0.127c-7.382-10.88-19.691-17.934-33.649-17.934-12.060 0-22.89 5.267-30.315 13.626l-0.036 0.042-226.133 226.133-226.133-226.133c-7.461-8.401-18.291-13.668-30.351-13.668-13.957 0-26.267 7.055-33.558 17.793l-0.091 0.142c-5.319 7.276-8.51 16.4-8.51 26.27 0 12.199 4.876 23.259 12.785 31.338l-0.008-0.008 226.133 224-226.133 224c-7.901 8.071-12.777 19.131-12.777 31.33 0 9.87 3.192 18.994 8.599 26.397l-0.088-0.127c7.382 10.88 19.691 17.934 33.649 17.934 12.060 0 22.89-5.267 30.315-13.626l0.036-0.042 226.133-226.133 226.133 226.133c7.461 8.401 18.291 13.668 30.351 13.668 13.957 0 26.267-7.055 33.558-17.793l0.091-0.142c5.319-7.276 8.51-16.4 8.51-26.27 0-12.199-4.876-23.259-12.785-31.338l0.008 0.008z"
-                              />
-                            </svg>
-                          </a>
-                        </div>
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-213 emotion-160"
-                      color="rgba(255, 255, 255, 1)"
-                    >
-                      <div
-                        class="emotion-161 emotion-162"
-                      >
-                        <svg
-                          class="emotion-163"
-                          data-testid="icon"
-                          data-wdio=""
-                          height="1.25em"
-                          id=""
-                          viewBox="0 0 1024 1024"
-                          width="1.25em"
-                        >
-                          <title>
-                            check-circle
-                          </title>
-                          <path
-                            d="M512 128c212.077 0 384 171.923 384 384s-171.923 384-384 384c-212.077 0-384-171.923-384-384v0c0-212.077 171.923-384 384-384v0zM512 42.667c-259.206 0-469.333 210.128-469.333 469.333s210.128 469.333 469.333 469.333c259.206 0 469.333-210.128 469.333-469.333v0c0-259.206-210.128-469.333-469.333-469.333v0z"
-                          />
-                          <path
-                            d="M396.16 691.413l-126.293-126.293c-8.506-8.066-13.798-19.448-13.798-32.066 0-9.118 2.763-17.59 7.498-24.625l-0.1 0.158c7.83-10.919 20.483-17.949 34.778-17.949 11.841 0 22.556 4.824 30.286 12.613l0.003 0.003 98.133 97.707 268.373-268.373c7.549-6.884 17.635-11.1 28.706-11.1 23.564 0 42.667 19.103 42.667 42.667 0 11.017-4.176 21.060-11.031 28.63l0.032-0.036-298.667 298.667c-7.733 7.795-18.45 12.621-30.293 12.621s-22.56-4.826-30.291-12.618l-0.003-0.003z"
-                          />
-                        </svg>
-                      </div>
-                    </td>
-                    <td
-                      class="emotion-218 emotion-165"
-                      color="rgba(255, 255, 255, 1)"
-                    >
-                      <div
-                        class="emotion-161 emotion-162"
-                      >
-                        <svg
-                          class="emotion-168"
-                          data-testid="icon"
-                          data-wdio=""
-                          height="1.25em"
-                          id=""
-                          viewBox="0 0 1024 1024"
-                          width="1.25em"
-                        >
-                          <title>
-                            decline
-                          </title>
-                          <path
-                            d="M512 42.667c-259.206 0-469.333 210.128-469.333 469.333s210.128 469.333 469.333 469.333c259.206 0 469.333-210.128 469.333-469.333v0c0.003-0.635 0.005-1.387 0.005-2.138 0-258.027-209.173-467.2-467.2-467.2-0.752 0-1.504 0.002-2.255 0.005l0.117-0zM130.133 467.2c22.95-192.169 184.962-339.729 381.44-339.729 90.864 0 174.356 31.559 240.114 84.314l-0.754-0.585-539.733 539.733c-52.076-65.227-83.563-148.885-83.563-239.896 0-15.446 0.907-30.681 2.671-45.653l-0.174 1.816zM554.667 893.867c-12.252 1.372-26.457 2.154-40.844 2.154-92.264 0-177.012-32.182-243.63-85.933l0.741 0.579 539.733-537.6c53.445 64.395 85.876 147.901 85.876 238.983 0 15.772-0.972 31.316-2.861 46.577l0.184-1.826c-22.136 177.253-161.672 316.060-337.376 336.891l-1.824 0.176z"
-                          />
-                        </svg>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
+                <tbody />
               </table>
             </div>
           </div>
@@ -2174,11 +1487,11 @@ exports[`PendingApprovalPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-223 emotion-224"
+          class="emotion-115 emotion-116"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-225"
+            class="emotion-117"
             data-testid="icon"
             data-wdio=""
             height="1em"
diff --git a/ui/src/__tests__/pages/workflow/__snapshots__/domain.test.js.snap b/ui/src/__tests__/pages/workflow/__snapshots__/domain.test.js.snap
index 9f787f73878..925c17023cc 100644
--- a/ui/src/__tests__/pages/workflow/__snapshots__/domain.test.js.snap
+++ b/ui/src/__tests__/pages/workflow/__snapshots__/domain.test.js.snap
@@ -1407,10 +1407,10 @@ exports[`PendingApprovalPage should render 1`] = `
             width="25px"
           >
             <title>
-              notification-solid
+              notification
             </title>
             <path
-              d="M925.867 627.2l-68.267-68.267c-15.132-16.256-24.706-37.864-25.595-61.692l-0.005-0.174v-134.4c0-172.8-115.2-320-320-320s-320 142.933-320 320v149.333c-0.424 14.075-6.029 26.765-14.962 36.297l0.028-0.030-78.933 78.933c-7.763 7.612-12.628 18.155-12.8 29.835l-0 0.032v153.6c0 23.564 19.103 42.667 42.667 42.667v0h236.8c12.454 70.953 73.611 124.182 147.2 124.182s134.746-53.229 147.069-123.285l0.131-0.897h236.8c23.564 0 42.667-19.103 42.667-42.667v0-153.6c-0.172-11.712-5.037-22.255-12.793-29.86l-0.007-0.007z"
+              d="M925.867 627.2l-68.267-68.267c-15.132-16.256-24.706-37.864-25.595-61.692l-0.005-0.174v-134.4c0-172.8-115.2-320-320-320s-320 142.933-320 320v149.333c-0.424 14.075-6.029 26.765-14.962 36.297l0.028-0.030-78.933 78.933c-7.763 7.612-12.628 18.155-12.8 29.835l-0 0.032v153.6c0 23.564 19.103 42.667 42.667 42.667v0h236.8c12.454 70.953 73.611 124.182 147.2 124.182s134.746-53.229 147.069-123.285l0.131-0.897h236.8c23.564 0 42.667-19.103 42.667-42.667v0-153.6c-0.172-11.712-5.037-22.255-12.793-29.86l-0.007-0.007zM853.333 768h-682.667v-91.733l66.133-68.267c24.782-24.511 40.224-58.423 40.533-95.941l0-0.059v-149.333c0-113.067 61.867-234.667 234.667-234.667s234.667 125.867 234.667 234.667v134.4c0.879 47.11 19.381 89.736 49.168 121.71l-0.102-0.11 57.6 57.6z"
             />
           </svg>
           <div
@@ -1481,7 +1481,7 @@ exports[`PendingApprovalPage should render 1`] = `
                     Pending Members Approval 
                     <br />
                     (
-                    Admin View) *
+                    Admin View)
                   </span>
                 </div>
                 <div
diff --git a/ui/src/components/pending-approval/PendingApprovalTable.js b/ui/src/components/pending-approval/PendingApprovalTable.js
index df1f330156f..51a748af237 100644
--- a/ui/src/components/pending-approval/PendingApprovalTable.js
+++ b/ui/src/components/pending-approval/PendingApprovalTable.js
@@ -415,6 +415,8 @@ class PendingApprovalTable extends React.Component {
                         pendingState={this.state.pendingMap[key].pendingState}
                         view={view}
                         timeZone={this.props.timeZone}
+                        selfServe={pending.selfServe}
+                        auditRef={pending.auditRef}
                     />
                 );
             });
diff --git a/ui/src/components/pending-approval/PendingApprovalTableRow.js b/ui/src/components/pending-approval/PendingApprovalTableRow.js
index a0e377d4544..fc20aa3bc7b 100644
--- a/ui/src/components/pending-approval/PendingApprovalTableRow.js
+++ b/ui/src/components/pending-approval/PendingApprovalTableRow.js
@@ -215,7 +215,10 @@ export default class PendingApprovalTableRow extends React.Component {
                         onChange={(event) => {
                             this.props.auditRefChange(key, event);
                         }}
-                    />
+                        {...(this.props.selfServe && {
+                            defaultValue: this.props.auditRef,
+                        })}
+                    ></StyledTextArea>
                     {this.props.auditRefMissing ? (
                         <ErrorDiv>Justification is Required</ErrorDiv>
                     ) : null}
diff --git a/ui/src/redux/actions/user.js b/ui/src/redux/actions/user.js
index 48c3755e5dc..508d107d575 100644
--- a/ui/src/redux/actions/user.js
+++ b/ui/src/redux/actions/user.js
@@ -43,3 +43,30 @@ export const addUsersToStore = (userList) => ({
         userList: userList,
     },
 });
+
+export const STORE_PENDING_ROLE = 'STORE_PENDING_ROLE';
+export const storePendingRole = (role, domainName, roleName) => {
+    console.log('ROLE: ', {
+        type: STORE_PENDING_ROLE,
+        payload: {
+            role,
+            domainName,
+            roleName,
+        },
+    });
+
+    return {
+        type: STORE_PENDING_ROLE,
+        payload: {
+            role,
+            domainName,
+            roleName,
+        },
+    };
+};
+
+export const STORE_PENDING_GROUP = 'STORE_PENDING_GROUP';
+export const storePendingGroup = (group, domainName, groupName) => ({
+    type: STORE_PENDING_GROUP,
+    payload: { group, domainName, groupName },
+});
diff --git a/ui/src/redux/reducers/user.js b/ui/src/redux/reducers/user.js
index ff5de0aca81..2d69b2c9c5c 100644
--- a/ui/src/redux/reducers/user.js
+++ b/ui/src/redux/reducers/user.js
@@ -18,6 +18,8 @@ import {
     ADD_ALL_USERS,
     LOAD_PENDING_MEMBERS,
     LOAD_RESOURCE_ACCESS_LIST,
+    STORE_PENDING_GROUP,
+    STORE_PENDING_ROLE,
 } from '../actions/user';
 import {
     PROCESS_GROUP_PENDING_MEMBERS_TO_STORE,
@@ -72,6 +74,26 @@ export const user = (state = {}, action) => {
                 draft.userList = userList;
             });
         }
+        case STORE_PENDING_ROLE: {
+            return produce(state, (draft) => {
+                if (!draft.pendingMemberRoles) {
+                    draft.pendingMemberRoles = {};
+                }
+                draft.pendingMemberRoles[
+                    `${payload.domainName}:${payload.roleName}`
+                ] = payload.role;
+            });
+        }
+        case STORE_PENDING_GROUP: {
+            return produce(state, (draft) => {
+                if (!draft.pendingMemberGroups) {
+                    draft.pendingMemberGroups = {};
+                }
+                draft.pendingMemberGroups[
+                    `${payload.domainName}:${payload.groupName}`
+                ] = payload.group;
+            });
+        }
         default:
             return state;
     }
diff --git a/ui/src/redux/selectors/groups.js b/ui/src/redux/selectors/groups.js
index 396b0e7467b..2345c47f26e 100644
--- a/ui/src/redux/selectors/groups.js
+++ b/ui/src/redux/selectors/groups.js
@@ -30,7 +30,8 @@ export const selectGroups = (state) => {
 };
 
 export const selectGroup = (state, domainName, groupName) => {
-    return state.groups.groups &&
+    return state.groups &&
+        state.groups.groups &&
         state.groups.groups[getFullName(domainName, groupDelimiter, groupName)]
         ? state.groups.groups[
               getFullName(domainName, groupDelimiter, groupName)
@@ -43,7 +44,8 @@ export const thunkSelectGroupMembers = (state, domainName, groupName) => {
 };
 
 export const selectGroupMembers = (state, domainName, groupName) => {
-    return state.groups.groups &&
+    return state.groups &&
+        state.groups.groups &&
         state.groups.groups[getFullName(domainName, groupDelimiter, groupName)]
         ? membersMapsToList(
               state.groups.groups[
diff --git a/ui/src/redux/selectors/roles.js b/ui/src/redux/selectors/roles.js
index f84fd57be13..9c49dfa499e 100644
--- a/ui/src/redux/selectors/roles.js
+++ b/ui/src/redux/selectors/roles.js
@@ -81,14 +81,16 @@ export const selectRoleUsers = (state) => {
 };
 
 export const selectRole = (state, domainName, roleName) => {
-    return state.roles.roles &&
+    return state.roles &&
+        state.roles.roles &&
         state.roles.roles[getFullName(domainName, roleDelimiter, roleName)]
         ? state.roles.roles[getFullName(domainName, roleDelimiter, roleName)]
         : {};
 };
 
 export const selectRoleMembers = (state, domainName, roleName) => {
-    return state.roles.roles &&
+    return state.roles &&
+        state.roles.roles &&
         state.roles.roles[getFullName(domainName, roleDelimiter, roleName)] &&
         state.roles.roles[getFullName(domainName, roleDelimiter, roleName)]
             .roleMembers
diff --git a/ui/src/redux/selectors/user.js b/ui/src/redux/selectors/user.js
index b0693d9c731..9526fc04c42 100644
--- a/ui/src/redux/selectors/user.js
+++ b/ui/src/redux/selectors/user.js
@@ -22,3 +22,8 @@ export const selectUserResourceAccessList = (state) =>
 export const selectAllUsers = (state) => {
     return state.user.userList;
 };
+
+export const selectPendingMemberRole = (state, domainName, roleName) =>
+    state?.user?.pendingMemberRoles?.[`${domainName}:${roleName}`] ?? null;
+export const selectPendingMemberGroup = (state, domainName, groupName) =>
+    state?.user?.pendingMemberGroups?.[`${domainName}:${groupName}`] ?? null;
diff --git a/ui/src/redux/thunks/user.js b/ui/src/redux/thunks/user.js
index 76b5b025c8e..4b28b9b20d1 100644
--- a/ui/src/redux/thunks/user.js
+++ b/ui/src/redux/thunks/user.js
@@ -17,6 +17,8 @@
 import { getExpiryTime, isExpired } from '../utils';
 import {
     selectAllUsers,
+    selectPendingMemberGroup,
+    selectPendingMemberRole,
     selectUserPendingMembers,
     selectUserResourceAccessList,
 } from '../selectors/user';
@@ -26,6 +28,8 @@ import {
     loadUserPendingMembers,
     loadUserResourceAccessList,
     returnUserResourceAccessList,
+    storePendingGroup,
+    storePendingRole,
 } from '../actions/user';
 
 import {
@@ -34,6 +38,93 @@ import {
     loadingSuccess,
 } from '../actions/loading';
 
+const ROLE = 'role';
+const GROUP = 'group';
+
+const getPendingMemberRole = async (dispatch, state, domainName, roleName) => {
+    let role = selectPendingMemberRole(state, domainName, roleName);
+    if (!role || isExpired(role.expiry)) {
+        role = await API().getRole(domainName, roleName, false, false, true);
+        role.expiry = getExpiryTime();
+        dispatch(storePendingRole(role, domainName, roleName));
+    }
+    return role;
+};
+const getPendingMemberGroup = async (
+    dispatch,
+    state,
+    domainName,
+    groupName
+) => {
+    let group = selectPendingMemberGroup(state, domainName, groupName);
+    if (!group || isExpired(group.expiry)) {
+        group = await API().getGroup(domainName, groupName, false, true);
+        group.expiry = getExpiryTime();
+        dispatch(storePendingGroup(group, domainName, groupName));
+    }
+    return group;
+};
+
+const prepareSelfServePendingMembers = async (
+    pendingMembers,
+    category,
+    dispatch,
+    state
+) => {
+    // SET MEMBER COMMENT AS AUDITREF FOR SELF-SERVE ROLES/GROUPS
+
+    // set of domain:role/group to search for
+    let roleOrGroupSet = new Set();
+    Object.keys(pendingMembers).forEach((member) => {
+        const memberData = pendingMembers[member];
+        if (category === memberData.category) {
+            roleOrGroupSet.add(
+                `${memberData.domainName}:${memberData.roleName}`
+            );
+        }
+    });
+
+    // setup promises to get roles/groups
+    let promises = [];
+    roleOrGroupSet.forEach((entity) => {
+        let [domain, role] = entity.split(':');
+        if (category === ROLE) {
+            promises.push(getPendingMemberRole(dispatch, state, domain, role));
+        } else if (category === GROUP) {
+            promises.push(getPendingMemberGroup(dispatch, state, domain, role));
+        }
+    });
+
+    let data = await Promise.all(promises);
+
+    // find which roles/groups have selfServe and assign comment as auditRef
+    Object.keys(pendingMembers).forEach((memberName) => {
+        const member = pendingMembers[memberName];
+        if (member.category !== category) {
+            return; // category is different (can be role or group)
+        }
+        // category matches
+        for (let i = 0; i < data.length; i++) {
+            const roleGroup = data[i];
+            if (!roleGroup.selfServe) {
+                continue; // we only look for self-serve roles/groups
+            }
+            const [domain, rest] = roleGroup.name.split(':');
+            if (domain !== member.domainName) {
+                break; // go to next "i" list containing roles/groups for diff domain
+            }
+            // domain matches
+            const [princType, roleGroupName] = rest.split('.');
+            if (roleGroupName === member.roleName) {
+                // role/group name matches pending member's role/group and is self serve
+                // set audetRef as provided comment
+                member.auditRef = member.userComment;
+                member.selfServe = true;
+            }
+        }
+    });
+};
+
 export const getUserPendingMembers = () => async (dispatch, getState) => {
     const expiry = getExpiryTime();
     try {
@@ -44,10 +135,31 @@ export const getUserPendingMembers = () => async (dispatch, getState) => {
         ) {
             let userPendingMembersList =
                 await API().getPendingDomainMembersList();
+
+            let promises = [];
+            promises.push(
+                prepareSelfServePendingMembers(
+                    userPendingMembersList,
+                    ROLE,
+                    dispatch,
+                    getState()
+                )
+            );
+            promises.push(
+                prepareSelfServePendingMembers(
+                    userPendingMembersList,
+                    GROUP,
+                    dispatch,
+                    getState()
+                )
+            );
+            await Promise.all(promises);
+
             dispatch(loadUserPendingMembers(userPendingMembersList, expiry));
         }
     } catch (error) {
         // if error, set userPendingMembers to empty array
+        console.error(error);
         dispatch(loadUserPendingMembers([], expiry));
     }
 };