diff --git a/front/components/assistant/conversation/LimitReachedPopup.tsx b/front/components/assistant/conversation/LimitReachedPopup.tsx
deleted file mode 100644
index e75c0a4f3b92..000000000000
--- a/front/components/assistant/conversation/LimitReachedPopup.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Button, Chip } from "@dust-tt/sparkle";
-import { Transition } from "@headlessui/react";
-import { useRouter } from "next/router";
-
-export function LimitReachedPopup({
-  planLimitReached,
-  workspaceId,
-}: {
-  planLimitReached: boolean;
-  workspaceId: string;
-}) {
-  const router = useRouter();
-  return (
-    <Transition
-      show={planLimitReached}
-      enter="transition-opacity duration-300"
-      enterFrom="opacity-0"
-      enterTo="opacity-100"
-      leave="transition-opacity duration-300"
-      leaveFrom="opacity-100"
-      leaveTo="opacity-0"
-      className="fixed bottom-16 right-16 z-30 flex w-64 flex-col gap-3 rounded-lg border border-amber-100 bg-amber-50 p-4 shadow-lg"
-    >
-      <div>
-        <Chip color="red">Free plan</Chip>
-      </div>
-      <div className="text-sm font-normal text-element-900">
-        Looks like you've used up all your messages. Take a peek at our plans.
-      </div>
-      <div className="self-center">
-        <Button
-          variant="primary"
-          size="sm"
-          label="Check Dust plans"
-          onClick={async () => {
-            await router.push(`/w/${workspaceId}/subscription`);
-          }}
-        />
-      </div>
-    </Transition>
-  );
-}
diff --git a/front/package-lock.json b/front/package-lock.json
index dda233f63db1..d20206a3f92d 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -5,7 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
-        "@dust-tt/sparkle": "^0.2.29",
+        "@dust-tt/sparkle": "^0.2.31",
         "@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.29",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.29.tgz",
-      "integrity": "sha512-zc5Apcwip4x6GjEeQbDP5IBqsdE3OyltRA+6XGIve3UzJQtiNwAda62a4G3ifAmhY9mcgt4IbU8z0VSeCEqlMQ==",
+      "version": "0.2.31",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.31.tgz",
+      "integrity": "sha512-LpytLXZcfKX1hg1s8IfYZ21hfnVJHbpSHCE6Q0IEpSZWYv5MWFWhhKE7dZDtuaAAUOwMbR4RuRftEiMo9kF+Ng==",
       "dependencies": {
         "@headlessui/react": "^1.7.17"
       },
diff --git a/front/package.json b/front/package.json
index d6da4da91740..c7e20c55ba61 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.29",
+    "@dust-tt/sparkle": "^0.2.31",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.7",
diff --git a/front/pages/w/[wId]/assistant/[cId]/index.tsx b/front/pages/w/[wId]/assistant/[cId]/index.tsx
index 09420971cb86..b6938097b8c2 100644
--- a/front/pages/w/[wId]/assistant/[cId]/index.tsx
+++ b/front/pages/w/[wId]/assistant/[cId]/index.tsx
@@ -6,12 +6,12 @@ import Conversation from "@app/components/assistant/conversation/Conversation";
 import { ConversationTitle } from "@app/components/assistant/conversation/ConversationTitle";
 import { GenerationContextProvider } from "@app/components/assistant/conversation/GenerationContextProvider";
 import { FixedAssistantInputBar } from "@app/components/assistant/conversation/InputBar";
-import { LimitReachedPopup } from "@app/components/assistant/conversation/LimitReachedPopup";
 import { AssistantSidebarMenu } from "@app/components/assistant/conversation/SidebarMenu";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
 import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
 import { useConversation } from "@app/lib/swr";
+import { LimitReachedPopup } from "@app/pages/w/[wId]/assistant/new";
 import { AgentMention, MentionType } from "@app/types/assistant/conversation";
 import { UserType, WorkspaceType } from "@app/types/user";
 
