diff --git a/front/tailwind.config.js b/front/tailwind.config.js
index a8073d158890..b4d5b6678046 100644
--- a/front/tailwind.config.js
+++ b/front/tailwind.config.js
@@ -150,6 +150,60 @@ module.exports = {
         fadeout: "fadeout 500ms ease-out",
       },
       colors: {
+        separator: {
+          DEFAULT: colors.slate[200],
+          dark: colors.slate[800],
+        },
+        border: {
+          DEFAULT: colors.slate[100],
+          dark: colors.slate[900],
+        },
+        "border-dark": {
+          DEFAULT: colors.slate[200],
+          dark: colors.slate[800],
+        },
+        background: {
+          DEFAULT: colors.white,
+          dark: colors.slate[950],
+        },
+        foreground: {
+          DEFAULT: colors.slate[950],
+          dark: colors.white,
+        },
+        muted: {
+          DEFAULT: colors.slate[50],
+          dark: colors.slate[900],
+        },
+        "muted-foreground": {
+          DEFAULT: colors.slate[500],
+          dark: colors.slate[500],
+        },
+        highlight: {
+          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
+          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
+          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
+          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
+          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
+          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
+          400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
+          300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
+          200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
+          100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
+          50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
+        },
+        primary: {
+          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
+          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
+          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
+          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
+          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
+          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
+          400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
+          300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
+          200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
+          100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
+          50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
+        },
         brand: {
           DEFAULT: colors.emerald[500],
           dark: colors.emerald[500],
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index 30c5f7a21f78..11564bcda7dd 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.265",
+  "version": "0.2.266",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.265",
+      "version": "0.2.266",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index 89d218bb4b07..1193b35bf991 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.265",
+  "version": "0.2.266",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
diff --git a/sparkle/src/components/Chip.tsx b/sparkle/src/components/Chip.tsx
index 09db345dcd98..211a5a2de784 100644
--- a/sparkle/src/components/Chip.tsx
+++ b/sparkle/src/components/Chip.tsx
@@ -24,12 +24,11 @@ type ChipProps = {
 };
 
 const sizeClasses = {
-  xs: "s-h-7 s-text-xs s-font-medium s-px-3 s-gap-2",
-  sm: "s-h-9 s-text-sm s-font-semibold s-px-3 s-gap-2.5",
+  xs: "s-rounded-lg s-h-7 s-text-xs s-font-medium s-px-3 s-gap-2",
+  sm: "s-rounded-xl s-h-9 s-text-sm s-font-semibold s-px-3 s-gap-2.5",
 };
 
-const baseClasses =
-  "s-rounded-lg s-inline-flex s-box-border s-border s-items-center";
+const baseClasses = "s-inline-flex s-box-border s-border s-items-center";
 
 export function Chip({
   size = "xs",
diff --git a/sparkle/tailwind.config.js b/sparkle/tailwind.config.js
index ec11a1ab77fa..c3c97a77588f 100644
--- a/sparkle/tailwind.config.js
+++ b/sparkle/tailwind.config.js
@@ -167,7 +167,7 @@ module.exports = {
       colors: {
         separator: {
           DEFAULT: colors.slate[200],
-          dark: colors.slate[800]
+          dark: colors.slate[800],
         },
         border: {
           DEFAULT: colors.slate[100],
@@ -179,15 +179,15 @@ module.exports = {
         },
         background: {
           DEFAULT: colors.white,
-          dark: colors.slate[950]
+          dark: colors.slate[950],
         },
         foreground: {
           DEFAULT: colors.slate[950],
-          dark: colors.white
+          dark: colors.white,
         },
         muted: {
           DEFAULT: colors.slate[50],
-          dark: colors.slate[900]
+          dark: colors.slate[900],
         },
         "muted-foreground": {
           DEFAULT: colors.slate[500],
@@ -211,17 +211,17 @@ module.exports = {
           50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
         },
         primary: {
-          950: { DEFAULT: colors.slate[950], dark: colors.slate[50] },
-          900: { DEFAULT: colors.slate[900], dark: colors.slate[100] },
-          800: { DEFAULT: colors.slate[800], dark: colors.slate[200] },
-          700: { DEFAULT: colors.slate[700], dark: colors.slate[300] },
-          600: { DEFAULT: colors.slate[600], dark: colors.slate[400] },
-          500: { DEFAULT: colors.slate[500], dark: colors.slate[500] },
-          400: { DEFAULT: colors.slate[400], dark: colors.slate[600] },
-          300: { DEFAULT: colors.slate[300], dark: colors.slate[700] },
-          200: { DEFAULT: colors.slate[200], dark: colors.slate[800] },
-          100: { DEFAULT: colors.slate[100], dark: colors.slate[900] },
-          50: { DEFAULT: colors.slate[50], dark: colors.slate[950] },
+          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
+          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
+          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
+          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
+          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
+          500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
+          400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
+          300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
+          200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
+          100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
+          50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
         },
         action: {
           950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },