diff --git a/package-lock.json b/package-lock.json
index eb21b1c9b..a9d9aa8d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@hapi/joi-date": "^2.0.1",
         "@hookform/resolvers": "^2.8.8",
         "@monaco-editor/react": "^4.4.5",
-        "@scality/core-ui": "0.122.0",
+        "@scality/core-ui": "0.124.0",
         "@scality/module-federation": "github:scality/module-federation#1.1.0",
         "@types/react-table": "^7.7.10",
         "@types/react-virtualized": "^9.21.20",
@@ -3322,9 +3322,9 @@
       "dev": true
     },
     "node_modules/@scality/core-ui": {
-      "version": "0.122.0",
-      "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.122.0.tgz",
-      "integrity": "sha512-61rXypM9Z845lN7+5jqeuof3ZLZe8tIfcdaVj2FoFLP97nXUuNaKRyBEoWUc0ESSFl9U87ReU1jMOKIOJlWnsg==",
+      "version": "0.124.0",
+      "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.124.0.tgz",
+      "integrity": "sha512-64fyZUkrm4CV/ZM6Vt+Qe2wVqrDHAkMzpNWWD/HMZwdfjlvS5bkg6/6pyM4H/s2zySKhg5g0wvsA2RAyJaoDvg==",
       "dependencies": {
         "@floating-ui/dom": "^1.6.3",
         "@fortawesome/fontawesome-free": "^5.10.2",
@@ -22285,9 +22285,9 @@
       "dev": true
     },
     "@scality/core-ui": {
-      "version": "0.122.0",
-      "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.122.0.tgz",
-      "integrity": "sha512-61rXypM9Z845lN7+5jqeuof3ZLZe8tIfcdaVj2FoFLP97nXUuNaKRyBEoWUc0ESSFl9U87ReU1jMOKIOJlWnsg==",
+      "version": "0.124.0",
+      "resolved": "https://registry.npmjs.org/@scality/core-ui/-/core-ui-0.124.0.tgz",
+      "integrity": "sha512-64fyZUkrm4CV/ZM6Vt+Qe2wVqrDHAkMzpNWWD/HMZwdfjlvS5bkg6/6pyM4H/s2zySKhg5g0wvsA2RAyJaoDvg==",
       "requires": {
         "@floating-ui/dom": "^1.6.3",
         "@fortawesome/fontawesome-free": "^5.10.2",
diff --git a/package.json b/package.json
index d01a5e126..97234b10e 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "@hapi/joi-date": "^2.0.1",
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.4.5",
-    "@scality/core-ui": "0.122.0",
+    "@scality/core-ui": "0.124.0",
     "@scality/module-federation": "github:scality/module-federation#1.1.0",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",
diff --git a/src/react/Routes.tsx b/src/react/Routes.tsx
index 2d58bfacd..14e5a1174 100644
--- a/src/react/Routes.tsx
+++ b/src/react/Routes.tsx
@@ -1,4 +1,11 @@
-import { AppContainer, ErrorPage401, Icon, Sidebar } from '@scality/core-ui';
+import {
+  AppContainer,
+  EmptyState,
+  ErrorPage401,
+  Icon,
+  Loader,
+  Sidebar,
+} from '@scality/core-ui';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -32,11 +39,9 @@ import EndpointCreate from './endpoint/EndpointCreate';
 import Endpoints from './endpoint/Endpoints';
 import LocationEditor from './locations/LocationEditor';
 import { Locations } from './locations/Locations';
-import { EmptyStateContainer } from './ui-elements/Container';
-import Loader from './ui-elements/Loader';
 import ReauthDialog from './ui-elements/ReauthDialog';
 import VeeamSteppers from './ui-elements/Veeam/VeeamSteps';
-import { Warning } from './ui-elements/Warning';
+
 import { useAuthGroups } from './utils/hooks';
 
 export const RemoveTrailingSlash = ({ ...rest }) => {
@@ -58,7 +63,7 @@ export const RemoveTrailingSlash = ({ ...rest }) => {
 
 const RedirectToAccount = () => {
   // To be replace later by react-query or context
-  const history = useHistory();
+
   const { account: selectedAccount } = useCurrentAccount();
   const { pathname, search } = useLocation();
 
@@ -68,17 +73,17 @@ const RedirectToAccount = () => {
       <Redirect to={`/accounts/${selectedAccount.Name}${pathname}${search}`} />
     );
   } else if (isStorageManager) {
-    const description = pathname === '/workflows' ? 'workflows' : 'data';
+    const description =
+      pathname === '/workflows'
+        ? { singular: 'Workflow', plural: 'Workflows' }
+        : { singular: 'Bucket', plural: 'Buckets' };
     return (
-      <EmptyStateContainer>
-        <Warning
-          centered={true}
-          icon={<Icon name="Account" size="5x" />}
-          title={`Before browsing your ${description}, create your first account.`}
-          btnTitle="Create Account"
-          btnAction={() => history.push('/create-account')}
-        />
-      </EmptyStateContainer>
+      <EmptyState
+        icon={pathname === '/workflows' ? 'Workflow' : 'Bucket'}
+        link="/create-account"
+        listedResource={description}
+        resourceToCreate="Account"
+      ></EmptyState>
     );
   } else {
     return <ErrorPage401 />;
@@ -139,7 +144,7 @@ function PrivateRoutes() {
 
   if (!isClientsLoaded) {
     return (
-      <Loader>
+      <Loader centered>
         <div>Loading clients</div>
       </Loader>
     );
diff --git a/src/react/account/AccountList.tsx b/src/react/account/AccountList.tsx
index 1e3be093f..1454bdd17 100644
--- a/src/react/account/AccountList.tsx
+++ b/src/react/account/AccountList.tsx
@@ -1,34 +1,27 @@
-import React, { useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
-import { spacing } from '@scality/core-ui/dist/style/theme';
-import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
-import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 import {
   ConstrainedText,
-  FormattedDateTime,
   Icon,
   Link,
   Stack,
+  FormattedDateTime,
 } from '@scality/core-ui';
-import { Account } from '../next-architecture/domain/entities/account';
+import { Button, Table } from '@scality/core-ui/dist/next';
+import React, { useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
 import { CellProps, CoreUIColumn } from 'react-table';
+import { Account } from '../next-architecture/domain/entities/account';
+
+import { VEEAM_FEATURE } from '../../js/config';
 import {
   useCurrentAccount,
   useSetAssumedRole,
 } from '../DataServiceRoleProvider';
-import { useAuthGroups } from '../utils/hooks';
-import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
-import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvider';
 import { useAccountLatestUsedCapacity } from '../next-architecture/domain/business/accounts';
 import { useConfig } from '../next-architecture/ui/ConfigProvider';
-import { VEEAM_FEATURE } from '../../js/config';
-
-const TableAction = styled.div`
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: ${spacing.sp16};
-`;
+import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvider';
+import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
+import { TableHeaderWrapper } from '../ui-elements/Table';
+import { useAuthGroups } from '../utils/hooks';
 
 function useAutoAssumeRoleUponAccountDeletion({
   accounts,
@@ -118,7 +111,6 @@ function AccountList({ accounts }: { accounts: Account[] }) {
   return (
     <div
       style={{
-        padding: `${spacing.sp16}`,
         display: 'flex',
         flexDirection: 'column',
         flex: 1,
@@ -128,40 +120,40 @@ function AccountList({ accounts }: { accounts: Account[] }) {
         columns={columns}
         data={accounts}
         defaultSortingKey={'creationDate'}
+        entityName={{
+          en: {
+            singular: 'account',
+            plural: 'accounts',
+          },
+        }}
       >
-        <TableAction>
-          <Table.SearchWithQueryParams
-            displayedName={{
-              singular: 'account',
-              plural: 'accounts',
-            }}
-          />
-          {isStorageManager ? (
-            <Stack>
-              {features.includes(VEEAM_FEATURE) && (
+        <TableHeaderWrapper
+          search={<Table.SearchWithQueryParams />}
+          actions={
+            isStorageManager && (
+              <Stack>
+                {features.includes(VEEAM_FEATURE) && (
+                  <Button
+                    label="Start Configuration for Veeam"
+                    variant="secondary"
+                    onClick={() => history.push('/veeam/configuration')}
+                    type="button"
+                  />
+                )}
                 <Button
-                  label="Start Configuration for Veeam"
-                  variant="secondary"
-                  onClick={() => history.push('/veeam/configuration')}
-                  type="button"
-                />
-              )}
-              <Button
-                icon={<Icon name="Create-add" />}
-                label="Create Account"
-                variant="primary"
-                onClick={() => history.push('/create-account')}
-                type="submit"
-              ></Button>
-            </Stack>
-          ) : (
-            ''
-          )}
-        </TableAction>
+                  icon={<Icon name="Create-add" />}
+                  label="Create Account"
+                  variant="primary"
+                  onClick={() => history.push('/create-account')}
+                  type="submit"
+                ></Button>
+              </Stack>
+            )
+          }
+        />
         <Table.SingleSelectableContent
           rowHeight="h40"
           separationLineVariant="backgroundLevel1"
-          backgroundVariant="backgroundLevel3"
         />
       </Table>
     </div>
diff --git a/src/react/account/AccountLocations.tsx b/src/react/account/AccountLocations.tsx
index fdb055390..9b40d0438 100644
--- a/src/react/account/AccountLocations.tsx
+++ b/src/react/account/AccountLocations.tsx
@@ -1,4 +1,4 @@
-import { Icon, Loader, Stack } from '@scality/core-ui';
+import { Loader, Stack } from '@scality/core-ui';
 import { Table } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
 import { CellProps, CoreUIColumn } from 'react-table';
@@ -9,10 +9,9 @@ import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvide
 import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColumn';
 import { ColdStorageIcon } from '../ui-elements/ColdStorageIcon';
 import { HelpLocationTargetBucket } from '../ui-elements/Help';
-import { Search } from '../ui-elements/Table';
-import { Warning } from '../ui-elements/Warning';
+
 import { getLocationType } from '../utils/storageOptions';
-import { CenterredSecondaryText } from './iamAttachment/AttachmentTable';
+import { TableHeaderWrapper } from '../ui-elements/Table';
 
 export function AccountLocations() {
   const metricsAdapter = useMetricsAdapter();
@@ -34,7 +33,7 @@ export function AccountLocations() {
       (location: Location) => {
         return location;
       },
-      { flex: '0.2' },
+      { flex: '0.5' },
     );
     const columns: CoreUIColumn<Location>[] = [
       {
@@ -42,7 +41,9 @@ export function AccountLocations() {
         accessor: 'name',
         cellStyle: {
           textAlign: 'left',
-          minWidth: '20rem',
+          minWidth: '10rem',
+          flex: '1',
+          width: 'unset',
         },
       },
       {
@@ -50,7 +51,10 @@ export function AccountLocations() {
         accessor: 'type',
         cellStyle: {
           textAlign: 'left',
-          minWidth: '24rem',
+          minWidth: '10rem',
+          flex: '1',
+
+          width: 'unset',
         },
         Cell(value: CellProps<Location>) {
           const rowValues = value.row.original;
@@ -75,7 +79,7 @@ export function AccountLocations() {
         accessor: 'details.bucketName',
         cellStyle: {
           textAlign: 'left',
-          flex: '0.3',
+          flex: '0.5',
         },
       },
       dataUsedColumn,
@@ -84,7 +88,7 @@ export function AccountLocations() {
     return columns;
   }, [locations]);
 
-  if (locations.status === 'loading' || locations.status === 'unknown') {
+  if (locations.status === 'unknown') {
     return (
       <Stack>
         <Loader size="huge" />
@@ -92,46 +96,32 @@ export function AccountLocations() {
       </Stack>
     );
   }
-  if (locations.status === 'error') {
-    return (
-      <Warning
-        icon={<Icon name="Times-circle" size="2x" />}
-        title="Unable to load locations."
-      />
-    );
-  }
 
   return (
-    <Table columns={columns} data={data} defaultSortingKey={'name'}>
-      <Search>
-        <Table.SearchWithQueryParams
-          displayedName={{
-            singular: 'location',
-            plural: 'locations',
-          }}
-          queryParams={SEARCH_QUERY_PARAM}
-        />
-      </Search>
+    <Table
+      columns={columns}
+      data={data}
+      defaultSortingKey={'name'}
+      entityName={{ en: { singular: 'location', plural: 'locations' } }}
+      status={locations.status}
+    >
+      <TableHeaderWrapper
+        search={
+          <Table.SearchWithQueryParams queryParams={SEARCH_QUERY_PARAM} />
+        }
+      />
+
       <Table.SingleSelectableContent
         id="singleTable"
         rowHeight="h40"
         separationLineVariant="backgroundLevel1"
-        backgroundVariant="backgroundLevel3"
         //@ts-expect-error fix this when you are working on it
         customItemKey={(index: number, data: Array<Location>) =>
           data[index].name
         }
         //@ts-expect-error fix this when you are working on it
         key={(index: number, data: Array<Location>) => data[index].name}
-      >
-        {(Rows) =>
-          data.length === 0 ? (
-            <CenterredSecondaryText>No Locations</CenterredSecondaryText>
-          ) : (
-            <>{Rows}</>
-          )
-        }
-      </Table.SingleSelectableContent>
+      ></Table.SingleSelectableContent>
     </Table>
   );
 }
diff --git a/src/react/account/AccountPoliciesList.tsx b/src/react/account/AccountPoliciesList.tsx
index c57daf04b..19566be9a 100644
--- a/src/react/account/AccountPoliciesList.tsx
+++ b/src/react/account/AccountPoliciesList.tsx
@@ -1,13 +1,14 @@
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
-import { spacing } from '@scality/core-ui/dist/style/theme';
 import { useIAMClient } from '../IAMProvider';
+
 import {
   ConstrainedText,
-  FormattedDateTime,
   Icon,
   Tooltip,
+  spacing,
+  FormattedDateTime,
 } from '@scality/core-ui';
 import { notFalsyTypeGuard } from '../../types/typeGuards';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
@@ -154,7 +155,7 @@ const ActionButtons = ({
     rowValues;
   return (
     <Box
-      gap={spacing.sp12}
+      gap={spacing.r12}
       alignSelf="flex-end"
       display="flex"
       alignItems="center"
@@ -254,7 +255,7 @@ const DeletePolicyAction = ({
       />
       <Box ml="0.6rem">
         <Button
-          style={{ height: spacing.sp24 }}
+          style={{ height: spacing.r24 }}
           disabled={!!attachments || isInternalPolicy}
           icon={<Icon name="Delete" />}
           label=""
@@ -280,7 +281,7 @@ const DeletePolicyAction = ({
 const AccessPolicyNameCell = ({ rowValues }: { rowValues: InternalPolicy }) => {
   const { policyPath, policyName } = rowValues;
   const isInternalPolicy = policyPath.includes('scality-internal');
-  const styleProps = { style: { marginLeft: spacing.sp16 } };
+  const styleProps = { style: { marginLeft: spacing.r16 } };
   return (
     <>
       {isInternalPolicy && (
@@ -355,7 +356,9 @@ const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
       Header: 'Policy Name',
       accessor: 'policyName',
       cellStyle: {
-        minWidth: '20%',
+        flex: 1,
+        width: 'unset',
+        minWidth: '5rem',
       },
       Cell: (value) => <AccessPolicyNameCell rowValues={value.row.original} />,
     },
@@ -363,15 +366,19 @@ const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
       Header: 'Policy Path',
       accessor: 'policyPath',
       cellStyle: {
-        minWidth: '10%',
+        flex: 0.5,
+        minWidth: '5rem',
+        width: 'unset',
       },
     },
     {
       Header: 'Last Modified',
       accessor: 'modifiedOn',
       cellStyle: {
+        width: 'unset',
         textAlign: 'right',
-        minWidth: '20%',
+        minWidth: '6rem',
+        flex: 0.5,
       },
       Cell: ({ value }) => {
         if (typeof value === 'string') {
@@ -384,15 +391,18 @@ const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
       Header: 'Attachments',
       accessor: 'attachments',
       cellStyle: {
+        width: 'unset',
         textAlign: 'right',
-        minWidth: '10%',
+        minWidth: '5rem',
+        flex: 0.5,
       },
     },
     {
       Header: '',
       accessor: 'actions',
       cellStyle: {
-        minWidth: '40%',
+        minWidth: '25rem',
+        paddingRight: spacing.r12,
       },
       disableSortBy: true,
       Cell: (value) => (
@@ -434,8 +444,6 @@ const AccountPoliciesList = ({ accountName }: { accountName: string }) => {
         errorPreviousHeaders:
           'An error occured, policies listing may be incomplete. Please retry' +
           ' and if the error persist contact your support.',
-        errorInTableContent:
-          'We failed to retrieve policies, please retry later. If the error persists, please contact your support.',
       }}
     />
   );
diff --git a/src/react/account/AccountRoleSelectButtonAndModal.tsx b/src/react/account/AccountRoleSelectButtonAndModal.tsx
index 0a727a7da..b990828e7 100644
--- a/src/react/account/AccountRoleSelectButtonAndModal.tsx
+++ b/src/react/account/AccountRoleSelectButtonAndModal.tsx
@@ -1,10 +1,7 @@
 import { useState } from 'react';
 import { generatePath, useHistory, useRouteMatch } from 'react-router-dom';
-import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
-import { Box, Button } from '@scality/core-ui/dist/next';
-import { Stack, Tooltip, Wrap } from '@scality/core-ui';
-import { spacing } from '@scality/core-ui/dist/style/theme';
-
+import { Box, Button, Table } from '@scality/core-ui/dist/next';
+import { Stack, Tooltip, Wrap, spacing, Icon } from '@scality/core-ui';
 import { CustomModal as Modal, ModalBody } from '../ui-elements/Modal';
 import { regexArn, SCALITY_INTERNAL_ROLES, useAccounts } from '../utils/hooks';
 import {
@@ -12,7 +9,6 @@ import {
   useDataServiceRole,
   useSetAssumedRole,
 } from '../DataServiceRoleProvider';
-import { Icon } from '@scality/core-ui';
 import { AccountSelectorButton } from '../ui-elements/Table';
 
 export function AccountRoleSelectButtonAndModal({
@@ -117,7 +113,7 @@ export function AccountRoleSelectButtonAndModal({
                     size="xs"
                     color="buttonSecondary"
                     //@ts-expect-error fix this when you are working on it
-                    style={{ fontSize: '1rem', marginLeft: spacing.sp8 }}
+                    style={{ fontSize: '1rem', marginLeft: spacing.r8 }}
                   />
                 </Tooltip>
               </span>
@@ -148,7 +144,6 @@ export function AccountRoleSelectButtonAndModal({
           <Table.SingleSelectableContent
             rowHeight="h32"
             separationLineVariant="backgroundLevel3"
-            backgroundVariant="backgroundLevel1"
             onRowSelected={(rowData) => {
               //@ts-expect-error fix this when you are working on it
               setAssumedRoleArn(rowData.original.roleArn);
@@ -156,9 +151,6 @@ export function AccountRoleSelectButtonAndModal({
               setAssumedAccount(rowData.original.accountName);
             }}
             selectedId={assumedRoleArn}
-            children={(Rows) => {
-              return <>{Rows}</>;
-            }}
           ></Table.SingleSelectableContent>
         </Table>
       </div>
diff --git a/src/react/account/AccountUserAccessKeys.tsx b/src/react/account/AccountUserAccessKeys.tsx
index e220ece16..330ca4129 100644
--- a/src/react/account/AccountUserAccessKeys.tsx
+++ b/src/react/account/AccountUserAccessKeys.tsx
@@ -21,22 +21,26 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 import { Column } from 'react-table';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useIAMClient } from '../IAMProvider';
 import { getUserAccessKeysQuery } from '../queries';
 import { BreadcrumbAccount } from '../ui-elements/Breadcrumb';
 import DeleteConfirmation from '../ui-elements/DeleteConfirmation';
-import { TitleRow as TableHeader } from '../ui-elements/TableKeyValue';
 import { formatSimpleDate } from '../utils';
 import {
   useAccessKeyOutdatedStatus,
   useAwsPaginatedEntities,
 } from '../utils/IAMhooks';
 import AccountUserSecretKeyModal from './AccountUserSecretKeyModal';
+import { TableHeaderWrapper } from '../ui-elements/Table';
 
 const CustomIcon = styled.i`
-  color: ${(props) => props.color ?? props.theme.infoPrimary};
+  color: ${(props) => props.theme.textSecondary};
   font-size: 32px;
+  cursor: pointer;
+  :hover {
+    color: ${(props) => props.theme.textPrimary};
+  }
 `;
 
 const CreatedOnCell = (rowValue) => {
@@ -161,6 +165,7 @@ const DeleteAccessKeyAction = (rowValue) => {
 
 const AccountUserAccessKeys = () => {
   const { pathname } = useLocation();
+  const theme = useTheme();
   const { IAMUserName } = useParams<{
     IAMUserName: string;
   }>();
@@ -232,15 +237,13 @@ const AccountUserAccessKeys = () => {
     } else if (accessKeysResultLength > 2) {
       return (
         <Stack gap="r32">
-          <Box>
-            Access Keys
+          <Stack gap="r8">
+            <>Access Keys</>
             <TextBadge
               variant={'statusWarning'}
-              //@ts-expect-error fix this when you are working on it
-              text={accessKeysResultLength}
-              style={{ marginLeft: spacing.r8 }}
+              text={`${accessKeysResultLength}`}
             />
-          </Box>
+          </Stack>
           <Banner
             icon={
               <div
@@ -257,8 +260,7 @@ const AccountUserAccessKeys = () => {
                 />
               </div>
             }
-            //@ts-expect-error fix this when you are working on it
-            variant="statusWarning"
+            variant="warning"
             title="Warning"
           >
             Security Status: as a best practice, an user should not have more
@@ -285,36 +287,33 @@ const AccountUserAccessKeys = () => {
         <Stack withSeparators gap="r32">
           <>
             <CustomIcon
-              color="white"
               className="fas fa-arrow-left"
-              style={{
-                cursor: 'pointer',
-              }}
               onClick={() => {
                 history.push('../');
               }}
             />
-            <CustomIcon className="fas fa-key" />
+            <Icon name="Key" size="2x" color={theme.infoPrimary} />
             <>{`Access Keys for: ${IAMUserName}`}</>
           </>
           <>{accessKeysCountComponent}</>
         </Stack>
       </AppContainer.OverallSummary>
 
-      <AppContainer.MainContent hasPadding background="backgroundLevel3">
-        <Box style={{ flex: 1 }}>
-          {/* fix this when you are working on it*/}
-          <Table
-            columns={columns as unknown as Column[]}
-            data={data}
-            defaultSortingKey={'health'}
-          >
-            <TableHeader
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-              }}
-            >
+      <AppContainer.MainContent background="backgroundLevel3">
+        <Table
+          columns={columns as unknown as Column[]}
+          data={data}
+          defaultSortingKey={'health'}
+          status={accessKeysStatus}
+          entityName={{
+            en: {
+              singular: 'access key',
+              plural: 'access keys',
+            },
+          }}
+        >
+          <TableHeaderWrapper
+            actions={
               <Button
                 icon={<Icon name="Create-add" />}
                 label="Create Access Keys"
@@ -322,26 +321,13 @@ const AccountUserAccessKeys = () => {
                 onClick={() => history.push('access-keys/create')}
                 type="submit"
               />
-            </TableHeader>
-            <Table.SingleSelectableContent
-              rowHeight="h40"
-              separationLineVariant="backgroundLevel1"
-              backgroundVariant="backgroundLevel3"
-            >
-              {(Rows) => (
-                <>
-                  {accessKeysStatus === 'loading' || accessKeysStatus === 'idle'
-                    ? 'Loading access keys...'
-                    : ''}
-                  {accessKeysStatus === 'error'
-                    ? 'We failed to retrieve access keys, please retry later. If the error persists, please contact your support.'
-                    : ''}
-                  {accessKeysStatus === 'success' ? Rows : ''}
-                </>
-              )}
-            </Table.SingleSelectableContent>
-          </Table>
-        </Box>
+            }
+          />
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel1"
+          ></Table.SingleSelectableContent>
+        </Table>
       </AppContainer.MainContent>
       <Route path={`${url}/create`}>
         <AccountUserSecretKeyModal IAMUserName={IAMUserName} />
diff --git a/src/react/account/AccountUserList.tsx b/src/react/account/AccountUserList.tsx
index c57f901d0..d69cc94ff 100644
--- a/src/react/account/AccountUserList.tsx
+++ b/src/react/account/AccountUserList.tsx
@@ -2,7 +2,6 @@ import { useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Box, Button, CopyButton } from '@scality/core-ui/dist/next';
 import { TextBadge } from '@scality/core-ui/dist/components/textbadge/TextBadge.component';
-import { spacing } from '@scality/core-ui/dist/style/theme';
 import { useIAMClient } from '../IAMProvider';
 import {
   AWS_PAGINATED_ENTITIES,
@@ -24,7 +23,7 @@ import { useDispatch } from 'react-redux';
 import { handleApiError, handleClientError } from '../actions';
 import { ApiError } from '../../types/actions';
 import { User } from 'aws-sdk/clients/iam';
-import { FormattedDateTime, Icon } from '@scality/core-ui';
+import { FormattedDateTime, Icon, spacing } from '@scality/core-ui';
 import { Row } from 'react-table';
 
 type InternalUser = {
@@ -144,7 +143,7 @@ const ActionButtons = ({
   const { arn, userName } = rowValues;
   return (
     <Box
-      gap={spacing.sp12}
+      gap={spacing.r12}
       alignSelf="flex-end"
       display="flex"
       alignItems="center"
@@ -239,7 +238,7 @@ const DeleteUserAction = ({
           listAttachedUserPoliciesStatus === 'loading'
         }
         icon={<Icon name="Delete" />}
-        style={{ height: spacing.sp24, marginLeft: '0.6rem' }}
+        style={{ height: spacing.r24, marginLeft: '0.6rem' }}
         label=""
         onClick={() => {
           setShowModal(true);
@@ -307,15 +306,19 @@ const AccountUserList = ({ accountName }: { accountName?: string }) => {
       Header: 'User Name',
       accessor: 'userName',
       cellStyle: {
-        minWidth: '30%',
+        flex: 3,
+        width: 'unset',
+        minWidth: '5rem',
       },
     },
     {
       Header: 'Access Keys',
       accessor: 'accessKeys',
       cellStyle: {
+        width: 'unset',
         textAlign: 'right',
-        minWidth: '10%',
+        flex: 1,
+        minWidth: '6rem',
       },
       Cell: renderAccessKeyComponent,
     },
@@ -323,8 +326,10 @@ const AccountUserList = ({ accountName }: { accountName?: string }) => {
       Header: 'Created On',
       accessor: 'createdOn',
       cellStyle: {
+        width: 'unset',
         textAlign: 'right',
-        minWidth: '10%',
+        flex: 1,
+        minWidth: '7rem',
       },
       Cell: ({ value }: { value: Date }) => (
         <FormattedDateTime format="date-time" value={value} />
@@ -337,8 +342,8 @@ const AccountUserList = ({ accountName }: { accountName?: string }) => {
       accessor: 'actions',
       cellStyle: {
         textAlign: 'right',
-        minWidth: '50%',
-        marginLeft: 'auto',
+        width: '24rem',
+        marginRight: spacing.r12,
       },
       disableSortBy: true,
       Cell: (value: CellProps<InternalUser>) => (
@@ -381,8 +386,6 @@ const AccountUserList = ({ accountName }: { accountName?: string }) => {
         errorPreviousHeaders:
           'An error occured, users listing may be incomplete. Please retry' +
           ' and if the error persist contact your support.',
-        errorInTableContent:
-          'We failed to retrieve users, please retry later. If the error persists, please contact your support.',
       }}
     />
   );
diff --git a/src/react/account/Accounts.tsx b/src/react/account/Accounts.tsx
index 90e2662ab..220b944c9 100644
--- a/src/react/account/Accounts.tsx
+++ b/src/react/account/Accounts.tsx
@@ -1,8 +1,10 @@
 import {
   AppContainer,
+  EmptyState,
   ErrorPage401,
   ErrorPage500,
   Icon,
+  Loader,
 } from '@scality/core-ui';
 import { useHistory, useLocation } from 'react-router-dom';
 
@@ -11,9 +13,8 @@ import { useListAccounts } from '../next-architecture/domain/business/accounts';
 import { useAccessibleAccountsAdapter } from '../next-architecture/ui/AccessibleAccountsAdapterProvider';
 import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvider';
 import { BreadcrumbAccount } from '../ui-elements/Breadcrumb';
-import { EmptyStateContainer } from '../ui-elements/Container';
 import Header from '../ui-elements/EntityHeader';
-import { NoAccountWarning, Warning } from '../ui-elements/Warning';
+import { NoAccountWarning } from '../ui-elements/Warning';
 import { useAuthGroups } from '../utils/hooks';
 import AccountList from './AccountList';
 import { MultiAccountsIcon } from './MultiAccountsIcon';
@@ -49,7 +50,11 @@ const Accounts = () => {
       <AppContainer.ContextContainer>
         <BreadcrumbAccount pathname={pathname} />
       </AppContainer.ContextContainer>
-      {accounts.status === 'loading' && <div>Loading accounts...</div>}
+      {accounts.status === 'loading' && (
+        <Loader centered>
+          <>Loading Accounts...</>
+        </Loader>
+      )}
       {accounts.status === 'error' && <ErrorPage500 locale="en" />}
       {accounts.status === 'success' && (
         <>
@@ -62,35 +67,32 @@ const Accounts = () => {
           </AppContainer.OverallSummary>
           <AppContainer.MainContent background="backgroundLevel3">
             {accounts.value.length === 0 ? (
-              <EmptyStateContainer>
-                {displayVeeamConfiguration ? (
-                  <NoAccountWarning
-                    buttonSection={
-                      <>
-                        <Button
-                          label="Start Configuration for Veeam"
-                          variant="primary"
-                          onClick={() => history.push('/veeam/configuration')}
-                        />
-                        <p>or</p>
-                        <Button
-                          label="Create Account"
-                          variant="outline"
-                          onClick={() => history.push('/create-account')}
-                        />
-                      </>
-                    }
-                  />
-                ) : (
-                  <Warning
-                    centered
-                    icon={<Icon name="Account" size="5x" />}
-                    title={`You don't have any account, please create your first one.`}
-                    btnTitle="Create Account"
-                    btnAction={() => history.push('/create-account')}
-                  />
-                )}
-              </EmptyStateContainer>
+              displayVeeamConfiguration ? (
+                <NoAccountWarning
+                  buttonSection={
+                    <>
+                      <Button
+                        label="Start Configuration for Veeam"
+                        variant="primary"
+                        onClick={() => history.push('/veeam/configuration')}
+                      />
+                      or
+                      <Button
+                        label="Create Account"
+                        icon={<Icon name="Create-add" />}
+                        variant="outline"
+                        onClick={() => history.push('/create-account')}
+                      />
+                    </>
+                  }
+                />
+              ) : (
+                <EmptyState
+                  icon="Account"
+                  link="/create-account"
+                  listedResource={{ singular: 'Account', plural: 'Accounts' }}
+                ></EmptyState>
+              )
             ) : (
               <AccountList accounts={accounts.value} />
             )}
diff --git a/src/react/account/AwsPaginatedResourceTable.tsx b/src/react/account/AwsPaginatedResourceTable.tsx
index 1a196af03..b9796ec09 100644
--- a/src/react/account/AwsPaginatedResourceTable.tsx
+++ b/src/react/account/AwsPaginatedResourceTable.tsx
@@ -1,20 +1,16 @@
 import { ChangeEvent } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
-import { TableItemCount } from '@scality/core-ui/dist/components/tablev2/Search';
-import { Tooltip } from '@scality/core-ui';
+import { SearchInput, Tooltip, Wrap, spacing } from '@scality/core-ui';
 import { Box, Table } from '@scality/core-ui/dist/next';
-import { SearchInput } from '@scality/core-ui/dist/components/searchinput/SearchInput.component';
-
+import { TableItemCount } from '@scality/core-ui/dist/components/tablev2/Search';
+import IAMClient from '../../js/IAMClient';
 import { useIAMClient } from '../IAMProvider';
-import { useQueryParams } from '../utils/hooks';
 import {
   AWS_PAGINATED_ENTITIES,
   AWS_PAGINATED_QUERY,
   useAwsPaginatedEntities,
 } from '../utils/IAMhooks';
-import { TitleRow as TableHeader } from '../ui-elements/TableKeyValue';
-import IAMClient from '../../js/IAMClient';
-import { CenterredSecondaryText } from './iamAttachment/AttachmentTable';
+import { useQueryParams } from '../utils/hooks';
 
 const WithTooltipWhileLoading = ({
   children,
@@ -58,7 +54,6 @@ export type Props<ENTITY, PREPARED_ENTITY = ENTITY> = {
     singularResourceName: string;
     loading: string;
     errorPreviousHeaders: string;
-    errorInTableContent: string;
   };
 };
 
@@ -76,7 +71,6 @@ const AwsPaginatedResourceTable = <ENTITY, PREPARED_ENTITY = ENTITY>({
     singularResourceName,
     loading,
     errorPreviousHeaders,
-    errorInTableContent,
   },
 }: Props<ENTITY, PREPARED_ENTITY>) => {
   const history = useHistory();
@@ -111,8 +105,15 @@ const AwsPaginatedResourceTable = <ENTITY, PREPARED_ENTITY = ENTITY>({
         //@ts-expect-error fix this when you are working on it
         data={data}
         defaultSortingKey={defaultSortingKey}
+        status={queryResult.firstPageStatus}
+        entityName={{
+          en: {
+            singular: singularResourceName,
+            plural: pluralResourceName,
+          },
+        }}
       >
-        <TableHeader>
+        <Wrap style={{ padding: spacing.r16 }}>
           <Box display="flex" alignItems="center">
             {queryResult.firstPageStatus !== 'loading' &&
             queryResult.firstPageStatus !== 'error'
@@ -149,10 +150,6 @@ const AwsPaginatedResourceTable = <ENTITY, PREPARED_ENTITY = ENTITY>({
               ) : (
                 <Table.SearchWithQueryParams
                   queryParams={SEARCH_QUERY_PARAM}
-                  displayedName={{
-                    singular: singularResourceName,
-                    plural: pluralResourceName,
-                  }}
                   disabled={queryResult.status !== 'success'}
                 />
               )}
@@ -169,37 +166,13 @@ const AwsPaginatedResourceTable = <ENTITY, PREPARED_ENTITY = ENTITY>({
             )}
           </Box>
           {additionalHeaders}
-        </TableHeader>
+        </Wrap>
         <Table.SingleSelectableContent
           rowHeight="h40"
           separationLineVariant="backgroundLevel1"
-          backgroundVariant="backgroundLevel3"
           //@ts-expect-error fix this when you are working on it
           customItemKey={getItemKey}
-        >
-          {(Rows) => (
-            <>
-              {queryResult.firstPageStatus === 'loading' ||
-              queryResult.firstPageStatus === 'idle'
-                ? loading
-                : ''}
-              {queryResult.firstPageStatus === 'error'
-                ? errorInTableContent
-                : ''}
-              {queryResult.firstPageStatus === 'success' ? (
-                queryResult.data?.length === 0 ? (
-                  <CenterredSecondaryText>
-                    No {pluralResourceName}
-                  </CenterredSecondaryText>
-                ) : (
-                  Rows
-                )
-              ) : (
-                ''
-              )}
-            </>
-          )}
-        </Table.SingleSelectableContent>
+        ></Table.SingleSelectableContent>
       </Table>
     </Box>
   );
diff --git a/src/react/account/__tests__/AccountDetails.test.tsx b/src/react/account/__tests__/AccountDetails.test.tsx
index 8e335e0a1..e99d702f6 100644
--- a/src/react/account/__tests__/AccountDetails.test.tsx
+++ b/src/react/account/__tests__/AccountDetails.test.tsx
@@ -64,7 +64,7 @@ describe('AccountDetails', () => {
 
     expect(component.getByRole('tablist')).toBeInTheDocument();
     // warning of account access key table
-    expect(component.queryAllByText('No key created')).toHaveLength(0);
+    expect(component.queryAllByText('No access keys found')).toHaveLength(0);
   });
 
   it('should render AccountDetails component without access keys for storage manager users', () => {
@@ -80,6 +80,6 @@ describe('AccountDetails', () => {
     //E+V
     expect(component.getByRole('tablist')).toBeInTheDocument();
     // warning of account access key table
-    expect(component.getByText('No key created')).toBeInTheDocument();
+    expect(component.getByText('No access keys found')).toBeInTheDocument();
   });
 });
diff --git a/src/react/account/__tests__/AccountUserList.test.tsx b/src/react/account/__tests__/AccountUserList.test.tsx
index e5ec7c6a9..049627785 100644
--- a/src/react/account/__tests__/AccountUserList.test.tsx
+++ b/src/react/account/__tests__/AccountUserList.test.tsx
@@ -121,12 +121,12 @@ describe('AccountUserList', () => {
 
     await waitFor(() =>
       screen.getByText(
-        'We failed to retrieve users, please retry later. If the error persists, please contact your support.',
+        'An error occurred while loading the users, please refresh the page.',
       ),
     );
     expect(
       screen.getByText(
-        'We failed to retrieve users, please retry later. If the error persists, please contact your support.',
+        'An error occurred while loading the users, please refresh the page.',
       ),
     ).toBeInTheDocument();
   });
diff --git a/src/react/account/details/properties/AccountInfo.tsx b/src/react/account/details/properties/AccountInfo.tsx
index 7d2b92b5e..e21c2266e 100644
--- a/src/react/account/details/properties/AccountInfo.tsx
+++ b/src/react/account/details/properties/AccountInfo.tsx
@@ -1,4 +1,11 @@
-import { FormattedDateTime, Icon, Modal, Wrap } from '@scality/core-ui';
+import {
+  FormattedDateTime,
+  Icon,
+  Modal,
+  Wrap,
+  spacing,
+} from '@scality/core-ui';
+
 import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { useMutation, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';
@@ -14,25 +21,23 @@ import {
 } from '../../../next-architecture/domain/business/accounts';
 import { useAccountsLocationsEndpointsAdapter } from '../../../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
 import { useInstanceId } from '../../../next-architecture/ui/AuthProvider';
-import { Clipboard } from '../../../ui-elements/Clipboard';
+
 import { ButtonContainer } from '../../../ui-elements/Container';
 import DeleteConfirmation from '../../../ui-elements/DeleteConfirmation';
 import * as T from '../../../ui-elements/TableKeyValue';
-import Table, { TitleRow } from '../../../ui-elements/TableKeyValue';
-import {
-  useAccounts,
-  useAuthGroups,
-  useRolePathName,
-} from '../../../utils/hooks';
+import Table from '../../../ui-elements/TableKeyValue';
+import { useAuthGroups, useRolePathName } from '../../../utils/hooks';
 import { removeRoleArnStored } from '../../../utils/localStorage';
 import SecretKeyModal from './SecretKeyModal';
 import { useSetAssumedRole } from '../../../DataServiceRoleProvider';
 import { useAccessibleAccountsAdapter } from '../../../next-architecture/ui/AccessibleAccountsAdapterProvider';
 import { useMetricsAdapter } from '../../../next-architecture/ui/MetricsAdapterProvider';
+import { CopyButton } from '@scality/core-ui/dist/next';
 
 const TableContainer = styled.div`
   display: flex;
   flex-direction: column;
+  padding: ${spacing.r16};
 `;
 type Props = {
   account: Account;
@@ -144,14 +149,14 @@ function AccountInfo({ account }: Props) {
   return (
     <TableContainer>
       <SecretKeyModal account={account} />
-      <TitleRow>
+      <Wrap alignItems="center" marginBottom={spacing.r16}>
         <h3>Account details</h3>
         {isStorageManager && (
           <ButtonContainer>
             <DeleteAccountButtonAndModal account={account} />
           </ButtonContainer>
         )}
-      </TitleRow>
+      </Wrap>
       <Table id="account-details-table">
         <T.Body>
           <T.Row>
@@ -159,7 +164,7 @@ function AccountInfo({ account }: Props) {
             <T.Value> {account.id} </T.Value>
             <T.ExtraCell>
               {' '}
-              <Clipboard text={account.id} />{' '}
+              <CopyButton textToCopy={account.id} />{' '}
             </T.ExtraCell>
           </T.Row>
           <T.Row>
@@ -167,7 +172,7 @@ function AccountInfo({ account }: Props) {
             <T.Value> {account.Name} </T.Value>
             <T.ExtraCell>
               {' '}
-              <Clipboard text={account.Name} />{' '}
+              <CopyButton textToCopy={account.Name} />{' '}
             </T.ExtraCell>
           </T.Row>
           <T.Row>
diff --git a/src/react/account/details/properties/AccountKeys.tsx b/src/react/account/details/properties/AccountKeys.tsx
index 5a837e556..ff1f4a6cc 100644
--- a/src/react/account/details/properties/AccountKeys.tsx
+++ b/src/react/account/details/properties/AccountKeys.tsx
@@ -1,24 +1,28 @@
-import React, { useEffect, useMemo, useState } from 'react';
 import {
-  deleteAccountAccessKey,
-  listAccountAccessKeys,
-  openAccountKeyCreateModal,
-} from '../../../actions';
+  Banner,
+  FormattedDateTime,
+  Icon,
+  Wrap,
+  spacing,
+} from '@scality/core-ui';
+import { Button, CopyButton, Table } from '@scality/core-ui/dist/next';
+import { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Row } from 'react-table';
+import styled from 'styled-components';
 import type { Account } from '../../../../types/account';
 import type { AppState } from '../../../../types/state';
-import { Banner, FormattedDateTime, Icon, Wrap } from '@scality/core-ui';
-import { Button, CopyButton, Table } from '@scality/core-ui/dist/next';
-import { spacing } from '@scality/core-ui/dist/style/theme';
-import styled from 'styled-components';
 import { useDataServiceRole } from '../../../DataServiceRoleProvider';
-import { Warning } from '../../../ui-elements/Warning';
+import {
+  deleteAccountAccessKey,
+  listAccountAccessKeys,
+  openAccountKeyCreateModal,
+} from '../../../actions';
 import DeleteConfirmation from '../../../ui-elements/DeleteConfirmation';
 
 const AccessKeysDetails = styled.div`
   display: block;
-  margin-top: ${spacing.sp20};
+  margin-top: ${spacing.r16};
 `;
 
 const TableContainer = styled.div`
@@ -27,6 +31,7 @@ const TableContainer = styled.div`
 
 const ButtonContainer = styled.div`
   margin-left: auto;
+  padding: ${spacing.r16};
 `;
 
 const EllipsisCell = styled.div`
@@ -42,7 +47,7 @@ type Props = {
 };
 
 type AccessKey = {
-  accessKey: string;
+  access_key: string;
   created_at: string;
 };
 
@@ -146,11 +151,11 @@ function AccountKeys({ account }: Props) {
           flex: '1',
         },
 
-        Cell({ value: accessKey }: { value: string }) {
+        Cell({ value: access_key }: { value: string }) {
           return (
-            <Wrap marginRight={spacing.sp8}>
+            <Wrap marginRight={spacing.r8}>
               <div></div>
-              <DeleteKey accessKey={accessKey} />
+              <DeleteKey accessKey={access_key} />
             </Wrap>
           );
         },
@@ -171,14 +176,8 @@ function AccountKeys({ account }: Props) {
 
   return (
     <AccessKeysDetails>
-      <h3>Root user Access keys details</h3>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'flex-start',
-        }}
-      >
+      <h3 style={{ marginLeft: spacing.r16 }}>Root user Access keys details</h3>
+      <Wrap alignItems="center" paddingLeft={spacing.r16}>
         {accessKeys && accessKeys.length > 0 && (
           <div data-testid="root-access-keys-banner">
             <Banner variant="danger" icon={<Icon name="Exclamation-circle" />}>
@@ -198,29 +197,25 @@ function AccountKeys({ account }: Props) {
             label="Create Access key"
           />
         </ButtonContainer>
-      </div>
+      </Wrap>
       <TableContainer>
-        {accessKeys.length > 0 ? (
-          <Table
-            //@ts-expect-error fix this when you are working on it
-            columns={columns}
-            //@ts-expect-error fix this when you are working on it
-            data={accessKeys}
-            defaultSortingKey="created_at"
-          >
-            <Table.SingleSelectableContent
-              rowHeight="h40"
-              separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
-            />
-          </Table>
-        ) : (
-          <Warning
-            centered
-            icon={<Icon name="Exclamation-triangle" />}
-            title="No key created"
+        <Table
+          entityName={{
+            en: {
+              singular: 'access key',
+              plural: 'access keys',
+            },
+          }}
+          //@ts-expect-error fix this when you are working on it
+          columns={columns}
+          data={accessKeys}
+          defaultSortingKey="created_at"
+        >
+          <Table.SingleSelectableContent
+            rowHeight="h40"
+            separationLineVariant="backgroundLevel1"
           />
-        )}
+        </Table>
       </TableContainer>
     </AccessKeysDetails>
   );
diff --git a/src/react/account/details/properties/SecretKeyModal.tsx b/src/react/account/details/properties/SecretKeyModal.tsx
index c0bcfe4c1..e01c1db43 100644
--- a/src/react/account/details/properties/SecretKeyModal.tsx
+++ b/src/react/account/details/properties/SecretKeyModal.tsx
@@ -8,13 +8,13 @@ import {
 } from '../../../actions';
 import { useDispatch, useSelector } from 'react-redux';
 import type { AppState } from '../../../../types/state';
-import { Banner, Icon, Stack, Wrap } from '@scality/core-ui';
-import { Button, CopyButton } from '@scality/core-ui/dist/next';
-import { Clipboard } from '../../../ui-elements/Clipboard';
+import { Banner, Icon, Stack, Wrap, spacing } from '@scality/core-ui';
+import { Button, CopyButton, Box } from '@scality/core-ui/dist/next';
+
 import { HideCredential } from '../../../ui-elements/Hide';
-import { spacing } from '@scality/core-ui/dist/style/theme';
+
 import { useDataServiceRole } from '../../../DataServiceRoleProvider';
-import { Box } from '@scality/core-ui/dist/next';
+
 import styled from 'styled-components';
 type Props = {
   account: Account;
@@ -109,7 +109,7 @@ const modalBody = (key: AccountKey | null) => {
       </Banner>
       <Table
         style={{
-          marginTop: spacing.sp16,
+          marginTop: spacing.r16,
         }}
       >
         <T.Body>
@@ -122,7 +122,7 @@ const modalBody = (key: AccountKey | null) => {
             <T.Value> {key.accessKey} </T.Value>
             <T.ExtraCell>
               {' '}
-              <Clipboard text={key.accessKey} />{' '}
+              <CopyButton textToCopy={key.accessKey} />{' '}
             </T.ExtraCell>
           </T.Row>
           <T.Row>
@@ -133,7 +133,7 @@ const modalBody = (key: AccountKey | null) => {
             </T.Value>
             <T.ExtraCell>
               {' '}
-              <Clipboard text={key.secretKey} />{' '}
+              <CopyButton textToCopy={key.secretKey} />{' '}
             </T.ExtraCell>
           </T.Row>
         </T.Body>
diff --git a/src/react/account/details/properties/__tests__/AccountInfo.test.tsx b/src/react/account/details/properties/__tests__/AccountInfo.test.tsx
index 078534c62..ec2d13a7e 100644
--- a/src/react/account/details/properties/__tests__/AccountInfo.test.tsx
+++ b/src/react/account/details/properties/__tests__/AccountInfo.test.tsx
@@ -68,19 +68,19 @@ describe('AccountInfo', () => {
     const { component } = reduxMount(<AccountInfo account={account1} />);
     expect(component.find(Table)).toHaveLength(1);
     const rows = component.find(T.Row);
-    // TODO: switched from 5 -> 3 because we hide the root user email and arn
+    // switched from 5 -> 3 because we hide the root user email and arn
     expect(rows).toHaveLength(3);
     const firstRow = rows.first();
     testRow(firstRow, {
       key: 'Account ID',
       value: account1.id,
-      extraCellComponent: 'Clipboard',
+      extraCellComponent: 'CopyButton',
     });
     const secondRow = rows.at(1);
     testRow(secondRow, {
       key: 'Name',
       value: account1.Name,
-      extraCellComponent: 'Clipboard',
+      extraCellComponent: 'CopyButton',
     });
     const thirdRow = rows.at(2);
     testRow(thirdRow, {
diff --git a/src/react/account/details/properties/__tests__/AccountKeys.test.tsx b/src/react/account/details/properties/__tests__/AccountKeys.test.tsx
index 86fa2e702..d58ccb862 100644
--- a/src/react/account/details/properties/__tests__/AccountKeys.test.tsx
+++ b/src/react/account/details/properties/__tests__/AccountKeys.test.tsx
@@ -93,6 +93,6 @@ describe('AccountKeys', () => {
       component.queryByTestId('root-access-keys-banner'),
     ).not.toBeInTheDocument();
     // Check if there is the Warning in the table
-    expect(component.getByText('No key created')).toBeInTheDocument();
+    expect(component.getByText('No access keys found')).toBeInTheDocument();
   });
 });
diff --git a/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx b/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx
index fc7dfff22..258eba591 100644
--- a/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx
+++ b/src/react/account/iamAttachment/AttachmentConfirmationModal.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
-import { Box, Button } from '@scality/core-ui/dist/next';
+
+import { Box, Button, Table } from '@scality/core-ui/dist/next';
 import { CustomModal as Modal, ModalBody } from '../../ui-elements/Modal';
 import { useMutation, useQueryClient } from 'react-query';
 import { useIAMClient } from '../../IAMProvider';
@@ -15,7 +15,6 @@ import {
 } from './AttachmentTypes';
 import { useTheme } from 'styled-components';
 import { useHistory } from 'react-router-dom';
-import { InlineButton } from '../../ui-elements/Table';
 import {
   getListAttachedUserPoliciesQuery,
   getListEntitiesForPolicyQuery,
@@ -290,8 +289,9 @@ function AttachmentConfirmationModal({
               <Box display="flex" gap={8} alignItems="center">
                 <Icon color="statusCritical" name="Times-circle" />
                 {attachmentOperationsStatuses[resourceId]}{' '}
-                <InlineButton
+                <Button
                   onClick={attach}
+                  size="inline"
                   variant="outline"
                   label="Retry"
                 />
@@ -334,10 +334,6 @@ function AttachmentConfirmationModal({
           <Table.SingleSelectableContent
             rowHeight="h32"
             separationLineVariant="backgroundLevel3"
-            backgroundVariant="backgroundLevel1"
-            children={(Rows) => {
-              return <>{Rows}</>;
-            }}
           ></Table.SingleSelectableContent>
         </Table>
       </div>
diff --git a/src/react/account/iamAttachment/AttachmentTable.tsx b/src/react/account/iamAttachment/AttachmentTable.tsx
index 091236409..7f59e89ff 100644
--- a/src/react/account/iamAttachment/AttachmentTable.tsx
+++ b/src/react/account/iamAttachment/AttachmentTable.tsx
@@ -14,15 +14,16 @@ import {
   Loader,
   SearchInput,
   SecondaryText,
+  spacing,
   Tooltip,
 } from '@scality/core-ui';
 import styled from 'styled-components';
-import { spacing } from '@scality/core-ui/dist/style/theme';
 import {
   AttachableEntity,
   AttachmentOperation,
   AttachmentAction,
 } from './AttachmentTypes';
+import { tableRowHeight } from '@scality/core-ui/dist/components/tablev2/TableUtils';
 
 type AttachableEntityWithPendingStatus = {
   isPending?: boolean;
@@ -77,7 +78,7 @@ const MenuContainer = styled.ul<{
       : ''}
   border-top: 0;
   li {
-    padding: ${spacing.sp8};
+    padding: ${spacing.r8};
     cursor: pointer;
     border-top: 1px solid ${(props) => props.theme.backgroundLevel2};
     &[aria-selected='true'] {
@@ -87,11 +88,7 @@ const MenuContainer = styled.ul<{
 `;
 
 const SearchBoxContainer = styled.div`
-  margin-bottom: ${spacing.sp24};
-  width: 78%;
-  .sc-tooltip {
-    width: 100%;
-  }
+  margin-bottom: ${spacing.r24};
 `;
 
 const StyledSearchInput = styled(SearchInput)`
@@ -108,7 +105,7 @@ const StyledSearchInput = styled(SearchInput)`
 const AttachmentTableContainer = styled.div`
   height: 80%;
   background: ${(props) => props.theme.backgroundLevel3};
-  padding: ${spacing.sp24};
+  padding: ${spacing.r24};
 `;
 
 const StyledTable = styled.div`
@@ -119,6 +116,7 @@ const StyledTable = styled.div`
 export const CenterredSecondaryText = styled(SecondaryText)`
   display: block;
   text-align: center;
+  line-height: ${tableRowHeight[rowHeight]}rem;
 `;
 
 export const AttachmentTable = <
@@ -372,8 +370,12 @@ export const AttachmentTable = <
       <SearchBoxContainer
         {...getComboboxProps({
           ref: (element) => {
-            if (element) {
-              setSearchWidth(element.getBoundingClientRect().width - 2 + 'px');
+            if (element?.firstElementChild) {
+              setSearchWidth(
+                element.firstElementChild.getBoundingClientRect().width -
+                  2 +
+                  'px',
+              );
             }
           },
         })}
@@ -535,7 +537,6 @@ export const AttachmentTable = <
           defaultSortingKey="name"
         >
           <Table.SingleSelectableContent
-            backgroundVariant="backgroundLevel4"
             rowHeight={rowHeight}
             separationLineVariant="backgroundLevel2"
           >
diff --git a/src/react/databrowser/DataBrowser.tsx b/src/react/databrowser/DataBrowser.tsx
index f73ba3346..08055567f 100644
--- a/src/react/databrowser/DataBrowser.tsx
+++ b/src/react/databrowser/DataBrowser.tsx
@@ -19,7 +19,7 @@ import { clearError } from '../actions';
 import ObjectLockSetting from './buckets/ObjectLockSetting';
 import ObjectLockSettingOnObject from './objects/ObjectLockSetting';
 import { useAccounts, useQueryParams } from '../utils/hooks';
-import { AppContainer, Icon } from '@scality/core-ui';
+import { AppContainer, EmptyState, Icon } from '@scality/core-ui';
 import { Box } from '@scality/core-ui/dist/next';
 import { useS3Client } from '../next-architecture/ui/S3ClientProvider';
 import Loader from '../ui-elements/Loader';
@@ -44,8 +44,11 @@ export default function DataBrowser() {
   const s3Client = useS3Client();
 
   if (!s3Client.config.credentials?.accessKeyId) {
-    //@ts-expect-error fix this when you are working on it
-    return <Loader>Authenticating...</Loader>;
+    return (
+      <Loader>
+        <>Authenticating...</>
+      </Loader>
+    );
   }
 
   // NOTE: create-bucket page has its own way to manage "byComponent" errors.
@@ -68,15 +71,15 @@ export default function DataBrowser() {
 
   if (accounts.length === 0) {
     return (
-      <EmptyStateContainer>
-        <Warning
-          centered={true}
-          icon={<Icon name="Account" size="5x" />}
-          title="Before browsing your data, create your first account."
-          btnTitle="Create Account"
-          btnAction={() => history.push('/create-account')}
-        />
-      </EmptyStateContainer>
+      <EmptyState
+        icon="Bucket"
+        link="/create-account"
+        listedResource={{
+          singular: 'Bucket',
+          plural: 'Buckets',
+        }}
+        resourceToCreate="Account"
+      />
     );
   }
 
diff --git a/src/react/databrowser/buckets/BucketList.tsx b/src/react/databrowser/buckets/BucketList.tsx
index d1577cf02..2074fd092 100644
--- a/src/react/databrowser/buckets/BucketList.tsx
+++ b/src/react/databrowser/buckets/BucketList.tsx
@@ -6,7 +6,7 @@ import {
   spacing,
 } from '@scality/core-ui';
 import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
-import { Box, Table } from '@scality/core-ui/dist/next';
+import { Box, Button, Table } from '@scality/core-ui/dist/next';
 import { useMemo } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import { CoreUIColumn } from 'react-table';
@@ -19,7 +19,8 @@ import { Bucket } from '../../next-architecture/domain/entities/bucket';
 import { useConfig } from '../../next-architecture/ui/ConfigProvider';
 import { useMetricsAdapter } from '../../next-architecture/ui/MetricsAdapterProvider';
 import { getDataUsedColumn } from '../../next-architecture/ui/metrics/DataUsedColumn';
-import * as T from '../../ui-elements/Table';
+import { TableHeaderWrapper } from '../../ui-elements/Table';
+
 import { useAuthGroups, useQueryParams } from '../../utils/hooks';
 import { getLocationIngestionState } from '../../utils/storageOptions';
 import { BucketLocationNameAndType } from '../../workflow/SourceBucketOption';
@@ -82,7 +83,7 @@ export default function BucketList({
         },
         cellStyle: {
           flex: '1',
-          paddingLeft: '1rem',
+          width: 'unset',
         },
       },
       {
@@ -92,15 +93,14 @@ export default function BucketList({
         Cell({ row }) {
           return BucketLocationNameAndType({ bucketName: row.original.name });
         },
-        cellStyle: {
-          flex: '1',
-        },
+
+        cellStyle: { width: 'unset', flex: '1.2' },
       },
     ];
 
     if (features.includes(XDM_FEATURE)) {
       columns.push({
-        Header: 'Async Metadata updates',
+        Header: 'Metadata updates',
         accessor: 'locationConstraint',
         id: 'ingestion',
         disableSortBy: true,
@@ -122,7 +122,10 @@ export default function BucketList({
     }
 
     if (isStorageManager) {
-      columns.push(dataUsedColumn);
+      columns.push({
+        ...dataUsedColumn,
+        cellStyle: { textAlign: 'right', width: 'unset', flex: '0.8' },
+      });
     }
 
     columns.push({
@@ -130,8 +133,9 @@ export default function BucketList({
       accessor: 'creationDate',
       cellStyle: {
         flex: '1',
-        paddingRight: spacing.r32,
         textAlign: 'right',
+        paddingRight: spacing.r16,
+        width: 'unset',
       },
       Cell({ value }: { value: string }) {
         return (
@@ -151,26 +155,25 @@ export default function BucketList({
     }
     return null;
   }, [selectedBucketName, buckets]);
-
   return (
-    <Box display="flex" flexDirection="column" flex="1" id="bucket-list">
-      <T.Container>
-        <Table
-          columns={columns}
-          data={buckets}
-          defaultSortingKey="creationDate"
-        >
-          <T.SearchContainer>
-            <T.Search>
-              <Table.SearchWithQueryParams
-                displayedName={{
-                  singular: 'bucket',
-                  plural: 'buckets',
-                }}
-                queryParams={SEARCH_QUERY_PARAM}
-              />
-            </T.Search>
-            <T.ExtraButton
+    <Box display="flex" flexDirection="column" id="bucket-list" width="100%">
+      <Table
+        columns={columns}
+        data={buckets}
+        defaultSortingKey="creationDate"
+        entityName={{
+          en: {
+            singular: 'bucket',
+            plural: 'buckets',
+          },
+        }}
+      >
+        <TableHeaderWrapper
+          search={
+            <Table.SearchWithQueryParams queryParams={SEARCH_QUERY_PARAM} />
+          }
+          actions={
+            <Button
               icon={<Icon name="Create-add" />}
               label="Create Bucket"
               variant="primary"
@@ -179,26 +182,26 @@ export default function BucketList({
               }
               type="submit"
             />
-          </T.SearchContainer>
-          <Table.SingleSelectableContent
-            rowHeight="h40"
-            selectedId={selectedId?.toString()}
-            onRowSelected={(row) => {
-              const isSelected = selectedBucketName === row.original.name;
+          }
+        />
 
-              if (!isSelected) {
-                history.push(
-                  tabName
-                    ? `/accounts/${account?.Name}/buckets/${row.original.name}?tab=${tabName}`
-                    : `/accounts/${account?.Name}/buckets/${row.original.name}`,
-                );
-              }
-            }}
-            separationLineVariant="backgroundLevel1"
-            backgroundVariant="backgroundLevel3"
-          />
-        </Table>
-      </T.Container>
+        <Table.SingleSelectableContent
+          rowHeight="h40"
+          selectedId={selectedId?.toString()}
+          onRowSelected={(row) => {
+            const isSelected = selectedBucketName === row.original.name;
+
+            if (!isSelected) {
+              history.push(
+                tabName
+                  ? `/accounts/${account?.Name}/buckets/${row.original.name}?tab=${tabName}`
+                  : `/accounts/${account?.Name}/buckets/${row.original.name}`,
+              );
+            }
+          }}
+          separationLineVariant="backgroundLevel1"
+        />
+      </Table>
     </Box>
   );
 }
diff --git a/src/react/databrowser/buckets/Buckets.tsx b/src/react/databrowser/buckets/Buckets.tsx
index 2a984d3c2..049cc3509 100644
--- a/src/react/databrowser/buckets/Buckets.tsx
+++ b/src/react/databrowser/buckets/Buckets.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useLocation, Redirect, useParams, useHistory } from 'react-router-dom';
+import { useLocation, Redirect, useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import type { AppState } from '../../../types/state';
 import BucketDetails from './BucketDetails';
@@ -9,12 +9,17 @@ import Header from '../../ui-elements/EntityHeader';
 import { Warning } from '../../ui-elements/Warning';
 import { MultiBucketsIcon } from './MutliBucketsIcon';
 import { useCurrentAccount } from '../../DataServiceRoleProvider';
-import { AppContainer, Icon, Loader, TwoPanelLayout } from '@scality/core-ui';
+import {
+  AppContainer,
+  EmptyState,
+  Icon,
+  Loader,
+  TwoPanelLayout,
+} from '@scality/core-ui';
 import { useListBucketsForCurrentAccount } from '../../next-architecture/domain/business/buckets';
 import { useMetricsAdapter } from '../../next-architecture/ui/MetricsAdapterProvider';
 
 export default function Buckets() {
-  const history = useHistory();
   const { pathname } = useLocation();
   const metricsAdapter = useMetricsAdapter();
   const { buckets } = useListBucketsForCurrentAccount({ metricsAdapter });
@@ -36,7 +41,11 @@ export default function Buckets() {
   if (buckets.status === 'error') {
     return (
       <EmptyStateContainer>
-        <Warning title="Error" icon={<Icon name="Times-circle" size="5x" />} />
+        <Warning
+          title="Error"
+          icon={<Icon name="Times-circle" size="5x" />}
+          centered
+        />
       </EmptyStateContainer>
     );
   }
@@ -51,20 +60,16 @@ export default function Buckets() {
 
   const bucket = bucketIndex >= 0 ? buckets.value[bucketIndex] : null;
 
-  // empty state.
   if (buckets.value.length === 0) {
     return (
-      <EmptyStateContainer>
-        <Warning
-          centered={true}
-          icon={<Icon name="Bucket" size="5x" />}
-          title="Create your first bucket."
-          btnTitle="Create Bucket"
-          btnAction={() =>
-            history.push(`/accounts/${account?.Name}/create-bucket`)
-          }
-        />
-      </EmptyStateContainer>
+      <EmptyState
+        icon="Bucket"
+        link={`/accounts/${account?.Name}/create-bucket`}
+        listedResource={{
+          singular: 'Bucket',
+          plural: 'Buckets',
+        }}
+      ></EmptyState>
     );
   }
 
diff --git a/src/react/databrowser/buckets/details/Workflow.tsx b/src/react/databrowser/buckets/details/Workflow.tsx
index 8ff7cd5af..21f27f82e 100644
--- a/src/react/databrowser/buckets/details/Workflow.tsx
+++ b/src/react/databrowser/buckets/details/Workflow.tsx
@@ -1,8 +1,6 @@
-import { ConstrainedText } from '@scality/core-ui';
-import { Icon } from '@scality/core-ui/dist/components/icon/Icon.component';
-import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
-import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
-import { spacing } from '@scality/core-ui/dist/style/theme';
+import { Icon, spacing, ConstrainedText } from '@scality/core-ui';
+import { Button, Table } from '@scality/core-ui/dist/next';
+import { PropsWithChildren } from 'react';
 import { useHistory } from 'react-router-dom';
 import { CellProps, CoreUIColumn } from 'react-table';
 import styled from 'styled-components';
@@ -15,12 +13,11 @@ import { makeWorkflows } from '../../../queries';
 import { NameLinkContaner } from '../../../ui-elements/NameLink';
 import { WorkflowTypeIcon } from '../../../workflow/WorkflowList';
 import { useWorkflowsWithSelect } from '../../../workflow/Workflows';
-import { PropsWithChildren } from 'react';
 
 const TableAction = styled.div`
   display: flex;
   justify-content: flex-end;
-  margin-bottom: ${spacing.sp16};
+  padding: ${spacing.r16};
 `;
 
 function Workflow({ bucketName }: { bucketName: string }) {
@@ -87,7 +84,18 @@ function Workflow({ bucketName }: { bucketName: string }) {
         height: '100%',
       }}
     >
-      <Table columns={columns} data={data || []} defaultSortingKey={'name'}>
+      <Table
+        columns={columns}
+        data={data || []}
+        defaultSortingKey={'name'}
+        status={status}
+        entityName={{
+          en: {
+            singular: 'workflow',
+            plural: 'workflows',
+          },
+        }}
+      >
         <TableAction>
           <Button
             icon={<Icon name="Create-add" />}
@@ -105,23 +113,7 @@ function Workflow({ bucketName }: { bucketName: string }) {
         <Table.SingleSelectableContent
           rowHeight="h48"
           separationLineVariant="backgroundLevel2"
-          backgroundVariant="backgroundLevel4"
-        >
-          {(Rows) => (
-            <>
-              {status === 'loading' || status === 'idle'
-                ? 'Loading workflows...'
-                : ''}
-              {status === 'error'
-                ? 'We failed to retrieve workflows, please retry later. If the error persists, please contact your support.'
-                : ''}
-              {status === 'success' &&
-                !data?.length &&
-                'No workflows found on this bucket.'}
-              {status === 'success' ? Rows : ''}
-            </>
-          )}
-        </Table.SingleSelectableContent>
+        ></Table.SingleSelectableContent>
       </Table>
     </div>
   );
diff --git a/src/react/databrowser/objects/ObjectDelete.tsx b/src/react/databrowser/objects/ObjectDelete.tsx
index 1db4c4966..86767123a 100644
--- a/src/react/databrowser/objects/ObjectDelete.tsx
+++ b/src/react/databrowser/objects/ObjectDelete.tsx
@@ -12,8 +12,15 @@ import {
   deleteFiles,
   toggleAllObjects,
 } from '../../actions';
-import { fontSize, spacing } from '@scality/core-ui/dist/style/theme';
-import { Banner, Stack, Wrap } from '@scality/core-ui';
+import { fontSize } from '@scality/core-ui/dist/style/theme';
+import {
+  Banner,
+  Stack,
+  Wrap,
+  PrettyBytes,
+  Icon,
+  spacing,
+} from '@scality/core-ui';
 import { useDispatch, useSelector } from 'react-redux';
 import type { Action } from '../../../types/actions';
 import type { AppState } from '../../../types/state';
@@ -22,7 +29,6 @@ import { Box, Button } from '@scality/core-ui/dist/next';
 import type { Dispatch } from 'redux';
 import { List } from 'immutable';
 import { CustomModal as Modal } from '../../ui-elements/Modal';
-import { PrettyBytes, Icon } from '@scality/core-ui';
 import { maybePluralize } from '../../utils';
 import { useTheme } from 'styled-components';
 import styled from 'styled-components';
@@ -34,12 +40,12 @@ const Files = styled.div`
   height: 15.63rem;
   width: 31.25rem;
   overflow-y: scroll;
-  margin: ${spacing.sp8} 0rem;
-  border: ${spacing.sp1} solid ${(props) => props.theme.border};
+  margin: ${spacing.r8} 0rem;
+  border: ${spacing.r1} solid ${(props) => props.theme.border};
 `;
 const VersionId = styled.div`
   font-size: ${fontSize.small};
-  margin-top: ${spacing.sp4};
+  margin-top: ${spacing.r4};
 `;
 const ConfirmInput = styled(Input)`
   width: 3.4375rem;
@@ -138,12 +144,12 @@ export const enum WarningTypes {
 function getWarningBanner(warningType: WarningTypes) {
   if (warningType === WarningTypes.GOVERNANCE) {
     return (
-      <Box marginTop={spacing.sp8} marginBottom={spacing.sp8}>
+      <Box marginTop={spacing.r8} marginBottom={spacing.r8}>
         <Banner icon={<Icon name="Exclamation-circle" />} variant="warning">
           At least one object you want to delete is under Object-Lock retention{' '}
           <Icon name="Lock" color="buttonSecondary" /> with governance mode.
         </Banner>
-        <Box marginTop={spacing.sp8}>
+        <Box marginTop={spacing.r8}>
           <div>
             Protected versions won't be deleted unless you choose to bypass
           </div>
@@ -154,7 +160,7 @@ function getWarningBanner(warningType: WarningTypes) {
   }
   if (warningType === WarningTypes.COMPLIANCE) {
     return (
-      <Box marginTop={spacing.sp8} marginBottom={spacing.sp8}>
+      <Box marginTop={spacing.r8} marginBottom={spacing.r8}>
         <Banner icon={<Icon name="Exclamation-triangle" />} variant="warning">
           At least one object you want to delete is under Object-Lock retention{' '}
           <Icon name="Lock" color="buttonSecondary" /> with compliance mode.{' '}
@@ -167,7 +173,7 @@ function getWarningBanner(warningType: WarningTypes) {
 
   if (warningType === WarningTypes.LEGAL_HOLD) {
     return (
-      <Box marginTop={spacing.sp8} marginBottom={spacing.sp8}>
+      <Box marginTop={spacing.r8} marginBottom={spacing.r8}>
         <Banner icon={<Icon name="Exclamation-triangle" />} variant="warning">
           At least one object you want to delete is under Legal Hold{' '}
           <Icon name="Lock" color="buttonSecondary" /> <br />
@@ -323,7 +329,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => {
     if (s3Object.lockStatus === 'LOCKED' && s3Object.versionId) {
       if (s3Object.objectRetention?.mode === 'COMPLIANCE') {
         return (
-          <Box display="flex" color={theme?.textTertiary} gap={spacing.sp4}>
+          <Box display="flex" color={theme?.textTertiary} gap={spacing.r4}>
             <Icon color="buttonSecondary" name="Lock" />
             <span>Protected (compliance), won't be deleted</span>
           </Box>
@@ -331,7 +337,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => {
       }
       if (s3Object.objectRetention?.mode === 'GOVERNANCE') {
         return (
-          <Box display="flex" color={theme?.textTertiary} gap={spacing.sp4}>
+          <Box display="flex" color={theme?.textTertiary} gap={spacing.r4}>
             <Icon color="buttonSecondary" name="Lock" />
             <span>Protected (governance), will be deleted</span>
           </Box>
@@ -340,7 +346,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => {
     }
     if (s3Object.isLegalHoldEnabled && s3Object.versionId) {
       return (
-        <Box display="flex" color={theme?.textTertiary} gap={spacing.sp4}>
+        <Box display="flex" color={theme?.textTertiary} gap={spacing.r4}>
           <Icon color="buttonSecondary" name="Lock" />
           <span>Protected (legal hold), won't be deleted</span>
         </Box>
@@ -474,7 +480,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => {
                   <VersionId hidden={!toggledFile.versionId}>
                     {toggledFile.versionId}
                   </VersionId>
-                  <Box marginTop={spacing.sp4}>
+                  <Box marginTop={spacing.r4}>
                     {toggledFile.size &&
                       PrettyBytes({ bytes: toggledFile.size })}
                     {getProtectedDeletionMessage(toggledFile)}
@@ -490,7 +496,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => {
           </T.Body>
         </Table>
       </Files>
-      <Box mb={spacing.sp12}>Total: {PrettyBytes({ bytes: totalSize })}</Box>
+      <Box mb={spacing.r12}>Total: {PrettyBytes({ bytes: totalSize })}</Box>
       {toggledFiles.length > 0 && notificationText && (
         <Banner variant="base" icon={<Icon name="Info-circle" />}>
           <span>{notificationText}</span>
@@ -511,7 +517,7 @@ const ObjectDelete = ({ bucketName, toggled, prefixWithSlash }: Props) => {
         {warnings.length > 0 &&
           warnings.map((warning) => getWarningBanner(warning))}
         {confirmationRequired && (
-          <Box marginBottom={spacing.sp8}>
+          <Box marginBottom={spacing.r8}>
             <span style={{ marginRight: '0.85rem' }}>
               Type "confirm" to bypass governance retention:
             </span>
diff --git a/src/react/databrowser/objects/ObjectDetails.tsx b/src/react/databrowser/objects/ObjectDetails.tsx
index 5a1573408..d9f5411a1 100644
--- a/src/react/databrowser/objects/ObjectDetails.tsx
+++ b/src/react/databrowser/objects/ObjectDetails.tsx
@@ -9,6 +9,8 @@ import { Warning } from '../../ui-elements/Warning';
 import { useLocation } from 'react-router-dom';
 import { useQueryParams } from '../../utils/hooks';
 import { useSelector } from 'react-redux';
+import { Box } from '@scality/core-ui/dist/next';
+import { Icon, spacing } from '@scality/core-ui';
 export const MULTIPLE_ITEMS_SELECTED_MESSAGE = 'Multiple items selected';
 export const SELECT_AN_OBJECT_MESSAGE = 'Select an object';
 type Props = {
@@ -16,8 +18,7 @@ type Props = {
   listType: ListObjectsType;
 };
 export const InfoWarning = ({ title }: { title: JSX.Element }) => (
-  //@ts-expect-error fix this when you are working on it
-  <Warning iconClass="fas fa-2x fa-info-circle" title={title} />
+  <Warning title={title} centered />
 );
 
 const warningTitle = (toggled: List<Record<string, any>>): JSX.Element => {
@@ -96,21 +97,21 @@ function ObjectDetails({ toggled, listType }: Props) {
         path={pathname}
         query={{ ...queryObject, tab: null }}
       >
-        {details()}
+        <Box style={{ padding: spacing.r16 }}>{details()}</Box>
       </CustomTabs.Tab>
       <CustomTabs.Tab
         label="Metadata"
         path={pathname}
         query={{ ...queryObject, tab: 'metadata' }}
       >
-        {details()}
+        <Box style={{ padding: spacing.r16 }}>{details()}</Box>
       </CustomTabs.Tab>
       <CustomTabs.Tab
         label="Tags"
         path={pathname}
         query={{ ...queryObject, tab: 'tags' }}
       >
-        {details()}
+        <Box style={{ padding: spacing.r16 }}>{details()}</Box>
       </CustomTabs.Tab>
     </CustomTabs>
   );
diff --git a/src/react/databrowser/objects/ObjectListTable.tsx b/src/react/databrowser/objects/ObjectListTable.tsx
index 1f3fbd78f..e9bef5be0 100644
--- a/src/react/databrowser/objects/ObjectListTable.tsx
+++ b/src/react/databrowser/objects/ObjectListTable.tsx
@@ -7,7 +7,7 @@ import InfiniteLoader from 'react-window-infinite-loader';
 import { List } from 'immutable';
 import { FormattedDateTime, PrettyBytes, Text } from '@scality/core-ui';
 import { convertRemToPixels } from '@scality/core-ui/dist/utils';
-import { spacing } from '@scality/core-ui/dist/style/theme';
+import { spacing } from '@scality/core-ui';
 import styled from 'styled-components';
 import { useHistory, useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
@@ -35,8 +35,8 @@ import { useAccountsLocationsEndpointsAdapter } from '../../next-architecture/ui
 import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 
 export const Icon = styled.i<{ isMargin?: boolean }>`
-  margin-right: ${spacing.sp4};
-  margin-left: ${(props) => (props.isMargin ? spacing.sp16 : '0px')};
+  margin-right: ${spacing.r4};
+  margin-left: ${(props) => (props.isMargin ? spacing.r16 : '0px')};
 `;
 type CellProps = {
   row: {
@@ -294,10 +294,10 @@ export default function ObjectListTable({
         Header: 'Size',
         headerStyle: {
           textAlign: 'right',
-          marginRight: spacing.sp16,
+          marginRight: spacing.r16,
         },
         cellStyle: {
-          marginRight: isTableScrollbarVisible ? spacing.sp8 : spacing.sp16,
+          marginRight: isTableScrollbarVisible ? spacing.r8 : spacing.r16,
         },
         accessor: (row) => (row.size ? row.size : ''),
         Cell({ value: size }: { value: string }) {
@@ -380,6 +380,7 @@ export default function ObjectListTable({
       }
     }
   }, []);
+
   return (
     <T.ContainerWithSubHeader>
       <Table {...getTableProps()}>
@@ -437,7 +438,7 @@ export default function ObjectListTable({
                       height={height || 300}
                       itemCount={rows.length}
                       itemSize={
-                        convertRemToPixels(parseFloat(spacing.sp40)) || 45
+                        convertRemToPixels(parseFloat(spacing.r40)) || 45
                       }
                       width={width || '100%'}
                       //@ts-expect-error fix this when you are working on it
diff --git a/src/react/databrowser/objects/Objects.tsx b/src/react/databrowser/objects/Objects.tsx
index 56145375d..df33d2d98 100644
--- a/src/react/databrowser/objects/Objects.tsx
+++ b/src/react/databrowser/objects/Objects.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Redirect, useParams } from 'react-router-dom';
+import { Redirect, useHistory, useParams } from 'react-router-dom';
 import {
   getObjectMetadata,
   listObjects,
@@ -21,6 +21,7 @@ import ObjectUpload from './ObjectUpload';
 import { usePrefixWithSlash, useQueryParams } from '../../utils/hooks';
 import { AppContainer, TwoPanelLayout } from '@scality/core-ui';
 import ObjectHead from './ObjectHead';
+
 export default function Objects() {
   const dispatch = useDispatch();
   const [loaded, setLoaded] = useState(false);
@@ -48,6 +49,7 @@ export default function Objects() {
   const searchInput = query.get('metadatasearch');
   const objectKey = query.get('prefix');
   const versionId = query.get('versionId');
+  const history = useHistory();
   const toggled = useMemo(
     () =>
       objects.filter(
@@ -119,13 +121,13 @@ export default function Objects() {
 
   // TODO: manage empty state
   // if (objects.size === 0) {
-  //     return <EmptyStateContainer>
-  //         <Warning
-  //             iconClass="fas fa-5x fa-wallet"
-  //             title='This bucket is empty. Upload new objects to get started.'
-  //             btnTitle='Upload'
-  //             btnAction={() => dispatch(push(`/buckets/${bucketNameParam}/upload-object`))} />
-  //     </EmptyStateContainer>;
+  //   return (
+  //     <EmptyState
+  //       icon="Node-backend"
+  //       link={`/buckets/${bucketNameParam}/upload-object`}
+  //       listedResource="Object"
+  //     ></EmptyState>
+  //   );
   // }
   return (
     <>
diff --git a/src/react/endpoint/EndpointList.tsx b/src/react/endpoint/EndpointList.tsx
index 52d85c489..a073cdd0b 100644
--- a/src/react/endpoint/EndpointList.tsx
+++ b/src/react/endpoint/EndpointList.tsx
@@ -1,20 +1,18 @@
-import { ConstrainedText, Icon, Wrap } from '@scality/core-ui';
-import { Box, Button, Table } from '@scality/core-ui/dist/next';
-import { spacing } from '@scality/core-ui/dist/style/theme';
+import { ConstrainedText, Icon, Wrap, spacing } from '@scality/core-ui';
+import { Box, Button, CopyButton, Table } from '@scality/core-ui/dist/next';
+
 import { useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import type { Endpoint, Hostname, LocationName } from '../../types/config';
 import { renderLocation } from '../locations/utils';
 import { LocationInfo } from '../next-architecture/adapters/accounts-locations/ILocationsAdapter';
-import { Clipboard } from '../ui-elements/Clipboard';
-import * as T from '../ui-elements/Table';
 import {
   AuthorizedAdvancedMetricsButton,
   cloudServerDashboard,
 } from './AdvancedMetricsButton';
 import { DeleteEndpoint } from './DeleteEndpoint';
-
+import { TableHeaderWrapper } from '../ui-elements/Table';
 type CellProps = {
   row: {
     original: Endpoint;
@@ -51,18 +49,17 @@ function EndpointList({ endpoints, locations }: Props) {
         accessor: 'hostname',
         cellStyle: {
           flex: '1',
-          paddingLeft: '18px',
         },
         Cell({ value: hostName }: { value: Hostname }) {
           return (
             <Wrap paddingRight="2rem">
               <ConstrainedText
                 text={
-                  <span style={{ paddingRight: spacing.sp14 }}>{hostName}</span>
+                  <span style={{ paddingRight: spacing.r14 }}>{hostName}</span>
                 }
                 lineClamp={2}
               />
-              <Clipboard text={hostName} />
+              <CopyButton textToCopy={hostName} />
             </Wrap>
           );
         },
@@ -96,12 +93,10 @@ function EndpointList({ endpoints, locations }: Props) {
 
         Cell({ row: { original } }: CellProps) {
           return (
-            <T.Actions>
-              <DeleteEndpoint
-                hostname={original.hostname}
-                isBuiltin={original.isBuiltin}
-              />
-            </T.Actions>
+            <DeleteEndpoint
+              hostname={original.hostname}
+              isBuiltin={original.isBuiltin}
+            />
           );
         },
       },
@@ -111,23 +106,23 @@ function EndpointList({ endpoints, locations }: Props) {
 
   return (
     <Box display="flex" flexDirection="column" flex="1" id="endpoint-list">
-      <T.Container>
-        <Table
-          //@ts-expect-error fix this when you are working on it
-          columns={columns}
-          data={strictSchemaEndpoints}
-          defaultSortingKey="hostname"
-        >
-          <T.SearchContainer>
-            <T.Search>
-              <Table.SearchWithQueryParams
-                displayedName={{
-                  singular: 'endpoint',
-                  plural: 'endpoints',
-                }}
-                queryParams={SEARCH_QUERY_PARAM}
-              />
-            </T.Search>
+      <Table
+        //@ts-expect-error fix this when you are working on it
+        columns={columns}
+        data={strictSchemaEndpoints}
+        defaultSortingKey="hostname"
+        entityName={{
+          en: {
+            singular: 'endpoint',
+            plural: 'endpoints',
+          },
+        }}
+      >
+        <TableHeaderWrapper
+          search={
+            <Table.SearchWithQueryParams queryParams={SEARCH_QUERY_PARAM} />
+          }
+          actions={
             <div style={{ marginLeft: 'auto' }}>
               <Button
                 icon={<Icon name="Create-add" />}
@@ -140,15 +135,13 @@ function EndpointList({ endpoints, locations }: Props) {
                 dashboard={cloudServerDashboard}
               />
             </div>
-          </T.SearchContainer>
-
-          <Table.SingleSelectableContent
-            rowHeight="h40"
-            separationLineVariant="backgroundLevel1"
-            backgroundVariant="backgroundLevel2"
-          />
-        </Table>
-      </T.Container>
+          }
+        />
+        <Table.SingleSelectableContent
+          rowHeight="h40"
+          separationLineVariant="backgroundLevel1"
+        />
+      </Table>
     </Box>
   );
 }
diff --git a/src/react/endpoint/Endpoints.tsx b/src/react/endpoint/Endpoints.tsx
index 1977a8950..05950db52 100644
--- a/src/react/endpoint/Endpoints.tsx
+++ b/src/react/endpoint/Endpoints.tsx
@@ -1,15 +1,17 @@
-import { AppContainer, Icon, Stack, Text } from '@scality/core-ui';
-import { useHistory } from 'react-router-dom';
+import {
+  AppContainer,
+  Icon,
+  Stack,
+  Text,
+  Loader,
+  EmptyState,
+} from '@scality/core-ui';
 
 import { useAccountsLocationsAndEndpoints } from '../next-architecture/domain/business/accounts';
 import { useAccountsLocationsEndpointsAdapter } from '../next-architecture/ui/AccountsLocationsEndpointsAdapterProvider';
-import { EmptyStateContainer } from '../ui-elements/Container';
-import Loader from '../ui-elements/Loader';
-import { Warning } from '../ui-elements/Warning';
 import EndpointList from './EndpointList';
 
 const Endpoints = () => {
-  const history = useHistory();
   const accountsLocationsEndpointsAdapter =
     useAccountsLocationsEndpointsAdapter();
   const { accountsLocationsAndEndpoints, status } =
@@ -19,26 +21,23 @@ const Endpoints = () => {
 
   if (status === 'idle' || status === 'loading') {
     return (
-      <EmptyStateContainer>
-        {/* @ts-expect-error fix this when you are working on it */}
-        <Loader>Loading Data Services...</Loader>
-      </EmptyStateContainer>
+      <Loader centered size="massive">
+        <>Loading Data Services...</>
+      </Loader>
     );
   }
 
   // empty state.
   if (accountsLocationsAndEndpoints?.endpoints.length === 0) {
     return (
-      <EmptyStateContainer>
-        <Warning
-          centered={true}
-          //@ts-expect-error fix this when you are working on it
-          icon={<Icon name="Wallet" size="5x" />}
-          title="Create your first Data Service."
-          btnTitle="Create Data Service"
-          btnAction={() => history.push('/create-dataservice')}
-        />
-      </EmptyStateContainer>
+      <EmptyState
+        icon="Account"
+        listedResource={{
+          singular: 'Data Service',
+          plural: 'Data Services',
+        }}
+        link="/create-dataservice"
+      />
     );
   }
 
diff --git a/src/react/locations/LocationsList.tsx b/src/react/locations/LocationsList.tsx
index aeea45c1b..53786f53f 100644
--- a/src/react/locations/LocationsList.tsx
+++ b/src/react/locations/LocationsList.tsx
@@ -1,4 +1,12 @@
-import { Icon, IconHelp, Stack, Wrap, spacing } from '@scality/core-ui';
+import {
+  EmptyState,
+  Icon,
+  IconHelp,
+  Loader,
+  Stack,
+  Wrap,
+  spacing,
+} from '@scality/core-ui';
 import { useMemo, useState } from 'react';
 import { useMutation, useQueryClient } from 'react-query';
 import { useSelector } from 'react-redux';
@@ -27,13 +35,12 @@ import { getDataUsedColumn } from '../next-architecture/ui/metrics/DataUsedColum
 import { ColdStorageIcon } from '../ui-elements/ColdStorageIcon';
 import DeleteConfirmation from '../ui-elements/DeleteConfirmation';
 import { HelpLocationTargetBucket } from '../ui-elements/Help';
-import { InlineButton, Search, SearchContainer } from '../ui-elements/Table';
-import { Warning } from '../ui-elements/Warning';
 import { getLocationType } from '../utils/storageOptions';
 import { useWorkflows } from '../workflow/Workflows';
 import { PauseAndResume } from './PauseAndResume';
 import { getLocationDeletionBlocker } from './utils';
 import styled from 'styled-components';
+import { TableHeaderWrapper } from '../ui-elements/Table';
 
 const ActionButtons = ({
   rowValues,
@@ -151,9 +158,10 @@ const ActionButtons = ({
       <Wrap>
         <div></div>
         <Stack gap={'r8'}>
-          <InlineButton
+          <Button
             icon={<Icon name="Edit" />}
             variant="secondary"
+            size="inline"
             onClick={() => history.push(`/locations/${locationName}/edit`)}
             type="button"
             aria-label="Edit Location"
@@ -163,7 +171,8 @@ const ActionButtons = ({
             }}
             disabled={rowValues.isBuiltin}
           />
-          <InlineButton
+          <Button
+            size="inline"
             icon={<Icon name="Delete" />}
             variant="danger"
             onClick={() => setShowModal(true)}
@@ -217,7 +226,7 @@ export function LocationsList() {
       (location: Location) => {
         return location;
       },
-      { flex: '0.2', marginRight: '1rem' },
+      { flex: '0.4' },
     );
 
     const columns: CoreUIColumn<Location>[] = [
@@ -226,8 +235,9 @@ export function LocationsList() {
         accessor: 'name',
         cellStyle: {
           textAlign: 'left',
-          minWidth: '20rem',
-          paddingLeft: '18px',
+          minWidth: '10rem',
+          flex: 1,
+          width: 'unset',
         },
       },
       {
@@ -235,7 +245,9 @@ export function LocationsList() {
         accessor: 'type',
         cellStyle: {
           textAlign: 'left',
-          minWidth: '24rem',
+          minWidth: '10rem',
+          flex: 1,
+          width: 'unset',
         },
         Cell(value: CellProps<Location>) {
           const rowValues = value.row.original;
@@ -261,6 +273,7 @@ export function LocationsList() {
         cellStyle: {
           textAlign: 'left',
           flex: '0.3',
+          width: 'unset',
         },
       },
       dataUsedColumn,
@@ -290,7 +303,8 @@ export function LocationsList() {
       disableSortBy: true,
       cellStyle: {
         textAlign: 'left',
-        flex: '0.3',
+        flex: '0.5',
+        width: 'unset',
       },
       Cell: ({ row: { original } }) => (
         <PauseAndResume locationName={original.name} />
@@ -302,10 +316,11 @@ export function LocationsList() {
       accessor: 'details',
       cellStyle: {
         textAlign: 'right',
-        minWidth: '10rem',
+        minWidth: '5rem',
         marginLeft: 'auto',
-        flex: '0.1',
+        flex: '0.2',
         paddingRight: '18px',
+        width: 'unset',
       },
       disableSortBy: true,
       Cell: (value: CellProps<Location>) => {
@@ -341,52 +356,56 @@ export function LocationsList() {
   ]);
 
   if (locations.status === 'loading' || locations.status === 'unknown') {
-    return <>Loading...</>;
+    return (
+      <Loader centered size="massive">
+        <>Loading Locations...</>
+      </Loader>
+    );
   }
 
   if (data.length === 0) {
     return (
-      <Warning
-        icon={<Icon name="Map-marker" size="5x" />}
-        title="Create your first storage location."
-        btnTitle="Create Location"
-        btnAction={() => history.push('/create-location')}
+      <EmptyState
+        icon="Map-marker"
+        link="/create-location"
+        listedResource={{ singular: 'location', plural: 'locations' }}
       />
     );
   }
 
   return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      flex="1"
-      style={{ paddingTop: '1rem' }}
-      id="endpoint-list"
-    >
-      <Table columns={columns} data={data} defaultSortingKey={'name'}>
-        <SearchContainer>
-          <Search>
-            <Table.SearchWithQueryParams
-              displayedName={{
-                singular: 'location',
-                plural: 'locations',
-              }}
-              queryParams={SEARCH_QUERY_PARAM}
+    <Box display="flex" flexDirection="column" flex="1" id="endpoint-list">
+      <Table
+        columns={columns}
+        status={locations.status}
+        data={data}
+        defaultSortingKey={'name'}
+        entityName={{
+          en: {
+            singular: 'location',
+            plural: 'locations',
+          },
+        }}
+      >
+        <TableHeaderWrapper
+          search={
+            <Table.SearchWithQueryParams queryParams={SEARCH_QUERY_PARAM} />
+          }
+          actions={
+            <Button
+              icon={<Icon name="Create-add" />}
+              label="Create Location"
+              variant="primary"
+              onClick={() => history.push('/create-location')}
+              type="submit"
             />
-          </Search>
-          <Button
-            icon={<Icon name="Create-add" />}
-            label="Create Location"
-            variant="primary"
-            onClick={() => history.push('/create-location')}
-            type="submit"
-          />
-        </SearchContainer>
+          }
+        />
+
         <Table.SingleSelectableContent
           id="singleTable"
           rowHeight="h40"
           separationLineVariant="backgroundLevel1"
-          backgroundVariant="backgroundLevel3"
           //@ts-expect-error fix this when you are working on it
           customItemKey={(index: number, data: Array<Location>) =>
             data[index].name
diff --git a/src/react/locations/PauseAndResume.tsx b/src/react/locations/PauseAndResume.tsx
index 068e547d3..0c5d855d3 100644
--- a/src/react/locations/PauseAndResume.tsx
+++ b/src/react/locations/PauseAndResume.tsx
@@ -1,12 +1,11 @@
 import { Icon, Loader, spacing } from '@scality/core-ui';
-import { Box } from '@scality/core-ui/dist/next';
+import { Box, Button } from '@scality/core-ui/dist/next';
 import { useMemo, useRef, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from '../../types/state';
 import { notFalsyTypeGuard } from '../../types/typeGuards';
 import { useManagementClient } from '../ManagementProvider';
-import { InlineButton } from '../ui-elements/Table';
 import { getInstanceStatusQuery } from './queries';
 import { EmptyCell } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
 import { useInstanceId } from '../next-architecture/ui/AuthProvider';
@@ -117,7 +116,8 @@ export const PauseAndResume = ({ locationName }: { locationName: string }) => {
   if (replicationStatus === 'enabled' || ingestionStatus === 'enabled') {
     return (
       <Box display="flex">
-        <InlineButton
+        <Button
+          size="inline"
           disabled={isLoadingButton}
           icon={isLoadingButton ? <Loader /> : <Icon name="Pause-circle" />}
           tooltip={{
@@ -148,7 +148,8 @@ export const PauseAndResume = ({ locationName }: { locationName: string }) => {
   if (replicationStatus === 'disabled' || ingestionStatus === 'disabled') {
     return (
       <Box display="flex">
-        <InlineButton
+        <Button
+          size="inline"
           disabled={isLoadingButton}
           icon={isLoadingButton ? <Loader /> : <Icon name="Play-circle" />}
           tooltip={{
diff --git a/src/react/ui-elements/Container.ts b/src/react/ui-elements/Container.ts
index b0cb35636..82cad2c5c 100644
--- a/src/react/ui-elements/Container.ts
+++ b/src/react/ui-elements/Container.ts
@@ -27,6 +27,9 @@ export const EmptyStateContainer = styled.div`
   flex: 1;
   flex-direction: column;
   width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
   background: ${(props) => props.theme.backgroundLevel1};
 `;
 const NavbarContainer = styled.div`
diff --git a/src/react/ui-elements/Editor.tsx b/src/react/ui-elements/Editor.tsx
index f7de41e5b..4818c0008 100644
--- a/src/react/ui-elements/Editor.tsx
+++ b/src/react/ui-elements/Editor.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import MonacoEditor, { EditorProps, loader } from '@monaco-editor/react';
 import { useConfig } from '../next-architecture/ui/ConfigProvider';
 
@@ -22,6 +22,11 @@ const Editor = ({
 }: Props) => {
   const config = useConfig();
   const { basePath } = config;
+  const [theme, setTheme] = useState('');
+  useEffect(() => {
+    setTheme(localStorage.getItem('theme') === 'dark' ? 'vs-dark' : 'light');
+  }, [localStorage.getItem('theme')]);
+
   useMemo(() => {
     loader.config({ paths: { vs: basePath + '/vs' } });
   }, []);
@@ -32,7 +37,7 @@ const Editor = ({
       width={width}
       defaultLanguage={language}
       value={value}
-      theme="vs-dark"
+      theme={theme}
       loading="Initializing..."
       onChange={onChange}
       keepCurrentModel={true}
diff --git a/src/react/ui-elements/EmptyBucket/EmptyBucketSummaryList.tsx b/src/react/ui-elements/EmptyBucket/EmptyBucketSummaryList.tsx
index 4a5a5761d..8fee9b5be 100644
--- a/src/react/ui-elements/EmptyBucket/EmptyBucketSummaryList.tsx
+++ b/src/react/ui-elements/EmptyBucket/EmptyBucketSummaryList.tsx
@@ -48,8 +48,6 @@ const ErrorsTable = (messages: string[]) => {
             <Table.SingleSelectableContent
               rowHeight="h32"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
-              children={(rows) => <>{rows}</>}
             />
           </Table>
         </div>
@@ -132,8 +130,6 @@ export const EmptyBucketSummaryList = ({
           <Table.SingleSelectableContent
             rowHeight="h40"
             separationLineVariant="backgroundLevel1"
-            backgroundVariant="backgroundLevel3"
-            children={(rows) => <>{rows}</>}
           />
         </div>
       </Table>
diff --git a/src/react/ui-elements/EntityHeader.tsx b/src/react/ui-elements/EntityHeader.tsx
index ea2837113..802ad90ed 100644
--- a/src/react/ui-elements/EntityHeader.tsx
+++ b/src/react/ui-elements/EntityHeader.tsx
@@ -1,6 +1,5 @@
 import { TextBadge } from './TextBadge';
-import { spacing, Stack } from '@scality/core-ui';
-import { Box } from '@scality/core-ui/dist/next';
+import { Icon, Stack } from '@scality/core-ui';
 import styled from 'styled-components';
 import { fontSize } from '@scality/core-ui/dist/style/theme';
 type Props = {
@@ -9,35 +8,16 @@ type Props = {
   numInstance: number;
 };
 
-export const HeadIcon = styled.i`
-  display: flex;
-  color: ${(props) => props.theme.infoPrimary};
-  background-color: ${(props) => props.theme.backgroundLevel1};
-  border-radius: 100%;
-  border: ${spacing.f1} solid ${(props) => props.theme.infoPrimary};
-  width: 80px;
-  height: 80px;
-  text-align: center;
-  line-height: 80px;
-  vertical-align: middle;
-  margin-right: ${spacing.f8};
-  font-size: ${fontSize.larger};
-  align-items: center;
-  justify-content: center;
-`;
-
 export const HeadTitle = styled.div`
   display: flex;
   color: ${(props) => props.theme.textSecondary};
   font-size: ${fontSize.large};
   align-items: center;
 `;
-export default function Header({ icon, headTitle, numInstance }: Props) {
+export default function Header({ headTitle, numInstance }: Props) {
   return (
     <Stack>
-      <Box display="flex">
-        <HeadIcon>{icon}</HeadIcon>
-      </Box>
+      <Icon name="Account" size="2x" withWrapper />
       <HeadTitle>
         {headTitle}
         <TextBadge text={numInstance.toString()} variant="infoPrimary" />
diff --git a/src/react/ui-elements/Table.tsx b/src/react/ui-elements/Table.tsx
index 7e5a5d645..0a28da80e 100644
--- a/src/react/ui-elements/Table.tsx
+++ b/src/react/ui-elements/Table.tsx
@@ -1,15 +1,12 @@
 // @noflow
-import { fontSize, spacing } from '@scality/core-ui/dist/style/theme';
-import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
-import { spacing as nextSpacing } from '@scality/core-ui';
-import Input from './Input';
+import { fontSize } from '@scality/core-ui/dist/style/theme';
+
+import { spacing, SecondaryText, Wrap, SearchInput } from '@scality/core-ui';
+import { Box, Button, Input } from '@scality/core-ui/dist/next';
 import { Link } from 'react-router-dom';
-import React from 'react';
-import {
-  SearchInput as SearchInputCore,
-  SecondaryText,
-} from '@scality/core-ui';
+
 import styled from 'styled-components';
+import React from 'react';
 // TEMPLATE
 //
 // <Table>
@@ -30,17 +27,34 @@ import styled from 'styled-components';
 //         </T.Row>
 //     </T.Body>
 // </Table>
+type TableHeaderWrapperProps = {
+  search?: React.ReactNode;
+  actions?: React.ReactNode;
+};
+
+export const TableHeaderWrapper = ({
+  search,
+  actions,
+}: TableHeaderWrapperProps) => {
+  return (
+    <Wrap padding={spacing.r16}>
+      <Box>{search}</Box>
+      <Box gap="r16">{actions}</Box>
+    </Wrap>
+  );
+};
+
 export const Container = styled.div`
   display: flex;
   flex: 1;
-  margin-top: ${nextSpacing.r16};
+  margin-top: ${spacing.r16};
   width: 100%;
   height: 100%;
   flex-direction: column;
 `;
 // * table head
 export const Head = styled.thead`
-  border-bottom: ${spacing.sp1} solid ${(props) => props.theme.backgroundLevel1};
+  border-bottom: ${spacing.r1} solid ${(props) => props.theme.backgroundLevel1};
 `;
 export const HeadRow = styled.tr`
   align-items: center;
@@ -53,10 +67,10 @@ export const HeadRow = styled.tr`
 `;
 export const HeadCell = styled.th`
   text-align: left;
-  padding: ${spacing.sp16};
+  padding: ${spacing.r16};
 `;
 export const Icon = styled.i`
-  margin-left: ${spacing.sp4};
+  margin-left: ${spacing.r4};
 `;
 // * table body
 export const Body = styled.tbody`
@@ -68,7 +82,7 @@ export const BodyWindowing = styled.tbody`
   flex: 1;
 `;
 export const Row = styled(HeadRow)`
-  // it's better to use 1px instead of spacing.sp1, otherwise the border of some rows
+  // it's better to use 1px instead of spacing.r1, otherwise the border of some rows
   // can look different cause of subpixel positioning
   border-bottom: 1px solid ${(props) => props.theme.backgroundLevel1};
   &:hover {
@@ -76,7 +90,7 @@ export const Row = styled(HeadRow)`
   }
   cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
   box-sizing: border-box;
-  border-right: ${spacing.sp4} solid transparent;
+  border-right: ${spacing.r4} solid transparent;
 
   ${(
     //@ts-expect-error fix this when you are working on it
@@ -85,14 +99,14 @@ export const Row = styled(HeadRow)`
     isSelected &&
     `
         background-color: ${theme.highlight};
-        border-right: ${spacing.sp4} solid ${theme.selectedActive};
+        border-right: ${spacing.r4} solid ${theme.selectedActive};
     `}
 `;
 export const Cell = styled.td<{ shade?: boolean }>`
   vertical-align: middle;
   color: ${(props) =>
     props.shade ? props.theme.infoPrimary : props.theme.textPrimary};
-  padding: ${spacing.sp4} ${spacing.sp16} ${spacing.sp4} ${spacing.sp16};
+  padding: ${spacing.r4} ${spacing.r16} ${spacing.r4} ${spacing.r16};
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -122,8 +136,8 @@ export const CellA = styled.a`
 export const SearchContainer = styled.div`
   display: flex;
   justify-content: space-between;
-  padding-right: ${spacing.sp16};
-  padding-left: ${spacing.sp16};
+  padding-right: ${spacing.r16};
+  padding-left: ${spacing.r16};
 
   button {
     margin-left: auto;
@@ -133,14 +147,11 @@ export const Search = styled.div`
   display: flex;
   flex: 0 0 auto;
 `;
-export const SearchInput = styled(SearchInputCore)`
-  width: 100%;
-`;
 export const SearchMetadataContainer = styled.form<{ isHidden?: boolean }>`
   flex: 1 0 auto;
   display: flex;
   max-width: 600px;
-  margin-right: ${spacing.sp20};
+  margin-right: ${spacing.r20};
   visibility: ${(props) => (props.isHidden ? 'hidden' : 'visible')};
 `;
 export const SearchMetadataInputAndIcon = styled.div`
@@ -148,7 +159,7 @@ export const SearchMetadataInputAndIcon = styled.div`
   display: flex;
   flex-direction: row;
   flex: 1 0 auto;
-  margin-right: ${spacing.sp4};
+  margin-right: ${spacing.r4};
   align-items: center;
 `;
 export const ExtraButton = styled(Button)`
@@ -161,18 +172,18 @@ export const Actions = styled.div`
   text-align: right;
 `;
 export const ActionButton = styled(Button)`
-  margin-left: ${spacing.sp4};
+  margin-left: ${spacing.r4};
 `;
 export const InlineButton = styled(Button)`
-  height: ${spacing.sp24};
+  height: ${spacing.r24};
 `;
 export const AccountSelectorButton = styled(Button)<{ bigButton?: boolean }>`
-  height: ${(props) => (props.bigButton ? spacing.sp32 : spacing.sp24)};
+  height: ${(props) => (props.bigButton ? spacing.r32 : spacing.r24)};
 `;
 export const Title = styled.div`
   font-size: ${fontSize.larger};
   font-weight: bold;
-  margin: ${spacing.sp20} 0 ${spacing.sp20} 0;
+  margin: ${spacing.r20} 0 ${spacing.r20} 0;
 `;
 const Table = styled.table`
   display: flex;
@@ -184,8 +195,8 @@ const Table = styled.table`
 // specific to listobject/md search
 export const SearchMetadataInput = styled(Input)`
   background-color: ${(props) => props.theme.backgroundLevel1};
-  padding: 0px ${spacing.sp32};
-  max-height: ${spacing.sp32};
+  padding: 0px ${spacing.r32};
+  max-height: ${spacing.r32};
   box-sizing: border-box;
 `;
 export const ContainerWithSubHeader = styled(Container)`
@@ -229,25 +240,26 @@ export const SearchButton = styled(Button)`
 export const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
-  padding-left: ${spacing.sp16};
-  padding-right: ${spacing.sp16};
+  padding-left: ${spacing.r16};
+  padding-right: ${spacing.r16};
 `;
 export const ButtonContainer = styled.div`
   display: flex;
   flex: 0 0 auto;
 
   & > * {
-    margin-left: ${spacing.sp4};
+    margin-left: ${spacing.r4};
   }
 `;
 export const SubHeaderContainer = styled.div<{ isHidden?: boolean }>`
   visibility: ${(props) => (props.isHidden ? 'hidden' : 'visible')};
-  margin-left: ${spacing.sp4};
+  margin-left: ${spacing.r4};
 `;
 export const TableContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
+  padding: ${spacing.r16};
 `;
 export const GentleEmphaseSecondaryText = styled(SecondaryText)<{
   alignRight?: boolean;
diff --git a/src/react/ui-elements/TableKeyValue.ts b/src/react/ui-elements/TableKeyValue.ts
index a1c4ce763..da30d398f 100644
--- a/src/react/ui-elements/TableKeyValue.ts
+++ b/src/react/ui-elements/TableKeyValue.ts
@@ -1,4 +1,5 @@
-import { fontSize, spacing } from '@scality/core-ui/dist/style/theme';
+import { spacing } from '@scality/core-ui';
+import { fontSize } from '@scality/core-ui/dist/style/theme';
 import styled from 'styled-components';
 // TEMPLATE
 //
@@ -19,7 +20,7 @@ export const Body = styled.tbody``;
 export const Row = styled.tr``;
 export const Key = styled.td`
   white-space: nowrap;
-  padding: ${spacing.sp8} 0px;
+  padding: ${spacing.r8} 0px;
   color: ${(props) => props.theme.textSecondary};
 `;
 export const Value = styled.td`
@@ -32,16 +33,16 @@ export const Value = styled.td`
 export const Title = styled.div`
   font-size: ${fontSize.larger};
   font-weight: bold;
-  margin: ${spacing.sp20} 0 ${spacing.sp20} 0;
+  margin: ${spacing.r20} 0 ${spacing.r20} 0;
 `;
 export const ExtraCell = styled.td`
-  padding-left: ${spacing.sp20};
+  padding-left: ${spacing.r20};
   min-width: 40px;
 `;
 export const Container = styled.div`
   display: block;
   width: fit-content;
-  margin: ${spacing.sp16} 0 0 30px;
+  margin: ${spacing.r16} 0 0 30px;
 `;
 const Table = styled.table`
   max-width: 600px;
@@ -52,6 +53,6 @@ export const TitleRow = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: ${spacing.sp16};
+  padding: ${spacing.r16};
 `;
 export default Table;
diff --git a/src/react/ui-elements/Tabs.ts b/src/react/ui-elements/Tabs.ts
index 6940dafde..6e8eb1263 100644
--- a/src/react/ui-elements/Tabs.ts
+++ b/src/react/ui-elements/Tabs.ts
@@ -1,11 +1,11 @@
 import { Tabs } from '@scality/core-ui/dist/next';
-import { spacing } from '@scality/core-ui/dist/style/theme';
+
 import styled from 'styled-components';
 export const CustomTabs = styled(Tabs)`
   display: flex;
   flex: 1;
   .sc-tabs-item-content {
     overflow-y: auto;
-    padding: ${spacing.sp16};
+    overflow-x: scroll;
   }
 `;
diff --git a/src/react/ui-elements/Veeam/VeeamTable.tsx b/src/react/ui-elements/Veeam/VeeamTable.tsx
index 4f04b247b..78f71bdc9 100644
--- a/src/react/ui-elements/Veeam/VeeamTable.tsx
+++ b/src/react/ui-elements/Veeam/VeeamTable.tsx
@@ -156,7 +156,6 @@ export default function VeeamTable(propsConfiguration: VeeamTableProps) {
             <Table.SingleSelectableContent
               rowHeight="h32"
               separationLineVariant="backgroundLevel3"
-              backgroundVariant="backgroundLevel1"
               children={(Rows) => {
                 return <>{Rows}</>;
               }}
diff --git a/src/react/ui-elements/Warning.tsx b/src/react/ui-elements/Warning.tsx
index 1437e5aa9..2f50631af 100644
--- a/src/react/ui-elements/Warning.tsx
+++ b/src/react/ui-elements/Warning.tsx
@@ -1,41 +1,33 @@
 import styled, { css } from 'styled-components';
-import { Box, Button } from '@scality/core-ui/dist/next';
-import { spacing } from '@scality/core-ui/dist/style/theme';
+import { Button } from '@scality/core-ui/dist/next';
+import { spacing } from '@scality/core-ui';
 import { ReactNode } from 'react';
-import { Icon } from '@scality/core-ui';
-import { HeadIcon } from './EntityHeader';
+import { Icon, LargeText } from '@scality/core-ui';
+
 const Container = styled.div<{ centered?: boolean }>`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  text-align: center;
-  margin-top: ${spacing.sp20};
-  color: ${(props) => props.theme.textPrimary};
   ${(props) => {
-    if (props.centered) {
-      return css`
-        justify-content: center;
-      `;
-    }
-
     return css`
-      margin-top: ${spacing.sp20};
+      color: ${props.theme.textSecondary};
     `;
   }}
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  text-align: ${(props) => (props.centered ? 'center' : 'left')};
 `;
 const Container2 = styled.div`
   text-align: center;
-  margin: ${spacing.sp32} 0px;
+  margin: ${spacing.r32} 0px;
   color: ${(props) => props.theme.textPrimary};
 `;
 const Title = styled.div`
-  margin-top: ${spacing.sp8};
+  margin-top: ${spacing.r8};
 `;
 const Description = styled.div`
-  margin-top: ${spacing.sp8};
+  margin-top: ${spacing.r8};
 `;
 const ButtonSection = styled.div`
-  margin-top: ${spacing.sp16};
+  margin-top: ${spacing.r16};
 `;
 type WarningProps = {
   icon?: ReactNode;
@@ -95,32 +87,34 @@ export const NoLocationWarning = () => (
   </Container2>
 );
 
+export const EmptyStateRow = styled.div`
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: ${spacing.r24};
+`;
+export const ActionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${spacing.r8};
+`;
 export const NoAccountWarning = ({
   buttonSection,
 }: {
   buttonSection: ReactNode;
 }) => (
-  <Container centered>
-    <Box
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      padding={16}
-    >
-      <HeadIcon>
-        <Icon name="Account" />
-      </HeadIcon>
-    </Box>
-    <Title>
-      <Box padding={16}>
-        <b>You don't have any account yet.</b>
-        <br />
-        <br />
-        <b>
-          Launch configuration assistant to create resources needed by Veeam.
-        </b>
-      </Box>
-    </Title>
-    <ButtonSection>{buttonSection}</ButtonSection>
+  <Container style={{ justifyContent: 'center' }}>
+    <EmptyStateRow>
+      <Icon name="Account" size="5x" withWrapper />
+    </EmptyStateRow>
+    <EmptyStateRow>
+      <LargeText>You don't have any account yet.</LargeText>
+    </EmptyStateRow>
+    <EmptyStateRow>
+      <LargeText>
+        Launch configuration assitant to create resources needed by Veeam.
+      </LargeText>
+    </EmptyStateRow>
+    <ActionWrapper>{buttonSection}</ActionWrapper>
   </Container>
 );
diff --git a/src/react/workflow/ConfigurationTab.tsx b/src/react/workflow/ConfigurationTab.tsx
index a1342e1ce..25dc3ce66 100644
--- a/src/react/workflow/ConfigurationTab.tsx
+++ b/src/react/workflow/ConfigurationTab.tsx
@@ -7,7 +7,6 @@ import {
   spacing,
   Stack,
 } from '@scality/core-ui';
-import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
 import { useEffect, useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
@@ -19,10 +18,9 @@ import {
   networkEnd,
   networkStart,
 } from '../actions';
-import * as T from '../ui-elements/TableKeyValue2';
-
 import Joi from '@hapi/joi';
 import { joiResolver } from '@hookform/resolvers/joi';
+import { Box, Button } from '@scality/core-ui/dist/next';
 import { convertRemToPixels } from '@scality/core-ui/dist/utils';
 import { useMutation, useQueryClient } from 'react-query';
 import {
@@ -580,21 +578,19 @@ function EditForm({
   };
 
   return (
-    <>
+    <Box style={{ padding: spacing.r16 }}>
       <FormProvider {...useFormMethods}>
         <Form
           requireMode="all"
           banner={
             formState.isDirty && (
-              <T.BannerContainer>
-                <Banner
-                  icon={<Icon name="Exclamation-triangle" />}
-                  variant="warning"
-                >
-                  If you leave this screen without saving, your changes will be
-                  lost.
-                </Banner>
-              </T.BannerContainer>
+              <Banner
+                icon={<Icon name="Exclamation-triangle" />}
+                variant="warning"
+              >
+                If you leave this screen without saving, your changes will be
+                lost.
+              </Banner>
             )
           }
           layout={{ kind: 'tab' }}
@@ -668,7 +664,7 @@ function EditForm({
           )}
         </Form>
       </FormProvider>
-    </>
+    </Box>
   );
 }
 
diff --git a/src/react/workflow/WorkflowList.tsx b/src/react/workflow/WorkflowList.tsx
index 2ae3eae18..012d7a1d6 100644
--- a/src/react/workflow/WorkflowList.tsx
+++ b/src/react/workflow/WorkflowList.tsx
@@ -1,15 +1,13 @@
+import { ConstrainedText, Icon } from '@scality/core-ui';
+import { Button, Table } from '@scality/core-ui/dist/next';
 import { useCallback } from 'react';
-import { TextTransformer } from '../ui-elements/Utility';
-import type { Workflows } from '../../types/workflow';
 import { useHistory } from 'react-router-dom';
-import { Table } from '@scality/core-ui/dist/components/tablev2/Tablev2.component';
-import { Workflow } from '../../types/workflow';
-import { Button } from '@scality/core-ui/dist/components/buttonv2/Buttonv2.component';
-import { TitleRow as TableHeader } from '../ui-elements/TableKeyValue';
-import { useTheme } from 'styled-components';
-import { Icon } from '@scality/core-ui/dist/components/icon/Icon.component';
 import { CoreUIColumn, Row } from 'react-table';
-import { ConstrainedText } from '@scality/core-ui';
+import { useTheme } from 'styled-components';
+import type { Workflows } from '../../types/workflow';
+import { Workflow } from '../../types/workflow';
+import { TableHeaderWrapper } from '../ui-elements/Table';
+import { TextTransformer } from '../ui-elements/Utility';
 
 const SEARCH_QUERY_PARAM = 'search';
 export function WorkflowTypeIcon({ value: type }: { value: string }) {
@@ -66,7 +64,7 @@ function WorkflowList({ workflows, workflowId }: Props) {
       cellStyle: {
         textAlign: 'left',
         flex: '3',
-        marginLeft: '1rem',
+        width: 'unset',
       },
       Cell: renderRowSubComponent,
     },
@@ -76,7 +74,7 @@ function WorkflowList({ workflows, workflowId }: Props) {
       cellStyle: {
         textAlign: 'left',
         flex: '1',
-        marginLeft: '3rem',
+        width: 'unset',
       },
       Cell: WorkflowTypeIcon,
     },
@@ -86,7 +84,7 @@ function WorkflowList({ workflows, workflowId }: Props) {
       cellStyle: {
         textAlign: 'left',
         flex: '0.5',
-        marginLeft: '1rem',
+        width: 'unset',
       },
       sortType: (row1: Row<Workflow>, row2: Row<Workflow>) => {
         return `${row1.original.state}` < `${row2.original.state}` ? 1 : -1;
@@ -109,17 +107,18 @@ function WorkflowList({ workflows, workflowId }: Props) {
         data={workflows}
         defaultSortingKey={'name'}
         getRowId={getRowId}
+        entityName={{
+          en: {
+            singular: 'workflow',
+            plural: 'workflows',
+          },
+        }}
       >
-        <div style={{ margin: '1rem' }}>
-          <TableHeader>
-            <Table.SearchWithQueryParams
-              displayedName={{
-                singular: 'workflow',
-                plural: 'workflows',
-              }}
-              queryParams={SEARCH_QUERY_PARAM}
-            />
-
+        <TableHeaderWrapper
+          search={
+            <Table.SearchWithQueryParams queryParams={SEARCH_QUERY_PARAM} />
+          }
+          actions={
             <Button
               icon={<Icon name="Create-add" />}
               label="Create Workflow"
@@ -127,12 +126,12 @@ function WorkflowList({ workflows, workflowId }: Props) {
               onClick={() => history.push('./create-workflow')}
               type="submit"
             />
-          </TableHeader>
-        </div>
+          }
+        />
+
         <Table.SingleSelectableContent
           rowHeight="h64"
           separationLineVariant="backgroundLevel1"
-          backgroundVariant="backgroundLevel3"
           selectedId={workflowId}
           onRowSelected={(selectedRow: Row<Workflow>) =>
             history.push(`./${selectedRow.original.id}`)
diff --git a/src/react/workflow/Workflows.tsx b/src/react/workflow/Workflows.tsx
index f79977d35..35d3dd39c 100644
--- a/src/react/workflow/Workflows.tsx
+++ b/src/react/workflow/Workflows.tsx
@@ -1,15 +1,17 @@
 import {
   AppContainer,
+  EmptyState,
   Icon,
   Stack,
   Text,
   TwoPanelLayout,
   Wrap,
+  Loader,
 } from '@scality/core-ui';
 import { useEffect } from 'react';
 import { UseQueryResult, useQuery } from 'react-query';
 import { useDispatch } from 'react-redux';
-import { Redirect, useHistory, useLocation, useParams } from 'react-router-dom';
+import { Redirect, useLocation, useParams } from 'react-router-dom';
 import {
   BucketWorkflowExpirationV1,
   BucketWorkflowTransitionV2,
@@ -30,9 +32,7 @@ import { useInstanceId } from '../next-architecture/ui/AuthProvider';
 import { useMetricsAdapter } from '../next-architecture/ui/MetricsAdapterProvider';
 import { makeWorkflows, workflowListQuery } from '../queries';
 import { Breadcrumb } from '../ui-elements/Breadcrumb';
-import { EmptyStateContainer } from '../ui-elements/Container';
-import Loader from '../ui-elements/Loader';
-import { Warning } from '../ui-elements/Warning';
+
 import { useAccounts, useRolePathName } from '../utils/hooks';
 import WorkflowContent from './WorkflowContent';
 import WorkflowList from './WorkflowList';
@@ -116,7 +116,6 @@ export function useWorkflows(filters?: Filter): UseQueryResult<
 }
 
 export default function Workflows() {
-  const history = useHistory();
   const params = useParams<{
     workflowId?: string;
   }>();
@@ -133,41 +132,36 @@ export default function Workflows() {
   const workflows = workflowListDataQuery.data ?? [];
   const isWorkflowsReady = workflowListDataQuery.data !== undefined;
   const noWorkflows = workflowListDataQuery?.data?.length === 0;
-
+  const listedResource = {
+    singular: 'Workflow',
+    plural: 'Workflows',
+  };
   if (accounts.length === 0) {
     return (
-      <EmptyStateContainer>
-        <Warning
-          centered={true}
-          icon={<Icon name="Account" size="5x" />}
-          title="Before browsing your workflows, create your first account."
-          btnTitle="Create Account"
-          btnAction={() => history.push('/create-account')}
-        />
-      </EmptyStateContainer>
+      <EmptyState
+        icon="Workflow"
+        link="/create-account"
+        listedResource={listedResource}
+        resourceToCreate="Account"
+      ></EmptyState>
     );
   }
 
   const content = () => {
     if (buckets.status === 'success' && buckets.value.length === 0) {
       return (
-        <EmptyStateContainer>
-          <Warning
-            centered={true}
-            icon={<Icon name="Bucket" size="5x" />}
-            title="Before browsing your workflows, create your first bucket."
-            btnTitle="Create Bucket"
-            btnAction={() =>
-              history.push(`/accounts/${accountName}/create-bucket`)
-            }
-          />
-        </EmptyStateContainer>
+        <EmptyState
+          icon="Bucket"
+          link={`/accounts/${accountName}/create-bucket`}
+          listedResource={listedResource}
+          resourceToCreate="Bucket"
+        ></EmptyState>
       );
     }
 
     if (!isWorkflowsReady) {
       return (
-        <Loader>
+        <Loader size="massive" centered>
           <div>Loading workflows</div>
         </Loader>
       );
@@ -191,17 +185,11 @@ export default function Workflows() {
 
     if (workflows.length === 0) {
       return (
-        <EmptyStateContainer>
-          <Warning
-            centered={true}
-            icon={<Icon name="Replication" size="5x" />}
-            title="Before browsing your workflows, create your first workflow."
-            btnTitle="Create Workflow"
-            btnAction={() =>
-              history.push(`/accounts/${accountName}/workflows/create-workflow`)
-            }
-          />
-        </EmptyStateContainer>
+        <EmptyState
+          icon="Workflow"
+          link={`/accounts/${accountName}/workflows/create-workflow`}
+          listedResource={listedResource}
+        ></EmptyState>
       );
     }