diff --git a/front/public/static/systemavatar/claudeInstant_avatar_full.png b/front/public/static/systemavatar/claudeInstant_avatar_full.png
new file mode 100644
index 000000000000..ce5a0af77a54
Binary files /dev/null and b/front/public/static/systemavatar/claudeInstant_avatar_full.png differ
diff --git a/front/public/static/systemavatar/llama_avatar_full.png b/front/public/static/systemavatar/llama_avatar_full.png
new file mode 100644
index 000000000000..4beaeae23d74
Binary files /dev/null and b/front/public/static/systemavatar/llama_avatar_full.png differ
diff --git a/front/public/static/systemavatar/mistral_avatar_full.png b/front/public/static/systemavatar/mistral_avatar_full.png
new file mode 100644
index 000000000000..4a5d486cb36e
Binary files /dev/null and b/front/public/static/systemavatar/mistral_avatar_full.png differ
diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index f4179d226bb4..f4315019b35c 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.1.93",
+  "version": "0.1.96",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.1.93",
+      "version": "0.1.96",
       "license": "ISC",
       "dependencies": {
         "@headlessui/react": "^1.7.17"
diff --git a/sparkle/package.json b/sparkle/package.json
index ed4225e68b1f..4b52c1e02703 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.1.95",
+  "version": "0.1.96",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
diff --git a/sparkle/src/components/Searchbar.tsx b/sparkle/src/components/Searchbar.tsx
index 1807d7261ea1..7545a0a8fee5 100644
--- a/sparkle/src/components/Searchbar.tsx
+++ b/sparkle/src/components/Searchbar.tsx
@@ -1,8 +1,11 @@
-import React from "react";
+import React, { useRef } from "react";
 
-import { MagnifyingGlass } from "@sparkle/icons/stroke";
+import { Icon } from "@sparkle/components/Icon";
 import { classNames } from "@sparkle/lib/utils";
 
+import { MagnifyingGlassStrokeIcon, XMarkIcon } from "..";
+import { IconButton } from "./IconButton";
+
 export function Searchbar({
   placeholder,
   value,
@@ -24,20 +27,33 @@ export function Searchbar({
   disabled?: boolean;
   className?: string;
 }) {
+  const clearInputField = () => {
+    onChange?.("");
+  };
+
   return (
     <div className="flex flex-col">
-      <div className="s-relative s-text-sm s-font-medium s-text-element-800">
+      <div
+        className={classNames(
+          "s-relative s-text-sm s-font-normal",
+          disabled ? "s-text-element-600" : "s-text-element-900"
+        )}
+      >
         <input
           type="text"
           name={name}
           id={name}
           className={classNames(
-            "s-h-9 s-w-full s-rounded-full s-border-structure-200 s-pr-8",
+            "s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2",
+            "s-w-full s-rounded-full  s-bg-structure-50 s-py-1.5 s-pl-4 s-pr-8 s-placeholder-element-600",
+            "s-transition-all s-duration-300 s-ease-out",
             className ?? "",
             !error
-              ? "focus:ring-action-500 s-border-gray-300 focus:s-border-action-500"
-              : "focus:border-red-500 focus:ring-red-500 s-border-red-500",
-            "s-bg-structure-50 s-stroke-structure-50"
+              ? "focus:s-ring-action-300"
+              : "s-ring-red-200 focus:s-ring-red-200",
+            disabled
+              ? "s-cursor-default s-text-element-600"
+              : "s-text-element-900"
           )}
           placeholder={placeholder}
           value={value ?? ""}
@@ -47,11 +63,22 @@ export function Searchbar({
           onKeyDown={onKeyDown}
           disabled={disabled}
         />
-        <MagnifyingGlass className="s-absolute s-right-3 s-top-2 s-h-5 s-w-5" />
+        <div className="s-absolute s-right-0 s-top-0 s-flex s-h-full s-items-center s-pr-3">
+          {value && onChange ? (
+            <IconButton
+              icon={XMarkIcon}
+              variant="secondary"
+              size="sm"
+              onClick={clearInputField}
+            />
+          ) : (
+            <Icon visual={MagnifyingGlassStrokeIcon} size="sm" />
+          )}
+        </div>
       </div>
       <div
         className={classNames(
-          "s-ml-2 s-h-4 s-text-red-500",
+          "s-ml-0.5 s-h-4 s-pl-2 s-pt-2 s-text-xs s-font-normal s-text-red-500",
           showErrorLabel ? "" : "hidden"
         )}
       >
diff --git a/sparkle/src/stories/Searchbar.stories.tsx b/sparkle/src/stories/Searchbar.stories.tsx
index 9e450b6d8fb5..71261619a5c3 100644
--- a/sparkle/src/stories/Searchbar.stories.tsx
+++ b/sparkle/src/stories/Searchbar.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import React from "react";
+import React, { useState } from "react";
 
 import { Searchbar } from "../index_with_tw_base";
 
@@ -10,34 +10,63 @@ const meta = {
 
 export default meta;
 
-export const SearchbarExample = () => (
-  <div className="s-grid s-grid-cols-3 s-gap-4">
-    <Searchbar placeholder="placeholder" name="input" value={null} />
-    <Searchbar
-      placeholder="placeholder"
-      name="input"
-      value={"value"}
-      error={"errored because it's a very long message"}
-      showErrorLabel
-    />
-    <Searchbar
-      placeholder="placeholder"
-      name="input"
-      value={"value"}
-      error={"errored"}
-    />
-    <Searchbar
-      placeholder="placeholder"
-      name="input"
-      value={"value"}
-      error={"errored because it's a very long message"}
-      showErrorLabel
-    />
-    <Searchbar
-      placeholder="placeholder"
-      name="input"
-      value={"disabled"}
-      showErrorLabel
-    />
-  </div>
-);
+export const SearchbarExample = () => {
+  const [inputValue, setInputValue] = useState("");
+  const [inputValue2, setInputValue2] = useState("value");
+  const [inputValue3, setInputValue3] = useState("value");
+  const [inputValue4, setInputValue4] = useState("value");
+
+  const handleChange = (value: string) => {
+    setInputValue(value);
+  };
+  const handleChange2 = (value: string) => {
+    setInputValue2(value);
+  };
+  const handleChange3 = (value: string) => {
+    setInputValue3(value);
+  };
+  const handleChange4 = (value: string) => {
+    setInputValue4(value);
+  };
+
+  return (
+    <div className="s-grid s-grid-cols-3 s-gap-4">
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={inputValue}
+        onChange={handleChange}
+      />
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={inputValue2}
+        onChange={handleChange2}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={inputValue3}
+        onChange={handleChange3}
+        error={"errored"}
+      />
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={inputValue4}
+        onChange={handleChange4}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Searchbar
+        placeholder="placeholder"
+        name="input"
+        value={"disabled"}
+        showErrorLabel
+        disabled
+      />
+    </div>
+  );
+};