diff --git a/ui/src/__tests__/components/group/__snapshots__/GroupRow.test.js.snap b/ui/src/__tests__/components/group/__snapshots__/GroupRow.test.js.snap
index 521a36ccb1b..295b939a2ee 100644
--- a/ui/src/__tests__/components/group/__snapshots__/GroupRow.test.js.snap
+++ b/ui/src/__tests__/components/group/__snapshots__/GroupRow.test.js.snap
@@ -10,7 +10,7 @@ exports[`GroupRow should render 1`] = `
   border-image: none;
   -webkit-border-image: initial;
   border-image: initial;
-  height: 50px;
+  padding: 5px 0 5px 15px;
 }
 
 .emotion-2 {
@@ -138,6 +138,30 @@ exports[`GroupRow should render 1`] = `
       </svg>
     </span>
   </td>
+  <td
+    class="emotion-6 emotion-3"
+    color="#3570f40D"
+  >
+    <span>
+      <svg
+        class="emotion-12"
+        data-testid="icon"
+        height="1.25em"
+        viewBox="0 0 1024 1024"
+        width="1.25em"
+      >
+        <title>
+          time-history
+        </title>
+        <path
+          d="M981.333 512c-1.127 258.351-210.821 467.35-469.329 467.35-183.080 0-341.676-104.828-419.040-257.735l-1.23-2.682c-3.724-6.205-5.927-13.692-5.927-21.694 0-13.702 6.458-25.895 16.497-33.701l0.096-0.072c7.082-5.427 16.067-8.696 25.816-8.696 16.626 0 31.031 9.51 38.072 23.387l0.112 0.243c63.468 129.74 194.499 217.51 346.030 217.51 212.077 0 384-171.923 384-384s-171.923-384-384-384c-113.597 0-215.674 49.327-285.979 127.729l-0.318 0.361h113.067c0.244-0.005 0.531-0.007 0.819-0.007 21.726 0 39.84 15.466 43.934 35.989l0.048 0.286c0.307 1.924 0.483 4.143 0.483 6.403 0 23.564-19.103 42.667-42.667 42.667-0.17 0-0.34-0.001-0.509-0.003l0.026 0h-213.333c-23.564 0-42.667-19.103-42.667-42.667v0-211.2c-0.005-0.244-0.007-0.531-0.007-0.819 0-21.726 15.466-39.84 35.989-43.934l0.286-0.048c1.924-0.307 4.143-0.483 6.403-0.483 23.564 0 42.667 19.103 42.667 42.667 0 0.17-0.001 0.34-0.003 0.509l0-0.026v104.533c85.767-90.732 206.955-147.207 341.333-147.207 259.206 0 469.333 210.128 469.333 469.333 0 0.003-0 0.005-0 0.008l0-0.001z"
+        />
+        <path
+          d="M725.333 682.667c-0.223 0.005-0.486 0.008-0.749 0.008-7.696 0-14.832-2.397-20.703-6.486l0.118 0.078-234.667-140.8v-236.8c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 189.867l192 115.2c12.808 6.981 21.354 20.347 21.354 35.708 0 8.131-2.394 15.703-6.516 22.049l0.096-0.157c-6.984 12.799-20.345 21.337-35.7 21.337-0.199 0-0.398-0.001-0.597-0.004l0.030 0z"
+        />
+      </svg>
+    </span>
+  </td>
   <td
     class="emotion-6 emotion-3"
     color="#3570f40D"
diff --git a/ui/src/__tests__/components/group/__snapshots__/GroupTable.test.js.snap b/ui/src/__tests__/components/group/__snapshots__/GroupTable.test.js.snap
index 2a9ba1be57e..9939eccc4bb 100644
--- a/ui/src/__tests__/components/group/__snapshots__/GroupTable.test.js.snap
+++ b/ui/src/__tests__/components/group/__snapshots__/GroupTable.test.js.snap
@@ -34,7 +34,7 @@ exports[`GroupTable should render 1`] = `
   word-break: break-all;
 }
 
-.emotion-16 {
+.emotion-18 {
   box-sizing: border-box;
   margin-top: 10px;
   box-shadow: 0 1px 4px #d9d9d9;
@@ -43,28 +43,28 @@ exports[`GroupTable should render 1`] = `
   border-image: none;
   -webkit-border-image: initial;
   border-image: initial;
-  height: 50px;
+  padding: 5px 0 5px 15px;
 }
 
