diff --git a/front/components/assistant_builder/AssistantBuilderAvatarPicker.tsx b/front/components/assistant_builder/AssistantBuilderAvatarPicker.tsx
index f6dbc640ebf9..14b38d85ca45 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:"
-      isFullScreen={false}
+      isFullScreen={true}
       hasChanged={currentTab === "upload" && !!src}
       onSave={isUploadingAvatar ? undefined : onUpload}
     >
@@ -154,98 +154,104 @@ export function AvatarPicker({
         onChange={onFileChange}
         ref={fileInputRef}
       />
-      <div className="pt-8">
-        <Tab
-          tabs={[
-            {
-              label: "Pick one from the gallery",
-              current: currentTab === "pick",
-              icon: ImageIcon,
-            },
-            {
-              label: "Upload your own",
-              current: currentTab === "upload",
-              icon: ArrowUpOnSquareIcon,
-            },
-          ]}
-          onTabClick={(tab) => {
-            const isUploadTab = tab.startsWith("Upload");
-            if (isUploadTab) {
-              setCurrentTab("upload");
-            } else {
-              setCurrentTab("pick");
-            }
-          }}
-        />
-      </div>
-      {currentTab === "pick" && (
-        <div className="grid max-w-3xl grid-cols-8 gap-4 pt-8">
-          {avatarUrls.map(({ available, url }) => (
-            <div
-              key={url}
-              className={classNames(
-                available ? "cursor-pointer" : "opacity-30"
-              )}
-              onClick={() => {
-                if (available) {
-                  onPick(url);
-                  onClose();
-                }
-              }}
-            >
-              <Avatar
-                size="lg"
-                visual={<img src={url} />}
-                clickable={available}
-              />
-            </div>
-          ))}
+      <div className="mx-auto max-w-4xl px-8 pt-6">
+        <div className="overflow-x-auto">
+          <Tab
+            tabs={[
+              {
+                label: "Gallery",
+                current: currentTab === "pick",
+                icon: ImageIcon,
+              },
+              {
+                label: "Upload",
+                current: currentTab === "upload",
+                icon: ArrowUpOnSquareIcon,
+              },
+            ]}
+            onTabClick={(tab) => {
+              const isUploadTab = tab.startsWith("Upload");
+              if (isUploadTab) {
+                setCurrentTab("upload");
+              } else {
+                setCurrentTab("pick");
+              }
+            }}
+          />
         </div>
-      )}
-      <div
-        className={classNames(
-          "flex  w-full items-center justify-center  pt-8 align-middle",
-          currentTab !== "upload" ? "hidden" : "",
-          !src ? "min-h-64 bg-slate-50" : ""
+        {currentTab === "pick" && (
+          <div className="grid grid-cols-4 gap-4 pt-8 lg:grid-cols-8">
+            {avatarUrls.map(({ available, url }) => (
+              <div
+                key={url}
+                className={classNames(
+                  available ? "cursor-pointer" : "opacity-30"
+                )}
+                onClick={() => {
+                  if (available) {
+                    onPick(url);
+                    onClose();
+                  }
+                }}
+              >
+                <Avatar
+                  size="auto"
+                  visual={<img src={url} />}
+                  clickable={available}
+                />
+              </div>
+            ))}
+          </div>
         )}
-      >
-        {src ? (
-          <div>
-            <ReactCrop crop={crop} aspect={1} onChange={(_, pC) => setCrop(pC)}>
-              <img
-                src={src}
-                alt="Profile"
-                onLoad={(event) => {
-                  const { naturalWidth: width, naturalHeight: height } =
-                    event.currentTarget;
-
-                  const newCrop = centerCrop(
-                    makeAspectCrop(
-                      {
-                        unit: "%",
-                        width: 100,
-                      },
-                      1,
+        <div
+          className={classNames(
+            "mt-8 flex items-center justify-center",
+            currentTab !== "upload" ? "hidden" : "",
+            !src ? "min-h-64 bg-slate-50" : ""
+          )}
+        >
+          {src ? (
+            <div>
+              <ReactCrop
+                crop={crop}
+                aspect={1}
+                onChange={(_, pC) => setCrop(pC)}
+              >
+                <img
+                  src={src}
+                  alt="Profile"
+                  onLoad={(event) => {
+                    const { naturalWidth: width, naturalHeight: height } =
+                      event.currentTarget;
+
+                    const newCrop = centerCrop(
+                      makeAspectCrop(
+                        {
+                          unit: "%",
+                          width: 100,
+                        },
+                        1,
+                        width,
+                        height
+                      ),
                       width,
                       height
-                    ),
-                    width,
-                    height
-                  );
+                    );
 
-                  setCrop(newCrop);
-                }}
-                ref={imageRef}
-              />
-            </ReactCrop>
-          </div>
-        ) : (
-          <Button
-            label="Upload"
-            icon={ArrowUpOnSquareIcon}
-            onClick={() => fileInputRef?.current?.click()}
-          />
-        )}
+                    setCrop(newCrop);
+                  }}
+                  ref={imageRef}
+                />
+              </ReactCrop>
+            </div>
+          ) : (
+            <Button
+              label="Upload"
+              icon={ArrowUpOnSquareIcon}
+              onClick={() => fileInputRef?.current?.click()}
+            />
+          )}
+        </div>
       </div>
     </Modal>
   );
diff --git a/front/package-lock.json b/front/package-lock.json
index 1028dd625c25..9bd080ccf7ad 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@dust-tt/sparkle": "0.1.85",
+        "@dust-tt/sparkle": "0.1.89",
         "@headlessui/react": "^1.7.7",
         "@heroicons/react": "^2.0.11",
         "@nangohq/frontend": "^0.16.1",
@@ -722,9 +722,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.1.85",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.1.85.tgz",
-      "integrity": "sha512-/Z8aM1eTxRfaZGQnDtiwxtpFMB2Db3ZiLhg3xD8p7m12GZFCcwUUm4uiinfjMGL+KPL/dH0ZfhZ2J8fNTxTErw==",
+      "version": "0.1.89",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.1.89.tgz",
+      "integrity": "sha512-/JOKBD1w2yPWdqFsCj7k/BKHTO3bIvMUl0K+cI9cDhfYQcZzueFpzyhgvOLfhScYSJx3/BohI4cgGQ1PxFt6wg==",
       "dependencies": {
         "@headlessui/react": "^1.7.17"
       },
@@ -12876,6 +12876,7 @@
     },
     "node_modules/unix-dgram": {
       "version": "2.0.6",
+      "hasInstallScript": true,
       "license": "ISC",
       "optional": true,
       "dependencies": {
diff --git a/front/package.json b/front/package.json
index bf69678169c6..57354696453e 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.1.85",
+    "@dust-tt/sparkle": "0.1.89",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.11",
     "@nangohq/frontend": "^0.16.1",