diff --git a/.vscode/settings.json b/.vscode/settings.json
index d953076ff..8498d8365 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,8 +9,8 @@
     },
     "[javascript]": {
         "editor.codeActionsOnSave": {
-        "source.organizeImports": false,
-        "source.fixAll": true,
+            "source.organizeImports": "never",
+            "source.fixAll": "explicit"
         },
         "editor.formatOnSave": true,
         "editor.defaultFormatter": "esbenp.prettier-vscode"
diff --git a/packages/components/src/feedback/Alert/Alert.styles.js b/packages/components/src/feedback/Alert/Alert.styles.js
index 08f2d72cb..c86895d8b 100644
--- a/packages/components/src/feedback/Alert/Alert.styles.js
+++ b/packages/components/src/feedback/Alert/Alert.styles.js
@@ -1,36 +1,36 @@
 import { createStyles } from '@mantine/styles';
 import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins';
 
-const getColor = (theme, severity) => {
-  return {
+const getColor = (theme, severity) =>
+  ({
     success: {
-      background: `${theme.colors.fatic02v0} !important`,
+      background: `#E4F4E6 !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: theme.colors.fatic02,
+        color: '#368442',
       },
     },
     warning: {
-      background: `${theme.colors.fatic03v0} !important`,
+      background: `#FEF3E1 !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: theme.colors.fatic03,
+        color: '#BA7609',
       },
     },
     info: {
-      background: `${theme.colors.fatic04v0} !important`,
+      background: `#F1FFBD !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: theme.colors.fatic04,
+        color: '#98C200',
       },
     },
     error: {
-      background: `${theme.colors.fatic01v0} !important`,
+      background: `#F7DEDE !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: theme.colors.fatic01,
+        color: '#B52A2A',
       },
     },
-  }[severity];
-};
+  })[severity];
 
