diff --git a/app/client/packages/design-system/widgets/src/components/Avatar/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Avatar/src/styles.module.css
index f3172cc403..abeb0956b1 100644
--- a/app/client/packages/design-system/widgets/src/components/Avatar/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Avatar/src/styles.module.css
@@ -2,18 +2,18 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--sizing-8);
-  height: var(--sizing-8);
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
 }
 
 .avatar[data-size="small"] {
-  width: var(--sizing-6);
-  height: var(--sizing-6);
+  width: var(--icon-size-2);
+  height: var(--icon-size-2);
 }
 
 .avatar[data-size="large"] {
-  width: var(--sizing-10);
-  height: var(--sizing-10);
+  width: var(--icon-size-4);
+  height: var(--icon-size-4);
 }
 
 /* if the avatar has div, that means no source is provided. For this case, we want to add a background color and border radius */
diff --git a/app/client/packages/design-system/widgets/src/components/Text/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Text/src/styles.module.css
index a6dae07300..ca3d6294f7 100644
--- a/app/client/packages/design-system/widgets/src/components/Text/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Text/src/styles.module.css
@@ -10,6 +10,11 @@
       color: var(--color-fg-$(color));
     }
   }
+
+  /* Adding as special case as we can't add neutral-subtle to $colors variable, as that variable is used generically for many components ( button ). */
+  &[data-color="neutral-subtle"] {
+    color: var(--color-fg-neutral-subtle);
+  }
 }
 
 .clampedText {
diff --git a/app/client/packages/design-system/widgets/src/components/Text/src/types.ts b/app/client/packages/design-system/widgets/src/components/Text/src/types.ts
index c2aa405326..66a4a4c5d5 100644
--- a/app/client/packages/design-system/widgets/src/components/Text/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Text/src/types.ts
@@ -13,7 +13,7 @@ export interface TextProps {
   /** Color of the text
    * @default inherit
    */
-  color?: keyof typeof COLORS;
+  color?: keyof typeof COLORS | "neutral-subtle";
   /** Sets the weight (or boldness) of the font
    * @default false
    */