diff --git a/apps/storybook/assets/images/defaultAvatar.svg b/apps/storybook/assets/images/defaultAvatar.svg
index 6463f308..61a6f90f 100644
--- a/apps/storybook/assets/images/defaultAvatar.svg
+++ b/apps/storybook/assets/images/defaultAvatar.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="none"><g clip-path="url(#a)"><path fill="#F0F0F0" d="M0 0h72v72H0z"/><mask id="b" width="58" height="58" x="7" y="7" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#D9D9D9" d="M7.875 7.875h56.25v56.25H7.875z"/></mask><g mask="url(#b)"><path fill="#D0D0D0" d="M36 36c-2.578 0-4.785-.918-6.621-2.754-1.836-1.836-2.754-4.043-2.754-6.621 0-2.578.918-4.785 2.754-6.621 1.836-1.836 4.043-2.754 6.621-2.754 2.578 0 4.785.918 6.621 2.754 1.836 1.836 2.754 4.043 2.754 6.621 0 2.578-.918 4.785-2.754 6.621C40.785 35.082 38.578 36 36 36ZM21.937 54.75c-1.289 0-2.392-.459-3.31-1.377-.918-.918-1.377-2.021-1.377-3.31v-1.876c0-1.328.342-2.548 1.025-3.662A6.834 6.834 0 0 1 21 41.977a34.79 34.79 0 0 1 7.383-2.725c2.5-.605 5.039-.908 7.617-.908 2.578 0 5.117.303 7.617.908A34.79 34.79 0 0 1 51 41.977a6.834 6.834 0 0 1 2.725 2.548 6.865 6.865 0 0 1 1.025 3.663v1.874c0 1.29-.459 2.393-1.377 3.311-.918.918-2.021 1.377-3.31 1.377H21.936Z"/></g></g><rect width="70" height="70" x="1" y="1" stroke="#fff" stroke-width="2" rx="35"/><defs><clipPath id="a"><rect width="72" height="72" fill="#fff" rx="36"/></clipPath></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" fill="none"><g clip-path="url(#a)"><path fill="#F0F0F0" d="M0 0h256v256H0z"/><mask id="b" width="200" height="200" x="28" y="28" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#D9D9D9" d="M28 28h200v200H28z"/></mask><g mask="url(#b)"><path fill="#D0D0D0" d="M128 128c-9.167 0-17.014-3.264-23.542-9.792-6.527-6.527-9.791-14.375-9.791-23.541 0-9.167 3.264-17.014 9.791-23.542 6.528-6.528 14.375-9.792 23.542-9.792 9.167 0 17.014 3.264 23.542 9.792 6.527 6.528 9.791 14.375 9.791 23.542 0 9.166-3.264 17.014-9.791 23.541C145.014 124.736 137.167 128 128 128Zm-50 66.667c-4.583 0-8.507-1.632-11.77-4.896-3.265-3.264-4.897-7.188-4.897-11.771v-6.667c0-4.722 1.216-9.062 3.646-13.02 2.43-3.959 5.66-6.98 9.688-9.063 8.61-4.306 17.36-7.535 26.25-9.687a114.64 114.64 0 0 1 27.083-3.23 114.64 114.64 0 0 1 27.083 3.23c8.889 2.152 17.639 5.381 26.25 9.687 4.028 2.083 7.257 5.104 9.688 9.063 2.43 3.958 3.646 8.298 3.646 13.02V178c0 4.583-1.632 8.507-4.896 11.771-3.264 3.264-7.188 4.896-11.771 4.896H78Z"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h256v256H0z"/></clipPath></defs></svg>
diff --git a/packages/syntax-core/src/Avatar/Avatar.module.css b/packages/syntax-core/src/Avatar/Avatar.module.css
index 0f46ad2b..b407b245 100644
--- a/packages/syntax-core/src/Avatar/Avatar.module.css
+++ b/packages/syntax-core/src/Avatar/Avatar.module.css
@@ -15,7 +15,12 @@
 }
 
 .avatarImageOutlineCambio {
-  border: 2px solid var(--color-cambio-gray-100);
+  border: 1px solid var(--color-cambio-gray-100);
+}
+
+.xs {
+  width: 24px;
+  height: 24px;
 }
 
 .sm {
@@ -38,6 +43,11 @@
   height: 129px;
 }
 