-export const AlertStyles = createStyles((theme, { variant, severity }) => {
+const AlertStyles = createStyles((theme, { variant, severity }) => {
+  const alertTheme = theme;
   return {
     root: {
       ...getFontExpressive(theme.fontSizes['2']),
@@ -38,10 +38,7 @@ export const AlertStyles = createStyles((theme, { variant, severity }) => {
       display: 'flex',
       alignItems: 'center',
       borderRadius: variant === 'block' ? pxToRem(2) : pxToRem(0),
-      padding:
-        variant === 'block'
-          ? `${pxToRem(8)} ${pxToRem(16)} ${pxToRem(12)} ${pxToRem(24)}`
-          : `${pxToRem(8)} ${pxToRem(16)} ${pxToRem(12)} ${pxToRem(24)}`,
+      padding: `${pxToRem(8)} ${pxToRem(16)} ${pxToRem(12)} ${pxToRem(24)}`,
     },
     message: {},
     wrapper: {
@@ -60,14 +57,15 @@ export const AlertStyles = createStyles((theme, { variant, severity }) => {
       gap: theme.spacing['2'],
     },
     title: {
-      ...getFontExpressive(theme.fontSizes['2'], 600),
+      ...getFontExpressive(theme.fontSizes['2'], 500),
+      color: '#4D5358',
       marginRight: pxToRem(15),
       lineHeight: 1.2,
       paddingTop: theme.spacing[2],
       paddingBottom: theme.spacing[2],
     },
     content: {
-      ...getFontProductive(theme.fontSizes['2'], 400),
+      ...getFontProductive(theme.fontSizes['2'], 500),
       flex: '1 1 100%',
       marginRight: variant === 'block' ? pxToRem(24) : pxToRem(28),
       lineHeight: 1.2,
@@ -93,3 +91,5 @@ export const AlertStyles = createStyles((theme, { variant, severity }) => {
     },
   };
 });
+
+export { AlertStyles };
diff --git a/packages/components/src/feedback/Loader/Loader.js b/packages/components/src/feedback/Loader/Loader.js
index 4dd9a3827..07edd0892 100644
--- a/packages/components/src/feedback/Loader/Loader.js
+++ b/packages/components/src/feedback/Loader/Loader.js
@@ -4,6 +4,7 @@ import { isString } from 'lodash';
 import { Loader as MantineLoader } from '@mantine/core';
 import { ContextContainer, CONTEXT_CONTAINER_PROP_TYPES } from '../../layout';
 import { Text } from '../../typography';
+import { LoaderStyles } from './Loader.styles';
 
 export const LOADER_LABEL_POSITIONS = ['right', 'bottom'];
 
@@ -22,20 +23,23 @@ export const LOADER_PROP_TYPES = {
   labelPosition: PropTypes.oneOf(LOADER_LABEL_POSITIONS),
   /** Controls if Loader uses aria role */
   useAria: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 const Loader = ({ padded, label, labelPosition, useAria, ...props }) => {
   const direction = useMemo(() => (labelPosition === 'right' ? 'row' : 'column'), [labelPosition]);
+  const { classes, cx } = LoaderStyles({}, { name: 'Loader' });
 
   return (
     <ContextContainer
+      {...props}
+      className={cx(props.className, classes.root)}
       direction={direction}
       padded={padded}
       alignItems="center"
       justifyContent="center"
-      role={useAria ? 'progressbar' : undefined}
+      role={useAria ? 'progress' : undefined}
       aria-label={useAria ? 'BubblesLoader' : undefined}
-      {...props}
     >
       <MantineLoader />
       {isString(label) && <Text>{label}</Text>}
diff --git a/packages/components/src/feedback/Loader/Loader.styles.js b/packages/components/src/feedback/Loader/Loader.styles.js
index 2c19d51d9..d59022c2b 100644
--- a/packages/components/src/feedback/Loader/Loader.styles.js
+++ b/packages/components/src/feedback/Loader/Loader.styles.js
@@ -1,10 +1,17 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins';
+import { getFontExpressive } from '../../theme.mixins';
+
+const LoaderStyles = createStyles((theme) => {
+  const loaderTheme = theme.other.core;
 
-export const LoaderStyles = createStyles((theme, {}) => {
   return {
     root: {
       ...getFontExpressive(theme.fontSizes['2']),
+      svg: {
+        stroke: loaderTheme.color.primary['300'],
+      },
     },
   };
 });
+
+export { LoaderStyles };
diff --git a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js
index 6b0168ea5..176a6b64c 100644
--- a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js
+++ b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js
@@ -20,8 +20,8 @@ export const IMAGE_PREVIEW_INPUT_PROP_TYPES = {
     uploadButton: PropTypes.string,
     changeImage: PropTypes.string,
   }),
-  value: PropTypes.instanceOf(File),
-  previewURL: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(File)]),
+  value: PropTypes.any,
+  previewURL: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
   previewStyle: PropTypes.object,
   control: PropTypes.element,
   onChange: PropTypes.func,
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 778f51d42..b9eb0fef8 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -43,6 +43,7 @@ export {
   getPaddings,
   getHtmlStyles,
   getBoxShadowFromToken,
+  getFocusDefaultBorder,
 } from './theme.mixins';
 export { PALETTE } from './theme.constants';
 export { COLORS } from './theme.tokens';
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.constants.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.constants.js
index 61996c45c..30f8263c4 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.constants.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.constants.js
@@ -7,6 +7,10 @@ export const TOTAL_LAYOUT_HEADER_PROP_TYPES = {
   formTitlePlaceholder: PropTypes.string,
   compact: PropTypes.bool,
   icon: PropTypes.element,
+  onCancel: PropTypes.func,
+  children: PropTypes.node,
+  cancelable: PropTypes.bool,
+  direction: PropTypes.oneOf(['row', 'column']),
 };
 
 export const TOTAL_LAYOUT_HEADER_DEFAULT_PROPS = {
@@ -14,4 +18,6 @@ export const TOTAL_LAYOUT_HEADER_DEFAULT_PROPS = {
   icon: <Icon />,
   formTitlePlaceholder: '',
   compact: false,
+  cancelable: true,
+  direction: 'column',
 };
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js
index 412d1375c..72690afc5 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js
@@ -18,10 +18,12 @@ const TotalLayoutHeader = ({
   children,
   onCancel,
   compact = false,
+  direction = 'column',
+  cancelable = true,
 }) => {
   const { watch } = useFormContext();
   const formValues = watch();
-  const { classes } = TotalLayoutHeaderStyles({ compact, children });
+  const { classes } = TotalLayoutHeaderStyles({ compact, direction, children });
 
   return (
     <Stack fullWidth fullHeight className={classes.headerContainer} direction="column">
@@ -54,14 +56,18 @@ const TotalLayoutHeader = ({
         </Stack>
         {/* CANCEL BUTTON */}
         <Stack alingItems="center">
-          <Button variant="link" type="button" leftIcon={<CrossIcon />} onClick={onCancel}>
-            Cancelar
-          </Button>
+          {/* CHILDREN */}
+          {!!children && direction === 'row' && children}
+          {cancelable && (
+            <Button variant="link" type="button" leftIcon={<CrossIcon />} onClick={onCancel}>
+              Cancelar
+            </Button>
+          )}
         </Stack>
       </Stack>
 
       {/* CHILDREN */}
-      {children && (
+      {!!children && direction === 'column' && (
         <Stack style={{ maxHeight: '40px', minHeight: '40px', marginTop: '12px' }}>
           {children}
         </Stack>
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.stories.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.stories.js
index bd9694f7e..2ebae5dc8 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.stories.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.stories.js
@@ -5,6 +5,8 @@ import { TotalLayoutHeader } from './TotalLayoutHeader';
 import { TOTAL_LAYOUT_HEADER_DEFAULT_PROPS } from './TotalLayoutHeader.constants';
 import mdx from './TotalLayoutHeader.mdx';
 import { ContextContainer } from '../../ContextContainer';
+import { Stack } from '../../Stack';
+import { Button } from '../../../form/Button';
 
 export default {
   title: 'Atoms/Layout/TotalLayout/TotalLayoutHeader',
@@ -18,12 +20,25 @@ export default {
       // url: 'https://www.figma.com/file/kcSXz3QZFByFDTumNgzPpV/?node-id=2962%3A31342',
     },
   },
-  argTypes: {},
+  argTypes: {
+    direction: {
+      control: 'select',
+      options: ['row', 'column'],
+    },
+  },
 };
 
 const MockComponent = () => (
   <div>MOCK COMPONENT CHILD OF TOTAL LAYOUT HEADER - RESPECTS PADDING</div>
 );
+
+const OtherMockComponent = () => (
+  <Stack>
+    <Button variant="link">Button A</Button>
+    <Button variant="link">Button B</Button>
+    <Button variant="link">Button C</Button>
+  </Stack>
+);
 const Template = (props) => {
   const formMethods = useForm();
 
@@ -32,12 +47,18 @@ const Template = (props) => {
       <ContextContainer
         id="container-for-storybook"
         divided
+        padded
         style={{ height: '100vh', width: '100wh', margin: '-16px', backgroundColor: '#f8f9fb' }}
       >
         <TotalLayoutHeader {...props} />
+
         <TotalLayoutHeader {...props}>
           <MockComponent />
         </TotalLayoutHeader>
+
+        <TotalLayoutHeader {...props} direction="row">
+          <OtherMockComponent />
+        </TotalLayoutHeader>
       </ContextContainer>
     </FormProvider>
   );
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js
index 716e989e6..3545fd5db 100644
--- a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js
+++ b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js
@@ -1,32 +1,35 @@
 import { createStyles } from '@mantine/styles';
 
-const TotalLayoutHeaderStyles = createStyles((theme, { children, compact }) => ({
-  root: {},
-  headerContainer: {
-    padding: `${!children ? '16px' : '12px'} 24px`,
-    minHeight: !children ? '72px' : '120px',
-    maxHeight: !children ? '72px' : '120px',
-    backgroundColor: 'white',
-  },
-  header: { height: '40px', maxHeight: '40px' },
-  headerTools: { maxHeight: '40px', minHeight: '40px', marginTop: '12px' },
-  iconContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '1.4rem',
-    width: '32px',
-    height: '32px',
-    textAlign: 'center',
-    marginRight: '8px',
-  },
-  headerTitle: { fontSize: '18px', fontWeight: 600, lineHeight: '24px' },
-  headerSubtitle: {
-    fontSize: '18px',
-    fontWeight: 400,
-    lineHeight: '24px',
-    marginLeft: !compact && '40px',
-  },
-}));
+const TotalLayoutHeaderStyles = createStyles((theme, { children, direction, compact }) => {
+  const expandedHeader = direction === 'column' && children;
+  return {
+    root: {},
+    headerContainer: {
+      padding: `${!expandedHeader ? '16px' : '12px'} 24px`,
+      minHeight: !expandedHeader ? '72px' : '120px',
+      maxHeight: !expandedHeader ? '72px' : '120px',
+      backgroundColor: 'white',
+    },
+    header: { height: '40px', maxHeight: '40px' },
+    headerTools: { maxHeight: '40px', minHeight: '40px', marginTop: '12px' },
+    iconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '1.4rem',
+      width: '32px',
+      height: '32px',
+      textAlign: 'center',
+      marginRight: '8px',
+    },
+    headerTitle: { fontSize: '18px', fontWeight: 600, lineHeight: '24px' },
+    headerSubtitle: {
+      fontSize: '18px',
+      fontWeight: 400,
+      lineHeight: '24px',
+      marginLeft: !compact && '40px',
+    },
+  };
+});
 
 export { TotalLayoutHeaderStyles };
diff --git a/packages/components/src/navigation/Anchor/Anchor.styles.js b/packages/components/src/navigation/Anchor/Anchor.styles.js
index 80f7bc488..f05478a85 100644
--- a/packages/components/src/navigation/Anchor/Anchor.styles.js
+++ b/packages/components/src/navigation/Anchor/Anchor.styles.js
@@ -1,11 +1,20 @@
 import { createStyles } from '@mantine/styles';
 
-export const AnchorStyles = createStyles((theme, {}) => {
+const AnchorStyles = createStyles((theme) => {
+  const buttonTheme = theme.other.button;
   return {
     root: {
-      textDecoration: 'underline',
-      color: theme.colors.interactive01,
+      textDecoration: buttonTheme.textDecoration.underLine,
+      color: buttonTheme.content.color.secondary.default,
       cursor: 'pointer',
+      '&:hover': {
+        color: buttonTheme.content.color.primary.default,
+      },
+      '&:active': {
+        color: buttonTheme.content.color.secondary.pressed,
+      },
     },
   };
 });
+
+export { AnchorStyles };
diff --git a/packages/components/src/theme.constants.js b/packages/components/src/theme.constants.js
index 5b6a4e343..7cb6090c7 100644
--- a/packages/components/src/theme.constants.js
+++ b/packages/components/src/theme.constants.js
@@ -1,6 +1,6 @@
 export const PALETTE = {
   mainPrimary: '#212B3D',
-  mainSecondary: '#4F96FF',
+  mainSecondary: '#B4E600',
   mainAccent: '#ECED67',
   mainWhite: '#FFFFFF',
   mainBlack: '#1A202B',
@@ -17,7 +17,7 @@ export const PALETTE = {
   primary10: '#F1F5F9',
   primary5: '#F7F8FA',
 
-  secondary100: '#3C72C2',
+  secondary100: '#B4E600',
   secondary40: '#82B4FF',
   secondary20: '#D8E8FF',
   secondary10: '#212B3D',
@@ -40,14 +40,14 @@ export const PALETTE = {
   interactive20: '#D8E8FF',
   interactive10: '#F1F7FF',
 
-  faticError: '#D13B3B',
-  faticErrorLight: '#FFF7F7',
-  faticSuccess: '#5CBC6A',
-  faticSuccessLight: '#F8FFEE',
-  faticWarning: '#E0914B',
-  faticWarningLight: '#FEFBE8',
-  faticInfo: '#384FE3',
-  faticInfoLight: '#D8E8FF',
+  faticError: '#B52A2A',
+  faticErrorLight: '#F7DEDE',
+  faticSuccess: '#368442',
+  faticSuccessLight: '#E4F4E6',
+  faticWarning: '#BA7609',
+  faticWarningLight: '#FEF3E1',
+  faticInfo: '#98C200',
+  faticInfoLight: '#F1FFBD',
   faticHighlight: '#FEFF8C',
 };
 
diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
index 43875e42a..8f8f58bf8 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",
@@ -5055,7 +5082,7 @@ export default {
           "type": "color"
         },
         "muted": {
-          "value": "#878D96",
+          "value": "#4D5358",
           "type": "color"
         },
         "icon": {
@@ -5393,7 +5420,7 @@ export default {
           "type": "color"
         },
         "muted": {
-          "value": "#878D96",
+          "value": "#4D5358",
           "type": "color"
         },
         "icon": {
diff --git a/packages/notifications/src/Notification/Notification.styles.js b/packages/notifications/src/Notification/Notification.styles.js
index 08e024342..ec4364a7b 100644
--- a/packages/notifications/src/Notification/Notification.styles.js
+++ b/packages/notifications/src/Notification/Notification.styles.js
@@ -1,9 +1,8 @@
 import {
   createStyles,
-  pxToRem,
   getPaddings,
-  getFontExpressive,
   getFontProductive,
+  getFocusDefaultBorder,
 } from '@bubbles-ui/components';
 
 import { CONTEXT_TYPES } from '../NotificationProvider/context';
@@ -28,8 +27,9 @@ function getColor(theme, severity) {
   }[severity];
 }
 
-export const NotificationStyles = createStyles((theme, { hasIcon, severity, type }) => {
-  let root = {
+const NotificationStyles = createStyles((theme, { hasIcon, severity, type }) => {
+  const buttonActionTheme = theme.other.buttonAction;
+  const root = {
     boxShadow: theme.shadows.shadow04,
     backgroundColor: theme.colors.uiBackground05,
     ...getPaddings(theme.spacing[4], theme.spacing[3]),
@@ -44,21 +44,21 @@ export const NotificationStyles = createStyles((theme, { hasIcon, severity, type
     },
   };
 
-  let message = {
+  const message = {
     color: theme.colors.text08,
   };
 
-  let description = {
+  const description = {
     ...getFontProductive(theme.fontSizes[1]),
     color: theme.colors.text08,
   };
 
-  let title = {
+  const title = {
     ...getFontProductive(theme.fontSizes[2], 500),
     color: theme.colors.text07,
   };
 
-  let closeButton = {
+  const closeButton = {
     color: theme.colors.text05,
     '&:hover': {
       background: theme.colors.uiBackground03,
@@ -71,6 +71,17 @@ export const NotificationStyles = createStyles((theme, { hasIcon, severity, type
     description.color = 'black';
     title.color = 'black';
     closeButton.color = 'black';
+    closeButton['&:hover'] = {
+      background: buttonActionTheme.background.color.primary.hover,
+    };
+    closeButton['&:active'] = {
+      backgroundColor: buttonActionTheme.background.color.primary.pressed,
+    };
+    closeButton['&:focus-visible'] = {
+      backgroundColor: buttonActionTheme.background.color.primary.hover,
+      ...getFocusDefaultBorder(theme),
+      outline: 'none',
+    };
   }
 
   return {
@@ -84,3 +95,5 @@ export const NotificationStyles = createStyles((theme, { hasIcon, severity, type
     closeButton,
   };
 });
+
+export { NotificationStyles };