-.emotion-18 {
+.emotion-20 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-20 {
+.emotion-22 {
   padding-left: 20px;
 }
 
-.emotion-22 {
+.emotion-24 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
 }
 
-.emotion-28 {
+.emotion-30 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
@@ -85,16 +85,19 @@ exports[`GroupTable should render 1`] = `
       style="width: 15%;"
     />
     <col
-      style="width: 10%;"
+      style="width: 8%;"
     />
     <col
-      style="width: 10%;"
+      style="width: 8%;"
     />
     <col
-      style="width: 10%;"
+      style="width: 8%;"
     />
     <col
-      style="width: 10%;"
+      style="width: 8%;"
+    />
+    <col
+      style="width: 8%;"
     />
   </colgroup>
   <thead>
@@ -129,6 +132,11 @@ exports[`GroupTable should render 1`] = `
       >
         Settings
       </th>
+      <th
+        class="emotion-4 emotion-5"
+      >
+        History
+      </th>
       <th
         class="emotion-4 emotion-5"
       >
@@ -138,39 +146,39 @@ exports[`GroupTable should render 1`] = `
   </thead>
   <tbody>
     <tr
-      class="emotion-16 emotion-17"
+      class="emotion-18 emotion-19"
       data-testid="group-row"
     >
       <td
-        class="emotion-18 emotion-19"
+        class="emotion-20 emotion-21"
         color=""
       >
         
         <span
-          class="emotion-20 emotion-21"
+          class="emotion-22 emotion-23"
         >
            a
         </span>
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         Invalid date
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         N/A
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         <span>
           <svg
-            class="emotion-28"
+            class="emotion-30"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -192,12 +200,12 @@ exports[`GroupTable should render 1`] = `
         </span>
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         <span>
           <svg
-            class="emotion-28"
+            class="emotion-30"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -213,12 +221,12 @@ exports[`GroupTable should render 1`] = `
         </span>
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         <span>
           <svg
-            class="emotion-28"
+            class="emotion-30"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -237,12 +245,36 @@ exports[`GroupTable should render 1`] = `
         </span>
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         <span>
           <svg
-            class="emotion-28"
+            class="emotion-30"
+            data-testid="icon"
+            height="1.25em"
+            viewBox="0 0 1024 1024"
+            width="1.25em"
+          >
+            <title>
+              time-history
+            </title>
+            <path
+              d="M981.333 512c-1.127 258.351-210.821 467.35-469.329 467.35-183.080 0-341.676-104.828-419.040-257.735l-1.23-2.682c-3.724-6.205-5.927-13.692-5.927-21.694 0-13.702 6.458-25.895 16.497-33.701l0.096-0.072c7.082-5.427 16.067-8.696 25.816-8.696 16.626 0 31.031 9.51 38.072 23.387l0.112 0.243c63.468 129.74 194.499 217.51 346.030 217.51 212.077 0 384-171.923 384-384s-171.923-384-384-384c-113.597 0-215.674 49.327-285.979 127.729l-0.318 0.361h113.067c0.244-0.005 0.531-0.007 0.819-0.007 21.726 0 39.84 15.466 43.934 35.989l0.048 0.286c0.307 1.924 0.483 4.143 0.483 6.403 0 23.564-19.103 42.667-42.667 42.667-0.17 0-0.34-0.001-0.509-0.003l0.026 0h-213.333c-23.564 0-42.667-19.103-42.667-42.667v0-211.2c-0.005-0.244-0.007-0.531-0.007-0.819 0-21.726 15.466-39.84 35.989-43.934l0.286-0.048c1.924-0.307 4.143-0.483 6.403-0.483 23.564 0 42.667 19.103 42.667 42.667 0 0.17-0.001 0.34-0.003 0.509l0-0.026v104.533c85.767-90.732 206.955-147.207 341.333-147.207 259.206 0 469.333 210.128 469.333 469.333 0 0.003-0 0.005-0 0.008l0-0.001z"
+            />
+            <path
+              d="M725.333 682.667c-0.223 0.005-0.486 0.008-0.749 0.008-7.696 0-14.832-2.397-20.703-6.486l0.118 0.078-234.667-140.8v-236.8c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 189.867l192 115.2c12.808 6.981 21.354 20.347 21.354 35.708 0 8.131-2.394 15.703-6.516 22.049l0.096-0.157c-6.984 12.799-20.345 21.337-35.7 21.337-0.199 0-0.398-0.001-0.597-0.004l0.030 0z"
+            />
+          </svg>
+        </span>
+      </td>
+      <td
+        class="emotion-24 emotion-21"
+        color=""
+      >
+        <span>
+          <svg
+            class="emotion-30"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -262,39 +294,39 @@ exports[`GroupTable should render 1`] = `
       </td>
     </tr>
     <tr
-      class="emotion-16 emotion-17"
+      class="emotion-18 emotion-19"
       data-testid="group-row"
     >
       <td
-        class="emotion-18 emotion-19"
+        class="emotion-20 emotion-21"
         color=""
       >
         
         <span
-          class="emotion-20 emotion-21"
+          class="emotion-22 emotion-23"
         >
            b
         </span>
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         Invalid date
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         N/A
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         <span>
           <svg
-            class="emotion-28"
+            class="emotion-30"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -316,12 +348,12 @@ exports[`GroupTable should render 1`] = `
         </span>
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         <span>
           <svg
-            class="emotion-28"
+            class="emotion-30"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -337,12 +369,12 @@ exports[`GroupTable should render 1`] = `
         </span>
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
         color=""
       >
         <span>
           <svg
-            class="emotion-28"
+            class="emotion-30"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -361,12 +393,36 @@ exports[`GroupTable should render 1`] = `
         </span>
       </td>
       <td
-        class="emotion-22 emotion-19"
+        class="emotion-24 emotion-21"
+        color=""
+      >
+        <span>
+          <svg
+            class="emotion-30"
+            data-testid="icon"
+            height="1.25em"
+            viewBox="0 0 1024 1024"
+            width="1.25em"
+          >
+            <title>
+              time-history
+            </title>
+            <path
+              d="M981.333 512c-1.127 258.351-210.821 467.35-469.329 467.35-183.080 0-341.676-104.828-419.040-257.735l-1.23-2.682c-3.724-6.205-5.927-13.692-5.927-21.694 0-13.702 6.458-25.895 16.497-33.701l0.096-0.072c7.082-5.427 16.067-8.696 25.816-8.696 16.626 0 31.031 9.51 38.072 23.387l0.112 0.243c63.468 129.74 194.499 217.51 346.030 217.51 212.077 0 384-171.923 384-384s-171.923-384-384-384c-113.597 0-215.674 49.327-285.979 127.729l-0.318 0.361h113.067c0.244-0.005 0.531-0.007 0.819-0.007 21.726 0 39.84 15.466 43.934 35.989l0.048 0.286c0.307 1.924 0.483 4.143 0.483 6.403 0 23.564-19.103 42.667-42.667 42.667-0.17 0-0.34-0.001-0.509-0.003l0.026 0h-213.333c-23.564 0-42.667-19.103-42.667-42.667v0-211.2c-0.005-0.244-0.007-0.531-0.007-0.819 0-21.726 15.466-39.84 35.989-43.934l0.286-0.048c1.924-0.307 4.143-0.483 6.403-0.483 23.564 0 42.667 19.103 42.667 42.667 0 0.17-0.001 0.34-0.003 0.509l0-0.026v104.533c85.767-90.732 206.955-147.207 341.333-147.207 259.206 0 469.333 210.128 469.333 469.333 0 0.003-0 0.005-0 0.008l0-0.001z"
+            />
+            <path
+              d="M725.333 682.667c-0.223 0.005-0.486 0.008-0.749 0.008-7.696 0-14.832-2.397-20.703-6.486l0.118 0.078-234.667-140.8v-236.8c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 189.867l192 115.2c12.808 6.981 21.354 20.347 21.354 35.708 0 8.131-2.394 15.703-6.516 22.049l0.096-0.157c-6.984 12.799-20.345 21.337-35.7 21.337-0.199 0-0.398-0.001-0.597-0.004l0.030 0z"
+            />
+          </svg>
+        </span>
+      </td>
+      <td
+        class="emotion-24 emotion-21"
         color=""
       >
         <span>
           <svg
-            class="emotion-28"
+            class="emotion-30"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
diff --git a/ui/src/__tests__/components/role-policy/__snapshots__/RolePolicyRuleTable.test.js.snap b/ui/src/__tests__/components/role-policy/__snapshots__/RolePolicyRuleTable.test.js.snap
index b62ed4a48af..4941acbe6c6 100644
--- a/ui/src/__tests__/components/role-policy/__snapshots__/RolePolicyRuleTable.test.js.snap
+++ b/ui/src/__tests__/components/role-policy/__snapshots__/RolePolicyRuleTable.test.js.snap
@@ -69,28 +69,6 @@ exports[`PolicyRuleTable should render 1`] = `
   background-color: white;
 }
 
-.emotion-22 {
-  background-color: #3570f40D;
-  text-align: left;
-  padding: 5px 0 5px 15px;
-  vertical-align: middle;
-  word-break: break-all;
-}
-
-.emotion-30 {
-  background-color: #3570f40D;
-  text-align: center;
-  padding: 5px 0 5px 15px;
-  vertical-align: middle;
-  word-break: break-all;
-}
-
-.emotion-32 {
-  fill: #188fff;
-  cursor: pointer;
-  vertical-align: text-bottom;
-}
-
 <table
   class="emotion-0 emotion-1"
   data-testid="role-policy-rule-table"
@@ -158,56 +136,7 @@ exports[`PolicyRuleTable should render 1`] = `
                 />
               </tr>
             </thead>
-            <tbody>
-              <tr>
-                <td
-                  class="emotion-22 emotion-23"
-                  color="#3570f40D"
-                >
-                  ALLOW
-                </td>
-                <td
-                  class="emotion-22 emotion-23"
-                  color="#3570f40D"
-                >
-                  aaa
-                </td>
-                <td
-                  class="emotion-22 emotion-23"
-                  color="#3570f40D"
-                >
-                  home.pgote:role.allunixusers
-                </td>
-                <td
-                  class="emotion-22 emotion-23"
-                  color="#3570f40D"
-                >
-                  home.pgote:aaaa
-                </td>
-                <td
-                  class="emotion-30 emotion-23"
-                  color="#3570f40D"
-                >
-                  <svg
-                    class="emotion-32"
-                    data-testid="icon"
-                    height="1.25em"
-                    viewBox="0 0 1024 1024"
-                    width="1.25em"
-                  >
-                    <title>
-                      trash
-                    </title>
-                    <path
-                      d="M917.333 187.733c0.007 0.319 0.012 0.694 0.012 1.071 0 12.755-4.867 24.374-12.846 33.1l0.034-0.038c-6.696 7.89-16.62 12.864-27.706 12.864-0.76 0-1.515-0.023-2.264-0.069l0.103 0.005h-256c-23.564 0-42.667-19.103-42.667-42.667v0-42.667h-128v42.667c0 23.564-19.103 42.667-42.667 42.667v0h-253.867c-0.136 0.001-0.298 0.002-0.459 0.002-22.485 0-41.102-16.565-44.311-38.157l-0.030-0.245c-0.007-0.319-0.012-0.694-0.012-1.071 0-12.755 4.867-24.374 12.846-33.1l-0.034 0.038c6.696-7.89 16.62-12.864 27.706-12.864 0.76 0 1.515 0.023 2.264 0.069l-0.103-0.005h213.333v-42.667c0-23.564 19.103-42.667 42.667-42.667v0h213.333c23.564 0 42.667 19.103 42.667 42.667v0 42.667h211.2c0.136-0.001 0.298-0.002 0.459-0.002 22.485 0 41.102 16.565 44.311 38.157l0.030 0.245z"
-                    />
-                    <path
-                      d="M742.4 358.4l-51.2 516.267h-358.4l-51.2-516.267c-2.24-21.656-20.391-38.401-42.453-38.401-0.075 0-0.15 0-0.225 0.001l0.012-0c-0.064-0-0.139-0.001-0.214-0.001-23.564 0-42.667 19.103-42.667 42.667 0 1.503 0.078 2.988 0.229 4.45l-0.015-0.183 55.467 554.667c2.24 21.656 20.391 38.401 42.453 38.401 0.075 0 0.15-0 0.225-0.001l-0.012 0h435.2c0.064 0 0.139 0.001 0.214 0.001 22.062 0 40.213-16.744 42.437-38.218l0.015-0.183 55.467-554.667c0.136-1.28 0.214-2.764 0.214-4.267 0-23.564-19.103-42.667-42.667-42.667-0.075 0-0.15 0-0.226 0.001l0.012-0c-0.064-0-0.139-0.001-0.214-0.001-22.062 0-40.213 16.744-42.437 38.218l-0.015 0.183z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
+            <tbody />
           </table>
         </div>
       </td>
@@ -285,28 +214,6 @@ exports[`PolicyRuleTable should render 2`] = `
   background-color: white;
 }
 
-.emotion-22 {
-  background-color: #3570f40D;
-  text-align: left;
-  padding: 5px 0 5px 15px;
-  vertical-align: middle;
-  word-break: break-all;
-}
-
-.emotion-30 {
-  background-color: #3570f40D;
-  text-align: center;
-  padding: 5px 0 5px 15px;
-  vertical-align: middle;
-  word-break: break-all;
-}
-
-.emotion-32 {
-  fill: #188fff;
-  cursor: pointer;
-  vertical-align: text-bottom;
-}
-
 <table
   class="emotion-0 emotion-1"
   data-testid="role-policy-rule-table"
@@ -374,56 +281,7 @@ exports[`PolicyRuleTable should render 2`] = `
                 />
               </tr>
             </thead>
-            <tbody>
-              <tr>
-                <td
-                  class="emotion-22 emotion-23"
-                  color="#3570f40D"
-                >
-                  ALLOW
-                </td>
-                <td
-                  class="emotion-22 emotion-23"
-                  color="#3570f40D"
-                >
-                  aaa
-                </td>
-                <td
-                  class="emotion-22 emotion-23"
-                  color="#3570f40D"
-                >
-                  home.pgote:role.allunixusers
-                </td>
-                <td
-                  class="emotion-22 emotion-23"
-                  color="#3570f40D"
-                >
-                  home.pgote:aaaa
-                </td>
-                <td
-                  class="emotion-30 emotion-23"
-                  color="#3570f40D"
-                >
-                  <svg
-                    class="emotion-32"
-                    data-testid="icon"
-                    height="1.25em"
-                    viewBox="0 0 1024 1024"
-                    width="1.25em"
-                  >
-                    <title>
-                      trash
-                    </title>
-                    <path
-                      d="M917.333 187.733c0.007 0.319 0.012 0.694 0.012 1.071 0 12.755-4.867 24.374-12.846 33.1l0.034-0.038c-6.696 7.89-16.62 12.864-27.706 12.864-0.76 0-1.515-0.023-2.264-0.069l0.103 0.005h-256c-23.564 0-42.667-19.103-42.667-42.667v0-42.667h-128v42.667c0 23.564-19.103 42.667-42.667 42.667v0h-253.867c-0.136 0.001-0.298 0.002-0.459 0.002-22.485 0-41.102-16.565-44.311-38.157l-0.030-0.245c-0.007-0.319-0.012-0.694-0.012-1.071 0-12.755 4.867-24.374 12.846-33.1l-0.034 0.038c6.696-7.89 16.62-12.864 27.706-12.864 0.76 0 1.515 0.023 2.264 0.069l-0.103-0.005h213.333v-42.667c0-23.564 19.103-42.667 42.667-42.667v0h213.333c23.564 0 42.667 19.103 42.667 42.667v0 42.667h211.2c0.136-0.001 0.298-0.002 0.459-0.002 22.485 0 41.102 16.565 44.311 38.157l0.030 0.245z"
-                    />
-                    <path
-                      d="M742.4 358.4l-51.2 516.267h-358.4l-51.2-516.267c-2.24-21.656-20.391-38.401-42.453-38.401-0.075 0-0.15 0-0.225 0.001l0.012-0c-0.064-0-0.139-0.001-0.214-0.001-23.564 0-42.667 19.103-42.667 42.667 0 1.503 0.078 2.988 0.229 4.45l-0.015-0.183 55.467 554.667c2.24 21.656 20.391 38.401 42.453 38.401 0.075 0 0.15-0 0.225-0.001l-0.012 0h435.2c0.064 0 0.139 0.001 0.214 0.001 22.062 0 40.213-16.744 42.437-38.218l0.015-0.183 55.467-554.667c0.136-1.28 0.214-2.764 0.214-4.267 0-23.564-19.103-42.667-42.667-42.667-0.075 0-0.15 0-0.226 0.001l0.012-0c-0.064-0-0.139-0.001-0.214-0.001-22.062 0-40.213 16.744-42.437 38.218l-0.015 0.183z"
-                    />
-                  </svg>
-                </td>
-              </tr>
-            </tbody>
+            <tbody />
           </table>
         </div>
       </td>
diff --git a/ui/src/__tests__/components/role/__snapshots__/RoleGroup.test.js.snap b/ui/src/__tests__/components/role/__snapshots__/RoleGroup.test.js.snap
index bc231386559..8a5e181744b 100644
--- a/ui/src/__tests__/components/role/__snapshots__/RoleGroup.test.js.snap
+++ b/ui/src/__tests__/components/role/__snapshots__/RoleGroup.test.js.snap
@@ -10,68 +10,81 @@ exports[`RoleGroup should render 1`] = `
   border-image: none;
   -webkit-border-image: initial;
   border-image: initial;
-  height: 50px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 10px 0 10px 0;
 }
 
 .emotion-2 {
   text-align: left;
-  padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
+  width: 100%;
 }
 
 .emotion-4 {
+  padding-left: 20px;
+  width: 100%;
+}
+
+.emotion-6 {
   margin-right: 10px;
   verticalalign: bottom；;
 }
 
-.emotion-6 {
+.emotion-8 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-.emotion-7 {
+.emotion-9 {
   text-align: center;
-  padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
+  width: 100%;
 }
 
-<tr
+<div
   class="emotion-0 emotion-1"
   data-testid="role-group"
 >
-  <td
+  <div
     class="emotion-2 emotion-3"
   >
-    <span
+    <div
       class="emotion-4 emotion-5"
     >
-      <svg
-        class="emotion-6"
-        data-testid="icon"
-        height="1.25em"
-        viewBox="0 0 1024 1024"
-        width="1.25em"
+      <span
+        class="emotion-6 emotion-7"
       >
-        <title>
-          arrowhead-down-circle
-        </title>
-        <path
-          d="M512 896c-212.077 0-384-171.923-384-384s171.923-384 384-384c212.077 0 384 171.923 384 384v0c-1.203 211.592-172.408 382.797-383.885 383.999l-0.115 0.001zM512 981.333c259.206 0 469.333-210.128 469.333-469.333s-210.128-469.333-469.333-469.333c-259.206 0-469.333 210.128-469.333 469.333v0c-0.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.005l-0.117 0z"
-        />
-        <path
-          d="M512 558.933l-140.8-140.8c-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 170.667 168.533c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 170.667-168.533c7.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.042z"
-        />
-      </svg>
-    </span>
-    AWS Roles (2)
-  </td>
-  <td
-    class="emotion-7 emotion-3"
+        <svg
+          class="emotion-8"
+          data-testid="icon"
+          height="1.25em"
+          viewBox="0 0 1024 1024"
+          width="1.25em"
+        >
+          <title>
+            arrowhead-down-circle
+          </title>
+          <path
+            d="M512 896c-212.077 0-384-171.923-384-384s171.923-384 384-384c212.077 0 384 171.923 384 384v0c-1.203 211.592-172.408 382.797-383.885 383.999l-0.115 0.001zM512 981.333c259.206 0 469.333-210.128 469.333-469.333s-210.128-469.333-469.333-469.333c-259.206 0-469.333 210.128-469.333 469.333v0c-0.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.005l-0.117 0z"
+          />
+          <path
+            d="M512 558.933l-140.8-140.8c-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 170.667 168.533c7.434 8.083 18.061 13.13 29.867 13.13s22.432-5.047 29.84-13.101l0.026-0.029 170.667-168.533c7.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.042z"
+          />
+        </svg>
+      </span>
+      AWS Roles (2)
+    </div>
+  </div>
+  <div
+    class="emotion-9 emotion-3"
   />
-</tr>
+</div>
 `;
 
 exports[`RoleGroup should render empty 1`] = `null`;
diff --git a/ui/src/__tests__/components/role/__snapshots__/RoleList.test.js.snap b/ui/src/__tests__/components/role/__snapshots__/RoleList.test.js.snap
index ea8a880ba3c..4ce9d32878b 100644
--- a/ui/src/__tests__/components/role/__snapshots__/RoleList.test.js.snap
+++ b/ui/src/__tests__/components/role/__snapshots__/RoleList.test.js.snap
@@ -298,42 +298,32 @@ exports[`RoleList should render 1`] = `
 }
 
 .emotion-17 {
-  text-align: left;
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
+  border-bottom: 2px solid rgb(213, 213, 213);
+  color: rgb(154, 154, 154);
   font-size: 0.8rem;
-  padding-bottom: 5px;
   vertical-align: top;
   text-transform: uppercase;
-  padding: 5px 0 5px 35px;
+  padding: 5px 0px 5px 15px;
   word-break: break-all;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .emotion-19 {
   text-align: left;
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
-  font-size: 0.8rem;
-  padding-bottom: 5px;
-  vertical-align: top;
-  text-transform: uppercase;
-  padding: 5px 0 5px 15px;
-  word-break: break-all;
+  width: 28%;
+}
+
+.emotion-21 {
+  text-align: left;
+  width: 15%;
 }
 
-.emotion-23 {
+.emotion-25 {
   text-align: center;
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
-  font-size: 0.8rem;
-  padding-bottom: 5px;
-  vertical-align: top;
-  text-transform: uppercase;
-  padding: 5px 0 5px 15px;
-  word-break: break-all;
+  width: 7%;
 }
 
 <div
@@ -419,60 +409,65 @@ exports[`RoleList should render 1`] = `
       
     </div>
   </div>
-  <table
+  <div
     class="emotion-15 emotion-16"
     data-testid="roletable"
   >
-    <thead>
-      <tr>
-        <th
-          class="emotion-17 emotion-18"
-        >
-          Role
-        </th>
-        <th
-          class="emotion-19 emotion-20"
-        >
-          Modified Date
-        </th>
-        <th
-          class="emotion-19 emotion-20"
-        >
-          Reviewed Date
-        </th>
-        <th
-          class="emotion-23 emotion-20"
-        >
-          Members
-        </th>
-        <th
-          class="emotion-23 emotion-20"
-        >
-          Review
-        </th>
-        <th
-          class="emotion-23 emotion-20"
-        >
-          Policy Rule
-        </th>
-        <th
-          class="emotion-23 emotion-20"
-        >
-          Tags
-        </th>
-        <th
-          class="emotion-23 emotion-20"
-        >
-          Settings
-        </th>
-        <th
-          class="emotion-23 emotion-20"
-        >
-          Delete
-        </th>
-      </tr>
-    </thead>
+    <div
+      class="emotion-17 emotion-18"
+    >
+      <div
+        class="emotion-19 emotion-20"
+      >
+        Role
+      </div>
+      <div
+        class="emotion-21 emotion-22"
+      >
+        Modified Date
+      </div>
+      <div
+        class="emotion-21 emotion-22"
+      >
+        Reviewed Date
+      </div>
+      <div
+        class="emotion-25 emotion-26"
+      >
+        Members
+      </div>
+      <div
+        class="emotion-25 emotion-26"
+      >
+        Review
+      </div>
+      <div
+        class="emotion-25 emotion-26"
+      >
+        Policy Rule
+      </div>
+      <div
+        class="emotion-25 emotion-26"
+      >
+        Tags
+      </div>
+      <div
+        class="emotion-25 emotion-26"
+      >
+        Settings
+      </div>
+      <div
+        class="emotion-25 emotion-26"
+      >
+        History
+      </div>
+      <div
+        class="emotion-25 emotion-26"
+      >
+        Delete
+      </div>
+    </div>
     <tbody />
-  </table>
+  </div>
 </div>
 `;
diff --git a/ui/src/__tests__/components/role/__snapshots__/RoleRow.test.js.snap b/ui/src/__tests__/components/role/__snapshots__/RoleRow.test.js.snap
index 3cf26eb8086..637cdf91418 100644
--- a/ui/src/__tests__/components/role/__snapshots__/RoleRow.test.js.snap
+++ b/ui/src/__tests__/components/role/__snapshots__/RoleRow.test.js.snap
@@ -10,7 +10,11 @@ exports[`RoleRow should render 1`] = `
   border-image: none;
   -webkit-border-image: initial;
   border-image: initial;
-  height: 50px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 5px 0 5px 15px;
 }
 
 .emotion-2 {
@@ -19,18 +23,29 @@ exports[`RoleRow should render 1`] = `
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
+  width: 28%;
 }
 
 .emotion-4 {
   padding-left: 20px;
 }
 
+.emotion-6 {
+  background-color: #3570f40D;
+  text-align: left;
+  padding: 5px 0 5px 15px;
+  vertical-align: middle;
+  word-break: break-all;
+  width: 16%;
+}
+
 .emotion-10 {
   background-color: #3570f40D;
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
+  width: 7%;
 }
 
 .emotion-12 {
@@ -39,11 +54,11 @@ exports[`RoleRow should render 1`] = `
   vertical-align: text-bottom;
 }
 
-<tr
+<div
   class="emotion-0 emotion-1"
   data-testid="role-row"
 >
-  <td
+  <div
     class="emotion-2 emotion-3"
     color="#3570f40D"
   >
@@ -54,21 +69,21 @@ exports[`RoleRow should render 1`] = `
     >
        ztssia_cert_rotate
     </span>
-  </td>
-  <td
-    class="emotion-2 emotion-3"
+  </div>
+  <div
+    class="emotion-6 emotion-7"
     color="#3570f40D"
   >
     2017-08-03 18:44 UTC
-  </td>
-  <td
-    class="emotion-2 emotion-3"
+  </div>
+  <div
+    class="emotion-6 emotion-7"
     color="#3570f40D"
   >
     N/A
-  </td>
-  <td
-    class="emotion-10 emotion-3"
+  </div>
+  <div
+    class="emotion-10 emotion-11"
     color="#3570f40D"
   >
     <span>
@@ -93,9 +108,9 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
-    class="emotion-10 emotion-3"
+  </div>
+  <div
+    class="emotion-10 emotion-11"
     color="#3570f40D"
   >
     <span>
@@ -120,9 +135,9 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
-    class="emotion-10 emotion-3"
+  </div>
+  <div
+    class="emotion-10 emotion-11"
     color="#3570f40D"
   >
     <span>
@@ -141,9 +156,9 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
-    class="emotion-10 emotion-3"
+  </div>
+  <div
+    class="emotion-10 emotion-11"
     color="#3570f40D"
   >
     <span>
@@ -165,9 +180,9 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
-    class="emotion-10 emotion-3"
+  </div>
+  <div
+    class="emotion-10 emotion-11"
     color="#3570f40D"
   >
     <span>
@@ -189,9 +204,33 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
-    class="emotion-10 emotion-3"
+  </div>
+  <div
+    class="emotion-10 emotion-11"
+    color="#3570f40D"
+  >
+    <span>
+      <svg
+        class="emotion-12"
+        data-testid="icon"
+        height="1.25em"
+        viewBox="0 0 1024 1024"
+        width="1.25em"
+      >
+        <title>
+          time-history
+        </title>
+        <path
+          d="M981.333 512c-1.127 258.351-210.821 467.35-469.329 467.35-183.080 0-341.676-104.828-419.040-257.735l-1.23-2.682c-3.724-6.205-5.927-13.692-5.927-21.694 0-13.702 6.458-25.895 16.497-33.701l0.096-0.072c7.082-5.427 16.067-8.696 25.816-8.696 16.626 0 31.031 9.51 38.072 23.387l0.112 0.243c63.468 129.74 194.499 217.51 346.030 217.51 212.077 0 384-171.923 384-384s-171.923-384-384-384c-113.597 0-215.674 49.327-285.979 127.729l-0.318 0.361h113.067c0.244-0.005 0.531-0.007 0.819-0.007 21.726 0 39.84 15.466 43.934 35.989l0.048 0.286c0.307 1.924 0.483 4.143 0.483 6.403 0 23.564-19.103 42.667-42.667 42.667-0.17 0-0.34-0.001-0.509-0.003l0.026 0h-213.333c-23.564 0-42.667-19.103-42.667-42.667v0-211.2c-0.005-0.244-0.007-0.531-0.007-0.819 0-21.726 15.466-39.84 35.989-43.934l0.286-0.048c1.924-0.307 4.143-0.483 6.403-0.483 23.564 0 42.667 19.103 42.667 42.667 0 0.17-0.001 0.34-0.003 0.509l0-0.026v104.533c85.767-90.732 206.955-147.207 341.333-147.207 259.206 0 469.333 210.128 469.333 469.333 0 0.003-0 0.005-0 0.008l0-0.001z"
+        />
+        <path
+          d="M725.333 682.667c-0.223 0.005-0.486 0.008-0.749 0.008-7.696 0-14.832-2.397-20.703-6.486l0.118 0.078-234.667-140.8v-236.8c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 189.867l192 115.2c12.808 6.981 21.354 20.347 21.354 35.708 0 8.131-2.394 15.703-6.516 22.049l0.096-0.157c-6.984 12.799-20.345 21.337-35.7 21.337-0.199 0-0.398-0.001-0.597-0.004l0.030 0z"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="emotion-10 emotion-11"
     color="#3570f40D"
   >
     <span>
@@ -213,6 +252,6 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-</tr>
+  </div>
+</div>
 `;
diff --git a/ui/src/__tests__/components/role/__snapshots__/RoleSectionRow.test.js.snap b/ui/src/__tests__/components/role/__snapshots__/RoleSectionRow.test.js.snap
index c9270b122da..c8c12d887a3 100644
--- a/ui/src/__tests__/components/role/__snapshots__/RoleSectionRow.test.js.snap
+++ b/ui/src/__tests__/components/role/__snapshots__/RoleSectionRow.test.js.snap
@@ -1,13 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RoleRow should render 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .emotion-2 {
   background-color: #3570f40D;
   text-align: left;
   padding: 5px 0 5px 0;
   vertical-align: middle;
   word-break: break-all;
-  width: 29%;
+  width: 28%;
 }
 
 .emotion-4 {
@@ -20,16 +27,7 @@ exports[`RoleRow should render 1`] = `
   padding: 5px 0 5px 0;
   vertical-align: middle;
   word-break: break-all;
-  width: 17%;
-}
-
-.emotion-8 {
-  background-color: #3570f40D;
-  text-align: left;
-  padding: 5px 0 5px 0;
-  vertical-align: middle;
-  word-break: break-all;
-  width: 12%;
+  width: 15%;
 }
 
 .emotion-10 {
@@ -38,7 +36,7 @@ exports[`RoleRow should render 1`] = `
   padding: 5px 0 5px 0;
   vertical-align: middle;
   word-break: break-all;
-  width: 9%;
+  width: 7%;
 }
 
 .emotion-12 {
@@ -47,20 +45,11 @@ exports[`RoleRow should render 1`] = `
   vertical-align: text-bottom;
 }
 
-.emotion-25 {
-  background-color: #3570f40D;
-  text-align: center;
-  padding: 5px 0 5px 0;
-  vertical-align: middle;
-  word-break: break-all;
-  width: 6%;
-}
-
-<tr
+<div
   class="emotion-0 emotion-1"
   data-testid="role-section-row"
 >
-  <td
+  <div
     class="emotion-2 emotion-3"
     color="#3570f40D"
   >
@@ -71,20 +60,20 @@ exports[`RoleRow should render 1`] = `
     >
        ztssia_cert_rotate
     </span>
-  </td>
-  <td
+  </div>
+  <div
     class="emotion-6 emotion-7"
     color="#3570f40D"
   >
     2017-08-03 18:44 UTC
-  </td>
-  <td
-    class="emotion-8 emotion-9"
+  </div>
+  <div
+    class="emotion-6 emotion-7"
     color="#3570f40D"
   >
     N/A
-  </td>
-  <td
+  </div>
+  <div
     class="emotion-10 emotion-11"
     color="#3570f40D"
   >
@@ -110,8 +99,8 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
+  </div>
+  <div
     class="emotion-10 emotion-11"
     color="#3570f40D"
   >
@@ -137,8 +126,8 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
+  </div>
+  <div
     class="emotion-10 emotion-11"
     color="#3570f40D"
   >
@@ -158,8 +147,8 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
+  </div>
+  <div
     class="emotion-10 emotion-11"
     color="#3570f40D"
   >
@@ -182,8 +171,8 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
+  </div>
+  <div
     class="emotion-10 emotion-11"
     color="#3570f40D"
   >
@@ -206,9 +195,33 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-  <td
-    class="emotion-25 emotion-26"
+  </div>
+  <div
+    class="emotion-10 emotion-11"
+    color="#3570f40D"
+  >
+    <span>
+      <svg
+        class="emotion-12"
+        data-testid="icon"
+        height="1.25em"
+        viewBox="0 0 1024 1024"
+        width="1.25em"
+      >
+        <title>
+          time-history
+        </title>
+        <path
+          d="M981.333 512c-1.127 258.351-210.821 467.35-469.329 467.35-183.080 0-341.676-104.828-419.040-257.735l-1.23-2.682c-3.724-6.205-5.927-13.692-5.927-21.694 0-13.702 6.458-25.895 16.497-33.701l0.096-0.072c7.082-5.427 16.067-8.696 25.816-8.696 16.626 0 31.031 9.51 38.072 23.387l0.112 0.243c63.468 129.74 194.499 217.51 346.030 217.51 212.077 0 384-171.923 384-384s-171.923-384-384-384c-113.597 0-215.674 49.327-285.979 127.729l-0.318 0.361h113.067c0.244-0.005 0.531-0.007 0.819-0.007 21.726 0 39.84 15.466 43.934 35.989l0.048 0.286c0.307 1.924 0.483 4.143 0.483 6.403 0 23.564-19.103 42.667-42.667 42.667-0.17 0-0.34-0.001-0.509-0.003l0.026 0h-213.333c-23.564 0-42.667-19.103-42.667-42.667v0-211.2c-0.005-0.244-0.007-0.531-0.007-0.819 0-21.726 15.466-39.84 35.989-43.934l0.286-0.048c1.924-0.307 4.143-0.483 6.403-0.483 23.564 0 42.667 19.103 42.667 42.667 0 0.17-0.001 0.34-0.003 0.509l0-0.026v104.533c85.767-90.732 206.955-147.207 341.333-147.207 259.206 0 469.333 210.128 469.333 469.333 0 0.003-0 0.005-0 0.008l0-0.001z"
+        />
+        <path
+          d="M725.333 682.667c-0.223 0.005-0.486 0.008-0.749 0.008-7.696 0-14.832-2.397-20.703-6.486l0.118 0.078-234.667-140.8v-236.8c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 189.867l192 115.2c12.808 6.981 21.354 20.347 21.354 35.708 0 8.131-2.394 15.703-6.516 22.049l0.096-0.157c-6.984 12.799-20.345 21.337-35.7 21.337-0.199 0-0.398-0.001-0.597-0.004l0.030 0z"
+        />
+      </svg>
+    </span>
+  </div>
+  <div
+    class="emotion-10 emotion-11"
     color="#3570f40D"
   >
     <span>
@@ -230,6 +243,6 @@ exports[`RoleRow should render 1`] = `
         />
       </svg>
     </span>
-  </td>
-</tr>
+  </div>
+</div>
 `;
diff --git a/ui/src/__tests__/components/role/__snapshots__/RoleTable.test.js.snap b/ui/src/__tests__/components/role/__snapshots__/RoleTable.test.js.snap
index b317ff8a6ab..dc091bf1628 100644
--- a/ui/src/__tests__/components/role/__snapshots__/RoleTable.test.js.snap
+++ b/ui/src/__tests__/components/role/__snapshots__/RoleTable.test.js.snap
@@ -10,45 +10,35 @@ exports[`RoleTable should render 1`] = `
 }
 
 .emotion-2 {
-  text-align: left;
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
+  border-bottom: 2px solid rgb(213, 213, 213);
+  color: rgb(154, 154, 154);
   font-size: 0.8rem;
-  padding-bottom: 5px;
   vertical-align: top;
   text-transform: uppercase;
-  padding: 5px 0 5px 35px;
+  padding: 5px 0px 5px 15px;
   word-break: break-all;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .emotion-4 {
   text-align: left;
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
-  font-size: 0.8rem;
-  padding-bottom: 5px;
-  vertical-align: top;
-  text-transform: uppercase;
-  padding: 5px 0 5px 15px;
-  word-break: break-all;
+  width: 28%;
 }
 
-.emotion-8 {
+.emotion-6 {
+  text-align: left;
+  width: 15%;
+}
+
+.emotion-10 {
   text-align: center;
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
-  font-size: 0.8rem;
-  padding-bottom: 5px;
-  vertical-align: top;
-  text-transform: uppercase;
-  padding: 5px 0 5px 15px;
-  word-break: break-all;
+  width: 7%;
 }
 
-.emotion-20 {
+.emotion-24 {
   box-sizing: border-box;
   margin-top: 10px;
   box-shadow: 0 1px 4px #d9d9d9;
@@ -57,118 +47,137 @@ exports[`RoleTable should render 1`] = `
   border-image: none;
   -webkit-border-image: initial;
   border-image: initial;
-  height: 50px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 5px 0 5px 15px;
 }
 
-.emotion-22 {
+.emotion-26 {
   text-align: left;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
+  width: 28%;
 }
 
-.emotion-24 {
+.emotion-28 {
   padding-left: 20px;
 }
 
 .emotion-30 {
+  text-align: left;
+  padding: 5px 0 5px 15px;
+  vertical-align: middle;
+  word-break: break-all;
+  width: 16%;
+}
+
+.emotion-34 {
   text-align: center;
   padding: 5px 0 5px 15px;
   vertical-align: middle;
   word-break: break-all;
+  width: 7%;
 }
 
-.emotion-32 {
+.emotion-36 {
   fill: #188fff;
   cursor: pointer;
   vertical-align: text-bottom;
 }
 
-<table
+<div
   class="emotion-0 emotion-1"
   data-testid="roletable"
 >
-  <thead>
-    <tr>
-      <th
-        class="emotion-2 emotion-3"
-      >
-        Role
-      </th>
-      <th
-        class="emotion-4 emotion-5"
-      >
-        Modified Date
-      </th>
-      <th
-        class="emotion-4 emotion-5"
-      >
-        Reviewed Date
-      </th>
-      <th
-        class="emotion-8 emotion-5"
-      >
-        Members
-      </th>
-      <th
-        class="emotion-8 emotion-5"
-      >
-        Review
-      </th>
-      <th
-        class="emotion-8 emotion-5"
-      >
-        Policy Rule
-      </th>
-      <th
-        class="emotion-8 emotion-5"
-      >
-        Tags
-      </th>
-      <th
-        class="emotion-8 emotion-5"
-      >
-        Settings
-      </th>
-      <th
-        class="emotion-8 emotion-5"
-      >
-        Delete
-      </th>
-    </tr>
-  </thead>
+  <div
+    class="emotion-2 emotion-3"
+  >
+    <div
+      class="emotion-4 emotion-5"
+    >
+      Role
+    </div>
+    <div
+      class="emotion-6 emotion-7"
+    >
+      Modified Date
+    </div>
+    <div
+      class="emotion-6 emotion-7"
+    >
+      Reviewed Date
+    </div>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      Members
+    </div>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      Review
+    </div>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      Policy Rule
+    </div>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      Tags
+    </div>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      Settings
+    </div>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      History
+    </div>
+    <div
+      class="emotion-10 emotion-11"
+    >
+      Delete
+    </div>
+  </div>
   <tbody>
-    <tr
-      class="emotion-20 emotion-21"
+    <div
+      class="emotion-24 emotion-25"
       data-testid="role-row"
     >
-      <td
-        class="emotion-22 emotion-23"
+      <div
+        class="emotion-26 emotion-27"
       >
         
         
         <span
-          class="emotion-24 emotion-25"
+          class="emotion-28 emotion-29"
         >
            a
         </span>
-      </td>
-      <td
-        class="emotion-22 emotion-23"
+      </div>
+      <div
+        class="emotion-30 emotion-31"
       >
         Invalid date
-      </td>
-      <td
-        class="emotion-22 emotion-23"
+      </div>
+      <div
+        class="emotion-30 emotion-31"
       >
         N/A
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -188,13 +197,13 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -214,13 +223,13 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -234,13 +243,13 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -257,13 +266,13 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -280,13 +289,36 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
+            data-testid="icon"
+            height="1.25em"
+            viewBox="0 0 1024 1024"
+            width="1.25em"
+          >
+            <title>
+              time-history
+            </title>
+            <path
+              d="M981.333 512c-1.127 258.351-210.821 467.35-469.329 467.35-183.080 0-341.676-104.828-419.040-257.735l-1.23-2.682c-3.724-6.205-5.927-13.692-5.927-21.694 0-13.702 6.458-25.895 16.497-33.701l0.096-0.072c7.082-5.427 16.067-8.696 25.816-8.696 16.626 0 31.031 9.51 38.072 23.387l0.112 0.243c63.468 129.74 194.499 217.51 346.030 217.51 212.077 0 384-171.923 384-384s-171.923-384-384-384c-113.597 0-215.674 49.327-285.979 127.729l-0.318 0.361h113.067c0.244-0.005 0.531-0.007 0.819-0.007 21.726 0 39.84 15.466 43.934 35.989l0.048 0.286c0.307 1.924 0.483 4.143 0.483 6.403 0 23.564-19.103 42.667-42.667 42.667-0.17 0-0.34-0.001-0.509-0.003l0.026 0h-213.333c-23.564 0-42.667-19.103-42.667-42.667v0-211.2c-0.005-0.244-0.007-0.531-0.007-0.819 0-21.726 15.466-39.84 35.989-43.934l0.286-0.048c1.924-0.307 4.143-0.483 6.403-0.483 23.564 0 42.667 19.103 42.667 42.667 0 0.17-0.001 0.34-0.003 0.509l0-0.026v104.533c85.767-90.732 206.955-147.207 341.333-147.207 259.206 0 469.333 210.128 469.333 469.333 0 0.003-0 0.005-0 0.008l0-0.001z"
+            />
+            <path
+              d="M725.333 682.667c-0.223 0.005-0.486 0.008-0.749 0.008-7.696 0-14.832-2.397-20.703-6.486l0.118 0.078-234.667-140.8v-236.8c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 189.867l192 115.2c12.808 6.981 21.354 20.347 21.354 35.708 0 8.131-2.394 15.703-6.516 22.049l0.096-0.157c-6.984 12.799-20.345 21.337-35.7 21.337-0.199 0-0.398-0.001-0.597-0.004l0.030 0z"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="emotion-34 emotion-35"
+      >
+        <span>
+          <svg
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -303,39 +335,39 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-    </tr>
-    <tr
-      class="emotion-20 emotion-21"
+      </div>
+    </div>
+    <div
+      class="emotion-24 emotion-25"
       data-testid="role-row"
     >
-      <td
-        class="emotion-22 emotion-23"
+      <div
+        class="emotion-26 emotion-27"
       >
         
         
         <span
-          class="emotion-24 emotion-25"
+          class="emotion-28 emotion-29"
         >
            b
         </span>
-      </td>
-      <td
-        class="emotion-22 emotion-23"
+      </div>
+      <div
+        class="emotion-30 emotion-31"
       >
         Invalid date
-      </td>
-      <td
-        class="emotion-22 emotion-23"
+      </div>
+      <div
+        class="emotion-30 emotion-31"
       >
         N/A
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -355,13 +387,13 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -381,13 +413,13 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -401,13 +433,13 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -424,13 +456,13 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -447,13 +479,36 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-      <td
-        class="emotion-30 emotion-23"
+      </div>
+      <div
+        class="emotion-34 emotion-35"
+      >
+        <span>
+          <svg
+            class="emotion-36"
+            data-testid="icon"
+            height="1.25em"
+            viewBox="0 0 1024 1024"
+            width="1.25em"
+          >
+            <title>
+              time-history
+            </title>
+            <path
+              d="M981.333 512c-1.127 258.351-210.821 467.35-469.329 467.35-183.080 0-341.676-104.828-419.040-257.735l-1.23-2.682c-3.724-6.205-5.927-13.692-5.927-21.694 0-13.702 6.458-25.895 16.497-33.701l0.096-0.072c7.082-5.427 16.067-8.696 25.816-8.696 16.626 0 31.031 9.51 38.072 23.387l0.112 0.243c63.468 129.74 194.499 217.51 346.030 217.51 212.077 0 384-171.923 384-384s-171.923-384-384-384c-113.597 0-215.674 49.327-285.979 127.729l-0.318 0.361h113.067c0.244-0.005 0.531-0.007 0.819-0.007 21.726 0 39.84 15.466 43.934 35.989l0.048 0.286c0.307 1.924 0.483 4.143 0.483 6.403 0 23.564-19.103 42.667-42.667 42.667-0.17 0-0.34-0.001-0.509-0.003l0.026 0h-213.333c-23.564 0-42.667-19.103-42.667-42.667v0-211.2c-0.005-0.244-0.007-0.531-0.007-0.819 0-21.726 15.466-39.84 35.989-43.934l0.286-0.048c1.924-0.307 4.143-0.483 6.403-0.483 23.564 0 42.667 19.103 42.667 42.667 0 0.17-0.001 0.34-0.003 0.509l0-0.026v104.533c85.767-90.732 206.955-147.207 341.333-147.207 259.206 0 469.333 210.128 469.333 469.333 0 0.003-0 0.005-0 0.008l0-0.001z"
+            />
+            <path
+              d="M725.333 682.667c-0.223 0.005-0.486 0.008-0.749 0.008-7.696 0-14.832-2.397-20.703-6.486l0.118 0.078-234.667-140.8v-236.8c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 189.867l192 115.2c12.808 6.981 21.354 20.347 21.354 35.708 0 8.131-2.394 15.703-6.516 22.049l0.096-0.157c-6.984 12.799-20.345 21.337-35.7 21.337-0.199 0-0.398-0.001-0.597-0.004l0.030 0z"
+            />
+          </svg>
+        </span>
+      </div>
+      <div
+        class="emotion-34 emotion-35"
       >
         <span>
           <svg
-            class="emotion-32"
+            class="emotion-36"
             data-testid="icon"
             height="1.25em"
             viewBox="0 0 1024 1024"
@@ -470,8 +525,8 @@ exports[`RoleTable should render 1`] = `
             />
           </svg>
         </span>
-      </td>
-    </tr>
+      </div>
+    </div>
   </tbody>
-</table>
+</div>
 `;
diff --git a/ui/src/__tests__/pages/__snapshots__/role.test.js.snap b/ui/src/__tests__/pages/__snapshots__/role.test.js.snap
index 781e33d1d2e..c170d3ea6a9 100644
--- a/ui/src/__tests__/pages/__snapshots__/role.test.js.snap
+++ b/ui/src/__tests__/pages/__snapshots__/role.test.js.snap
@@ -1034,45 +1034,35 @@ exports[`RolePage should render 1`] = `
 }
 
 .emotion-90 {
-  text-align: left;
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
+  border-bottom: 2px solid rgb(213, 213, 213);
+  color: rgb(154, 154, 154);
   font-size: 0.8rem;
-  padding-bottom: 5px;
   vertical-align: top;
   text-transform: uppercase;
-  padding: 5px 0 5px 35px;
+  padding: 5px 0px 5px 15px;
   word-break: break-all;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
 }
 
 .emotion-92 {
   text-align: left;
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
-  font-size: 0.8rem;
-  padding-bottom: 5px;
-  vertical-align: top;
-  text-transform: uppercase;
-  padding: 5px 0 5px 15px;
-  word-break: break-all;
+  width: 28%;
+}
+
+.emotion-94 {
+  text-align: left;
+  width: 15%;
 }
 
-.emotion-96 {
+.emotion-98 {
   text-align: center;
-  border-bottom: 2px solid #d5d5d5;
-  color: #9a9a9a;
-  font-weight: 600;
-  font-size: 0.8rem;
-  padding-bottom: 5px;
-  vertical-align: top;
-  text-transform: uppercase;
-  padding: 5px 0 5px 15px;
-  word-break: break-all;
+  width: 7%;
 }
 
-.emotion-108 {
+.emotion-112 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1098,13 +1088,13 @@ exports[`RolePage should render 1`] = `
   width: 20px;
 }
 
-.emotion-110 {
+.emotion-114 {
   fill: #303030;
   cursor: inherit;
   vertical-align: text-bottom;
 }
 
-.emotion-111 {
+.emotion-115 {
   margin-right: 0;
   border-left: 1px solid #d5d5d5;
   -webkit-flex: 0 0 350px;
@@ -1119,7 +1109,7 @@ exports[`RolePage should render 1`] = `
   width: 350px;
 }
 
-.emotion-113 {
+.emotion-117 {
   -webkit-align-items: baseline;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
@@ -1138,28 +1128,28 @@ exports[`RolePage should render 1`] = `
   padding: 20px 30px 20px 15px;
 }
 
-.emotion-115 {
+.emotion-119 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.emotion-117 {
+.emotion-121 {
   color: #3570f4;
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
 }
 
-.emotion-119 {
+.emotion-123 {
   padding: 0 5px;
   color: #d5d5d5;
 }
 
-.emotion-123 {
+.emotion-127 {
   padding: 0 30px 0 15px;
 }
 
-.emotion-125 {
+.emotion-129 {
   padding: 10px 0;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1167,12 +1157,12 @@ exports[`RolePage should render 1`] = `
   display: flex;
 }
 
-.emotion-127 {
+.emotion-131 {
   font-size: 1.25em;
   margin-right: 5px;
 }
 
-.emotion-129 {
+.emotion-133 {
   fill: #303030;
   cursor: inherit;
   vertical-align: baseline;
@@ -1539,61 +1529,66 @@ exports[`RolePage should render 1`] = `
                 
               </div>
             </div>
-            <table
+            <div
               class="emotion-88 emotion-89"
               data-testid="roletable"
             >
-              <thead>
-                <tr>
-                  <th
-                    class="emotion-90 emotion-91"
-                  >
-                    Role
-                  </th>
-                  <th
-                    class="emotion-92 emotion-93"
-                  >
-                    Modified Date
-                  </th>
-                  <th
-                    class="emotion-92 emotion-93"
-                  >
-                    Reviewed Date
-                  </th>
-                  <th
-                    class="emotion-96 emotion-93"
-                  >
-                    Members
-                  </th>
-                  <th
-                    class="emotion-96 emotion-93"
-                  >
-                    Review
-                  </th>
-                  <th
-                    class="emotion-96 emotion-93"
-                  >
-                    Policy Rule
-                  </th>
-                  <th
-                    class="emotion-96 emotion-93"
-                  >
-                    Tags
-                  </th>
-                  <th
-                    class="emotion-96 emotion-93"
-                  >
-                    Settings
-                  </th>
-                  <th
-                    class="emotion-96 emotion-93"
-                  >
-                    Delete
-                  </th>
-                </tr>
-              </thead>
+              <div
+                class="emotion-90 emotion-91"
+              >
+                <div
+                  class="emotion-92 emotion-93"
+                >
+                  Role
+                </div>
+                <div
+                  class="emotion-94 emotion-95"
+                >
+                  Modified Date
+                </div>
+                <div
+                  class="emotion-94 emotion-95"
+                >
+                  Reviewed Date
+                </div>
+                <div
+                  class="emotion-98 emotion-99"
+                >
+                  Members
+                </div>
+                <div
+                  class="emotion-98 emotion-99"
+                >
+                  Review
+                </div>
+                <div
+                  class="emotion-98 emotion-99"
+                >
+                  Policy Rule
+                </div>
+                <div
+                  class="emotion-98 emotion-99"
+                >
+                  Tags
+                </div>
+                <div
+                  class="emotion-98 emotion-99"
+                >
+                  Settings
+                </div>
+                <div
+                  class="emotion-98 emotion-99"
+                >
+                  History
+                </div>
+                <div
+                  class="emotion-98 emotion-99"
+                >
+                  Delete
+                </div>
+              </div>
               <tbody />
-            </table>
+            </div>
           </div>
         </div>
       </div>
@@ -1601,11 +1596,11 @@ exports[`RolePage should render 1`] = `
         data-testid="user-domains"
       >
         <div
-          class="emotion-108 emotion-109"
+          class="emotion-112 emotion-113"
           data-testid="toggle-domain"
         >
           <svg
-            class="emotion-110"
+            class="emotion-114"
             data-testid="icon"
             height="1em"
             viewBox="0 0 1024 1024"
@@ -1620,45 +1615,45 @@ exports[`RolePage should render 1`] = `
           </svg>
         </div>
         <div
-          class="emotion-111 emotion-112"
+          class="emotion-115 emotion-116"
         >
           <div
-            class="emotion-113 emotion-114"
+            class="emotion-117 emotion-118"
           >
             <div
-              class="emotion-115 emotion-116"
+              class="emotion-119 emotion-120"
             >
               My Domains
             </div>
             <div>
               <a
-                class="emotion-117 emotion-118"
+                class="emotion-121 emotion-122"
               >
                 Create
               </a>
               <span
-                class="emotion-119 emotion-120"
+                class="emotion-123 emotion-124"
               >
                  | 
               </span>
               <a
-                class="emotion-117 emotion-118"
+                class="emotion-121 emotion-122"
               >
                 Manage
               </a>
             </div>
           </div>
           <div
-            class="emotion-123 emotion-124"
+            class="emotion-127 emotion-128"
           >
             <div
-              class="emotion-125 emotion-126"
+              class="emotion-129 emotion-130"
             >
               <div
-                class="emotion-127 emotion-128"
+                class="emotion-131 emotion-132"
               >
                 <svg
-                  class="emotion-129"
+                  class="emotion-133"
                   data-testid="icon"
                   height="1em"
                   viewBox="0 0 1024 1024"
@@ -1679,19 +1674,19 @@ exports[`RolePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-117 emotion-118"
+                class="emotion-121 emotion-122"
               >
                 athens
               </a>
             </div>
             <div
-              class="emotion-125 emotion-126"
+              class="emotion-129 emotion-130"
             >
               <div
-                class="emotion-127 emotion-128"
+                class="emotion-131 emotion-132"
               >
                 <svg
-                  class="emotion-129"
+                  class="emotion-133"
                   data-testid="icon"
                   height="1em"
                   viewBox="0 0 1024 1024"
@@ -1712,7 +1707,7 @@ exports[`RolePage should render 1`] = `
                 </svg>
               </div>
               <a
-                class="emotion-117 emotion-118"
+                class="emotion-121 emotion-122"
               >
                 athens.ci
               </a>
diff --git a/ui/src/components/denali/icons/Icons.js b/ui/src/components/denali/icons/Icons.js
index 0d23a4f4f0f..02228057a74 100644
--- a/ui/src/components/denali/icons/Icons.js
+++ b/ui/src/components/denali/icons/Icons.js
@@ -159,6 +159,10 @@ export const ICONS = {
         'M857.6 622.933l117.333-32c4.066-23.729 6.391-51.060 6.391-78.933s-2.324-55.204-6.789-81.809l0.399 2.875-117.333-32c-16.384-4.627-28.189-19.444-28.189-37.017 0-6.766 1.75-13.124 4.822-18.645l-0.1 0.196 59.733-106.667c-30.048-42.691-66.108-78.751-107.412-107.872l-1.388-0.928-106.667 59.733-17.067 4.267c-0.448 0.019-0.974 0.029-1.503 0.029-17.418 0-32.128-11.597-36.828-27.491l-0.069-0.272-32-117.333c-23.729-4.066-51.060-6.391-78.933-6.391s-55.204 2.324-81.809 6.789l2.875-0.399-32 117.333c-4.77 16.166-19.479 27.763-36.897 27.763-0.528 0-1.054-0.011-1.578-0.032l0.075 0.002-17.067-4.267-106.667-59.733c-42.691 30.048-78.751 66.108-107.872 107.412l-0.928 1.388 59.733 106.667c2.972 5.325 4.722 11.683 4.722 18.449 0 17.574-11.805 32.39-27.918 36.952l-0.271 0.065-117.333 32c-4.066 23.729-6.391 51.060-6.391 78.933s2.324 55.204 6.789 81.809l-0.399-2.875 117.333 32c16.384 4.627 28.189 19.444 28.189 37.017 0 6.766-1.75 13.124-4.822 18.645l0.1-0.196-59.733 106.667c30.048 42.691 66.108 78.751 107.412 107.872l1.388 0.928 106.667-59.733 17.067-4.267c0.448-0.019 0.974-0.029 1.503-0.029 17.418 0 32.128 11.597 36.828 27.491l0.069 0.272 32 117.333c23.729 4.066 51.060 6.391 78.933 6.391s55.204-2.324 81.809-6.789l-2.875 0.399 32-117.333c4.77-16.166 19.479-27.763 36.897-27.763 0.528 0 1.054 0.011 1.578 0.032l-0.075-0.002 17.067 4.267 106.667 59.733c42.691-30.048 78.751-66.108 107.872-107.412l0.928-1.388-59.733-106.667c-2.972-5.325-4.722-11.683-4.722-18.449 0-17.574 11.805-32.39 27.918-36.952l0.271-0.065zM832 539.733h-4.267c-32.839 13.039-58.565 38.072-72.208 69.558l-0.325 0.842c-6.487 14.396-10.267 31.208-10.267 48.903 0 19.476 4.579 37.883 12.718 54.202l-0.318-0.705h2.133v4.267l32 53.333c-4.628 6.767-10.3 12.439-16.848 16.925l-0.219 0.141-53.333-32h-6.4c-15.332-8.067-33.502-12.801-52.778-12.801-0.195 0-0.39 0-0.585 0.001l0.030-0c-54.426 0.192-100.831 34.322-119.172 82.322l-0.295 0.878v6.4l-19.2 64h-21.333l-17.067-61.867v-4.267c-18.102-50.142-65.281-85.337-120.681-85.337-0.323 0-0.646 0.001-0.969 0.004l0.050-0c-0.165-0.001-0.36-0.001-0.555-0.001-19.276 0-37.446 4.734-53.412 13.104l0.633-0.302h-6.4l-53.333 32c-6.767-4.628-12.439-10.3-16.925-16.848l-0.141-0.219 32-53.333v-4.267h2.133c7.821-15.615 12.4-34.021 12.4-53.497 0-17.695-3.78-34.507-10.575-49.673l0.309 0.77c-13.968-32.328-39.694-57.361-71.655-70.091l-0.879-0.309h-6.4l-61.867-19.2v-21.333l61.867-17.067h6.4c32.839-13.039 58.565-38.072 72.208-69.558l0.325-0.842c6.487-14.396 10.267-31.208 10.267-48.903 0-19.476-4.579-37.883-12.718-54.202l0.318 0.705h-2.133v-4.267l-32-53.333 17.067-17.067 53.333 32h6.4c15.332 8.067 33.502 12.801 52.778 12.801 0.195 0 0.39-0 0.585-0.001l-0.030 0c54.426-0.192 100.831-34.322 119.172-82.322l0.295-0.878v-6.4l19.2-64h21.333l17.067 61.867v4.267c18.102 50.142 65.281 85.337 120.681 85.337 0.323 0 0.646-0.001 0.969-0.004l-0.050 0c0.165 0.001 0.36 0.001 0.555 0.001 19.276 0 37.446-4.734 53.412-13.104l-0.633 0.302h6.4l53.333-32c6.767 4.628 12.439 10.3 16.925 16.848l0.141 0.219-32 53.333v4.267h-2.133c-7.821 15.615-12.4 34.021-12.4 53.497 0 17.695 3.78 34.507 10.575 49.673l-0.309-0.77c13.968 32.328 39.694 57.361 71.655 70.091l0.879 0.309h6.4l61.867 17.067v21.333l-61.867 17.067z',
         'M512 320c-106.039 0-192 85.961-192 192s85.961 192 192 192c106.039 0 192-85.961 192-192v0c0-106.039-85.961-192-192-192v0zM512 618.667c-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c58.91 0 106.667 47.756 106.667 106.667v0c0 58.91-47.756 106.667-106.667 106.667v0z'
     ],
+    'time-history': [
+        "M981.333 512c-1.127 258.351-210.821 467.35-469.329 467.35-183.080 0-341.676-104.828-419.040-257.735l-1.23-2.682c-3.724-6.205-5.927-13.692-5.927-21.694 0-13.702 6.458-25.895 16.497-33.701l0.096-0.072c7.082-5.427 16.067-8.696 25.816-8.696 16.626 0 31.031 9.51 38.072 23.387l0.112 0.243c63.468 129.74 194.499 217.51 346.030 217.51 212.077 0 384-171.923 384-384s-171.923-384-384-384c-113.597 0-215.674 49.327-285.979 127.729l-0.318 0.361h113.067c0.244-0.005 0.531-0.007 0.819-0.007 21.726 0 39.84 15.466 43.934 35.989l0.048 0.286c0.307 1.924 0.483 4.143 0.483 6.403 0 23.564-19.103 42.667-42.667 42.667-0.17 0-0.34-0.001-0.509-0.003l0.026 0h-213.333c-23.564 0-42.667-19.103-42.667-42.667v0-211.2c-0.005-0.244-0.007-0.531-0.007-0.819 0-21.726 15.466-39.84 35.989-43.934l0.286-0.048c1.924-0.307 4.143-0.483 6.403-0.483 23.564 0 42.667 19.103 42.667 42.667 0 0.17-0.001 0.34-0.003 0.509l0-0.026v104.533c85.767-90.732 206.955-147.207 341.333-147.207 259.206 0 469.333 210.128 469.333 469.333 0 0.003-0 0.005-0 0.008l0-0.001z",
+        "M725.333 682.667c-0.223 0.005-0.486 0.008-0.749 0.008-7.696 0-14.832-2.397-20.703-6.486l0.118 0.078-234.667-140.8v-236.8c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 189.867l192 115.2c12.808 6.981 21.354 20.347 21.354 35.708 0 8.131-2.394 15.703-6.516 22.049l0.096-0.157c-6.984 12.799-20.345 21.337-35.7 21.337-0.199 0-0.398-0.001-0.597-0.004l0.030 0z"
+    ],
     loader: [
         'M512 256c-141.385 0-256 114.615-256 256s114.615 256 256 256v0',
         'M512 768c141.385 0 256-114.615 256-256s-114.615-256-256-256v0',
diff --git a/ui/src/components/group/GroupRow.js b/ui/src/components/group/GroupRow.js
index 13a5b3c5061..a914e04bf6c 100644
--- a/ui/src/components/group/GroupRow.js
+++ b/ui/src/components/group/GroupRow.js
@@ -41,7 +41,7 @@ const TrStyled = styled.tr`
     border-image: none;
     -webkit-border-image: initial;
     border-image: initial;
-    height: 50px;
+    padding: 5px 0 5px 15px;
 `;
 
 const MenuDiv = styled.div`
@@ -148,6 +148,10 @@ class GroupRow extends React.Component {
             this,
             `/domain/${this.props.domain}/group/${this.state.name}/settings`
         );
+        let clickHistory = this.onClickFunction.bind(
+            this,
+            `/domain/${this.props.domain}/group/${this.state.name}/history`
+        );
         let clickRoles = this.onClickFunction.bind(
             this,
             `/domain/${this.props.domain}/group/${this.state.name}/roles`
@@ -261,6 +265,25 @@ class GroupRow extends React.Component {
                         <MenuDiv>Settings</MenuDiv>
                     </Menu>
                 </TDStyled>
+                <TDStyled color={color} align={center}>
+                    <Menu
+                        placement='bottom-start'
+                        trigger={
+                            <span>
+                                <Icon
+                                    icon={'time-history'}
+                                    onClick={clickHistory}
+                                    color={colors.icons}
+                                    isLink
+                                    size={'1.25em'}
+                                    verticalAlign={'text-bottom'}
+                                />
+                            </span>
+                        }
+                    >
+                        <MenuDiv>History</MenuDiv>
+                    </Menu>
+                </TDStyled>
                 <TDStyled color={color} align={center}>
                     <Menu
                         placement='bottom-start'
diff --git a/ui/src/components/group/GroupTable.js b/ui/src/components/group/GroupTable.js
index 1047ca31fa2..3ab89a0c412 100644
--- a/ui/src/components/group/GroupTable.js
+++ b/ui/src/components/group/GroupTable.js
@@ -109,10 +109,11 @@ export default class GroupTable extends React.Component {
                     <col style={{ width: 30 + '%' }} />
                     <col style={{ width: 15 + '%' }} />
                     <col style={{ width: 15 + '%' }} />
-                    <col style={{ width: 10 + '%' }} />
-                    <col style={{ width: 10 + '%' }} />
-                    <col style={{ width: 10 + '%' }} />
-                    <col style={{ width: 10 + '%' }} />
+                    <col style={{ width: 8 + '%' }} />
+                    <col style={{ width: 8 + '%' }} />
+                    <col style={{ width: 8 + '%' }} />
+                    <col style={{ width: 8 + '%' }} />
+                    <col style={{ width: 8 + '%' }} />
                 </colgroup>
                 <thead>
                     <tr>
@@ -124,6 +125,7 @@ export default class GroupTable extends React.Component {
                         <TableHeadStyled>Members</TableHeadStyled>
                         <TableHeadStyled>Roles</TableHeadStyled>
                         <TableHeadStyled>Settings</TableHeadStyled>
+                        <TableHeadStyled>History</TableHeadStyled>
                         <TableHeadStyled>Delete</TableHeadStyled>
                     </tr>
                 </thead>
diff --git a/ui/src/components/role-policy/RolePolicyRuleTable.js b/ui/src/components/role-policy/RolePolicyRuleTable.js
index 7d88c707a27..e7fb3ef6c55 100644
--- a/ui/src/components/role-policy/RolePolicyRuleTable.js
+++ b/ui/src/components/role-policy/RolePolicyRuleTable.js
@@ -22,6 +22,8 @@ import Alert from '../denali/Alert';
 import DeleteModal from '../modal/DeleteModal';
 import { DISPLAY_SPACE, MODAL_TIME_OUT } from '../constants/constants';
 import RequestUtils from '../utils/RequestUtils';
+import NameUtils from '../utils/NameUtils';
+
 const StyleTable = styled.table`
     width: 100%;
     border-spacing: 0;
@@ -181,43 +183,49 @@ export default class RolePolicyRuleTable extends React.Component {
         const center = 'center';
         const right = 'right';
         let id = this.props.id;
-        this.state.assertions.forEach((assertion, i) => {
-            let onClickDeleteAssertion = this.onClickDeleteAssertion.bind(
-                this,
-                assertion.role,
-                assertion.id
-            );
-            let color = '';
-            if (i % 2 === 0) {
-                color = colors.row;
-            }
-            rows.push(
-                <tr key={this.props.name + id + i + '-assertion'}>
-                    <TDStyled color={color} align={left}>
-                        {assertion.effect}
-                    </TDStyled>
-                    <TDStyled color={color} align={left}>
-                        {assertion.action.replace(/\s/g, DISPLAY_SPACE)}
-                    </TDStyled>
-                    <TDStyled color={color} align={left}>
-                        {assertion.role}
-                    </TDStyled>
-                    <TDStyled color={color} align={left}>
-                        {assertion.resource}
-                    </TDStyled>
-                    <TDStyled color={color} align={center}>
-                        <Icon
-                            icon={'trash'}
-                            onClick={onClickDeleteAssertion}
-                            color={colors.icons}
-                            isLink
-                            size={'1.25em'}
-                            verticalAlign={'text-bottom'}
-                        />
-                    </TDStyled>
-                </tr>
-            );
-        });
+        this.state.assertions
+            .filter(
+                (assertion) =>
+                    NameUtils.getShortName(':role.', assertion.role) ===
+                    this.props.role
+            )
+            .forEach((assertion, i) => {
+                let onClickDeleteAssertion = this.onClickDeleteAssertion.bind(
+                    this,
+                    assertion.role,
+                    assertion.id
+                );
+                let color = '';
+                if (i % 2 === 0) {
+                    color = colors.row;
+                }
+                rows.push(
+                    <tr key={this.props.name + id + i + '-assertion'}>
+                        <TDStyled color={color} align={left}>
+                            {assertion.effect}
+                        </TDStyled>
+                        <TDStyled color={color} align={left}>
+                            {assertion.action.replace(/\s/g, DISPLAY_SPACE)}
+                        </TDStyled>
+                        <TDStyled color={color} align={left}>
+                            {assertion.role}
+                        </TDStyled>
+                        <TDStyled color={color} align={left}>
+                            {assertion.resource}
+                        </TDStyled>
+                        <TDStyled color={color} align={center}>
+                            <Icon
+                                icon={'trash'}
+                                onClick={onClickDeleteAssertion}
+                                color={colors.icons}
+                                isLink
+                                size={'1.25em'}
+                                verticalAlign={'text-bottom'}
+                            />
+                        </TDStyled>
+                    </tr>
+                );
+            });
         let addAssertion = '';
         if (this.state.addAssertion) {
             addAssertion = (
diff --git a/ui/src/components/role/RoleGroup.js b/ui/src/components/role/RoleGroup.js
index 7a5deb79cf9..944bd54ba43 100644
--- a/ui/src/components/role/RoleGroup.js
+++ b/ui/src/components/role/RoleGroup.js
@@ -25,15 +25,15 @@ const LeftMarginSpan = styled.span`
     verticalalign: bottom；;
 `;
 
-const TDStyled = styled.td`
+const TDStyled = styled.div`
     background-color: ${(props) => props.color};
     text-align: ${(props) => props.align};
-    padding: 5px 0 5px 15px;
     vertical-align: middle;
     word-break: break-all;
+    width: 100%;
 `;
 
-const TrStyled = styled.tr`
+const TrStyled = styled.div`
     box-sizing: border-box;
     margin-top: 5px;
     box-shadow: 0 1px 4px #d9d9d9;
@@ -42,7 +42,8 @@ const TrStyled = styled.tr`
     border-image: none;
     -webkit-border-image: initial;
     border-image: initial;
-    height: 50px;
+    display: flex;
+    padding: 10px 0 10px 0;
 `;
 
 const StyledDiv = styled.div`
@@ -50,7 +51,8 @@ const StyledDiv = styled.div`
     width: 100%;
 `;
 
-const StyledTable = styled.table`
+const StyledPaddingLeft = styled.div`
+    padding-left: 20px;
     width: 100%;
 `;
 
@@ -128,8 +130,8 @@ export default class RoleGroup extends React.Component {
 
                 rows.push(
                     <TrStyled key='aws-role-section' data-testid='role-group'>
-                        <TDStyled align={left} colSpan='8'>
-                            <StyledDiv>
+                        <TDStyled align={left}>
+                            <StyledPaddingLeft>
                                 <LeftMarginSpan>
                                     <Icon
                                         icon={
@@ -145,12 +147,8 @@ export default class RoleGroup extends React.Component {
                                     />
                                 </LeftMarginSpan>
                                 {`${label} Roles (${length})`}
-                            </StyledDiv>
-                            <StyledDiv>
-                                <StyledTable>
-                                    <tbody>{sectionRows}</tbody>
-                                </StyledTable>
-                            </StyledDiv>
+                            </StyledPaddingLeft>
+                            <StyledDiv>{sectionRows}</StyledDiv>
                         </TDStyled>
                     </TrStyled>
                 );
@@ -158,21 +156,23 @@ export default class RoleGroup extends React.Component {
                 rows.push(
                     <TrStyled key='aws-role-section' data-testid='role-group'>
                         <TDStyled align={left}>
-                            <LeftMarginSpan>
-                                <Icon
-                                    icon={
-                                        this.state.expanded
-                                            ? arrowup
-                                            : arrowdown
-                                    }
-                                    onClick={expandRole}
-                                    color={colors.icons}
-                                    isLink
-                                    size={'1.25em'}
-                                    verticalAlign={'text-bottom'}
-                                />
-                            </LeftMarginSpan>
-                            {`${label} Roles (${length})`}
+                            <StyledPaddingLeft>
+                                <LeftMarginSpan>
+                                    <Icon
+                                        icon={
+                                            this.state.expanded
+                                                ? arrowup
+                                                : arrowdown
+                                        }
+                                        onClick={expandRole}
+                                        color={colors.icons}
+                                        isLink
+                                        size={'1.25em'}
+                                        verticalAlign={'text-bottom'}
+                                    />
+                                </LeftMarginSpan>
+                                {`${label} Roles (${length})`}
+                            </StyledPaddingLeft>
                         </TDStyled>
                         <TDStyled align={center} />
                     </TrStyled>
@@ -181,7 +181,7 @@ export default class RoleGroup extends React.Component {
 
             return rows;
         } else {
-            return <div />;
+            return null;
         }
     }
 }
diff --git a/ui/src/components/role/RoleRow.js b/ui/src/components/role/RoleRow.js
index 2c4a5873c00..288152b3ca8 100644
--- a/ui/src/components/role/RoleRow.js
+++ b/ui/src/components/role/RoleRow.js
@@ -24,15 +24,34 @@ import DateUtils from '../utils/DateUtils';
 import RequestUtils from '../utils/RequestUtils';
 import { withRouter } from 'next/router';
 
-const TDStyled = styled.td`
+const TDStyledName = styled.div`
     background-color: ${(props) => props.color};
     text-align: ${(props) => props.align};
     padding: 5px 0 5px 15px;
     vertical-align: middle;
     word-break: break-all;
+    width: 28%;
 `;
 
-const TrStyled = styled.tr`
+const TDStyledTime = styled.div`
+    background-color: ${(props) => props.color};
+    text-align: ${(props) => props.align};
+    padding: 5px 0 5px 15px;
+    vertical-align: middle;
+    word-break: break-all;
+    width: 16%;
+`;
+
+const TDStyledIcon = styled.div`
+    background-color: ${(props) => props.color};
+    text-align: ${(props) => props.align};
+    padding: 5px 0 5px 15px;
+    vertical-align: middle;
+    word-break: break-all;
+    width: 7%;
+`;
+
+const TrStyled = styled.div`
     box-sizing: border-box;
     margin-top: 10px;
     box-shadow: 0 1px 4px #d9d9d9;
@@ -41,7 +60,8 @@ const TrStyled = styled.tr`
     border-image: none;
     -webkit-border-image: initial;
     border-image: initial;
-    height: 50px;
+    display: flex;
+    padding: 5px 0 5px 15px;
 `;
 
 const MenuDiv = styled.div`
@@ -156,6 +176,10 @@ class RoleRow extends React.Component {
             this,
             `/domain/${this.props.domain}/role/${this.state.name}/policy`
         );
+        let clickHistory = this.onClickFunction.bind(
+            this,
+            `/domain/${this.props.domain}/role/${this.state.name}/history`
+        );
         let clickTag = this.onClickFunction.bind(
             this,
             `/domain/${this.props.domain}/role/${this.state.name}/tags`
@@ -205,6 +229,9 @@ class RoleRow extends React.Component {
             </Menu>
         );
 
+        let reviewRequired =
+            role.reviewEnabled && (role.memberExpiryDays || role.serviceExpiry);
+
         let roleTypeIcon = role.trust ? iconDelegated : '';
         let roleAuditIcon = auditEnabled ? iconAudit : '';
 
@@ -217,15 +244,15 @@ class RoleRow extends React.Component {
 
         rows.push(
             <TrStyled key={this.state.name} data-testid='role-row'>
-                <TDStyled color={color} align={left}>
+                <TDStyledName color={color} align={left}>
                     {roleTypeIcon}
                     {roleAuditIcon}
                     {roleNameSpan}
-                </TDStyled>
-                <TDStyled color={color} align={left}>
+                </TDStyledName>
+                <TDStyledTime color={color} align={left}>
                     {this.localDate.getLocalDate(role.modified, 'UTC', 'UTC')}
-                </TDStyled>
-                <TDStyled color={color} align={left}>
+                </TDStyledTime>
+                <TDStyledTime color={color} align={left}>
                     {role.lastReviewedDate
                         ? this.localDate.getLocalDate(
                               role.lastReviewedDate,
@@ -233,8 +260,8 @@ class RoleRow extends React.Component {
                               'UTC'
                           )
                         : 'N/A'}
-                </TDStyled>
-                <TDStyled color={color} align={center}>
+                </TDStyledTime>
+                <TDStyledIcon color={color} align={center}>
                     <Menu
                         placement='bottom-start'
                         trigger={
@@ -252,8 +279,8 @@ class RoleRow extends React.Component {
                     >
                         <MenuDiv>Members</MenuDiv>
                     </Menu>
-                </TDStyled>
-                <TDStyled color={color} align={center}>
+                </TDStyledIcon>
+                <TDStyledIcon color={color} align={center}>
                     <Menu
                         placement='bottom-start'
                         trigger={
@@ -261,7 +288,11 @@ class RoleRow extends React.Component {
                                 <Icon
                                     icon={'assignment-priority'}
                                     onClick={clickReview}
-                                    color={colors.icons}
+                                    color={
+                                        reviewRequired
+                                            ? colors.red200
+                                            : colors.icons
+                                    }
                                     isLink
                                     size={'1.25em'}
                                     verticalAlign={'text-bottom'}
@@ -271,8 +302,8 @@ class RoleRow extends React.Component {
                     >
                         <MenuDiv>Review Members</MenuDiv>
                     </Menu>
-                </TDStyled>
-                <TDStyled color={color} align={center}>
+                </TDStyledIcon>
+                <TDStyledIcon color={color} align={center}>
                     <Menu
                         placement='bottom-start'
                         trigger={
@@ -290,8 +321,8 @@ class RoleRow extends React.Component {
                     >
                         <MenuDiv>Rule Policy</MenuDiv>
                     </Menu>
-                </TDStyled>
-                <TDStyled color={color} align={center}>
+                </TDStyledIcon>
+                <TDStyledIcon color={color} align={center}>
                     <Menu
                         placement='bottom-start'
                         trigger={
@@ -309,8 +340,8 @@ class RoleRow extends React.Component {
                     >
                         <MenuDiv>Tags</MenuDiv>
                     </Menu>
-                </TDStyled>
-                <TDStyled color={color} align={center}>
+                </TDStyledIcon>
+                <TDStyledIcon color={color} align={center}>
                     <Menu
                         placement='bottom-start'
                         trigger={
@@ -328,8 +359,27 @@ class RoleRow extends React.Component {
                     >
                         <MenuDiv>Settings</MenuDiv>
                     </Menu>
-                </TDStyled>
-                <TDStyled color={color} align={center}>
+                </TDStyledIcon>
+                <TDStyledIcon color={color} align={center}>
+                    <Menu
+                        placement='bottom-start'
+                        trigger={
+                            <span>
+                                <Icon
+                                    icon={'time-history'}
+                                    onClick={clickHistory}
+                                    color={colors.icons}
+                                    isLink
+                                    size={'1.25em'}
+                                    verticalAlign={'text-bottom'}
+                                />
+                            </span>
+                        }
+                    >
+                        <MenuDiv>History</MenuDiv>
+                    </Menu>
+                </TDStyledIcon>
+                <TDStyledIcon color={color} align={center}>
                     <Menu
                         placement='bottom-start'
                         trigger={
@@ -347,7 +397,7 @@ class RoleRow extends React.Component {
                     >
                         <MenuDiv>Delete Role</MenuDiv>
                     </Menu>
-                </TDStyled>
+                </TDStyledIcon>
             </TrStyled>
         );
 
diff --git a/ui/src/components/role/RoleSectionRow.js b/ui/src/components/role/RoleSectionRow.js
index e83daf67b62..14d4a4027f8 100644
--- a/ui/src/components/role/RoleSectionRow.js
+++ b/ui/src/components/role/RoleSectionRow.js
@@ -24,53 +24,36 @@ import DateUtils from '../utils/DateUtils';
 import RequestUtils from '../utils/RequestUtils';
 import { withRouter } from 'next/router';
 
-const TDName = styled.td`
+const TDName = styled.div`
     background-color: ${(props) => props.color};
     text-align: ${(props) => props.align};
     padding: 5px 0 5px 0;
     vertical-align: middle;
     word-break: break-all;
-    width: 29%;
+    width: 28%;
 `;
 
-const TDModified = styled.td`
+const TDTime = styled.div`
     background-color: ${(props) => props.color};
     text-align: ${(props) => props.align};
     padding: 5px 0 5px 0;
     vertical-align: middle;
     word-break: break-all;
-    width: 17%;
+    width: 15%;
 `;
 
-const TDReview = styled.td`
+const TDIcon = styled.div`
     background-color: ${(props) => props.color};
     text-align: ${(props) => props.align};
     padding: 5px 0 5px 0;
     vertical-align: middle;
     word-break: break-all;
-    width: 12%;
+    width: 7%;
 `;
 
-const TDIcon = styled.td`
-    background-color: ${(props) => props.color};
-    text-align: ${(props) => props.align};
-    padding: 5px 0 5px 0;
-    vertical-align: middle;
-    word-break: break-all;
-    width: 9%;
-`;
-
-const TDDelete = styled.td`
-    background-color: ${(props) => props.color};
-    text-align: ${(props) => props.align};
-    padding: 5px 0 5px 0;
-    vertical-align: middle;
-    word-break: break-all;
-    width: 6%;
-`;
-
-const TrStyled = styled.tr`
+const TrStyled = styled.div`
     background-color: ${(props) => props.color};
+    display: flex;
 `;
 
 const MenuDiv = styled.div`
@@ -169,7 +152,6 @@ class RoleSectionRow extends React.Component {
         let center = 'center';
         let role = this.props.details;
         let color = this.props.color;
-        let idx = this.props.idx;
 
         let clickMembers = this.onClickFunction.bind(
             this,
@@ -187,6 +169,10 @@ class RoleSectionRow extends React.Component {
             this,
             `/domain/${this.props.domain}/role/${this.state.name}/policy`
         );
+        let clickHistory = this.onClickFunction.bind(
+            this,
+            `/domain/${this.props.domain}/role/${this.state.name}/history`
+        );
         let clickTag = this.onClickFunction.bind(
             this,
             `/domain/${this.props.domain}/role/${this.state.name}/tags`
@@ -253,7 +239,7 @@ class RoleSectionRow extends React.Component {
                         {roleAuditIcon}
                         {roleNameSpan}
                     </TDName>
-                    <TDModified color={color} align={left}>
+                    <TDTime color={color} align={left}>
                         {role.expiration
                             ? this.localDate.getLocalDate(
                                   role.expiration,
@@ -261,7 +247,7 @@ class RoleSectionRow extends React.Component {
                                   'UTC'
                               )
                             : 'N/A'}
-                    </TDModified>
+                    </TDTime>
                     <TDIcon color={color} align={center}>
                         <Menu
                             placement='bottom-start'
@@ -291,14 +277,14 @@ class RoleSectionRow extends React.Component {
                         {roleAuditIcon}
                         {roleNameSpan}
                     </TDName>
-                    <TDModified color={color} align={left}>
+                    <TDTime color={color} align={left}>
                         {this.localDate.getLocalDate(
                             role.modified,
                             'UTC',
                             'UTC'
                         )}
-                    </TDModified>
-                    <TDReview color={color} align={left}>
+                    </TDTime>
+                    <TDTime color={color} align={left}>
                         {role.lastReviewedDate
                             ? this.localDate.getLocalDate(
                                   role.lastReviewedDate,
@@ -306,7 +292,7 @@ class RoleSectionRow extends React.Component {
                                   'UTC'
                               )
                             : 'N/A'}
-                    </TDReview>
+                    </TDTime>
                     <TDIcon color={color} align={center}>
                         <Menu
                             placement='bottom-start'
@@ -402,7 +388,26 @@ class RoleSectionRow extends React.Component {
                             <MenuDiv>Settings</MenuDiv>
                         </Menu>
                     </TDIcon>
-                    <TDDelete color={color} align={center}>
+                    <TDIcon color={color} align={center}>
+                        <Menu
+                            placement='bottom-start'
+                            trigger={
+                                <span>
+                                    <Icon
+                                        icon={'time-history'}
+                                        onClick={clickHistory}
+                                        color={colors.icons}
+                                        isLink
+                                        size={'1.25em'}
+                                        verticalAlign={'text-bottom'}
+                                    />
+                                </span>
+                            }
+                        >
+                            <MenuDiv>History</MenuDiv>
+                        </Menu>
+                    </TDIcon>
+                    <TDIcon color={color} align={center}>
                         <Menu
                             placement='bottom-start'
                             trigger={
@@ -420,7 +425,7 @@ class RoleSectionRow extends React.Component {
                         >
                             <MenuDiv>Delete Role</MenuDiv>
                         </Menu>
-                    </TDDelete>
+                    </TDIcon>
                 </TrStyled>
             );
         }
diff --git a/ui/src/components/role/RoleTable.js b/ui/src/components/role/RoleTable.js
index dc858bffb2a..0bfdf16c8a4 100644
--- a/ui/src/components/role/RoleTable.js
+++ b/ui/src/components/role/RoleTable.js
@@ -18,7 +18,7 @@ import styled from '@emotion/styled';
 import RoleRow from './RoleRow';
 import RoleGroup from './RoleGroup';
 
-const StyleTable = styled.table`
+const StyleTable = styled.div`
     width: 100%;
     border-spacing: 0 15px;
     display: table;
@@ -26,17 +26,30 @@ const StyleTable = styled.table`
     border-color: grey;
 `;
 
-const TableHeadStyled = styled.th`
-    text-align: ${(props) => props.align};
-    border-bottom: 2px solid #d5d5d5;
-    color: #9a9a9a;
-    font-weight: 600;
+const TableHeadStyled = styled.div`
+    border-bottom: 2px solid rgb(213, 213, 213);
+    color: rgb(154, 154, 154);
     font-size: 0.8rem;
-    padding-bottom: 5px;
     vertical-align: top;
     text-transform: uppercase;
-    padding: 5px 0 5px 15px;
+    padding: 5px 0px 5px 15px;
     word-break: break-all;
+    display: flex;
+`;
+
+const StyledNameCol = styled.div`
+    text-align: ${(props) => props.align};
+    width: 28%;
+`;
+
+const StyledTimeCol = styled.div`
+    text-align: ${(props) => props.align};
+    width: 15%;
+`;
+
+const StyledIconCol = styled.div`
+    text-align: ${(props) => props.align};
+    width: 7%;
 `;
 
 const TableHeadStyledRoleName = styled.th`
@@ -196,31 +209,18 @@ export default class RoleTable extends React.Component {
 
         return (
             <StyleTable key='role-table' data-testid='roletable'>
-                <thead>
-                    <tr>
-                        <TableHeadStyledRoleName align={left}>
-                            Role
-                        </TableHeadStyledRoleName>
-                        <TableHeadStyled align={left}>
-                            Modified Date
-                        </TableHeadStyled>
-                        <TableHeadStyled align={left}>
-                            Reviewed Date
-                        </TableHeadStyled>
-                        <TableHeadStyled align={center}>
-                            Members
-                        </TableHeadStyled>
-                        <TableHeadStyled align={center}>Review</TableHeadStyled>
-                        <TableHeadStyled align={center}>
-                            Policy Rule
-                        </TableHeadStyled>
-                        <TableHeadStyled align={center}>Tags</TableHeadStyled>
-                        <TableHeadStyled align={center}>
-                            Settings
-                        </TableHeadStyled>
-                        <TableHeadStyled align={center}>Delete</TableHeadStyled>
-                    </tr>
-                </thead>
+                <TableHeadStyled>
+                    <StyledNameCol align={left}>Role</StyledNameCol>
+                    <StyledTimeCol align={left}>Modified Date</StyledTimeCol>
+                    <StyledTimeCol align={left}>Reviewed Date</StyledTimeCol>
+                    <StyledIconCol align={center}>Members</StyledIconCol>
+                    <StyledIconCol align={center}>Review</StyledIconCol>
+                    <StyledIconCol align={center}>Policy Rule</StyledIconCol>
+                    <StyledIconCol align={center}>Tags</StyledIconCol>
+                    <StyledIconCol align={center}>Settings</StyledIconCol>
+                    <StyledIconCol align={center}>History</StyledIconCol>
+                    <StyledIconCol align={center}>Delete</StyledIconCol>
+                </TableHeadStyled>
                 <tbody>{rows}</tbody>
             </StyleTable>
         );
diff --git a/ui/src/components/role/UserRoleTable.js b/ui/src/components/role/UserRoleTable.js
index 45aa1f0c6f0..f194410d681 100644
--- a/ui/src/components/role/UserRoleTable.js
+++ b/ui/src/components/role/UserRoleTable.js
@@ -17,65 +17,55 @@ import React from 'react';
 import styled from '@emotion/styled';
 import Icon from '../denali/icons/Icon';
 import { colors } from '../denali/styles';
-import RoleUserTable from './RoleUserTable';
 import DeleteModal from '../modal/DeleteModal';
 import Alert from '../denali/Alert';
 import { MODAL_TIME_OUT } from '../constants/constants';
 import DateUtils from '../utils/DateUtils';
 import RequestUtils from '../utils/RequestUtils';
 
-const StyleTable = styled.table`
+const StyleTable = styled.div`
     width: 100%;
     border-spacing: 0 15px;
     display: table;
     border-collapse: separate;
     border-color: grey;
 `;
-const TableHeadStyled = styled.th`
-    text-align: ${(props) => props.align};
-    border-bottom: 2px solid #d5d5d5;
-    color: #9a9a9a;
-    font-weight: 600;
+
+const TableHeadStyled = styled.div`
+    border-bottom: 2px solid rgb(213, 213, 213);
+    color: rgb(154, 154, 154);
     font-size: 0.8rem;
-    padding-bottom: 5px;
     vertical-align: top;
     text-transform: uppercase;
-    padding: 5px 0 5px 15px;
+    padding: 5px 0px 5px 15px;
     word-break: break-all;
+    display: flex;
 `;
 
 const LeftMarginSpan = styled.span`
     margin-right: 10px;
-    verticalalign: bottom;
-`;
-
-const TDStyled = styled.td`
-    background-color: ${(props) => props.color};
-    text-align: ${(props) => props.align};
-    padding: 5px 0 5px 15px;
-    vertical-align: middle;
-    word-break: break-all;
+    vertical-align: bottom;
 `;
 
-const NameTDStyled = styled.td`
+const TDStyledMember = styled.div`
     background-color: ${(props) => props.color};
     text-align: ${(props) => props.align};
     padding: 5px 0 5px 15px;
     vertical-align: middle;
     word-break: break-all;
-    width: 60%;
+    width: 70%;
 `;
 
-const ExpTDStyled = styled.td`
+const TDStyledIcon = styled.div`
     background-color: ${(props) => props.color};
     text-align: ${(props) => props.align};
     padding: 5px 0 5px 15px;
     vertical-align: middle;
     word-break: break-all;
-    width: 28%;
+    width: 15%;
 `;
 
-const TrStyled = styled.tr`
+const TrStyled = styled.div`
     box-sizing: border-box;
     margin-top: 10px;
     box-shadow: 0 1px 4px #d9d9d9;
@@ -84,24 +74,29 @@ const TrStyled = styled.tr`
     border-image: none;
     -webkit-border-image: initial;
     border-image: initial;
-    height: 50px;
+    display: flex;
 `;
 
-const TDStyledSub = styled.td`
-    background-color: ${(props) => props.color};
-    text-align: ${(props) => props.align};
-    padding: 5px 0 5px 15px;
-    vertical-align: middle;
-    word-break: break-all;
-    width: 120px;
+const StyledTd = styled.div`
+    width: 100%;
 `;
 
-const StyledTd = styled.td`
+const StyledTable = styled.div`
     width: 100%;
 `;
 
-const StyledTable = styled.table`
-    width: 100%;
+const StyledUserCol = styled.div`
+    text-align: ${(props) => props.align};
+    width: 70%;
+`;
+
+const StyledIconCol = styled.div`
+    text-align: ${(props) => props.align};
+    width: 15%;
+`;
+
+const FlexDiv = styled.div`
+    display: flex;
 `;
 
 export default class UserRoleTable extends React.Component {
@@ -269,11 +264,11 @@ export default class UserRoleTable extends React.Component {
                     memberName
                 );
                 return (
-                    <tr key={role.roleName}>
-                        <NameTDStyled align={left}>
+                    <FlexDiv key={role.roleName}>
+                        <TDStyledMember align={left}>
                             {role.roleName}
-                        </NameTDStyled>
-                        <ExpTDStyled align={center}>
+                        </TDStyledMember>
+                        <TDStyledIcon align={center}>
                             {role.expiration
                                 ? this.dateUtils.getLocalDate(
                                       role.expiration,
@@ -281,8 +276,8 @@ export default class UserRoleTable extends React.Component {
                                       'UTC'
                                   )
                                 : null}
-                        </ExpTDStyled>
-                        <TDStyledSub align={center}>
+                        </TDStyledIcon>
+                        <TDStyledIcon align={center}>
                             <Icon
                                 icon={'trash'}
                                 onClick={deleteItem}
@@ -291,8 +286,8 @@ export default class UserRoleTable extends React.Component {
                                 size={'1.25em'}
                                 verticalAlign={'text-bottom'}
                             />
-                        </TDStyledSub>
-                    </tr>
+                        </TDStyledIcon>
+                    </FlexDiv>
                 );
             });
             expandArray[memberName] = true;
@@ -383,7 +378,7 @@ export default class UserRoleTable extends React.Component {
                     if (!this.state.contents[item.memberName]) {
                         toReturn.push(
                             <TrStyled key={item.memberName}>
-                                <TDStyled align={left}>
+                                <TDStyledMember align={left}>
                                     <LeftMarginSpan>
                                         <Icon
                                             icon={'arrowhead-down-circle'}
@@ -407,9 +402,9 @@ export default class UserRoleTable extends React.Component {
                                         ' (' +
                                         item.memberRoles.length +
                                         ')'}
-                                </TDStyled>
-                                <TDStyled align={center} />
-                                <TDStyled align={center}>
+                                </TDStyledMember>
+                                <TDStyledIcon align={center} />
+                                <TDStyledIcon align={center}>
                                     <Icon
                                         icon={'trash'}
                                         onClick={deleteItem}
@@ -418,16 +413,16 @@ export default class UserRoleTable extends React.Component {
                                         size={'1.25em'}
                                         verticalAlign={'text-bottom'}
                                     />
-                                </TDStyled>
+                                </TDStyledIcon>
                             </TrStyled>
                         );
                     } else {
                         toReturn.push(
                             <TrStyled key={item.memberName}>
-                                <StyledTd colSpan={3}>
+                                <StyledTd>
                                     <StyledTable>
-                                        <tr>
-                                            <TDStyled align={left} colSpan={1}>
+                                        <FlexDiv>
+                                            <TDStyledMember align={left}>
                                                 <LeftMarginSpan>
                                                     <Icon
                                                         icon={
@@ -455,15 +450,9 @@ export default class UserRoleTable extends React.Component {
                                                     ' (' +
                                                     item.memberRoles.length +
                                                     ')'}
-                                            </TDStyled>
-                                            <TDStyled
-                                                align={center}
-                                                colSpan={1}
-                                            />
-                                            <TDStyled
-                                                align={center}
-                                                colSpan={1}
-                                            >
+                                            </TDStyledMember>
+                                            <TDStyledIcon align={center} />
+                                            <TDStyledIcon align={center}>
                                                 <Icon
                                                     icon={'trash'}
                                                     onClick={deleteItem}
@@ -474,8 +463,8 @@ export default class UserRoleTable extends React.Component {
                                                         'text-bottom'
                                                     }
                                                 />
-                                            </TDStyled>
-                                        </tr>
+                                            </TDStyledIcon>
+                                        </FlexDiv>
                                         {this.state.contents[item.memberName]}
                                     </StyledTable>
                                 </StyledTd>
@@ -487,7 +476,7 @@ export default class UserRoleTable extends React.Component {
 
         return (
             <StyleTable key='user-role-table' data-testid='userroletable'>
-                <thead>
+                <TableHeadStyled>
                     {this.state.showSuccess ? (
                         <Alert
                             isOpen={this.state.showSuccess}
@@ -500,14 +489,12 @@ export default class UserRoleTable extends React.Component {
                             onClose={closeSuccess}
                         />
                     ) : null}
-                    <tr>
-                        <TableHeadStyled align={left}>MEMBER</TableHeadStyled>
-                        <TableHeadStyled align={center}>
-                            Expiration Date
-                        </TableHeadStyled>
-                        <TableHeadStyled align={center}>Delete</TableHeadStyled>
-                    </tr>
-                </thead>
+                    <StyledUserCol align={left}>MEMBER</StyledUserCol>
+                    <StyledIconCol align={center}>
+                        Expiration Date
+                    </StyledIconCol>
+                    <StyledIconCol align={center}>Delete</StyledIconCol>
+                </TableHeadStyled>
                 <DeleteModal
                     name={this.state.deleteName}
                     isOpen={this.state.showDelete}