+.xsCambio {
+  width: 24px;
+  height: 24px;
+}
+
 .smCambio {
   width: 32px;
   height: 32px;
diff --git a/packages/syntax-core/src/Avatar/Avatar.stories.tsx b/packages/syntax-core/src/Avatar/Avatar.stories.tsx
index b13c3666..cbdd1857 100644
--- a/packages/syntax-core/src/Avatar/Avatar.stories.tsx
+++ b/packages/syntax-core/src/Avatar/Avatar.stories.tsx
@@ -13,7 +13,7 @@ export default {
   },
   argTypes: {
     size: {
-      options: ["sm", "md", "lg", "xl"],
+      options: ["xs", "sm", "md", "lg", "xl"],
       control: { type: "radio" },
     },
   },
diff --git a/packages/syntax-core/src/Avatar/Avatar.tsx b/packages/syntax-core/src/Avatar/Avatar.tsx
index 63fc36af..6f61fe56 100644
--- a/packages/syntax-core/src/Avatar/Avatar.tsx
+++ b/packages/syntax-core/src/Avatar/Avatar.tsx
@@ -6,6 +6,7 @@ import { useAvatarGroup } from "../AvatarGroup/AvatarGroup";
 import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 const sizeToIconStyles = {
+  xs: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
   sm: { bottom: 6, marginInlineEnd: 2, height: 4, width: 4 },
   md: { bottom: 6, marginInlineEnd: 2, height: 8, width: 8 },
   lg: { bottom: 6, marginInlineEnd: 6, height: 12, width: 12 },
@@ -13,6 +14,7 @@ const sizeToIconStyles = {
 } as const;
 
 const sizeToMarginClassic = {
+  xs: -16,
   sm: -16,
   md: -28,
   lg: -48,
@@ -20,8 +22,9 @@ const sizeToMarginClassic = {
 } as const;
 
 const sizeToMarginCambio = {
-  sm: -12,
-  md: -20,
+  xs: -10,
+  sm: -14,
+  md: -22,
   lg: -28,
   xl: -28,
 } as const;
@@ -36,7 +39,7 @@ function AvatarInternal({
   accessibilityLabel: string;
   icon?: React.ReactElement;
   outline?: boolean;
-  size?: "sm" | "md" | "lg" | "xl";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   src: string;
 }): ReactElement {
   const { themeName } = useTheme();
@@ -110,6 +113,7 @@ const Avatar = ({
    * * `xl`: 128px
    *
    * Cambio:
+   * * `xs`: 24px (Cambio only)
    * * `sm`: 32px
    * * `md`: 48px
    * * `lg`: 64px
@@ -117,7 +121,7 @@ const Avatar = ({
    *
    * @defaultValue `md`
    */
-  size?: "sm" | "md" | "lg" | "xl";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   /**
    * URL of the image to display as the avatar.
    */
diff --git a/packages/syntax-core/src/AvatarGroup/AvatarGroup.stories.tsx b/packages/syntax-core/src/AvatarGroup/AvatarGroup.stories.tsx
index 43bd715a..71e7e5f8 100644
--- a/packages/syntax-core/src/AvatarGroup/AvatarGroup.stories.tsx
+++ b/packages/syntax-core/src/AvatarGroup/AvatarGroup.stories.tsx
@@ -18,7 +18,7 @@ export default {
   },
   argTypes: {
     size: {
-      options: ["sm", "md", "lg", "xl"],
+      options: ["xs", "sm", "md", "lg", "xl"],
       control: { type: "radio" },
     },
     orientation: {
diff --git a/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx b/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx
index 1f56955e..44a57f74 100644
--- a/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx
+++ b/packages/syntax-core/src/AvatarGroup/AvatarGroup.tsx
@@ -8,6 +8,7 @@ import Box from "../Box/Box";
 import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 type Size =
+  | "xs"
   | "sm"
   | "md"
   | "lg"
@@ -56,6 +57,7 @@ export default function AvatarGroup({
    * * `xl`: 128px
    *
    * Cambio:
+   * * `xs`: 24px (Cambio only)
    * * `sm`: 32px
    * * `md`: 48px
    * * `lg`: 64px
diff --git a/packages/syntax-core/src/Button/Button.tsx b/packages/syntax-core/src/Button/Button.tsx
index b1dfea4b..3f0ceb47 100644
--- a/packages/syntax-core/src/Button/Button.tsx
+++ b/packages/syntax-core/src/Button/Button.tsx
@@ -99,12 +99,10 @@ type ButtonProps = {
   fullWidth?: boolean;
   /**
    * The icon to be displayed at the start of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
-   * Note: startIcon is not supported in the Cambio theme
    */
   startIcon?: React.ComponentType<{ className?: string }>;
   /**
    * The icon to be displayed at the end of the button. Please use a [Rounded Material Icon](https://material.io/resources/icons/?style=round)
-   * Note: endIcon is not supported in the Cambio theme
    */
   endIcon?: React.ComponentType<{ className?: string }>;
   /**
@@ -189,7 +187,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           },
         )}
       >
-        {!loading && StartIcon && themeName === "classic" && (
+        {!loading && StartIcon && (
           <StartIcon className={classNames(styles.icon, iconSize[size])} />
         )}
         {((loading && loadingText) || (!loading && text)) && (
@@ -209,7 +207,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             </Typography>
           </Box>
         )}
-        {!loading && EndIcon && themeName === "classic" && (
+        {!loading && EndIcon && (
           <EndIcon className={classNames(styles.icon, iconSize[size])} />
         )}
         {loading && (
diff --git a/packages/syntax-core/src/Checkbox/Checkbox.tsx b/packages/syntax-core/src/Checkbox/Checkbox.tsx
index 33d047c7..48e06029 100644
--- a/packages/syntax-core/src/Checkbox/Checkbox.tsx
+++ b/packages/syntax-core/src/Checkbox/Checkbox.tsx
@@ -119,14 +119,22 @@ const Checkbox = ({
       )}
     >
       <div className={checked ? checkedStyling : uncheckedStyling}>
-        {checked && (
+        {checked && themeName === "classic" && (
           <svg aria-hidden="true" viewBox="0 0 24 24" width={iconWidth[size]}>
             <path
-              fill={themeName === "classic" ? "#fff" : "#050500"}
+              fill="#fff"
               d="m9 16.2-3.5-3.5a.9839.9839 0 0 0-1.4 0c-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4a.9839.9839 0 0 0-1.4 0L9 16.2z"
             ></path>
           </svg>
         )}
+        {checked && themeName === "cambio" && (
+          <svg aria-hidden="true" viewBox="0 0 24 24" width={iconWidth[size]}>
+            <path
+              fill={error ? "#6d0002" : "#050500"}
+              d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4 9.55 18Z"
+            ></path>
+          </svg>
+        )}
       </div>
       <input
         data-testid={dataTestId}
diff --git a/packages/syntax-core/src/Chip/Chip.stories.tsx b/packages/syntax-core/src/Chip/Chip.stories.tsx
index 3866926a..cb36c6e1 100644
--- a/packages/syntax-core/src/Chip/Chip.stories.tsx
+++ b/packages/syntax-core/src/Chip/Chip.stories.tsx
@@ -18,6 +18,9 @@ export default {
     text: "text on chip",
     size: "sm",
     on: "lightBackground",
+    disabled: false,
+    "data-testid": "",
+    dangerouslyForceFocusStyles: false,
   },
   argTypes: {
     on: {
diff --git a/packages/syntax-core/src/Chip/Chip.tsx b/packages/syntax-core/src/Chip/Chip.tsx
index 2efc484d..880d1483 100644
--- a/packages/syntax-core/src/Chip/Chip.tsx
+++ b/packages/syntax-core/src/Chip/Chip.tsx
@@ -159,6 +159,7 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
               themeName === "classic" ? typographySize[transformedSize] : 100
             }
             color={color}
+            weight={themeName === "classic" ? "regular" : "medium"}
           >
             {text}
           </Typography>
diff --git a/packages/syntax-core/src/Dialog/Dialog.tsx b/packages/syntax-core/src/Dialog/Dialog.tsx
index 8d22609a..cfaff2db 100644
--- a/packages/syntax-core/src/Dialog/Dialog.tsx
+++ b/packages/syntax-core/src/Dialog/Dialog.tsx
@@ -15,6 +15,7 @@ import styles from "./Dialog.module.css";
 import { Dialog as ReactAriaDialog } from "react-aria-components";
 import classNames from "classnames";
 import type Box from "../Box/Box";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 type DialogSize = "sm" | "md" | "lg";
 type DialogRounding = "lg" | "xl";
@@ -71,6 +72,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
   } = props;
 
   const { padding } = useContext(DialogContext);
+  const { themeName } = useTheme();
 
   return (
     <ReactAriaDialog
@@ -89,7 +91,11 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
         colorStyles.whiteBackgroundColor,
         paddingStyles[`paddingX${padding ?? sizeToPadding[size]}`],
         paddingStyles[`paddingY${padding ?? sizeToPadding[size]}`],
-        roundingStyles[`rounding${sizeToRounding[size]}`],
+        roundingStyles[
+          themeName === "classic"
+            ? (`rounding${sizeToRounding[size]}` as const)
+            : "roundingmdCambio"
+        ],
         elevationStyles.elevation400BoxShadow,
         layoutStyles.fullMaxHeight,
         layoutStyles.visibilityVisible,
diff --git a/packages/syntax-core/src/Modal/Modal.tsx b/packages/syntax-core/src/Modal/Modal.tsx
index 82698b97..ce30db69 100644
--- a/packages/syntax-core/src/Modal/Modal.tsx
+++ b/packages/syntax-core/src/Modal/Modal.tsx
@@ -136,7 +136,11 @@ export default function Modal({
   /**
    * The size of the card
    *
-   * * `sm`: 400px
+   * Classic:
+   * * `sm`: 400px (Classic only)
+   * * `lg`: 600px
+   *
+   * Cambio:
    * * `lg`: 600px
    *
    *
@@ -177,8 +181,10 @@ export default function Modal({
               rounding={themeName === "classic" ? "xl" : "md"}
               display="flex"
               direction="column"
+              marginStart={4}
+              marginEnd={4}
               minWidth={240}
-              maxWidth={sizeWidth[size]}
+              maxWidth={sizeWidth[themeName === "classic" ? size : "lg"]}
               width="100%"
               dangerouslySetInlineStyle={{ __style: { overflow: "hidden" } }}
             >
@@ -218,13 +224,13 @@ export default function Modal({
               {image && <Box maxHeight={200}>{image}</Box>}
               <Box
                 display="flex"
-                gap={3}
+                gap={themeName === "classic" ? 3 : 4}
                 direction="column"
                 padding={themeName === "classic" ? 9 : 6}
               >
                 <Heading
                   as="h1"
-                  size={themeName === "classic" ? 500 : 400}
+                  size={themeName === "classic" ? 500 : 600}
                   fontStyle={themeName === "classic" ? "sans-serif" : "serif"}
                 >
                   {header}
@@ -237,6 +243,7 @@ export default function Modal({
                     display="flex"
                     direction="column"
                     gap={3}
+                    marginTop={themeName === "classic" ? 0 : 2}
                     smDirection="row"
                     smJustifyContent="end"
                     lgDirection="row"
diff --git a/packages/syntax-core/src/RadioButton/RadioButton.tsx b/packages/syntax-core/src/RadioButton/RadioButton.tsx
index 1d9ceec3..3b4c619c 100644
--- a/packages/syntax-core/src/RadioButton/RadioButton.tsx
+++ b/packages/syntax-core/src/RadioButton/RadioButton.tsx
@@ -123,7 +123,7 @@ const RadioButton = ({
       <div className={themeName === "classic" ? classicStyles : cambioStyles} />
       {themeName === "cambio" && checked && (
         <Box
-          backgroundColor="gray900"
+          backgroundColor={error ? "destructive900" : "gray900"}
           width={size === "md" ? 12 : 8}
           height={size === "md" ? 12 : 8}
           position="absolute"
diff --git a/packages/syntax-core/src/SelectList/SelectList.module.css b/packages/syntax-core/src/SelectList/SelectList.module.css
index cecc6aa7..f89bc427 100644
--- a/packages/syntax-core/src/SelectList/SelectList.module.css
+++ b/packages/syntax-core/src/SelectList/SelectList.module.css
@@ -12,17 +12,6 @@
   opacity: 0.5;
 }
 
-.labelCambio {
-  left: 1px; /* Adjust to 1px border */
-  right: 1px; /* Adjust to 1px border */
-  position: absolute;
-  border-radius: 8px;
-  pointer-events: none;
-  width: 100%;
-  padding-top: 7px;
-  z-index: 1;
-}
-
 .selectWrapper {
   display: flex;
   position: relative;
@@ -55,7 +44,7 @@
   box-sizing: border-box;
   font-size: 14px;
   height: 48px;
-  padding: 12px 36px 0 12px;
+  padding: 12px 36px 12px 12px;
 }
 
 .selectMouseFocusStyling {
diff --git a/packages/syntax-core/src/SelectList/SelectList.tsx b/packages/syntax-core/src/SelectList/SelectList.tsx
index 1195f0c3..76d971bc 100644
--- a/packages/syntax-core/src/SelectList/SelectList.tsx
+++ b/packages/syntax-core/src/SelectList/SelectList.tsx
@@ -113,11 +113,8 @@ export default function SelectList({
       })}
     >
       {label && (
-        <label
-          htmlFor={selectId}
-          className={classNames(themeName === "cambio" && styles.labelCambio)}
-        >
-          <Box paddingX={themeName === "classic" ? 1 : 3}>
+        <label htmlFor={selectId}>
+          <Box paddingX={1}>
             <Typography size={100} color="gray700">
               {label}
             </Typography>
@@ -176,7 +173,7 @@ export default function SelectList({
         </div>
       </div>
       {(helperText || errorText) && (
-        <Box paddingX={themeName === "classic" ? 1 : 0}>
+        <Box paddingX={1}>
           <Typography
             size={100}
             color={errorText ? "destructive-primary" : "gray700"}
diff --git a/packages/syntax-core/src/TextArea/TextArea.module.css b/packages/syntax-core/src/TextArea/TextArea.module.css
index 264ea20e..df29ab74 100644
--- a/packages/syntax-core/src/TextArea/TextArea.module.css
+++ b/packages/syntax-core/src/TextArea/TextArea.module.css
@@ -18,13 +18,6 @@
 }
 
 .textareaCambio {
-  padding: 28px 12px 12px;
-}
-
-.fixTextareaHeight {
-  line-height: 0;
-}
-
-.labelCambio {
-  padding: 12px 0 4px;
+  display: block; /* Fixes chrome bug https://stackoverflow.com/questions/63430767; */
+  padding: 12px;
 }
diff --git a/packages/syntax-core/src/TextArea/TextArea.tsx b/packages/syntax-core/src/TextArea/TextArea.tsx
index c48063f3..b118b9ad 100644
--- a/packages/syntax-core/src/TextArea/TextArea.tsx
+++ b/packages/syntax-core/src/TextArea/TextArea.tsx
@@ -102,58 +102,42 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         }}
         position={themeName === "cambio" ? "relative" : undefined}
       >
-        <label
-          className={classNames(
-            themeName === "classic"
-              ? textFieldStyles.label
-              : textFieldStyles.labelCambio,
-            themeName === "cambio" && styles.labelCambio,
-          )}
-          htmlFor={inputId}
-        >
-          <Box paddingX={themeName === "classic" ? 1 : 3} width="100%">
+        <label className={textFieldStyles.label} htmlFor={inputId}>
+          <Box paddingX={1}>
             <Typography size={100} color="gray700">
               {label}
             </Typography>
           </Box>
         </label>
         <Typography size={themeName === "cambio" ? 100 : 200}>
-          <div
+          <textarea
+            data-testid={dataTestId}
+            ref={forwardedRef}
             className={classNames(
-              themeName === "cambio" && styles.fixTextareaHeight,
+              textFieldStyles.textfield,
+              themeName === "classic"
+                ? textFieldStyles.textfieldClassic
+                : textFieldStyles.textfieldCambio,
+              themeName === "classic" && textFieldStyles[size],
+              themeName === "classic" && styles[size],
+              themeName === "classic" ? styles.textarea : styles.textareaCambio,
+              {
+                [themeName === "classic"
+                  ? textFieldStyles.inputError
+                  : textFieldStyles.inputErrorCambio]: errorText,
+              },
             )}
-          >
-            <textarea
-              data-testid={dataTestId}
-              ref={forwardedRef}
-              className={classNames(
-                textFieldStyles.textfield,
-                themeName === "classic"
-                  ? textFieldStyles.textfieldClassic
-                  : textFieldStyles.textfieldCambio,
-                themeName === "classic" && textFieldStyles[size],
-                themeName === "classic" && styles[size],
-                themeName === "classic"
-                  ? styles.textarea
-                  : styles.textareaCambio,
-                {
-                  [themeName === "classic"
-                    ? textFieldStyles.inputError
-                    : textFieldStyles.inputErrorCambio]: errorText,
-                },
-              )}
-              id={inputId}
-              placeholder={placeholder}
-              maxLength={maxLength}
-              onChange={onChange}
-              rows={rows}
-              value={value}
-              disabled={disabled}
-            />
-          </div>
+            id={inputId}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            onChange={onChange}
+            rows={rows}
+            value={value}
+            disabled={disabled}
+          />
         </Typography>
         {(helperText || errorText) && (
-          <Box paddingX={themeName === "classic" ? 1 : 0}>
+          <Box paddingX={1}>
             <Typography
               size={100}
               color={errorText ? "destructive-primary" : "gray700"}
diff --git a/packages/syntax-core/src/TextField/TextField.module.css b/packages/syntax-core/src/TextField/TextField.module.css
index 16f0e314..aa34612b 100644
--- a/packages/syntax-core/src/TextField/TextField.module.css
+++ b/packages/syntax-core/src/TextField/TextField.module.css
@@ -14,7 +14,7 @@
 .textfieldCambio {
   border: 1px solid var(--color-cambio-gray-370);
   border-radius: 8px;
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .textfield:focus {
@@ -30,19 +30,6 @@
   cursor: pointer;
 }
 
-.labelCambio {
-  left: 1px; /* Adjust to 1px border */
-  right: 1px; /* Adjust to 1px border */
-  position: absolute;
-  border-radius: 8px;
-  pointer-events: none;
-  width: 100%;
-}
-
-.labelCambioTextfield {
-  padding-top: 7px;
-}
-
 .sm {
   border-radius: 12px;
   font-size: 12px;
@@ -50,16 +37,8 @@
   padding-inline-end: 12px;
 }
 
-.smCambio {
-  padding: 24px 12px 12px;
-}
-
 .mdCambio {
-  padding: 24px 12px 12px;
-}
-
-.lgCambio {
-  padding: 28px 12px 12px;
+  padding: 12px;
 }
 
 .heightCambio {
diff --git a/packages/syntax-core/src/TextField/TextField.tsx b/packages/syntax-core/src/TextField/TextField.tsx
index 469787fd..a8954141 100644
--- a/packages/syntax-core/src/TextField/TextField.tsx
+++ b/packages/syntax-core/src/TextField/TextField.tsx
@@ -109,17 +109,10 @@ export default function TextField({
           opacity: disabled ? 0.5 : 1,
         },
       }}
-      position={themeName === "cambio" ? "relative" : undefined}
     >
       {label && (
-        <label
-          className={classNames(
-            themeName === "classic" ? styles.label : styles.labelCambio,
-            themeName === "cambio" && styles.labelCambioTextfield,
-          )}
-          htmlFor={inputId}
-        >
-          <Box paddingX={themeName === "classic" ? 1 : 3}>
+        <label className={styles.label} htmlFor={inputId}>
+          <Box paddingX={1}>
             <Typography size={100} color="gray700">
               {label}
             </Typography>
@@ -134,7 +127,7 @@ export default function TextField({
             ? styles.textfieldClassic
             : styles.textfieldCambio,
           themeName === "classic" && styles[size],
-          themeName === "cambio" ? styles[`${size}Cambio`] : undefined,
+          themeName === "cambio" ? styles.mdCambio : undefined,
           themeName === "classic"
             ? styles[`${size}Height`]
             : styles.heightCambio,
@@ -153,7 +146,7 @@ export default function TextField({
         value={value}
       />
       {(helperText || errorText) && (
-        <Box paddingX={themeName === "classic" ? 1 : 0}>
+        <Box paddingX={1}>
           <Typography
             size={100}
             color={errorText ? "destructive-primary" : "gray700"}
diff --git a/packages/syntax-core/src/Tooltip/Tooltip.tsx b/packages/syntax-core/src/Tooltip/Tooltip.tsx
index b8d5718c..660436ab 100644
--- a/packages/syntax-core/src/Tooltip/Tooltip.tsx
+++ b/packages/syntax-core/src/Tooltip/Tooltip.tsx
@@ -22,6 +22,7 @@ import {
   type Placement,
   syntaxToReactAriaPlacement,
 } from "../react-aria-utils/placement";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
 
 function TooltipArrow(props: ReactAriaOverlayArrowProps): ReactElement {
   return (
@@ -68,13 +69,18 @@ export const AriaTooltip = forwardRef<
   { children: childrenProp, onChangeContentVisibility, ...otherProps },
   ref,
 ): ReactElement {
+  const { themeName } = useTheme();
   const className = classNames([
     boxStyles.box,
     colorStyles.gray900Color,
-    colorStyles.gray900BackgroundColor,
+    themeName === "classic"
+      ? colorStyles.gray900BackgroundColor
+      : colorStyles.cambioBlackBackgroundColor,
     paddingStyles.paddingX2,
     paddingStyles.paddingY2,
-    roundingStyles.roundingsm,
+    themeName === "classic"
+      ? roundingStyles.roundingsm
+      : roundingStyles.roundingsmCambio,
     styles.tooltip,
   ]);
   return (
diff --git a/packages/syntax-core/src/Typography/Typography.module.css b/packages/syntax-core/src/Typography/Typography.module.css
index cd092d88..0e7f5a68 100644
--- a/packages/syntax-core/src/Typography/Typography.module.css
+++ b/packages/syntax-core/src/Typography/Typography.module.css
@@ -1,4 +1,5 @@
 .typography {
+  line-height: normal;
   margin: 0;
 }
 
diff --git a/packages/syntax-floating-components/src/Popover/Popover.module.css b/packages/syntax-floating-components/src/Popover/Popover.module.css
index f817a33d..7a22e01a 100644
--- a/packages/syntax-floating-components/src/Popover/Popover.module.css
+++ b/packages/syntax-floating-components/src/Popover/Popover.module.css
@@ -4,3 +4,10 @@
   padding: 28px;
   border-radius: 24px;
 }
+
+.popoverContentCambio {
+  box-sizing: border-box;
+  background-color: var(--color-base-white);
+  padding: 16px;
+  border-radius: 8px;
+}
diff --git a/packages/syntax-floating-components/src/Popover/Popover.tsx b/packages/syntax-floating-components/src/Popover/Popover.tsx
index cde52b7d..9c7d7840 100644
--- a/packages/syntax-floating-components/src/Popover/Popover.tsx
+++ b/packages/syntax-floating-components/src/Popover/Popover.tsx
@@ -19,6 +19,7 @@ import type { Side, Strategy, UseFloatingReturn } from "@floating-ui/react";
 
 import styles from "./Popover.module.css";
 import elevationStyles from "../../../syntax-core/src/elevation/elevation.module.css";
+import { useTheme } from "../../../syntax-core/src/ThemeProvider/ThemeProvider";
 
 type PopoverOptions = {
   /**
@@ -240,6 +241,7 @@ export const PopoverContent = React.forwardRef<
 >(function PopoverContent(props, propRef) {
   const { ...context } = usePopoverContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  const { themeName } = useTheme();
 
   if (!context.open) return null;
 
@@ -248,7 +250,9 @@ export const PopoverContent = React.forwardRef<
       {...context.getFloatingProps(props)}
       ref={ref}
       className={classNames(
-        styles.popoverContent,
+        themeName === "classic"
+          ? styles.popoverContent
+          : styles.popoverContentCambio,
         elevationStyles.elevation400BoxShadow,
       )}
       style={{