diff --git a/.changeset/strong-pants-invite.md b/.changeset/strong-pants-invite.md
new file mode 100644
index 0000000000..325d889086
--- /dev/null
+++ b/.changeset/strong-pants-invite.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/icons": patch
+---
+
+Fix `sort` system icon to follow correct view box
diff --git a/.changeset/twelve-chairs-film.md b/.changeset/twelve-chairs-film.md
new file mode 100644
index 0000000000..cd6596f2f6
--- /dev/null
+++ b/.changeset/twelve-chairs-film.md
@@ -0,0 +1,12 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactoring on `<Table />`:
+  - Update of sort icons
+  - Added `expandable` on `<Table />` and `<Table.Row />`
+  - Refactoring of grid system
+  - Added `align` and `sentiment` prop on `<Table.Cell />`
+
+Refactoring on `<List />`:
+  - Update of sort icons
diff --git a/packages/icons/src/components/Icon/__generatedIcons__/SortIcon.tsx b/packages/icons/src/components/Icon/__generatedIcons__/SortIcon.tsx
index 42a0c97173..cca857df4d 100644
--- a/packages/icons/src/components/Icon/__generatedIcons__/SortIcon.tsx
+++ b/packages/icons/src/components/Icon/__generatedIcons__/SortIcon.tsx
@@ -11,8 +11,13 @@ export const SortIcon = ({ ...props }: Omit<IconProps, 'children'>) => (
   <Icon {...props}>
     <path
       fillRule="evenodd"
-      d="M11.72 5.47a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1-1.06 1.06l-2.72-2.72-2.72 2.72a.75.75 0 0 1-1.06-1.06zm-3.25 8.75a.75.75 0 0 1 1.06 0l2.72 2.72 2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 0 1 0-1.06"
       clipRule="evenodd"
+      d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
     />
   </Icon>
 )
diff --git a/packages/icons/src/components/Icon/assets/default/sort.svg b/packages/icons/src/components/Icon/assets/default/sort.svg
index 1962b1bc25..c236d3a786 100644
--- a/packages/icons/src/components/Icon/assets/default/sort.svg
+++ b/packages/icons/src/components/Icon/assets/default/sort.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" d="M11.72 5.47a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1-1.06 1.06l-2.72-2.72-2.72 2.72a.75.75 0 0 1-1.06-1.06zm-3.25 8.75a.75.75 0 0 1 1.06 0l2.72 2.72 2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">
+    <path d="M6.287 13.395a.98.98 0 0 1 1.383 0l2.243 2.243 2.243-2.243a.978.978 0 0 1 1.384 1.384l-2.935 2.935a.98.98 0 0 1-1.384 0l-2.934-2.935a.98.98 0 0 1 0-1.384m7.253-5.79a.98.98 0 0 1-1.384 0L9.913 5.362 7.67 7.605A.978.978 0 0 1 6.287 6.22L9.22 3.287a.98.98 0 0 1 1.384 0L13.54 6.22a.98.98 0 0 1 0 1.384" clip-rule="evenodd"/>
 </svg>
diff --git a/packages/icons/src/components/Icon/assets/small/sort.svg b/packages/icons/src/components/Icon/assets/small/sort.svg
index 33743b68ba..00c9558c0a 100644
--- a/packages/icons/src/components/Icon/assets/small/sort.svg
+++ b/packages/icons/src/components/Icon/assets/small/sort.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" d="M5.22 9.97a.75.75 0 0 1 1.06 0L8 11.69l1.72-1.72a.75.75 0 1 1 1.06 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 0 1 0-1.06m5.56-4.44a.75.75 0 0 1-1.06 0L8 3.81 6.28 5.53a.75.75 0 0 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06" clip-rule="evenodd"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+    <path d="M5.22 9.97a.75.75 0 0 1 1.06 0L8 11.69l1.72-1.72a.75.75 0 1 1 1.06 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 0 1 0-1.06m5.56-4.44a.75.75 0 0 1-1.06 0L8 3.81 6.28 5.53a.75.75 0 0 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06" clip-rule="evenodd"/>
 </svg>
diff --git a/packages/ui/src/components/List/HeaderCell.tsx b/packages/ui/src/components/List/HeaderCell.tsx
index ad3dd7838e..2a2ba7afec 100644
--- a/packages/ui/src/components/List/HeaderCell.tsx
+++ b/packages/ui/src/components/List/HeaderCell.tsx
@@ -1,26 +1,25 @@
 import styled from '@emotion/styled'
-import { Icon } from '@ultraviolet/icons/legacy'
+import {
+  InformationIcon,
+  SortIcon as SortIconUV,
+  SouthShortIcon,
+} from '@ultraviolet/icons'
 import type { ReactNode } from 'react'
-import { Stack } from '../Stack'
 import { Tooltip } from '../Tooltip'
 
-const ArrowDownIcon = styled(Icon)``
-const ArrowUpIcon = styled(Icon)``
-
-const StyledIconContainer = styled(Stack)`
-  color: ${({ theme }) => theme.colors.neutral.text};
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
+const StyledSortIcon = styled(SouthShortIcon, {
+  shouldForwardProp: prop => !['order'].includes(prop),
+})<{ order: 'ascending' | 'descending' }>`
+  transform: ${({ order }) => (order === 'ascending' ? 'rotate(-180deg)' : 'none')};
+  transition: transform 0.2s ease-in-out;
 `
 
-const SortIcon = () => (
-  <StyledIconContainer>
-    <ArrowUpIcon name="arrow-up" size={10} />
-    <ArrowDownIcon name="arrow-down" size={10} />
-  </StyledIconContainer>
-)
+const SortIcon = ({ order }: { order?: 'ascending' | 'descending' }) =>
+  order ? (
+    <StyledSortIcon order={order} sentiment="primary" />
+  ) : (
+    <SortIconUV sentiment="neutral" />
+  )
 
 const StyledHeaderCell = styled.div`
   display: flex;