diff --git a/front/pages/w/[wId]/assistant/new.tsx b/front/pages/w/[wId]/assistant/new.tsx
index 976c86012f7a..a4157889bf73 100644
--- a/front/pages/w/[wId]/assistant/new.tsx
+++ b/front/pages/w/[wId]/assistant/new.tsx
@@ -7,6 +7,7 @@ import {
   ChevronUpIcon,
   Page,
   PlusIcon,
+  Popup,
   WrenchIcon,
 } from "@dust-tt/sparkle";
 import * as t from "io-ts";
@@ -20,7 +21,6 @@ import {
   FixedAssistantInputBar,
   InputBarContext,
 } from "@app/components/assistant/conversation/InputBar";
-import { LimitReachedPopup } from "@app/components/assistant/conversation/LimitReachedPopup";
 import { AssistantSidebarMenu } from "@app/components/assistant/conversation/SidebarMenu";
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
@@ -424,3 +424,25 @@ const AvatarListItem = function ({
     </div>
   );
 };
+
+export function LimitReachedPopup({
+  planLimitReached,
+  workspaceId,
+}: {
+  planLimitReached: boolean;
+  workspaceId: string;
+}) {
+  const router = useRouter();
+  return (
+    <Popup
+      show={planLimitReached}
+      chipLabel="Free plan"
+      description="Looks like you've used up all your messages. Check out our paid plans to get unlimited messages."
+      buttonLabel="Check Dust plans"
+      buttonClick={() => {
+        void router.push(`/w/${workspaceId}/subscription`);
+      }}
+      className="fixed bottom-16 right-16"
+    />
+  );
+}
diff --git a/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx b/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
index d92b1255fe09..847f420bc964 100644
--- a/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/[name]/index.tsx
@@ -9,6 +9,7 @@ import {
   Page,
   PencilSquareIcon,
   PlusIcon,
+  Popup,
   SectionHeader,
   SlackLogo,
   SliderToggle,
@@ -147,6 +148,7 @@ function StandardDataSourceView({
 
   const { documents, total, isDocumentsLoading, isDocumentsError } =
     useDocuments(owner, dataSource, limit, offset);
+  const [showDocumentsLimitPopup, setShowDocumentsLimitPopup] = useState(false);
 
   const [displayNameByDocId, setDisplayNameByDocId] = useState<
     Record<string, string>
@@ -240,7 +242,21 @@ function StandardDataSourceView({
 
           {readOnly ? null : (
             <div className="">
-              <div className="mt-0 flex-none">
+              <div className="relative mt-0 flex-none">
+                <Popup
+                  show={showDocumentsLimitPopup}
+                  chipLabel="Free plan"
+                  description="You have reached the limit of documents per data source for the free plan. Upgrade to a paid plan to add more documents."
+                  buttonLabel="Check Dust plans"
+                  buttonClick={() => {
+                    void router.push(`/w/${owner.sId}/subscription`);
+                  }}
+                  onClose={() => {
+                    setShowDocumentsLimitPopup(false);
+                  }}
+                  className="absolute bottom-8 right-0"
+                />
+
                 <Button
                   variant="primary"
                   icon={PlusIcon}
@@ -251,10 +267,7 @@ function StandardDataSourceView({
                       plan.limits.dataSources.documents.count != -1 &&
                       total >= plan.limits.dataSources.documents.count
                     ) {
-                      window.alert(
-                        "Data Sources are limited to 32 documents on our free plan. Contact team@dust.tt if you want to increase this limit."
-                      );
-                      return;
+                      setShowDocumentsLimitPopup(true);
                     } else {
                       void router.push(
                         `/w/${owner.sId}/builder/data-sources/${dataSource.name}/upsert`
diff --git a/front/pages/w/[wId]/builder/data-sources/managed.tsx b/front/pages/w/[wId]/builder/data-sources/managed.tsx
index 6bcb97a74eb5..e3886c329d3f 100644
--- a/front/pages/w/[wId]/builder/data-sources/managed.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/managed.tsx
@@ -6,6 +6,7 @@ import {
   ContextItem,
   DropdownMenu,
   Page,
+  Popup,
 } from "@dust-tt/sparkle";
 import Nango from "@nangohq/frontend";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
@@ -241,7 +242,8 @@ export default function DataSourcesView({
   const [isLoadingByProvider, setIsLoadingByProvider] = useState<
     Record<ConnectorProvider, boolean | undefined>
   >({} as Record<ConnectorProvider, boolean | undefined>);
-
+  const [showUpgradePopupForProvider, setShowUpgradePopupForProvider] =
+    useState<ConnectorProvider | null>(null);
   const handleEnableManagedDataSource = async (
     provider: ConnectorProvider,
     suffix: string | null
@@ -366,167 +368,185 @@ export default function DataSourcesView({
                   />
                 }
                 action={
-                  <Button.List>
-                    {(() => {
-                      const disabled =
-                        !ds.isBuilt ||
-                        isLoadingByProvider[
-                          ds.connectorProvider as ConnectorProvider
-                        ] ||
-                        !isAdmin;
-                      const onclick = async () => {
-                        let isDataSourceAllowedInPlan: boolean;
+                  <div className="relative">
+                    <Button.List>
+                      {(() => {
+                        const disabled =
+                          !ds.isBuilt ||
+                          isLoadingByProvider[
+                            ds.connectorProvider as ConnectorProvider
+                          ] ||
+                          !isAdmin;
+                        const onclick = async () => {
+                          let isDataSourceAllowedInPlan: boolean;
 
-                        switch (ds.connectorProvider) {
-                          case "slack":
-                            isDataSourceAllowedInPlan =
-                              planConnectionsLimits.isSlackAllowed;
-                            break;
-                          case "notion":
-                            isDataSourceAllowedInPlan =
-                              planConnectionsLimits.isNotionAllowed;
-                            break;
-                          case "github":
-                            isDataSourceAllowedInPlan =
-                              planConnectionsLimits.isGithubAllowed;
-                            break;
-                          case "google_drive":
-                            isDataSourceAllowedInPlan =
-                              planConnectionsLimits.isGoogleDriveAllowed;
-                            break;
-                          default:
-                            ((p: never) => {
-                              throw new Error(
-                                `Unknown connector provider ${p}`
-                              );
-                            })(ds.connectorProvider);
-                        }
+                          switch (ds.connectorProvider) {
+                            case "slack":
+                              isDataSourceAllowedInPlan =
+                                planConnectionsLimits.isSlackAllowed;
+                              break;
+                            case "notion":
+                              isDataSourceAllowedInPlan =
+                                planConnectionsLimits.isNotionAllowed;
+                              break;
+                            case "github":
+                              isDataSourceAllowedInPlan =
+                                planConnectionsLimits.isGithubAllowed;
+                              break;
+                            case "google_drive":
+                              isDataSourceAllowedInPlan =
+                                planConnectionsLimits.isGoogleDriveAllowed;
+                              break;
+                            default:
+                              ((p: never) => {
+                                throw new Error(
+                                  `Unknown connector provider ${p}`
+                                );
+                              })(ds.connectorProvider);
+                          }
 
-                        if (isDataSourceAllowedInPlan) {
-                          await handleEnableManagedDataSource(
-                            ds.connectorProvider as ConnectorProvider,
-                            ds.setupWithSuffix
-                          );
-                        } else {
-                          window.alert(
-                            "Managed Data Sources are only available on our paid plans. Contact us at team@dust.tt to get access."
-                          );
-                        }
-                        return;
-                      };
-                      const label = !ds.isBuilt
-                        ? "Coming soon"
-                        : !isLoadingByProvider[
-                            ds.connectorProvider as ConnectorProvider
-                          ] && !ds.fetchConnectorError
-                        ? "Connect"
-                        : "Connecting...";
-                      if (!ds || !ds.connector) {
-                        return (
-                          <>
-                            {ds.connectorProvider !== "google_drive" && (
-                              <Button
-                                variant="primary"
-                                icon={CloudArrowLeftRightIcon}
-                                disabled={disabled}
-                                onClick={onclick}
-                                label={label}
-                              />
-                            )}
-                            {ds.connectorProvider === "google_drive" && (
-                              <DropdownMenu>
-                                <DropdownMenu.Button>
-                                  <Button
-                                    variant="primary"
-                                    label={label}
-                                    disabled={disabled}
-                                    icon={CloudArrowLeftRightIcon}
-                                  />
-                                </DropdownMenu.Button>
-                                <DropdownMenu.Items
-                                  origin="topRight"
-                                  width={350}
-                                >
-                                  <div className="flex flex-col gap-y-4 p-4">
-                                    <div className="flex flex-col gap-y-2">
-                                      <div className="grow text-sm font-medium text-element-800">
-                                        Disclosure
-                                      </div>
-                                      <div className="text-sm font-normal text-element-700">
-                                        Dust's use of information received from
-                                        the Google APIs will adhere to{" "}
-                                        <Link
-                                          className="s-text-action-500"
-                                          href="https://developers.google.com/terms/api-services-user-data-policy#additional_requirements_for_specific_api_scopes"
-                                        >
-                                          Google API Services User Data Policy
-                                        </Link>
-                                        , including the Limited Use
-                                        requirements.
+                          if (isDataSourceAllowedInPlan) {
+                            await handleEnableManagedDataSource(
+                              ds.connectorProvider as ConnectorProvider,
+                              ds.setupWithSuffix
+                            );
+                          } else {
+                            setShowUpgradePopupForProvider(
+                              ds.connectorProvider as ConnectorProvider
+                            );
+                          }
+                          return;
+                        };
+                        const label = !ds.isBuilt
+                          ? "Coming soon"
+                          : !isLoadingByProvider[
+                              ds.connectorProvider as ConnectorProvider
+                            ] && !ds.fetchConnectorError
+                          ? "Connect"
+                          : "Connecting...";
+                        if (!ds || !ds.connector) {
+                          return (
+                            <>
+                              {ds.connectorProvider !== "google_drive" && (
+                                <Button
+                                  variant="primary"
+                                  icon={CloudArrowLeftRightIcon}
+                                  disabled={disabled}
+                                  onClick={onclick}
+                                  label={label}
+                                />
+                              )}
+                              {ds.connectorProvider === "google_drive" && (
+                                <DropdownMenu>
+                                  <DropdownMenu.Button>
+                                    <Button
+                                      variant="primary"
+                                      label={label}
+                                      disabled={disabled}
+                                      icon={CloudArrowLeftRightIcon}
+                                    />
+                                  </DropdownMenu.Button>
+                                  <DropdownMenu.Items
+                                    origin="topRight"
+                                    width={350}
+                                  >
+                                    <div className="flex flex-col gap-y-4 p-4">
+                                      <div className="flex flex-col gap-y-2">
+                                        <div className="grow text-sm font-medium text-element-800">
+                                          Disclosure
+                                        </div>
+                                        <div className="text-sm font-normal text-element-700">
+                                          Dust's use of information received
+                                          from the Google APIs will adhere to{" "}
+                                          <Link
+                                            className="s-text-action-500"
+                                            href="https://developers.google.com/terms/api-services-user-data-policy#additional_requirements_for_specific_api_scopes"
+                                          >
+                                            Google API Services User Data Policy
+                                          </Link>
+                                          , including the Limited Use
+                                          requirements.
+                                        </div>
                                       </div>
-                                    </div>
 
-                                    <div className="flex flex-col gap-y-2">
-                                      <div className="grow text-sm font-medium text-element-800">
-                                        Notice on data processing
+                                      <div className="flex flex-col gap-y-2">
+                                        <div className="grow text-sm font-medium text-element-800">
+                                          Notice on data processing
+                                        </div>
+                                        <div className="text-sm font-normal text-element-700">
+                                          By connecting Google Drive, you
+                                          acknowledge and agree that within your
+                                          Google Drive, the data contained in
+                                          the files and folders that you choose
+                                          to synchronize with Dust will be
+                                          transmitted to third-party entities,
+                                          including but not limited to
+                                          Artificial Intelligence (AI) model
+                                          providers, for the purpose of
+                                          processing and analysis. This process
+                                          is an integral part of the
+                                          functionality of our service and is
+                                          subject to the terms outlined in our
+                                          Privacy Policy and Terms of Service.
+                                        </div>
                                       </div>
-                                      <div className="text-sm font-normal text-element-700">
-                                        By connecting Google Drive, you
-                                        acknowledge and agree that within your
-                                        Google Drive, the data contained in the
-                                        files and folders that you choose to
-                                        synchronize with Dust will be
-                                        transmitted to third-party entities,
-                                        including but not limited to Artificial
-                                        Intelligence (AI) model providers, for
-                                        the purpose of processing and analysis.
-                                        This process is an integral part of the
-                                        functionality of our service and is
-                                        subject to the terms outlined in our
-                                        Privacy Policy and Terms of Service.
+                                      <div className="flex justify-center">
+                                        <DropdownMenu.Button>
+                                          <Button
+                                            variant="secondary"
+                                            icon={CloudArrowLeftRightIcon}
+                                            disabled={disabled}
+                                            onClick={onclick}
+                                            label="Acknowledge and Connect"
+                                          />
+                                        </DropdownMenu.Button>
                                       </div>
                                     </div>
-                                    <div className="flex justify-center">
-                                      <DropdownMenu.Button>
-                                        <Button
-                                          variant="secondary"
-                                          icon={CloudArrowLeftRightIcon}
-                                          disabled={disabled}
-                                          onClick={onclick}
-                                          label="Acknowledge and Connect"
-                                        />
-                                      </DropdownMenu.Button>
-                                    </div>
-                                  </div>
-                                </DropdownMenu.Items>
-                              </DropdownMenu>
-                            )}
-                          </>
-                        );
-                      } else {
-                        return (
-                          <Button
-                            variant="secondary"
-                            icon={Cog6ToothIcon}
-                            disabled={
-                              !ds.isBuilt ||
-                              isLoadingByProvider[
-                                ds.connectorProvider as ConnectorProvider
-                              ] ||
-                              // Can't manage or view if not (admin or not readonly (ie builder)).
-                              !(isAdmin || !readOnly)
-                            }
-                            onClick={() => {
-                              void router.push(
-                                `/w/${owner.sId}/builder/data-sources/${ds.dataSourceName}`
-                              );
-                            }}
-                            label={isAdmin ? "Manage" : "View"}
-                          />
-                        );
+                                  </DropdownMenu.Items>
+                                </DropdownMenu>
+                              )}
+                            </>
+                          );
+                        } else {
+                          return (
+                            <Button
+                              variant="secondary"
+                              icon={Cog6ToothIcon}
+                              disabled={
+                                !ds.isBuilt ||
+                                isLoadingByProvider[
+                                  ds.connectorProvider as ConnectorProvider
+                                ] ||
+                                // Can't manage or view if not (admin or not readonly (ie builder)).
+                                !(isAdmin || !readOnly)
+                              }
+                              onClick={() => {
+                                void router.push(
+                                  `/w/${owner.sId}/builder/data-sources/${ds.dataSourceName}`
+                                );
+                              }}
+                              label={isAdmin ? "Manage" : "View"}
+                            />
+                          );
+                        }
+                      })()}
+                    </Button.List>
+                    <Popup
+                      show={
+                        showUpgradePopupForProvider === ds.connectorProvider
                       }
-                    })()}
-                  </Button.List>
+                      className="absolute bottom-8 right-0"
+                      chipLabel="Free plan"
+                      description="Unlock this managed data source by upgrading to a paid plan."
+                      buttonLabel="Check Dust plans"
+                      buttonClick={() => {
+                        void router.push(`/w/${owner.sId}/subscription`);
+                      }}
+                      onClose={() => {
+                        setShowUpgradePopupForProvider(null);
+                      }}
+                    />
+                  </div>
                 }
               >
                 {ds && ds.connector && (
diff --git a/front/pages/w/[wId]/builder/data-sources/static.tsx b/front/pages/w/[wId]/builder/data-sources/static.tsx
index d546821cfda7..1da5009a7598 100644
--- a/front/pages/w/[wId]/builder/data-sources/static.tsx
+++ b/front/pages/w/[wId]/builder/data-sources/static.tsx
@@ -6,15 +6,18 @@ import {
   FolderOpenIcon,
   Page,
   PlusIcon,
+  Popup,
   SectionHeader,
 } from "@dust-tt/sparkle";
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
+import { useState } from "react";
 
 import AppLayout from "@app/components/sparkle/AppLayout";
 import { subNavigationAdmin } from "@app/components/sparkle/navigation";
 import { getDataSources } from "@app/lib/api/data_sources";
 import { Authenticator, getSession, getUserFromSession } from "@app/lib/auth";
+import { useSubmitFunction } from "@app/lib/client/utils";
 import { classNames } from "@app/lib/utils";
 import { DataSourceType } from "@app/types/data_source";
 import { PlanType } from "@app/types/plan";
@@ -78,21 +81,23 @@ export default function DataSourcesView({
   gaTrackingId,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const router = useRouter();
+  const [showDatasourceLimitPopup, setShowDatasourceLimitPopup] =
+    useState(false);
 
-  const handleCreateDataSource = async () => {
+  const {
+    submit: handleCreateDataSource,
+    isSubmitting: isSubmittingCreateDataSource,
+  } = useSubmitFunction(async () => {
     // Enforce plan limits: DataSources count.
     if (
       plan.limits.dataSources.count != -1 &&
       dataSources.length >= plan.limits.dataSources.count
     ) {
-      window.alert(
-        "You are limited to 1 DataSource on our free plan. Contact team@dust.tt if you want to increase this limit."
-      );
-      return;
+      setShowDatasourceLimitPopup(true);
     } else {
       void router.push(`/w/${owner.sId}/builder/data-sources/new`);
     }
-  };
+  });
 
   return (
     <AppLayout
@@ -113,26 +118,42 @@ export default function DataSourcesView({
         />
 
         {dataSources.length > 0 ? (
-          <SectionHeader
-            title=""
-            description=""
-            action={
-              !readOnly
-                ? {
-                    label: "Add a new Data Source",
-                    variant: "primary",
-                    icon: PlusIcon,
-                    onClick: async () => {
-                      await handleCreateDataSource();
-                    },
-                  }
-                : undefined
-            }
-          />
+          <div className="relative">
+            <SectionHeader
+              title=""
+              description=""
+              action={
+                !readOnly
+                  ? {
+                      label: "Add a new Data Source",
+                      variant: "primary",
+                      icon: PlusIcon,
+                      onClick: async () => {
+                        await handleCreateDataSource();
+                      },
+                      disabled: isSubmittingCreateDataSource,
+                    }
+                  : undefined
+              }
+            />
+            <Popup
+              show={showDatasourceLimitPopup}
+              chipLabel="Free plan"
+              description="You have reached the limit of data sources for the free plan. Upgrade to a paid plan to add more data sources."
+              buttonLabel="Check Dust plans"
+              buttonClick={() => {
+                void router.push(`/w/${owner.sId}/subscription`);
+              }}
+              onClose={() => {
+                setShowDatasourceLimitPopup(false);
+              }}
+              className="absolute bottom-8 right-0"
+            />
+          </div>
         ) : (
           <div
             className={classNames(
-              "mt-4 flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
+              "relative mt-4 flex h-full min-h-48 items-center justify-center rounded-lg bg-structure-50"
             )}
           >
             <Button