diff --git a/ui/src/__tests__/components/member/__snapshots__/MemberList.test.js.snap b/ui/src/__tests__/components/member/__snapshots__/MemberList.test.js.snap
index 95332fcccb5..e23a9c0a33e 100644
--- a/ui/src/__tests__/components/member/__snapshots__/MemberList.test.js.snap
+++ b/ui/src/__tests__/components/member/__snapshots__/MemberList.test.js.snap
@@ -89,7 +89,7 @@ exports[`MemberList should render 1`] = `
   vertical-align: middle;
   font-weight: lighter;
   word-break: break-all;
-  display: block;
+  display: table-cell;
 }
 
 .emotion-9 {
@@ -104,8 +104,21 @@ exports[`MemberList should render 1`] = `
 }
 
 .emotion-12 {
+  text-align: center;
+  width: 1%;
+  border-bottom: 2px solid #d5d5d5;
+  color: #9a9a9a;
+  font-weight: 600;
+  padding-bottom: 5px;
+  vertical-align: top;
+  text-transform: uppercase;
+  padding: 5px 0 5px 15px;
+  word-break: break-all;
+}
+
+.emotion-14 {
   text-align: left;
-  width: 26%;
+  width: 25%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -116,9 +129,9 @@ exports[`MemberList should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-14 {
+.emotion-16 {
   text-align: left;
-  width: 26%;
+  width: 25%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -129,9 +142,9 @@ exports[`MemberList should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-18 {
+.emotion-20 {
   text-align: left;
-  width: 40%;
+  width: 39%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -142,7 +155,7 @@ exports[`MemberList should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-20 {
+.emotion-22 {
   text-align: center;
   width: 8%;
   border-bottom: 2px solid #d5d5d5;
@@ -155,7 +168,7 @@ exports[`MemberList should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-24 {
+.emotion-26 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 15px;
@@ -163,13 +176,13 @@ exports[`MemberList should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-30 {
+.emotion-34 {
   display: flex;
   -webkit-column-gap: 10px;
   column-gap: 10px;
 }
 
-.emotion-38 {
+.emotion-42 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -177,21 +190,21 @@ exports[`MemberList should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-43 {
+.emotion-47 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-57 {
+.emotion-63 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-75 {
+.emotion-83 {
   text-align: left;
   width: 14%;
   border-bottom: 2px solid #d5d5d5;
@@ -227,6 +240,7 @@ exports[`MemberList should render 1`] = `
       <tr>
         <th
           class="emotion-7 emotion-8"
+          colspan="3"
         >
           <span
             class="emotion-9 emotion-10"
@@ -253,30 +267,34 @@ exports[`MemberList should render 1`] = `
       <tr>
         <th
           class="emotion-12 emotion-13"
-          width="26"
+          width="1"
+        />
+        <th
+          class="emotion-14 emotion-15"
+          width="25"
         >
           User Name
         </th>
         <th
-          class="emotion-14 emotion-15"
-          width="26"
+          class="emotion-16 emotion-13"
+          width="25"
         >
           Name of User
         </th>
         <th
-          class="emotion-14 emotion-15"
-          width="26"
+          class="emotion-16 emotion-13"
+          width="25"
         >
           Expiration Date
         </th>
         <th
-          class="emotion-18 emotion-15"
-          width="40"
+          class="emotion-20 emotion-13"
+          width="39"
         >
           Review Reminder Date
         </th>
         <th
-          class="emotion-20 emotion-15"
+          class="emotion-22 emotion-13"
           width="8"
         >
           Delete
@@ -285,25 +303,29 @@ exports[`MemberList should render 1`] = `
     </thead>
     <tbody>
       <tr
-        class="emotion-22 emotion-23"
+        class="emotion-24 emotion-25"
         data-testid="member-row"
       >
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
+          color="#3570f40D"
+        />
+        <td
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           user1
         </td>
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         />
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -326,11 +348,11 @@ exports[`MemberList should render 1`] = `
           </div>
         </td>
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -353,7 +375,7 @@ exports[`MemberList should render 1`] = `
           </div>
         </td>
         <td
-          class="emotion-38 emotion-25"
+          class="emotion-42 emotion-27"
           color="#3570f40D"
         >
           <span>
@@ -379,25 +401,29 @@ exports[`MemberList should render 1`] = `
         </td>
       </tr>
       <tr
-        class="emotion-22 emotion-23"
+        class="emotion-24 emotion-25"
         data-testid="member-row"
       >
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
+          color=""
+        />
+        <td
+          class="emotion-47 emotion-27"
           color=""
         >
           user4
         </td>
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         />
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -420,11 +446,11 @@ exports[`MemberList should render 1`] = `
           </div>
         </td>
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -447,7 +473,7 @@ exports[`MemberList should render 1`] = `
           </div>
         </td>
         <td
-          class="emotion-57 emotion-25"
+          class="emotion-63 emotion-27"
           color=""
         >
           <span>
@@ -483,6 +509,7 @@ exports[`MemberList should render 1`] = `
       <tr>
         <th
           class="emotion-7 emotion-8"
+          colspan="3"
         >
           <span
             class="emotion-9 emotion-10"
@@ -509,36 +536,40 @@ exports[`MemberList should render 1`] = `
       <tr>
         <th
           class="emotion-12 emotion-13"
-          width="26"
+          width="1"
+        />
+        <th
+          class="emotion-14 emotion-15"
+          width="25"
         >
           User Name
         </th>
         <th
-          class="emotion-14 emotion-15"
-          width="26"
+          class="emotion-16 emotion-13"
+          width="25"
         >
           Name of User
         </th>
         <th
-          class="emotion-14 emotion-15"
-          width="26"
+          class="emotion-16 emotion-13"
+          width="25"
         >
           Expiration Date
         </th>
         <th
-          class="emotion-14 emotion-15"
-          width="26"
+          class="emotion-16 emotion-13"
+          width="25"
         >
           Review Reminder Date
         </th>
         <th
-          class="emotion-75 emotion-15"
+          class="emotion-83 emotion-13"
           width="14"
         >
           Pending State
         </th>
         <th
-          class="emotion-20 emotion-15"
+          class="emotion-22 emotion-13"
           width="8"
         >
           Delete
@@ -547,25 +578,29 @@ exports[`MemberList should render 1`] = `
     </thead>
     <tbody>
       <tr
-        class="emotion-22 emotion-23"
+        class="emotion-24 emotion-25"
         data-testid="member-row"
       >
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
+          color="#3570f40D"
+        />
+        <td
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           user2
         </td>
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         />
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -588,11 +623,11 @@ exports[`MemberList should render 1`] = `
           </div>
         </td>
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -615,11 +650,11 @@ exports[`MemberList should render 1`] = `
           </div>
         </td>
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         />
         <td
-          class="emotion-38 emotion-25"
+          class="emotion-42 emotion-27"
           color="#3570f40D"
         >
           <span>
@@ -645,25 +680,29 @@ exports[`MemberList should render 1`] = `
         </td>
       </tr>
       <tr
-        class="emotion-22 emotion-23"
+        class="emotion-24 emotion-25"
         data-testid="member-row"
       >
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
+          color=""
+        />
+        <td
+          class="emotion-47 emotion-27"
           color=""
         >
           user3
         </td>
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         />
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -686,11 +725,11 @@ exports[`MemberList should render 1`] = `
           </div>
         </td>
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -713,11 +752,11 @@ exports[`MemberList should render 1`] = `
           </div>
         </td>
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         />
         <td
-          class="emotion-57 emotion-25"
+          class="emotion-63 emotion-27"
           color=""
         >
           <span>
@@ -836,7 +875,7 @@ exports[`MemberList should render delegated role 1`] = `
   vertical-align: middle;
   font-weight: lighter;
   word-break: break-all;
-  display: block;
+  display: table-cell;
 }
 
 .emotion-9 {
@@ -851,8 +890,21 @@ exports[`MemberList should render delegated role 1`] = `
 }
 
 .emotion-12 {
+  text-align: center;
+  width: 1%;
+  border-bottom: 2px solid #d5d5d5;
+  color: #9a9a9a;
+  font-weight: 600;
+  padding-bottom: 5px;
+  vertical-align: top;
+  text-transform: uppercase;
+  padding: 5px 0 5px 15px;
+  word-break: break-all;
+}
+
+.emotion-14 {
   text-align: left;
-  width: 26%;
+  width: 25%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -863,9 +915,9 @@ exports[`MemberList should render delegated role 1`] = `
   word-break: break-all;
 }
 
-.emotion-14 {
+.emotion-16 {
   text-align: left;
-  width: 26%;
+  width: 25%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -876,9 +928,9 @@ exports[`MemberList should render delegated role 1`] = `
   word-break: break-all;
 }
 
-.emotion-18 {
+.emotion-20 {
   text-align: left;
-  width: 40%;
+  width: 39%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -889,7 +941,7 @@ exports[`MemberList should render delegated role 1`] = `
   word-break: break-all;
 }
 
-.emotion-20 {
+.emotion-22 {
   text-align: center;
   width: 8%;
   border-bottom: 2px solid #d5d5d5;
@@ -902,7 +954,7 @@ exports[`MemberList should render delegated role 1`] = `
   word-break: break-all;
 }
 
-.emotion-24 {
+.emotion-26 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 15px;
@@ -910,13 +962,13 @@ exports[`MemberList should render delegated role 1`] = `
   word-break: break-all;
 }
 
-.emotion-30 {
+.emotion-34 {
   display: flex;
   -webkit-column-gap: 10px;
   column-gap: 10px;
 }
 
-.emotion-38 {
+.emotion-42 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -924,14 +976,14 @@ exports[`MemberList should render delegated role 1`] = `
   word-break: break-all;
 }
 
-.emotion-43 {
+.emotion-47 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-57 {
+.emotion-63 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
@@ -961,6 +1013,7 @@ exports[`MemberList should render delegated role 1`] = `
       <tr>
         <th
           class="emotion-7 emotion-8"
+          colspan="3"
         >
           <span
             class="emotion-9 emotion-10"
@@ -987,30 +1040,34 @@ exports[`MemberList should render delegated role 1`] = `
       <tr>
         <th
           class="emotion-12 emotion-13"
-          width="26"
+          width="1"
+        />
+        <th
+          class="emotion-14 emotion-15"
+          width="25"
         >
           User Name
         </th>
         <th
-          class="emotion-14 emotion-15"
-          width="26"
+          class="emotion-16 emotion-13"
+          width="25"
         >
           Name of User
         </th>
         <th
-          class="emotion-14 emotion-15"
-          width="26"
+          class="emotion-16 emotion-13"
+          width="25"
         >
           Expiration Date
         </th>
         <th
-          class="emotion-18 emotion-15"
-          width="40"
+          class="emotion-20 emotion-13"
+          width="39"
         >
           Review Reminder Date
         </th>
         <th
-          class="emotion-20 emotion-15"
+          class="emotion-22 emotion-13"
           width="8"
         >
           Delete
@@ -1019,25 +1076,29 @@ exports[`MemberList should render delegated role 1`] = `
     </thead>
     <tbody>
       <tr
-        class="emotion-22 emotion-23"
+        class="emotion-24 emotion-25"
         data-testid="member-row"
       >
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
+          color="#3570f40D"
+        />
+        <td
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           user1
         </td>
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         />
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -1060,11 +1121,11 @@ exports[`MemberList should render delegated role 1`] = `
           </div>
         </td>
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -1087,7 +1148,7 @@ exports[`MemberList should render delegated role 1`] = `
           </div>
         </td>
         <td
-          class="emotion-38 emotion-25"
+          class="emotion-42 emotion-27"
           color="#3570f40D"
         >
           <span>
@@ -1113,25 +1174,29 @@ exports[`MemberList should render delegated role 1`] = `
         </td>
       </tr>
       <tr
-        class="emotion-22 emotion-23"
+        class="emotion-24 emotion-25"
         data-testid="member-row"
       >
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
+          color=""
+        />
+        <td
+          class="emotion-47 emotion-27"
           color=""
         >
           user2
         </td>
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         />
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -1154,11 +1219,11 @@ exports[`MemberList should render delegated role 1`] = `
           </div>
         </td>
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -1181,7 +1246,7 @@ exports[`MemberList should render delegated role 1`] = `
           </div>
         </td>
         <td
-          class="emotion-57 emotion-25"
+          class="emotion-63 emotion-27"
           color=""
         >
           <span>
@@ -1207,25 +1272,29 @@ exports[`MemberList should render delegated role 1`] = `
         </td>
       </tr>
       <tr
-        class="emotion-22 emotion-23"
+        class="emotion-24 emotion-25"
         data-testid="member-row"
       >
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
+          color="#3570f40D"
+        />
+        <td
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           user3
         </td>
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         />
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -1248,11 +1317,11 @@ exports[`MemberList should render delegated role 1`] = `
           </div>
         </td>
         <td
-          class="emotion-24 emotion-25"
+          class="emotion-26 emotion-27"
           color="#3570f40D"
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -1275,7 +1344,7 @@ exports[`MemberList should render delegated role 1`] = `
           </div>
         </td>
         <td
-          class="emotion-38 emotion-25"
+          class="emotion-42 emotion-27"
           color="#3570f40D"
         >
           <span>
@@ -1301,25 +1370,29 @@ exports[`MemberList should render delegated role 1`] = `
         </td>
       </tr>
       <tr
-        class="emotion-22 emotion-23"
+        class="emotion-24 emotion-25"
         data-testid="member-row"
       >
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
+          color=""
+        />
+        <td
+          class="emotion-47 emotion-27"
           color=""
         >
           user4
         </td>
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         />
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -1342,11 +1415,11 @@ exports[`MemberList should render delegated role 1`] = `
           </div>
         </td>
         <td
-          class="emotion-43 emotion-25"
+          class="emotion-47 emotion-27"
           color=""
         >
           <div
-            class="emotion-30 emotion-31"
+            class="emotion-34 emotion-35"
           >
             N/A
             <span>
@@ -1369,7 +1442,7 @@ exports[`MemberList should render delegated role 1`] = `
           </div>
         </td>
         <td
-          class="emotion-57 emotion-25"
+          class="emotion-63 emotion-27"
           color=""
         >
           <span>
diff --git a/ui/src/__tests__/components/member/__snapshots__/MemberRow.test.js.snap b/ui/src/__tests__/components/member/__snapshots__/MemberRow.test.js.snap
index af1d36bf239..3f67601fe7a 100644
--- a/ui/src/__tests__/components/member/__snapshots__/MemberRow.test.js.snap
+++ b/ui/src/__tests__/components/member/__snapshots__/MemberRow.test.js.snap
@@ -9,19 +9,19 @@ exports[`MemberRow should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-8 {
+.emotion-10 {
   display: flex;
   -webkit-column-gap: 10px;
   column-gap: 10px;
 }
 
-.emotion-10 {
+.emotion-12 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-16 {
+.emotion-18 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -33,6 +33,10 @@ exports[`MemberRow should render 1`] = `
   class="emotion-0 emotion-1"
   data-testid="member-row"
 >
+  <td
+    class="emotion-2 emotion-3"
+    color="#3570f40D"
+  />
   <td
     class="emotion-2 emotion-3"
     color="#3570f40D"
@@ -48,12 +52,12 @@ exports[`MemberRow should render 1`] = `
     color="#3570f40D"
   >
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       N/A
       <span>
         <svg
-          class="emotion-10"
+          class="emotion-12"
           data-testid="icon"
           height="1.25em"
           id=""
@@ -75,12 +79,12 @@ exports[`MemberRow should render 1`] = `
     color="#3570f40D"
   >
     <div
-      class="emotion-8 emotion-9"
+      class="emotion-10 emotion-11"
     >
       N/A
       <span>
         <svg
-          class="emotion-10"
+          class="emotion-12"
           data-testid="icon"
           height="1.25em"
           id=""
@@ -98,12 +102,12 @@ exports[`MemberRow should render 1`] = `
     </div>
   </td>
   <td
-    class="emotion-16 emotion-3"
+    class="emotion-18 emotion-3"
     color="#3570f40D"
   >
     <span>
       <svg
-        class="emotion-10"
+        class="emotion-12"
         data-testid="icon"
         height="1.25em"
         id=""
diff --git a/ui/src/__tests__/components/member/__snapshots__/MemberTable.test.js.snap b/ui/src/__tests__/components/member/__snapshots__/MemberTable.test.js.snap
index 12ef7346431..fd05779404e 100644
--- a/ui/src/__tests__/components/member/__snapshots__/MemberTable.test.js.snap
+++ b/ui/src/__tests__/components/member/__snapshots__/MemberTable.test.js.snap
@@ -25,7 +25,7 @@ exports[`MemberTable should render member table 1`] = `
   vertical-align: middle;
   font-weight: lighter;
   word-break: break-all;
-  display: block;
+  display: table-cell;
 }
 
 .emotion-4 {
@@ -40,8 +40,21 @@ exports[`MemberTable should render member table 1`] = `
 }
 
 .emotion-7 {
+  text-align: center;
+  width: 1%;
+  border-bottom: 2px solid #d5d5d5;
+  color: #9a9a9a;
+  font-weight: 600;
+  padding-bottom: 5px;
+  vertical-align: top;
+  text-transform: uppercase;
+  padding: 5px 0 5px 15px;
+  word-break: break-all;
+}
+
+.emotion-9 {
   text-align: left;
-  width: 26%;
+  width: 25%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -52,9 +65,9 @@ exports[`MemberTable should render member table 1`] = `
   word-break: break-all;
 }
 
-.emotion-9 {
+.emotion-11 {
   text-align: left;
-  width: 26%;
+  width: 25%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -65,9 +78,9 @@ exports[`MemberTable should render member table 1`] = `
   word-break: break-all;
 }
 
-.emotion-13 {
+.emotion-15 {
   text-align: left;
-  width: 40%;
+  width: 39%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -78,7 +91,7 @@ exports[`MemberTable should render member table 1`] = `
   word-break: break-all;
 }
 
-.emotion-15 {
+.emotion-17 {
   text-align: center;
   width: 8%;
   border-bottom: 2px solid #d5d5d5;
@@ -91,7 +104,7 @@ exports[`MemberTable should render member table 1`] = `
   word-break: break-all;
 }
 
-.emotion-19 {
+.emotion-21 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 15px;
@@ -99,13 +112,13 @@ exports[`MemberTable should render member table 1`] = `
   word-break: break-all;
 }
 
-.emotion-25 {
+.emotion-29 {
   display: flex;
   -webkit-column-gap: 10px;
   column-gap: 10px;
 }
 
-.emotion-33 {
+.emotion-37 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
@@ -113,14 +126,14 @@ exports[`MemberTable should render member table 1`] = `
   word-break: break-all;
 }
 
-.emotion-38 {
+.emotion-42 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-52 {
+.emotion-58 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
@@ -135,6 +148,7 @@ exports[`MemberTable should render member table 1`] = `
     <tr>
       <th
         class="emotion-2 emotion-3"
+        colspan="3"
       >
         <span
           class="emotion-4 emotion-5"
@@ -161,30 +175,34 @@ exports[`MemberTable should render member table 1`] = `
     <tr>
       <th
         class="emotion-7 emotion-8"
-        width="26"
+        width="1"
+      />
+      <th
+        class="emotion-9 emotion-10"
+        width="25"
       >
         User Name
       </th>
       <th
-        class="emotion-9 emotion-10"
-        width="26"
+        class="emotion-11 emotion-8"
+        width="25"
       >
         Name of User
       </th>
       <th
-        class="emotion-9 emotion-10"
-        width="26"
+        class="emotion-11 emotion-8"
+        width="25"
       >
         Expiration Date
       </th>
       <th
-        class="emotion-13 emotion-10"
-        width="40"
+        class="emotion-15 emotion-8"
+        width="39"
       >
         Review Reminder Date
       </th>
       <th
-        class="emotion-15 emotion-10"
+        class="emotion-17 emotion-8"
         width="8"
       >
         Delete
@@ -193,25 +211,29 @@ exports[`MemberTable should render member table 1`] = `
   </thead>
   <tbody>
     <tr
-      class="emotion-17 emotion-18"
+      class="emotion-19 emotion-20"
       data-testid="member-row"
     >
       <td
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
+        color="#3570f40D"
+      />
+      <td
+        class="emotion-21 emotion-22"
         color="#3570f40D"
       >
         user1
       </td>
       <td
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
         color="#3570f40D"
       />
       <td
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
         color="#3570f40D"
       >
         <div
-          class="emotion-25 emotion-26"
+          class="emotion-29 emotion-30"
         >
           N/A
           <span>
@@ -234,11 +256,11 @@ exports[`MemberTable should render member table 1`] = `
         </div>
       </td>
       <td
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
         color="#3570f40D"
       >
         <div
-          class="emotion-25 emotion-26"
+          class="emotion-29 emotion-30"
         >
           N/A
           <span>
@@ -261,7 +283,7 @@ exports[`MemberTable should render member table 1`] = `
         </div>
       </td>
       <td
-        class="emotion-33 emotion-20"
+        class="emotion-37 emotion-22"
         color="#3570f40D"
       >
         <span>
@@ -287,25 +309,29 @@ exports[`MemberTable should render member table 1`] = `
       </td>
     </tr>
     <tr
-      class="emotion-17 emotion-18"
+      class="emotion-19 emotion-20"
       data-testid="member-row"
     >
       <td
-        class="emotion-38 emotion-20"
+        class="emotion-42 emotion-22"
+        color=""
+      />
+      <td
+        class="emotion-42 emotion-22"
         color=""
       >
         user2
       </td>
       <td
-        class="emotion-38 emotion-20"
+        class="emotion-42 emotion-22"
         color=""
       />
       <td
-        class="emotion-38 emotion-20"
+        class="emotion-42 emotion-22"
         color=""
       >
         <div
-          class="emotion-25 emotion-26"
+          class="emotion-29 emotion-30"
         >
           N/A
           <span>
@@ -328,11 +354,11 @@ exports[`MemberTable should render member table 1`] = `
         </div>
       </td>
       <td
-        class="emotion-38 emotion-20"
+        class="emotion-42 emotion-22"
         color=""
       >
         <div
-          class="emotion-25 emotion-26"
+          class="emotion-29 emotion-30"
         >
           N/A
           <span>
@@ -355,7 +381,7 @@ exports[`MemberTable should render member table 1`] = `
         </div>
       </td>
       <td
-        class="emotion-52 emotion-20"
+        class="emotion-58 emotion-22"
         color=""
       >
         <span>
@@ -381,25 +407,29 @@ exports[`MemberTable should render member table 1`] = `
       </td>
     </tr>
     <tr
-      class="emotion-17 emotion-18"
+      class="emotion-19 emotion-20"
       data-testid="member-row"
     >
       <td
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
+        color="#3570f40D"
+      />
+      <td
+        class="emotion-21 emotion-22"
         color="#3570f40D"
       >
         user3
       </td>
       <td
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
         color="#3570f40D"
       />
       <td
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
         color="#3570f40D"
       >
         <div
-          class="emotion-25 emotion-26"
+          class="emotion-29 emotion-30"
         >
           N/A
           <span>
@@ -422,11 +452,11 @@ exports[`MemberTable should render member table 1`] = `
         </div>
       </td>
       <td
-        class="emotion-19 emotion-20"
+        class="emotion-21 emotion-22"
         color="#3570f40D"
       >
         <div
-          class="emotion-25 emotion-26"
+          class="emotion-29 emotion-30"
         >
           N/A
           <span>
@@ -449,7 +479,7 @@ exports[`MemberTable should render member table 1`] = `
         </div>
       </td>
       <td
-        class="emotion-33 emotion-20"
+        class="emotion-37 emotion-22"
         color="#3570f40D"
       >
         <span>
@@ -475,25 +505,29 @@ exports[`MemberTable should render member table 1`] = `
       </td>
     </tr>
     <tr
-      class="emotion-17 emotion-18"
+      class="emotion-19 emotion-20"
       data-testid="member-row"
     >
       <td
-        class="emotion-38 emotion-20"
+        class="emotion-42 emotion-22"
+        color=""
+      />
+      <td
+        class="emotion-42 emotion-22"
         color=""
       >
         user4
       </td>
       <td
-        class="emotion-38 emotion-20"
+        class="emotion-42 emotion-22"
         color=""
       />
       <td
-        class="emotion-38 emotion-20"
+        class="emotion-42 emotion-22"
         color=""
       >
         <div
-          class="emotion-25 emotion-26"
+          class="emotion-29 emotion-30"
         >
           N/A
           <span>
@@ -516,11 +550,11 @@ exports[`MemberTable should render member table 1`] = `
         </div>
       </td>
       <td
-        class="emotion-38 emotion-20"
+        class="emotion-42 emotion-22"
         color=""
       >
         <div
-          class="emotion-25 emotion-26"
+          class="emotion-29 emotion-30"
         >
           N/A
           <span>
@@ -543,7 +577,7 @@ exports[`MemberTable should render member table 1`] = `
         </div>
       </td>
       <td
-        class="emotion-52 emotion-20"
+        class="emotion-58 emotion-22"
         color=""
       >
         <span>
diff --git a/ui/src/__tests__/components/utils/DateUtils.test.js b/ui/src/__tests__/components/utils/DateUtils.test.js
index 093c13abd08..cfc37371641 100644
--- a/ui/src/__tests__/components/utils/DateUtils.test.js
+++ b/ui/src/__tests__/components/utils/DateUtils.test.js
@@ -46,4 +46,16 @@ describe('LocalDate', () => {
         expect(dateUtils.validateDate(originalDate)).toEqual(false);
         expect(dateUtils.validateDate(futureDate)).toEqual(false);
     });
+
+    it('isExpired() should return false when passed date is after now', () => {
+        let passedDate = moment().add({minutes: 1});
+        let dateUtils = new DateUtils();
+        expect(dateUtils.isExpired(passedDate, 'UTC')).toEqual(false);
+    });
+
+    it('isExpired() should return true when passed date is before now', () => {
+        let passedDate = moment().add({minutes: -1});
+        let dateUtils = new DateUtils();
+        expect(dateUtils.isExpired(passedDate, 'UTC')).toEqual(true);
+    });
 });
diff --git a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/members.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/members.test.js.snap
index b51a31e1c8e..0723d5d7f4f 100644
--- a/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/members.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/group/[group]/__snapshots__/members.test.js.snap
@@ -687,7 +687,7 @@ exports[`GroupMemberPage should render 1`] = `
   vertical-align: middle;
   font-weight: lighter;
   word-break: break-all;
-  display: block;
+  display: table-cell;
 }
 
 .emotion-66 {
@@ -702,34 +702,34 @@ exports[`GroupMemberPage should render 1`] = `
 }
 
 .emotion-69 {
-  text-align: left;
-  width: 26%;
+  text-align: center;
+  width: 1%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
   padding-bottom: 5px;
   vertical-align: top;
   text-transform: uppercase;
-  padding: 5px 0 5px 35px;
+  padding: 5px 0 5px 15px;
   word-break: break-all;
 }
 
 .emotion-71 {
   text-align: left;
-  width: 26%;
+  width: 25%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
   padding-bottom: 5px;
   vertical-align: top;
   text-transform: uppercase;
-  padding: 5px 0 5px 15px;
+  padding: 5px 0 5px 35px;
   word-break: break-all;
 }
 
 .emotion-73 {
   text-align: left;
-  width: 40%;
+  width: 25%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -741,6 +741,19 @@ exports[`GroupMemberPage should render 1`] = `
 }
 
 .emotion-75 {
+  text-align: left;
+  width: 39%;
+  border-bottom: 2px solid #d5d5d5;
+  color: #9a9a9a;
+  font-weight: 600;
+  padding-bottom: 5px;
+  vertical-align: top;
+  text-transform: uppercase;
+  padding: 5px 0 5px 15px;
+  word-break: break-all;
+}
+
+.emotion-77 {
   text-align: center;
   width: 8%;
   border-bottom: 2px solid #d5d5d5;
@@ -753,7 +766,7 @@ exports[`GroupMemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-77 {
+.emotion-79 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -776,13 +789,13 @@ exports[`GroupMemberPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-79 {
+.emotion-81 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-80 {
+.emotion-82 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -797,7 +810,7 @@ exports[`GroupMemberPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-82 {
+.emotion-84 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -813,38 +826,38 @@ exports[`GroupMemberPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-84 {
+.emotion-86 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-86 {
+.emotion-88 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-88 {
+.emotion-90 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-92 {
+.emotion-94 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-94 {
+.emotion-96 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-96 {
+.emotion-98 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-98 {
+.emotion-100 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -1105,6 +1118,7 @@ exports[`GroupMemberPage should render 1`] = `
                 <tr>
                   <th
                     class="emotion-64 emotion-65"
+                    colspan="3"
                   >
                     <span
                       class="emotion-66 emotion-67"
@@ -1131,24 +1145,28 @@ exports[`GroupMemberPage should render 1`] = `
                 <tr>
                   <th
                     class="emotion-69 emotion-70"
-                    width="26"
+                    width="1"
+                  />
+                  <th
+                    class="emotion-71 emotion-72"
+                    width="25"
                   >
                     User Name
                   </th>
                   <th
-                    class="emotion-71 emotion-72"
-                    width="26"
+                    class="emotion-73 emotion-70"
+                    width="25"
                   >
                     Name of User
                   </th>
                   <th
-                    class="emotion-73 emotion-72"
-                    width="40"
+                    class="emotion-75 emotion-70"
+                    width="39"
                   >
                     Expiration Date
                   </th>
                   <th
-                    class="emotion-75 emotion-72"
+                    class="emotion-77 emotion-70"
                     width="8"
                   >
                     Delete
@@ -1165,11 +1183,11 @@ exports[`GroupMemberPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-77 emotion-78"
+          class="emotion-79 emotion-80"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-79"
+            class="emotion-81"
             data-testid="icon"
             height="1em"
             id=""
@@ -1185,30 +1203,30 @@ exports[`GroupMemberPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-80 emotion-81"
+          class="emotion-82 emotion-83"
         >
           <div
-            class="emotion-82 emotion-83"
+            class="emotion-84 emotion-85"
           >
             <div
-              class="emotion-84 emotion-85"
+              class="emotion-86 emotion-87"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-86 emotion-87"
+                class="emotion-88 emotion-89"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-88 emotion-89"
+                class="emotion-90 emotion-91"
               >
                  | 
               </span>
               <a
-                class="emotion-86 emotion-87"
+                class="emotion-88 emotion-89"
                 href="/domain/manage"
               >
                 Manage
@@ -1216,16 +1234,16 @@ exports[`GroupMemberPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-92 emotion-93"
+            class="emotion-94 emotion-95"
           >
             <div
-              class="emotion-94 emotion-95"
+              class="emotion-96 emotion-97"
             >
               <div
-                class="emotion-96 emotion-97"
+                class="emotion-98 emotion-99"
               >
                 <svg
-                  class="emotion-98"
+                  class="emotion-100"
                   data-testid="icon"
                   height="1em"
                   id=""
@@ -1247,20 +1265,20 @@ exports[`GroupMemberPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-86 emotion-87"
+                class="emotion-88 emotion-89"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-94 emotion-95"
+              class="emotion-96 emotion-97"
             >
               <div
-                class="emotion-96 emotion-97"
+                class="emotion-98 emotion-99"
               >
                 <svg
-                  class="emotion-98"
+                  class="emotion-100"
                   data-testid="icon"
                   height="1em"
                   id=""
@@ -1282,7 +1300,7 @@ exports[`GroupMemberPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-86 emotion-87"
+                class="emotion-88 emotion-89"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/members.test.js.snap b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/members.test.js.snap
index b9420f20cbb..8661352b23f 100644
--- a/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/members.test.js.snap
+++ b/ui/src/__tests__/pages/domain/[domain]/role/[role]/__snapshots__/members.test.js.snap
@@ -687,7 +687,7 @@ exports[`MemberPage should render 1`] = `
   vertical-align: middle;
   font-weight: lighter;
   word-break: break-all;
-  display: block;
+  display: table-cell;
 }
 
 .emotion-66 {
@@ -702,8 +702,21 @@ exports[`MemberPage should render 1`] = `
 }
 
 .emotion-69 {
+  text-align: center;
+  width: 1%;
+  border-bottom: 2px solid #d5d5d5;
+  color: #9a9a9a;
+  font-weight: 600;
+  padding-bottom: 5px;
+  vertical-align: top;
+  text-transform: uppercase;
+  padding: 5px 0 5px 15px;
+  word-break: break-all;
+}
+
+.emotion-71 {
   text-align: left;
-  width: 19.5%;
+  width: 18.5%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -714,9 +727,9 @@ exports[`MemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-71 {
+.emotion-73 {
   text-align: left;
-  width: 19.5%;
+  width: 18.5%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -727,9 +740,9 @@ exports[`MemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-75 {
+.emotion-77 {
   text-align: left;
-  width: 33.5%;
+  width: 32.5%;
   border-bottom: 2px solid #d5d5d5;
   color: #9a9a9a;
   font-weight: 600;
@@ -740,7 +753,7 @@ exports[`MemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-77 {
+.emotion-79 {
   text-align: center;
   width: 8%;
   border-bottom: 2px solid #d5d5d5;
@@ -753,7 +766,7 @@ exports[`MemberPage should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-79 {
+.emotion-81 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -776,13 +789,13 @@ exports[`MemberPage should render 1`] = `
   width: 20px;
 }
 
-.emotion-81 {
+.emotion-83 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-82 {
+.emotion-84 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -797,7 +810,7 @@ exports[`MemberPage should render 1`] = `
   width: 350px;
 }
 
-.emotion-84 {
+.emotion-86 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -813,38 +826,38 @@ exports[`MemberPage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-86 {
+.emotion-88 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-88 {
+.emotion-90 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-90 {
+.emotion-92 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-94 {
+.emotion-96 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-96 {
+.emotion-98 {
   padding: 10px 0;
   display: flex;
 }
 
-.emotion-98 {
+.emotion-100 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-100 {
+.emotion-102 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -1105,6 +1118,7 @@ exports[`MemberPage should render 1`] = `
                 <tr>
                   <th
                     class="emotion-64 emotion-65"
+                    colspan="3"
                   >
                     <span
                       class="emotion-66 emotion-67"
@@ -1131,30 +1145,34 @@ exports[`MemberPage should render 1`] = `
                 <tr>
                   <th
                     class="emotion-69 emotion-70"
-                    width="19.5"
+                    width="1"
+                  />
+                  <th
+                    class="emotion-71 emotion-72"
+                    width="18.5"
                   >
                     User Name
                   </th>
                   <th
-                    class="emotion-71 emotion-72"
-                    width="19.5"
+                    class="emotion-73 emotion-70"
+                    width="18.5"
                   >
                     Name of User
                   </th>
                   <th
-                    class="emotion-71 emotion-72"
-                    width="19.5"
+                    class="emotion-73 emotion-70"
+                    width="18.5"
                   >
                     Expiration Date
                   </th>
                   <th
-                    class="emotion-75 emotion-72"
-                    width="33.5"
+                    class="emotion-77 emotion-70"
+                    width="32.5"
                   >
                     Review Reminder Date
                   </th>
                   <th
-                    class="emotion-77 emotion-72"
+                    class="emotion-79 emotion-70"
                     width="8"
                   >
                     Delete
@@ -1171,11 +1189,11 @@ exports[`MemberPage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-79 emotion-80"
+          class="emotion-81 emotion-82"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-81"
+            class="emotion-83"
             data-testid="icon"
             height="1em"
             id=""
@@ -1191,30 +1209,30 @@ exports[`MemberPage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-82 emotion-83"
+          class="emotion-84 emotion-85"
         >
           <div
-            class="emotion-84 emotion-85"
+            class="emotion-86 emotion-87"
           >
             <div
-              class="emotion-86 emotion-87"
+              class="emotion-88 emotion-89"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-88 emotion-89"
+                class="emotion-90 emotion-91"
                 href="/domain/create"
               >
                 Create
               </a>
               <span
-                class="emotion-90 emotion-91"
+                class="emotion-92 emotion-93"
               >
                  | 
               </span>
               <a
-                class="emotion-88 emotion-89"
+                class="emotion-90 emotion-91"
                 href="/domain/manage"
               >
                 Manage
@@ -1222,16 +1240,16 @@ exports[`MemberPage should render 1`] = `
             </div>
           </div>
           <div
-            class="emotion-94 emotion-95"
+            class="emotion-96 emotion-97"
           >
             <div
-              class="emotion-96 emotion-97"
+              class="emotion-98 emotion-99"
             >
               <div
-                class="emotion-98 emotion-99"
+                class="emotion-100 emotion-101"
               >
                 <svg
-                  class="emotion-100"
+                  class="emotion-102"
                   data-testid="icon"
                   height="1em"
                   id=""
@@ -1253,20 +1271,20 @@ exports[`MemberPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-88 emotion-89"
+                class="emotion-90 emotion-91"
                 href="/domain/athens/role"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-96 emotion-97"
+              class="emotion-98 emotion-99"
             >
               <div
-                class="emotion-98 emotion-99"
+                class="emotion-100 emotion-101"
               >
                 <svg
-                  class="emotion-100"
+                  class="emotion-102"
                   data-testid="icon"
                   height="1em"
                   id=""
@@ -1288,7 +1306,7 @@ exports[`MemberPage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-88 emotion-89"
+                class="emotion-90 emotion-91"
                 href="/domain/athens.ci/role"
               >
                 athens.ci
diff --git a/ui/src/components/constants/constants.js b/ui/src/components/constants/constants.js
index d1dbc733ada..a12e916c032 100644
--- a/ui/src/components/constants/constants.js
+++ b/ui/src/components/constants/constants.js
@@ -273,3 +273,7 @@ export const ENVIRONMENT_DROPDOWN_OPTIONS = [
     { value: 'qa', name: 'QA' },
     { value: 'development', name: 'DEVELOPMENT' },
 ];
+
+export const MEMBER_AUTHORITY_FILTER_DISABLED = 1;
+export const MEMBER_AUTHORITY_SYSTEM_SUSPENDED = 2;
+export const MEMBER_ATHENZ_SYSTEM_DISABLED = 4;
diff --git a/ui/src/components/denali/icons/Icons.js b/ui/src/components/denali/icons/Icons.js
index 70274099395..a749adaf284 100644
--- a/ui/src/components/denali/icons/Icons.js
+++ b/ui/src/components/denali/icons/Icons.js
@@ -254,8 +254,9 @@ export const ICONS = {
         'M512 298.667c47.128 0 85.333 38.205 85.333 85.333s-38.205 85.333-85.333 85.333c-47.128 0-85.333-38.205-85.333-85.333v0c0-47.128 38.205-85.333 85.333-85.333v0zM512 213.333c-94.257 0-170.667 76.41-170.667 170.667s76.41 170.667 170.667 170.667c94.257 0 170.667-76.41 170.667-170.667v0c0-94.257-76.41-170.667-170.667-170.667v0z',
     ],
     warning: [
-        'M24,9,40.6,39H7.5L24,9M2.3,40A2,2,0,0,0,4,43H44a2,2,0,0,0,1.7-3L25.7,4a2,2,0,0,0-3.4,0Z',
-        'M22,19v9a2,2,0,0,0,4,0V19a2,2,0,0,0-4,0Z',
+        "M512 192l354.133 640h-706.133l352-640zM49.067 853.333c-3.596 6.121-5.719 13.482-5.719 21.339 0 23.325 18.716 42.278 41.95 42.661l0.036 0h853.333c23.27-0.383 41.986-19.336 41.986-42.661 0-7.857-2.124-15.218-5.828-21.54l0.109 0.201-426.667-768c-7.651-12.199-21.025-20.191-36.267-20.191s-28.616 7.991-36.162 20.013l-0.104 0.178z",
+        "M469.333 405.333v192c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0-192c0-23.564-19.103-42.667-42.667-42.667s-42.667 19.103-42.667 42.667v0z",
+        "M554.667 725.333c0 23.564-19.103 42.667-42.667 42.667s-42.667-19.103-42.667-42.667c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667z"
     ],
     x: [
         'M572.373 512l224.427-224.213c8.506-8.066 13.798-19.448 13.798-32.066 0-9.118-2.763-17.59-7.498-24.625l0.1 0.158c-7.858-10.565-20.305-17.335-34.333-17.335-11.534 0-21.999 4.577-29.678 12.013l0.011-0.011-227.2 225.707-226.133-225.707c-7.733-7.792-18.447-12.616-30.289-12.616-14.295 0-26.948 7.030-34.691 17.822l-0.087 0.128c-4.635 6.877-7.398 15.35-7.398 24.467 0 12.618 5.292 24 13.778 32.048l0.020 0.019 224.427 224.213-224.427 224.213c-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 226.133-225.707 226.133 225.707c7.668 7.425 18.133 12.002 29.667 12.002 14.028 0 26.476-6.77 34.252-17.222l0.081-0.114c4.635-6.877 7.398-15.35 7.398-24.467 0-12.618-5.292-24-13.778-32.048l-0.020-0.019z',
diff --git a/ui/src/components/member/MemberRow.js b/ui/src/components/member/MemberRow.js
index 0aafa788fd8..e12185499df 100644
--- a/ui/src/components/member/MemberRow.js
+++ b/ui/src/components/member/MemberRow.js
@@ -31,6 +31,9 @@ import {
     ADD_ROLE_EXPIRATION_PLACEHOLDER,
     ADD_ROLE_REMINDER_PLACEHOLDER,
     EDITABLE_DATE_ENUM,
+    MEMBER_ATHENZ_SYSTEM_DISABLED,
+    MEMBER_AUTHORITY_FILTER_DISABLED,
+    MEMBER_AUTHORITY_SYSTEM_SUSPENDED,
 } from '../constants/constants';
 import NameUtils from '../utils/NameUtils';
 
@@ -54,6 +57,8 @@ const GroupTDStyled = styled.td`
 const EditDiv = styled.div`
     display: flex;
     column-gap: 10px;
+    color: ${(props) => props.expired ? colors.red800 : ''};
+    font-style: ${(props) => props.expired ? 'italic' : ''};
 `;
 
 const colorTransition = keyframes`
@@ -249,6 +254,43 @@ class MemberRow extends React.Component {
             });
     }
 
+    isMemberDisabled(member) {
+        if (member.systemDisabled && member.systemDisabled > 0) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    isMemberExpired(member) {
+        return member.expiration ? 
+            this.localDate.isExpired(
+                member.expiration,
+                this.props.timeZone
+            ) : false;
+    }
+
+    setupWarningTooltip(memberExpired, memberDisabled, member) {
+        var tooltip = "Member is ";
+        var parts = [];
+        if (memberExpired) {
+            parts.push("expired");
+        }
+        if (memberDisabled) {
+            if ((member.systemDisabled & MEMBER_ATHENZ_SYSTEM_DISABLED) === MEMBER_ATHENZ_SYSTEM_DISABLED) {
+                parts.push("disabled by the Athenz System");
+            } 
+            if ((member.systemDisabled & MEMBER_AUTHORITY_FILTER_DISABLED) === MEMBER_AUTHORITY_FILTER_DISABLED) {
+                parts.push("disabled by the Authority Filter");
+            } 
+            if ((member.systemDisabled & MEMBER_AUTHORITY_SYSTEM_SUSPENDED) === MEMBER_AUTHORITY_SYSTEM_SUSPENDED) {
+                parts.push("suspended by the Authority System");
+            }
+        }
+        tooltip += parts.join(", and ");
+        return tooltip;
+    }
+
     render() {
         let rows = [];
         let left = 'left';
@@ -287,12 +329,32 @@ class MemberRow extends React.Component {
                 '-' +
                 this.props.collection ===
             this.props.newMember;
+        // setting up warning for suspended/disabled users
+        let memberExpired = this.isMemberExpired(member);
+        let memberDisabled = this.isMemberDisabled(member);
+        let showWarningIcon = memberDisabled || memberExpired;
+        let warningTooltip = this.setupWarningTooltip(memberExpired, memberDisabled, member)
+
         rows.push(
             <TrStyled
                 key={member.memberName}
                 data-testid='member-row'
                 isSuccess={isSuccess}
             >
+                <TDStyled color={color} align={left}>
+                { showWarningIcon ? 
+                   <span>
+                           <Icon
+                               icon={'warning'}
+                               color={colors.red800}
+                               size={'1.25em'}
+                               verticalAlign={'middle'}
+                               title={warningTooltip}
+                           />
+                    </span> 
+                    : ''
+                }
+               </TDStyled>
                 {member.memberName.includes(':group.') ? (
                     <GroupTDStyled color={color} align={left}>
                         <StyledMenu
@@ -320,7 +382,7 @@ class MemberRow extends React.Component {
                 </TDStyled>
 
                 <TDStyled color={color} align={left}>
-                    <EditDiv>
+                    <EditDiv expired={memberExpired}>
                         {member.expiration
                             ? this.localDate.getLocalDate(
                                   member.expiration,
diff --git a/ui/src/components/member/MemberTable.js b/ui/src/components/member/MemberTable.js
index 4457a6f478d..79ec3024708 100644
--- a/ui/src/components/member/MemberTable.js
+++ b/ui/src/components/member/MemberTable.js
@@ -91,6 +91,18 @@ const TableThStyled = styled.th`
     display: block;
 `;
 
+const TableThStyledExpand = styled.th` 
+    height: 25px;
+    margin-left: 10px;
+    margin-top: 10px;
+    text-align: left;
+    padding: 5px 0 5px 15px;
+    vertical-align: middle;
+    font-weight: lighter;
+    word-break: break-all;
+    display: table-cell;
+`;
+
 const LeftMarginSpan = styled.span`
     margin-right: 10px;
     verticalalign: bottom;
@@ -120,9 +132,10 @@ export default class MemberTable extends React.Component {
         let expandMembers = this.expandMembers.bind(this);
         let rows = [];
         let length = this.props.members ? this.props.members.length : 0;
-        let columnWidthPercentages = this.props.category === 'role' ? 19.5 : 26;
+        let columnWidthPercentages = this.props.category === 'role' ? 18.5 : 25;
         let pendingStateColumnWidthPercentages = 14;
         let deleteColumnWidthPercentages = 8;
+        let warningColumnWidthPercentages = 1;
         if (this.props.members && this.props.members.length > 0) {
             rows = this.props.members
                 .sort((a, b) => {
@@ -187,7 +200,7 @@ export default class MemberTable extends React.Component {
             <StyleTable data-testid='member-table'>
                 <thead>
                     <tr>
-                        <TableThStyled>
+                        <TableThStyledExpand colSpan="3">
                             <LeftMarginSpan>
                                 <Icon
                                     icon={
@@ -203,9 +216,14 @@ export default class MemberTable extends React.Component {
                                 />
                             </LeftMarginSpan>
                             {`${caption} (${length})`}
-                        </TableThStyled>
+                        </TableThStyledExpand>
                     </tr>
                     <tr>
+                        <TableHeadStyled
+                            width={warningColumnWidthPercentages}
+                            align={center}
+                        >
+                        </TableHeadStyled>
                         <TableHeadStyledRoleName
                             width={columnWidthPercentages}
                             align={left}
diff --git a/ui/src/components/utils/DateUtils.js b/ui/src/components/utils/DateUtils.js
index 9a0e829855d..8db09b086f9 100644
--- a/ui/src/components/utils/DateUtils.js
+++ b/ui/src/components/utils/DateUtils.js
@@ -48,6 +48,12 @@ class DateUtils {
         return inputDay >= minusSevenDays;
     }
 
+    isExpired(dateToCheck, currentTimezone) {
+        return moment().isAfter(
+            moment(dateToCheck, 'YYYY-MM-DDTHH:mm:ss.SSSZ', currentTimezone)
+        )
+    }
+
     getCurrentTimeZone() {
         return Intl.DateTimeFormat().resolvedOptions().timeZone;
     }