diff --git a/front/components/actions/browse/BrowseActionDetails.tsx b/front/components/actions/browse/BrowseActionDetails.tsx
index 076ad29b9f70d..5864fe7c72621 100644
--- a/front/components/actions/browse/BrowseActionDetails.tsx
+++ b/front/components/actions/browse/BrowseActionDetails.tsx
@@ -34,7 +34,11 @@ export function BrowseActionDetails({
                 </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>
diff --git a/front/components/actions/tables_query/TablesQueryActionDetails.tsx b/front/components/actions/tables_query/TablesQueryActionDetails.tsx
index 3e793b221f33e..a57fff54abade 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,
@@ -144,7 +146,10 @@ function QueryTablesResults({
     <div>
       <span className="text-sm font-bold text-slate-900">Results</span>
       <div onClick={handleDownload} className="py-2">
-        <Citation>
+        <Citation className="w-48 min-w-48 max-w-48">
+          <CitationIcons>
+            <Icon visual={TableIcon} />
+          </CitationIcons>
           <CitationTitle>{title}</CitationTitle>
         </Citation>
       </div>
diff --git a/front/components/assistant/AssistantBrowser.tsx b/front/components/assistant/AssistantBrowser.tsx
index d49e918422b6b..cbbeb77e90953 100644
--- a/front/components/assistant/AssistantBrowser.tsx
+++ b/front/components/assistant/AssistantBrowser.tsx
@@ -1,10 +1,10 @@
 import {
-  AssistantPreview,
+  AssistantCard,
+  AssistantCardMore,
   Button,
   CompanyIcon,
   LockIcon,
   MagnifyingGlassIcon,
-  MoreIcon,
   PlusIcon,
   RobotIcon,
   RocketIcon,
@@ -203,19 +203,15 @@ export function AssistantBrowser({
       {viewTab && (
         <div className="relative grid w-full grid-cols-1 gap-2 px-4 md:grid-cols-3">
           {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);
diff --git a/front/components/assistant/conversation/AgentSuggestion.tsx b/front/components/assistant/conversation/AgentSuggestion.tsx
index 0eaf5dd41630a..9eba0c1ec5edc 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,
@@ -121,20 +123,23 @@ 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)}
+                action={
+                  <AssistantCardMore
+                    onClick={() => showAssistantDetails(agent)}
+                  />
+                }
               />
             ))}
-          </div>
+          </CardGrid>
         )}
       </div>
     </>
diff --git a/front/components/assistant/conversation/input_bar/InputBarCitations.tsx b/front/components/assistant/conversation/input_bar/InputBarCitations.tsx
index d96f21cbb6889..d5807caa71d83 100644
--- a/front/components/assistant/conversation/input_bar/InputBarCitations.tsx
+++ b/front/components/assistant/conversation/input_bar/InputBarCitations.tsx
@@ -27,7 +27,7 @@ export function InputBarCitations({
         <>
           <Citation
             key={`cf-${blob.id}`}
-            className="w-48"
+            className="w-40"
             isLoading={blob.isUploading}
           >
             {isImage ? (
@@ -59,7 +59,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="border-boder-dark mr-4 flex gap-1 overflow-auto border-b pb-3 pt-4">
       {processContentFragments()}
     </div>
   );
diff --git a/front/components/assistant_builder/TemplateGrid.tsx b/front/components/assistant_builder/TemplateGrid.tsx
index 0668fcc924dcd..e4d058e11e69d 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 { AssistantCard, CardGrid } from "@dust-tt/sparkle";
 
 import type { AssistantTemplateListType } from "@app/pages/api/w/[wId]/assistant/builder/templates";
 
@@ -15,17 +15,16 @@ export function TemplateGrid({
     return null;
   }
   return (
-    <div className="grid grid-cols-2 gap-2">
+    <CardGrid>
       {templates.map((t) => (
-        <AssistantPreview
+        <AssistantCard
           key={t.sId}
           title={t.handle}
           pictureUrl={t.pictureUrl}
           description={t.description ?? ""}
-          variant="list"
           onClick={() => openTemplateModal(t.sId)}
         />
       ))}
-    </div>
+    </CardGrid>
   );
 }
diff --git a/front/pages/poke/templates/[tId].tsx b/front/pages/poke/templates/[tId].tsx
index 302eb1e437686..e24bf3fa1d7d8 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,7 +436,7 @@ function PreviewDialog({ form }: { form: any }) {
         <PokeDialogHeader>
           <PokeDialogTitle>Preview</PokeDialogTitle>
         </PokeDialogHeader>
-        <AssistantPreview
+        <AssistantCard
           title={form.getValues("handle")}
           pictureUrl={avatarVisual}
           description={form.getValues("description") ?? ""}