diff --git a/front/components/Button.tsx b/front/components/Button.tsx
index 192017c6c55b..d696f14ab846 100644
--- a/front/components/Button.tsx
+++ b/front/components/Button.tsx
@@ -116,7 +116,7 @@ export function SignUpDropDownButton({
         onClose={() => setShowModal(false)}
         hasChanged={false}
         title="Start with Dust"
-        type="right-side"
+        variant="side-sm"
       >
         <div className="flex h-full items-center justify-center">
           <div className="flex flex-col items-center justify-center gap-16 px-2">
diff --git a/front/components/ConnectorPermissionsModal.tsx b/front/components/ConnectorPermissionsModal.tsx
index a575a6079bf5..4fd8f6fd298b 100644
--- a/front/components/ConnectorPermissionsModal.tsx
+++ b/front/components/ConnectorPermissionsModal.tsx
@@ -189,7 +189,7 @@ export default function ConnectorPermissionsModal({
         !!Object.keys(updatedPermissionByInternalId).length ||
         automaticallyIncludeNewResources !== null
       }
-      type="full-screen"
+      variant="full-screen"
     >
       <div className="mx-auto max-w-4xl text-left">
         {!isDefaultNewResourcePermissionLoading &&
diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
index 308ffc0ac770..2ead24950a66 100644
--- a/front/components/assistant_builder/AssistantBuilder.tsx
+++ b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -1248,7 +1248,7 @@ function SlackIntegration({
     <>
       <Modal
         isOpen={modalOpen}
-        type="full-screen"
+        variant="full-screen"
         hasChanged={hasChanged}
         onClose={closeModal}
         title="Slack bot configuration"
diff --git a/front/components/assistant_builder/AssistantBuilderAvatarPicker.tsx b/front/components/assistant_builder/AssistantBuilderAvatarPicker.tsx
index faa6d536f3fc..32b160b9842e 100644
--- a/front/components/assistant_builder/AssistantBuilderAvatarPicker.tsx
+++ b/front/components/assistant_builder/AssistantBuilderAvatarPicker.tsx
@@ -144,7 +144,7 @@ export function AvatarPicker({
       isOpen={isOpen}
       onClose={onClose}
       title="Select an avatar for your assistant:"
-      type="full-screen"
+      variant="full-screen"
       hasChanged={currentTab === "upload" && !!src}
       onSave={isUploadingAvatar ? undefined : onUpload}
     >
diff --git a/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx b/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx
index 9ae862f09be3..f523f27e267d 100644
--- a/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx
+++ b/front/components/assistant_builder/AssistantBuilderDataSourceModal.tsx
@@ -84,7 +84,7 @@ export default function AssistantBuilderDataSourceModal({
         !!selectedDataSource &&
         (Object.keys(selectedResources).length > 0 || isSelectAll)
       }
-      type="full-screen"
+      variant="full-screen"
       title="Add Data Sources"
     >
       <div className="w-full pt-12">
diff --git a/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx b/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx
index 13e83a7558c4..2e73c8d0dd63 100644
--- a/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx
+++ b/front/components/assistant_builder/AssistantBuilderDustAppModal.tsx
@@ -30,7 +30,7 @@ export default function AssistantBuilderDustAppModal({
       isOpen={isOpen}
       onClose={onClose}
       hasChanged={false}
-      type="full-screen"
+      variant="full-screen"
       title="Select Dust App"
     >
       <div className="w-full pt-12">
diff --git a/front/package-lock.json b/front/package-lock.json
index c4a5eb9ccf45..fd0f20e869b8 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@dust-tt/sparkle": "^0.2.36",
+        "@dust-tt/sparkle": "^0.2.37-alpha",
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
         "@headlessui/react": "^1.7.7",
@@ -860,9 +860,9 @@
       "integrity": "sha512-smLocSfrt3s53H/XSVP3/1kP42oqvrkjUPtyaFd1F79ux24oE31BKt+q0c6lsa6hOYrFzsIwyc5GXAI5JmfOew=="
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.36",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.36.tgz",
-      "integrity": "sha512-aCoP6WWPSNkMqyaIvXIrNkLXOahbi4ng1Mb3Ys5qE5CQvUFB0p4KkfFQr+ZYjWnxAx2k4LwnE/+RN6mOyr7N2Q==",
+      "version": "0.2.37-alpha",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.37-alpha.tgz",
+      "integrity": "sha512-1rlViBjWbxXgg3g/tSf8WYdVOVFVZsgQ1/P8w+3JL1fpSsqJ/PQfvPhTzKDieBHGQ4bA5B6CTAsFn7oKL5r15A==",
       "dependencies": {
         "@headlessui/react": "^1.7.17"
       },
diff --git a/front/package.json b/front/package.json
index d4676eb65b41..f159affc5135 100644
--- a/front/package.json
+++ b/front/package.json
@@ -13,7 +13,7 @@
     "initdb": "env $(cat .env.local) npx tsx admin/db.ts"
   },
   "dependencies": {
-    "@dust-tt/sparkle": "^0.2.36",
+    "@dust-tt/sparkle": "^0.2.37-alpha",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.7",
diff --git a/front/pages/w/[wId]/members/index.tsx b/front/pages/w/[wId]/members/index.tsx
index c30d8ec61346..e57bdc58c9a0 100644
--- a/front/pages/w/[wId]/members/index.tsx
+++ b/front/pages/w/[wId]/members/index.tsx
@@ -438,7 +438,7 @@ function InviteEmailModal({
       onClose={onClose}
       hasChanged={emailError === "" && inviteEmail !== "" && !isSending}
       title="Invite new users"
-      type="right-side"
+      variant="side-sm"
       saveLabel="Invite"
       isSaving={isSending}
       onSave={async () => {
@@ -540,7 +540,7 @@ function InviteSettingsModal({
         !domainUpdating
       }
       title="Invitation link settings"
-      type="right-side"
+      variant="side-sm"
       onSave={() => validDomain() && handleUpdateWorkspace()}
     >
       <div className="mt-6 flex flex-col gap-6 px-2">
@@ -623,7 +623,7 @@ function RevokeInvitationModal({
       hasChanged={false}
       title="Revoke invitation"
       isSaving={isSaving}
-      type="default"
+      variant="dialogue"
     >
       <div className="mt-6 flex flex-col gap-6 px-2">
         <div>
@@ -714,7 +714,7 @@ function ChangeMemberModal({
         selectedRole !== null && selectedRole !== member.workspaces[0].role
       }
       title={member.fullName || "Unreachable"}
-      type="right-side"
+      variant="side-sm"
       onSave={async () => {
         setIsSaving(true);
         if (!selectedRole) return; // unreachable due to hasChanged
@@ -787,7 +787,7 @@ function ChangeMemberModal({
         isOpen={revokeMemberModalOpen}
         title="Revoke member access"
         hasChanged={false}
-        type="default"
+        variant="dialogue"
       >
         <div className="mt-6 flex flex-col gap-6 px-2">
           <div>