diff --git a/extension/app/src/components/conversation/AgentMessage.tsx b/extension/app/src/components/conversation/AgentMessage.tsx
index 596a280405c5..8eae148a54c5 100644
--- a/extension/app/src/components/conversation/AgentMessage.tsx
+++ b/extension/app/src/components/conversation/AgentMessage.tsx
@@ -23,25 +23,12 @@ import {
   removeNulls,
 } from "@dust-tt/client";
 import type { ConversationMessageSizeType } from "@dust-tt/sparkle";
+import { DocumentTextStrokeIcon } from "@dust-tt/sparkle";
 import {
-  ConfluenceLogo,
-  DocumentTextIcon,
-  DriveLogo,
-  GithubLogo,
-  ImageIcon,
-  IntercomLogo,
-  MicrosoftLogo,
-  NotionLogo,
-  SlackLogo,
-  SnowflakeLogo,
-  ZendeskLogo,
-} from "@dust-tt/sparkle";
-import {
-  CitationNew,
-  CitationNewIcons,
-  CitationNewIndex,
-  CitationNewTitle,
-  Icon,
+  Citation,
+  CitationIcons,
+  CitationIndex,
+  CitationTitle,
 } from "@dust-tt/sparkle";
 import {
   ArrowPathIcon,
@@ -59,12 +46,13 @@ import {
 } from "@dust-tt/sparkle";
 import { AgentMessageActions } from "@extension/components/conversation/AgentMessageActions";
 import { GenerationContext } from "@extension/components/conversation/GenerationContextProvider";
-import type { MarkdownCitation } from "@extension/components/conversation/MarkdownCitation";
 import {
   CitationsContext,
   CiteBlock,
   getCiteDirective,
 } from "@extension/components/markdown/CiteBlock";
+import type { MarkdownCitation } from "@extension/components/markdown/MarkdownCitation";
+import { citationIconMap } from "@extension/components/markdown/MarkdownCitation";
 import {
   MentionBlock,
   mentionDirective,
@@ -86,20 +74,6 @@ import type { ReactMarkdownProps } from "react-markdown/lib/complex-types";
 import type { PluggableList } from "react-markdown/lib/react-markdown";
 import { visit } from "unist-util-visit";
 
-const typeIcons = {
-  confluence: ConfluenceLogo,
-  document: DocumentTextIcon,
-  github: GithubLogo,
-  google_drive: DriveLogo,
-  intercom: IntercomLogo,
-  microsoft: MicrosoftLogo,
-  zendesk: ZendeskLogo,
-  notion: NotionLogo,
-  slack: SlackLogo,
-  image: ImageIcon,
-  snowflake: SnowflakeLogo,
-};
-
 export function visualizationDirective() {
   return (tree: any) => {
     visit(tree, ["containerDirective"], (node) => {
@@ -117,10 +91,12 @@ export function visualizationDirective() {
 export function makeDocumentCitation(
   document: RetrievalDocumentPublicType
 ): MarkdownCitation {
+  const IconComponent =
+    citationIconMap[getProviderFromRetrievedDocument(document)];
   return {
     href: document.sourceUrl ?? undefined,
     title: getTitleFromRetrievedDocument(document),
-    type: getProviderFromRetrievedDocument(document),
+    icon: <IconComponent />,
   };
 }
 
@@ -131,7 +107,7 @@ export function makeWebsearchResultsCitation(
     description: result.snippet,
     href: result.link,
     title: result.title,
-    type: "document" as const,
+    icon: <DocumentTextStrokeIcon />,
   };
 }
 
@@ -651,13 +627,13 @@ function getCitations({
   activeReferences.sort((a, b) => a.index - b.index);
   return activeReferences.map(({ document, index }) => {
     return (
-      <CitationNew key={index} href={document.href}>
-        <CitationNewIcons>
-          <CitationNewIndex>{index}</CitationNewIndex>
-          <Icon visual={typeIcons[document.type]} />
-        </CitationNewIcons>
-        <CitationNewTitle>{document.title}</CitationNewTitle>
-      </CitationNew>
+      <Citation key={index} href={document.href}>
+        <CitationIcons>
+          <CitationIndex>{index}</CitationIndex>
+          {document.icon}
+        </CitationIcons>
+        <CitationTitle>{document.title}</CitationTitle>
+      </Citation>
     );
   });
 }
diff --git a/extension/app/src/components/conversation/MarkdownCitation.tsx b/extension/app/src/components/conversation/MarkdownCitation.tsx
deleted file mode 100644
index d62f2d03ed7c..000000000000
--- a/extension/app/src/components/conversation/MarkdownCitation.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { Citation } from "@dust-tt/sparkle";
-
-export interface MarkdownCitation {
-  description?: string;
-  href?: string;
-  title: string;
-  type: Exclude<React.ComponentProps<typeof Citation>["type"], undefined>;
-}
diff --git a/extension/app/src/components/conversation/MessageItem.tsx b/extension/app/src/components/conversation/MessageItem.tsx
index 4681b10084a8..1ac71055d580 100644
--- a/extension/app/src/components/conversation/MessageItem.tsx
+++ b/extension/app/src/components/conversation/MessageItem.tsx
@@ -4,15 +4,14 @@ import type {
 } from "@dust-tt/client";
 import {
   Avatar,
-  CitationNew,
-  CitationNewIcons,
-  CitationNewImage,
-  CitationNewTitle,
+  Citation,
+  CitationIcons,
+  CitationImage,
+  CitationTitle,
   DocumentTextIcon,
   Icon,
   SlackLogo,
 } from "@dust-tt/sparkle";
-import type { CitationType } from "@dust-tt/sparkle/dist/esm/components/Citation";
 import { AgentMessage } from "@extension/components/conversation/AgentMessage";
 import { UserMessage } from "@extension/components/conversation/UserMessage";
 import type { MessageWithContentFragmentsType } from "@extension/lib/conversation";
@@ -45,9 +44,9 @@ const MessageItem = React.forwardRef<HTMLDivElement, MessageItemProps>(
       case "user_message":
         const citations = message.contenFragments
           ? message.contenFragments.map((contentFragment) => {
-              const citationType: CitationType = [
-                "dust-application/slack",
-              ].includes(contentFragment.contentType)
+              const citationType = ["dust-application/slack"].includes(
+                contentFragment.contentType
+              )
                 ? "slack"
                 : "document";
 
@@ -55,34 +54,34 @@ const MessageItem = React.forwardRef<HTMLDivElement, MessageItemProps>(
                 citationType === "slack" ? SlackLogo : DocumentTextIcon;
 
               return (
-                <CitationNew
+                <Citation
                   key={contentFragment.sId}
                   href={contentFragment.sourceUrl ?? undefined}
                 >
                   <div className="flex gap-2">
                     {contentFragment.context.profilePictureUrl && (
-                      <CitationNewIcons>
+                      <CitationIcons>
                         <Avatar
                           visual={contentFragment.context.profilePictureUrl}
                           size="xs"
                         />
-                      </CitationNewIcons>
+                      </CitationIcons>
                     )}
                     {contentFragment.sourceUrl ? (
                       <>
-                        <CitationNewImage imgSrc={contentFragment.sourceUrl} />
-                        <CitationNewIcons>
+                        <CitationImage imgSrc={contentFragment.sourceUrl} />
+                        <CitationIcons>
                           <Icon visual={icon} />
-                        </CitationNewIcons>
+                        </CitationIcons>
                       </>
                     ) : (
-                      <CitationNewIcons>
+                      <CitationIcons>
                         <Icon visual={icon} />
-                      </CitationNewIcons>
+                      </CitationIcons>
                     )}
                   </div>
-                  <CitationNewTitle>{contentFragment.title}</CitationNewTitle>
-                </CitationNew>
+                  <CitationTitle>{contentFragment.title}</CitationTitle>
+                </Citation>
               );
             })
           : undefined;
diff --git a/extension/app/src/components/input_bar/InputBarCitations.tsx b/extension/app/src/components/input_bar/InputBarCitations.tsx
index d46ada9d0622..db8d44e902c1 100644
--- a/extension/app/src/components/input_bar/InputBarCitations.tsx
+++ b/extension/app/src/components/input_bar/InputBarCitations.tsx
@@ -1,9 +1,9 @@
 import {
-  CitationNew,
-  CitationNewClose,
-  CitationNewIcons,
-  CitationNewImage,
-  CitationNewTitle,
+  Citation,
+  CitationClose,
+  CitationIcons,
+  CitationImage,
+  CitationTitle,
   DocumentIcon,
   Icon,
   ImageIcon,
@@ -27,7 +27,7 @@ export function InputBarCitations({
 
       nodes.push(
         <>
-          <CitationNew
+          <Citation
             disabled={disabled}
             key={`cf-${blob.id}`}
             className="w-48"
@@ -35,21 +35,21 @@ export function InputBarCitations({
           >
             {isImage ? (
               <>
-                <CitationNewImage imgSrc={blob.preview ?? ""} />
-                <CitationNewIcons>
+                <CitationImage imgSrc={blob.preview ?? ""} />
+                <CitationIcons>
                   <Icon visual={ImageIcon} />
-                </CitationNewIcons>
+                </CitationIcons>
               </>
             ) : (
-              <CitationNewIcons>
+              <CitationIcons>
                 <Icon visual={DocumentIcon} />
-              </CitationNewIcons>
+              </CitationIcons>
             )}
-            <CitationNewTitle>{blob.id}</CitationNewTitle>
-            <CitationNewClose
+            <CitationTitle>{blob.id}</CitationTitle>
+            <CitationClose
               onClick={() => fileUploaderService.removeFile(blob.id)}
             />
-          </CitationNew>
+          </Citation>
         </>
       );
     }
@@ -62,7 +62,7 @@ export function InputBarCitations({
   }
 
   return (
-    <div className="flex gap-2 overflow-auto border-b border-structure-300/50 pb-3">
+    <div className="flex gap-2 overflow-auto border-b border-separator pb-3">
       {processContentFragments()}
     </div>
   );
diff --git a/extension/app/src/components/markdown/MarkdownCitation.tsx b/extension/app/src/components/markdown/MarkdownCitation.tsx
index 7912285dda6a..59b3811dec0e 100644
--- a/extension/app/src/components/markdown/MarkdownCitation.tsx
+++ b/extension/app/src/components/markdown/MarkdownCitation.tsx
@@ -1,8 +1,51 @@
-import type { CitationType } from "@dust-tt/sparkle";
+import {
+  ConfluenceLogo,
+  DocumentTextStrokeIcon,
+  DriveLogo,
+  GithubLogo,
+  ImageStrokeIcon,
+  IntercomLogo,
+  MicrosoftLogo,
+  NotionLogo,
+  SlackLogo,
+  SnowflakeLogo,
+  ZendeskLogo,
+} from "@dust-tt/sparkle";
+import type { SVGProps } from "react";
+
+export type CitationIconType =
+  | "confluence"
+  | "document"
+  | "github"
+  | "google_drive"
+  | "intercom"
+  | "microsoft"
+  | "zendesk"
+  | "notion"
+  | "slack"
+  | "image"
+  | "snowflake";
+
+export const citationIconMap: Record<
+  CitationIconType,
+  (props: SVGProps<SVGSVGElement>) => React.JSX.Element
+> = {
+  confluence: ConfluenceLogo,
+  document: DocumentTextStrokeIcon,
+  github: GithubLogo,
+  google_drive: DriveLogo,
+  intercom: IntercomLogo,
+  microsoft: MicrosoftLogo,
+  zendesk: ZendeskLogo,
+  notion: NotionLogo,
+  slack: SlackLogo,
+  image: ImageStrokeIcon,
+  snowflake: SnowflakeLogo,
+};
 
 export interface MarkdownCitation {
   description?: string;
   href?: string;
   title: string;
-  type: CitationType;
+  icon: React.JSX.Element;
 }
diff --git a/extension/package-lock.json b/extension/package-lock.json
index 32dfc9f3fd91..297493d9a02c 100644
--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -10,7 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@dust-tt/client": "^1.0.15",
-        "@dust-tt/sparkle": "^0.2.332",
+        "@dust-tt/sparkle": "^0.2.343-rc5",
         "@tailwindcss/forms": "^0.5.9",
         "@tiptap/extension-character-count": "^2.9.1",
         "@tiptap/extension-mention": "^2.9.1",
@@ -258,9 +258,9 @@
       }
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.332",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.332.tgz",
-      "integrity": "sha512-6m26Q51zpY/Z2CdVuDvGzIT6z57McAgRU+bLcFt7uzCmGo/8INv37LnZ/2+whzeFjGORsjj5xb9PDn2GIZhlXQ==",
+      "version": "0.2.344",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.344.tgz",
+      "integrity": "sha512-dmvR6FPLCv+ipiaPO6DXR8VZFbauHrzBVLyGkj9StaMt50IhELTZPzBPHDkKz0fW++ttweQP+mxSnv2vU4nAng==",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
@@ -277,7 +277,6 @@
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.1",
         "@radix-ui/react-tooltip": "^1.1.3",
-        "@tailwindcss/container-queries": "^0.1.1",
         "@tanstack/react-table": "^8.13.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -1952,14 +1951,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@tailwindcss/container-queries": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
-      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
-      "peerDependencies": {
-        "tailwindcss": ">=3.2.0"
-      }
-    },
     "node_modules/@tailwindcss/forms": {
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.9.tgz",
diff --git a/extension/package.json b/extension/package.json
index 0dc973628185..988839d6cb8c 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@dust-tt/client": "^1.0.15",
-    "@dust-tt/sparkle": "^0.2.332",
+    "@dust-tt/sparkle": "^0.2.343-rc5",
     "@tailwindcss/forms": "^0.5.9",
     "@tiptap/extension-character-count": "^2.9.1",
     "@tiptap/extension-mention": "^2.9.1",
diff --git a/front/components/DataSourceViewDocumentModal.tsx b/front/components/DataSourceViewDocumentModal.tsx
index 8d2e16339530..6554c40b9a32 100644
--- a/front/components/DataSourceViewDocumentModal.tsx
+++ b/front/components/DataSourceViewDocumentModal.tsx
@@ -69,7 +69,7 @@ export default function DataSourceViewDocumentModal({
           )}
           {!isDocumentLoading && document && (
             <>
-              <div className="mb-4 mt-8 text-sm text-element-900">
+              <div className="mb-4 mt-8 text-sm text-foreground">
                 Content of the document:
               </div>
               <pre className="whitespace-pre-wrap bg-structure-100 py-8 pl-4 pr-2 text-sm text-element-800">
diff --git a/front/components/actions/ActionDetailsWrapper.tsx b/front/components/actions/ActionDetailsWrapper.tsx
index f8a2f0e38f9f..6c1b705a5f6a 100644
--- a/front/components/actions/ActionDetailsWrapper.tsx
+++ b/front/components/actions/ActionDetailsWrapper.tsx
@@ -17,11 +17,9 @@ export function ActionDetailsWrapper({
   return (
     <Collapsible defaultOpen={defaultOpen}>
       <Collapsible.Button>
-        <div className="flex flex-row items-center gap-x-2">
-          <Icon className="text-brand" size="xs" visual={visual} />
-          <span className="text-sm font-bold text-element-900">
-            {actionName}
-          </span>
+        <div className="flex flex-row items-center gap-x-2 text-foreground">
+          <Icon size="sm" visual={visual} />
+          <span className="text-base font-semibold">{actionName}</span>
         </div>
       </Collapsible.Button>
       <Collapsible.Panel>{children}</Collapsible.Panel>
diff --git a/front/components/actions/browse/BrowseActionDetails.tsx b/front/components/actions/browse/BrowseActionDetails.tsx
index 076ad29b9f70..73752ffa6eba 100644
--- a/front/components/actions/browse/BrowseActionDetails.tsx
+++ b/front/components/actions/browse/BrowseActionDetails.tsx
@@ -23,18 +23,22 @@ export function BrowseActionDetails({
     >
       <div className="flex flex-col gap-4 pl-6 pt-4">
         <div className="flex flex-col gap-1">
-          <div className="text-sm font-normal text-slate-500">
+          <div className="text-sm font-normal text-muted-foreground">
             {action.output?.results.map((r, idx) => (
               <div
                 className="flex max-h-60 flex-col gap-2 overflow-y-auto overflow-x-hidden py-1"
                 key={idx}
               >
-                <span className="text-sm font-bold text-slate-900">
+                <span className="text-sm font-bold text-foreground">
                   Requested url : {r.requestedUrl}
                 </span>
 
                 {r.responseCode === "200" ? (
-                  <Citation key={idx} href={r.browsedUrl}>
+                  <Citation
+                    key={idx}
+                    href={r.browsedUrl}
+                    className="w-48 min-w-48 max-w-48"
+                  >
                     <CitationIcons>
                       <Icon visual={GlobeAltIcon} />
                     </CitationIcons>
@@ -44,7 +48,7 @@ export function BrowseActionDetails({
                     </CitationDescription>
                   </Citation>
                 ) : (
-                  <span className="text-sm text-slate-900">
+                  <span className="text-sm text-foreground">
                     Cannot fetch content, error code : {r.responseCode}.
                     {r.errorMessage}
                   </span>
diff --git a/front/components/actions/conversation/include_file/IncludeFileActionDetails.tsx b/front/components/actions/conversation/include_file/IncludeFileActionDetails.tsx
index 2fd438f8a278..09a0adaab3f5 100644
--- a/front/components/actions/conversation/include_file/IncludeFileActionDetails.tsx
+++ b/front/components/actions/conversation/include_file/IncludeFileActionDetails.tsx
@@ -17,7 +17,7 @@ export function ConversationIncludeFileActionDetails({
       visual={MagnifyingGlassIcon}
     >
       <div className="flex flex-col gap-4 pl-6 pt-4">
-        <p className="text-sm font-normal text-slate-500">
+        <p className="text-sm font-normal text-muted-foreground">
           {fileTitle || "(no file name available)"}
         </p>
       </div>
diff --git a/front/components/actions/dust_app_run/DustAppRunActionDetails.tsx b/front/components/actions/dust_app_run/DustAppRunActionDetails.tsx
index e1938b71ca15..37075dbebfbc 100644
--- a/front/components/actions/dust_app_run/DustAppRunActionDetails.tsx
+++ b/front/components/actions/dust_app_run/DustAppRunActionDetails.tsx
@@ -23,16 +23,18 @@ export function DustAppRunActionDetails({
       visual={CommandLineIcon}
     >
       <div className="flex flex-col gap-4 pl-6 pt-4">
-        <div className="flex flex-col gap-1">
-          <span className="text-sm font-bold text-slate-900">Parameters</span>
-          <div className="text-sm font-normal text-slate-500">
+        <div className="flex flex-col gap-1 text-sm">
+          <span className="font-semibold text-foreground">Parameters</span>
+          <div className="text-muted-foreground">
             <DustAppRunParamsDetails action={action} />
           </div>
         </div>
         <div>
           <Collapsible defaultOpen={defaultOpen}>
             <Collapsible.Button>
-              <span className="text-sm font-bold text-slate-900">Results</span>
+              <span className="text-sm font-semibold text-foreground">
+                Results
+              </span>
             </Collapsible.Button>
             <Collapsible.Panel>
               <DustAppRunOutputDetails action={action} />
diff --git a/front/components/actions/process/ProcessActionDetails.tsx b/front/components/actions/process/ProcessActionDetails.tsx
index 3251a405e856..a11ebad0b6fb 100644
--- a/front/components/actions/process/ProcessActionDetails.tsx
+++ b/front/components/actions/process/ProcessActionDetails.tsx
@@ -21,13 +21,15 @@ export function ProcessActionDetails({
     >
       <div className="flex flex-col gap-4 pl-6 pt-4">
         <div className="flex flex-col gap-1">
-          <span className="text-sm font-bold text-slate-900">Query</span>
+          <span className="text-sm font-semibold text-foreground">Query</span>
           <ProcessActionQuery action={action} />
         </div>
         <div>
           <Collapsible defaultOpen={defaultOpen}>
             <Collapsible.Button>
-              <span className="text-sm font-bold text-slate-900">Results</span>
+              <span className="text-sm font-semibold text-foreground">
+                Results
+              </span>
             </Collapsible.Button>
             <Collapsible.Panel>
               <ProcessActionOutputDetails action={action} />
@@ -55,7 +57,7 @@ function ProcessActionQuery({ action }: { action: ProcessActionType }) {
 
   return (
     <div className="flex flex-col gap-1">
-      <p className="text-sm font-normal text-slate-500">
+      <p className="text-sm font-normal text-muted-foreground">
         {makeQueryDescription(action)}
       </p>
       {overflow && (
diff --git a/front/components/actions/retrieval/RetrievalActionDetails.tsx b/front/components/actions/retrieval/RetrievalActionDetails.tsx
index 5037ecab2687..175397c49c67 100644
--- a/front/components/actions/retrieval/RetrievalActionDetails.tsx
+++ b/front/components/actions/retrieval/RetrievalActionDetails.tsx
@@ -28,17 +28,17 @@ export function RetrievalActionDetails({
     >
       <div className="flex flex-col gap-4 pl-6 pt-4">
         <div className="flex flex-col gap-1">
-          <span className="text-sm font-bold text-slate-900">
+          <span className="text-sm font-bold text-foreground">
             {isIncludeAction ? "Timeframe" : "Query"}
           </span>
-          <div className="text-sm font-normal text-slate-500">
+          <div className="text-sm font-normal text-muted-foreground">
             <RetrievalActionQuery action={action} />
           </div>
         </div>
         <div>
           <Collapsible defaultOpen={defaultOpen}>
             <Collapsible.Button>
-              <span className="text-sm font-bold text-slate-900">Results</span>
+              <span className="text-sm font-bold text-foreground">Results</span>
             </Collapsible.Button>
             <Collapsible.Panel>
               <PaginatedCitationsGrid items={documentCitations} />
@@ -69,7 +69,7 @@ function RetrievalActionQuery({ action }: { action: RetrievalActionType }) {
 
   return (
     <div className="flex flex-col gap-1">
-      <p className="text-sm font-normal text-slate-500">
+      <p className="text-sm font-normal text-muted-foreground">
         {makeQueryDescription(action)}
       </p>
       {tooManyChunks && (
diff --git a/front/components/actions/tables_query/TablesQueryActionDetails.tsx b/front/components/actions/tables_query/TablesQueryActionDetails.tsx
index 3e793b221f33..9f74e59e0f06 100644
--- a/front/components/actions/tables_query/TablesQueryActionDetails.tsx
+++ b/front/components/actions/tables_query/TablesQueryActionDetails.tsx
@@ -1,8 +1,10 @@
 import {
   Citation,
+  CitationIcons,
   CitationTitle,
   Collapsible,
   ContentMessage,
+  Icon,
   InformationCircleIcon,
   TableIcon,
   useSendNotification,
@@ -47,8 +49,8 @@ function TablesQuery({ action }: { action: TablesQueryActionType }) {
 
   return (
     <div className="flex flex-col gap-1">
-      <span className="text-sm font-bold text-slate-900">Query</span>
-      <div className="text-sm font-normal text-slate-500">
+      <span className="text-sm font-semibold text-foreground">Query</span>
+      <div className="text-sm font-normal text-muted-foreground">
         <ContentBlockWrapper content={query}>
           <CodeBlock
             className="language-sql max-h-60 overflow-y-auto"
@@ -72,8 +74,8 @@ function QueryThinking({ action }: { action: TablesQueryActionType }) {
 
   return (
     <div className="flex flex-col gap-1">
-      <span className="text-sm font-bold text-slate-900">Reasoning</span>
-      <div className="text-sm font-normal text-slate-500">
+      <span className="text-sm font-semibold text-foreground">Reasoning</span>
+      <div className="text-sm font-normal text-muted-foreground">
         <ContentMessage
           title="Reasoning"
           variant="purple"
@@ -132,7 +134,9 @@ function QueryTablesResults({
     if (typeof output?.error === "string") {
       return (
         <div>
-          <span className="pb-2 text-sm font-bold text-slate-900">Error</span>
+          <span className="pb-2 text-sm font-semibold text-foreground">
+            Error
+          </span>
           <div className="text-sm">{output.error}</div>
         </div>
       );
@@ -142,16 +146,23 @@ function QueryTablesResults({
 
   return (
     <div>
-      <span className="text-sm font-bold text-slate-900">Results</span>
-      <div onClick={handleDownload} className="py-2">
-        <Citation>
-          <CitationTitle>{title}</CitationTitle>
-        </Citation>
-      </div>
+      <span className="text-sm font-semibold text-foreground">Results</span>
+      <Citation
+        className="w-48 min-w-48 max-w-48"
+        containerClassName="my-2"
+        onClick={handleDownload}
+      >
+        <CitationIcons>
+          <Icon visual={TableIcon} />
+        </CitationIcons>
+        <CitationTitle>{title}</CitationTitle>
+      </Citation>
 
       <Collapsible defaultOpen={false}>
         <Collapsible.Button>
-          <span className="text-sm font-bold text-slate-600">Preview</span>
+          <span className="text-sm font-semibold text-muted-foreground">
+            Preview
+          </span>
         </Collapsible.Button>
         <Collapsible.Panel>
           <div className="py-2">
diff --git a/front/components/actions/websearch/WebsearchActionDetails.tsx b/front/components/actions/websearch/WebsearchActionDetails.tsx
index 7dfc76ec933e..eb4195e1558d 100644
--- a/front/components/actions/websearch/WebsearchActionDetails.tsx
+++ b/front/components/actions/websearch/WebsearchActionDetails.tsx
@@ -32,15 +32,15 @@ export function WebsearchActionDetails({
     >
       <div className="flex flex-col gap-4 pl-6 pt-4">
         <div className="flex flex-col gap-1">
-          <span className="text-sm font-bold text-slate-900">Query</span>
-          <div className="text-sm font-normal text-slate-500">
+          <span className="text-sm font-bold text-foreground">Query</span>
+          <div className="text-sm font-normal text-muted-foreground">
             {action.query}
           </div>
         </div>
         <div>
           <Collapsible defaultOpen={defaultOpen}>
             <Collapsible.Button>
-              <span className="text-sm font-bold text-slate-900">Results</span>
+              <span className="text-sm font-bold text-foreground">Results</span>
             </Collapsible.Button>
             <Collapsible.Panel>
               <PaginatedCitationsGrid items={resultsCitations} />
diff --git a/front/components/app/blocks/Database.tsx b/front/components/app/blocks/Database.tsx
index c3bb29e86d5c..c77a23483116 100644
--- a/front/components/app/blocks/Database.tsx
+++ b/front/components/app/blocks/Database.tsx
@@ -153,7 +153,7 @@ export function TablesManager({
               <div>
                 <Button
                   onClick={() => removeTable(index)}
-                  className="text-slate-400 hover:text-slate-500"
+                  className="text-slate-400 hover:text-muted-foreground"
                   icon={XMarkIcon}
                   size="xs"
                   variant="secondary"
diff --git a/front/components/assistant/AssistantBrowser.tsx b/front/components/assistant/AssistantBrowser.tsx
index d49e918422b6..0a1fa0eb03e5 100644
--- a/front/components/assistant/AssistantBrowser.tsx
+++ b/front/components/assistant/AssistantBrowser.tsx
@@ -1,10 +1,11 @@
 import {
-  AssistantPreview,
+  AssistantCard,
+  AssistantCardMore,
   Button,
+  CardGrid,
   CompanyIcon,
   LockIcon,
   MagnifyingGlassIcon,
-  MoreIcon,
   PlusIcon,
   RobotIcon,
   RocketIcon,
@@ -195,27 +196,23 @@ export function AssistantBrowser({
       </div>
 
       {!viewTab && (
-        <div className="text-center">
+        <div className="my-12 text-center text-sm text-muted-foreground">
           No assistants found. Try adjusting your search criteria.
         </div>
       )}
 
       {viewTab && (
-        <div className="relative grid w-full grid-cols-1 gap-2 px-4 md:grid-cols-3">
+        <CardGrid className="mb-12">
           {agentsByTab[viewTab].map((agent) => (
-            <AssistantPreview
+            <AssistantCard
               key={agent.sId}
               title={agent.name}
               pictureUrl={agent.pictureUrl}
               subtitle={agent.lastAuthors?.join(", ") ?? ""}
               description={agent.description}
-              variant="minimal"
               onClick={() => handleAssistantClick(agent)}
-              actionElement={
-                <Button
-                  icon={MoreIcon}
-                  variant="outline"
-                  size="sm"
+              action={
+                <AssistantCardMore
                   onClick={(e: Event) => {
                     e.stopPropagation();
                     setQueryParam(router, "assistantDetails", agent.sId);
@@ -224,7 +221,7 @@ export function AssistantBrowser({
               }
             />
           ))}
-        </div>
+        </CardGrid>
       )}
     </>
   );
diff --git a/front/components/assistant/AssistantDetails.tsx b/front/components/assistant/AssistantDetails.tsx
index b853a294cf53..e3341e652e20 100644
--- a/front/components/assistant/AssistantDetails.tsx
+++ b/front/components/assistant/AssistantDetails.tsx
@@ -66,7 +66,7 @@ export function AssistantDetails({
         <div className="flex grow flex-col gap-1">
           <div
             className={classNames(
-              "font-bold text-element-900",
+              "font-bold text-foreground",
               agentConfiguration.name.length > 20 ? "text-md" : "text-lg"
             )}
           >{`@${agentConfiguration.name}`}</div>
@@ -100,7 +100,7 @@ export function AssistantDetails({
         </ContentMessage>
       )}
 
-      <div className="text-sm text-element-900">
+      <div className="text-sm text-foreground">
         {agentConfiguration.description}
       </div>
       <AssistantUsageSection
diff --git a/front/components/assistant/conversation/AgentMessage.tsx b/front/components/assistant/conversation/AgentMessage.tsx
index bc939eb2d4e4..eec9a3be951b 100644
--- a/front/components/assistant/conversation/AgentMessage.tsx
+++ b/front/components/assistant/conversation/AgentMessage.tsx
@@ -115,7 +115,6 @@ export const FeedbackSelectorPopoverContent = ({
 
 interface AgentMessageProps {
   conversationId: string;
-  isInModal: boolean;
   isLastMessage: boolean;
   message: AgentMessageType;
   messageFeedback: FeedbackSelectorProps;
@@ -667,7 +666,7 @@ function AssitantName(
     <Link
       href={href}
       shallow
-      className="cursor-pointer duration-300 hover:text-action-500 active:text-action-600"
+      className="cursor-pointer transition duration-200 hover:text-highlight active:text-highlight-600"
     >
       @{assistant.name}
     </Link>
diff --git a/front/components/assistant/conversation/AgentSuggestion.tsx b/front/components/assistant/conversation/AgentSuggestion.tsx
index 0eaf5dd41630..4925c07529ed 100644
--- a/front/components/assistant/conversation/AgentSuggestion.tsx
+++ b/front/components/assistant/conversation/AgentSuggestion.tsx
@@ -1,6 +1,8 @@
 import {
-  AssistantPreview,
+  AssistantCard,
+  AssistantCardMore,
   Button,
+  CardGrid,
   RobotIcon,
   Spinner,
   useSendNotification,
@@ -90,10 +92,10 @@ export function AgentSuggestion({
   return (
     <>
       <div className="pt-4">
-        <div className="flex items-center gap-2">
-          <span className="grow text-sm text-element-800">
+        <div className="flex items-center gap-2 pb-2">
+          <p className="grow text-base text-muted-foreground">
             Which Assistant would you like to chat with?
-          </span>
+          </p>
           <AssistantPicker
             owner={owner}
             assistants={otherAgents}
@@ -106,8 +108,8 @@ export function AgentSuggestion({
             }}
             pickerButton={
               <Button
-                variant="ghost"
-                size="xs"
+                variant="outline"
+                size="sm"
                 icon={RobotIcon}
                 label="Select another"
                 isSelect
@@ -121,20 +123,24 @@ export function AgentSuggestion({
             <Spinner />
           </div>
         ) : (
-          <div className="mt-3 grid gap-2 md:grid-cols-3">
+          <CardGrid>
             {topAgents.map((agent, id) => (
-              <AssistantPreview
+              <AssistantCard
                 key={`${agent.sId}-${id}`}
-                variant="minimal"
                 description={agent.description}
                 subtitle={agent.lastAuthors?.join(", ") ?? ""}
                 title={agent.name}
                 pictureUrl={agent.pictureUrl}
                 onClick={() => handleSelectSuggestion(agent)}
-                onActionClick={() => showAssistantDetails(agent)}
+                variant="secondary"
+                action={
+                  <AssistantCardMore
+                    onClick={() => showAssistantDetails(agent)}
+                  />
+                }
               />
             ))}
-          </div>
+          </CardGrid>
         )}
       </div>
     </>
diff --git a/front/components/assistant/conversation/ConversationError.tsx b/front/components/assistant/conversation/ConversationError.tsx
index 748c6229be88..19c95fd0e1d4 100644
--- a/front/components/assistant/conversation/ConversationError.tsx
+++ b/front/components/assistant/conversation/ConversationError.tsx
@@ -73,7 +73,7 @@ function ErrorDisplay({ icon, message, title }: ErrorDisplayProps) {
   return (
     <div className="flex h-screen flex-col items-center justify-center gap-1">
       {icon && <Icon visual={icon} className="text-warning-400" size="lg" />}
-      <p className="text-center text-xl font-bold leading-7 text-slate-900">
+      <p className="text-center text-xl font-bold leading-7 text-foreground">
         {title}
       </p>
       <p className="text-center text-sm font-normal leading-tight text-slate-700">
diff --git a/front/components/assistant/conversation/MessageItem.tsx b/front/components/assistant/conversation/MessageItem.tsx
index 9939c85372cb..c32f665226dd 100644
--- a/front/components/assistant/conversation/MessageItem.tsx
+++ b/front/components/assistant/conversation/MessageItem.tsx
@@ -170,7 +170,6 @@ const MessageItem = React.forwardRef<HTMLDivElement, MessageItemProps>(
           <div key={`message-id-${sId}`} ref={ref}>
             <AgentMessage
               conversationId={conversationId}
-              isInModal={isInModal}
               isLastMessage={isLastMessage}
               message={message}
               messageFeedback={messageFeedbackWithSubmit}
diff --git a/front/components/assistant/conversation/UserMessage.tsx b/front/components/assistant/conversation/UserMessage.tsx
index c435304e7168..073a9f453b02 100644
--- a/front/components/assistant/conversation/UserMessage.tsx
+++ b/front/components/assistant/conversation/UserMessage.tsx
@@ -54,24 +54,20 @@ export function UserMessage({
       citations={citations}
       size={size}
     >
-      <div className="flex flex-col gap-4">
-        <div>
-          <Markdown
-            content={message.content}
-            isStreaming={false}
-            isLastMessage={isLastMessage}
-            additionalMarkdownComponents={additionalMarkdownComponents}
-            additionalMarkdownPlugins={additionalMarkdownPlugins}
-          />
-        </div>
-        {message.mentions.length === 0 && isLastMessage && (
-          <AgentSuggestion
-            conversationId={conversationId}
-            owner={owner}
-            userMessage={message}
-          />
-        )}
-      </div>
+      <Markdown
+        content={message.content}
+        isStreaming={false}
+        isLastMessage={isLastMessage}
+        additionalMarkdownComponents={additionalMarkdownComponents}
+        additionalMarkdownPlugins={additionalMarkdownPlugins}
+      />
+      {message.mentions.length === 0 && isLastMessage && (
+        <AgentSuggestion
+          conversationId={conversationId}
+          owner={owner}
+          userMessage={message}
+        />
+      )}
     </ConversationMessage>
   );
 }
diff --git a/front/components/assistant/conversation/actions/AgentMessageActionsDrawer.tsx b/front/components/assistant/conversation/actions/AgentMessageActionsDrawer.tsx
index 95009f878bdf..1b20b88e4621 100644
--- a/front/components/assistant/conversation/actions/AgentMessageActionsDrawer.tsx
+++ b/front/components/assistant/conversation/actions/AgentMessageActionsDrawer.tsx
@@ -47,7 +47,7 @@ export function AgentMessageActionsDrawer({
                   className="flex flex-col gap-4 pb-4 duration-1000 animate-in fade-in"
                   key={step}
                 >
-                  <p className="text-xl font-bold text-slate-900">
+                  <p className="text-xl font-bold text-foreground">
                     Step {step}
                   </p>
                   {actions.map((action, idx) => {
diff --git a/front/components/assistant/conversation/input_bar/InputBar.tsx b/front/components/assistant/conversation/input_bar/InputBar.tsx
index d907016a3925..e7781e30f63f 100644
--- a/front/components/assistant/conversation/input_bar/InputBar.tsx
+++ b/front/components/assistant/conversation/input_bar/InputBar.tsx
@@ -277,7 +277,7 @@ export function AssistantInputBar({
         >
           <div
             className={classNames(
-              "relative flex w-full flex-1 flex-col items-stretch gap-0 self-stretch pl-2 sm:flex-row sm:pl-5",
+              "relative flex w-full flex-1 flex-col items-stretch gap-0 self-stretch pl-3 sm:flex-row",
               "bg-primary-50",
               "transition-all",
               isFloating
diff --git a/front/components/assistant/conversation/input_bar/InputBarCitations.tsx b/front/components/assistant/conversation/input_bar/InputBarCitations.tsx
index d96f21cbb688..6994cfb9ae04 100644
--- a/front/components/assistant/conversation/input_bar/InputBarCitations.tsx
+++ b/front/components/assistant/conversation/input_bar/InputBarCitations.tsx
@@ -27,8 +27,13 @@ export function InputBarCitations({
         <>
           <Citation
             key={`cf-${blob.id}`}
-            className="w-48"
+            className="w-40"
             isLoading={blob.isUploading}
+            action={
+              <CitationClose
+                onClick={() => fileUploaderService.removeFile(blob.id)}
+              />
+            }
           >
             {isImage ? (
               <>
@@ -43,9 +48,6 @@ export function InputBarCitations({
               </CitationIcons>
             )}
             <CitationTitle>{blob.id}</CitationTitle>
-            <CitationClose
-              onClick={() => fileUploaderService.removeFile(blob.id)}
-            />
           </Citation>
         </>
       );
@@ -59,7 +61,7 @@ export function InputBarCitations({
   }
 
   return (
-    <div className="mr-4 flex gap-2 overflow-auto border-b border-structure-300/50 pb-3 pt-4">
+    <div className="mr-3 flex gap-2 overflow-auto border-b border-separator pb-3 pt-3">
       {processContentFragments()}
     </div>
   );
diff --git a/front/components/assistant/conversation/input_bar/InputBarContainer.tsx b/front/components/assistant/conversation/input_bar/InputBarContainer.tsx
index 67ff00540be5..47b80937f7ac 100644
--- a/front/components/assistant/conversation/input_bar/InputBarContainer.tsx
+++ b/front/components/assistant/conversation/input_bar/InputBarContainer.tsx
@@ -99,7 +99,7 @@ const InputBarContainer = ({
 
   const contentEditableClasses = classNames(
     "inline-block w-full",
-    "border-0 pr-1 pl-2 sm:pl-0 outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 py-3.5",
+    "border-0 px-2 outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 sm:py-3.5",
     "whitespace-pre-wrap font-normal"
   );
 
diff --git a/front/components/assistant/conversation/input_bar/editor/MentionList.tsx b/front/components/assistant/conversation/input_bar/editor/MentionList.tsx
index 30da5d7826ef..9879b81a2eac 100644
--- a/front/components/assistant/conversation/input_bar/editor/MentionList.tsx
+++ b/front/components/assistant/conversation/input_bar/editor/MentionList.tsx
@@ -110,7 +110,7 @@ export const MentionList = forwardRef(function MentionList(
             <button
               className={classNames(
                 "flex-initial text-sm font-semibold",
-                index === selectedIndex ? "text-action-500" : "text-element-900"
+                index === selectedIndex ? "text-action-500" : "text-foreground"
               )}
               key={index}
               onClick={() => selectItem(index)}
diff --git a/front/components/assistant_builder/ActionsScreen.tsx b/front/components/assistant_builder/ActionsScreen.tsx
index d03a56be17a5..96aaa89399c6 100644
--- a/front/components/assistant_builder/ActionsScreen.tsx
+++ b/front/components/assistant_builder/ActionsScreen.tsx
@@ -1,7 +1,9 @@
 import {
   BookOpenIcon,
   Button,
-  CardButton,
+  Card,
+  CardActionButton,
+  CardGrid,
   Checkbox,
   Chip,
   ContentMessage,
@@ -13,7 +15,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Icon,
-  IconButton,
   InformationCircleIcon,
   Input,
   Modal,
@@ -422,26 +423,24 @@ export default function ActionsScreen({
               />
             </div>
           )}
-          <div className="mx-auto grid w-full grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+          <CardGrid>
             {configurableActions.map((a) => (
-              <div className="flex w-full" key={a.name}>
-                <ActionCard
-                  action={a}
-                  key={a.name}
-                  editAction={() => {
-                    setAction({
-                      type: "edit",
-                      action: a,
-                    });
-                  }}
-                  deleteAction={() => {
-                    deleteAction(a.name);
-                  }}
-                  isLegacyConfig={isLegacyConfig}
-                />
-              </div>
+              <ActionCard
+                action={a}
+                key={a.name}
+                editAction={() => {
+                  setAction({
+                    type: "edit",
+                    action: a,
+                  });
+                }}
+                deleteAction={() => {
+                  deleteAction(a.name);
+                }}
+                isLegacyConfig={isLegacyConfig}
+              />
             ))}
-          </div>
+          </CardGrid>
         </div>
 
         <Capabilities
@@ -631,24 +630,24 @@ function ActionCard({
   }
   const actionError = hasActionError(action);
   return (
-    <CardButton
+    <Card
       variant="primary"
       onClick={editAction}
-      className="mx-auto inline-block w-72"
+      action={
+        <CardActionButton
+          size="mini"
+          icon={XMarkIcon}
+          onClick={(e: any) => {
+            deleteAction();
+            e.stopPropagation();
+          }}
+        />
+      }
     >
       <div className="flex w-full flex-col gap-2 text-sm">
-        <div className="flex w-full gap-1 font-medium text-element-900">
-          <Icon visual={spec.cardIcon} size="sm" className="text-element-900" />
+        <div className="flex w-full gap-1 font-medium text-foreground">
+          <Icon visual={spec.cardIcon} size="sm" className="text-foreground" />
           <div className="w-full truncate">{actionDisplayName(action)}</div>
-          <IconButton
-            icon={XMarkIcon}
-            variant="outline"
-            size="sm"
-            onClick={(e) => {
-              deleteAction();
-              e.stopPropagation();
-            }}
-          />
         </div>
         {isLegacyConfig ? (
           <div className="mx-auto">
@@ -660,20 +659,16 @@ function ActionCard({
             />
           </div>
         ) : (
-          <>
+          <div className="w-full truncate text-muted-foreground">
             {actionError ? (
-              <div className="w-full truncate text-base text-warning-500">
-                {actionError}
-              </div>
+              <span className="text-warning-500">{actionError}</span>
             ) : (
-              <div className="w-full truncate text-base text-element-700">
-                {action.description}
-              </div>
+              <>{action.description}</>
             )}
-          </>
+          </div>
         )}
       </div>
-    </CardButton>
+    </Card>
   );
 }
 
@@ -1125,7 +1120,7 @@ function Capabilities({
           onCheckedChange={enabled ? onDisable : onEnable}
         />
         <div>
-          <div className="flex text-base font-semibold text-element-900">
+          <div className="flex text-base font-semibold text-foreground">
             {name}
           </div>
           <div className="text-base text-element-700">{description}</div>
diff --git a/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx b/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx
index 63218d3a7aac..37300393b6cf 100644
--- a/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx
+++ b/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx
@@ -132,7 +132,7 @@ function PickDustApp({
                             className={classNames(
                               disabled
                                 ? "s-text-element-500"
-                                : "s-text-element-900"
+                                : "s-text-foreground"
                             )}
                           >
                             {app.name + (disabled ? " (No description)" : "")}
diff --git a/front/components/assistant_builder/AssistantTemplateModal.tsx b/front/components/assistant_builder/AssistantTemplateModal.tsx
index 82fd3a05bb37..747376d2737c 100644
--- a/front/components/assistant_builder/AssistantTemplateModal.tsx
+++ b/front/components/assistant_builder/AssistantTemplateModal.tsx
@@ -56,7 +56,7 @@ export function AssistantTemplateModal({
           <div className="flex max-h-32 max-w-lg flex-row gap-3">
             <Avatar size="lg" visual={pictureUrl} />
             <div className="flex flex-col gap-1">
-              <span className="text-lg font-medium text-element-900">
+              <span className="text-lg font-medium text-foreground">
                 @{handle}
               </span>
               <Link
diff --git a/front/components/assistant_builder/DataSourceSelectionSection.tsx b/front/components/assistant_builder/DataSourceSelectionSection.tsx
index 5fa0692027cd..c72fa99659ab 100644
--- a/front/components/assistant_builder/DataSourceSelectionSection.tsx
+++ b/front/components/assistant_builder/DataSourceSelectionSection.tsx
@@ -61,7 +61,7 @@ export default function DataSourceSelectionSection({
 
       <div className="overflow-hidden pt-4">
         <div className="flex flex-row items-start">
-          <div className="flex-grow pb-2 text-sm font-semibold text-element-900">
+          <div className="flex-grow pb-2 text-sm font-semibold text-foreground">
             Selected Data Sources
           </div>
           <div>
diff --git a/front/components/assistant_builder/InstructionScreen.tsx b/front/components/assistant_builder/InstructionScreen.tsx
index 84ed110251cf..b56febe01c0d 100644
--- a/front/components/assistant_builder/InstructionScreen.tsx
+++ b/front/components/assistant_builder/InstructionScreen.tsx
@@ -382,7 +382,7 @@ const InstructionsCharacterCount = ({
     <span
       className={classNames(
         "text-end text-xs",
-        count >= maxCount ? "text-red-500" : "text-slate-500"
+        count >= maxCount ? "text-red-500" : "text-muted-foreground"
       )}
     >
       {count} / {maxCount} characters
diff --git a/front/components/assistant_builder/SlackIntegration.tsx b/front/components/assistant_builder/SlackIntegration.tsx
index adc224c1925a..c27291efaecc 100644
--- a/front/components/assistant_builder/SlackIntegration.tsx
+++ b/front/components/assistant_builder/SlackIntegration.tsx
@@ -177,7 +177,7 @@ export function SlackAssistantDefaultManager({
                 <SlackLogo className="h-8 w-8" />
               </div>
 
-              <div className="text-sm font-normal text-element-900">
+              <div className="text-sm font-normal text-foreground">
                 Set this assistant as the default assistant on one or several of
                 your Slack channels. It will answer by default when the{" "}
                 <span className="font-bold">{assistantHandle}</span> Slack bot
diff --git a/front/components/assistant_builder/TemplateGrid.tsx b/front/components/assistant_builder/TemplateGrid.tsx
index 0668fcc924dc..cdc43b39df53 100644
--- a/front/components/assistant_builder/TemplateGrid.tsx
+++ b/front/components/assistant_builder/TemplateGrid.tsx
@@ -1,4 +1,4 @@
-import { AssistantPreview } from "@dust-tt/sparkle";
+import { LargeAssistantCard } from "@dust-tt/sparkle";
 
 import type { AssistantTemplateListType } from "@app/pages/api/w/[wId]/assistant/builder/templates";
 
@@ -17,12 +17,11 @@ export function TemplateGrid({
   return (
     <div className="grid grid-cols-2 gap-2">
       {templates.map((t) => (
-        <AssistantPreview
+        <LargeAssistantCard
           key={t.sId}
           title={t.handle}
           pictureUrl={t.pictureUrl}
           description={t.description ?? ""}
-          variant="list"
           onClick={() => openTemplateModal(t.sId)}
         />
       ))}
diff --git a/front/components/assistant_builder/actions/ProcessAction.tsx b/front/components/assistant_builder/actions/ProcessAction.tsx
index 885a53971def..41b67b391b71 100644
--- a/front/components/assistant_builder/actions/ProcessAction.tsx
+++ b/front/components/assistant_builder/actions/ProcessAction.tsx
@@ -424,7 +424,7 @@ export function ActionProcess({
         (actionConfiguration.tagsFilter?.in || []).length > 0) && (
         <div className="flex flex-col">
           <div className="flex flex-row items-center gap-4 pb-4">
-            <div className="text-sm font-semibold text-element-900">
+            <div className="text-sm font-semibold text-foreground">
               Folder tags filtering
             </div>
             <div>
@@ -539,7 +539,7 @@ export function ActionProcess({
       )}
 
       <div className={"flex flex-row items-center gap-4 pb-4"}>
-        <div className="text-sm font-semibold text-element-900">
+        <div className="text-sm font-semibold text-foreground">
           Process data from the last
         </div>
         <input
@@ -575,7 +575,7 @@ export function ActionProcess({
 
       <div className="flex flex-col">
         <div className="flex flex-row items-start">
-          <div className="flex-grow pb-2 text-sm font-semibold text-element-900">
+          <div className="flex-grow pb-2 text-sm font-semibold text-foreground">
             Schema
           </div>
           {actionConfiguration.schema.length > 0 && !isGeneratingSchema && (
diff --git a/front/components/assistant_builder/actions/RetrievalAction.tsx b/front/components/assistant_builder/actions/RetrievalAction.tsx
index b1750bafb4b0..4b96c8405fe4 100644
--- a/front/components/assistant_builder/actions/RetrievalAction.tsx
+++ b/front/components/assistant_builder/actions/RetrievalAction.tsx
@@ -190,7 +190,7 @@ export function ActionRetrievalExhaustive({
         <div
           className={classNames(
             "text-sm font-semibold",
-            timeFrameDisabled ? "text-slate-400" : "text-element-900"
+            timeFrameDisabled ? "text-slate-400" : "text-foreground"
           )}
         >
           Only include data from the last
diff --git a/front/components/assistant_builder/spaces/SpaceSelector.tsx b/front/components/assistant_builder/spaces/SpaceSelector.tsx
index 8fec0f796bed..51735902e4fe 100644
--- a/front/components/assistant_builder/spaces/SpaceSelector.tsx
+++ b/front/components/assistant_builder/spaces/SpaceSelector.tsx
@@ -96,7 +96,7 @@ export function SpaceSelector({
                         className={classNames(
                           "font-bold",
                           "align-middle",
-                          isDisabled ? "text-element-700" : "text-element-900"
+                          isDisabled ? "text-element-700" : "text-foreground"
                         )}
                       >
                         {getSpaceName(space)}
diff --git a/front/components/home/ContentBlocks.tsx b/front/components/home/ContentBlocks.tsx
index 7973a119a254..2cd88d677631 100644
--- a/front/components/home/ContentBlocks.tsx
+++ b/front/components/home/ContentBlocks.tsx
@@ -112,8 +112,8 @@ export const BlogBlock: React.FC<BlogBlockProps> = ({
       ) : null}
       <div className="flex flex-col p-6">
         <div className="flex flex-col gap-2">
-          <H5 className="line-clamp-2 text-slate-900">{title}</H5>
-          <P size="xs" className="line-clamp-3 text-slate-900">
+          <H5 className="line-clamp-2 text-foreground">{title}</H5>
+          <P size="xs" className="line-clamp-3 text-foreground">
             {content}
           </P>
         </div>
@@ -151,7 +151,7 @@ export const HeaderContentBlock = ({
       )}
     >
       {uptitle && (
-        <P size="lg" className="text-slate-500">
+        <P size="lg" className="text-muted-foreground">
           {uptitle}
         </P>
       )}
@@ -270,7 +270,7 @@ export const CarousselContentBlock = ({
       <H3 className="text-slate-800">{"Dust for " + title}</H3>
       <div className="flex flex-col gap-2">
         <H2 className="max-w-[600px] text-white">{subtitle}</H2>
-        <P size="md" className="max-w-[720px] text-slate-600">
+        <P size="md" className="max-w-[720px] text-muted-foreground">
           {description}
         </P>
       </div>
diff --git a/front/components/home/ContentComponents.tsx b/front/components/home/ContentComponents.tsx
index 4a9b5d151c9b..3e33a8b23f7a 100644
--- a/front/components/home/ContentComponents.tsx
+++ b/front/components/home/ContentComponents.tsx
@@ -95,7 +95,7 @@ export const Span = ({ children, className = "" }: ContentProps) => (
 );
 
 const pClasses = {
-  xxs: "font-objektiv text-xs text-slate-500 md:text-sm leading-relaxed",
+  xxs: "font-objektiv text-xs text-muted-foreground md:text-sm leading-relaxed",
   xs: "font-objektiv text-sm text-slate-400 md:text-base leading-relaxed",
   sm: "font-objektiv text-base text-slate-400 md:text-lg leading-relaxed",
   md: "font-objektiv text-lg md:text-lg text-slate-300 lg:text-xl leading-relaxed",
@@ -143,8 +143,8 @@ export const P = ({
 
 const aClasses = {
   primary: "text-action-400 hover:text-action-400 active:text-action-600",
-  secondary: "text-slate-200 hover:text-slate-100 active:text-slate-500",
-  tertiary: "text-slate-400 hover:text-slate-100 active:text-slate-500",
+  secondary: "text-slate-200 hover:text-slate-100 active:text-muted-foreground",
+  tertiary: "text-slate-400 hover:text-slate-100 active:text-muted-foreground",
 };
 
 interface AProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
diff --git a/front/components/home/LandingLayout.tsx b/front/components/home/LandingLayout.tsx
index 9083bdc7ca12..0d0c1ef2d765 100644
--- a/front/components/home/LandingLayout.tsx
+++ b/front/components/home/LandingLayout.tsx
@@ -189,7 +189,7 @@ const CookieBanner = ({
         className || ""
       )}
     >
-      <div className="text-sm font-normal text-element-900">
+      <div className="text-sm font-normal text-foreground">
         We use{" "}
         <A variant="primary">
           <Link
diff --git a/front/components/home/SolutionSection.tsx b/front/components/home/SolutionSection.tsx
index 042304da38b7..f877ad416916 100644
--- a/front/components/home/SolutionSection.tsx
+++ b/front/components/home/SolutionSection.tsx
@@ -121,7 +121,7 @@ const SolutionSectionContentBlock = ({
     const contents = Array.isArray(content) ? content : [content];
 
     return contents.map((block, index) => (
-      <P size="xs" className="max-w-[500px] text-slate-600" key={index}>
+      <P size="xs" className="max-w-[500px] text-muted-foreground" key={index}>
         {block}
       </P>
     ));
@@ -129,7 +129,7 @@ const SolutionSectionContentBlock = ({
 
   return (
     <div className={classNames("flex grow basis-0 flex-col gap-3")}>
-      <H5 className="text-slate-900">{title}</H5>
+      <H5 className="text-foreground">{title}</H5>
       {renderContentBlocks()}
     </div>
   );
@@ -158,7 +158,7 @@ export const SolutionSectionAssistantBlock = ({
       )}
     >
       <Avatar size="xl" emoji={emoji} backgroundColor={backgroundColor} />
-      <H5 className="truncate text-slate-900">{name}</H5>
+      <H5 className="truncate text-foreground">{name}</H5>
       <P size="xs" className="text-slate-700">
         {description}
       </P>
diff --git a/front/components/home/menu/MainNavigation.tsx b/front/components/home/menu/MainNavigation.tsx
index 7f2f2270f18b..dbaee16fb8ea 100644
--- a/front/components/home/menu/MainNavigation.tsx
+++ b/front/components/home/menu/MainNavigation.tsx
@@ -95,7 +95,7 @@ const ListItem = React.forwardRef<
         >
           <div className="flex h-6 items-center gap-0.5">
             <Icon
-              className="text-slate-600"
+              className="text-muted-foreground"
               visual={ChevronRightIcon}
               size="md"
             />
diff --git a/front/components/home/menu/MobileNavigation.tsx b/front/components/home/menu/MobileNavigation.tsx
index 8482fdc753f4..032459b7da73 100644
--- a/front/components/home/menu/MobileNavigation.tsx
+++ b/front/components/home/menu/MobileNavigation.tsx
@@ -56,7 +56,7 @@ export function MobileNavigation() {
                             onOpenChange={setOpen}
                             isExternal={item.isExternal}
                           >
-                            <ChevronRightIcon className="h-5 w-5 text-slate-500" />{" "}
+                            <ChevronRightIcon className="h-5 w-5 text-muted-foreground" />{" "}
                             {item.title}
                           </MobileLink>
                         ) : (
@@ -100,7 +100,7 @@ function MobileLink({
       target={isExternal ? "_blank" : undefined}
       className={classNames(
         "flex select-none items-center gap-1 rounded-md py-3 font-semibold leading-none text-slate-50 no-underline outline-none transition-colors",
-        "hover:bg-accent focus:bg-accent hover:text-slate-100 hover:underline hover:underline-offset-4 focus:text-slate-100 active:text-slate-500"
+        "hover:bg-accent focus:bg-accent hover:text-slate-100 hover:underline hover:underline-offset-4 focus:text-slate-100 active:text-muted-foreground"
       )}
       {...props}
     >
diff --git a/front/components/home/menu/NavigationMenu.tsx b/front/components/home/menu/NavigationMenu.tsx
index 41c4aff6404d..623db856cd96 100644
--- a/front/components/home/menu/NavigationMenu.tsx
+++ b/front/components/home/menu/NavigationMenu.tsx
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-md text-slate-400 hover:text-slate-100 active:text-slate-500 font-medium transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50 hover:underline hover:underline-offset-4"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-md text-slate-400 hover:text-slate-100 active:text-muted-foreground font-medium transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50 hover:underline hover:underline-offset-4"
 );
 
 const NavigationMenuTrigger = React.forwardRef<
diff --git a/front/components/members/EditInvitationModal.tsx b/front/components/members/EditInvitationModal.tsx
index b3854cb88bc4..85fc5de59fed 100644
--- a/front/components/members/EditInvitationModal.tsx
+++ b/front/components/members/EditInvitationModal.tsx
@@ -65,7 +65,7 @@ export function EditInvitationModal({
             {new Date(invitation.createdAt).toLocaleDateString()}
           </div>
           <div className="flex items-center gap-2">
-            <div className="font-semibold text-element-900">Role:</div>
+            <div className="font-semibold text-foreground">Role:</div>
             <RoleDropDown
               selectedRole={selectedRole}
               onChange={setSelectedRole}
diff --git a/front/components/members/InvitationModal.tsx b/front/components/members/InvitationModal.tsx
index de46e5d16d0d..0ff93fdf3e83 100644
--- a/front/components/members/InvitationModal.tsx
+++ b/front/components/members/InvitationModal.tsx
@@ -221,7 +221,7 @@ export function InviteEmailModal({
             </div>
             <div className="flex flex-col gap-2">
               <div className="flex items-center gap-2">
-                <div className="font-semibold text-element-900">Role:</div>
+                <div className="font-semibold text-foreground">Role:</div>
                 <RoleDropDown
                   selectedRole={invitationRole}
                   onChange={setInvitationRole}
diff --git a/front/components/members/InvitationsList.tsx b/front/components/members/InvitationsList.tsx
index 5fd8b7f98a85..39a2db226979 100644
--- a/front/components/members/InvitationsList.tsx
+++ b/front/components/members/InvitationsList.tsx
@@ -104,7 +104,7 @@ export function InvitationsList({
                 <Avatar size="xs" />
               </div>
               <div className="flex grow flex-col gap-1 sm:flex-row sm:gap-3">
-                <div className="font-medium text-element-900">Loading...</div>
+                <div className="font-medium text-foreground">Loading...</div>
                 <div className="grow font-normal text-element-700"></div>
               </div>
               <div>
diff --git a/front/components/spaces/EditSpaceManagedDatasourcesViews.tsx b/front/components/spaces/EditSpaceManagedDatasourcesViews.tsx
index 3cb1e766e3e6..c79daa6f069c 100644
--- a/front/components/spaces/EditSpaceManagedDatasourcesViews.tsx
+++ b/front/components/spaces/EditSpaceManagedDatasourcesViews.tsx
@@ -119,13 +119,13 @@ export function EditSpaceManagedDataSourcesViews({
         validateVariant: "warning",
         alertDialog: true,
         children: (
-          <div className="space-y-4 text-slate-900">
+          <div className="space-y-4 text-foreground">
             <p>The following data sources are currently in use:</p>
 
             {deletedViewsWithUsage.map((view) => (
               <p key={view.sId} className="font-medium">
                 {getDisplayNameForDataSource(view.dataSource)}{" "}
-                <span className="italic text-slate-500">
+                <span className="italic text-muted-foreground">
                   (used by {view.usage.count} assistant
                   {view.usage.count > 1 ? "s" : ""})
                 </span>
diff --git a/front/components/workspace/Analytics.tsx b/front/components/workspace/Analytics.tsx
index 7aa008bb4d2e..6e8b3d3560bd 100644
--- a/front/components/workspace/Analytics.tsx
+++ b/front/components/workspace/Analytics.tsx
@@ -1,4 +1,4 @@
-import { Card, Page, Spinner } from "@dust-tt/sparkle";
+import { Page, Spinner, ValueCard } from "@dust-tt/sparkle";
 import type { WorkspaceType } from "@dust-tt/types";
 
 import { useWorkspaceAnalytics } from "@app/lib/swr/workspaces";
@@ -22,64 +22,60 @@ export function QuickInsights({ owner }: QuickInsightsProps) {
         </div>
       ) : (
         <div className="mt-2 grid grid-cols-2 gap-2">
-          <Card
+          <ValueCard
             title="Members"
             subtitle="Total members"
             content={
-              <div className="text-lg font-semibold text-element-900">
+              <div className="text-lg font-semibold text-foreground">
                 {analytics.memberCount}
               </div>
             }
-            size="sm"
             className="w-full"
           />
-          <Card
+          <ValueCard
             title="Daily Active Members"
             subtitle="Average on 7 days"
             content={
               <div className="flex flex-col gap-1">
-                <div className="text-lg font-semibold text-element-900">
+                <div className="text-lg font-semibold text-foreground">
                   {analytics.averageWeeklyDailyActiveUsers.count}
                 </div>
               </div>
             }
-            size="sm"
             className="w-full"
           />
-          <Card
+          <ValueCard
             title="Active Members"
             subtitle="Last 7 days"
             content={
               <div className="grid grid-cols-2">
-                <div className="text-lg font-semibold text-element-900">
+                <div className="text-lg font-semibold text-foreground">
                   {analytics.weeklyActiveUsers.count}
                 </div>
-                <div className="text-lg font-semibold text-element-900">
+                <div className="text-lg font-semibold text-foreground">
                   {`${analytics.weeklyActiveUsers.growth >= 0 ? "+" : ""}${Math.floor(
                     analytics.weeklyActiveUsers.growth
                   )}%`}
                 </div>
               </div>
             }
-            size="sm"
             className="w-full"
           />
-          <Card
+          <ValueCard
             title="Active Members"
             subtitle="Last 30 days"
             content={
               <div className="grid grid-cols-2">
-                <div className="text-lg font-semibold text-element-900">
+                <div className="text-lg font-semibold text-foreground">
                   {analytics.monthlyActiveUsers.count}
                 </div>
-                <div className="text-lg font-semibold text-element-900">
+                <div className="text-lg font-semibold text-foreground">
                   {`${analytics.monthlyActiveUsers.growth >= 0 ? "+" : ""}${Math.floor(
                     analytics.monthlyActiveUsers.growth
                   )}%`}
                 </div>
               </div>
             }
-            size="sm"
             className="w-full"
           />
         </div>
diff --git a/front/components/workspace/ChangeMemberModal.tsx b/front/components/workspace/ChangeMemberModal.tsx
index abfe79b33fa1..5a5d1bf8e0f1 100644
--- a/front/components/workspace/ChangeMemberModal.tsx
+++ b/front/components/workspace/ChangeMemberModal.tsx
@@ -70,7 +70,7 @@ export function ChangeMemberModal({
           <div className="flex items-center gap-4">
             <Avatar size="lg" visual={member.image} name={member.fullName} />
             <div className="flex grow flex-col">
-              <div className="font-semibold text-element-900">
+              <div className="font-semibold text-foreground">
                 {member.fullName}
               </div>
               <div className="font-normal">{member.email}</div>
@@ -78,7 +78,7 @@ export function ChangeMemberModal({
           </div>
           <div className="flex flex-col gap-2">
             <div className="flex items-center gap-2">
-              <div className="font-bold text-element-900">Role:</div>
+              <div className="font-bold text-foreground">Role:</div>
               <RoleDropDown
                 selectedRole={selectedRole || role}
                 onChange={setSelectedRole}
diff --git a/front/components/workspace/ProviderManagementModal.tsx b/front/components/workspace/ProviderManagementModal.tsx
index 7695d889d759..e25f8b3a3b16 100644
--- a/front/components/workspace/ProviderManagementModal.tsx
+++ b/front/components/workspace/ProviderManagementModal.tsx
@@ -150,7 +150,7 @@ export function ProviderManagementModal({
         <SheetContainer>
           <div className="mt-8 divide-y divide-gray-200">
             <div className="flex items-center justify-between px-4 pb-4">
-              <span className="text-left font-bold text-element-900">
+              <span className="text-left font-bold text-foreground">
                 Make all providers available
               </span>
               <SliderToggle
diff --git a/front/package-lock.json b/front/package-lock.json
index b301e844cfbc..6df44f16f4f0 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -7,7 +7,7 @@
       "dependencies": {
         "@auth0/nextjs-auth0": "^3.5.0",
         "@dust-tt/client": "file:../sdks/js",
-        "@dust-tt/sparkle": "^0.2.342",
+        "@dust-tt/sparkle": "0.2.345",
         "@dust-tt/types": "file:../types",
         "@headlessui/react": "^1.7.7",
         "@heroicons/react": "^2.0.11",
@@ -11453,9 +11453,9 @@
       "link": true
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.342",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.342.tgz",
-      "integrity": "sha512-D7BaQkXaleddh4LuMfIeIx7cdsSi2OX/f/xeQ0BGbWSS9X909mqESN+0OiCawJyxwVHgAkAfsoedF+HcU48aEg==",
+      "version": "0.2.345",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.345.tgz",
+      "integrity": "sha512-4VdoTpN8OOg2FJ5EHPx1xAk7YGRLP5mAvps9TkjGCMkgPTTV0vdq/4U3iLN9phaM70B8YQVfeurI9uLzAOK61A==",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
diff --git a/front/package.json b/front/package.json
index e9ae89cea8d8..139ba8abc94e 100644
--- a/front/package.json
+++ b/front/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^3.5.0",
     "@dust-tt/client": "file:../sdks/js",
-    "@dust-tt/sparkle": "^0.2.342",
+    "@dust-tt/sparkle": "0.2.345",
     "@dust-tt/types": "file:../types",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.11",
diff --git a/front/pages/404.tsx b/front/pages/404.tsx
index 757eb3ec001a..e02f550d80fa 100644
--- a/front/pages/404.tsx
+++ b/front/pages/404.tsx
@@ -16,13 +16,13 @@ export default function Custom404() {
     <div className="flex h-screen items-center justify-center">
       <div className="flex flex-col gap-3 text-center">
         <div>
-          <span className="text-4xl font-normal leading-10 text-slate-900">
+          <span className="text-4xl font-normal leading-10 text-foreground">
             ☕️
           </span>
-          <p className="text-xl font-bold leading-7 text-slate-900">
+          <p className="text-xl font-bold leading-7 text-foreground">
             404: Page not found
           </p>
-          <p className="text-sm font-normal leading-tight text-slate-500">
+          <p className="text-sm font-normal leading-tight text-muted-foreground">
             Looks like this page took an unscheduled coffee break.
           </p>
           {currentURL && (
@@ -32,7 +32,11 @@ export default function Custom404() {
           )}
         </div>
         <Link href="/">
-          <Button variant="ghost" label="Back to homepage" icon={LogoutIcon} />
+          <Button
+            variant="highlight"
+            label="Back to homepage"
+            icon={LogoutIcon}
+          />
         </Link>
       </div>
     </div>
diff --git a/front/pages/no-workspace.tsx b/front/pages/no-workspace.tsx
index b09dda0a7c3e..c830c6c99803 100644
--- a/front/pages/no-workspace.tsx
+++ b/front/pages/no-workspace.tsx
@@ -145,7 +145,7 @@ export default function NoWorkspace({
           <div className="items-left justify-left flex flex-row">
             <Icon visual={LogoSquareColorLogo} size="md" />
           </div>
-          <span className="text-2xl font-bold text-element-900">
+          <span className="text-2xl font-bold text-foreground">
             Hello {userFirstName}!
           </span>
         </div>
diff --git a/front/pages/poke/templates/[tId].tsx b/front/pages/poke/templates/[tId].tsx
index 302eb1e43768..eff1f3bec603 100644
--- a/front/pages/poke/templates/[tId].tsx
+++ b/front/pages/poke/templates/[tId].tsx
@@ -1,5 +1,5 @@
 import {
-  AssistantPreview,
+  AssistantCard,
   ColorPicker,
   DropdownMenu,
   DropdownMenuContent,
@@ -436,11 +436,10 @@ function PreviewDialog({ form }: { form: any }) {
         <PokeDialogHeader>
           <PokeDialogTitle>Preview</PokeDialogTitle>
         </PokeDialogHeader>
-        <AssistantPreview
+        <AssistantCard
           title={form.getValues("handle")}
           pictureUrl={avatarVisual}
           description={form.getValues("description") ?? ""}
-          variant="list"
           onClick={() => console.log("clicked")}
         />
       </PokeDialogContent>
diff --git a/sparkle/src/components/AnimatedText.tsx b/sparkle/src/components/AnimatedText.tsx
index de5c8363b4c4..1dee400c6682 100644
--- a/sparkle/src/components/AnimatedText.tsx
+++ b/sparkle/src/components/AnimatedText.tsx
@@ -49,7 +49,7 @@ const animatedTextVariants: Record<AnimatedTextVariantType, string> = {
   highlight: "s-text-highlight",
   emerald: "s-text-emerald-800",
   amber: "s-text-amber-800",
-  slate: "s-text-slate-600",
+  slate: "s-text-muted-foreground",
   purple: "s-text-purple-800-800",
   warning: "s-text-warning-800",
   sky: "s-text-sky-800",
diff --git a/sparkle/src/components/Breadcrumbs.tsx b/sparkle/src/components/Breadcrumbs.tsx
index a4e757dfa177..7fc8116604de 100644
--- a/sparkle/src/components/Breadcrumbs.tsx
+++ b/sparkle/src/components/Breadcrumbs.tsx
@@ -87,7 +87,7 @@ export function Breadcrumbs({ items }: BreadcrumbProps) {
                   href={item.href || "#"}
                   className={
                     index === items.length - 1
-                      ? "s-text-element-900"
+                      ? "s-text-foreground"
                       : "s-text-element-700"
                   }
                 >
diff --git a/sparkle/src/components/CardButton.tsx b/sparkle/src/components/CardButton.tsx
deleted file mode 100644
index 21a72a4c5559..000000000000
--- a/sparkle/src/components/CardButton.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { cva } from "class-variance-authority";
-import React, { ReactNode } from "react";
-
-import {
-  noHrefLink,
-  SparkleContext,
-  SparkleContextLinkType,
-} from "@sparkle/context";
-import { cn } from "@sparkle/lib/utils";
-
-export const CARD_BUTTON_VARIANTS = [
-  "primary",
-  "secondary",
-  "tertiary",
-] as const;
-
-export type CardButtonVariantType = (typeof CARD_BUTTON_VARIANTS)[number];
-
-const variantClasses: Record<CardButtonVariantType, string> = {
-  primary: "s-bg-primary-50 s-border-border-dark/0",
-  secondary: "s-bg-background s-border-border-dark",
-  tertiary: "s-bg-background s-border-border-dark/0",
-};
-
-const CARD_BUTTON_SIZES = ["sm", "md", "lg"] as const;
-
-type CardButtonSizeType = (typeof CARD_BUTTON_SIZES)[number];
-
-const sizeVariants: Record<CardButtonSizeType, string> = {
-  sm: "s-p-3 s-rounded-xl",
-  md: "s-p-4 s-rounded-2xl",
-  lg: "s-p-5 s-rounded-3xl",
-};
-
-const cardButtonVariants = cva(
-  "s-flex s-text-left  s-justify-center s-group s-border s-overflow-hidden s-text-foreground",
-  {
-    variants: {
-      variant: variantClasses,
-      size: sizeVariants,
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md",
-    },
-  }
-);
-
-interface CommonProps {
-  variant?: CardButtonVariantType;
-  size?: CardButtonSizeType;
-  className?: string;
-}
-
-interface LinkProps extends CommonProps {
-  children?: ReactNode;
-  href: string;
-  target?: string;
-  rel?: string;
-  replace?: boolean;
-  shallow?: boolean;
-  onClick?: never;
-  onMouseEnter?: never;
-  onMouseLeave?: never;
-}
-
-interface ButtonProps
-  extends CommonProps,
-    React.ButtonHTMLAttributes<HTMLDivElement> {
-  href?: never;
-  target?: never;
-  rel?: never;
-  replace?: never;
-  shallow?: never;
-}
-
-export type CardButtonProps = LinkProps | ButtonProps;
-
-export const CardButton = React.forwardRef<HTMLDivElement, CardButtonProps>(
-  (
-    {
-      children,
-      variant,
-      size,
-      className,
-      onClick,
-      onMouseEnter,
-      onMouseLeave,
-      href,
-      target = "_blank",
-      rel = "",
-      replace,
-      shallow,
-      ...props
-    },
-    ref
-  ) => {
-    const { components } = React.useContext(SparkleContext);
-    const Link: SparkleContextLinkType = href ? components.link : noHrefLink;
-
-    const cardButtonClassNames = cn(
-      cardButtonVariants({ variant, size }),
-      (onClick || onMouseEnter) &&
-        "s-cursor-pointer disabled:s-text-primary-muted disabled:s-border-structure-100 disabled:s-pointer-events-none s-transition s-duration-200",
-      "[&:not(:has(button:hover))]:hover:s-bg-primary-100", // apply hover style when no button children are hovered
-      "[&:not(:has(button:active))]:active:s-bg-primary-200", // apply hover style when no button children are hovered
-      className
-    );
-
-    if (href) {
-      return (
-        <Link
-          href={href}
-          className={cardButtonClassNames}
-          replace={replace}
-          shallow={shallow}
-          target={target}
-          rel={rel}
-        >
-          {children}
-        </Link>
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cardButtonClassNames}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-CardButton.displayName = "CardButton";
diff --git a/sparkle/src/components/Chip.tsx b/sparkle/src/components/Chip.tsx
index 8da67debcf9a..af5e3f6f99b7 100644
--- a/sparkle/src/components/Chip.tsx
+++ b/sparkle/src/components/Chip.tsx
@@ -52,7 +52,7 @@ const backgroundVariants: Record<ChipColorType, string> = {
 const textVariants: Record<ChipColorType, string> = {
   emerald: "s-text-emerald-900",
   amber: "s-text-amber-900",
-  slate: "s-text-slate-900",
+  slate: "s-text-foreground",
   purple: "s-text-purple-900",
   warning: "s-text-warning-900",
   sky: "s-text-sky-900",
diff --git a/sparkle/src/components/Collapsible.tsx b/sparkle/src/components/Collapsible.tsx
index 1c5ca6334541..a5f67710c095 100644
--- a/sparkle/src/components/Collapsible.tsx
+++ b/sparkle/src/components/Collapsible.tsx
@@ -65,11 +65,11 @@ Collapsible.Button = function ({
     },
 
     secondary: {
-      base: "s-text-element-900 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
+      base: "s-text-foreground s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
       hover: "group-hover/col:s-text-action-500",
       active: "active:s-text-action-600",
       dark: {
-        base: "dark:s-text-element-900-dark",
+        base: "dark:s-text-foreground-dark",
         hover: "dark:group-hover/col:s-text-action-400-dark",
         active: "dark:active:s-text-action-600-dark",
         disabled: "dark:s-element-500-dark",
diff --git a/sparkle/src/components/ContextItem.tsx b/sparkle/src/components/ContextItem.tsx
index 57f1725aed32..b1752e984dfd 100644
--- a/sparkle/src/components/ContextItem.tsx
+++ b/sparkle/src/components/ContextItem.tsx
@@ -153,7 +153,7 @@ ContextItem.SectionHeader = function ({
         hasBorder ? "s-border-b s-border-structure-200" : ""
       )}
     >
-      <div className="s-text-xl s-font-medium s-text-element-900 dark:s-text-element-900-dark">
+      <div className="s-text-xl s-font-medium s-text-foreground dark:s-text-foreground-dark">
         {title}
       </div>
       {description && (
diff --git a/sparkle/src/components/ConversationMessageHeader.tsx b/sparkle/src/components/ConversationMessageHeader.tsx
index 3c56cab568fc..095d208ba67c 100644
--- a/sparkle/src/components/ConversationMessageHeader.tsx
+++ b/sparkle/src/components/ConversationMessageHeader.tsx
@@ -30,7 +30,7 @@ export function ConversationMessageHeader({
       <div className="flex items-center gap-2">
         <div
           className={cn(
-            "s-pb-1 s-text-base s-font-medium s-text-element-900",
+            "s-pb-1 s-text-base s-font-medium s-text-foreground",
             size === "compact" ? "s-text-sm" : "s-text-base"
           )}
         >
diff --git a/sparkle/src/components/IconButton.tsx b/sparkle/src/components/IconButton.tsx
index b2efb0d9f644..3ffecce9c037 100644
--- a/sparkle/src/components/IconButton.tsx
+++ b/sparkle/src/components/IconButton.tsx
@@ -28,7 +28,7 @@ const styleVariants: Record<ButtonVariantType, string> = {
     "active:s-text-warning-600 dark:active:s-text-warning-600-dark" +
     "s-text-element-500 dark:s-text-element-500-dark",
   highlight:
-    "s-text-element-900 dark:s-text-element-900-dark" +
+    "s-text-foreground dark:s-text-foreground-dark" +
     "hover:s-text-action-400 dark:hover:s-text-action-500-dark" +
     "active:s-text-action-600 dark:active:s-text-action-600-dark" +
     "s-text-element-500 dark:s-text-element-500-dark",
diff --git a/sparkle/src/components/IconToggleButton.tsx b/sparkle/src/components/IconToggleButton.tsx
index 0670abeacd74..fb9944210c7a 100644
--- a/sparkle/src/components/IconToggleButton.tsx
+++ b/sparkle/src/components/IconToggleButton.tsx
@@ -23,13 +23,13 @@ const baseClasses =
 
 const iconClasses = {
   secondary: {
-    idle: "s-text-element-900",
+    idle: "s-text-foreground",
     selected: "s-text-action-500",
     hover: "hover:s-text-action-400",
     active: "active:s-text-action-600",
     disabled: "s-text-element-500",
     dark: {
-      idle: "dark:s-text-element-900-dark",
+      idle: "dark:s-text-foreground-dark",
       selected: "dark:s-text-action-500-dark",
       hover: "dark:hover:s-text-action-500-dark",
       active: "dark:active:s-text-action-600-dark",
diff --git a/sparkle/src/components/Page.tsx b/sparkle/src/components/Page.tsx
index 54a95690907d..9241a0fb8cf9 100644
--- a/sparkle/src/components/Page.tsx
+++ b/sparkle/src/components/Page.tsx
@@ -21,7 +21,7 @@ export function Page({ children, variant = "normal" }: PageProps) {
     <main className={mainVariantClasses}>
       <div
         className={classNames(
-          "s-mx-auto s-flex s-h-full s-max-w-4xl s-flex-col s-text-sm s-font-normal s-text-element-900",
+          "s-mx-auto s-flex s-h-full s-max-w-4xl s-flex-col s-text-sm s-font-normal s-text-foreground",
           divVariantClassNames
         )}
       >
@@ -97,7 +97,7 @@ Page.P = function ({ children, variant, size = "sm" }: PagePProps) {
         PsizeClasses[size],
         variant === "secondary"
           ? "s-text-element-700 dark:s-text-element-600-dark"
-          : "s-text-element-900 dark:s-text-element-900-dark"
+          : "s-text-foreground dark:s-text-foreground-dark"
       )}
     >
       {children}
@@ -125,7 +125,7 @@ Page.H = function ({ children, variant = "h3" }: PageHProps) {
   return (
     <Component
       className={classNames(
-        "s-text-element-900 dark:s-text-element-900-dark",
+        "s-text-foreground dark:s-text-foreground-dark",
         hSizes[variant]
       )}
     >
diff --git a/sparkle/src/components/Popup.tsx b/sparkle/src/components/Popup.tsx
index 8e8cb645a5c1..3620e337387a 100644
--- a/sparkle/src/components/Popup.tsx
+++ b/sparkle/src/components/Popup.tsx
@@ -57,7 +57,7 @@ export function Popup({
             </div>
           )}
         </div>
-        <div className="s-text-sm s-font-normal s-text-element-900">
+        <div className="s-text-sm s-font-normal s-text-foreground">
           {description}
         </div>
         <div className="s-self-center">
diff --git a/sparkle/src/components/SearchInput.tsx b/sparkle/src/components/SearchInput.tsx
index aea142ef2ab6..09d9429308a4 100644
--- a/sparkle/src/components/SearchInput.tsx
+++ b/sparkle/src/components/SearchInput.tsx
@@ -57,7 +57,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
             <div
               className={cn(
                 "s-px-2",
-                disabled ? "s-text-element-600" : "s-text-element-900"
+                disabled ? "s-text-element-600" : "s-text-foreground"
               )}
             >
               <Icon
diff --git a/sparkle/src/components/Tree.tsx b/sparkle/src/components/Tree.tsx
index 8340d30c3519..41d6c7eb246b 100644
--- a/sparkle/src/components/Tree.tsx
+++ b/sparkle/src/components/Tree.tsx
@@ -176,7 +176,7 @@ Tree.Item = function ({
         {checkbox && <Checkbox {...checkbox} size="xs" />}
         <Icon visual={visual} size="sm" className={tailwindIconTextColor} />
         <div
-          className={`s-font-regular s-truncate s-text-sm s-text-element-900 ${labelClassName}`}
+          className={`s-font-regular s-truncate s-text-sm s-text-foreground ${labelClassName}`}
         >
           {label}
         </div>
diff --git a/sparkle/src/components/markdown/Markdown.tsx b/sparkle/src/components/markdown/Markdown.tsx
index fbb1bc82f1f3..0df172eda0e7 100644
--- a/sparkle/src/components/markdown/Markdown.tsx
+++ b/sparkle/src/components/markdown/Markdown.tsx
@@ -164,7 +164,7 @@ export function Markdown({
         </h6>
       ),
       strong: ({ children }) => (
-        <strong className="s-font-semibold s-text-element-900">
+        <strong className="s-font-semibold s-text-foreground">
           {children}
         </strong>
       ),