diff --git a/packages/components/src/form/ActionButton/ActionButton.js b/packages/components/src/form/ActionButton/ActionButton.js
index 34b5eb753..d7087a03d 100644
--- a/packages/components/src/form/ActionButton/ActionButton.js
+++ b/packages/components/src/form/ActionButton/ActionButton.js
@@ -50,7 +50,7 @@ const ActionButton = forwardRef(
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const color = ACTION_BUTTON_COLORS.includes(colorProp)
       ? colorProp
@@ -67,7 +67,7 @@ const ActionButton = forwardRef(
         radius,
         active,
       },
-      { classNames, name: 'ActionButton' }
+      { classNames, name: 'ActionButton' },
     );
 
     return (
@@ -94,7 +94,7 @@ const ActionButton = forwardRef(
         </MantineButton>
       </TooltipComponent>
     );
-  }
+  },
 );
 
 ActionButton.defaultProps = ACTION_BUTTON_DEFAULT_PROPS;
diff --git a/packages/components/src/form/AutocompleteBadge/AutocompleteBadge.styles.js b/packages/components/src/form/AutocompleteBadge/AutocompleteBadge.styles.js
index 7c0e2d55b..9eac2649e 100644
--- a/packages/components/src/form/AutocompleteBadge/AutocompleteBadge.styles.js
+++ b/packages/components/src/form/AutocompleteBadge/AutocompleteBadge.styles.js
@@ -1,14 +1,14 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins';
+import { getFontExpressive } from '../../theme.mixins';
 
-export const AutocompleteBadgeStyles = createStyles((theme, {}) => {
-  return {
-    root: {
-      ...getFontExpressive(theme.fontSizes['2']),
-    },
-    item: {
-      paddingBlock: 4,
-    },
-    itemsWrapper: { padding: 50 },
-  };
-});
+const AutocompleteBadgeStyles = createStyles((theme) => ({
+  root: {
+    ...getFontExpressive(theme.fontSizes['2']),
+  },
+  item: {
+    paddingBlock: 4,
+  },
+  itemsWrapper: { padding: 50 },
+}));
+
+export { AutocompleteBadgeStyles };
diff --git a/packages/components/src/form/Button/Button.js b/packages/components/src/form/Button/Button.js
index 6fcce6a9d..a7483bcc2 100644
--- a/packages/components/src/form/Button/Button.js
+++ b/packages/components/src/form/Button/Button.js
@@ -60,6 +60,7 @@ const Button = forwardRef(
         hasLeftIcon,
         hasRightIcon,
         isSelected,
+        onlyIcon: !children,
       },
       { name: 'Button' },
     );
diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js
index 2beb70f18..8b90f958e 100644
--- a/packages/components/src/form/Button/Button.styles.js
+++ b/packages/components/src/form/Button/Button.styles.js
@@ -20,9 +20,17 @@ const getIsSelected = (isSelected, theme) => {
   };
 };
 
