diff --git a/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts b/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
index 8cbb17dcfa7..0de7b7042bd 100644
--- a/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/dashboard/horizontalFilterBar.test.ts
@@ -155,7 +155,7 @@ describe('Horizontal FilterBar', () => {
     ]);
     setFilterBarOrientation('horizontal');
 
-    cy.get('.filter-item-wrapper').should('have.length', 3);
+    cy.get('.filter-item-wrapper').should('have.length', 4);
     openMoreFilters();
     cy.getBySel('form-item-value').should('have.length', 12);
     cy.getBySel('filter-control-name').contains('test_3').should('be.visible');
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Badge/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/Badge/index.tsx
index 16350bfbd91..b20a05e8224 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Badge/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Badge/index.tsx
@@ -24,6 +24,7 @@ export const Badge = styled((props: BadgeProps) => <AntdBadge {...props} />)`
   ${({ theme, color, count }) => `
     & > sup,
     & > sup.ant-badge-count {
+      box-shadow: none;
       ${
         count !== undefined ? `background: ${color || theme.colorPrimary};` : ''
       }
diff --git a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/index.tsx
index 7fab3e498cc..fc4f1526947 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/index.tsx
@@ -17,10 +17,8 @@
  * under the License.
  */
 import {
-  CSSProperties,
   cloneElement,
   forwardRef,
-  ReactElement,
   RefObject,
   useEffect,
   useImperativeHandle,
@@ -28,7 +26,6 @@ import {
   useMemo,
   useState,
   useRef,
-  ReactNode,
   useCallback,
 } from 'react';
 
@@ -36,77 +33,7 @@ import { Global } from '@emotion/react';
 import { css, t, useTheme, usePrevious } from '@superset-ui/core';
 import { useResizeDetector } from 'react-resize-detector';
 import { Badge, Icons, Button, Tooltip, Popover } from '..';
-/**
- * Container item.
- */
-export interface DropdownItem {
-  /**
-   * String that uniquely identifies the item.
-   */
-  id: string;
-  /**
-   * The element to be rendered.
-   */
-  element: ReactElement;
-}
-
-/**
- * Horizontal container that displays overflowed items in a dropdown.
- * It shows an indicator of how many items are currently overflowing.
- */
-export interface DropdownContainerProps {
-  /**
-   * Array of items. The id property is used to uniquely identify
-   * the elements when rendering or dealing with event handlers.
-   */
-  items: DropdownItem[];
-  /**
-   * Event handler called every time an element moves between
-   * main container and dropdown.
-   */
-  onOverflowingStateChange?: (overflowingState: {
-    notOverflowed: string[];
-    overflowed: string[];
-  }) => void;
-  /**
-   * Option to customize the content of the dropdown.
-   */
-  dropdownContent?: (overflowedItems: DropdownItem[]) => ReactElement;
-  /**
-   * Dropdown ref.
-   */
-  dropdownRef?: RefObject<HTMLDivElement>;
-  /**
-   * Dropdown additional style properties.
-   */
-  dropdownStyle?: CSSProperties;
-  /**
-   * Displayed count in the dropdown trigger.
-   */
-  dropdownTriggerCount?: number;
-  /**
-   * Icon of the dropdown trigger.
-   */
-  dropdownTriggerIcon?: ReactElement;
-  /**
-   * Text of the dropdown trigger.
-   */
-  dropdownTriggerText?: string;
-  /**
-   * Text of the dropdown trigger tooltip
-   */
-  dropdownTriggerTooltip?: ReactNode | null;
-  /**
-   * Main container additional style properties.
-   */
-  style?: CSSProperties;
-  /**
-   * Force render popover content before it's first opened
-   */
-  forceRender?: boolean;
-}
-
-export type DropdownRef = HTMLDivElement & { open: () => void };
+import { DropdownContainerProps, DropdownItem, DropdownRef } from './types';
 
 const MAX_HEIGHT = 500;
 
@@ -428,8 +355,13 @@ export const DropdownContainer = forwardRef(
                 <Button
                   buttonStyle="secondary"
                   data-test="dropdown-container-btn"
+                  icon={dropdownTriggerIcon}
+                  css={css`
+                    padding-left: ${theme.paddingXS}px;
+                    padding-right: ${theme.paddingXXS}px;
+                    gap: ${theme.sizeXXS}px;
+                  `}
                 >
-                  {dropdownTriggerIcon}
                   {dropdownTriggerText}
                   <Badge
                     count={dropdownTriggerCount ?? overflowingCount}
@@ -461,3 +393,5 @@ export const DropdownContainer = forwardRef(
     );
   },
 );
+
+export { DropdownItem, DropdownContainerProps, DropdownRef } from './types';
diff --git a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts
index ea2c33050ea..a7150ffabf9 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts
+++ b/superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 import type { CSSProperties, ReactElement, RefObject, ReactNode } from 'react';
+import { IconType } from '../Icons';
 
 /**
  * Container item.
@@ -69,7 +70,7 @@ export interface DropdownContainerProps {
   /**
    * Icon of the dropdown trigger.
    */
-  dropdownTriggerIcon?: ReactElement;
+  dropdownTriggerIcon?: IconType;
   /**
    * Text of the dropdown trigger.
    */
diff --git a/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx b/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx
index f5601fbd801..1dd1964607c 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Select/styles.tsx
@@ -32,8 +32,9 @@ export const StyledHeader = styled.span<{ headerPosition: string }>`
 `;
 
 export const StyledContainer = styled.div<{ headerPosition: string }>`
-  ${({ headerPosition }) => `
+  ${({ headerPosition, theme }) => `
     display: flex;
+    gap: ${theme.sizeUnit}px;
     flex-direction: ${headerPosition === 'top' ? 'column' : 'row'};
     align-items: ${headerPosition === 'left' ? 'center' : undefined};
     width: 100%;
diff --git a/superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx
index e5c0fa0514c..27861e9115b 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx
@@ -52,7 +52,9 @@ interface TableCollectionProps<T extends object> {
 const StyledTable = styled(Table)`
   ${({ theme }) => `
     th.ant-column-cell {
-      min-width: fit-content;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     .actions {
       opacity: 0;
@@ -83,7 +85,6 @@ const StyledTable = styled(Table)`
       font-feature-settings: 'tnum' 1;
       text-overflow: ellipsis;
       overflow: hidden;
-      max-width: 320px;
       line-height: 1;
       vertical-align: middle;
       padding-left: ${theme.sizeUnit * 4}px;
@@ -149,7 +150,7 @@ function TableCollection<T extends object>({
       size={size}
       data-test="listview-table"
       pagination={false}
-      tableLayout="auto"
+      tableLayout="fixed"
       rowKey="rowId"
       rowSelection={rowSelection}
       locale={{ emptyText: null }}
diff --git a/superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx b/superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx
index 0cbf1175d06..b0e31e381b5 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx
@@ -94,7 +94,7 @@ export function mapColumns<T extends object>(
       dataIndex: column.id?.includes('.') ? column.id.split('.') : column.id,
       hidden: column.hidden,
       key: column.id,
-      minWidth: column.size ? COLUMN_SIZE_MAP[column.size] : COLUMN_SIZE_MAP.md,
+      width: column.size ? COLUMN_SIZE_MAP[column.size] : COLUMN_SIZE_MAP.md,
       ellipsis: !columnsForWrapText?.includes(column.id),
       defaultSortOrder: (isSorted
         ? isSortedDesc
diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
index 242e6bbf19f..cc1103699bc 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx
@@ -21,7 +21,7 @@ import { useMemo, FC, ReactElement } from 'react';
 import { t, styled, useTheme, SupersetTheme } from '@superset-ui/core';
 
 import { Button, DropdownButton } from '@superset-ui/core/components';
-import { Icons } from '@superset-ui/core/components/Icons';
+import { IconType, Icons } from '@superset-ui/core/components/Icons';
 import { detectOS } from 'src/utils/common';
 import { QueryButtonProps } from 'src/SqlLab/types';
 import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
@@ -40,23 +40,24 @@ export interface RunQueryActionButtonProps {
   overlayCreateAsMenu: ReactElement | null;
 }
 
-const buildText = (
+const buildTextAndIcon = (
   shouldShowStopButton: boolean,
   selectedText: string | undefined,
   theme: SupersetTheme,
-): string | JSX.Element => {
-  if (shouldShowStopButton) {
-    return (
-      <>
-        <Icons.Square iconSize="xs" iconColor={theme.colorIcon} />
-        {t('Stop')}
-      </>
-    );
-  }
+): { text: string; icon?: IconType } => {
+  let text = t('Run');
+  let icon: IconType | undefined;
   if (selectedText) {
-    return t('Run selection');
+    text = t('Run selection');
   }
-  return t('Run');
+  if (shouldShowStopButton) {
+    text = t('Stop');
+    icon = <Icons.Square iconSize="xs" iconColor={theme.colorIcon} />;
+  }
+  return {
+    text,
+    icon,
+  };
 };
 
 const onClick = (
@@ -130,6 +131,11 @@ const RunQueryActionButton = ({
     [userOS],
   );
 
+  const { text, icon } = useMemo(
+    () => buildTextAndIcon(shouldShowStopBtn, selectedText, theme),
+    [shouldShowStopBtn, selectedText, theme],
+  );
+
   return (
     <StyledButton>
       <ButtonComponent
@@ -159,9 +165,10 @@ const RunQueryActionButton = ({
             }
           : {
               buttonStyle: shouldShowStopBtn ? 'danger' : 'primary',
+              icon,
             })}
       >
-        {buildText(shouldShowStopBtn, selectedText, theme)}
+        {text}
       </ButtonComponent>
     </StyledButton>
   );
diff --git a/superset-frontend/src/components/Datasource/Field.tsx b/superset-frontend/src/components/Datasource/Field.tsx
index a70e7c64def..c663d50ae80 100644
--- a/superset-frontend/src/components/Datasource/Field.tsx
+++ b/superset-frontend/src/components/Datasource/Field.tsx
@@ -26,12 +26,6 @@ import {
   FormLabel,
 } from '@superset-ui/core/components';
 
-const formItemInlineCss = css`
-  .ant-form-item-control-input-content {
-    display: flex;
-    flex-direction: row;
-  }
-`;
 interface FieldProps<V> {
   fieldKey: string;
   value?: V;
@@ -64,10 +58,6 @@ export default function Field<V>({
     [onChange, fieldKey],
   );
 
-  const hookedControl = cloneElement(control, {
-    value,
-    onChange: onControlChange,
-  });
   const theme = useTheme();
   const extra = !compact && description ? description : undefined;
   const infoTooltip =
@@ -83,13 +73,24 @@ export default function Field<V>({
         <Icons.InfoCircleOutlined
           iconSize="s"
           css={css`
-            margin-left: ${theme.sizeUnit}px;
+            margin-left: ${theme.marginXXS}px;
           `}
           iconColor={theme.colorTextTertiary}
         />
       </Tooltip>
     ) : undefined;
 
+  const hookedControl = cloneElement(control, {
+    value,
+    onChange: onControlChange,
+    label: (
+      <FormLabel>
+        {label || fieldKey}
+        {infoTooltip}
+      </FormLabel>
+    ),
+  });
+
   return (
     <div
       css={
@@ -101,14 +102,15 @@ export default function Field<V>({
     >
       {additionalControl}
       <FormItem
-        label={
-          <FormLabel>
-            {label || fieldKey}
-            {infoTooltip}
-          </FormLabel>
-        }
-        css={inline && formItemInlineCss}
         extra={extra}
+        css={
+          !inline &&
+          css`
+            .ControlHeader {
+              margin-bottom: ${theme.marginXXS}px;
+            }
+          `
+        }
       >
         {hookedControl}
       </FormItem>
@@ -116,7 +118,7 @@ export default function Field<V>({
         <div
           css={(theme: SupersetTheme) => ({
             color: theme.colorText,
-            [inline ? 'marginLeft' : 'marginTop']: theme.sizeUnit,
+            [inline ? 'marginLeft' : 'marginTop']: theme.marginXXS,
           })}
         >
           {errorMessage}
diff --git a/superset-frontend/src/components/Datasource/Fieldset.tsx b/superset-frontend/src/components/Datasource/Fieldset.tsx
index cf1efd4434d..cbe6413e119 100644
--- a/superset-frontend/src/components/Datasource/Fieldset.tsx
+++ b/superset-frontend/src/components/Datasource/Fieldset.tsx
@@ -18,6 +18,7 @@
  */
 import { ReactNode, useCallback } from 'react';
 import { Divider, Form, Typography } from '@superset-ui/core/components';
+import { css } from '@superset-ui/core';
 import { recurseReactClone } from './utils';
 import Field from './Field';
 
@@ -57,7 +58,12 @@ export default function Fieldset({
   return (
     <Form className="CRUD" layout="vertical">
       {title && (
-        <Typography.Title level={5}>
+        <Typography.Title
+          level={5}
+          css={css`
+            margin-top: 0.5em;
+          `}
+        >
           {title} <Divider />
         </Typography.Title>
       )}
diff --git a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
index 1cd2dbfa766..8581c69c25c 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
@@ -81,14 +81,6 @@ const defaultProps = {
 const DragDroppableStyles = styled.div`
   ${({ theme }) => css`
     position: relative;
-    /*
-      Next line is a workaround for a bug in react-dnd where the drag
-      preview expands outside of the bounds of the drag source card, see:
-      https://github.com/react-dnd/react-dnd/issues/832#issuecomment-442071628
-    */
-    &.dragdroppable--edit-mode {
-      transform: translate3d(0, 0, 0);
-    }
 
     &.dragdroppable--dragging {
       opacity: 0.2;
diff --git a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
index a9418bbe441..47793e647c9 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
@@ -45,7 +45,7 @@ export default function DragHandle({
 }: DragHandleProps) {
   return (
     <DragHandleContainer ref={innerRef} position={position}>
-      <Icons.Drag />
+      <Icons.Drag iconSize="xl" />
     </DragHandleContainer>
   );
 }
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx
index 533b6c4bb1e..bb8aa83cfc0 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx
@@ -18,7 +18,7 @@
  */
 import { RefObject } from 'react';
 import { useDrag } from 'react-dnd';
-import { css, Metric, styled } from '@superset-ui/core';
+import { css, Metric, styled, useTheme } from '@superset-ui/core';
 import { ColumnMeta } from '@superset-ui/chart-controls';
 import { DndItemType } from 'src/explore/components/DndItemType';
 import {
@@ -68,6 +68,7 @@ export default function DatasourcePanelDragOption(
   props: DatasourcePanelDragOptionProps,
 ) {
   const { labelRef, showTooltip, type, value } = props;
+  const theme = useTheme();
   const [{ isDragging }, drag] = useDrag({
     item: {
       value: props.value,
@@ -91,7 +92,15 @@ export default function DatasourcePanelDragOption(
       ) : (
         <StyledMetricOption metric={value as MetricOption} {...optionProps} />
       )}
-      <Icons.Drag />
+      <Icons.Drag
+        iconSize="xl"
+        css={css`
+          color: ${theme.colorFill};
+          &hover {
+            color: ${theme.colorIcon};
+          }
+        `}
+      />
     </DatasourceItemContainer>
   );
 }
diff --git a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
index b6d5174b616..68ec8cf76de 100644
--- a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
@@ -40,7 +40,7 @@ const LeftPanelStyle = styled.div`
   ${({ theme }) => `
     padding: ${theme.sizeUnit * 4}px;
     height: 100%;
-    background-color: ${theme.colors.grayscale.light5};
+    background-color: ${theme.colorBgContainer};
     position: relative;
     .emptystate {
       height: auto;
diff --git a/superset-frontend/src/features/datasets/styles.ts b/superset-frontend/src/features/datasets/styles.ts
index 32b03dc92f1..1564dbe7a27 100644
--- a/superset-frontend/src/features/datasets/styles.ts
+++ b/superset-frontend/src/features/datasets/styles.ts
@@ -22,7 +22,7 @@ export const StyledLayoutWrapper = styled.div`
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  background-color: ${({ theme }) => theme.colors.grayscale.light5};
+  background-color: ${({ theme }) => theme.colorBgContainer};
 `;
 
 export const LeftColumn = styled.div<{ width?: number }>`
@@ -64,8 +64,10 @@ export const FooterRow = styled(Row)`
 export const StyledLayoutHeader = styled.div`
   ${({ theme }) => `
   flex: 0 0 auto;
+  display: flex;
+  align-items: center;
   height: ${theme.sizeUnit * 16}px;
-  border-bottom: 2px solid ${theme.colors.grayscale.light2};
+  border-bottom: 1px solid ${theme.colorBorder};
 
   .header-with-actions {
     height: ${theme.sizeUnit * 15.5}px;
@@ -112,7 +114,7 @@ export const StyledLayoutFooter = styled.div`
   padding: ${theme.sizeUnit * 4}px;
   display: flex;
   justify-content: flex-end;
-  background-color: ${theme.colors.grayscale.light5};
+  background-color: ${theme.colorBgContainer};
   z-index: ${theme.zIndexPopupBase}
   `}
 `;
diff --git a/superset-frontend/src/features/tags/TagModal.tsx b/superset-frontend/src/features/tags/TagModal.tsx
index fad0ce2699d..59ab8ee1b5c 100644
--- a/superset-frontend/src/features/tags/TagModal.tsx
+++ b/superset-frontend/src/features/tags/TagModal.tsx
@@ -23,11 +23,12 @@ import {
   AsyncSelect,
   Button,
   Divider,
+  Flex,
   FormLabel,
   Input,
   Modal,
 } from '@superset-ui/core/components';
-import { t, styled, SupersetClient } from '@superset-ui/core';
+import { t, styled, SupersetClient, useTheme } from '@superset-ui/core';
 import { Tag } from 'src/views/CRUD/types';
 import { fetchObjectsByTagIds } from 'src/features/tags/tags';
 import { ModalTitleWithIcon } from 'src/components/ModalTitleWithIcon';
@@ -82,6 +83,7 @@ const TagModal: FC<TagModalProps> = ({
 
   const [tagName, setTagName] = useState<string>('');
   const [description, setDescription] = useState<string>('');
+  const theme = useTheme();
 
   const isEditMode = !!editTag;
 
@@ -296,20 +298,26 @@ const TagModal: FC<TagModalProps> = ({
       }
     >
       <StyledModalBody>
-        <FormLabel>{t('Tag name')}</FormLabel>
-        <Input
-          className="tag-input"
-          onChange={handleTagNameChange}
-          placeholder={t('Name of your tag')}
-          value={tagName}
-        />
-        <FormLabel>{t('Description')}</FormLabel>
-        <Input
-          className="tag-input"
-          onChange={handleDescriptionChange}
-          placeholder={t('Add description of your tag')}
-          value={description}
-        />
+        <Flex vertical gap={theme.sizeUnit}>
+          <FormLabel htmlFor="tag-name">{t('Tag name')}</FormLabel>
+          <Input
+            id="tag-name"
+            className="tag-input"
+            onChange={handleTagNameChange}
+            placeholder={t('Name of your tag')}
+            value={tagName}
+          />
+        </Flex>
+
+        <Flex vertical gap={theme.sizeUnit}>
+          <FormLabel>{t('Description')}</FormLabel>
+          <Input
+            className="tag-input"
+            onChange={handleDescriptionChange}
+            placeholder={t('Add description of your tag')}
+            value={description}
+          />
+        </Flex>
         <Divider />
         <AsyncSelect
           className="tag-input"
diff --git a/superset-frontend/src/pages/AlertReportList/index.tsx b/superset-frontend/src/pages/AlertReportList/index.tsx
index b8fbe1199dc..c77433e1f5e 100644
--- a/superset-frontend/src/pages/AlertReportList/index.tsx
+++ b/superset-frontend/src/pages/AlertReportList/index.tsx
@@ -284,7 +284,7 @@ function AlertList({
       {
         accessor: 'name',
         Header: t('Name'),
-        size: 'xl',
+        size: 'xxl',
         id: 'name',
       },
       {
@@ -317,7 +317,7 @@ function AlertList({
         accessor: 'recipients',
         Header: t('Notification method'),
         disableSortBy: true,
-        size: 'xl',
+        size: 'lg',
         id: 'recipients',
       },
       {
@@ -364,7 +364,7 @@ function AlertList({
         Header: t('Active'),
         accessor: 'active',
         id: 'active',
-        size: 'xl',
+        size: 'sm',
       },
       {
         Cell: ({ row: { original } }: any) => {
@@ -416,7 +416,7 @@ function AlertList({
         id: 'actions',
         hidden: !canEdit && !canDelete,
         disableSortBy: true,
-        size: 'xl',
+        size: 'lg',
       },
       {
         accessor: QueryObjectColumns.ChangedBy,
diff --git a/superset-frontend/src/pages/AnnotationLayerList/index.tsx b/superset-frontend/src/pages/AnnotationLayerList/index.tsx
index 3fa81873baa..6a177a64f39 100644
--- a/superset-frontend/src/pages/AnnotationLayerList/index.tsx
+++ b/superset-frontend/src/pages/AnnotationLayerList/index.tsx
@@ -158,11 +158,13 @@ function AnnotationLayersList({
             </Typography.Link>
           );
         },
+        size: 'xxl',
         id: 'name',
       },
       {
         accessor: 'descr',
         Header: t('Description'),
+        size: 'xl',
         id: 'descr',
       },
       {
diff --git a/superset-frontend/src/pages/AnnotationList/index.tsx b/superset-frontend/src/pages/AnnotationList/index.tsx
index 309f12959e4..ddef673774e 100644
--- a/superset-frontend/src/pages/AnnotationList/index.tsx
+++ b/superset-frontend/src/pages/AnnotationList/index.tsx
@@ -165,6 +165,7 @@ function AnnotationList({
       {
         accessor: 'short_descr',
         Header: t('Name'),
+        size: 'xxl',
         id: 'short_descr',
       },
       {
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
index 10740dbe1f2..34eaee7ec06 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -78,19 +78,19 @@ const StyledContainer = styled.div`
     background-color: ${theme.colorBgContainer};
     margin-left: auto;
     margin-right: auto;
-    padding-left: ${theme.sizeUnit * 4}px;
-    padding-right: ${theme.sizeUnit * 4}px;
-    padding-bottom: ${theme.sizeUnit * 4}px;
+    padding-left: ${theme.padding}px;
+    padding-right: ${theme.padding}px;
+    padding-bottom: ${theme.padding}px;
 
     h3 {
-      padding-bottom: ${theme.sizeUnit * 3}px;
+      padding-bottom: ${theme.paddingSM}px;
     }
 
     & .dataset {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-bottom: ${theme.sizeUnit * 5}px;
+      margin-bottom: ${theme.marginMD}px;
 
       & > div {
         min-width: 200px;
@@ -99,14 +99,14 @@ const StyledContainer = styled.div`
 
       & > span {
         color: ${theme.colorText};
-        margin-left: ${theme.sizeUnit * 4}px;
+        margin-left: ${theme.margin}px;
       }
     }
 
     & .viz-gallery {
       border: 1px solid ${theme.colorBorder};
       border-radius: ${theme.borderRadius}px;
-      margin: ${theme.sizeUnit}px 0px;
+      margin: ${theme.marginXXS}px 0px;
       max-height: calc(100vh - ${ELEMENTS_EXCEPT_VIZ_GALLERY}px);
       flex: 1;
     }
@@ -120,7 +120,7 @@ const StyledContainer = styled.div`
 
       & > span {
         color: ${theme.colorText};
-        margin-right: ${theme.sizeUnit * 4}px;
+        margin-right: ${theme.margin}px;
       }
     }
 
@@ -131,7 +131,7 @@ const StyledContainer = styled.div`
     }
 
     &&&& .ant-steps-item-icon {
-      margin-right: ${theme.sizeUnit * 2}px;
+      margin-right: ${theme.marginXS}px;
       width: ${theme.sizeUnit * 5}px;
       height: ${theme.sizeUnit * 5}px;
       line-height: ${theme.sizeUnit * 5}px;
@@ -153,18 +153,6 @@ const StyledContainer = styled.div`
     &&&& .ant-tooltip-open {
       display: inline;
     }
-
-    &&&& .ant-select-selector {
-      padding: 0;
-    }
-
-    &&&& .ant-select-selection-placeholder {
-      padding-left: ${theme.sizeUnit * 3}px;
-    }
-
-    &&&& .ant-select-selection-item {
-      padding-left: ${theme.sizeUnit * 3}px;
-    }
   `}
 `;
 
@@ -176,9 +164,10 @@ const StyledStepTitle = styled.span`
 `;
 
 const StyledStepDescription = styled.div`
-  ${({ theme: { sizeUnit } }) => `
-    margin-top: ${sizeUnit * 4}px;
-    margin-bottom: ${sizeUnit * 3}px;
+  ${({ theme }) => `
+    margin-top: ${theme.margin}px;
+    margin-bottom: ${theme.marginSM}px;
+    margin-left: ${theme.marginMD}px;
   `}
 `;
 
@@ -272,6 +261,7 @@ export class ChartCreation extends PureComponent<
         id: item.id,
         value: `${item.id}__${item.datasource_type}`,
         label: DatasetSelectLabel(item),
+        customLabel: item.table_name,
       }));
       return {
         data: list,
@@ -330,7 +320,7 @@ export class ChartCreation extends PureComponent<
                   name="select-datasource"
                   onChange={this.changeDatasource}
                   options={this.loadDatasources}
-                  optionFilterProps={['id', 'label']}
+                  optionFilterProps={['id', 'customLabel']}
                   placeholder={t('Choose a dataset')}
                   showSearch
                   value={this.state.datasource}
diff --git a/superset-frontend/src/pages/ChartList/index.tsx b/superset-frontend/src/pages/ChartList/index.tsx
index 5696438eab6..ebb59def08b 100644
--- a/superset-frontend/src/pages/ChartList/index.tsx
+++ b/superset-frontend/src/pages/ChartList/index.tsx
@@ -82,6 +82,7 @@ import { WIDER_DROPDOWN_WIDTH } from 'src/components/ListView/utils';
 const FlexRowContainer = styled.div`
   align-items: center;
   display: flex;
+  gap: ${({ theme }) => theme.sizeUnit}px;
 
   a {
     overflow: hidden;
@@ -364,6 +365,7 @@ function ChartList(props: ChartListProps) {
         ),
         Header: t('Name'),
         accessor: 'slice_name',
+        size: 'xxl',
         id: 'slice_name',
       },
       {
@@ -374,7 +376,7 @@ function ChartList(props: ChartListProps) {
         }: any) => registry.get(vizType)?.name || vizType,
         Header: t('Type'),
         accessor: 'viz_type',
-        size: 'xxl',
+        size: 'lg',
         id: 'viz_type',
       },
       {
@@ -396,7 +398,7 @@ function ChartList(props: ChartListProps) {
         Header: t('Dataset'),
         accessor: 'datasource_id',
         disableSortBy: true,
-        size: 'xl',
+        size: 'lg',
         id: 'datasource_id',
       },
       {
@@ -408,7 +410,7 @@ function ChartList(props: ChartListProps) {
         Header: t('On dashboards'),
         accessor: 'dashboards',
         disableSortBy: true,
-        size: 'xxl',
+        size: 'xl',
         id: 'dashboards',
       },
       {
@@ -431,6 +433,7 @@ function ChartList(props: ChartListProps) {
         Header: t('Tags'),
         accessor: 'tags',
         disableSortBy: true,
+        size: 'lg',
         hidden: !isFeatureEnabled(FeatureFlag.TaggingSystem),
         id: 'tags',
       },
diff --git a/superset-frontend/src/pages/CssTemplateList/index.tsx b/superset-frontend/src/pages/CssTemplateList/index.tsx
index b0d835d7fb2..ae39bbdede6 100644
--- a/superset-frontend/src/pages/CssTemplateList/index.tsx
+++ b/superset-frontend/src/pages/CssTemplateList/index.tsx
@@ -132,6 +132,7 @@ function CssTemplatesList({
       {
         accessor: 'template_name',
         Header: t('Name'),
+        size: 'xxl',
         id: 'template_name',
       },
       {
diff --git a/superset-frontend/src/pages/DashboardList/index.tsx b/superset-frontend/src/pages/DashboardList/index.tsx
index 25856e71795..675c5180020 100644
--- a/superset-frontend/src/pages/DashboardList/index.tsx
+++ b/superset-frontend/src/pages/DashboardList/index.tsx
@@ -346,6 +346,7 @@ function DashboardList(props: DashboardListProps) {
         ),
         Header: t('Name'),
         accessor: 'dashboard_title',
+        size: 'xxl',
         id: 'dashboard_title',
       },
       {
@@ -358,7 +359,7 @@ function DashboardList(props: DashboardListProps) {
         ),
         Header: t('Status'),
         accessor: 'published',
-        size: 'xl',
+        size: 'sm',
         id: 'published',
       },
       {
@@ -386,6 +387,7 @@ function DashboardList(props: DashboardListProps) {
         Header: t('Tags'),
         accessor: 'tags',
         disableSortBy: true,
+        size: 'lg',
         hidden: !isFeatureEnabled(FeatureFlag.TaggingSystem),
         id: 'tags',
       },
diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx
index 5b9120c651d..e3f55a06f23 100644
--- a/superset-frontend/src/pages/DatabaseList/index.tsx
+++ b/superset-frontend/src/pages/DatabaseList/index.tsx
@@ -387,12 +387,13 @@ function DatabaseList({
       {
         accessor: 'database_name',
         Header: t('Name'),
+        size: 'xxl',
         id: 'database_name',
       },
       {
         accessor: 'backend',
         Header: t('Backend'),
-        size: 'lg',
+        size: 'xl',
         disableSortBy: true, // TODO: api support for sorting by 'backend'
         id: 'backend',
       },
diff --git a/superset-frontend/src/pages/DatasetList/index.tsx b/superset-frontend/src/pages/DatasetList/index.tsx
index 25e655c8ea1..b3c0f89e9da 100644
--- a/superset-frontend/src/pages/DatasetList/index.tsx
+++ b/superset-frontend/src/pages/DatasetList/index.tsx
@@ -82,6 +82,7 @@ const DatasetDeleteRelatedExtension = extensionsRegistry.get(
 const FlexRowContainer = styled.div`
   align-items: center;
   display: flex;
+  gap: ${({ theme }) => theme.sizeUnit}px;
 
   svg {
     margin-right: ${({ theme }) => theme.sizeUnit}px;
@@ -347,6 +348,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         },
         Header: t('Name'),
         accessor: 'table_name',
+        size: 'xxl',
         id: 'table_name',
       },
       {
@@ -358,13 +360,13 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         Header: t('Type'),
         accessor: 'kind',
         disableSortBy: true,
-        size: 'md',
+        size: 'sm',
         id: 'kind',
       },
       {
         Header: t('Database'),
         accessor: 'database.database_name',
-        size: 'lg',
+        size: 'xl',
         id: 'database.database_name',
       },
       {
diff --git a/superset-frontend/src/pages/GroupsList/index.tsx b/superset-frontend/src/pages/GroupsList/index.tsx
index 2aa4c9050aa..66471ecb5c4 100644
--- a/superset-frontend/src/pages/GroupsList/index.tsx
+++ b/superset-frontend/src/pages/GroupsList/index.tsx
@@ -170,6 +170,7 @@ function GroupsList({ user }: GroupsListProps) {
         accessor: 'name',
         id: 'name',
         Header: t('Name'),
+        size: 'xxl',
         Cell: ({
           row: {
             original: { name },
diff --git a/superset-frontend/src/pages/QueryHistoryList/index.tsx b/superset-frontend/src/pages/QueryHistoryList/index.tsx
index 7f37e6dedcb..8af2f0deb3b 100644
--- a/superset-frontend/src/pages/QueryHistoryList/index.tsx
+++ b/superset-frontend/src/pages/QueryHistoryList/index.tsx
@@ -230,7 +230,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
       {
         accessor: QueryObjectColumns.StartTime,
         Header: t('Time'),
-        size: 'xl',
+        size: 'lg',
         Cell: ({
           row: {
             original: { start_time },
@@ -253,7 +253,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
       },
       {
         Header: t('Duration'),
-        size: 'xl',
+        size: 'lg',
         Cell: ({
           row: {
             original: { status, start_time, end_time },
@@ -282,7 +282,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
       {
         accessor: QueryObjectColumns.DatabaseName,
         Header: t('Database'),
-        size: 'xl',
+        size: 'lg',
         id: QueryObjectColumns.DatabaseName,
       },
       {
@@ -293,7 +293,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
       {
         accessor: QueryObjectColumns.Schema,
         Header: t('Schema'),
-        size: 'xl',
+        size: 'lg',
         id: QueryObjectColumns.Schema,
       },
       {
@@ -331,7 +331,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
         },
         accessor: QueryObjectColumns.SqlTables,
         Header: t('Tables'),
-        size: 'xl',
+        size: 'lg',
         disableSortBy: true,
         id: QueryObjectColumns.SqlTables,
       },
@@ -354,7 +354,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
       {
         accessor: QueryObjectColumns.Rows,
         Header: t('Rows'),
-        size: 'md',
+        size: 'sm',
         id: QueryObjectColumns.Rows,
       },
       {
@@ -385,12 +385,14 @@ function QueryList({ addDangerToast }: QueryListProps) {
             </StyledCodeSyntaxHighlighter>
           </div>
         ),
+        size: 'xxl',
         id: QueryObjectColumns.Sql,
       },
       {
         Header: t('Actions'),
         id: 'actions',
         disableSortBy: true,
+        size: 'sm',
         Cell: ({
           row: {
             original: { id },
diff --git a/superset-frontend/src/pages/RolesList/index.tsx b/superset-frontend/src/pages/RolesList/index.tsx
index 1bddeed2472..79d30354975 100644
--- a/superset-frontend/src/pages/RolesList/index.tsx
+++ b/superset-frontend/src/pages/RolesList/index.tsx
@@ -189,6 +189,7 @@ function RolesList({ addDangerToast, addSuccessToast, user }: RolesListProps) {
         accessor: 'name',
         id: 'name',
         Header: t('Name'),
+        size: 'xxl',
         Cell: ({
           row: {
             original: { name },
diff --git a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
index fa0f3085f57..c4c33a0df56 100644
--- a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
+++ b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
@@ -126,23 +126,25 @@ function RowLevelSecurityList(props: RLSProps) {
       {
         accessor: 'name',
         Header: t('Name'),
+        size: 'xxl',
         id: 'name',
       },
       {
         accessor: 'filter_type',
         Header: t('Filter Type'),
-        size: 'xl',
+        size: 'lg',
         id: 'filter_type',
       },
       {
         accessor: 'group_key',
         Header: t('Group Key'),
-        size: 'xl',
+        size: 'lg',
         id: 'group_key',
       },
       {
         accessor: 'clause',
         Header: t('Clause'),
+        size: 'xl',
         id: 'clause',
       },
       {
@@ -226,6 +228,7 @@ function RowLevelSecurityList(props: RLSProps) {
         id: 'actions',
         hidden: !canEdit && !canWrite && !canExport,
         disableSortBy: true,
+        size: 'lg',
       },
       {
         accessor: QueryObjectColumns.ChangedBy,
diff --git a/superset-frontend/src/pages/SavedQueryList/index.tsx b/superset-frontend/src/pages/SavedQueryList/index.tsx
index 0af664153e7..0dfc659d366 100644
--- a/superset-frontend/src/pages/SavedQueryList/index.tsx
+++ b/superset-frontend/src/pages/SavedQueryList/index.tsx
@@ -315,6 +315,7 @@ function SavedQueryList({
       {
         accessor: 'label',
         Header: t('Name'),
+        size: 'xxl',
         Cell: ({
           row: {
             original: { id, label },
@@ -325,12 +326,13 @@ function SavedQueryList({
       {
         accessor: 'description',
         Header: t('Description'),
+        size: 'xl',
         id: 'description',
       },
       {
         accessor: 'database.database_name',
         Header: t('Database'),
-        size: 'xl',
+        size: 'lg',
         id: 'database.database_name',
       },
       {
@@ -342,7 +344,7 @@ function SavedQueryList({
       {
         accessor: 'schema',
         Header: t('Schema'),
-        size: 'xl',
+        size: 'lg',
         id: 'schema',
       },
       {
@@ -380,7 +382,7 @@ function SavedQueryList({
         },
         accessor: 'sql_tables',
         Header: t('Tables'),
-        size: 'xl',
+        size: 'lg',
         disableSortBy: true,
         id: 'sql_tables',
       },
diff --git a/superset-frontend/src/pages/Tags/index.tsx b/superset-frontend/src/pages/Tags/index.tsx
index c9f062e644c..c653bcbbd9b 100644
--- a/superset-frontend/src/pages/Tags/index.tsx
+++ b/superset-frontend/src/pages/Tags/index.tsx
@@ -172,6 +172,7 @@ function TagList(props: TagListProps) {
         ),
         Header: t('Name'),
         accessor: 'name',
+        size: 'xxl',
         id: 'name',
       },
       {
diff --git a/superset-frontend/src/pages/ThemeList/index.tsx b/superset-frontend/src/pages/ThemeList/index.tsx
index c9ec06dc003..2733926fd4e 100644
--- a/superset-frontend/src/pages/ThemeList/index.tsx
+++ b/superset-frontend/src/pages/ThemeList/index.tsx
@@ -57,6 +57,7 @@ const PAGE_SIZE = 25;
 const FlexRowContainer = styled.div`
   align-items: center;
   display: flex;
+  gap: ${({ theme }) => theme.sizeUnit}px;
 
   .ant-tag {
     margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
diff --git a/superset-frontend/src/pages/UsersList/index.tsx b/superset-frontend/src/pages/UsersList/index.tsx
index bd1d65ad93b..a4ee4c17e13 100644
--- a/superset-frontend/src/pages/UsersList/index.tsx
+++ b/superset-frontend/src/pages/UsersList/index.tsx
@@ -190,6 +190,7 @@ function UsersList({ user }: UsersListProps) {
         accessor: 'first_name',
         id: 'first_name',
         Header: t('First name'),
+        size: 'lg',
         Cell: ({
           row: {
             original: { first_name },
@@ -200,6 +201,7 @@ function UsersList({ user }: UsersListProps) {
         accessor: 'last_name',
         id: 'last_name',
         Header: t('Last name'),
+        size: 'lg',
         Cell: ({
           row: {
             original: { last_name },
@@ -210,6 +212,7 @@ function UsersList({ user }: UsersListProps) {
         accessor: 'username',
         id: 'username',
         Header: t('Username'),
+        size: 'xxl',
         Cell: ({
           row: {
             original: { username },
@@ -220,6 +223,7 @@ function UsersList({ user }: UsersListProps) {
         accessor: 'email',
         id: 'email',
         Header: t('Email'),
+        size: 'xl',
         Cell: ({
           row: {
             original: { email },
@@ -230,6 +234,7 @@ function UsersList({ user }: UsersListProps) {
         accessor: 'active',
         id: 'active',
         Header: t('Is active?'),
+        size: 'sm',
         Cell: ({
           row: {
             original: { active },
@@ -240,6 +245,7 @@ function UsersList({ user }: UsersListProps) {
         accessor: 'roles',
         id: 'roles',
         Header: t('Roles'),
+        size: 'lg',
         Cell: ({
           row: {
             original: { roles },
@@ -259,6 +265,7 @@ function UsersList({ user }: UsersListProps) {
         accessor: 'groups',
         Header: t('Groups'),
         id: 'groups',
+        size: 'lg',
         Cell: ({
           row: {
             original: { groups },