@@ -41,14 +40,6 @@ const StyledHeaderCell = styled.div`
   &[aria-sort] {
     color: ${({ theme }) => theme.colors.primary.text};
   }
-
-  &[aria-sort='ascending'] ${ArrowUpIcon} {
-    color: ${({ theme }) => theme.colors.primary.text};
-  }
-
-  &[aria-sort='descending'] ${ArrowDownIcon} {
-    color: ${({ theme }) => theme.colors.primary.text};
-  }
 `
 
 type HeaderCellProps = {
@@ -103,16 +94,11 @@ export const HeaderCell = ({
       {children}
       {info ? (
         <Tooltip text={info}>
-          <Icon
-            name="information-outline"
-            size={20}
-            prominence="weak"
-            color="neutral"
-          />
+          <InformationIcon size="large" prominence="weak" sentiment="neutral" />
         </Tooltip>
       ) : null}
       {orderDirection !== undefined && isOrdered !== undefined ? (
-        <SortIcon data-sorted={order !== undefined} />
+        <SortIcon order={order} />
       ) : null}
     </StyledHeaderCell>
   )
diff --git a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
index 86420ff782..74e866248d 100644
--- a/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/List/__tests__/__snapshots__/index.test.tsx.snap
@@ -94,14 +94,6 @@ exports[`List > Should expand a row by pressing Space 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -134,14 +126,6 @@ exports[`List > Should expand a row by pressing Space 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -795,14 +779,6 @@ exports[`List > Should not collapse a row by clicking on expandable content 1`]
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -835,14 +811,6 @@ exports[`List > Should not collapse a row by clicking on expandable content 1`]
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1483,14 +1451,6 @@ exports[`List > Should render correctly 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2075,14 +2035,6 @@ exports[`List > Should render correctly with bad sort value 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2115,14 +2067,6 @@ exports[`List > Should render correctly with bad sort value 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2745,14 +2689,6 @@ exports[`List > Should render correctly with disabled rows 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3317,14 +3253,6 @@ exports[`List > Should render correctly with expandable rows 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3919,14 +3847,6 @@ exports[`List > Should render correctly with info 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3959,14 +3879,6 @@ exports[`List > Should render correctly with info 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-6 {
   display: inherit;
 }
@@ -4150,7 +4062,6 @@ exports[`List > Should render correctly with info 1`] = `
             <svg
               class="emotion-8 emotion-9"
               viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 clip-rule="evenodd"
@@ -4174,7 +4085,6 @@ exports[`List > Should render correctly with info 1`] = `
             <svg
               class="emotion-8 emotion-9"
               viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 clip-rule="evenodd"
@@ -4198,7 +4108,6 @@ exports[`List > Should render correctly with info 1`] = `
             <svg
               class="emotion-8 emotion-9"
               viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 clip-rule="evenodd"
@@ -4222,7 +4131,6 @@ exports[`List > Should render correctly with info 1`] = `
             <svg
               class="emotion-8 emotion-9"
               viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 clip-rule="evenodd"
@@ -4246,7 +4154,6 @@ exports[`List > Should render correctly with info 1`] = `
             <svg
               class="emotion-8 emotion-9"
               viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 clip-rule="evenodd"
@@ -4731,14 +4638,6 @@ exports[`List > Should render correctly with isExpandable and autoClose rows the
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4771,14 +4670,6 @@ exports[`List > Should render correctly with isExpandable and autoClose rows the
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5449,14 +5340,6 @@ exports[`List > Should render correctly with isExpandable rows then click 1`] =
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5489,14 +5372,6 @@ exports[`List > Should render correctly with isExpandable rows then click 1`] =
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -6139,14 +6014,6 @@ exports[`List > Should render correctly with loading 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -6850,14 +6717,6 @@ exports[`List > Should render correctly with loading with selectable 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-6 {
   position: relative;
   display: -webkit-inline-box;
@@ -7918,14 +7777,6 @@ exports[`List > Should render correctly with preventClick cell then click but ev
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -7958,14 +7809,6 @@ exports[`List > Should render correctly with preventClick cell then click but ev
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -8588,14 +8431,6 @@ exports[`List > Should render correctly with row expanded 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -9150,14 +8985,6 @@ exports[`List > Should render correctly with selectable 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-6 {
   position: relative;
   display: -webkit-inline-box;
@@ -10690,14 +10517,6 @@ exports[`List > Should render correctly with selectable then click on first row
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -10730,14 +10549,6 @@ exports[`List > Should render correctly with selectable then click on first row
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-6 {
   position: relative;
   display: -webkit-inline-box;
@@ -12589,14 +12400,6 @@ exports[`List > Should render correctly with sentiment rows 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -13156,14 +12959,6 @@ exports[`List > Should render correctly with sort 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .e1q5cnom2 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .e1q5cnom3 {
-  color: #641cb3;
-}
-
 .emotion-14 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -13748,14 +13543,6 @@ exports[`List > Should render correctly with sort then click 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .emotion-8 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .emotion-11 {
-  color: #641cb3;
-}
-
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -13788,71 +13575,41 @@ exports[`List > Should render correctly with sort then click 1`] = `
   color: #641cb3;
 }
 
-.emotion-4[aria-sort='ascending'] .emotion-8 {
-  color: #641cb3;
-}
-
-.emotion-4[aria-sort='descending'] .emotion-11 {
-  color: #641cb3;
-}
-
 .emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  color: #3f4250;
-}
-
-.emotion-6[aria-disabled='true'] {
-  cursor: not-allowed;
-}
-
-.emotion-9 {
   vertical-align: middle;
-  fill: currentColor;
-  height: 10px;
-  width: 10px;
-  min-width: 10px;
-  min-height: 10px;
+  fill: #3f4250;
+  height: 1em;
+  width: 1em;
+  min-width: 1em;
+  min-height: 1em;
 }
 
-.emotion-9 .fillStroke {
-  stroke: currentColor;
+.emotion-6 .fillStroke {
+  stroke: #3f4250;
   fill: none;
 }
 
-.emotion-12 {
+.emotion-11 {
   vertical-align: middle;
-  fill: currentColor;
-  height: 10px;
-  width: 10px;
-  min-width: 10px;
-  min-height: 10px;
-}
-
-.emotion-12 .fillStroke {
-  stroke: currentColor;
+  fill: #641cb3;
+  height: 1em;
+  width: 1em;
+  min-width: 1em;
+  min-height: 1em;
+  -webkit-transform: rotate(-180deg);
+  -moz-transform: rotate(-180deg);
+  -ms-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
+}
+
+.emotion-11 .fillStroke {
+  stroke: #641cb3;
   fill: none;
 }
 
-.emotion-54 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13863,7 +13620,7 @@ exports[`List > Should render correctly with sort then click 1`] = `
   gap: 16px;
 }
 
-.emotion-54 {
+.emotion-25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13874,7 +13631,7 @@ exports[`List > Should render correctly with sort then click 1`] = `
   gap: 16px;
 }
 
-.emotion-56 {
+.emotion-27 {
   position: relative;
   border: 1px solid #d9dadd;
   border-radius: 4px;
@@ -13891,32 +13648,32 @@ exports[`List > Should render correctly with sort then click 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-56[role='button row'] {
+.emotion-27[role='button row'] {
   cursor: pointer;
 }
 
-.emotion-56 [data-expandable-content] {
+.emotion-27 [data-expandable-content] {
   border-color: #d9dadd;
 }
 
-.emotion-56:hover {
+.emotion-27:hover {
   border-color: #8c40ef;
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-56[data-highlight='true'] {
+.emotion-27[data-highlight='true'] {
   border-color: #8c40ef;
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-56[aria-disabled='true'] {
+.emotion-27[aria-disabled='true'] {
   border: 1px solid #e9eaeb;
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
 }
 
-.emotion-56 {
+.emotion-27 {
   position: relative;
   border: 1px solid #d9dadd;
   border-radius: 4px;
@@ -13933,32 +13690,32 @@ exports[`List > Should render correctly with sort then click 1`] = `
   background-color: #ffffff;
 }
 
-.emotion-56[role='button row'] {
+.emotion-27[role='button row'] {
   cursor: pointer;
 }
 
-.emotion-56 [data-expandable-content] {
+.emotion-27 [data-expandable-content] {
   border-color: #d9dadd;
 }
 
-.emotion-56:hover {
+.emotion-27:hover {
   border-color: #8c40ef;
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-56[data-highlight='true'] {
+.emotion-27[data-highlight='true'] {
   border-color: #8c40ef;
   box-shadow: 0px 4px 16px 4px #f6f3ffcc;
 }
 
-.emotion-56[aria-disabled='true'] {
+.emotion-27[aria-disabled='true'] {
   border: 1px solid #e9eaeb;
   background-color: #f3f3f4;
   color: #b5b7bd;
   cursor: not-allowed;
 }
 
-.emotion-58 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13973,7 +13730,7 @@ exports[`List > Should render correctly with sort then click 1`] = `
   min-height: 60px;
 }
 
-.emotion-58 {
+.emotion-29 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -14006,32 +13763,21 @@ exports[`List > Should render correctly with sort then click 1`] = `
             tabindex="0"
           >
             Column 1
-            <div
+            <svg
               class="emotion-6 emotion-7"
+              viewBox="0 0 20 20"
             >
-              <svg
-                class="emotion-8 emotion-9 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <svg
-                class="emotion-11 emotion-12 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </div>
+              <path
+                clip-rule="evenodd"
+                d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+                fill-rule="evenodd"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
+                fill-rule="evenodd"
+              />
+            </svg>
           </div>
           <div
             aria-sort="ascending"
@@ -14040,32 +13786,15 @@ exports[`List > Should render correctly with sort then click 1`] = `
             tabindex="0"
           >
             Column 2
-            <div
-              class="emotion-6 emotion-7"
+            <svg
+              class="emotion-10 emotion-11 emotion-7"
+              viewBox="0 0 20 20"
             >
-              <svg
-                class="emotion-8 emotion-9 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <svg
-                class="emotion-11 emotion-12 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </div>
+              <path
+                clip-rule="evenodd"
+                d="M9.792 2a.75.75 0 0 1 .75.75v12.69l4.761-4.762a.75.75 0 0 1 1.06 1.06l-6.041 6.042a.75.75 0 0 1-1.06 0L3.22 11.74a.75.75 0 0 1 1.06-1.061l4.762 4.761V2.75a.75.75 0 0 1 .75-.75"
+              />
+            </svg>
           </div>
           <div
             class="emotion-4 emotion-5"
@@ -14073,32 +13802,21 @@ exports[`List > Should render correctly with sort then click 1`] = `
             tabindex="0"
           >
             Column 3
-            <div
+            <svg
               class="emotion-6 emotion-7"
+              viewBox="0 0 20 20"
             >
-              <svg
-                class="emotion-8 emotion-9 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <svg
-                class="emotion-11 emotion-12 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </div>
+              <path
+                clip-rule="evenodd"
+                d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+                fill-rule="evenodd"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
+                fill-rule="evenodd"
+              />
+            </svg>
           </div>
           <div
             class="emotion-4 emotion-5"
@@ -14106,32 +13824,21 @@ exports[`List > Should render correctly with sort then click 1`] = `
             tabindex="0"
           >
             Column 4
-            <div
+            <svg
               class="emotion-6 emotion-7"
+              viewBox="0 0 20 20"
             >
-              <svg
-                class="emotion-8 emotion-9 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <svg
-                class="emotion-11 emotion-12 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </div>
+              <path
+                clip-rule="evenodd"
+                d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+                fill-rule="evenodd"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
+                fill-rule="evenodd"
+              />
+            </svg>
           </div>
           <div
             class="emotion-4 emotion-5"
@@ -14139,403 +13846,392 @@ exports[`List > Should render correctly with sort then click 1`] = `
             tabindex="0"
           >
             Column 5
-            <div
+            <svg
               class="emotion-6 emotion-7"
+              viewBox="0 0 20 20"
             >
-              <svg
-                class="emotion-8 emotion-9 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <svg
-                class="emotion-11 emotion-12 emotion-10"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </div>
+              <path
+                clip-rule="evenodd"
+                d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+                fill-rule="evenodd"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
+                fill-rule="evenodd"
+              />
+            </svg>
           </div>
         </div>
         <div
-          class="emotion-54 emotion-55"
+          class="emotion-25 emotion-26"
           role="rowgroup"
         >
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 1 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 1 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 1 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 1 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 1 Column 5
             </div>
           </div>
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 2 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 2 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 2 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 2 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 2 Column 5
             </div>
           </div>
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 3 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 3 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 3 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 3 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 3 Column 5
             </div>
           </div>
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 4 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 4 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 4 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 4 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 4 Column 5
             </div>
           </div>
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 5 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 5 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 5 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 5 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 5 Column 5
             </div>
           </div>
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 6 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 6 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 6 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 6 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 6 Column 5
             </div>
           </div>
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 7 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 7 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 7 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 7 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 7 Column 5
             </div>
           </div>
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 8 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 8 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 8 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 8 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 8 Column 5
             </div>
           </div>
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 9 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 9 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 9 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 9 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 9 Column 5
             </div>
           </div>
           <div
-            class="emotion-56 emotion-57"
+            class="emotion-27 emotion-28"
             data-highlight="false"
             role="row"
             tabindex="-1"
           >
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 10 Column 1
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 10 Column 2
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 10 Column 3
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 10 Column 4
             </div>
             <div
-              class="emotion-58 emotion-59"
+              class="emotion-29 emotion-30"
               role="cell"
             >
               Row 10 Column 5
diff --git a/packages/ui/src/components/Table/Cell.tsx b/packages/ui/src/components/Table/Cell.tsx
index 6027255375..ef240a1029 100644
--- a/packages/ui/src/components/Table/Cell.tsx
+++ b/packages/ui/src/components/Table/Cell.tsx
@@ -1,9 +1,20 @@
 import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
+import { AlignementFlex } from './constants'
 
-const StyledCell = styled('td')`
+type Sentiment = 'success' | 'info' | 'warning' | 'danger' | 'neutral'
+
+type Align = 'left' | 'center' | 'right'
+
+const StyledCell = styled('td', {
+  shouldForwardProp: prop => !['sentiment', 'align'].includes(prop),
+})<{ sentiment?: Sentiment; align: Align }>`
+  display: flex;
+  align-items: center;
   padding: ${({ theme }) => theme.space['1']};
   font-size: 14px;
+  background-color: ${({ sentiment, theme }) => (sentiment ? theme.colors[sentiment].background : null)};
+  justify-content: ${({ align }) => AlignementFlex[align]};
 `
 
 type CellProps = {
@@ -11,10 +22,25 @@ type CellProps = {
   className?: string
   colSpan?: number
   rowSpan?: number
+  sentiment?: Sentiment
+  align?: Align
 }
 
-export const Cell = ({ children, className, colSpan, rowSpan }: CellProps) => (
-  <StyledCell className={className} colSpan={colSpan} rowSpan={rowSpan}>
+export const Cell = ({
+  children,
+  className,
+  colSpan,
+  rowSpan,
+  sentiment,
+  align = 'left',
+}: CellProps) => (
+  <StyledCell
+    className={className}
+    colSpan={colSpan}
+    rowSpan={rowSpan}
+    sentiment={sentiment}
+    align={align}
+  >
     {children}
   </StyledCell>
 )
diff --git a/packages/ui/src/components/Table/HeaderCell.tsx b/packages/ui/src/components/Table/HeaderCell.tsx
index 2f577ceccf..64c7939d51 100644
--- a/packages/ui/src/components/Table/HeaderCell.tsx
+++ b/packages/ui/src/components/Table/HeaderCell.tsx
@@ -1,52 +1,47 @@
 import styled from '@emotion/styled'
-import { Icon } from '@ultraviolet/icons/legacy'
+import {
+  InformationIcon,
+  SortIcon as SortIconUV,
+  SouthShortIcon,
+} from '@ultraviolet/icons'
 import type { ReactNode } from 'react'
-import { Stack } from '../Stack'
 import { Text } from '../Text'
 import { Tooltip } from '../Tooltip'
+import { AlignementFlex } from './constants'
 
-const StyledIconContainer = styled(Stack)`
-  color: ${({ theme }) => theme.colors.neutral.textWeak};
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-
-  &[role*='button'] {
-    cursor: pointer;
-    user-select: none;
-  }
+const StyledSortIcon = styled(SouthShortIcon, {
+  shouldForwardProp: prop => !['order'].includes(prop),
+})<{ order: 'ascending' | 'descending' }>`
+    transform: ${({ order }) => (order === 'ascending' ? 'rotate(-180deg)' : 'none')};
+    transition: transform 0.2s;
 `
 
-const SortIcon = ({ order }: { order?: 'ascending' | 'descending' }) => (
-  <StyledIconContainer>
-    <Icon
-      name="arrow-up"
-      size={10}
-      color={order === 'ascending' ? 'primary' : 'neutral'}
-      prominence="weak"
-    />
-    <Icon
-      name="arrow-down"
-      size={10}
-      color={order === 'descending' ? 'primary' : 'neutral'}
-      prominence="weak"
-    />
-  </StyledIconContainer>
-)
+const SortIcon = ({ order }: { order?: 'ascending' | 'descending' }) =>
+  order ? (
+    <StyledSortIcon order={order} sentiment="primary" />
+  ) : (
+    <SortIconUV sentiment="neutral" />
+  )
 
 type StyledHeaderCellProps = Pick<
   HeaderCellProps,
   'width' | 'maxWidth' | 'minWidth'
->
+> & {
+  align?: 'left' | 'center' | 'right'
+}
+
 const StyledHeaderCell = styled('th', {
-  shouldForwardProp: prop => !['width', 'maxWidth', 'minWidth'].includes(prop),
+  shouldForwardProp: prop =>
+    !['align', 'width', 'maxWidth', 'minWidth'].includes(prop),
 })<StyledHeaderCellProps>`
-  ${({ width, maxWidth, minWidth }) => `
+${({ width, maxWidth, minWidth }) => `
     ${width ? `width: ${width};` : ''}
     ${maxWidth ? `max-width: ${maxWidth};` : ''}
     ${minWidth ? `min-width: ${minWidth};` : ''}
   `}
+  display: flex;
+  align-items: center;
+  justify-content: ${({ align }) => (align ? AlignementFlex[align] : null)};
   padding: ${({ theme }) => theme.space['1']};
 
   &[role*='button'] {
@@ -68,10 +63,11 @@ type HeaderCellProps = {
   isOrdered?: boolean
   orderDirection?: 'asc' | 'desc' | 'none'
   onOrder?: (newOrder: 'asc' | 'desc') => void
+  info?: string
+  align?: 'left' | 'center' | 'right'
   width?: string
-  minWidth?: string
   maxWidth?: string
-  info?: string
+  minWidth?: string
 }
 
 export const HeaderCell = ({
@@ -80,10 +76,11 @@ export const HeaderCell = ({
   isOrdered,
   onOrder,
   orderDirection,
+  info,
+  align,
   width,
   maxWidth,
   minWidth,
-  info,
 }: HeaderCellProps) => {
   let order: undefined | 'ascending' | 'descending'
   if (isOrdered && orderDirection === 'asc') {
@@ -114,11 +111,12 @@ export const HeaderCell = ({
           : undefined
       }
       role={onOrder ? 'button columnheader' : undefined}
+      tabIndex={handleOrder ? 0 : -1}
+      aria-sort={order}
+      align={align}
       width={width}
       maxWidth={maxWidth}
       minWidth={minWidth}
-      tabIndex={handleOrder ? 0 : -1}
-      aria-sort={order}
     >
       <StyledText
         as="div"
@@ -128,11 +126,10 @@ export const HeaderCell = ({
         {children}
         {info ? (
           <Tooltip text={info}>
-            <Icon
-              name="information-outline"
-              size={20}
+            <InformationIcon
+              size="large"
               prominence="weak"
-              color="neutral"
+              sentiment="neutral"
             />
           </Tooltip>
         ) : null}
diff --git a/packages/ui/src/components/Table/HeaderRow.tsx b/packages/ui/src/components/Table/HeaderRow.tsx
index 3fbc48e85a..5f7378727a 100644
--- a/packages/ui/src/components/Table/HeaderRow.tsx
+++ b/packages/ui/src/components/Table/HeaderRow.tsx
@@ -9,15 +9,20 @@ type HeaderRowProps = {
 }
 
 export const HeaderRow = ({ children, hasSelectAllColumn }: HeaderRowProps) => {
-  const { allRowSelectValue, selectAll, unselectAll, selectedRowIds } =
-    useTableContext()
+  const {
+    allRowSelectValue,
+    selectAll,
+    unselectAll,
+    selectedRowIds,
+    expandButton,
+  } = useTableContext()
 
   const selectableRowCount = Object.keys(selectedRowIds).length
 
   return (
-    <tr>
+    <tr role="row">
       {hasSelectAllColumn ? (
-        <HeaderCell width="24px">
+        <HeaderCell>
           <Checkbox
             name="table-select-all-checkbox"
             value="all"
@@ -28,6 +33,7 @@ export const HeaderRow = ({ children, hasSelectAllColumn }: HeaderRowProps) => {
           />
         </HeaderCell>
       ) : null}
+      {expandButton ? <HeaderCell>{null}</HeaderCell> : null}
       {children}
     </tr>
   )
diff --git a/packages/ui/src/components/Table/Row.tsx b/packages/ui/src/components/Table/Row.tsx
index 68a7cbf068..29a1c6d881 100644
--- a/packages/ui/src/components/Table/Row.tsx
+++ b/packages/ui/src/components/Table/Row.tsx
@@ -2,14 +2,28 @@ import type { Theme } from '@emotion/react'
 import { keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { ReactNode } from 'react'
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
+import { Button } from '../Button'
 import { Checkbox } from '../Checkbox'
 import { Tooltip } from '../Tooltip'
 import { Cell } from './Cell'
 import { useTableContext } from './TableContext'
+import { SELECTABLE_CHECKBOX_SIZE } from './constants'
+
+const ExpandableWrapper = styled.div`
+  grid-column: 1 / -1;
+  grid-column-start: 1;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral.border};
+  padding: ${({ theme }) => theme.space['1']};
+  cursor: auto;
+  background: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  border-radius: 0 0 ${({ theme }) => theme.radii.default}
+    ${({ theme }) => theme.radii.default};
+`
 
 const StyledCheckboxContainer = styled.div`
   display: flex;
+  width: ${SELECTABLE_CHECKBOX_SIZE}px;
 `
 
 // We start at 5% and finish at 80% to leave the original background color
@@ -33,6 +47,7 @@ const StyledTr = styled('tr', {
 
 type RowProps = {
   children: ReactNode
+  expandable?: ReactNode
   className?: string
   id: string
   'data-testid'?: string
@@ -41,6 +56,7 @@ type RowProps = {
    * */
   selectDisabled?: boolean | string
   highlightAnimation?: boolean
+  expanded?: boolean
 }
 
 export const Row = ({
@@ -49,16 +65,34 @@ export const Row = ({
   id,
   selectDisabled,
   highlightAnimation,
+  expandable,
+  expanded,
   'data-testid': dataTestid,
 }: RowProps) => {
   const {
     selectable,
+    registerExpandableRow,
+    expandedRowIds,
+    expandRow,
+    collapseRow,
     registerSelectableRow,
     selectedRowIds,
     selectRow,
     unselectRow,
+    expandButton,
   } = useTableContext()
 
+  const hasExpandable = !!expandable
+  useEffect(() => {
+    if (hasExpandable) {
+      const unregisterCallback = registerExpandableRow(id, expanded)
+
+      return unregisterCallback
+    }
+
+    return undefined
+  }, [id, hasExpandable, registerExpandableRow, expanded, expandRow])
+
   useEffect(() => {
     if (!selectDisabled) {
       const unregisterCallback = registerSelectableRow(id)
@@ -69,11 +103,22 @@ export const Row = ({
     return undefined
   }, [id, registerSelectableRow, selectDisabled])
 
+  const toggleRowExpand = useCallback(() => {
+    if (expandedRowIds[id]) {
+      collapseRow(id)
+    } else {
+      expandRow(id)
+    }
+  }, [collapseRow, expandRow, expandedRowIds, id])
+
+  const canClickRowToExpand = hasExpandable && !expandButton
+
   return (
     <StyledTr
       className={className}
       data-testid={dataTestid}
       highlightAnimation={highlightAnimation}
+      role={canClickRowToExpand ? 'button row' : 'row'}
     >
       {selectable ? (
         <Cell>
@@ -101,7 +146,42 @@ export const Row = ({
           </StyledCheckboxContainer>
         </Cell>
       ) : null}
+      {expandButton ? (
+        <Cell>
+          <Button
+            disabled={!expandable}
+            icon={expandedRowIds[id] ? 'arrow-up' : 'arrow-down'}
+            onClick={toggleRowExpand}
+            size="xsmall"
+            sentiment="neutral"
+            variant="ghost"
+            aria-label="expand"
+            data-testid="list-expand-button"
+          />
+        </Cell>
+      ) : null}
       {children}
+      {expandable && expandedRowIds[id] ? (
+        <ExpandableWrapper
+          data-expandable-content
+          onClick={
+            canClickRowToExpand
+              ? e => {
+                  e.stopPropagation()
+                }
+              : undefined
+          }
+          onKeyDown={
+            canClickRowToExpand
+              ? e => {
+                  e.stopPropagation()
+                }
+              : undefined
+          }
+        >
+          {expandable}
+        </ExpandableWrapper>
+      ) : null}
     </StyledTr>
   )
 }
diff --git a/packages/ui/src/components/Table/TableContext.tsx b/packages/ui/src/components/Table/TableContext.tsx
index 34203ede5c..30c4b9b297 100644
--- a/packages/ui/src/components/Table/TableContext.tsx
+++ b/packages/ui/src/components/Table/TableContext.tsx
@@ -25,6 +25,12 @@ type TableContextValue = {
    * @returns an unregister function
    * */
   registerSelectableRow: (rowId: string) => () => void
+  // ============ Expandable logic ============
+  expandedRowIds: RowState
+  expandRow: (rowId: string) => void
+  collapseRow: (rowId: string) => void
+  expandButton: boolean
+  registerExpandableRow: (rowId: string, expanded?: boolean) => () => void
 }
 
 const TableContext = createContext<TableContextValue | undefined>(undefined)
@@ -34,6 +40,8 @@ type TableProviderProps = {
   selectable: boolean
   bordered: boolean
   stripped: boolean
+  expandButton: boolean
+  autoCollapse: boolean
 }
 
 export const TableProvider = ({
@@ -41,8 +49,43 @@ export const TableProvider = ({
   selectable,
   bordered,
   stripped,
+  expandButton,
+  autoCollapse,
 }: TableProviderProps) => {
   const [selectedRowIds, setSelectedRowIds] = useState<RowState>({})
+  const [expandedRowIds, setExpandedRowIds] = useState<RowState>({})
+
+  const registerExpandableRow = useCallback(
+    (rowId: string, expanded = false) => {
+      setExpandedRowIds(current => ({ ...current, [rowId]: expanded }))
+
+      return () => {
+        setExpandedRowIds(current => {
+          const { [rowId]: relatedId, ...otherIds } = current
+
+          return otherIds
+        })
+      }
+    },
+    [],
+  )
+
+  const expandRow = useCallback(
+    (rowId: string) => {
+      setExpandedRowIds(current => ({
+        ...(autoCollapse ? {} : current),
+        [rowId]: true,
+      }))
+    },
+    [autoCollapse],
+  )
+
+  const collapseRow = useCallback((rowId: string) => {
+    setExpandedRowIds(current => ({
+      ...current,
+      [rowId]: false,
+    }))
+  }, [])
 
   const registerSelectableRow = useCallback((rowId: string) => {
     setSelectedRowIds(current => ({ ...current, [rowId]: false }))
@@ -122,6 +165,11 @@ export const TableProvider = ({
       allRowSelectValue,
       bordered,
       stripped,
+      expandButton,
+      expandRow,
+      expandedRowIds,
+      collapseRow,
+      registerExpandableRow,
     }),
     [
       registerSelectableRow,
@@ -134,6 +182,11 @@ export const TableProvider = ({
       allRowSelectValue,
       bordered,
       stripped,
+      expandedRowIds,
+      expandRow,
+      expandButton,
+      collapseRow,
+      registerExpandableRow,
     ],
   )
 
diff --git a/packages/ui/src/components/Table/__stories__/Align.stories.tsx b/packages/ui/src/components/Table/__stories__/Align.stories.tsx
new file mode 100644
index 0000000000..696b112321
--- /dev/null
+++ b/packages/ui/src/components/Table/__stories__/Align.stories.tsx
@@ -0,0 +1,37 @@
+import type { StoryFn } from '@storybook/react'
+import { Table } from '..'
+import { columns, data } from './resources'
+
+export const Align: StoryFn<typeof Table> = ({ ...props }) => (
+  <Table {...props} />
+)
+
+Align.args = {
+  columns: [
+    columns[0],
+    { ...columns[1], width: '150px' },
+    { ...columns[2], maxWidth: '20%' },
+    { ...columns[3], minWidth: '150px', align: 'right' },
+  ],
+  children: (
+    <Table.Body>
+      {data.map(movie => (
+        <Table.Row key={movie.id} id={movie.id}>
+          <Table.Cell>{movie.name} (auto)</Table.Cell>
+          <Table.Cell>{movie.releaseYear} (150px)</Table.Cell>
+          <Table.Cell>{movie.trilogy} (max 20%)</Table.Cell>
+          <Table.Cell align="right">{movie.director} (min 150px)</Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  ),
+}
+
+Align.parameters = {
+  docs: {
+    description: {
+      story:
+        'Using `align` prop on `columns` or on `<Table.Cell />` you can easily align the content as you need.',
+    },
+  },
+}
diff --git a/packages/ui/src/components/Table/__stories__/ColumnInfo.stories.tsx b/packages/ui/src/components/Table/__stories__/ColumnInfo.stories.tsx
index 7576967225..9425aae5b8 100644
--- a/packages/ui/src/components/Table/__stories__/ColumnInfo.stories.tsx
+++ b/packages/ui/src/components/Table/__stories__/ColumnInfo.stories.tsx
@@ -9,7 +9,7 @@ export const ColumnInfo: StoryFn<typeof Table> = ({ ...props }) => (
 ColumnInfo.args = {
   columns: [
     { label: 'Name', info: 'This column is important' },
-    ...columns.slice(1, 3),
+    ...columns.slice(1, 4),
   ],
   children: (
     <Table.Body>
diff --git a/packages/ui/src/components/Table/__stories__/Expandable.stories.tsx b/packages/ui/src/components/Table/__stories__/Expandable.stories.tsx
new file mode 100644
index 0000000000..69aba54cae
--- /dev/null
+++ b/packages/ui/src/components/Table/__stories__/Expandable.stories.tsx
@@ -0,0 +1,41 @@
+import { Table } from '..'
+import { Text } from '../../Text'
+import { Template } from './Template.stories'
+import { data } from './resources'
+
+export const Expandable = Template.bind({})
+
+Expandable.args = {
+  ...Template.args,
+  expandable: true,
+  selectable: true,
+  children: (
+    <Table.Body>
+      {data.map(movie => (
+        <Table.Row
+          key={movie.id}
+          id={movie.id}
+          expandable={
+            <Text as="p" variant="bodySmall">
+              A movie to watch
+            </Text>
+          }
+        >
+          <Table.Cell>{movie.name}</Table.Cell>
+          <Table.Cell>{movie.releaseYear}</Table.Cell>
+          <Table.Cell>{movie.trilogy}</Table.Cell>
+          <Table.Cell>{movie.director}</Table.Cell>
+        </Table.Row>
+      ))}
+    </Table.Body>
+  ),
+}
+
+Expandable.parameters = {
+  docs: {
+    description: {
+      story:
+        "A table can also be expandable. To do so set prop `expandable` on <Table> to `true`. You can then pass any content in each `<Table.Row>`'s `expandable` prop. This content will be displayed when the row is expanded.",
+    },
+  },
+}
diff --git a/packages/ui/src/components/Table/__stories__/Spanning.stories.tsx b/packages/ui/src/components/Table/__stories__/Spanning.stories.tsx
index a57c6b7394..b6a037449e 100644
--- a/packages/ui/src/components/Table/__stories__/Spanning.stories.tsx
+++ b/packages/ui/src/components/Table/__stories__/Spanning.stories.tsx
@@ -1,20 +1,7 @@
-import styled from '@emotion/styled'
 import type { StoryFn } from '@storybook/react'
 import { Table } from '..'
 import { columns, data } from './resources'
 
-const StyledTrilogyCell = styled(Table.Cell)`
-  background: ${({ theme }) => theme.colors.warning.background};
-`
-
-const StyledDirectorCell = styled(Table.Cell)`
-  background: ${({ theme }) => theme.colors.success.background};
-`
-
-const StyledStoryByCell = styled(Table.Cell)`
-  background: ${({ theme }) => theme.colors.info.background};
-`
-
 export const Spanning: StoryFn = args => (
   <Table
     {...args}
@@ -31,15 +18,18 @@ export const Spanning: StoryFn = args => (
           <Table.Cell>{movie.name}</Table.Cell>
           <Table.Cell>{movie.releaseYear}</Table.Cell>
           {index % 3 === 0 ? (
-            <StyledTrilogyCell rowSpan={3}>{movie.trilogy}</StyledTrilogyCell>
+            <Table.Cell sentiment="warning" rowSpan={3}>
+              {movie.trilogy}
+            </Table.Cell>
           ) : null}
-          <StyledDirectorCell
+          <Table.Cell
+            sentiment="success"
             colSpan={movie.director === movie.storyBy ? 2 : 1}
           >
             {movie.director}
-          </StyledDirectorCell>
+          </Table.Cell>
           {movie.director !== movie.storyBy ? (
-            <StyledStoryByCell>{movie.storyBy}</StyledStoryByCell>
+            <Table.Cell sentiment="info">{movie.storyBy}</Table.Cell>
           ) : null}
         </Table.Row>
       ))}
diff --git a/packages/ui/src/components/Table/__stories__/Style.stories.tsx b/packages/ui/src/components/Table/__stories__/Style.stories.tsx
index 4824f6ecef..403921b8ae 100644
--- a/packages/ui/src/components/Table/__stories__/Style.stories.tsx
+++ b/packages/ui/src/components/Table/__stories__/Style.stories.tsx
@@ -24,10 +24,19 @@ export const Style: StoryFn = args => (
           columns={columns}
           bordered={combo.bordered}
           stripped={combo.stripped}
+          expandable
         >
           <Table.Body>
             {data.slice(0, 3).map(movie => (
-              <Table.Row key={movie.id} id={movie.id}>
+              <Table.Row
+                key={movie.id}
+                id={movie.id}
+                expandable={
+                  <Text as="p" variant="bodySmall">
+                    A movie to watch
+                  </Text>
+                }
+              >
                 <Table.Cell>{movie.name}</Table.Cell>
                 <Table.Cell>{movie.releaseYear}</Table.Cell>
                 <Table.Cell>{movie.trilogy}</Table.Cell>
diff --git a/packages/ui/src/components/Table/__stories__/WithMenu.stories.tsx b/packages/ui/src/components/Table/__stories__/WithMenu.stories.tsx
index d7aa2a1099..38b367234a 100644
--- a/packages/ui/src/components/Table/__stories__/WithMenu.stories.tsx
+++ b/packages/ui/src/components/Table/__stories__/WithMenu.stories.tsx
@@ -11,8 +11,8 @@ export const WithMenu: StoryFn<typeof Table> = ({ ...props }) => (
 WithMenu.args = {
   columns: [
     { label: 'Name', info: 'This column is important' },
-    ...columns.slice(1, 3),
-    { label: '', width: '32px' },
+    ...columns.slice(1, 4),
+    { label: '', width: '42px' },
   ],
   children: (
     <Table.Body>
diff --git a/packages/ui/src/components/Table/__stories__/index.stories.tsx b/packages/ui/src/components/Table/__stories__/index.stories.tsx
index fe82b1a873..8a53222ecf 100644
--- a/packages/ui/src/components/Table/__stories__/index.stories.tsx
+++ b/packages/ui/src/components/Table/__stories__/index.stories.tsx
@@ -10,8 +10,10 @@ export default {
 export { Playground } from './Playground.stories'
 export { Ordering } from './Ordering.stories'
 export { Selectable } from './Selectable.stories'
+export { Expandable } from './Expandable.stories'
 export { Style } from './Style.stories'
 export { ColumnWidth } from './ColumnWidth.stories'
+export { Align } from './Align.stories'
 export { Spanning } from './Spanning.stories'
 export { Loading } from './Loading.stories'
 export { ColumnInfo } from './ColumnInfo.stories'
diff --git a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
index 608a07b78d..6edc9c0a34 100644
--- a/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,6 +8,17 @@ exports[`Table > Should render correctly 1`] = `
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-2 {
   border-bottom: 1px solid #d9dadd;
 }
@@ -16,6 +27,14 @@ exports[`Table > Should render correctly 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -57,8 +76,20 @@ exports[`Table > Should render correctly 1`] = `
 }
 
 .emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 <div
@@ -70,7 +101,9 @@ exports[`Table > Should render correctly 1`] = `
       <thead
         class="emotion-2 emotion-3"
       >
-        <tr>
+        <tr
+          role="row"
+        >
           <th
             class="emotion-4 emotion-5"
             tabindex="-1"
@@ -126,6 +159,7 @@ exports[`Table > Should render correctly 1`] = `
       <tbody>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -155,6 +189,7 @@ exports[`Table > Should render correctly 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -184,6 +219,7 @@ exports[`Table > Should render correctly 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -213,6 +249,7 @@ exports[`Table > Should render correctly 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -242,6 +279,7 @@ exports[`Table > Should render correctly 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -271,6 +309,7 @@ exports[`Table > Should render correctly 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -300,6 +339,7 @@ exports[`Table > Should render correctly 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -329,6 +369,7 @@ exports[`Table > Should render correctly 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -358,6 +399,7 @@ exports[`Table > Should render correctly 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -387,6 +429,7 @@ exports[`Table > Should render correctly 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -428,12 +471,34 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-0 {
   width: 100%;
   box-sizing: content-box;
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-2 {
   border-bottom: 1px solid #d9dadd;
 }
@@ -446,6 +511,14 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -461,6 +534,14 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -531,13 +612,37 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
 }
 
 .emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 .emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 <div
@@ -549,7 +654,9 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
       <thead
         class="emotion-2 emotion-3"
       >
-        <tr>
+        <tr
+          role="row"
+        >
           <th
             class="emotion-4 emotion-5"
             tabindex="-1"
@@ -605,6 +712,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
       <tbody>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -634,6 +742,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -663,6 +772,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -692,6 +802,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -721,6 +832,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -750,6 +862,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -779,6 +892,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -808,6 +922,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -837,6 +952,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -866,6 +982,7 @@ exports[`Table > Should render correctly with bad sort value 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -917,10 +1034,15 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
   border-collapse: collapse;
 }
 
-.emotion-0 {
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
   width: 100%;
-  box-sizing: content-box;
-  border-collapse: collapse;
+  grid-template-columns: minmax(0, 1fr) 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 {
@@ -932,6 +1054,34 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 8px;
+}
+
+.emotion-4[role*='button'] {
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -1017,6 +1167,14 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -1032,6 +1190,14 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -1049,13 +1215,37 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
 }
 
 .emotion-25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 .emotion-25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 <div
@@ -1067,7 +1257,9 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
       <thead
         class="emotion-2 emotion-3"
       >
-        <tr>
+        <tr
+          role="row"
+        >
           <th
             class="emotion-4 emotion-5"
             tabindex="-1"
@@ -1085,7 +1277,6 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
                 <svg
                   class="emotion-11 emotion-12"
                   viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     clip-rule="evenodd"
@@ -1121,6 +1312,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
       <tbody>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1150,6 +1342,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1179,6 +1372,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1208,6 +1402,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1237,6 +1432,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1266,6 +1462,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1295,6 +1492,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1324,6 +1522,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1353,6 +1552,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1382,6 +1582,7 @@ exports[`Table > Should render correctly with highlight animation on Table.Row 1
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1423,6 +1624,17 @@ exports[`Table > Should render correctly with info 1`] = `
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-0 tbody tr:nth-of-type(even) {
   background: #f9f9fa;
 }
@@ -1440,6 +1652,34 @@ exports[`Table > Should render correctly with info 1`] = `
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 8px;
+}
+
+.emotion-4[role*='button'] {
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -1525,6 +1765,14 @@ exports[`Table > Should render correctly with info 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -1540,6 +1788,14 @@ exports[`Table > Should render correctly with info 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -1562,13 +1818,37 @@ exports[`Table > Should render correctly with info 1`] = `
 }
 
 .emotion-25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 .emotion-25 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 <div
@@ -1580,7 +1860,9 @@ exports[`Table > Should render correctly with info 1`] = `
       <thead
         class="emotion-2 emotion-3"
       >
-        <tr>
+        <tr
+          role="row"
+        >
           <th
             class="emotion-4 emotion-5"
             tabindex="-1"
@@ -1598,7 +1880,6 @@ exports[`Table > Should render correctly with info 1`] = `
                 <svg
                   class="emotion-11 emotion-12"
                   viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
                     clip-rule="evenodd"
@@ -1634,6 +1915,7 @@ exports[`Table > Should render correctly with info 1`] = `
       <tbody>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1663,6 +1945,7 @@ exports[`Table > Should render correctly with info 1`] = `
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1692,6 +1975,7 @@ exports[`Table > Should render correctly with info 1`] = `
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1721,6 +2005,7 @@ exports[`Table > Should render correctly with info 1`] = `
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1750,6 +2035,7 @@ exports[`Table > Should render correctly with info 1`] = `
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1779,6 +2065,7 @@ exports[`Table > Should render correctly with info 1`] = `
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1808,6 +2095,7 @@ exports[`Table > Should render correctly with info 1`] = `
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1837,6 +2125,7 @@ exports[`Table > Should render correctly with info 1`] = `
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1866,6 +2155,7 @@ exports[`Table > Should render correctly with info 1`] = `
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1895,6 +2185,7 @@ exports[`Table > Should render correctly with info 1`] = `
         </tr>
         <tr
           class="emotion-23 emotion-24"
+          role="row"
         >
           <td
             class="emotion-25 emotion-26"
@@ -1946,6 +2237,17 @@ exports[`Table > Should render correctly with loading 1`] = `
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-2 {
   border-bottom: 1px solid #d9dadd;
 }
@@ -1954,6 +2256,14 @@ exports[`Table > Should render correctly with loading 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -1994,8 +2304,20 @@ exports[`Table > Should render correctly with loading 1`] = `
 }
 
 .emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 .emotion-34 {
@@ -2060,7 +2382,9 @@ exports[`Table > Should render correctly with loading 1`] = `
       <thead
         class="emotion-2 emotion-3"
       >
-        <tr>
+        <tr
+          role="row"
+        >
           <th
             class="emotion-4 emotion-5"
             tabindex="-1"
@@ -2558,12 +2882,34 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-0 {
   width: 100%;
   box-sizing: content-box;
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-2 {
   border-bottom: 1px solid #d9dadd;
 }
@@ -2576,6 +2922,14 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -2591,6 +2945,14 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -2661,13 +3023,37 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
 }
 
 .emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 .emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 <div
@@ -2679,7 +3065,9 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
       <thead
         class="emotion-2 emotion-3"
       >
-        <tr>
+        <tr
+          role="row"
+        >
           <th
             class="emotion-4 emotion-5"
             tabindex="-1"
@@ -2735,6 +3123,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
       <tbody>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -2764,6 +3153,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -2793,6 +3183,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -2822,6 +3213,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -2851,6 +3243,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -2880,6 +3273,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -2909,6 +3303,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -2938,6 +3333,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -2967,6 +3363,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -2996,6 +3393,7 @@ exports[`Table > Should render correctly with selectDisabled as a string 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -3037,10 +3435,15 @@ exports[`Table > Should render correctly with selectable then click on first row
   border-collapse: collapse;
 }
 
-.emotion-0 {
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
   width: 100%;
-  box-sizing: content-box;
-  border-collapse: collapse;
+  grid-template-columns: 40px 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .emotion-2 {
@@ -3052,7 +3455,14 @@ exports[`Table > Should render correctly with selectable then click on first row
 }
 
 .emotion-4 {
-  width: 24px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -3390,6 +3800,14 @@ exports[`Table > Should render correctly with selectable then click on first row
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -3405,6 +3823,14 @@ exports[`Table > Should render correctly with selectable then click on first row
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -3427,13 +3853,37 @@ exports[`Table > Should render correctly with selectable then click on first row
 }
 
 .emotion-48 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 .emotion-48 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 .emotion-50 {
@@ -3441,6 +3891,7 @@ exports[`Table > Should render correctly with selectable then click on first row
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 40px;
 }
 
 <div
@@ -3452,7 +3903,9 @@ exports[`Table > Should render correctly with selectable then click on first row
       <thead
         class="emotion-2 emotion-3"
       >
-        <tr>
+        <tr
+          role="row"
+        >
           <th
             class="emotion-4 emotion-5"
             tabindex="-1"
@@ -3569,6 +4022,7 @@ exports[`Table > Should render correctly with selectable then click on first row
       <tbody>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -3658,6 +4112,7 @@ exports[`Table > Should render correctly with selectable then click on first row
         </tr>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -3747,6 +4202,7 @@ exports[`Table > Should render correctly with selectable then click on first row
         </tr>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -3836,6 +4292,7 @@ exports[`Table > Should render correctly with selectable then click on first row
         </tr>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -3925,6 +4382,7 @@ exports[`Table > Should render correctly with selectable then click on first row
         </tr>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -4014,6 +4472,7 @@ exports[`Table > Should render correctly with selectable then click on first row
         </tr>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -4103,6 +4562,7 @@ exports[`Table > Should render correctly with selectable then click on first row
         </tr>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -4192,6 +4652,7 @@ exports[`Table > Should render correctly with selectable then click on first row
         </tr>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -4281,6 +4742,7 @@ exports[`Table > Should render correctly with selectable then click on first row
         </tr>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -4370,6 +4832,7 @@ exports[`Table > Should render correctly with selectable then click on first row
         </tr>
         <tr
           class="emotion-46 emotion-47"
+          role="row"
         >
           <td
             class="emotion-48 emotion-49"
@@ -4471,12 +4934,34 @@ exports[`Table > Should render correctly with sort then click 1`] = `
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-0 {
   width: 100%;
   box-sizing: content-box;
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-2 {
   border-bottom: 1px solid #d9dadd;
 }
@@ -4489,6 +4974,14 @@ exports[`Table > Should render correctly with sort then click 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -4504,6 +4997,14 @@ exports[`Table > Should render correctly with sort then click 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -4564,56 +5065,20 @@ exports[`Table > Should render correctly with sort then click 1`] = `
 }
 
 .emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
-  -webkit-box-pack: normal;
-  -ms-flex-pack: normal;
-  -webkit-justify-content: normal;
-  justify-content: normal;
-  -webkit-box-flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  color: #727683;
-}
-
-.emotion-9[aria-disabled='true'] {
-  cursor: not-allowed;
-}
-
-.emotion-9[role*='button'] {
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.emotion-11 {
   vertical-align: middle;
-  fill: #727683;
-  height: 10px;
-  width: 10px;
-  min-width: 10px;
-  min-height: 10px;
+  fill: #3f4250;
+  height: 1em;
+  width: 1em;
+  min-width: 1em;
+  min-height: 1em;
 }
 
-.emotion-11 .fillStroke {
-  stroke: #727683;
+.emotion-9 .fillStroke {
+  stroke: #3f4250;
   fill: none;
 }
 
-.emotion-18 {
+.emotion-14 {
   color: #641cb3;
   font-size: 14px;
   font-family: Inter,Asap,sans-serif;
@@ -4637,38 +5102,68 @@ exports[`Table > Should render correctly with sort then click 1`] = `
   gap: 8px;
 }
 
-.emotion-22 {
+.emotion-17 {
   vertical-align: middle;
-  fill: #521094;
-  height: 10px;
-  width: 10px;
-  min-width: 10px;
-  min-height: 10px;
-}
-
-.emotion-22 .fillStroke {
-  stroke: #521094;
+  fill: #641cb3;
+  height: 1em;
+  width: 1em;
+  min-width: 1em;
+  min-height: 1em;
+  -webkit-transform: rotate(-180deg);
+  -moz-transform: rotate(-180deg);
+  -ms-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+  -webkit-transition: -webkit-transform 0.2s;
+  transition: transform 0.2s;
+}
+
+.emotion-17 .fillStroke {
+  stroke: #641cb3;
   fill: none;
 }
 
-.emotion-59 {
+.emotion-40 {
   -webkit-animation: 3s linear;
   animation: 3s linear;
 }
 
-.emotion-59 {
+.emotion-40 {
   -webkit-animation: 3s linear;
   animation: 3s linear;
 }
 
-.emotion-61 {
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
-.emotion-61 {
+.emotion-42 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 <div
@@ -4681,7 +5176,9 @@ exports[`Table > Should render correctly with sort then click 1`] = `
         <thead
           class="emotion-2 emotion-3"
         >
-          <tr>
+          <tr
+            role="row"
+          >
             <th
               class="emotion-4 emotion-5"
               role="button columnheader"
@@ -4691,32 +5188,21 @@ exports[`Table > Should render correctly with sort then click 1`] = `
                 class="emotion-6 emotion-7 emotion-8"
               >
                 Column 1
-                <div
+                <svg
                   class="emotion-9 emotion-10"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-11 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                  <svg
-                    class="emotion-11 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </th>
             <th
@@ -4726,35 +5212,18 @@ exports[`Table > Should render correctly with sort then click 1`] = `
               tabindex="0"
             >
               <div
-                class="emotion-6 emotion-18 emotion-8"
+                class="emotion-6 emotion-14 emotion-8"
               >
                 Column 2
-                <div
-                  class="emotion-9 emotion-10"
+                <svg
+                  class="emotion-16 emotion-17 emotion-10"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-22 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                  <svg
-                    class="emotion-11 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    clip-rule="evenodd"
+                    d="M9.792 2a.75.75 0 0 1 .75.75v12.69l4.761-4.762a.75.75 0 0 1 1.06 1.06l-6.041 6.042a.75.75 0 0 1-1.06 0L3.22 11.74a.75.75 0 0 1 1.06-1.061l4.762 4.761V2.75a.75.75 0 0 1 .75-.75"
+                  />
+                </svg>
               </div>
             </th>
             <th
@@ -4766,32 +5235,21 @@ exports[`Table > Should render correctly with sort then click 1`] = `
                 class="emotion-6 emotion-7 emotion-8"
               >
                 Column 3
-                <div
+                <svg
                   class="emotion-9 emotion-10"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-11 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                  <svg
-                    class="emotion-11 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </th>
             <th
@@ -4803,32 +5261,21 @@ exports[`Table > Should render correctly with sort then click 1`] = `
                 class="emotion-6 emotion-7 emotion-8"
               >
                 Column 4
-                <div
+                <svg
                   class="emotion-9 emotion-10"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-11 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                  <svg
-                    class="emotion-11 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </th>
             <th
@@ -4840,323 +5287,322 @@ exports[`Table > Should render correctly with sort then click 1`] = `
                 class="emotion-6 emotion-7 emotion-8"
               >
                 Column 5
-                <div
+                <svg
                   class="emotion-9 emotion-10"
+                  viewBox="0 0 20 20"
                 >
-                  <svg
-                    class="emotion-11 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M9.72 7.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06l-3.72-3.72-3.72 3.72a.75.75 0 0 1-1.06-1.06z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                  <svg
-                    class="emotion-11 emotion-12"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      clip-rule="evenodd"
-                      d="M5.47 7.47a.75.75 0 0 1 1.06 0l3.72 3.72 3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.47 8.53a.75.75 0 0 1 0-1.06"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    clip-rule="evenodd"
+                    d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+                    fill-rule="evenodd"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
               </div>
             </th>
           </tr>
         </thead>
         <tbody>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 1 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 1 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 1 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 1 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 1 Column 5
             </td>
           </tr>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 2 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 2 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 2 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 2 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 2 Column 5
             </td>
           </tr>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 3 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 3 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 3 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 3 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 3 Column 5
             </td>
           </tr>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 4 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 4 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 4 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 4 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 4 Column 5
             </td>
           </tr>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 5 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 5 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 5 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 5 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 5 Column 5
             </td>
           </tr>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 6 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 6 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 6 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 6 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 6 Column 5
             </td>
           </tr>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 7 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 7 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 7 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 7 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 7 Column 5
             </td>
           </tr>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 8 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 8 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 8 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 8 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 8 Column 5
             </td>
           </tr>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 9 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 9 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 9 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 9 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 9 Column 5
             </td>
           </tr>
           <tr
-            class="emotion-59 emotion-60"
+            class="emotion-40 emotion-41"
+            role="row"
           >
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 10 Column 1
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 10 Column 2
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 10 Column 3
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 10 Column 4
             </td>
             <td
-              class="emotion-61 emotion-62"
+              class="emotion-42 emotion-43"
             >
               Row 10 Column 5
             </td>
@@ -5176,6 +5622,17 @@ exports[`Table > Should render correctly with stipped 1`] = `
   border-collapse: collapse;
 }
 
+.emotion-0 [role="row"],
+.emotion-0 [role="button row"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 100px 100px 100px 100px 100px;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .emotion-0 tbody tr:nth-of-type(even) {
   background: #f9f9fa;
 }
@@ -5196,6 +5653,14 @@ exports[`Table > Should render correctly with stipped 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -5211,6 +5676,14 @@ exports[`Table > Should render correctly with stipped 1`] = `
   width: 100px;
   max-width: 200px;
   min-width: 100px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
 }
 
@@ -5281,13 +5754,37 @@ exports[`Table > Should render correctly with stipped 1`] = `
 }
 
 .emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 .emotion-31 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding: 8px;
   font-size: 14px;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: start;
+  justify-content: start;
 }
 
 <div
@@ -5299,7 +5796,9 @@ exports[`Table > Should render correctly with stipped 1`] = `
       <thead
         class="emotion-2 emotion-3"
       >
-        <tr>
+        <tr
+          role="row"
+        >
           <th
             class="emotion-4 emotion-5"
             tabindex="-1"
@@ -5355,6 +5854,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
       <tbody>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -5384,6 +5884,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -5413,6 +5914,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -5442,6 +5944,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -5471,6 +5974,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -5500,6 +6004,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -5529,6 +6034,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -5558,6 +6064,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -5587,6 +6094,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
@@ -5616,6 +6124,7 @@ exports[`Table > Should render correctly with stipped 1`] = `
         </tr>
         <tr
           class="emotion-29 emotion-30"
+          role="row"
         >
           <td
             class="emotion-31 emotion-32"
diff --git a/packages/ui/src/components/Table/constants.ts b/packages/ui/src/components/Table/constants.ts
new file mode 100644
index 0000000000..4960d16158
--- /dev/null
+++ b/packages/ui/src/components/Table/constants.ts
@@ -0,0 +1,9 @@
+export const SELECTABLE_CHECKBOX_SIZE = 40
+export const EXPANDABLE_COLUMN_SIZE = 40
+
+// Convert alignement to flex alignement
+export const AlignementFlex = {
+  left: 'start',
+  center: 'center',
+  right: 'end',
+} as const
diff --git a/packages/ui/src/components/Table/index.tsx b/packages/ui/src/components/Table/index.tsx
index 53adade64e..fed8eb23c0 100644
--- a/packages/ui/src/components/Table/index.tsx
+++ b/packages/ui/src/components/Table/index.tsx
@@ -10,18 +10,29 @@ import { Row } from './Row'
 import { SelectBar } from './SelectBar'
 import { SkeletonRows } from './SkeletonRows'
 import { TableProvider, useTableContext } from './TableContext'
+import { EXPANDABLE_COLUMN_SIZE, SELECTABLE_CHECKBOX_SIZE } from './constants'
 
 type StyledTableProps = {
   stripped: boolean
   bordered: boolean
+  template: string
 }
 const StyledTable = styled('table', {
-  shouldForwardProp: prop => !['bordered', 'stripped'].includes(prop),
+  shouldForwardProp: prop =>
+    !['bordered', 'stripped', 'template'].includes(prop),
 })<StyledTableProps>`
   width: 100%;
   box-sizing: content-box;
   border-collapse: collapse;
 
+  [role="row"],
+  [role="button row"] {
+    display: grid;
+    width: 100%;
+    grid-template-columns: ${({ template }) => template};
+    align-items: center;
+  }
+
   ${({ theme, stripped, bordered }) => `
   ${
     stripped
@@ -50,6 +61,7 @@ type ColumnProps = Pick<
   minWidth?: string
   maxWidth?: string
   info?: string
+  align?: 'left' | 'center' | 'right'
 }
 
 type TableProps = {
@@ -62,59 +74,82 @@ type TableProps = {
   loading?: boolean
   bordered?: boolean
   stripped?: boolean
+  expandable?: boolean
+  /**
+   * Auto collapse is collapsing expandable row when another is expanding
+   * */
+  autoCollapse?: boolean
 }
 
 export const BaseTable = forwardRef<HTMLTableElement, TableProps>(
   (
     {
       selectable = false,
+      expandable = false,
       children,
       columns,
       loading,
       bordered = false,
       stripped = false,
+      autoCollapse = false,
     },
     ref,
-  ) => (
-    <TableProvider
-      selectable={selectable}
-      stripped={stripped}
-      bordered={bordered}
-    >
-      <StyledTable ref={ref} stripped={stripped} bordered={bordered}>
-        <Header>
-          <HeaderRow hasSelectAllColumn={selectable}>
-            {columns.map((column, index) => (
-              <HeaderCell
-                // eslint-disable-next-line react/no-array-index-key
-                key={`header-column-${index}`}
-                isOrdered={column.isOrdered}
-                orderDirection={column.orderDirection}
-                onOrder={column.onOrder}
-                width={column.width}
-                minWidth={column.minWidth}
-                maxWidth={column.maxWidth}
-                info={column.info}
-              >
-                {column.label}
-              </HeaderCell>
-            ))}
-          </HeaderRow>
-        </Header>
-        {loading ? (
-          <Body>
-            <SkeletonRows
-              selectable={selectable}
-              rows={5}
-              cols={columns.length}
-            />
-          </Body>
-        ) : (
-          children
-        )}
-      </StyledTable>
-    </TableProvider>
-  ),
+  ) => {
+    const computeTemplate = `${
+      selectable ? `${SELECTABLE_CHECKBOX_SIZE}px ` : ''
+    }${expandable ? `${EXPANDABLE_COLUMN_SIZE}px ` : ''}${columns
+      .map(({ width }) => width ?? 'minmax(0, 1fr)')
+      .join(' ')}`
+
+    return (
+      <TableProvider
+        selectable={selectable}
+        expandButton={expandable}
+        stripped={stripped}
+        bordered={bordered}
+        autoCollapse={autoCollapse}
+      >
+        <StyledTable
+          ref={ref}
+          stripped={stripped}
+          bordered={bordered}
+          template={computeTemplate}
+        >
+          <Header>
+            <HeaderRow hasSelectAllColumn={selectable}>
+              {columns.map((column, index) => (
+                <HeaderCell
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={`header-column-${index}`}
+                  isOrdered={column.isOrdered}
+                  orderDirection={column.orderDirection}
+                  onOrder={column.onOrder}
+                  width={column.width}
+                  minWidth={column.minWidth}
+                  maxWidth={column.maxWidth}
+                  info={column.info}
+                  align={column.align}
+                >
+                  {column.label}
+                </HeaderCell>
+              ))}
+            </HeaderRow>
+          </Header>
+          {loading ? (
+            <Body>
+              <SkeletonRows
+                selectable={selectable}
+                rows={5}
+                cols={columns.length}
+              />
+            </Body>
+          ) : (
+            children
+          )}
+        </StyledTable>
+      </TableProvider>
+    )
+  },
 )
 
 /**