diff --git a/sparkle/package-lock.json b/sparkle/package-lock.json
index bba79a7fb03f..80f8a90de2e2 100644
--- a/sparkle/package-lock.json
+++ b/sparkle/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.195",
+  "version": "0.2.196",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@dust-tt/sparkle",
-      "version": "0.2.195",
+      "version": "0.2.196",
       "license": "ISC",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
diff --git a/sparkle/package.json b/sparkle/package.json
index 8c6f139f34c9..ec221a11dfd1 100644
--- a/sparkle/package.json
+++ b/sparkle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.195",
+  "version": "0.2.196",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
diff --git a/sparkle/src/components/Tree.tsx b/sparkle/src/components/Tree.tsx
index ea59c2d63321..0b6d77f7a517 100644
--- a/sparkle/src/components/Tree.tsx
+++ b/sparkle/src/components/Tree.tsx
@@ -49,6 +49,7 @@ interface TreeItemProps {
   label?: string;
   type?: "node" | "item" | "leaf";
   variant?: "file" | "folder" | "database" | "channel";
+  size?: "sm" | "md";
   visual?: React.ReactNode;
   checkbox?: CheckboxProps;
   onChevronClick?: () => void;
@@ -56,6 +57,7 @@ interface TreeItemProps {
   defaultCollapsed?: boolean;
   className?: string;
   actions?: React.ReactNode;
+  areActionsFading?: boolean;
 }
 
 export interface TreeItemPropsWithChildren extends TreeItemProps {
@@ -73,12 +75,14 @@ Tree.Item = function ({
   type = "node",
   className = "",
   variant = "file",
+  size = "sm",
   visual,
   checkbox,
   onChevronClick,
   collapsed,
   defaultCollapsed,
   actions,
+  areActionsFading = true,
   renderTreeItems,
   children,
 }: TreeItemPropsWithChildren | TreeItemPropsWithRender) {
@@ -108,7 +112,8 @@ Tree.Item = function ({
       <div
         className={classNames(
           className ? className : "",
-          "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4 s-py-1"
+          "s-group s-flex s-cursor-default s-flex-row s-items-center s-gap-4",
+          size === "sm" ? "s-py-1" : "s-py-2"
         )}
       >
         {type === "node" && (
@@ -126,8 +131,13 @@ Tree.Item = function ({
         {type === "leaf" && <div className="s-w-5"></div>}
         {checkbox && <Checkbox {...checkbox} />}
 
-        <div className="s-flex s-w-full s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900">
-          <div className="s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center s-gap-1.5 s-text-sm s-font-medium s-text-element-900">
+        <div className="s-flex s-w-full s-items-center">
+          <div
+            className={classNames(
+              "s-grid s-w-full s-grid-cols-[auto,1fr,auto] s-items-center",
+              size === "sm" ? "s-gap-1.5" : "s-gap-2"
+            )}
+          >
             {visual ? (
               visual
             ) : (
@@ -138,9 +148,23 @@ Tree.Item = function ({
               />
             )}
 
-            <div className="s-truncate">{label}</div>
+            <div
+              className={classNames(
+                "s-truncate s-font-medium s-text-element-900",
+                size === "sm" ? "s-text-sm" : "s-text-base"
+              )}
+            >
+              {label}
+            </div>
             {actions && (
-              <div className="s-inline-block s-transform s-pl-5 s-opacity-0 s-duration-300 group-hover:s-opacity-100">
+              <div
+                className={classNames(
+                  "s-inline-block s-pl-5",
+                  areActionsFading
+                    ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
+                    : ""
+                )}
+              >
                 {actions}
               </div>
             )}
diff --git a/sparkle/src/stories/Tree.stories.tsx b/sparkle/src/stories/Tree.stories.tsx
index defe65ccf305..2ecf1e7d3776 100644
--- a/sparkle/src/stories/Tree.stories.tsx
+++ b/sparkle/src/stories/Tree.stories.tsx
@@ -5,7 +5,11 @@ import { v4 as uuidv4 } from "uuid";
 import { Dust } from "@sparkle/icons/solid";
 
 import {
+  Button,
+  Chip,
   CloudArrowDownIcon,
+  Cog6ToothIcon,
+  DriveLogo,
   IconButton,
   IntercomLogo,
   NotionLogo,
@@ -250,11 +254,11 @@ export const TreeExample = () => {
         <div className="s-flex s-flex-col s-gap-3">
           <div className="s-text-xl">With custom visual</div>
           <div>
-            <Tree isBoxed>
+            <Tree>
               <Tree.Item
                 label="Intercom"
                 type="item"
-                visual={<IntercomLogo className="s-h-5 s-w-5" />}
+                visual={<IntercomLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -266,7 +270,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Notion"
                 type="item"
-                visual={<NotionLogo className="s-h-5 s-w-5" />}
+                visual={<NotionLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -278,7 +282,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Slack"
                 type="item"
-                visual={<SlackLogo className="s-h-5 s-w-5" />}
+                visual={<SlackLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -290,7 +294,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Dust"
                 type="item"
-                visual={<Dust color="pink" className="s-h-5 s-w-5" />}
+                visual={<Dust />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -303,6 +307,7 @@ export const TreeExample = () => {
           </div>
         </div>
       </div>
+
       <div className="s-flex s-gap-10">
         <div className="s-flex s-flex-col s-gap-3">
           <div className="s-text-xl">Tree</div>
@@ -529,11 +534,11 @@ export const TreeExample = () => {
         <div className="s-flex s-flex-col s-gap-3">
           <div className="s-text-xl">With custom visual</div>
           <div>
-            <Tree>
+            <Tree isBoxed>
               <Tree.Item
                 label="Intercom"
                 type="item"
-                visual={<IntercomLogo className="s-h-5 s-w-5" />}
+                visual={<IntercomLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -545,7 +550,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Notion"
                 type="item"
-                visual={<NotionLogo className="s-h-5 s-w-5" />}
+                visual={<NotionLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -557,7 +562,7 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Slack"
                 type="item"
-                visual={<SlackLogo className="s-h-5 s-w-5" />}
+                visual={<SlackLogo />}
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -569,7 +574,163 @@ export const TreeExample = () => {
               <Tree.Item
                 label="Dust"
                 type="item"
-                visual={<Dust color="pink" className="s-h-5 s-w-5" />}
+                visual={<Dust />}
+                checkbox={{
+                  variant: "checkable",
+                  checked: false,
+                  onChange: () => {
+                    return;
+                  },
+                }}
+              />
+            </Tree>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SelectDataSourceExample = () => {
+  return (
+    <div className="s-flex s-w-full s-flex-col s-gap-10">
+      <div className="s-flex s-grow s-gap-10">
+        <div className="w-full s-flex s-flex-col s-gap-3">
+          <div className="s-text-xl">Display Data source Tree example</div>
+          <div className="w-full">
+            <Tree>
+              <Tree.Item
+                label="Intercom"
+                visual={<IntercomLogo />}
+                size="md"
+                areActionsFading={false}
+                actions={
+                  <div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
+                    <span className="s-text-sm s-text-element-700">
+                      Managed by: Stanislas Polu
+                    </span>
+                    <Chip size="sm" color="pink" label="Syncing (235)" />
+                    <Button
+                      label="Manage"
+                      icon={Cog6ToothIcon}
+                      variant="tertiary"
+                      size="sm"
+                      hasMagnifying={false}
+                    />
+                  </div>
+                }
+              />
+              <Tree.Item
+                label="Slack"
+                collapsed={true}
+                visual={<SlackLogo />}
+                areActionsFading={false}
+                actions={
+                  <div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
+                    <span className="s-text-sm s-text-element-700">
+                      Managed by: Stanislas Polu
+                    </span>
+                    <Chip size="sm" color="pink" label="Syncing (235)" />
+                    <Button
+                      label="Manage"
+                      icon={Cog6ToothIcon}
+                      variant="tertiary"
+                      size="sm"
+                      hasMagnifying={false}
+                    />
+                  </div>
+                }
+                size="md"
+              />
+              <Tree.Item
+                label="Notion"
+                visual={<NotionLogo />}
+                areActionsFading={false}
+                size="md"
+                actions={
+                  <div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
+                    <span className="s-text-sm s-text-element-700">
+                      Managed by: Stanislas Polu
+                    </span>
+                    <Chip size="sm" color="pink" label="Syncing (235)" />
+                    <Button
+                      label="Manage"
+                      icon={Cog6ToothIcon}
+                      variant="tertiary"
+                      size="sm"
+                      hasMagnifying={false}
+                    />
+                  </div>
+                }
+                collapsed={false}
+              >
+                <Tree>
+                  <Tree.Item label="item 1" />
+                  <Tree.Item label="item 2" />
+                  <Tree.Item label="item 3" />
+                  <Tree.Item label="item 4" />
+                </Tree>
+              </Tree.Item>
+              <Tree.Item
+                label="Google Drive"
+                visual={<DriveLogo />}
+                areActionsFading={false}
+                size="md"
+                defaultCollapsed={true}
+                actions={
+                  <div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
+                    <span className="s-text-sm s-text-element-700">
+                      Managed by: Stanislas Polu
+                    </span>
+                    <Chip size="sm" color="pink" label="Syncing (235)" />
+                    <Button
+                      label="Manage"
+                      icon={Cog6ToothIcon}
+                      variant="tertiary"
+                      size="sm"
+                      hasMagnifying={false}
+                    />
+                  </div>
+                }
+              />
+            </Tree>
+          </div>
+        </div>
+      </div>
+      <div className="s-flex s-gap-10">
+        <div className="s-flex s-flex-col s-gap-3">
+          <div className="s-text-xl">Select Data source Tree example</div>
+          <div>
+            <Tree>
+              <Tree.Item
+                label="Intercom"
+                visual={<IntercomLogo />}
+                size="md"
+                checkbox={{
+                  variant: "checkable",
+                  checked: false,
+                  onChange: () => {
+                    return;
+                  },
+                }}
+              />
+              <Tree.Item
+                label="Slack"
+                collapsed={true}
+                visual={<SlackLogo />}
+                size="md"
+                checkbox={{
+                  variant: "checkable",
+                  checked: false,
+                  onChange: () => {
+                    return;
+                  },
+                }}
+              />
+              <Tree.Item
+                label="Notion"
+                visual={<NotionLogo />}
+                size="md"
                 checkbox={{
                   variant: "checkable",
                   checked: false,
@@ -577,6 +738,63 @@ export const TreeExample = () => {
                     return;
                   },
                 }}
+                collapsed={false}
+              >
+                <Tree>
+                  <Tree.Item
+                    label="item 1"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: false,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
+                  <Tree.Item
+                    label="item 2"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: false,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
+                  <Tree.Item
+                    label="item 3"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: false,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
+                  <Tree.Item
+                    label="item 4"
+                    checkbox={{
+                      variant: "checkable",
+                      checked: false,
+                      onChange: () => {
+                        return;
+                      },
+                    }}
+                  />
+                </Tree>
+              </Tree.Item>
+              <Tree.Item
+                label="Google Drive"
+                visual={<DriveLogo />}
+                size="md"
+                checkbox={{
+                  variant: "checkable",
+                  checked: false,
+                  onChange: () => {
+                    return;
+                  },
+                }}
+                defaultCollapsed={true}
               />
             </Tree>
           </div>