diff --git a/e b/e
index 759991106420c..96f898e3ed737 160000
--- a/e
+++ b/e
@@ -1 +1 @@
-Subproject commit 759991106420cf1df6e62031456378f54bb0c263
+Subproject commit 96f898e3ed7379a64a7ec5c343d5c8e690abfa2b
diff --git a/web/packages/design/src/DataTable/Pager/StyledPager.tsx b/web/packages/design/src/DataTable/Pager/StyledPager.tsx
index cdfb388521fc2..3147a552e2abc 100644
--- a/web/packages/design/src/DataTable/Pager/StyledPager.tsx
+++ b/web/packages/design/src/DataTable/Pager/StyledPager.tsx
@@ -16,31 +16,16 @@
 
 import styled from 'styled-components';
 
+import { ButtonIcon } from 'design';
 import Icon from 'design/Icon';
 
-export const StyledArrowBtn = styled.button`
-  background: none;
-  border: none;
-  cursor: pointer;
-
+export const StyledArrowBtn = styled(ButtonIcon)`
   ${Icon} {
     font-size: 20px;
-    transition: all 0.3s;
-    opacity: 0.5;
   }
-
-  &:hover,
-  &:focus {
-    ${Icon} {
-      opacity: 1;
-    }
-  }
-
-  &:disabled {
-    cursor: default;
-    ${Icon} {
-      opacity: 0.1;
-    }
+  ${Icon}:before {
+    // arrow icons have some padding that makes them look slightly off-center, padding compensates it
+    padding-left: 1px;
   }
 `;
 
diff --git a/web/packages/design/src/DataTable/StyledTable.tsx b/web/packages/design/src/DataTable/StyledTable.tsx
index f058d2b2f7e29..0b73cf358528a 100644
--- a/web/packages/design/src/DataTable/StyledTable.tsx
+++ b/web/packages/design/src/DataTable/StyledTable.tsx
@@ -23,7 +23,6 @@ import Icon from '../Icon';
 export const StyledTable = styled.table(
   props => `
   background: ${props.theme.colors.levels.surface};
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -74,7 +73,10 @@ export const StyledTable = styled.table(
     line-height: 16px;
   }
 
-  tbody tr {
+  // When border-collapse: collapse is set on a table element, Safari incorrectly renders the row border with alpha channel.
+  // It looks like the collapsed border was rendered twice, that is, opacity 0.07 looks like opacity 0.14.
+  // A workaround is to not use collapse and apply border to td elements.
+  & > tbody > tr:not(:last-of-type) > td {
     border-bottom: 1px solid ${props.theme.colors.spotBackground[0]};
   }
 
@@ -87,7 +89,7 @@ export const StyledTable = styled.table(
   borderRadius
 );
 
-export const StyledPanel = styled.nav`
+export const StyledPanel = styled.nav<{ showTopBorder: boolean }>`
   padding: 16px 24px;
   display: flex;
   height: 24px;
@@ -96,6 +98,10 @@ export const StyledPanel = styled.nav`
   justify-content: space-between;
   background: ${props => props.theme.colors.levels.surface};
   ${borderRadius}
+  border-top: ${props =>
+    props.showTopBorder
+      ? '1px solid ' + props.theme.colors.spotBackground[0]
+      : undefined}
 `;
 
 export const StyledTableWrapper = styled.div`
diff --git a/web/packages/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx
index ac405daf609f0..458905a4f1522 100644
--- a/web/packages/design/src/DataTable/Table.tsx
+++ b/web/packages/design/src/DataTable/Table.tsx
@@ -287,7 +287,11 @@ function PagedTable<T>({
         {renderBody(paginatedData[currentPage])}
       </StyledTable>
       {!isTopPager && (
-        <StyledPanel borderBottomLeftRadius={3} borderBottomRightRadius={3}>
+        <StyledPanel
+          borderBottomLeftRadius={3}
+          borderBottomRightRadius={3}
+          showTopBorder={true}
+        >
           <ClientSidePager
             nextPage={nextPage}
             prevPage={prevPage}
@@ -317,7 +321,7 @@ function ServersideTable<T>({
         {renderHeaders()}
         {renderBody(data)}
       </StyledTable>
-      <StyledPanel>
+      <StyledPanel showTopBorder={true}>
         <ServerSidePager nextPage={nextPage} prevPage={prevPage} />
       </StyledPanel>
     </>
diff --git a/web/packages/shared/components/Search/SearchPagination.tsx b/web/packages/shared/components/Search/SearchPagination.tsx
index 58b4b433f889a..a7bb2bd73db8b 100644
--- a/web/packages/shared/components/Search/SearchPagination.tsx
+++ b/web/packages/shared/components/Search/SearchPagination.tsx
@@ -22,7 +22,11 @@ import { CircleArrowLeft, CircleArrowRight } from 'design/Icon';
 
 export function SearchPagination({ prevPage, nextPage }: Props) {
   return (
-    <StyledPanel borderBottomLeftRadius={3} borderBottomRightRadius={3}>
+    <StyledPanel
+      borderBottomLeftRadius={3}
+      borderBottomRightRadius={3}
+      showTopBorder={true}
+    >
       <Flex justifyContent="flex-end" width="100%">
         <Flex alignItems="center" mr={2}></Flex>
         <Flex>
diff --git a/web/packages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap b/web/packages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap
index c0422d6727b5a..7b69e761eab5b 100644
--- a/web/packages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap
+++ b/web/packages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap
@@ -140,7 +140,6 @@ exports[`render device dashboard 1`] = `
 
 .c11 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -205,7 +204,7 @@ exports[`render device dashboard 1`] = `
   line-height: 16px;
 }
 
-.c11 tbody tr {
+.c11 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -683,7 +682,6 @@ exports[`render failed state for creating restricted privilege token 1`] = `
 
 .c12 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -748,7 +746,7 @@ exports[`render failed state for creating restricted privilege token 1`] = `
   line-height: 16px;
 }
 
-.c12 tbody tr {
+.c12 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
diff --git a/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap b/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap
index e9540eff44e56..da073b1963d87 100644
--- a/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap
+++ b/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap
@@ -363,13 +363,100 @@ exports[`failed state 1`] = `
   font-size: 14px;
 }
 
-.c39 {
+.c40 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
+.c38 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c38 .c20 {
+  color: inherit;
+}
+
+.c38:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c38:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c38:hover:enabled,
+.c38:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c38:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c41 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c41 .c20 {
+  color: inherit;
+}
+
+.c41:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c41:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c41:hover:enabled,
+.c41:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c41:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c19 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -518,7 +605,6 @@ exports[`failed state 1`] = `
 
 .c24 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -581,7 +667,7 @@ exports[`failed state 1`] = `
   line-height: 16px;
 }
 
-.c24 tbody tr {
+.c24 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -609,6 +695,7 @@ exports[`failed state 1`] = `
   align-items: center;
   justify-content: space-between;
   background: #222C59;
+  border-top: 1px solid rgba(255,255,255,0.07);
 }
 
 .c4 {
@@ -637,29 +724,12 @@ exports[`failed state 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c38 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c38 .c20 {
+.c39 .c20 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c38:hover .c20,
-.c38:focus .c20 {
-  opacity: 1;
-}
-
-.c38:disabled {
-  cursor: default;
 }
 
-.c38:disabled .c20 {
-  opacity: 0.1;
+.c39 .c20:before {
+  padding-left: 1px;
 }
 
 .c13 {
@@ -1267,20 +1337,20 @@ exports[`failed state 1`] = `
             class="c22"
           >
             <button
-              class="c38"
+              class="c38 c39"
               title="Previous page"
             >
               <span
-                class="c20 c39 icon icon-arrow-left-circle "
+                class="c20 c40 icon icon-arrow-left-circle "
                 font-size="3"
               />
             </button>
             <button
-              class="c38"
+              class="c41 c39"
               title="Next page"
             >
               <span
-                class="c20 c39 icon icon-arrow-right-circle "
+                class="c20 c40 icon icon-arrow-right-circle "
                 font-size="3"
               />
             </button>
@@ -1406,13 +1476,100 @@ exports[`loaded state 1`] = `
   font-size: 14px;
 }
 
-.c39 {
+.c40 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
+.c38 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c38 .c20 {
+  color: inherit;
+}
+
+.c38:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c38:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c38:hover:enabled,
+.c38:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c38:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c41 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c41 .c20 {
+  color: inherit;
+}
+
+.c41:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c41:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c41:hover:enabled,
+.c41:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c41:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c19 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1561,7 +1718,6 @@ exports[`loaded state 1`] = `
 
 .c24 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -1624,7 +1780,7 @@ exports[`loaded state 1`] = `
   line-height: 16px;
 }
 
-.c24 tbody tr {
+.c24 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -1652,6 +1808,7 @@ exports[`loaded state 1`] = `
   align-items: center;
   justify-content: space-between;
   background: #222C59;
+  border-top: 1px solid rgba(255,255,255,0.07);
 }
 
 .c4 {
@@ -1680,29 +1837,12 @@ exports[`loaded state 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c38 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c38 .c20 {
+.c39 .c20 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c38:hover .c20,
-.c38:focus .c20 {
-  opacity: 1;
-}
-
-.c38:disabled {
-  cursor: default;
 }
 
-.c38:disabled .c20 {
-  opacity: 0.1;
+.c39 .c20:before {
+  padding-left: 1px;
 }
 
 .c13 {
@@ -2316,20 +2456,20 @@ exports[`loaded state 1`] = `
             class="c22"
           >
             <button
-              class="c38"
+              class="c38 c39"
               title="Previous page"
             >
               <span
-                class="c20 c39 icon icon-arrow-left-circle "
+                class="c20 c40 icon icon-arrow-left-circle "
                 font-size="3"
               />
             </button>
             <button
-              class="c38"
+              class="c41 c39"
               title="Next page"
             >
               <span
-                class="c20 c39 icon icon-arrow-right-circle "
+                class="c20 c40 icon icon-arrow-right-circle "
                 font-size="3"
               />
             </button>
diff --git a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
index 07399b86257cf..ad9ed973a455a 100644
--- a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
+++ b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`list of all events 1`] = `
-.c19 {
+.c21 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -29,35 +29,35 @@ exports[`list of all events 1`] = `
   width: 87px;
 }
 
-.c19:hover,
-.c19:focus {
+.c21:hover,
+.c21:focus {
   background: rgba(255,255,255,0.07);
 }
 
-.c19:active {
+.c21:active {
   background: rgba(255,255,255,0.13);
 }
 
-.c19:disabled {
+.c21:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c14 {
+.c15 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
-.c16 {
+.c18 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
 }
 
-.c18 {
+.c20 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
@@ -66,6 +66,93 @@ exports[`list of all events 1`] = `
   font-size: 16px;
 }
 
+.c12 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c12 .c14 {
+  color: inherit;
+}
+
+.c12:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c12:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c12:hover:enabled,
+.c12:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c12:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c16 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c16 .c14 {
+  color: inherit;
+}
+
+.c16:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c16:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c16:hover:enabled,
+.c16:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c16:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c9 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -96,9 +183,8 @@ exports[`list of all events 1`] = `
   display: flex;
 }
 
-.c15 {
+.c17 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -108,39 +194,39 @@ exports[`list of all events 1`] = `
   border-bottom-left-radius: 8px;
 }
 
-.c15 > thead > tr > th,
-.c15 > tbody > tr > th,
-.c15 > tfoot > tr > th,
-.c15 > thead > tr > td,
-.c15 > tbody > tr > td,
-.c15 > tfoot > tr > td {
+.c17 > thead > tr > th,
+.c17 > tbody > tr > th,
+.c17 > tfoot > tr > th,
+.c17 > thead > tr > td,
+.c17 > tbody > tr > td,
+.c17 > tfoot > tr > td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c15 > thead > tr > th:first-child,
-.c15 > tbody > tr > th:first-child,
-.c15 > tfoot > tr > th:first-child,
-.c15 > thead > tr > td:first-child,
-.c15 > tbody > tr > td:first-child,
-.c15 > tfoot > tr > td:first-child {
+.c17 > thead > tr > th:first-child,
+.c17 > tbody > tr > th:first-child,
+.c17 > tfoot > tr > th:first-child,
+.c17 > thead > tr > td:first-child,
+.c17 > tbody > tr > td:first-child,
+.c17 > tfoot > tr > td:first-child {
   padding-left: 24px;
 }
 
-.c15 > thead > tr > th:last-child,
-.c15 > tbody > tr > th:last-child,
-.c15 > tfoot > tr > th:last-child,
-.c15 > thead > tr > td:last-child,
-.c15 > tbody > tr > td:last-child,
-.c15 > tfoot > tr > td:last-child {
+.c17 > thead > tr > th:last-child,
+.c17 > tbody > tr > th:last-child,
+.c17 > tfoot > tr > th:last-child,
+.c17 > thead > tr > td:last-child,
+.c17 > tbody > tr > td:last-child,
+.c17 > tfoot > tr > td:last-child {
   padding-right: 24px;
 }
 
-.c15 > tbody > tr > td {
+.c17 > tbody > tr > td {
   vertical-align: middle;
 }
 
-.c15 > thead > tr > th {
+.c17 > thead > tr > th {
   background: rgba(255,255,255,0.07);
   color: #FFFFFF;
   cursor: pointer;
@@ -154,22 +240,22 @@ exports[`list of all events 1`] = `
   white-space: nowrap;
 }
 
-.c15 > thead > tr > th .c13 {
+.c17 > thead > tr > th .c14 {
   font-weight: bold;
   font-size: 8px;
   margin-left: 8px;
 }
 
-.c15 > tbody > tr > td {
+.c17 > tbody > tr > td {
   color: #FFFFFF;
   line-height: 16px;
 }
 
-.c15 tbody tr {
+.c17 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
-.c15 tbody tr:hover {
+.c17 tbody tr:hover {
   background-color: rgba(255,255,255,0.07);
 }
 
@@ -189,29 +275,12 @@ exports[`list of all events 1`] = `
   border-radius: 8px;
 }
 
-.c12 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c12 .c13 {
+.c13 .c14 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
 }
 
-.c12:hover .c13,
-.c12:focus .c13 {
-  opacity: 1;
-}
-
-.c12:disabled {
-  cursor: default;
-}
-
-.c12:disabled .c13 {
-  opacity: 0.1;
+.c13 .c14:before {
+  padding-left: 1px;
 }
 
 .c10 {
@@ -302,7 +371,7 @@ exports[`list of all events 1`] = `
   font-size: 12px;
 }
 
-.c20 {
+.c22 {
   background: #000000;
   border: 2px solid #9F85FF;
   color: rgba(255,255,255,0.72);
@@ -317,19 +386,19 @@ exports[`list of all events 1`] = `
   transition: all 0.3s;
 }
 
-.c20:hover,
-.c20:active,
-.c20:focus {
+.c22:hover,
+.c22:active,
+.c22:focus {
   background: #0C143D;
   color: #FFFFFF;
 }
 
-.c20:active {
+.c22:active {
   box-shadow: none;
   opacity: 0.56;
 }
 
-.c17 {
+.c19 {
   display: flex;
   align-items: center;
   min-width: 130px;
@@ -402,22 +471,22 @@ exports[`list of all events 1`] = `
           class="c11"
         >
           <button
-            class="c12"
+            class="c12 c13"
             disabled=""
             title="Previous page"
           >
             <span
-              class="c13 c14 icon icon-arrow-left-circle "
+              class="c14 c15 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c12"
+            class="c16 c13"
             disabled=""
             title="Next page"
           >
             <span
-              class="c13 c14 icon icon-arrow-right-circle "
+              class="c14 c15 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
@@ -425,7 +494,7 @@ exports[`list of all events 1`] = `
       </div>
     </nav>
     <table
-      class="c15"
+      class="c17"
     >
       <thead>
         <tr>
@@ -433,7 +502,7 @@ exports[`list of all events 1`] = `
             <a>
               Type
               <span
-                class="c13 c16 icon icon-chevrons-expand-vertical "
+                class="c14 c18 icon icon-chevrons-expand-vertical "
                 title="sort items"
               />
             </a>
@@ -447,7 +516,7 @@ exports[`list of all events 1`] = `
             <a>
               Created (UTC)
               <span
-                class="c13 c16 icon icon-chevron-down "
+                class="c14 c18 icon icon-chevron-down "
                 title="sort items desc"
               />
             </a>
@@ -463,10 +532,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               OpenSearch Request Failed
@@ -486,7 +555,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -499,10 +568,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               OpenSearch Request
@@ -522,7 +591,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -535,10 +604,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP service provider delete failed
@@ -558,7 +627,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -571,10 +640,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               All SAML IdP service provider deleted
@@ -594,7 +663,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -607,10 +676,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP service provider delete failed
@@ -630,7 +699,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -643,10 +712,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP service provider deleted
@@ -666,7 +735,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -679,10 +748,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP service provider update failed
@@ -702,7 +771,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -715,10 +784,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP service provider updated
@@ -738,7 +807,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -751,10 +820,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP service provider create failed
@@ -774,7 +843,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -787,10 +856,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP service provider created
@@ -810,7 +879,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -823,10 +892,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP authentication
@@ -846,7 +915,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -859,10 +928,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP authentication
@@ -882,7 +951,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -895,10 +964,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SAML IdP authentication
@@ -918,7 +987,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -931,10 +1000,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Login Rule Deleted
@@ -954,7 +1023,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -967,10 +1036,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Login Rule Created
@@ -990,7 +1059,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1003,10 +1072,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Update
@@ -1026,7 +1095,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1039,10 +1108,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Enrollment
@@ -1062,7 +1131,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1075,10 +1144,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Enrollment
@@ -1098,7 +1167,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1111,10 +1180,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Enroll Token Spent
@@ -1134,7 +1203,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1147,10 +1216,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Enroll Token Spent
@@ -1170,7 +1239,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1183,10 +1252,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Delete
@@ -1206,7 +1275,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1219,10 +1288,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Delete
@@ -1242,7 +1311,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1255,10 +1324,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Enroll Token Create
@@ -1278,7 +1347,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1291,10 +1360,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Enroll Token Create
@@ -1314,7 +1383,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1327,10 +1396,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Authenticate
@@ -1350,7 +1419,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1363,10 +1432,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Authenticate
@@ -1386,7 +1455,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1399,10 +1468,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Register
@@ -1422,7 +1491,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1435,10 +1504,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Device Register
@@ -1458,7 +1527,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1471,10 +1540,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               DynamoDB Request
@@ -1494,7 +1563,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1507,10 +1576,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               DynamoDB Request Failed
@@ -1530,7 +1599,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1543,10 +1612,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Instance Joined
@@ -1566,7 +1635,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1579,10 +1648,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Bot Joined
@@ -1602,7 +1671,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1615,10 +1684,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-shared c13 c18"
+                class="c14 c20 icon icon-folder-shared c14 c20"
                 font-size="3"
               />
               Directory Sharing Write Failed
@@ -1638,7 +1707,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1651,10 +1720,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-shared c13 c18"
+                class="c14 c20 icon icon-folder-shared c14 c20"
                 font-size="3"
               />
               Directory Sharing Write
@@ -1674,7 +1743,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1687,10 +1756,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-shared c13 c18"
+                class="c14 c20 icon icon-folder-shared c14 c20"
                 font-size="3"
               />
               Directory Sharing Read Failed
@@ -1710,7 +1779,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1723,10 +1792,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-shared c13 c18"
+                class="c14 c20 icon icon-folder-shared c14 c20"
                 font-size="3"
               />
               Directory Sharing Read
@@ -1746,7 +1815,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1759,10 +1828,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-shared c13 c18"
+                class="c14 c20 icon icon-folder-shared c14 c20"
                 font-size="3"
               />
               Directory Sharing Start Failed
@@ -1782,7 +1851,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1795,10 +1864,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-shared c13 c18"
+                class="c14 c20 icon icon-folder-shared c14 c20"
                 font-size="3"
               />
               Directory Sharing Started
@@ -1818,7 +1887,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1831,10 +1900,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               App Session DynamoDB Request
@@ -1854,7 +1923,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1867,10 +1936,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               App Session DynamoDB Request
@@ -1890,7 +1959,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1903,10 +1972,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-code c13 c18"
+                class="c14 c20 icon icon-code c14 c20"
                 font-size="3"
               />
               Application Deleted
@@ -1926,7 +1995,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1939,10 +2008,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-code c13 c18"
+                class="c14 c20 icon icon-code c14 c20"
                 font-size="3"
               />
               Application Updated
@@ -1962,7 +2031,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -1975,10 +2044,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-code c13 c18"
+                class="c14 c20 icon icon-code c14 c20"
                 font-size="3"
               />
               Application Created
@@ -1998,7 +2067,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2011,10 +2080,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Elasticsearch Request
@@ -2034,7 +2103,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2047,10 +2116,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Elasticsearch Request
@@ -2070,7 +2139,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2083,10 +2152,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Elasticsearch Request
@@ -2106,7 +2175,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2119,10 +2188,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SSM Command Execution Failed
@@ -2142,7 +2211,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2155,10 +2224,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SSM Command Executed
@@ -2178,7 +2247,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2191,10 +2260,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-kubernetes c13 c18"
+                class="c14 c20 icon icon-kubernetes c14 c20"
                 font-size="3"
               />
               Kubernetes Deleted
@@ -2214,7 +2283,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2227,10 +2296,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-kubernetes c13 c18"
+                class="c14 c20 icon icon-kubernetes c14 c20"
                 font-size="3"
               />
               Kubernetes Updated
@@ -2250,7 +2319,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2263,10 +2332,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-kubernetes c13 c18"
+                class="c14 c20 icon icon-kubernetes c14 c20"
                 font-size="3"
               />
               Kubernetes Created
@@ -2286,7 +2355,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2299,10 +2368,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               App Session Ended
@@ -2322,7 +2391,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2335,10 +2404,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Session Recording Accessed
@@ -2358,7 +2427,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2371,10 +2440,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Resource Access Request Search
@@ -2394,7 +2463,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2407,10 +2476,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Cassandra Register
@@ -2430,7 +2499,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2443,10 +2512,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Cassandra Batch
@@ -2466,7 +2535,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2479,10 +2548,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Cassandra Execute
@@ -2502,7 +2571,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2515,10 +2584,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Cassandra Prepare Event
@@ -2538,7 +2607,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2551,10 +2620,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Database Malformed Packet
@@ -2574,7 +2643,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2587,10 +2656,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               SQLServer RPC Request
@@ -2610,7 +2679,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2623,10 +2692,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SSO Test Flow Login Failed
@@ -2646,7 +2715,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2659,10 +2728,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               SSO Test Flow Login
@@ -2682,7 +2751,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2695,10 +2764,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Change Database
@@ -2718,7 +2787,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2731,10 +2800,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Create Database
@@ -2754,7 +2823,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2767,10 +2836,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Drop Database
@@ -2790,7 +2859,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2803,10 +2872,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Shut Down
@@ -2826,7 +2895,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2839,10 +2908,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Kill Process
@@ -2862,7 +2931,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2875,10 +2944,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Debug
@@ -2898,7 +2967,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2911,10 +2980,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Upgrade Window Start Updated
@@ -2934,7 +3003,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2947,10 +3016,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Refresh
@@ -2970,7 +3039,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -2983,10 +3052,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Statement Close
@@ -3006,7 +3075,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3019,10 +3088,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Statement Fetch
@@ -3042,7 +3111,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3055,10 +3124,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Statement Execute
@@ -3078,7 +3147,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3091,10 +3160,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Statement Bulk Execute
@@ -3114,7 +3183,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3127,10 +3196,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Statement Reset
@@ -3150,7 +3219,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3163,10 +3232,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Statement Send Long Data
@@ -3186,7 +3255,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3199,10 +3268,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               MySQL Statement Prepare
@@ -3222,7 +3291,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3235,10 +3304,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-keypair c13 c18"
+                class="c14 c20 icon icon-keypair c14 c20"
                 font-size="3"
               />
               Certificate Issued
@@ -3258,7 +3327,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3271,10 +3340,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Session Connected
@@ -3294,7 +3363,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3307,10 +3376,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               X11 Forwarding Request Failed
@@ -3330,7 +3399,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3343,10 +3412,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               X11 Forwarding Requested
@@ -3366,7 +3435,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3379,10 +3448,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               PostgreSQL Function Call
@@ -3402,7 +3471,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3415,10 +3484,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               PostgreSQL Statement Close
@@ -3438,7 +3507,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3451,10 +3520,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               PostgreSQL Statement Execute
@@ -3474,7 +3543,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3487,10 +3556,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               PostgreSQL Statement Bind
@@ -3510,7 +3579,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3523,10 +3592,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               PostgreSQL Statement Parse
@@ -3546,7 +3615,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3559,10 +3628,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Privilege Token Created
@@ -3582,7 +3651,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3595,10 +3664,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-clipboard-text c13 c18"
+                class="c14 c20 icon icon-clipboard-text c14 c20"
                 font-size="3"
               />
               Clipboard Data Received
@@ -3618,7 +3687,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3631,10 +3700,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-clipboard-text c13 c18"
+                class="c14 c20 icon icon-clipboard-text c14 c20"
                 font-size="3"
               />
               Clipboard Data Sent
@@ -3654,7 +3723,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3667,10 +3736,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-desktop c13 c18"
+                class="c14 c20 icon icon-desktop c14 c20"
                 font-size="3"
               />
               Windows Desktop Session Denied
@@ -3690,7 +3759,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3703,10 +3772,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-desktop c13 c18"
+                class="c14 c20 icon icon-desktop c14 c20"
                 font-size="3"
               />
               Windows Desktop Session Ended
@@ -3726,7 +3795,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3739,10 +3808,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-desktop c13 c18"
+                class="c14 c20 icon icon-desktop c14 c20"
                 font-size="3"
               />
               Windows Desktop Session Started
@@ -3762,7 +3831,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3775,10 +3844,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Database Deleted
@@ -3798,7 +3867,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3811,10 +3880,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Database Updated
@@ -3834,7 +3903,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3847,10 +3916,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Database Created
@@ -3870,7 +3939,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3883,10 +3952,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-unlock c13 c18"
+                class="c14 c20 icon icon-unlock c14 c20"
                 font-size="3"
               />
               Lock Deleted
@@ -3906,7 +3975,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3919,10 +3988,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-lock c13 c18"
+                class="c14 c20 icon icon-lock c14 c20"
                 font-size="3"
               />
               Lock Created
@@ -3942,7 +4011,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3955,10 +4024,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-vpn_key c13 c18"
+                class="c14 c20 icon icon-vpn_key c14 c20"
                 font-size="3"
               />
               Recovery Code Use Failed
@@ -3978,7 +4047,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -3991,10 +4060,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Recovery Token Created
@@ -4014,7 +4083,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4027,10 +4096,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-vpn_key c13 c18"
+                class="c14 c20 icon icon-vpn_key c14 c20"
                 font-size="3"
               />
               Recovery Code Used
@@ -4050,7 +4119,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4063,10 +4132,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-keypair c13 c18"
+                class="c14 c20 icon icon-keypair c14 c20"
                 font-size="3"
               />
               Recovery Codes Generated
@@ -4086,7 +4155,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4099,10 +4168,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Database Session Ended
@@ -4122,7 +4191,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4135,10 +4204,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Database Query Failed
@@ -4158,7 +4227,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4171,10 +4240,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Database Query
@@ -4194,7 +4263,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4207,10 +4276,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-database c13 c18"
+                class="c14 c20 icon icon-database c14 c20"
                 font-size="3"
               />
               Database Session Started
@@ -4230,7 +4299,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4243,10 +4312,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Session Ended
@@ -4266,7 +4335,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4279,10 +4348,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Session Ended
@@ -4302,7 +4371,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4315,7 +4384,7 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <a
                 href="/web/cluster/im-a-cluster/session/941a4c65-c6cd-11ea-9bef-482ae3513733?recordingType=ssh"
@@ -4324,7 +4393,7 @@ exports[`list of all events 1`] = `
                 title="Open Session Player"
               >
                 <span
-                  class="c13 c18 icon icon-terminal c20"
+                  class="c14 c20 icon icon-terminal c22"
                   font-size="3"
                 />
               </a>
@@ -4345,7 +4414,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4358,10 +4427,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-credit-card c13 c18"
+                class="c14 c20 icon icon-credit-card c14 c20"
                 font-size="3"
               />
               Billing Information Updated
@@ -4381,7 +4450,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4394,10 +4463,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-credit-card c13 c18"
+                class="c14 c20 icon icon-credit-card c14 c20"
                 font-size="3"
               />
               Credit Card Added
@@ -4417,7 +4486,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4430,10 +4499,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-credit-card c13 c18"
+                class="c14 c20 icon icon-credit-card c14 c20"
                 font-size="3"
               />
               Credit Card Deleted
@@ -4453,7 +4522,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4466,10 +4535,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-credit-card c13 c18"
+                class="c14 c20 icon icon-credit-card c14 c20"
                 font-size="3"
               />
               Credit Card Updated
@@ -4489,7 +4558,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4502,10 +4571,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               MFA Device Deleted
@@ -4525,7 +4594,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4538,10 +4607,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               MFA Device Added
@@ -4561,7 +4630,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4574,10 +4643,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-kubernetes c13 c18"
+                class="c14 c20 icon icon-kubernetes c14 c20"
                 font-size="3"
               />
               Kubernetes Request
@@ -4597,7 +4666,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4610,10 +4679,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               App Session Data
@@ -4633,7 +4702,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4646,10 +4715,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               App Session Started
@@ -4669,7 +4738,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4682,10 +4751,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Command Execution
@@ -4705,7 +4774,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4718,10 +4787,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               App Session Data
@@ -4741,7 +4810,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4754,10 +4823,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               App Session Started
@@ -4777,7 +4846,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4790,10 +4859,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               OIDC Auth Connector Created
@@ -4813,7 +4882,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4826,10 +4895,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               GITHUB Auth Connector Deleted
@@ -4849,7 +4918,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4862,10 +4931,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               GITHUB Auth Connector Created
@@ -4885,7 +4954,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4898,10 +4967,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               User Password Updated
@@ -4921,7 +4990,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4934,10 +5003,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Access Request Deleted
@@ -4957,7 +5026,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -4970,10 +5039,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Access Request Updated
@@ -4993,7 +5062,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5006,10 +5075,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Access Request Created
@@ -5029,7 +5098,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5042,10 +5111,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Reset Password Token Created
@@ -5065,7 +5134,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5078,10 +5147,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               User Created
@@ -5101,7 +5170,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5114,10 +5183,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               User Updated
@@ -5137,7 +5206,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5150,10 +5219,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               User Deleted
@@ -5173,7 +5242,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5186,10 +5255,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Session Data
@@ -5209,7 +5278,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5222,10 +5291,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Session Data
@@ -5245,7 +5314,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5258,10 +5327,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Session Command
@@ -5281,7 +5350,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5294,10 +5363,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Symlink Failed
@@ -5317,7 +5386,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5330,10 +5399,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Symlink
@@ -5353,7 +5422,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5366,10 +5435,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Readlink Failed
@@ -5389,7 +5458,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5402,10 +5471,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Readlink
@@ -5425,7 +5494,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5438,10 +5507,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Rename Failed
@@ -5461,7 +5530,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5474,10 +5543,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Rename
@@ -5497,7 +5566,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5510,10 +5579,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Stat Failed
@@ -5533,7 +5602,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5546,10 +5615,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Stat
@@ -5569,7 +5638,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5582,10 +5651,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Realpath Failed
@@ -5605,7 +5674,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5618,10 +5687,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Realpath
@@ -5641,7 +5710,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5654,10 +5723,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Rmdir Failed
@@ -5677,7 +5746,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5690,10 +5759,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Rmdir
@@ -5713,7 +5782,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5726,10 +5795,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Mkdir Failed
@@ -5749,7 +5818,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5762,10 +5831,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Mkdir
@@ -5785,7 +5854,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5798,10 +5867,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Remove Failed
@@ -5821,7 +5890,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5834,10 +5903,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Remove
@@ -5857,7 +5926,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5870,10 +5939,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Readdir Failed
@@ -5893,7 +5962,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5906,10 +5975,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Readdir
@@ -5929,7 +5998,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5942,10 +6011,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Opendir Failed
@@ -5965,7 +6034,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -5978,10 +6047,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Opendir
@@ -6001,7 +6070,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6014,10 +6083,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Fsetstat Failed
@@ -6037,7 +6106,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6050,10 +6119,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Fsetstat
@@ -6073,7 +6142,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6086,10 +6155,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Setstat Failed
@@ -6109,7 +6178,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6122,10 +6191,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Setstat
@@ -6145,7 +6214,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6158,10 +6227,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Fstat Failed
@@ -6181,7 +6250,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6194,10 +6263,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Fstat
@@ -6217,7 +6286,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6230,10 +6299,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Lstat Failed
@@ -6253,7 +6322,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6266,10 +6335,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Lstat
@@ -6289,7 +6358,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6302,10 +6371,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Write Failed
@@ -6325,7 +6394,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6338,10 +6407,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Write
@@ -6361,7 +6430,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6374,10 +6443,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Read Failed
@@ -6397,7 +6466,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6410,10 +6479,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Read
@@ -6433,7 +6502,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6446,10 +6515,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Close Failed
@@ -6469,7 +6538,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6482,10 +6551,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Close
@@ -6505,7 +6574,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6518,10 +6587,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Open Failed
@@ -6541,7 +6610,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6554,10 +6623,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-folder-plus c13 c18"
+                class="c14 c20 icon icon-folder-plus c14 c20"
                 font-size="3"
               />
               SFTP Open
@@ -6577,7 +6646,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6590,10 +6659,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-file_upload c13 c18"
+                class="c14 c20 icon icon-file_upload c14 c20"
                 font-size="3"
               />
               SCP Upload
@@ -6613,7 +6682,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6626,10 +6695,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-get_app c13 c18"
+                class="c14 c20 icon icon-get_app c14 c20"
                 font-size="3"
               />
               SCP Download Failed
@@ -6649,7 +6718,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6662,10 +6731,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-get_app c13 c18"
+                class="c14 c20 icon icon-get_app c14 c20"
                 font-size="3"
               />
               SCP Download
@@ -6685,7 +6754,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6698,10 +6767,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               User Joined
@@ -6721,7 +6790,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6734,10 +6803,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Terminal Resize
@@ -6757,7 +6826,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6770,10 +6839,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Session Started
@@ -6793,7 +6862,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6806,10 +6875,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Session File Access
@@ -6829,7 +6898,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6842,10 +6911,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-terminal c13 c18"
+                class="c14 c20 icon icon-terminal c14 c20"
                 font-size="3"
               />
               Session Network Connection
@@ -6865,7 +6934,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6878,10 +6947,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Local Login Failed
@@ -6901,7 +6970,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6914,10 +6983,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Auth Attempt Failed
@@ -6937,7 +7006,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6950,10 +7019,10 @@ exports[`list of all events 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c17"
+              class="c19"
             >
               <span
-                class="c13 c18 icon icon-info_outline c13 c18"
+                class="c14 c20 icon icon-info_outline c14 c20"
                 font-size="3"
               />
               Local Login
@@ -6973,7 +7042,7 @@ exports[`list of all events 1`] = `
             align="right"
           >
             <button
-              class="c19"
+              class="c21"
               kind="border"
               width="87px"
             >
@@ -6994,7 +7063,7 @@ exports[`loaded audit log screen 1`] = `
   width: 210px;
 }
 
-.c23 {
+.c25 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -7022,35 +7091,35 @@ exports[`loaded audit log screen 1`] = `
   width: 87px;
 }
 
-.c23:hover,
-.c23:focus {
+.c25:hover,
+.c25:focus {
   background: rgba(255,255,255,0.07);
 }
 
-.c23:active {
+.c25:active {
   background: rgba(255,255,255,0.13);
 }
 
-.c23:disabled {
+.c25:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
-.c20 {
+.c22 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
 }
 
-.c22 {
+.c24 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
@@ -7059,6 +7128,93 @@ exports[`loaded audit log screen 1`] = `
   font-size: 16px;
 }
 
+.c16 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c16 .c18 {
+  color: inherit;
+}
+
+.c16:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c16:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c16:hover:enabled,
+.c16:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c16:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c20 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c20 .c18 {
+  color: inherit;
+}
+
+.c20:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c20:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c20:hover:enabled,
+.c20:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c20:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c14 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -7289,9 +7445,8 @@ exports[`loaded audit log screen 1`] = `
   padding-bottom: 24px;
 }
 
-.c19 {
+.c21 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -7301,39 +7456,39 @@ exports[`loaded audit log screen 1`] = `
   border-bottom-left-radius: 8px;
 }
 
-.c19 > thead > tr > th,
-.c19 > tbody > tr > th,
-.c19 > tfoot > tr > th,
-.c19 > thead > tr > td,
-.c19 > tbody > tr > td,
-.c19 > tfoot > tr > td {
+.c21 > thead > tr > th,
+.c21 > tbody > tr > th,
+.c21 > tfoot > tr > th,
+.c21 > thead > tr > td,
+.c21 > tbody > tr > td,
+.c21 > tfoot > tr > td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c19 > thead > tr > th:first-child,
-.c19 > tbody > tr > th:first-child,
-.c19 > tfoot > tr > th:first-child,
-.c19 > thead > tr > td:first-child,
-.c19 > tbody > tr > td:first-child,
-.c19 > tfoot > tr > td:first-child {
+.c21 > thead > tr > th:first-child,
+.c21 > tbody > tr > th:first-child,
+.c21 > tfoot > tr > th:first-child,
+.c21 > thead > tr > td:first-child,
+.c21 > tbody > tr > td:first-child,
+.c21 > tfoot > tr > td:first-child {
   padding-left: 24px;
 }
 
-.c19 > thead > tr > th:last-child,
-.c19 > tbody > tr > th:last-child,
-.c19 > tfoot > tr > th:last-child,
-.c19 > thead > tr > td:last-child,
-.c19 > tbody > tr > td:last-child,
-.c19 > tfoot > tr > td:last-child {
+.c21 > thead > tr > th:last-child,
+.c21 > tbody > tr > th:last-child,
+.c21 > tfoot > tr > th:last-child,
+.c21 > thead > tr > td:last-child,
+.c21 > tbody > tr > td:last-child,
+.c21 > tfoot > tr > td:last-child {
   padding-right: 24px;
 }
 
-.c19 > tbody > tr > td {
+.c21 > tbody > tr > td {
   vertical-align: middle;
 }
 
-.c19 > thead > tr > th {
+.c21 > thead > tr > th {
   background: rgba(255,255,255,0.07);
   color: #FFFFFF;
   cursor: pointer;
@@ -7347,22 +7502,22 @@ exports[`loaded audit log screen 1`] = `
   white-space: nowrap;
 }
 
-.c19 > thead > tr > th .c17 {
+.c21 > thead > tr > th .c18 {
   font-weight: bold;
   font-size: 8px;
   margin-left: 8px;
 }
 
-.c19 > tbody > tr > td {
+.c21 > tbody > tr > td {
   color: #FFFFFF;
   line-height: 16px;
 }
 
-.c19 tbody tr {
+.c21 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
-.c19 tbody tr:hover {
+.c21 tbody tr:hover {
   background-color: rgba(255,255,255,0.07);
 }
 
@@ -7382,29 +7537,12 @@ exports[`loaded audit log screen 1`] = `
   border-radius: 8px;
 }
 
-.c16 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c16 .c17 {
+.c17 .c18 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c16:hover .c17,
-.c16:focus .c17 {
-  opacity: 1;
-}
-
-.c16:disabled {
-  cursor: default;
 }
 
-.c16:disabled .c17 {
-  opacity: 0.1;
+.c17 .c18:before {
+  padding-left: 1px;
 }
 
 .c11 {
@@ -7473,7 +7611,7 @@ exports[`loaded audit log screen 1`] = `
   font-size: 12px;
 }
 
-.c21 {
+.c23 {
   display: flex;
   align-items: center;
   min-width: 130px;
@@ -7610,22 +7748,22 @@ exports[`loaded audit log screen 1`] = `
           class="c15"
         >
           <button
-            class="c16"
+            class="c16 c17"
             disabled=""
             title="Previous page"
           >
             <span
-              class="c17 c18 icon icon-arrow-left-circle "
+              class="c18 c19 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c16"
+            class="c20 c17"
             disabled=""
             title="Next page"
           >
             <span
-              class="c17 c18 icon icon-arrow-right-circle "
+              class="c18 c19 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
@@ -7633,7 +7771,7 @@ exports[`loaded audit log screen 1`] = `
       </div>
     </nav>
     <table
-      class="c19"
+      class="c21"
     >
       <thead>
         <tr>
@@ -7641,7 +7779,7 @@ exports[`loaded audit log screen 1`] = `
             <a>
               Type
               <span
-                class="c17 c20 icon icon-chevrons-expand-vertical "
+                class="c18 c22 icon icon-chevrons-expand-vertical "
                 title="sort items"
               />
             </a>
@@ -7655,7 +7793,7 @@ exports[`loaded audit log screen 1`] = `
             <a>
               Created (UTC)
               <span
-                class="c17 c20 icon icon-chevron-down "
+                class="c18 c22 icon icon-chevron-down "
                 title="sort items desc"
               />
             </a>
@@ -7671,10 +7809,10 @@ exports[`loaded audit log screen 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c21"
+              class="c23"
             >
               <span
-                class="c17 c22 icon icon-info_outline c17 c22"
+                class="c18 c24 icon icon-info_outline c18 c24"
                 font-size="3"
               />
               User Updated
@@ -7694,7 +7832,7 @@ exports[`loaded audit log screen 1`] = `
             align="right"
           >
             <button
-              class="c23"
+              class="c25"
               kind="border"
               width="87px"
             >
@@ -7707,10 +7845,10 @@ exports[`loaded audit log screen 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c21"
+              class="c23"
             >
               <span
-                class="c17 c22 icon icon-info_outline c17 c22"
+                class="c18 c24 icon icon-info_outline c18 c24"
                 font-size="3"
               />
               User Deleted
@@ -7730,7 +7868,7 @@ exports[`loaded audit log screen 1`] = `
             align="right"
           >
             <button
-              class="c23"
+              class="c25"
               kind="border"
               width="87px"
             >
@@ -7743,10 +7881,10 @@ exports[`loaded audit log screen 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c21"
+              class="c23"
             >
               <span
-                class="c17 c22 icon icon-question-circle c17 c22"
+                class="c18 c24 icon icon-question-circle c18 c24"
                 font-size="3"
               />
               Unknown Event
@@ -7766,7 +7904,7 @@ exports[`loaded audit log screen 1`] = `
             align="right"
           >
             <button
-              class="c23"
+              class="c25"
               kind="border"
               width="87px"
             >
@@ -7779,10 +7917,10 @@ exports[`loaded audit log screen 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c21"
+              class="c23"
             >
               <span
-                class="c17 c22 icon icon-terminal c17 c22"
+                class="c18 c24 icon icon-terminal c18 c24"
                 font-size="3"
               />
               Session File Access
@@ -7802,7 +7940,7 @@ exports[`loaded audit log screen 1`] = `
             align="right"
           >
             <button
-              class="c23"
+              class="c25"
               kind="border"
               width="87px"
             >
@@ -7815,10 +7953,10 @@ exports[`loaded audit log screen 1`] = `
             style="vertical-align: inherit;"
           >
             <div
-              class="c21"
+              class="c23"
             >
               <span
-                class="c17 c22 icon icon-terminal c17 c22"
+                class="c18 c24 icon icon-terminal c18 c24"
                 font-size="3"
               />
               Session Network Connection
@@ -7838,7 +7976,7 @@ exports[`loaded audit log screen 1`] = `
             align="right"
           >
             <button
-              class="c23"
+              class="c25"
               kind="border"
               width="87px"
             >
diff --git a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
index c3811684311f3..e3c73a8fabbb3 100644
--- a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
+++ b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render clusters 1`] = `
-.c21 {
+.c23 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -29,35 +29,35 @@ exports[`render clusters 1`] = `
   height: 24px;
 }
 
-.c21:hover,
-.c21:focus {
+.c23:hover,
+.c23:focus {
   background: rgba(255,255,255,0.07);
 }
 
-.c21:active {
+.c23:active {
   background: rgba(255,255,255,0.13);
 }
 
-.c21:disabled {
+.c23:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c16 {
+.c17 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
-.c19 {
+.c21 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
 }
 
-.c22 {
+.c24 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
@@ -67,6 +67,93 @@ exports[`render clusters 1`] = `
   font-size: 14px;
 }
 
+.c14 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c14 .c16 {
+  color: inherit;
+}
+
+.c14:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c14:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c14:hover:enabled,
+.c14:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c14:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c18 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c18 .c16 {
+  color: inherit;
+}
+
+.c18:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c18:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c18:hover:enabled,
+.c18:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c18:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c12 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -78,7 +165,7 @@ exports[`render clusters 1`] = `
   color: #FFFFFF;
 }
 
-.c20 {
+.c22 {
   box-sizing: border-box;
   border-radius: 10px;
   display: inline-block;
@@ -149,9 +236,8 @@ exports[`render clusters 1`] = `
   padding-bottom: 24px;
 }
 
-.c17 {
+.c19 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -161,39 +247,39 @@ exports[`render clusters 1`] = `
   border-bottom-left-radius: 8px;
 }
 
-.c17 > thead > tr > th,
-.c17 > tbody > tr > th,
-.c17 > tfoot > tr > th,
-.c17 > thead > tr > td,
-.c17 > tbody > tr > td,
-.c17 > tfoot > tr > td {
+.c19 > thead > tr > th,
+.c19 > tbody > tr > th,
+.c19 > tfoot > tr > th,
+.c19 > thead > tr > td,
+.c19 > tbody > tr > td,
+.c19 > tfoot > tr > td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c17 > thead > tr > th:first-child,
-.c17 > tbody > tr > th:first-child,
-.c17 > tfoot > tr > th:first-child,
-.c17 > thead > tr > td:first-child,
-.c17 > tbody > tr > td:first-child,
-.c17 > tfoot > tr > td:first-child {
+.c19 > thead > tr > th:first-child,
+.c19 > tbody > tr > th:first-child,
+.c19 > tfoot > tr > th:first-child,
+.c19 > thead > tr > td:first-child,
+.c19 > tbody > tr > td:first-child,
+.c19 > tfoot > tr > td:first-child {
   padding-left: 24px;
 }
 
-.c17 > thead > tr > th:last-child,
-.c17 > tbody > tr > th:last-child,
-.c17 > tfoot > tr > th:last-child,
-.c17 > thead > tr > td:last-child,
-.c17 > tbody > tr > td:last-child,
-.c17 > tfoot > tr > td:last-child {
+.c19 > thead > tr > th:last-child,
+.c19 > tbody > tr > th:last-child,
+.c19 > tfoot > tr > th:last-child,
+.c19 > thead > tr > td:last-child,
+.c19 > tbody > tr > td:last-child,
+.c19 > tfoot > tr > td:last-child {
   padding-right: 24px;
 }
 
-.c17 > tbody > tr > td {
+.c19 > tbody > tr > td {
   vertical-align: middle;
 }
 
-.c17 > thead > tr > th {
+.c19 > thead > tr > th {
   background: rgba(255,255,255,0.07);
   color: #FFFFFF;
   cursor: pointer;
@@ -207,22 +293,22 @@ exports[`render clusters 1`] = `
   white-space: nowrap;
 }
 
-.c17 > thead > tr > th .c15 {
+.c19 > thead > tr > th .c16 {
   font-weight: bold;
   font-size: 8px;
   margin-left: 8px;
 }
 
-.c17 > tbody > tr > td {
+.c19 > tbody > tr > td {
   color: #FFFFFF;
   line-height: 16px;
 }
 
-.c17 tbody tr {
+.c19 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
-.c17 tbody tr:hover {
+.c19 tbody tr:hover {
   background-color: rgba(255,255,255,0.07);
 }
 
@@ -242,29 +328,12 @@ exports[`render clusters 1`] = `
   border-radius: 8px;
 }
 
-.c14 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c14 .c15 {
+.c15 .c16 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c14:hover .c15,
-.c14:focus .c15 {
-  opacity: 1;
-}
-
-.c14:disabled {
-  cursor: default;
 }
 
-.c14:disabled .c15 {
-  opacity: 0.1;
+.c15 .c16:before {
+  padding-left: 1px;
 }
 
 .c9 {
@@ -333,7 +402,7 @@ exports[`render clusters 1`] = `
   font-size: 12px;
 }
 
-.c18 td {
+.c20 td {
   height: 22px;
 }
 
@@ -406,22 +475,22 @@ exports[`render clusters 1`] = `
           class="c13"
         >
           <button
-            class="c14"
+            class="c14 c15"
             disabled=""
             title="Previous page"
           >
             <span
-              class="c15 c16 icon icon-arrow-left-circle "
+              class="c16 c17 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c14"
+            class="c18 c15"
             disabled=""
             title="Next page"
           >
             <span
-              class="c15 c16 icon icon-arrow-right-circle "
+              class="c16 c17 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
@@ -429,7 +498,7 @@ exports[`render clusters 1`] = `
       </div>
     </nav>
     <table
-      class="c17 c18"
+      class="c19 c20"
     >
       <thead>
         <tr>
@@ -440,7 +509,7 @@ exports[`render clusters 1`] = `
             <a>
               Name
               <span
-                class="c15 c19 icon icon-chevron-up "
+                class="c16 c21 icon icon-chevron-up "
                 title="sort items asc"
               />
             </a>
@@ -456,7 +525,7 @@ exports[`render clusters 1`] = `
             style="width: 40px;"
           >
             <div
-              class="c20"
+              class="c22"
               kind="primary"
             >
               ROOT
@@ -469,13 +538,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -493,13 +562,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -517,13 +586,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -541,13 +610,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -565,13 +634,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -589,13 +658,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -613,13 +682,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -637,13 +706,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -661,13 +730,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -685,13 +754,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -709,13 +778,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -733,13 +802,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -757,13 +826,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -781,13 +850,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -805,13 +874,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -829,13 +898,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -853,13 +922,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -877,13 +946,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -901,13 +970,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -925,13 +994,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -949,13 +1018,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -973,13 +1042,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -997,13 +1066,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1021,13 +1090,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1045,13 +1114,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1069,13 +1138,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1093,13 +1162,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1117,13 +1186,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1141,13 +1210,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1165,13 +1234,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1189,13 +1258,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1213,13 +1282,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1237,13 +1306,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1261,13 +1330,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1285,13 +1354,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1309,13 +1378,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
@@ -1333,13 +1402,13 @@ exports[`render clusters 1`] = `
             align="right"
           >
             <button
-              class="c21"
+              class="c23"
               height="24px"
               kind="border"
             >
               OPTIONS
               <span
-                class="c15 c22 icon icon-caret-down "
+                class="c16 c24 icon icon-caret-down "
                 color="text.slightlyMuted"
                 font-size="2"
               />
diff --git a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
index 3fdd8b916e139..43d2d77692cff 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
@@ -72,13 +72,100 @@ exports[`render DocumentNodes 1`] = `
   font-size: 14px;
 }
 
-.c38 {
+.c39 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
+.c37 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c37 .c26 {
+  color: inherit;
+}
+
+.c37:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c37:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c37:hover:enabled,
+.c37:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c37:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c40 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c40 .c26 {
+  color: inherit;
+}
+
+.c40:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c40:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c40:hover:enabled,
+.c40:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c40:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c25 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -166,7 +253,6 @@ exports[`render DocumentNodes 1`] = `
 
 .c30 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -229,7 +315,7 @@ exports[`render DocumentNodes 1`] = `
   line-height: 16px;
 }
 
-.c30 tbody tr {
+.c30 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -257,6 +343,7 @@ exports[`render DocumentNodes 1`] = `
   align-items: center;
   justify-content: space-between;
   background: #222C59;
+  border-top: 1px solid rgba(255,255,255,0.07);
 }
 
 .c10 {
@@ -285,29 +372,12 @@ exports[`render DocumentNodes 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c37 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c37 .c26 {
+.c38 .c26 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c37:hover .c26,
-.c37:focus .c26 {
-  opacity: 1;
-}
-
-.c37:disabled {
-  cursor: default;
 }
 
-.c37:disabled .c26 {
-  opacity: 0.1;
+.c38 .c26:before {
+  padding-left: 1px;
 }
 
 .c19 {
@@ -1000,10 +1070,10 @@ exports[`render DocumentNodes 1`] = `
               </td>
               <td>
                 <span
-                  style="cursor: default;"
+                  style="cursor: default; white-space: nowrap;"
                   title="This node is connected to cluster through reverse tunnel"
                 >
-                  ⟵ tunnel
+                  ← tunnel
                 </span>
               </td>
               <td>
@@ -1047,10 +1117,10 @@ exports[`render DocumentNodes 1`] = `
               </td>
               <td>
                 <span
-                  style="cursor: default;"
+                  style="cursor: default; white-space: nowrap;"
                   title="This node is connected to cluster through reverse tunnel"
                 >
-                  ⟵ tunnel
+                  ← tunnel
                 </span>
               </td>
               <td>
@@ -1167,22 +1237,22 @@ exports[`render DocumentNodes 1`] = `
               class="c28"
             >
               <button
-                class="c37"
+                class="c37 c38"
                 disabled=""
                 title="Previous page"
               >
                 <span
-                  class="c26 c38 icon icon-arrow-left-circle "
+                  class="c26 c39 icon icon-arrow-left-circle "
                   font-size="3"
                 />
               </button>
               <button
-                class="c37"
+                class="c40 c38"
                 disabled=""
                 title="Next page"
               >
                 <span
-                  class="c26 c38 icon icon-arrow-right-circle "
+                  class="c26 c39 icon icon-arrow-right-circle "
                   font-size="3"
                 />
               </button>
diff --git a/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap b/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap
index 4969e8fa925aa..05023e17a7e66 100644
--- a/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap
+++ b/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap
@@ -346,13 +346,100 @@ exports[`failed 1`] = `
   color: #FFFFFF;
 }
 
-.c31 {
+.c32 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
+.c30 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c30 .c20 {
+  color: inherit;
+}
+
+.c30:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c30:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c30:hover:enabled,
+.c30:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c30:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c33 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c33 .c20 {
+  color: inherit;
+}
+
+.c33:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c33:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c33:hover:enabled,
+.c33:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c33:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c19 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -447,7 +534,6 @@ exports[`failed 1`] = `
 
 .c24 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -510,7 +596,7 @@ exports[`failed 1`] = `
   line-height: 16px;
 }
 
-.c24 tbody tr {
+.c24 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -538,6 +624,7 @@ exports[`failed 1`] = `
   align-items: center;
   justify-content: space-between;
   background: #222C59;
+  border-top: 1px solid rgba(255,255,255,0.07);
 }
 
 .c4 {
@@ -566,29 +653,12 @@ exports[`failed 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c30 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c30 .c20 {
+.c31 .c20 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c30:hover .c20,
-.c30:focus .c20 {
-  opacity: 1;
-}
-
-.c30:disabled {
-  cursor: default;
 }
 
-.c30:disabled .c20 {
-  opacity: 0.1;
+.c31 .c20:before {
+  padding-left: 1px;
 }
 
 .c13 {
@@ -1006,20 +1076,20 @@ exports[`failed 1`] = `
           class="c22"
         >
           <button
-            class="c30"
+            class="c30 c31"
             title="Previous page"
           >
             <span
-              class="c20 c31 icon icon-arrow-left-circle "
+              class="c20 c32 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c30"
+            class="c33 c31"
             title="Next page"
           >
             <span
-              class="c20 c31 icon icon-arrow-right-circle "
+              class="c20 c32 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
@@ -1127,13 +1197,100 @@ exports[`open source loaded 1`] = `
   color: #FFFFFF;
 }
 
-.c31 {
+.c32 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
+.c30 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c30 .c20 {
+  color: inherit;
+}
+
+.c30:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c30:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c30:hover:enabled,
+.c30:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c30:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c33 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c33 .c20 {
+  color: inherit;
+}
+
+.c33:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c33:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c33:hover:enabled,
+.c33:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c33:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c19 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1228,7 +1385,6 @@ exports[`open source loaded 1`] = `
 
 .c24 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -1291,7 +1447,7 @@ exports[`open source loaded 1`] = `
   line-height: 16px;
 }
 
-.c24 tbody tr {
+.c24 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -1319,6 +1475,7 @@ exports[`open source loaded 1`] = `
   align-items: center;
   justify-content: space-between;
   background: #222C59;
+  border-top: 1px solid rgba(255,255,255,0.07);
 }
 
 .c4 {
@@ -1347,29 +1504,12 @@ exports[`open source loaded 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c30 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c30 .c20 {
+.c31 .c20 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c30:hover .c20,
-.c30:focus .c20 {
-  opacity: 1;
-}
-
-.c30:disabled {
-  cursor: default;
 }
 
-.c30:disabled .c20 {
-  opacity: 0.1;
+.c31 .c20:before {
+  padding-left: 1px;
 }
 
 .c13 {
@@ -1793,20 +1933,20 @@ exports[`open source loaded 1`] = `
           class="c22"
         >
           <button
-            class="c30"
+            class="c30 c31"
             title="Previous page"
           >
             <span
-              class="c20 c31 icon icon-arrow-left-circle "
+              class="c20 c32 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c30"
+            class="c33 c31"
             title="Next page"
           >
             <span
-              class="c20 c31 icon icon-arrow-right-circle "
+              class="c20 c32 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
diff --git a/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap b/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap
index e208f2c8ec3d9..ee3904ec5194c 100644
--- a/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap
@@ -346,13 +346,100 @@ exports[`failed 1`] = `
   color: #FFFFFF;
 }
 
-.c31 {
+.c32 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
+.c30 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c30 .c20 {
+  color: inherit;
+}
+
+.c30:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c30:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c30:hover:enabled,
+.c30:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c30:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c33 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c33 .c20 {
+  color: inherit;
+}
+
+.c33:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c33:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c33:hover:enabled,
+.c33:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c33:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c19 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -407,7 +494,6 @@ exports[`failed 1`] = `
 
 .c24 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -470,7 +556,7 @@ exports[`failed 1`] = `
   line-height: 16px;
 }
 
-.c24 tbody tr {
+.c24 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -498,6 +584,7 @@ exports[`failed 1`] = `
   align-items: center;
   justify-content: space-between;
   background: #222C59;
+  border-top: 1px solid rgba(255,255,255,0.07);
 }
 
 .c4 {
@@ -526,29 +613,12 @@ exports[`failed 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c30 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c30 .c20 {
+.c31 .c20 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c30:hover .c20,
-.c30:focus .c20 {
-  opacity: 1;
-}
-
-.c30:disabled {
-  cursor: default;
 }
 
-.c30:disabled .c20 {
-  opacity: 0.1;
+.c31 .c20:before {
+  padding-left: 1px;
 }
 
 .c13 {
@@ -964,20 +1034,20 @@ exports[`failed 1`] = `
           class="c22"
         >
           <button
-            class="c30"
+            class="c30 c31"
             title="Previous page"
           >
             <span
-              class="c20 c31 icon icon-arrow-left-circle "
+              class="c20 c32 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c30"
+            class="c33 c31"
             title="Next page"
           >
             <span
-              class="c20 c31 icon icon-arrow-right-circle "
+              class="c20 c32 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
@@ -1086,13 +1156,100 @@ exports[`loaded 1`] = `
   color: #FFFFFF;
 }
 
-.c31 {
+.c32 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
+.c30 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c30 .c20 {
+  color: inherit;
+}
+
+.c30:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c30:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c30:hover:enabled,
+.c30:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c30:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c33 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c33 .c20 {
+  color: inherit;
+}
+
+.c33:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c33:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c33:hover:enabled,
+.c33:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c33:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c19 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1147,7 +1304,6 @@ exports[`loaded 1`] = `
 
 .c24 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -1210,7 +1366,7 @@ exports[`loaded 1`] = `
   line-height: 16px;
 }
 
-.c24 tbody tr {
+.c24 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -1238,6 +1394,7 @@ exports[`loaded 1`] = `
   align-items: center;
   justify-content: space-between;
   background: #222C59;
+  border-top: 1px solid rgba(255,255,255,0.07);
 }
 
 .c4 {
@@ -1266,29 +1423,12 @@ exports[`loaded 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c30 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c30 .c20 {
+.c31 .c20 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c30:hover .c20,
-.c30:focus .c20 {
-  opacity: 1;
-}
-
-.c30:disabled {
-  cursor: default;
 }
 
-.c30:disabled .c20 {
-  opacity: 0.1;
+.c31 .c20:before {
+  padding-left: 1px;
 }
 
 .c13 {
@@ -1710,20 +1850,20 @@ exports[`loaded 1`] = `
           class="c22"
         >
           <button
-            class="c30"
+            class="c30 c31"
             title="Previous page"
           >
             <span
-              class="c20 c31 icon icon-arrow-left-circle "
+              class="c20 c32 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c30"
+            class="c33 c31"
             title="Next page"
           >
             <span
-              class="c20 c31 icon icon-arrow-right-circle "
+              class="c20 c32 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
diff --git a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
index df4de84002d15..2f5d020af59bb 100644
--- a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
@@ -357,13 +357,100 @@ exports[`failed 1`] = `
   font-size: 14px;
 }
 
-.c32 {
+.c33 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
+.c31 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c31 .c20 {
+  color: inherit;
+}
+
+.c31:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c31:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c31:hover:enabled,
+.c31:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c31:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c34 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c34 .c20 {
+  color: inherit;
+}
+
+.c34:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c34:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c34:hover:enabled,
+.c34:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c34:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c19 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -458,7 +545,6 @@ exports[`failed 1`] = `
 
 .c24 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -521,7 +607,7 @@ exports[`failed 1`] = `
   line-height: 16px;
 }
 
-.c24 tbody tr {
+.c24 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -549,6 +635,7 @@ exports[`failed 1`] = `
   align-items: center;
   justify-content: space-between;
   background: #222C59;
+  border-top: 1px solid rgba(255,255,255,0.07);
 }
 
 .c4 {
@@ -577,29 +664,12 @@ exports[`failed 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c31 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c31 .c20 {
+.c32 .c20 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
 }
 
-.c31:hover .c20,
-.c31:focus .c20 {
-  opacity: 1;
-}
-
-.c31:disabled {
-  cursor: default;
-}
-
-.c31:disabled .c20 {
-  opacity: 0.1;
+.c32 .c20:before {
+  padding-left: 1px;
 }
 
 .c13 {
@@ -1090,10 +1160,10 @@ exports[`failed 1`] = `
           </td>
           <td>
             <span
-              style="cursor: default;"
+              style="cursor: default; white-space: nowrap;"
               title="This node is connected to cluster through reverse tunnel"
             >
-              ⟵ tunnel
+              ← tunnel
             </span>
           </td>
           <td>
@@ -1137,10 +1207,10 @@ exports[`failed 1`] = `
           </td>
           <td>
             <span
-              style="cursor: default;"
+              style="cursor: default; white-space: nowrap;"
               title="This node is connected to cluster through reverse tunnel"
             >
-              ⟵ tunnel
+              ← tunnel
             </span>
           </td>
           <td>
@@ -1191,20 +1261,20 @@ exports[`failed 1`] = `
           class="c22"
         >
           <button
-            class="c31"
+            class="c31 c32"
             title="Previous page"
           >
             <span
-              class="c20 c32 icon icon-arrow-left-circle "
+              class="c20 c33 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c31"
+            class="c34 c32"
             title="Next page"
           >
             <span
-              class="c20 c32 icon icon-arrow-right-circle "
+              class="c20 c33 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
@@ -1323,13 +1393,100 @@ exports[`loaded 1`] = `
   font-size: 14px;
 }
 
-.c35 {
+.c36 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
+.c34 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c34 .c23 {
+  color: inherit;
+}
+
+.c34:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c34:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c34:hover:enabled,
+.c34:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c34:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c37 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c37 .c23 {
+  color: inherit;
+}
+
+.c37:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c37:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c37:hover:enabled,
+.c37:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c37:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c22 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1483,7 +1640,6 @@ exports[`loaded 1`] = `
 
 .c27 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -1546,7 +1702,7 @@ exports[`loaded 1`] = `
   line-height: 16px;
 }
 
-.c27 tbody tr {
+.c27 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
@@ -1574,6 +1730,7 @@ exports[`loaded 1`] = `
   align-items: center;
   justify-content: space-between;
   background: #222C59;
+  border-top: 1px solid rgba(255,255,255,0.07);
 }
 
 .c8 {
@@ -1602,29 +1759,12 @@ exports[`loaded 1`] = `
   background-color: rgba(255,255,255,0.13);
 }
 
-.c34 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c34 .c23 {
+.c35 .c23 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c34:hover .c23,
-.c34:focus .c23 {
-  opacity: 1;
-}
-
-.c34:disabled {
-  cursor: default;
 }
 
-.c34:disabled .c23 {
-  opacity: 0.1;
+.c35 .c23:before {
+  padding-left: 1px;
 }
 
 .c16 {
@@ -2140,10 +2280,10 @@ exports[`loaded 1`] = `
           </td>
           <td>
             <span
-              style="cursor: default;"
+              style="cursor: default; white-space: nowrap;"
               title="This node is connected to cluster through reverse tunnel"
             >
-              ⟵ tunnel
+              ← tunnel
             </span>
           </td>
           <td>
@@ -2187,10 +2327,10 @@ exports[`loaded 1`] = `
           </td>
           <td>
             <span
-              style="cursor: default;"
+              style="cursor: default; white-space: nowrap;"
               title="This node is connected to cluster through reverse tunnel"
             >
-              ⟵ tunnel
+              ← tunnel
             </span>
           </td>
           <td>
@@ -2241,20 +2381,20 @@ exports[`loaded 1`] = `
           class="c25"
         >
           <button
-            class="c34"
+            class="c34 c35"
             title="Previous page"
           >
             <span
-              class="c23 c35 icon icon-arrow-left-circle "
+              class="c23 c36 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c34"
+            class="c37 c35"
             title="Next page"
           >
             <span
-              class="c23 c35 icon icon-arrow-right-circle "
+              class="c23 c36 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
diff --git a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
index 2fb84b0e3c321..1810350d2cbb3 100644
--- a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
+++ b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`rendering of Session Recordings 1`] = `
   width: 210px;
 }
 
-.c22 {
+.c24 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -34,35 +34,35 @@ exports[`rendering of Session Recordings 1`] = `
   width: 80px;
 }
 
-.c22:hover,
-.c22:focus {
+.c24:hover,
+.c24:focus {
   background: #B29DFF;
 }
 
-.c22:active {
+.c24:active {
   background: #C5B6FF;
 }
 
-.c22:disabled {
+.c24:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
-.c20 {
+.c22 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
 }
 
-.c21 {
+.c23 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
@@ -71,6 +71,93 @@ exports[`rendering of Session Recordings 1`] = `
   font-size: 16px;
 }
 
+.c16 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c16 .c18 {
+  color: inherit;
+}
+
+.c16:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c16:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c16:hover:enabled,
+.c16:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c16:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c20 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c20 .c18 {
+  color: inherit;
+}
+
+.c20:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c20:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c20:hover:enabled,
+.c20:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c20:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c14 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -301,9 +388,8 @@ exports[`rendering of Session Recordings 1`] = `
   padding-bottom: 24px;
 }
 
-.c19 {
+.c21 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -313,39 +399,39 @@ exports[`rendering of Session Recordings 1`] = `
   border-bottom-left-radius: 8px;
 }
 
-.c19 > thead > tr > th,
-.c19 > tbody > tr > th,
-.c19 > tfoot > tr > th,
-.c19 > thead > tr > td,
-.c19 > tbody > tr > td,
-.c19 > tfoot > tr > td {
+.c21 > thead > tr > th,
+.c21 > tbody > tr > th,
+.c21 > tfoot > tr > th,
+.c21 > thead > tr > td,
+.c21 > tbody > tr > td,
+.c21 > tfoot > tr > td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c19 > thead > tr > th:first-child,
-.c19 > tbody > tr > th:first-child,
-.c19 > tfoot > tr > th:first-child,
-.c19 > thead > tr > td:first-child,
-.c19 > tbody > tr > td:first-child,
-.c19 > tfoot > tr > td:first-child {
+.c21 > thead > tr > th:first-child,
+.c21 > tbody > tr > th:first-child,
+.c21 > tfoot > tr > th:first-child,
+.c21 > thead > tr > td:first-child,
+.c21 > tbody > tr > td:first-child,
+.c21 > tfoot > tr > td:first-child {
   padding-left: 24px;
 }
 
-.c19 > thead > tr > th:last-child,
-.c19 > tbody > tr > th:last-child,
-.c19 > tfoot > tr > th:last-child,
-.c19 > thead > tr > td:last-child,
-.c19 > tbody > tr > td:last-child,
-.c19 > tfoot > tr > td:last-child {
+.c21 > thead > tr > th:last-child,
+.c21 > tbody > tr > th:last-child,
+.c21 > tfoot > tr > th:last-child,
+.c21 > thead > tr > td:last-child,
+.c21 > tbody > tr > td:last-child,
+.c21 > tfoot > tr > td:last-child {
   padding-right: 24px;
 }
 
-.c19 > tbody > tr > td {
+.c21 > tbody > tr > td {
   vertical-align: middle;
 }
 
-.c19 > thead > tr > th {
+.c21 > thead > tr > th {
   background: rgba(255,255,255,0.07);
   color: #FFFFFF;
   cursor: pointer;
@@ -359,22 +445,22 @@ exports[`rendering of Session Recordings 1`] = `
   white-space: nowrap;
 }
 
-.c19 > thead > tr > th .c17 {
+.c21 > thead > tr > th .c18 {
   font-weight: bold;
   font-size: 8px;
   margin-left: 8px;
 }
 
-.c19 > tbody > tr > td {
+.c21 > tbody > tr > td {
   color: #FFFFFF;
   line-height: 16px;
 }
 
-.c19 tbody tr {
+.c21 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
-.c19 tbody tr:hover {
+.c21 tbody tr:hover {
   background-color: rgba(255,255,255,0.07);
 }
 
@@ -394,29 +480,12 @@ exports[`rendering of Session Recordings 1`] = `
   border-radius: 8px;
 }
 
-.c16 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c16 .c17 {
+.c17 .c18 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c16:hover .c17,
-.c16:focus .c17 {
-  opacity: 1;
-}
-
-.c16:disabled {
-  cursor: default;
 }
 
-.c16:disabled .c17 {
-  opacity: 0.1;
+.c17 .c18:before {
+  padding-left: 1px;
 }
 
 .c11 {
@@ -613,22 +682,22 @@ exports[`rendering of Session Recordings 1`] = `
             class="c15"
           >
             <button
-              class="c16"
+              class="c16 c17"
               disabled=""
               title="Previous page"
             >
               <span
-                class="c17 c18 icon icon-arrow-left-circle "
+                class="c18 c19 icon icon-arrow-left-circle "
                 font-size="3"
               />
             </button>
             <button
-              class="c16"
+              class="c20 c17"
               disabled=""
               title="Next page"
             >
               <span
-                class="c17 c18 icon icon-arrow-right-circle "
+                class="c18 c19 icon icon-arrow-right-circle "
                 font-size="3"
               />
             </button>
@@ -636,7 +705,7 @@ exports[`rendering of Session Recordings 1`] = `
         </div>
       </nav>
       <table
-        class="c19"
+        class="c21"
       >
         <thead>
           <tr>
@@ -644,7 +713,7 @@ exports[`rendering of Session Recordings 1`] = `
               <a>
                 Type
                 <span
-                  class="c17 c20 icon icon-chevrons-expand-vertical "
+                  class="c18 c22 icon icon-chevrons-expand-vertical "
                   title="sort items"
                 />
               </a>
@@ -653,7 +722,7 @@ exports[`rendering of Session Recordings 1`] = `
               <a>
                 Name
                 <span
-                  class="c17 c20 icon icon-chevrons-expand-vertical "
+                  class="c18 c22 icon icon-chevrons-expand-vertical "
                   title="sort items"
                 />
               </a>
@@ -662,7 +731,7 @@ exports[`rendering of Session Recordings 1`] = `
               <a>
                 User(s)
                 <span
-                  class="c17 c20 icon icon-chevrons-expand-vertical "
+                  class="c18 c22 icon icon-chevrons-expand-vertical "
                   title="sort items"
                 />
               </a>
@@ -671,7 +740,7 @@ exports[`rendering of Session Recordings 1`] = `
               <a>
                 Duration
                 <span
-                  class="c17 c20 icon icon-chevrons-expand-vertical "
+                  class="c18 c22 icon icon-chevrons-expand-vertical "
                   title="sort items"
                 />
               </a>
@@ -680,7 +749,7 @@ exports[`rendering of Session Recordings 1`] = `
               <a>
                 Created (UTC)
                 <span
-                  class="c17 c20 icon icon-chevron-down "
+                  class="c18 c22 icon icon-chevron-down "
                   title="sort items desc"
                 />
               </a>
@@ -699,7 +768,7 @@ exports[`rendering of Session Recordings 1`] = `
           <tr>
             <td>
               <span
-                class="c17 c21 icon icon-kubernetes c17 c21"
+                class="c18 c23 icon icon-kubernetes c18 c23"
                 font-size="3"
               />
             </td>
@@ -724,7 +793,7 @@ exports[`rendering of Session Recordings 1`] = `
               align="right"
             >
               <a
-                class="c22"
+                class="c24"
                 href="/web/cluster/localhost/session/8efccedd-9633-473f-bfb3-fcc07e2af345?recordingType=k8s"
                 kind="primary"
                 target="_blank"
@@ -737,7 +806,7 @@ exports[`rendering of Session Recordings 1`] = `
           <tr>
             <td>
               <span
-                class="c17 c21 icon icon-desktop c17 c21"
+                class="c18 c23 icon icon-desktop c18 c23"
                 font-size="3"
               />
             </td>
@@ -768,7 +837,7 @@ exports[`rendering of Session Recordings 1`] = `
           <tr>
             <td>
               <span
-                class="c17 c21 icon icon-desktop c17 c21"
+                class="c18 c23 icon icon-desktop c18 c23"
                 font-size="3"
               />
             </td>
@@ -799,7 +868,7 @@ exports[`rendering of Session Recordings 1`] = `
           <tr>
             <td>
               <span
-                class="c17 c21 icon icon-terminal c17 c21"
+                class="c18 c23 icon icon-terminal c18 c23"
                 font-size="3"
               />
             </td>
@@ -830,7 +899,7 @@ exports[`rendering of Session Recordings 1`] = `
           <tr>
             <td>
               <span
-                class="c17 c21 icon icon-terminal c17 c21"
+                class="c18 c23 icon icon-terminal c18 c23"
                 font-size="3"
               />
             </td>
@@ -861,7 +930,7 @@ exports[`rendering of Session Recordings 1`] = `
           <tr>
             <td>
               <span
-                class="c17 c21 icon icon-terminal c17 c21"
+                class="c18 c23 icon icon-terminal c18 c23"
                 font-size="3"
               />
             </td>
@@ -887,7 +956,7 @@ exports[`rendering of Session Recordings 1`] = `
               style=""
             >
               <a
-                class="c22"
+                class="c24"
                 href="/web/cluster/localhost/session/377875-6491-11e9-80a1-427cfde50f5a?recordingType=ssh"
                 kind="primary"
                 target="_blank"
@@ -900,7 +969,7 @@ exports[`rendering of Session Recordings 1`] = `
           <tr>
             <td>
               <span
-                class="c17 c21 icon icon-terminal c17 c21"
+                class="c18 c23 icon icon-terminal c18 c23"
                 font-size="3"
               />
             </td>
@@ -926,7 +995,7 @@ exports[`rendering of Session Recordings 1`] = `
               style=""
             >
               <a
-                class="c22"
+                class="c24"
                 href="/web/cluster/localhost/session/426485-6491-11e9-80a1-427cfde50f5a?recordingType=ssh"
                 kind="primary"
                 target="_blank"
diff --git a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
index 5da4f1ee96aab..1b91ec1c65cb4 100644
--- a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
+++ b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loaded 1`] = `
-.c21 {
+.c23 {
   box-sizing: border-box;
   width: 80px;
   text-align: center;
 }
 
-.c22 {
+.c24 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -34,35 +34,35 @@ exports[`loaded 1`] = `
   padding: 0px 16px;
 }
 
-.c22:hover,
-.c22:focus {
+.c24:hover,
+.c24:focus {
   background: rgba(255,255,255,0.07);
 }
 
-.c22:active {
+.c24:active {
   background: rgba(255,255,255,0.13);
 }
 
-.c22:disabled {
+.c24:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c16 {
+.c17 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
-.c19 {
+.c21 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
 }
 
-.c20 {
+.c22 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
@@ -71,7 +71,7 @@ exports[`loaded 1`] = `
   font-size: 16px;
 }
 
-.c23 {
+.c25 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
@@ -80,6 +80,93 @@ exports[`loaded 1`] = `
   font-size: 14px;
 }
 
+.c14 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c14 .c16 {
+  color: inherit;
+}
+
+.c14:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c14:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c14:hover:enabled,
+.c14:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c14:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c18 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c18 .c16 {
+  color: inherit;
+}
+
+.c18:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c18:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c18:hover:enabled,
+.c18:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c18:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c12 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -149,9 +236,8 @@ exports[`loaded 1`] = `
   padding-bottom: 24px;
 }
 
-.c17 {
+.c19 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -161,39 +247,39 @@ exports[`loaded 1`] = `
   border-bottom-left-radius: 8px;
 }
 
-.c17 > thead > tr > th,
-.c17 > tbody > tr > th,
-.c17 > tfoot > tr > th,
-.c17 > thead > tr > td,
-.c17 > tbody > tr > td,
-.c17 > tfoot > tr > td {
+.c19 > thead > tr > th,
+.c19 > tbody > tr > th,
+.c19 > tfoot > tr > th,
+.c19 > thead > tr > td,
+.c19 > tbody > tr > td,
+.c19 > tfoot > tr > td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c17 > thead > tr > th:first-child,
-.c17 > tbody > tr > th:first-child,
-.c17 > tfoot > tr > th:first-child,
-.c17 > thead > tr > td:first-child,
-.c17 > tbody > tr > td:first-child,
-.c17 > tfoot > tr > td:first-child {
+.c19 > thead > tr > th:first-child,
+.c19 > tbody > tr > th:first-child,
+.c19 > tfoot > tr > th:first-child,
+.c19 > thead > tr > td:first-child,
+.c19 > tbody > tr > td:first-child,
+.c19 > tfoot > tr > td:first-child {
   padding-left: 24px;
 }
 
-.c17 > thead > tr > th:last-child,
-.c17 > tbody > tr > th:last-child,
-.c17 > tfoot > tr > th:last-child,
-.c17 > thead > tr > td:last-child,
-.c17 > tbody > tr > td:last-child,
-.c17 > tfoot > tr > td:last-child {
+.c19 > thead > tr > th:last-child,
+.c19 > tbody > tr > th:last-child,
+.c19 > tfoot > tr > th:last-child,
+.c19 > thead > tr > td:last-child,
+.c19 > tbody > tr > td:last-child,
+.c19 > tfoot > tr > td:last-child {
   padding-right: 24px;
 }
 
-.c17 > tbody > tr > td {
+.c19 > tbody > tr > td {
   vertical-align: middle;
 }
 
-.c17 > thead > tr > th {
+.c19 > thead > tr > th {
   background: rgba(255,255,255,0.07);
   color: #FFFFFF;
   cursor: pointer;
@@ -207,22 +293,22 @@ exports[`loaded 1`] = `
   white-space: nowrap;
 }
 
-.c17 > thead > tr > th .c15 {
+.c19 > thead > tr > th .c16 {
   font-weight: bold;
   font-size: 8px;
   margin-left: 8px;
 }
 
-.c17 > tbody > tr > td {
+.c19 > tbody > tr > td {
   color: #FFFFFF;
   line-height: 16px;
 }
 
-.c17 tbody tr {
+.c19 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
-.c17 tbody tr:hover {
+.c19 tbody tr:hover {
   background-color: rgba(255,255,255,0.07);
 }
 
@@ -242,29 +328,12 @@ exports[`loaded 1`] = `
   border-radius: 8px;
 }
 
-.c14 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c14 .c15 {
+.c15 .c16 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c14:hover .c15,
-.c14:focus .c15 {
-  opacity: 1;
-}
-
-.c14:disabled {
-  cursor: default;
 }
 
-.c14:disabled .c15 {
-  opacity: 0.1;
+.c15 .c16:before {
+  padding-left: 1px;
 }
 
 .c9 {
@@ -333,7 +402,7 @@ exports[`loaded 1`] = `
   font-size: 12px;
 }
 
-.c18 tbody > tr > td {
+.c20 tbody > tr > td {
   vertical-align: middle;
 }
 
@@ -406,22 +475,22 @@ exports[`loaded 1`] = `
           class="c13"
         >
           <button
-            class="c14"
+            class="c14 c15"
             disabled=""
             title="Previous page"
           >
             <span
-              class="c15 c16 icon icon-arrow-left-circle "
+              class="c16 c17 icon icon-arrow-left-circle "
               font-size="3"
             />
           </button>
           <button
-            class="c14"
+            class="c18 c15"
             disabled=""
             title="Next page"
           >
             <span
-              class="c15 c16 icon icon-arrow-right-circle "
+              class="c16 c17 icon icon-arrow-right-circle "
               font-size="3"
             />
           </button>
@@ -429,7 +498,7 @@ exports[`loaded 1`] = `
       </div>
     </nav>
     <table
-      class="c17 c18"
+      class="c19 c20"
     >
       <thead>
         <tr>
@@ -437,7 +506,7 @@ exports[`loaded 1`] = `
             <a>
               Type
               <span
-                class="c15 c19 icon icon-chevrons-expand-vertical "
+                class="c16 c21 icon icon-chevrons-expand-vertical "
                 title="sort items"
               />
             </a>
@@ -446,7 +515,7 @@ exports[`loaded 1`] = `
             <a>
               Name
               <span
-                class="c15 c19 icon icon-chevrons-expand-vertical "
+                class="c16 c21 icon icon-chevrons-expand-vertical "
                 title="sort items"
               />
             </a>
@@ -465,7 +534,7 @@ exports[`loaded 1`] = `
             <a>
               Duration
               <span
-                class="c15 c19 icon icon-chevron-up "
+                class="c16 c21 icon icon-chevron-up "
                 title="sort items asc"
               />
             </a>
@@ -479,7 +548,7 @@ exports[`loaded 1`] = `
         <tr>
           <td>
             <span
-              class="c15 c20 icon icon-kubernetes c15 c20"
+              class="c16 c22 icon icon-kubernetes c16 c22"
               font-size="3"
             />
           </td>
@@ -503,7 +572,7 @@ exports[`loaded 1`] = `
         <tr>
           <td>
             <span
-              class="c15 c20 icon icon-terminal c15 c20"
+              class="c16 c22 icon icon-terminal c16 c22"
               font-size="3"
             />
           </td>
@@ -524,16 +593,16 @@ exports[`loaded 1`] = `
             height="26px"
           >
             <div
-              class="c21"
+              class="c23"
               width="80px"
             >
               <button
-                class="c22"
+                class="c24"
                 kind="border"
               >
                 Join
                 <span
-                  class="c15 c23 icon icon-caret-down "
+                  class="c16 c25 icon icon-caret-down "
                   color="text.slightlyMuted"
                   font-size="2"
                 />
@@ -544,7 +613,7 @@ exports[`loaded 1`] = `
         <tr>
           <td>
             <span
-              class="c15 c20 icon icon-terminal c15 c20"
+              class="c16 c22 icon icon-terminal c16 c22"
               font-size="3"
             />
           </td>
@@ -565,16 +634,16 @@ exports[`loaded 1`] = `
             height="26px"
           >
             <div
-              class="c21"
+              class="c23"
               width="80px"
             >
               <button
-                class="c22"
+                class="c24"
                 kind="border"
               >
                 Join
                 <span
-                  class="c15 c23 icon icon-caret-down "
+                  class="c16 c25 icon icon-caret-down "
                   color="text.slightlyMuted"
                   font-size="2"
                 />
@@ -585,7 +654,7 @@ exports[`loaded 1`] = `
         <tr>
           <td>
             <span
-              class="c15 c20 icon icon-terminal c15 c20"
+              class="c16 c22 icon icon-terminal c16 c22"
               font-size="3"
             />
           </td>
@@ -606,16 +675,16 @@ exports[`loaded 1`] = `
             height="26px"
           >
             <div
-              class="c21"
+              class="c23"
               width="80px"
             >
               <button
-                class="c22"
+                class="c24"
                 kind="border"
               >
                 Join
                 <span
-                  class="c15 c23 icon icon-caret-down "
+                  class="c16 c25 icon icon-caret-down "
                   color="text.slightlyMuted"
                   font-size="2"
                 />
@@ -626,7 +695,7 @@ exports[`loaded 1`] = `
         <tr>
           <td>
             <span
-              class="c15 c20 icon icon-desktop c15 c20"
+              class="c16 c22 icon icon-desktop c16 c22"
               font-size="3"
             />
           </td>
@@ -650,7 +719,7 @@ exports[`loaded 1`] = `
         <tr>
           <td>
             <span
-              class="c15 c20 icon icon-database c15 c20"
+              class="c16 c22 icon icon-database c16 c22"
               font-size="3"
             />
           </td>
@@ -674,7 +743,7 @@ exports[`loaded 1`] = `
         <tr>
           <td>
             <span
-              class="c15 c20 icon icon-new-tab c15 c20"
+              class="c16 c22 icon icon-new-tab c16 c22"
               font-size="3"
             />
           </td>
diff --git a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
index 2638067c4be24..490fe5dcef5fb 100644
--- a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
+++ b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`success state 1`] = `
   cursor: auto;
 }
 
-.c22 {
+.c24 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -72,35 +72,35 @@ exports[`success state 1`] = `
   height: 24px;
 }
 
-.c22:hover,
-.c22:focus {
+.c24:hover,
+.c24:focus {
   background: rgba(255,255,255,0.07);
 }
 
-.c22:active {
+.c24:active {
   background: rgba(255,255,255,0.13);
 }
 
-.c22:disabled {
+.c24:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c17 {
+.c18 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
   font-size: 16px;
 }
 
-.c19 {
+.c21 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
 }
 
-.c23 {
+.c25 {
   display: inline-block;
   transition: color 0.3s;
   color: #FFFFFF;
@@ -110,6 +110,93 @@ exports[`success state 1`] = `
   font-size: 14px;
 }
 
+.c15 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.c15 .c17 {
+  color: inherit;
+}
+
+.c15:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c15:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c15:hover:enabled,
+.c15:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c15:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
+.c19 {
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  outline: none;
+  border-radius: 50%;
+  overflow: visible;
+  justify-content: center;
+  text-align: center;
+  flex: 0 0 auto;
+  background: transparent;
+  color: inherit;
+  transition: all 0.3s;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+  height: 32px;
+  width: 32px;
+  margin-left: 0px;
+}
+
+.c19 .c17 {
+  color: inherit;
+}
+
+.c19:disabled {
+  color: rgba(255,255,255,0.36);
+}
+
+.c19:disabled {
+  color: rgba(255,255,255,0.36);
+  cursor: default;
+}
+
+.c19:hover:enabled,
+.c19:focus:enabled {
+  background: rgba(255,255,255,0.13);
+}
+
+.c19:active:enabled {
+  background: rgba(255,255,255,0.18);
+}
+
 .c13 {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -121,7 +208,7 @@ exports[`success state 1`] = `
   color: #FFFFFF;
 }
 
-.c21 {
+.c23 {
   box-sizing: border-box;
   border-radius: 10px;
   display: inline-block;
@@ -155,7 +242,7 @@ exports[`success state 1`] = `
   display: flex;
 }
 
-.c20 {
+.c22 {
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
@@ -200,9 +287,8 @@ exports[`success state 1`] = `
   padding-bottom: 24px;
 }
 
-.c18 {
+.c20 {
   background: #222C59;
-  border-collapse: collapse;
   border-spacing: 0;
   font-size: 12px;
   width: 100%;
@@ -212,39 +298,39 @@ exports[`success state 1`] = `
   border-bottom-left-radius: 8px;
 }
 
-.c18 > thead > tr > th,
-.c18 > tbody > tr > th,
-.c18 > tfoot > tr > th,
-.c18 > thead > tr > td,
-.c18 > tbody > tr > td,
-.c18 > tfoot > tr > td {
+.c20 > thead > tr > th,
+.c20 > tbody > tr > th,
+.c20 > tfoot > tr > th,
+.c20 > thead > tr > td,
+.c20 > tbody > tr > td,
+.c20 > tfoot > tr > td {
   padding: 8px 8px;
   vertical-align: middle;
 }
 
-.c18 > thead > tr > th:first-child,
-.c18 > tbody > tr > th:first-child,
-.c18 > tfoot > tr > th:first-child,
-.c18 > thead > tr > td:first-child,
-.c18 > tbody > tr > td:first-child,
-.c18 > tfoot > tr > td:first-child {
+.c20 > thead > tr > th:first-child,
+.c20 > tbody > tr > th:first-child,
+.c20 > tfoot > tr > th:first-child,
+.c20 > thead > tr > td:first-child,
+.c20 > tbody > tr > td:first-child,
+.c20 > tfoot > tr > td:first-child {
   padding-left: 24px;
 }
 
-.c18 > thead > tr > th:last-child,
-.c18 > tbody > tr > th:last-child,
-.c18 > tfoot > tr > th:last-child,
-.c18 > thead > tr > td:last-child,
-.c18 > tbody > tr > td:last-child,
-.c18 > tfoot > tr > td:last-child {
+.c20 > thead > tr > th:last-child,
+.c20 > tbody > tr > th:last-child,
+.c20 > tfoot > tr > th:last-child,
+.c20 > thead > tr > td:last-child,
+.c20 > tbody > tr > td:last-child,
+.c20 > tfoot > tr > td:last-child {
   padding-right: 24px;
 }
 
-.c18 > tbody > tr > td {
+.c20 > tbody > tr > td {
   vertical-align: middle;
 }
 
-.c18 > thead > tr > th {
+.c20 > thead > tr > th {
   background: rgba(255,255,255,0.07);
   color: #FFFFFF;
   cursor: pointer;
@@ -258,22 +344,22 @@ exports[`success state 1`] = `
   white-space: nowrap;
 }
 
-.c18 > thead > tr > th .c16 {
+.c20 > thead > tr > th .c17 {
   font-weight: bold;
   font-size: 8px;
   margin-left: 8px;
 }
 
-.c18 > tbody > tr > td {
+.c20 > tbody > tr > td {
   color: #FFFFFF;
   line-height: 16px;
 }
 
-.c18 tbody tr {
+.c20 > tbody > tr:not(:last-of-type) > td {
   border-bottom: 1px solid rgba(255,255,255,0.07);
 }
 
-.c18 tbody tr:hover {
+.c20 tbody tr:hover {
   background-color: rgba(255,255,255,0.07);
 }
 
@@ -293,29 +379,12 @@ exports[`success state 1`] = `
   border-radius: 8px;
 }
 
-.c15 {
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.c15 .c16 {
+.c16 .c17 {
   font-size: 20px;
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-
-.c15:hover .c16,
-.c15:focus .c16 {
-  opacity: 1;
-}
-
-.c15:disabled {
-  cursor: default;
 }
 
-.c15:disabled .c16 {
-  opacity: 0.1;
+.c16 .c17:before {
+  padding-left: 1px;
 }
 
 .c10 {
@@ -461,22 +530,22 @@ exports[`success state 1`] = `
             class="c14"
           >
             <button
-              class="c15"
+              class="c15 c16"
               disabled=""
               title="Previous page"
             >
               <span
-                class="c16 c17 icon icon-arrow-left-circle "
+                class="c17 c18 icon icon-arrow-left-circle "
                 font-size="3"
               />
             </button>
             <button
-              class="c15"
+              class="c19 c16"
               disabled=""
               title="Next page"
             >
               <span
-                class="c16 c17 icon icon-arrow-right-circle "
+                class="c17 c18 icon icon-arrow-right-circle "
                 font-size="3"
               />
             </button>
@@ -484,7 +553,7 @@ exports[`success state 1`] = `
         </div>
       </nav>
       <table
-        class="c18"
+        class="c20"
       >
         <thead>
           <tr>
@@ -492,7 +561,7 @@ exports[`success state 1`] = `
               <a>
                 Name
                 <span
-                  class="c16 c19 icon icon-chevron-up "
+                  class="c17 c21 icon icon-chevron-up "
                   title="sort items asc"
                 />
               </a>
@@ -501,7 +570,7 @@ exports[`success state 1`] = `
               <a>
                 Roles
                 <span
-                  class="c16 c19 icon icon-chevrons-expand-vertical "
+                  class="c17 c21 icon icon-chevrons-expand-vertical "
                   title="sort items"
                 />
               </a>
@@ -510,7 +579,7 @@ exports[`success state 1`] = `
               <a>
                 Type
                 <span
-                  class="c16 c19 icon icon-chevrons-expand-vertical "
+                  class="c17 c21 icon icon-chevrons-expand-vertical "
                   title="sort items"
                 />
               </a>
@@ -527,10 +596,10 @@ exports[`success state 1`] = `
             </td>
             <td>
               <div
-                class="c20"
+                class="c22"
               >
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   tugu
@@ -546,13 +615,13 @@ exports[`success state 1`] = `
               align="right"
             >
               <button
-                class="c22"
+                class="c24"
                 height="24px"
                 kind="border"
               >
                 OPTIONS
                 <span
-                  class="c16 c23 icon icon-caret-down "
+                  class="c17 c25 icon icon-caret-down "
                   color="text.slightlyMuted"
                   font-size="2"
                 />
@@ -565,10 +634,10 @@ exports[`success state 1`] = `
             </td>
             <td>
               <div
-                class="c20"
+                class="c22"
               >
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   admin
@@ -584,13 +653,13 @@ exports[`success state 1`] = `
               align="right"
             >
               <button
-                class="c22"
+                class="c24"
                 height="24px"
                 kind="border"
               >
                 OPTIONS
                 <span
-                  class="c16 c23 icon icon-caret-down "
+                  class="c17 c25 icon icon-caret-down "
                   color="text.slightlyMuted"
                   font-size="2"
                 />
@@ -603,16 +672,16 @@ exports[`success state 1`] = `
             </td>
             <td>
               <div
-                class="c20"
+                class="c22"
               >
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   ruhh
                 </div>
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   admin
@@ -628,13 +697,13 @@ exports[`success state 1`] = `
               align="right"
             >
               <button
-                class="c22"
+                class="c24"
                 height="24px"
                 kind="border"
               >
                 OPTIONS
                 <span
-                  class="c16 c23 icon icon-caret-down "
+                  class="c17 c25 icon icon-caret-down "
                   color="text.slightlyMuted"
                   font-size="2"
                 />
@@ -647,34 +716,34 @@ exports[`success state 1`] = `
             </td>
             <td>
               <div
-                class="c20"
+                class="c22"
               >
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   ubip
                 </div>
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   duzjadj
                 </div>
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   dupiwuzocafe
                 </div>
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   abc
                 </div>
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   anavebikilonim
@@ -696,22 +765,22 @@ exports[`success state 1`] = `
             </td>
             <td>
               <div
-                class="c20"
+                class="c22"
               >
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   vuit
                 </div>
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   vedkonm
                 </div>
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   valvapel
@@ -733,22 +802,22 @@ exports[`success state 1`] = `
             </td>
             <td>
               <div
-                class="c20"
+                class="c22"
               >
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   kaco
                 </div>
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   ziuzzow
                 </div>
                 <div
-                  class="c21"
+                  class="c23"
                   kind="secondary"
                 >
                   admin
diff --git a/web/packages/teleport/src/components/NodeList/NodeList.tsx b/web/packages/teleport/src/components/NodeList/NodeList.tsx
index efe3a7643b686..fba3534bb3534 100644
--- a/web/packages/teleport/src/components/NodeList/NodeList.tsx
+++ b/web/packages/teleport/src/components/NodeList/NodeList.tsx
@@ -139,9 +139,11 @@ export const renderAddressCell = ({ addr, tunnel }: Node) => (
 function renderTunnel() {
   return (
     <span
-      style={{ cursor: 'default' }}
+      style={{ cursor: 'default', whiteSpace: 'nowrap' }}
       title="This node is connected to cluster through reverse tunnel"
-    >{`⟵ tunnel`}</span>
+    >
+      ← tunnel
+    </span>
   );
 }
 
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx
index 909acfb90247e..ddb2916d31dbf 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx
@@ -40,7 +40,7 @@ export default function ClusterResources() {
 
   return (
     <StyledMain>
-      <Flex mt={3} flexDirection="column">
+      <Flex mt={3} pb={5} flexDirection="column">
         <SideNav mb={2} />
         <HorizontalSplit>
           {clusterCtx.isLocationActive('/resources/servers') && <Servers />}
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx
index 17cb2f3e77cb7..3285f6d304ade 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx
@@ -131,9 +131,11 @@ const renderAddressCell = ({ addr, tunnel }: ReturnType<typeof makeServer>) => (
   <Cell>
     {tunnel && (
       <span
-        style={{ cursor: 'default' }}
+        style={{ cursor: 'default', whiteSpace: 'nowrap' }}
         title="This node is connected to cluster through reverse tunnel"
-      >{`⟵ tunnel`}</span>
+      >
+        ← tunnel
+      </span>
     )}
     {!tunnel && addr}
   </Cell>