-const getPaddingIfIcon = (hasLeftIcon, hasRightIcon, theme) => {
+const getPaddingIfIcon = (hasLeftIcon, hasRightIcon, theme, onlyIcon) => {
   if (!hasLeftIcon && !hasRightIcon) return;
+
   const buttonPadding = theme.other.button.spacing.padding;
+
+  if (onlyIcon) {
+    return {
+      padding: `${buttonPadding.vertical.md} ${buttonPadding.horizontal.xs} ${buttonPadding.vertical.md} ${buttonPadding.horizontal.xs}`,
+    };
+  }
+
   const iconLeftPadding = hasLeftIcon ? buttonPadding.horizontal.xs : buttonPadding.horizontal.sm;
   const iconRightPadding = hasRightIcon ? buttonPadding.horizontal.xs : buttonPadding.horizontal.sm;
   return {
@@ -164,6 +172,7 @@ export const ButtonStyles = createStyles(
       hasLeftIcon,
       hasRightIcon,
       isSelected,
+      onlyIcon,
     },
   ) => {
     const currentVariant = getVariant(variant, theme, color);
@@ -201,7 +210,7 @@ export const ButtonStyles = createStyles(
         ...getSizes(size || 'md', theme),
         ...getVariant(variant, theme, color),
         ...styles,
-        ...getPaddingIfIcon(hasLeftIcon, hasRightIcon, theme),
+        ...getPaddingIfIcon(hasLeftIcon, hasRightIcon, theme, onlyIcon),
         ...getIsSelected(isSelected, theme),
         '&[data-loading]': {
           // borderColor: 'transparent',
@@ -221,11 +230,11 @@ export const ButtonStyles = createStyles(
       },
       rightIcon: {
         ...iconStyles,
-        marginLeft: buttonTheme.spacing.gap,
+        marginLeft: onlyIcon ? 0 : buttonTheme.spacing.gap,
       },
       leftIcon: {
         ...iconStyles,
-        marginRight: buttonTheme.spacing.gap,
+        marginRight: onlyIcon ? 0 : buttonTheme.spacing.gap,
       },
       inner: {
         height: 20,
diff --git a/packages/components/src/form/DatePicker/DatePicker.js b/packages/components/src/form/DatePicker/DatePicker.js
index 07bce6fb4..9fb211372 100644
--- a/packages/components/src/form/DatePicker/DatePicker.js
+++ b/packages/components/src/form/DatePicker/DatePicker.js
@@ -69,6 +69,11 @@ function TimeInput({ onChange, size, ...props }) {
   return <MantineTimeInput {...props} onChange={onChange} classNames={classes} size={size} />;
 }
 
+TimeInput.propTypes = {
+  size: PropTypes.oneOf(DATE_PICKER_SIZES),
+  onChange: PropTypes.func,
+};
+
 const DatePicker = forwardRef(
   (
     {
@@ -95,7 +100,7 @@ const DatePicker = forwardRef(
       style,
       ...props
     },
-    ref
+    ref,
   ) => {
     const uuid = useId();
     const [currentLocale, setCurrentLocale] = useState(locale);
@@ -196,9 +201,10 @@ const DatePicker = forwardRef(
         )}
       </InputWrapper>
     );
-  }
+  },
 );
 
+DatePicker.displayName = 'DatePicker';
 DatePicker.defaultProps = DATE_PICKER_DEFAULT_PROPS;
 DatePicker.propTypes = DATE_PICKER_PROP_TYPES;
 
diff --git a/packages/components/src/form/DatePicker/DatePicker.styles.js b/packages/components/src/form/DatePicker/DatePicker.styles.js
index d9ec62167..44563bc14 100644
--- a/packages/components/src/form/DatePicker/DatePicker.styles.js
+++ b/packages/components/src/form/DatePicker/DatePicker.styles.js
@@ -1,8 +1,8 @@
 import { createStyles } from '@mantine/styles';
 import { getBoxShadowFromToken } from '../../theme.mixins';
-import { getInputStyle, getRightSection, getInputSizes } from '../mixins/fieldStyles.mixins';
+import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-export const DatePickerStyles = createStyles((theme, { size, date, range }) => {
+const DatePickerStyles = createStyles((theme, { size, date, range }) => {
   const checkDate = () => {
     if (range) {
       if (Array.isArray(date)) return date?.every((value) => !!value);
@@ -20,6 +20,7 @@ export const DatePickerStyles = createStyles((theme, { size, date, range }) => {
       ...getInputStyle(inputTheme, theme.other.global),
       textOverflow: 'ellipsis !important',
       paddingRight: checkDate() && 30,
+      minHeight: 40,
     },
     dropdown: {
       padding: `${calendarTheme.spacing.padding.vertical} ${calendarTheme.spacing.padding.horizontal}`,
@@ -37,3 +38,5 @@ export const DatePickerStyles = createStyles((theme, { size, date, range }) => {
     },
   };
 });
+
+export { DatePickerStyles };
diff --git a/packages/components/src/form/Input/Input.js b/packages/components/src/form/Input/Input.js
index 8af03adf2..987461ffb 100644
--- a/packages/components/src/form/Input/Input.js
+++ b/packages/components/src/form/Input/Input.js
@@ -1,9 +1,10 @@
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
 import { Input as MantineInput } from '@mantine/core';
 import { InputStyles } from './Input.styles';
 
 export const INPUT_SIZES = ['sm', 'md'];
-export const Input = forwardRef(
+const Input = forwardRef(
   (
     {
       radius,
@@ -17,7 +18,7 @@ export const Input = forwardRef(
       classNames = {},
       ...props
     },
-    ref
+    ref,
   ) => {
     const hasIcon = !!icon;
     const size = INPUT_SIZES.includes(sizeProp) ? sizeProp : 'md';
@@ -27,8 +28,6 @@ export const Input = forwardRef(
       <MantineInput
         {...props}
         ref={ref}
-        // variant={variant}
-        // size={size}
         invalid={invalid}
         icon={icon}
         disabled={disabled}
@@ -37,5 +36,20 @@ export const Input = forwardRef(
         autoComplete={autoComplete}
       />
     );
-  }
+  },
 );
+
+Input.displayName = 'Input';
+Input.propTypes = {
+  size: PropTypes.oneOf(INPUT_SIZES),
+  variant: PropTypes.any,
+  radius: PropTypes.any,
+  icon: PropTypes.node,
+  rightSection: PropTypes.node,
+  invalid: PropTypes.bool,
+  disabled: PropTypes.bool,
+  autoComplete: PropTypes.string,
+  classNames: PropTypes.any,
+};
+
+export { Input };
diff --git a/packages/components/src/form/Input/Input.styles.js b/packages/components/src/form/Input/Input.styles.js
index fc26c6eb5..81f4a2371 100644
--- a/packages/components/src/form/Input/Input.styles.js
+++ b/packages/components/src/form/Input/Input.styles.js
@@ -1,8 +1,7 @@
 import { createStyles } from '@mantine/styles';
-import { getPaddings, getFocusStyles, getSpacing, pxToRem } from '../../theme.mixins';
 import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-export const InputStyles = createStyles((theme, { size, disabled, hasIcon }) => {
+const InputStyles = createStyles((theme, { size, disabled, hasIcon }) => {
   const inputTheme = theme.other.input;
   return {
     root: {},
@@ -10,11 +9,14 @@ export const InputStyles = createStyles((theme, { size, disabled, hasIcon }) =>
       ...getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon),
       ...getInputStyle(inputTheme, theme.other.global, disabled),
       height: 'auto',
+      minHeight: 40,
     },
-    rightSection: { color: inputTheme.content.color.icon },
+    rightSection: { color: inputTheme.content.color.icon, paddingRight: 6 },
     icon: {
       width: 32,
       color: inputTheme.content.color.icon,
     },
   };
 });
+
+export { InputStyles };
diff --git a/packages/components/src/form/NumberInput/NumberInput.styles.js b/packages/components/src/form/NumberInput/NumberInput.styles.js
index 43c2504de..e852959c1 100644
--- a/packages/components/src/form/NumberInput/NumberInput.styles.js
+++ b/packages/components/src/form/NumberInput/NumberInput.styles.js
@@ -1,8 +1,7 @@
 import { createStyles } from '@mantine/styles';
-import { getPaddings, getFocusStyles, getSpacing } from '../../theme.mixins';
-import { getInputStyle, getRightSection, getInputSizes } from '../mixins/fieldStyles.mixins';
+import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-export const NumberInputStyles = createStyles((theme, { size, hasIcon }) => {
+const NumberInputStyles = createStyles((theme, { size, hasIcon }) => {
   const inputTheme = theme.other.input;
   return {
     root: {},
@@ -10,6 +9,7 @@ export const NumberInputStyles = createStyles((theme, { size, hasIcon }) => {
       ...getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon),
       ...getInputStyle(inputTheme, theme.other.global),
       paddingRight: 24,
+      minHeight: 40,
     },
     icon: {
       width: 32,
@@ -61,3 +61,5 @@ export const NumberInputStyles = createStyles((theme, { size, hasIcon }) => {
     },
   };
 });
+
+export { NumberInputStyles };
diff --git a/packages/components/src/form/PasswordInput/PasswordInput.styles.js b/packages/components/src/form/PasswordInput/PasswordInput.styles.js
index 1d7251306..62e814c11 100644
--- a/packages/components/src/form/PasswordInput/PasswordInput.styles.js
+++ b/packages/components/src/form/PasswordInput/PasswordInput.styles.js
@@ -1,8 +1,7 @@
 import { createStyles } from '@mantine/styles';
-import { getBoxShadowFromToken, getFocusStyles, getPaddings } from '../../theme.mixins';
-import { getInputStyle, getRightSection, getInputSizes } from '../mixins/fieldStyles.mixins';
+import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disabled }) => {
+const PasswordInputStyles = createStyles((theme, { size, hasIcon, disabled }) => {
   const inputTheme = theme.other.input;
   const inputSizes = getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon);
   const inputStyles = getInputStyle(inputTheme, theme.other.global);
@@ -11,7 +10,7 @@ export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disable
     input: {
       ...inputSizes,
       ...inputStyles,
-      // padding: 0,
+      minHeight: 40,
     },
     innerInput: {
       ...inputSizes,
@@ -27,7 +26,7 @@ export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disable
       backgroundColor: 'inherit !important',
       boxShadow: 'none !important',
     },
-    // rightSection: { ...getRightSection(theme) },
+    rightSection: { paddingRight: 6 },
     visibilityToggle: {
       color: '#495057',
     },
@@ -37,3 +36,5 @@ export const PasswordInputStyles = createStyles((theme, { size, hasIcon, disable
     },
   };
 });
+
+export { PasswordInputStyles };
diff --git a/packages/components/src/form/Select/Select.styles.js b/packages/components/src/form/Select/Select.styles.js
index f7a32cb0d..0bcf9d4b5 100644
--- a/packages/components/src/form/Select/Select.styles.js
+++ b/packages/components/src/form/Select/Select.styles.js
@@ -1,7 +1,7 @@
 import { createStyles } from '@mantine/styles';
 import { getInputSizes, getInputStyle, getSelectDividerStyle } from '../mixins/fieldStyles.mixins';
 
-export const SelectStyles = createStyles((theme, { size, rightEvents, variant, hasIcon }) => {
+const SelectStyles = createStyles((theme, { size, rightEvents, variant, hasIcon }) => {
   const inputTheme = theme.other.input;
   return {
     input: {
@@ -9,6 +9,7 @@ export const SelectStyles = createStyles((theme, { size, rightEvents, variant, h
       ...getInputStyle(inputTheme, theme.other.global),
       paddingRight: 30,
       textOverflow: 'ellipsis',
+      minHeight: 40,
     },
     icon: {
       width: 32,
@@ -26,3 +27,5 @@ export const SelectStyles = createStyles((theme, { size, rightEvents, variant, h
     ...getSelectDividerStyle(theme, theme.other.global),
   };
 });
+
+export { SelectStyles };
\ No newline at end of file
diff --git a/packages/components/src/form/TableInput/TableInput.js b/packages/components/src/form/TableInput/TableInput.js
index 09e01df82..0509b5a11 100644
--- a/packages/components/src/form/TableInput/TableInput.js
+++ b/packages/components/src/form/TableInput/TableInput.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import update from 'immutability-helper';
-import { map, forEach, isEmpty, isFunction } from 'lodash';
+import { map, forEach, isEmpty, isFunction, noop } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import { useForm } from 'react-hook-form';
 import { Box } from '../../layout/Box';
@@ -40,26 +40,23 @@ const TableInput = ({
   resetOnAdd,
   rowsExpanded,
   rowStyles,
-  onChange = () => {},
-  onChangeData = () => {},
-  onBeforeRemove = () => {},
-  onBeforeAdd = () => {},
-  onAdd = () => {},
-  onUpdate = () => {},
-  onRemove = () => {},
-  onItemAdd = () => {},
-  onSort = () => {},
-  renderRowSubComponent = () => {},
+  onChange = noop,
+  onChangeData = noop,
+  onBeforeRemove = noop,
+  onBeforeAdd = noop,
+  onAdd = noop,
+  onUpdate = noop,
+  onRemove = noop,
+  onItemAdd = noop,
+  onSort = noop,
+  renderRowSubComponent = noop,
+  disabled,
   ...props
 }) => {
   const [tableData, setTableData] = useState([]);
   const hasError = useMemo(() => !isEmpty(error), [error]);
 
-  let form = formProp;
-
-  if (!form) {
-    form = useForm();
-  }
+  const form = formProp ?? useForm();
 
   useEffect(() => {
     const newData = serializeData(data);
@@ -141,13 +138,17 @@ const TableInput = ({
     handleOnChange(newData, { type: 'sort' });
   };
 
-  const { classes, cx } = TableInputStyles({ hasError, rowStyles }, { name: 'TableInput' });
+  const { classes, cx } = TableInputStyles(
+    { hasError, disabled, rowStyles },
+    { name: 'TableInput' },
+  );
 
   return (
     <Box>
       <Box className={classes.wrapper}>
         <TableInputDisplay
           {...props}
+          disabled={disabled}
           form={form}
           rowStyles={rowStyles}
           data={tableData}
diff --git a/packages/components/src/form/TableInput/TableInput.styles.js b/packages/components/src/form/TableInput/TableInput.styles.js
index 3c36f5083..e459dc93e 100644
--- a/packages/components/src/form/TableInput/TableInput.styles.js
+++ b/packages/components/src/form/TableInput/TableInput.styles.js
@@ -1,44 +1,43 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem } from '../../theme.mixins';
 
-export const TableInputStyles = createStyles((theme, { hasError, rowStyles }) => {
-  return {
-    root: {},
-    tHead: {
-      '&:after': {
-        content: '"@"',
-        display: 'block',
-        lineHeight: '16px',
-        textIndent: -99999,
-      },
+const TableInputStyles = createStyles((theme, { hasError, disabled, rowStyles }) => ({
+  root: {},
+  tHead: {
+    '&:after': !disabled && {
+      content: '"@"',
+      display: 'block',
+      lineHeight: '16px',
+      textIndent: -99999,
     },
-    wrapper: {
-      border: hasError && `1px solid ${theme.colors.fatic01}`,
-      borderRadius: 4,
-      padding: hasError && theme.spacing[1],
-      marginBottom: hasError && theme.spacing[1],
-    },
-    inputCell: {
-      paddingLeft: theme.spacing[2],
-      paddingRight: theme.spacing[2],
-      verticalAlign: 'top !important',
-    },
-    actionCell: {
-      textAlign: 'center',
-    },
-    row: {
-      backgroundColor: theme.colors.uiBackground01,
-      ...rowStyles,
-    },
-    rowDragging: {
-      display: 'table',
-      boxShadow: theme.shadows.shadow03,
-      paddingLeft: 10,
-    },
-    sortIcon: {
-      color: theme.colors.ui01,
-      cursor: 'grab',
-      paddingTop: theme.spacing[2],
-    },
-  };
-});
+  },
+  wrapper: {
+    border: hasError && `1px solid ${theme.colors.fatic01}`,
+    borderRadius: 4,
+    padding: hasError && theme.spacing[1],
+    marginBottom: hasError && theme.spacing[1],
+  },
+  inputCell: {
+    paddingLeft: theme.spacing[2],
+    paddingRight: theme.spacing[2],
+    verticalAlign: 'top !important',
+  },
+  actionCell: {
+    textAlign: 'center',
+  },
+  row: {
+    backgroundColor: theme.colors.uiBackground01,
+    ...rowStyles,
+  },
+  rowDragging: {
+    display: 'table',
+    boxShadow: theme.shadows.shadow03,
+    paddingLeft: 10,
+  },
+  sortIcon: {
+    color: theme.colors.ui01,
+    cursor: 'grab',
+    paddingTop: theme.spacing[2],
+  },
+}));
+
+export { TableInputStyles };
diff --git a/packages/components/src/form/TableInput/TableInputDisplay.js b/packages/components/src/form/TableInput/TableInputDisplay.js
index 070dfd865..88d86f10c 100644
--- a/packages/components/src/form/TableInput/TableInputDisplay.js
+++ b/packages/components/src/form/TableInput/TableInputDisplay.js
@@ -6,10 +6,11 @@ import { Controller } from 'react-hook-form';
 import { AddIcon } from '@bubbles-ui/icons/outline';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { Text } from '../../typography/Text';
+import { Box } from '../../layout/Box';
 import { TableStyles } from '../../informative/Table/Table.styles';
 import { TABLE_INPUT_DEFAULT_PROPS, TABLE_INPUT_PROP_TYPES } from './TableInput.constants';
 import { TableInputRow } from './TableInputRow';
-import { ActionButton } from '../ActionButton';
+import { Button } from '../Button';
 
 export const TABLE_INPUT_DISPLAY_DEFAULT_PROPS = {
   ...TABLE_INPUT_DEFAULT_PROPS,
@@ -71,7 +72,7 @@ const TableInputDisplay = ({
 
   const formValues = watch();
 
-  const { classes: tableClasses, cx } = TableStyles({}, { name: 'Table' });
+  const { classes: tableClasses, cx } = TableStyles({ disabled }, { name: 'Table' });
 
   const getColumnInput = useCallback(
     (accessor) => {
@@ -80,7 +81,7 @@ const TableInputDisplay = ({
       }
 
       const column = find(columns, { accessor });
-      if (column && column.input) {
+      if (column?.input) {
         const { node, rules, ...inputProps } = column.input;
         return (
           <Controller
@@ -164,13 +165,13 @@ const TableInputDisplay = ({
               style={{ paddingLeft: 0, paddingBottom: 4 }}
             >
               {!disabled && !isFunction(renderActionButton) && (
-                <ActionButton
-                  disabled={disabledAddButton}
-                  onClick={handleOnAdd}
-                  icon={<AddIcon />}
-                />
+                <Button variant="link" disabled={disabledAddButton} onClick={handleOnAdd}>
+                  <AddIcon />
+                </Button>
               )}
-              {!disabled && isFunction(renderActionButton) && renderActionButton({ disabled: disabledAddButton, onAdd: handleOnAdd })}
+              {!disabled &&
+                isFunction(renderActionButton) &&
+                renderActionButton({ disabled: disabledAddButton, onAdd: handleOnAdd })}
             </th>
           </tr>
         )}
diff --git a/packages/components/src/form/TextInput/TextInput.js b/packages/components/src/form/TextInput/TextInput.js
index 90a78feb5..0f33040c0 100644
--- a/packages/components/src/form/TextInput/TextInput.js
+++ b/packages/components/src/form/TextInput/TextInput.js
@@ -1,3 +1,4 @@
+/* eslint-disable prefer-destructuring */
 import React, { forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty, isFunction } from 'lodash';
@@ -30,6 +31,8 @@ export const TEXT_INPUT_PROP_TYPES = {
   onKeyDown: PropTypes.func,
   autoComplete: PropTypes.string,
   ariaLabel: PropTypes.string,
+  className: PropTypes.string,
+  classNames: PropTypes.object,
 };
 
 export const TEXT_INPUT_DEFAULT_PROPS = {
@@ -66,7 +69,7 @@ const TextInput = forwardRef(
       ariaLabel,
       ...props
     },
-    ref
+    ref,
   ) => {
     const uuid = useId();
 
@@ -118,9 +121,10 @@ const TextInput = forwardRef(
         )}
       </InputWrapper>
     );
-  }
+  },
 );
 
+TextInput.displayName = 'TextInput';
 TextInput.defaultProps = TEXT_INPUT_DEFAULT_PROPS;
 TextInput.propTypes = TEXT_INPUT_PROP_TYPES;
 
diff --git a/packages/components/src/form/TimeInput/TimeInput.styles.js b/packages/components/src/form/TimeInput/TimeInput.styles.js
index fbb904a96..a200e3c89 100644
--- a/packages/components/src/form/TimeInput/TimeInput.styles.js
+++ b/packages/components/src/form/TimeInput/TimeInput.styles.js
@@ -1,7 +1,7 @@
 import { createStyles } from '@mantine/styles';
 import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-export const TimeInputStyles = createStyles((theme, { size }) => {
+const TimeInputStyles = createStyles((theme, { size }) => {
   const inputTheme = theme.other.input;
   const inputStyle = getInputStyle(inputTheme, theme.other.global);
   return {
@@ -9,6 +9,7 @@ export const TimeInputStyles = createStyles((theme, { size }) => {
     input: {
       ...getInputSizes(size || 'md', inputTheme.spacing.padding),
       ...inputStyle,
+      minHeight: 40,
     },
     timeInput: {
       lineHeight: inputStyle.lineHeight,
@@ -19,3 +20,5 @@ export const TimeInputStyles = createStyles((theme, { size }) => {
     },
   };
 });
+
+export { TimeInputStyles };
diff --git a/packages/components/src/informative/Table/Table.styles.js b/packages/components/src/informative/Table/Table.styles.js
index a667aaab0..f94484b2e 100644
--- a/packages/components/src/informative/Table/Table.styles.js
+++ b/packages/components/src/informative/Table/Table.styles.js
@@ -1,7 +1,7 @@
 import { createStyles } from '@mantine/styles';
 import { getPaddings } from '../../theme.mixins';
 
-export const TableStyles = createStyles((theme, { headerStyles = {} } = {}) => {
+const TableStyles = createStyles((theme, { disabled, headerStyles = {} } = {}) => {
   const reset = {
     margin: 0,
     padding: 0,
@@ -20,10 +20,13 @@ export const TableStyles = createStyles((theme, { headerStyles = {} } = {}) => {
     },
     tr: {
       ...reset,
-      '& td, & th': {
+      '& td': {
         borderBottom: `1px solid rgba(0, 0, 0, 0.05)`,
       },
-      '&:after': {
+      '& th': {
+        borderBottom: disabled && `1px solid rgba(0, 0, 0, 0.05)`,
+      },
+      '&:after': !disabled && {
         content: '"@"',
         display: 'block',
         lineHeight: '16px',
@@ -73,3 +76,5 @@ export const TableStyles = createStyles((theme, { headerStyles = {} } = {}) => {
     },
   };
 });
+
+export { TableStyles };
diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
index ad11f90d1..c0c8660b3 100644
--- a/packages/components/src/tokens.compiled.js
+++ b/packages/components/src/tokens.compiled.js
@@ -1153,7 +1153,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff26",
+          "color": "#ffffff",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1234,8 +1234,17 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff26",
-            "type": "color"
+            "value": "#ffffff",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.15",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#F1FFBD",
@@ -4930,12 +4939,30 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4d535866",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.4",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "hover": {
-            "value": "#4d5358b3",
-            "type": "color"
+            "value": "#4D5358",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "alpha",
+                  "value": "0.7",
+                  "space": "lch"
+                }
+              }
+            }
           },
           "down": {
             "value": "#4D5358",