From df52ea7ee0f0c76ba952ac09c6182fe79824eef0 Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Sat, 31 Aug 2024 01:50:51 +0200 Subject: [PATCH] feat: Replace all toasts with sonner (#28250) * Update the design of the sonner toasts. Add the close button by default. * Migrate studio and www apps to use the SonnerToaster. * Migrate all toasts from studio. * Migrate all leftover toasts in studio. * Add a new toast component with progress. Use it in studio. * Migrate the design-system app. * Refactor the consent toast to use sonner. * Switch docs to use the new sonner toasts. * Remove toast examples from the design-system app. * Remove all toast-related components and old code. * Fix the progress bar in the toast progress component. Also make the bottom components vertically centered. * Fix the width of the toast progress. * Use text-foreground-lighter instead of muted for ToastProgress text * Rename ToastProgress to SonnerProgress. * Shorten the text in sonner progress. * Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner. * Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity). * Fix the playwright tests. * Refactor imports to use ui instead of @ui. * Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch. * Remove react-hot-toast lib. --------- Co-authored-by: Joshen Lim Co-authored-by: Jonathan Summers-Muir --- apps/design-system/__registry__/index.tsx | 55 ----- apps/design-system/app/layout.tsx | 2 - .../content/docs/components/toast.mdx | 155 ------------- .../default/example/calendar-form.tsx | 13 +- .../example/calendar-react-hook-form.tsx | 13 +- .../example/checkbox-form-multiple.tsx | 9 +- .../default/example/checkbox-form-single.tsx | 12 +- .../default/example/combobox-form.tsx | 11 +- .../default/example/date-picker-form.tsx | 13 +- .../registry/default/example/input-form.tsx | 9 +- .../default/example/input-otp-form.tsx | 11 +- .../default/example/multi-select-form.tsx | 36 ++- .../default/example/radio-group-card-form.tsx | 9 +- .../default/example/radio-group-form.tsx | 10 +- .../example/radio-group-stacked-form.tsx | 9 +- .../registry/default/example/select-form.tsx | 11 +- .../default/example/sonner-upload.tsx | 5 - .../registry/default/example/switch-form.tsx | 11 +- .../example/text-confirm-dialog-demo.tsx | 11 +- ...text-confirm-dialog-with-cancel-button.tsx | 11 +- .../text-confirm-dialog-with-children.tsx | 13 +- ...-confirm-dialog-with-destructive-alert.tsx | 11 +- .../text-confirm-dialog-with-info-alert.tsx | 11 +- .../example/text-confirm-dialog-with-size.tsx | 11 +- ...text-confirm-dialog-with-warning-alert.tsx | 9 +- .../default/example/textarea-form.tsx | 11 +- .../registry/default/example/toast-demo.tsx | 24 -- .../default/example/toast-destructive.tsx | 25 -- .../registry/default/example/toast-simple.tsx | 21 -- .../default/example/toast-with-action.tsx | 24 -- .../default/example/toast-with-title.tsx | 22 -- apps/design-system/registry/examples.ts | 30 --- apps/docs/features/app.providers.tsx | 10 +- apps/docs/features/helpers.consent.tsx | 15 ++ .../grid/components/editor/JsonEditor.tsx | 2 +- .../grid/components/editor/TextEditor.tsx | 2 +- .../grid/components/header/Header.tsx | 2 +- .../interfaces/Account/AccessTokenList.tsx | 2 +- .../Preferences/DeleteAccountButton.tsx | 4 +- .../Preferences/ProfileInformation.tsx | 2 +- .../Account/TOTPFactors/AddNewFactorModal.tsx | 4 +- .../Account/TOTPFactors/DeleteFactorModal.tsx | 2 +- .../interfaces/App/RouteValidationWrapper.tsx | 2 +- .../AdvancedAuthSettingsForm.tsx | 2 +- .../Auth/AuthProvidersForm/ProviderForm.tsx | 2 +- .../BasicAuthSettingsForm.tsx | 4 +- .../Auth/EmailTemplates/TemplateEditor.tsx | 2 +- .../interfaces/Auth/Hooks/CreateHookSheet.tsx | 2 +- .../interfaces/Auth/Hooks/HooksListing.tsx | 2 +- .../Policies/AIPolicyEditorPanel/index.tsx | 2 +- .../interfaces/Auth/Policies/Policies.tsx | 2 +- .../Auth/Policies/PolicyEditorModal/index.tsx | 2 +- .../interfaces/Auth/RateLimits/RateLimits.tsx | 2 +- .../Auth/RedirectUrls/RedirectUrls.tsx | 2 +- .../interfaces/Auth/SiteUrl/SiteUrl.tsx | 2 +- .../interfaces/Auth/SmtpForm/SmtpForm.tsx | 2 +- .../ThirdPartyAuthForm/CreateAuth0Dialog.tsx | 2 +- .../CreateAwsCognitoAuthDialog.tsx | 2 +- .../CreateFirebaseAuthDialog.tsx | 2 +- .../Auth/ThirdPartyAuthForm/index.tsx | 2 +- .../interfaces/Auth/Users/CreateUserModal.tsx | 2 +- .../interfaces/Auth/Users/InviteUserModal.tsx | 2 +- .../interfaces/Auth/Users/UserDropdown.tsx | 2 +- .../Payment/AddNewPaymentMethodModal.tsx | 2 +- .../Billing/Payment/AddPaymentMethodForm.tsx | 2 +- .../BranchManagement/BranchManagement.tsx | 2 +- .../BranchManagement/BranchPanels.tsx | 2 +- .../BranchManagement/CreateBranchModal.tsx | 2 +- .../CreateWarehouseCollection.tsx | 8 +- .../DataWarehouse/WarehouseAccessTokens.tsx | 2 +- .../DataWarehouse/WarehouseMenuItem.tsx | 4 +- .../Database/Backups/BackupsList.tsx | 2 +- .../CreateEnumeratedTypeSidePanel.tsx | 2 +- .../DeleteEnumeratedTypeModal.tsx | 12 +- .../EditEnumeratedTypeSidePanel.tsx | 2 +- .../Extensions/EnableExtensionModal.tsx | 2 +- .../Database/Extensions/ExtensionCard.tsx | 6 +- .../Functions/CreateFunction/index.tsx | 2 +- .../Database/Functions/DeleteFunction.tsx | 4 +- .../Database/Hooks/DeleteHookModal.tsx | 4 +- .../Database/Hooks/EditHookPanel.tsx | 2 +- .../Database/Indexes/CreateIndexSidePanel.tsx | 2 +- .../interfaces/Database/Indexes/Indexes.tsx | 2 +- .../Publications/PublicationsList.tsx | 2 +- .../Publications/PublicationsTableItem.tsx | 2 +- .../Database/Roles/CreateRolePanel.tsx | 2 +- .../Database/Roles/DeleteRoleModal.tsx | 2 +- .../interfaces/Database/Roles/RoleRow.tsx | 4 +- .../Database/Triggers/CreateTrigger.tsx | 3 +- .../Database/Triggers/DeleteTrigger.tsx | 4 +- .../Database/Wrappers/CreateWrapper.tsx | 2 +- .../Database/Wrappers/DeleteWrapperModal.tsx | 2 +- .../Database/Wrappers/EditWrapper.tsx | 2 +- .../Wrappers/WrappersDisabledState.tsx | 2 +- .../interfaces/Docs/Description.tsx | 2 +- .../interfaces/Docs/GeneratingTypes.tsx | 2 +- .../EdgeFunctionDetails.tsx | 2 +- .../EdgeFunctionSecrets/AddNewSecretModal.tsx | 2 +- .../EdgeFunctionSecrets.tsx | 2 +- .../Integrations/IntegrationConnection.tsx | 2 +- .../interfaces/Integrations/ProjectLinker.tsx | 2 +- .../LogDrainDestinationSheetForm.tsx | 33 ++- .../interfaces/LogDrains/LogDrains.tsx | 23 +- .../BillingAddress/BillingAddress.tsx | 2 +- .../BillingSettings/BillingEmail.tsx | 2 +- .../CostControl/SpendCapSidePanel.tsx | 2 +- .../ChangePaymentMethodModal.tsx | 4 +- .../DeletePaymentMethodModal.tsx | 2 +- .../PaymentMethods/PaymentMethods.tsx | 2 +- .../Subscription/ExitSurveyModal.tsx | 2 +- .../Subscription/PaymentMethodSelection.tsx | 2 +- .../Subscription/PlanUpdateSidePanel.tsx | 2 +- .../Subscription/UpgradeModal.tsx | 2 +- .../BillingSettings/TaxID/TaxID.tsx | 2 +- .../Organization/Documents/SOC2.tsx | 2 +- .../Documents/SecurityQuestionnaire.tsx | 2 +- .../DeleteOrganizationButton.tsx | 2 +- .../GeneralSettings/GeneralSettings.tsx | 2 +- .../IntegrationSettings.tsx | 2 +- .../SidePanelGitHubRepoLinker.tsx | 2 +- .../SidePanelVercelProjectLinker.tsx | 2 +- .../InvoicesSettings/InvoicesSettings.tsx | 2 +- .../Organization/NewOrg/NewOrgForm.tsx | 2 +- .../Organization/OAuthApps/DeleteAppModal.tsx | 2 +- .../OAuthApps/PublishAppSidePanel/index.tsx | 2 +- .../Organization/OAuthApps/RevokeAppModal.tsx | 2 +- .../TeamSettings/InviteMemberButton.tsx | 2 +- .../TeamSettings/MemberActions.tsx | 2 +- .../TeamSettings/TeamSettings.tsx | 2 +- .../UpdateRolesConfirmationModal.tsx | 2 +- .../OrganizationInvite/OrganizationInvite.tsx | 2 +- .../ProjectAPIDocs/Content/Entities.tsx | 2 +- .../IndexAdvisorDisabledState.tsx | 2 +- .../QueryPerformance/QueryIndexes.tsx | 2 +- .../QueryPerformance/QueryPerformance.tsx | 2 +- .../Inspector/RealtimeTokensPopover/index.tsx | 2 +- .../Realtime/Inspector/useRealtimeMessages.ts | 4 +- .../Reports/Reports.CreateReportModal.tsx | 2 +- .../Reports/Reports.UpdateModal.tsx | 2 +- .../components/interfaces/Reports/Reports.tsx | 2 +- .../interfaces/SQLEditor/MoveQueryModal.tsx | 2 +- .../SQLEditor/OngoingQueriesPanel.tsx | 2 +- .../interfaces/SQLEditor/RenameQueryModal.tsx | 10 +- .../interfaces/SQLEditor/SQLEditor.tsx | 2 +- .../SQLEditor/SQLTemplates/SQLQuickstarts.tsx | 2 +- .../SQLEditor/SQLTemplates/SQLTemplates.tsx | 6 +- .../UtilityPanel/ResultsDropdown.tsx | 6 +- .../SQLEditor/UtilityPanel/UtilityActions.tsx | 8 +- .../SQLEditor/UtilityPanel/UtilityPanel.tsx | 8 +- .../Settings/API/HardenAPIModal.tsx | 2 +- .../interfaces/Settings/API/JWTSettings.tsx | 2 +- .../Settings/API/PostgrestConfig.tsx | 6 +- .../interfaces/Settings/API/ServiceList.tsx | 2 +- .../Addons/ComputeInstanceSidePanel.tsx | 2 +- .../Settings/Addons/CustomDomainSidePanel.tsx | 2 +- .../Settings/Addons/IPv4SidePanel.tsx | 2 +- .../Settings/Addons/PITRSidePanel.tsx | 2 +- .../Settings/Database/BannedIPs.tsx | 2 +- .../ConnectionPooling/ConnectionPooling.tsx | 2 +- .../ConfirmDisableReadOnlyModal.tsx | 2 +- .../DatabaseSettings/ResetDbPassword.tsx | 2 +- .../Database/DiskSizeConfiguration.tsx | 3 +- .../Database/DiskSizeConfigurationModal.tsx | 2 +- .../AddRestrictionModal.tsx | 4 +- .../RemoveRestrictionModal.tsx | 2 +- .../Settings/Database/SSLConfiguration.tsx | 2 +- .../CustomDomainActivate.tsx | 3 +- .../CustomDomainConfig/CustomDomainDelete.tsx | 2 +- .../DeleteProjectPanel/DeleteProjectModal.tsx | 2 +- .../interfaces/Settings/General/General.tsx | 2 +- .../Infrastructure/PauseProjectButton.tsx | 2 +- .../ProjectUpgradeAlert.tsx | 2 +- .../Infrastructure/RestartServerButton.tsx | 2 +- .../TransferProjectButton.tsx | 2 +- .../DeployNewReplicaPanel.tsx | 4 +- .../DropAllReplicasConfirmationModal.tsx | 2 +- .../DropReplicaConfirmationModal.tsx | 2 +- .../EnablePhysicalBackupsModal.tsx | 2 +- .../RestartReplicaConfirmationModal.tsx | 8 +- .../GitHubIntegrationConnectionForm.tsx | 2 +- .../GithubIntegration/GithubSection.tsx | 2 +- .../VercelIntegrationConnectionForm.tsx | 2 +- .../VercelIntegration/VercelSection.tsx | 2 +- .../interfaces/Settings/Logs/LogSelection.tsx | 2 +- .../interfaces/Settings/Logs/LogTable.tsx | 2 +- .../Settings/Logs/Logs.SavedQueriesItem.tsx | 2 +- .../Vault/Keys/EncryptionKeysManagement.tsx | 2 +- .../Vault/Secrets/AddNewSecretModal.tsx | 2 +- .../Vault/Secrets/DeleteSecretModal.tsx | 2 +- .../Vault/Secrets/EditSecretModal.tsx | 2 +- .../interfaces/Settings/Vault/VaultToggle.tsx | 2 +- .../interfaces/SignIn/ForgotPasswordForm.tsx | 2 +- .../interfaces/SignIn/ResetPasswordForm.tsx | 2 +- .../interfaces/SignIn/SignInForm.tsx | 2 +- .../interfaces/SignIn/SignInSSOForm.tsx | 2 +- .../interfaces/SignIn/SignInWithGitHub.tsx | 4 +- .../interfaces/SignIn/SignUpForm.tsx | 2 +- .../SqlGenerator/SqlOutputActions.tsx | 2 +- .../interfaces/Storage/CreateBucketModal.tsx | 2 +- .../interfaces/Storage/EditBucketModal.tsx | 2 +- .../interfaces/Support/SupportForm.tsx | 2 +- .../DeleteConfirmationDialogs.tsx | 2 +- .../TableGridEditor/GridHeaderActions.tsx | 2 +- .../RowEditor/JsonEditor/JsonEditor.tsx | 2 +- .../SidePanelEditor/RowEditor/TextEditor.tsx | 2 +- .../SidePanelEditor/SchemaEditor.tsx | 2 +- .../SidePanelEditor/SidePanelEditor.tsx | 8 +- .../SidePanelEditor/SidePanelEditor.utils.tsx | 6 +- .../SpreadsheetImport/SpreadsheetImport.tsx | 2 +- .../TableEditor/TableEditor.tsx | 2 +- .../TableGridEditor/TableGridEditor.tsx | 49 ++-- .../EnableBranchingModal.tsx | 2 +- .../FeedbackDropdown/FeedbackWidget.tsx | 2 +- .../NotificationsPopover.tsx | 6 +- .../ProjectLayout/ProjectPausedState.tsx | 4 +- .../layouts/ReportsLayout/ReportsMenu.tsx | 2 +- .../layouts/SQLEditorLayout/QueryItem.tsx | 2 +- .../SQLEditorLayout/QueryItemActions.tsx | 2 +- .../layouts/SQLEditorLayout/SQLEditorMenu.tsx | 2 +- .../SQLEditorNavV2/SQLEditorNav.tsx | 10 +- .../SQLEditorNavV2/SQLEditorTreeViewItem.tsx | 2 +- .../layouts/StorageLayout/StorageLayout.tsx | 2 +- .../TableEditorLayout/EntityListItem.tsx | 2 +- .../Storage/DeleteBucketModal.tsx | 4 +- .../Storage/EmptyBucketModal.tsx | 11 +- .../StorageExplorer/StorageExplorer.utils.ts | 2 +- .../Storage/StorageExplorer/useCopyUrl.tsx | 3 +- .../StoragePolicies/StoragePolicies.tsx | 2 +- .../StoragePoliciesEditPolicyModal.tsx | 2 +- .../StorageSettings/RevokeCredentialModal.tsx | 2 +- .../StorageSettings/StorageSettings.tsx | 2 +- apps/studio/components/ui/ToastLoader.tsx | 36 --- .../__templates/resource-update-mutation.ts | 2 +- .../access-tokens-create-mutation.ts | 2 +- .../access-tokens-delete-mutation.ts | 2 +- apps/studio/data/ai/sql-debug-mutation.ts | 2 +- apps/studio/data/ai/sql-title-mutation.ts | 2 +- ...warehouse-access-tokens-create-mutation.ts | 4 +- ...warehouse-access-tokens-delete-mutation.ts | 4 +- .../warehouse-collections-create-mutation.ts | 2 +- .../warehouse-collections-delete-mutation.ts | 4 +- .../warehouse-collections-update-mutation.ts | 2 +- .../api-authorization-approve-mutation.ts | 2 +- .../api-authorization-decline-mutation.ts | 2 +- .../create-and-expose-api-schema-mutation.ts | 7 +- ...-expose-and-disable-pg_graphql-mutation.ts | 2 +- .../data/auth/auth-config-update-mutation.ts | 2 +- apps/studio/data/auth/user-create-mutation.ts | 2 +- .../auth/user-delete-mfa-factors-mutation.ts | 2 +- apps/studio/data/auth/user-delete-mutation.ts | 4 +- apps/studio/data/auth/user-invite-mutation.ts | 4 +- .../data/auth/user-reset-password-mutation.ts | 2 +- .../auth/user-send-magic-link-mutation.ts | 2 +- .../data/auth/user-send-otp-mutation.ts | 2 +- .../banned-ips/banned-ips-delete-mutations.ts | 2 +- .../data/branches/branch-create-mutation.ts | 2 +- .../data/branches/branch-delete-mutation.ts | 2 +- .../data/branches/branch-reset-mutation.ts | 2 +- .../data/branches/branch-update-mutation.ts | 2 +- .../branches/branches-disable-mutation.ts | 2 +- .../data/config/jwt-secret-update-mutation.ts | 2 +- .../config/project-disk-resize-mutation.ts | 2 +- ...roject-postgrest-config-update-mutation.ts | 2 +- .../project-storage-config-update-mutation.ts | 2 +- ...project-temp-disable-read-only-mutation.ts | 2 +- .../data/content/content-delete-mutation.ts | 2 +- .../data/content/content-insert-mutation.ts | 2 +- .../data/content/content-update-mutation.ts | 2 +- .../data/content/content-upsert-mutation.ts | 2 +- .../content/content-upsert-v2-mutation.ts | 2 +- .../content/sql-folder-create-mutation.ts | 2 +- .../content/sql-folder-update-mutation.ts | 2 +- .../content/sql-folders-delete-mutation.ts | 2 +- .../custom-domains/check-cname-mutation.ts | 2 +- .../custom-domains-activate-mutation.ts | 2 +- .../custom-domains-create-mutation.ts | 2 +- .../custom-domains-delete-mutation.ts | 2 +- .../custom-domains-reverify-mutation.ts | 2 +- .../database-column-create-mutation.ts | 2 +- .../database-column-delete-mutation.ts | 2 +- .../database-column-update-mutation.ts | 2 +- .../database-extension-disable-mutation.ts | 2 +- .../database-extension-enable-mutation.ts | 2 +- .../database-functions-create-mutation.ts | 4 +- .../database-functions-delete-mutation.ts | 2 +- .../database-functions-update-mutation.ts | 2 +- .../database-policy-create-mutation.ts | 2 +- .../database-policy-delete-mutation.ts | 2 +- .../database-policy-update-mutation.ts | 2 +- .../database-publications-create-mutation.ts | 2 +- .../database-publications-update-mutation.ts | 2 +- .../database-role-create-mutation.ts | 6 +- .../database-role-delete-mutation.ts | 6 +- .../database-role-update-mutation.ts | 6 +- .../database-trigger-create-mutation.ts | 2 +- .../database-trigger-delete-mutation.ts | 4 +- .../database-trigger-update-mutation.ts | 2 +- ...ase-trigger-update-transaction-mutation.ts | 2 +- .../data/database/backup-download-mutation.ts | 2 +- .../data/database/backup-restore-mutation.ts | 2 +- .../database-password-reset-mutation.ts | 2 +- .../enable-physical-backups-mutation.ts | 2 +- .../data/database/hooks-enable-mutation.ts | 2 +- .../data/database/pitr-restore-mutation.ts | 2 +- .../pooling-configuration-update-mutation.ts | 2 +- .../data/database/schema-create-mutation.ts | 6 +- .../edge-functions-delete-mutation.ts | 2 +- .../edge-functions-update-mutation.ts | 2 +- .../enumerated-type-create-mutation.ts | 6 +- .../enumerated-type-delete-mutation.ts | 4 +- .../enumerated-type-update-mutation.ts | 6 +- apps/studio/data/fdw/fdw-create-mutation.ts | 4 +- apps/studio/data/fdw/fdw-delete-mutation.ts | 4 +- apps/studio/data/fdw/fdw-update-mutation.ts | 4 +- apps/studio/data/feedback/exit-survey-send.ts | 2 +- apps/studio/data/feedback/feedback-send.ts | 2 +- .../data/feedback/support-ticket-send.ts | 2 +- .../data/feedback/upgrade-survey-send.ts | 2 +- .../github-authorization-create-mutation.ts | 2 +- .../integrations/github-branch-check-query.ts | 2 +- .../github-connection-create-mutation.ts | 2 +- .../github-connection-delete-mutation.ts | 2 +- .../github-connection-update-mutation.ts | 2 +- ...ns-vercel-connection-sync-envs-mutation.ts | 2 +- ...ions-vercel-connections-create-mutation.ts | 2 +- ...el-installed-connection-delete-mutation.ts | 2 +- .../vercel-connection-update-mutate.ts | 2 +- .../vercel-integration-create-mutation.ts | 4 +- .../log-drains/create-log-drain-mutation.ts | 4 +- .../log-drains/delete-log-drain-mutation.ts | 4 +- .../log-drains/update-log-drain-mutation.ts | 4 +- .../data/misc/reset-password-mutation.ts | 2 +- apps/studio/data/misc/signup-mutation.ts | 2 +- .../network-retrictions-apply-mutation.ts | 2 +- .../notifications-dismiss-mutation.ts | 2 +- .../notifications-update-mutation.ts | 2 +- .../notifications-v2-archive-all-mutation.ts | 2 +- .../notifications-v2-update-mutation.ts | 2 +- .../oauth/authorized-app-revoke-mutation.ts | 2 +- .../data/oauth/oauth-app-create-mutation.ts | 2 +- .../data/oauth/oauth-app-delete-mutation.ts | 2 +- .../data/oauth/oauth-app-update-mutation.ts | 2 +- ...organization-invitation-accept-mutation.ts | 2 +- ...organization-invitation-create-mutation.ts | 2 +- ...organization-invitation-delete-mutation.ts | 2 +- ...rganization-member-role-assign-mutation.ts | 8 +- ...anization-member-role-unassign-mutation.ts | 4 +- ...rganization-member-role-update-mutation.ts | 2 +- ...ization-by-fly-organization-id-mutation.ts | 2 +- .../organization-create-mutation.ts | 2 +- ...zation-customer-profile-update-mutation.ts | 6 +- .../organization-delete-mutation.ts | 2 +- .../organization-join-decline-mutation.ts | 2 +- .../organization-join-mutation.ts | 2 +- .../organization-member-delete-mutation.ts | 2 +- ...anization-member-invite-create-mutation.ts | 2 +- ...anization-member-invite-delete-mutation.ts | 2 +- .../organization-member-update-mutation.ts | 4 +- ...ization-payment-method-default-mutation.ts | 4 +- ...nization-payment-method-delete-mutation.ts | 2 +- ...on-payment-method-setup-intent-mutation.ts | 2 +- .../organization-tax-id-update-mutation.ts | 4 +- .../organization-update-mutation.ts | 2 +- .../pg-sodium-key-create-mutation.ts | 2 +- .../pg-sodium-key-delete-mutation.ts | 2 +- .../column-privileges-grant-mutation.ts | 2 +- .../column-privileges-revoke-mutation.ts | 2 +- .../table-privileges-grant-mutation.ts | 2 +- .../table-privileges-revoke-mutation.ts | 2 +- .../mfa-challenge-and-verify-mutation.ts | 2 +- .../data/profile/mfa-enroll-mutation.ts | 2 +- .../data/profile/mfa-unenroll-mutation.ts | 2 +- .../data/profile/profile-create-mutation.ts | 2 +- .../data/profile/profile-update-mutation.ts | 2 +- .../project-by-fly-extension-id-mutation.ts | 2 +- .../data/projects/project-create-mutation.ts | 2 +- .../data/projects/project-delete-mutation.ts | 2 +- .../data/projects/project-pause-mutation.ts | 2 +- .../data/projects/project-restart-mutation.ts | 4 +- .../project-restart-services-mutation.ts | 2 +- .../data/projects/project-restore-mutation.ts | 2 +- .../projects/project-transfer-mutation.ts | 2 +- .../data/projects/project-update-mutation.ts | 2 +- .../data/projects/project-upgrade-mutation.ts | 2 +- .../read-replicas/replica-remove-mutation.ts | 2 +- .../read-replicas/replica-setup-mutation.ts | 2 +- .../data/secrets/secrets-create-mutation.ts | 2 +- .../data/secrets/secrets-delete-mutation.ts | 2 +- apps/studio/data/sql/abort-query-mutation.ts | 2 +- apps/studio/data/sql/execute-sql-mutation.ts | 2 +- .../ssl-enforcement-update-mutation.ts | 2 +- .../data/storage/bucket-create-mutation.ts | 2 +- .../data/storage/bucket-delete-mutation.ts | 2 +- .../data/storage/bucket-empty-mutation.ts | 2 +- .../storage/bucket-object-delete-mutation.ts | 2 +- .../bucket-object-download-mutation.ts | 2 +- .../bucket-object-get-public-url-mutation.ts | 2 +- .../storage/bucket-object-sign-mutation.ts | 2 +- .../storage/bucket-objects-list-mutation.ts | 2 +- .../data/storage/bucket-update-mutation.ts | 2 +- .../data/storage/object-move-mutation.ts | 2 +- .../storage/s3-access-key-create-mutation.ts | 2 +- .../storage/s3-access-key-delete-mutation.ts | 2 +- .../data/stripe/setup-intent-mutation.ts | 2 +- ...g-subscription-cancel-schedule-mutation.ts | 2 +- .../org-subscription-update-mutation.ts | 6 +- .../project-addon-remove-mutation.ts | 2 +- .../project-addon-update-mutation.ts | 2 +- .../table-rows/get-cell-value-mutation.ts | 2 +- .../table-rows/table-row-create-mutation.ts | 2 +- .../table-row-delete-all-mutation.ts | 2 +- .../table-rows/table-row-delete-mutation.tsx | 53 ++--- .../table-rows/table-row-truncate-mutation.ts | 2 +- .../table-rows/table-row-update-mutation.ts | 2 +- .../data/tables/table-create-mutation.ts | 2 +- .../data/tables/table-delete-mutation.ts | 2 +- .../data/tables/table-update-mutation.ts | 4 +- .../integration-create-mutation.ts | 2 +- .../integration-delete-mutation.ts | 2 +- .../vault/vault-secret-create-mutation.ts | 4 +- .../vault/vault-secret-delete-mutation.ts | 4 +- .../vault/vault-secret-update-mutation.ts | 4 +- apps/studio/hooks/misc/withAuth.tsx | 2 +- apps/studio/lib/auth.tsx | 2 +- apps/studio/lib/helpers.ts | 2 +- apps/studio/lib/password-strength.ts | 2 +- apps/studio/lib/profile.tsx | 2 +- .../storageExplorer/StorageExplorerStore.tsx | 194 +++++++++------- apps/studio/package.json | 1 - apps/studio/pages/_app.tsx | 15 +- apps/studio/pages/authorize.tsx | 2 +- apps/studio/pages/cli/login.tsx | 2 +- .../[slug]/deploy-button/new-project.tsx | 2 +- .../[slug]/marketplace/choose-project.tsx | 2 +- .../pages/integrations/vercel/install.tsx | 2 +- apps/studio/pages/new/[slug].tsx | 2 +- .../pages/project/[ref]/api/graphiql.tsx | 2 +- .../[ref]/database/column-privileges.tsx | 2 +- .../pages/project/[ref]/database/hooks.tsx | 2 +- .../project/[ref]/logs/explorer/index.tsx | 54 ++--- .../pages/project/[ref]/reports/database.tsx | 2 +- .../project/[ref]/settings/log-drains.tsx | 32 +-- apps/studio/pages/sign-in-mfa.tsx | 2 +- apps/studio/pages/vercel/integrate.tsx | 2 +- apps/studio/pages/vercel/setupProject.tsx | 4 +- apps/studio/state/sql-editor-v2.ts | 4 +- apps/www/pages/_app.tsx | 4 +- package-lock.json | 59 ----- packages/common/package.json | 1 - packages/ui-patterns/ConsentToast/index.tsx | 70 +++--- packages/ui-patterns/package.json | 1 - packages/ui/index.tsx | 5 +- packages/ui/package.json | 2 - .../ui/src/components/Toast/Toast.module.css | 103 --------- .../ui/src/components/Toast/Toast.stories.tsx | 112 --------- packages/ui/src/components/Toast/Toast.tsx | 213 ------------------ packages/ui/src/components/Toast/index.tsx | 1 - .../components/shadcn/ui/sonner-progress.tsx | 43 ++++ .../ui/src/components/shadcn/ui/sonner.tsx | 27 ++- .../ui/src/components/shadcn/ui/toast.tsx | 124 ---------- .../ui/src/components/shadcn/ui/toaster.tsx | 33 --- .../ui/src/components/shadcn/ui/use-toast.ts | 189 ---------------- .../ui/src/layout/PortalToast/PortalToast.tsx | 77 ------- packages/ui/src/layout/PortalToast/index.tsx | 5 - .../tests/snapshot/spec/table-editor.spec.ts | 4 +- 465 files changed, 977 insertions(+), 2261 deletions(-) delete mode 100644 apps/design-system/content/docs/components/toast.mdx delete mode 100644 apps/design-system/registry/default/example/toast-demo.tsx delete mode 100644 apps/design-system/registry/default/example/toast-destructive.tsx delete mode 100644 apps/design-system/registry/default/example/toast-simple.tsx delete mode 100644 apps/design-system/registry/default/example/toast-with-action.tsx delete mode 100644 apps/design-system/registry/default/example/toast-with-title.tsx create mode 100644 apps/docs/features/helpers.consent.tsx delete mode 100644 apps/studio/components/ui/ToastLoader.tsx delete mode 100644 packages/ui/src/components/Toast/Toast.module.css delete mode 100644 packages/ui/src/components/Toast/Toast.stories.tsx delete mode 100644 packages/ui/src/components/Toast/Toast.tsx delete mode 100644 packages/ui/src/components/Toast/index.tsx create mode 100644 packages/ui/src/components/shadcn/ui/sonner-progress.tsx delete mode 100644 packages/ui/src/components/shadcn/ui/toast.tsx delete mode 100644 packages/ui/src/components/shadcn/ui/toaster.tsx delete mode 100644 packages/ui/src/components/shadcn/ui/use-toast.ts delete mode 100644 packages/ui/src/layout/PortalToast/PortalToast.tsx delete mode 100644 packages/ui/src/layout/PortalToast/index.tsx diff --git a/apps/design-system/__registry__/index.tsx b/apps/design-system/__registry__/index.tsx index d8737bbeca6..6d6de5bf8b8 100644 --- a/apps/design-system/__registry__/index.tsx +++ b/apps/design-system/__registry__/index.tsx @@ -1303,61 +1303,6 @@ export const Index: Record = { subcategory: "undefined", chunks: [] }, - "toast-demo": { - name: "toast-demo", - type: "components:example", - registryDependencies: ["toast"], - component: React.lazy(() => import("@/registry/default/example/toast-demo")), - source: "", - files: ["registry/default/example/toast-demo.tsx"], - category: "undefined", - subcategory: "undefined", - chunks: [] - }, - "toast-destructive": { - name: "toast-destructive", - type: "components:example", - registryDependencies: ["toast"], - component: React.lazy(() => import("@/registry/default/example/toast-destructive")), - source: "", - files: ["registry/default/example/toast-destructive.tsx"], - category: "undefined", - subcategory: "undefined", - chunks: [] - }, - "toast-simple": { - name: "toast-simple", - type: "components:example", - registryDependencies: ["toast"], - component: React.lazy(() => import("@/registry/default/example/toast-simple")), - source: "", - files: ["registry/default/example/toast-simple.tsx"], - category: "undefined", - subcategory: "undefined", - chunks: [] - }, - "toast-with-action": { - name: "toast-with-action", - type: "components:example", - registryDependencies: ["toast"], - component: React.lazy(() => import("@/registry/default/example/toast-with-action")), - source: "", - files: ["registry/default/example/toast-with-action.tsx"], - category: "undefined", - subcategory: "undefined", - chunks: [] - }, - "toast-with-title": { - name: "toast-with-title", - type: "components:example", - registryDependencies: ["toast"], - component: React.lazy(() => import("@/registry/default/example/toast-with-title")), - source: "", - files: ["registry/default/example/toast-with-title.tsx"], - category: "undefined", - subcategory: "undefined", - chunks: [] - }, "toggle-group-demo": { name: "toggle-group-demo", type: "components:example", diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx index 3285e99f0ab..9b522fbcc1a 100644 --- a/apps/design-system/app/layout.tsx +++ b/apps/design-system/app/layout.tsx @@ -2,7 +2,6 @@ import '@/styles/globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' import { ThemeProvider } from './Providers' -import { Toaster } from 'ui' import { SonnerToaster } from './SonnerToast' const inter = Inter({ subsets: ['latin'] }) @@ -29,7 +28,6 @@ export default async function Layout({ children }: RootLayoutProps) {
{children}
- diff --git a/apps/design-system/content/docs/components/toast.mdx b/apps/design-system/content/docs/components/toast.mdx deleted file mode 100644 index 34dd53ac580..00000000000 --- a/apps/design-system/content/docs/components/toast.mdx +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Toast -description: A succinct message that is displayed temporarily. -component: true -links: - doc: https://www.radix-ui.com/docs/primitives/components/toast - api: https://www.radix-ui.com/docs/primitives/components/toast#api-reference -source: - shadcn: true ---- - - - -## Installation - - - - - CLI - Manual - - - - - -Run the following command: - -```bash -npx shadcn-ui@latest add toast -``` - -Add the Toaster component - -```tsx title="app/layout.tsx" {1,9} -import { Toaster } from '@/components/ui/toaster' - -export default function RootLayout({ children }) { - return ( - - - -
{children}
- - - - ) -} -``` - - - - - - - - - -Install the following dependencies: - -```bash -npm install @radix-ui/react-toast -``` - -Copy and paste the following code into your project. - -`toast.tsx` - - - -`toaster.tsx` - - - -`use-toast.tsx` - - - -Update the import paths to match your project setup. - -Add the Toaster component - -```tsx title="app/layout.tsx" {1,9} -import { Toaster } from '@/components/ui/toaster' - -export default function RootLayout({ children }) { - return ( - - - -
{children}
- - - - ) -} -``` - - - - - - - -## Usage - -The `useToast` hook returns a `toast` function that you can use to display a toast. - -```tsx -import { useToast } from '@/components/ui/use-toast' -``` - -```tsx {2,7-10} -export const ToastDemo = () => { - const { toast } = useToast() - - return ( - - ) -} -``` - - - -To display multiple toasts at the same time, you can update the `TOAST_LIMIT` in `use-toast.tsx`. - - - -## Examples - -### Simple - - - -### With title - - - -### With Action - - - -### Destructive - -Use `toast({ variant: "destructive" })` to display a destructive toast. - - diff --git a/apps/design-system/registry/default/example/calendar-form.tsx b/apps/design-system/registry/default/example/calendar-form.tsx index 23cacd37772..e598a485034 100644 --- a/apps/design-system/registry/default/example/calendar-form.tsx +++ b/apps/design-system/registry/default/example/calendar-form.tsx @@ -4,12 +4,13 @@ import { zodResolver } from '@hookform/resolvers/zod' import { format } from 'date-fns' import { CalendarIcon } from 'lucide-react' import { useForm } from 'react-hook-form' +import { toast } from 'sonner' import { z } from 'zod' import { cn } from '@/lib/utils' -import { Button } from 'ui' -import { Calendar } from 'ui' import { + Button, + Calendar, Form_Shadcn_, FormControl_Shadcn_, FormDescription_Shadcn_, @@ -17,9 +18,10 @@ import { FormItem_Shadcn_, FormLabel_Shadcn_, FormMessage_Shadcn_, + Popover_Shadcn_, + PopoverContent_Shadcn_, + PopoverTrigger_Shadcn_, } from 'ui' -import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui' -import { toast } from 'ui' const FormSchema = z.object({ dob: z.date({ @@ -33,8 +35,7 @@ export default function CalendarForm() { }) function onSubmit(data: z.infer) { - toast({ - title: 'You submitted the following values:', + toast('You submitted the following values:', { description: ( 
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
index 8daa38dc91d..9f889005280 100644
--- a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
+++ b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
@@ -4,12 +4,13 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
 import {
+  Button,
+  Calendar,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -17,9 +18,10 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   dob: z.date({
@@ -33,8 +35,7 @@ export default function CalendarForm() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
index d1eacb70b38..3dfe784db0d 100644
--- a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
+++ b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
@@ -2,11 +2,12 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
-import { Checkbox_Shadcn_ } from 'ui'
 import {
+  Button,
+  Checkbox_Shadcn_,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -15,7 +16,6 @@ import {
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
 } from 'ui'
-import { toast } from 'ui'
 
 const items = [
   {
@@ -59,8 +59,7 @@ export default function CheckboxReactHookFormMultiple() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/checkbox-form-single.tsx b/apps/design-system/registry/default/example/checkbox-form-single.tsx
index bea7b188f64..68a90d95d63 100644
--- a/apps/design-system/registry/default/example/checkbox-form-single.tsx
+++ b/apps/design-system/registry/default/example/checkbox-form-single.tsx
@@ -1,22 +1,21 @@
 'use client'
 
-import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
+import Link from 'next/link'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
-import { Checkbox_Shadcn_ } from 'ui'
 import {
+  Button,
+  Checkbox_Shadcn_,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
 } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   mobile: z.boolean().default(false).optional(),
@@ -31,8 +30,7 @@ export default function CheckboxReactHookFormSingle() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/combobox-form.tsx b/apps/design-system/registry/default/example/combobox-form.tsx
index 5c36af2bf11..5c4e7d16208 100644
--- a/apps/design-system/registry/default/example/combobox-form.tsx
+++ b/apps/design-system/registry/default/example/combobox-form.tsx
@@ -3,11 +3,12 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Check, ChevronsUpDown } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
 import {
+  Button,
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
   CommandGroup_Shadcn_,
@@ -23,9 +24,10 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
-import { toast } from 'ui'
 
 const languages = [
   { label: 'English', value: 'en' },
@@ -51,8 +53,7 @@ export default function ComboboxForm() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/date-picker-form.tsx b/apps/design-system/registry/default/example/date-picker-form.tsx
index 7e6989c141e..dc3270acb69 100644
--- a/apps/design-system/registry/default/example/date-picker-form.tsx
+++ b/apps/design-system/registry/default/example/date-picker-form.tsx
@@ -4,12 +4,13 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { cn } from '@/lib/utils'
-import { Button } from 'ui'
-import { Calendar } from 'ui'
 import {
+  Button,
+  Calendar,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -17,9 +18,10 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
 } from 'ui'
-import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   dob: z.date({
@@ -33,8 +35,7 @@ export default function DatePickerForm() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/input-form.tsx b/apps/design-system/registry/default/example/input-form.tsx
index 21445090f8a..ea9db189256 100644
--- a/apps/design-system/registry/default/example/input-form.tsx
+++ b/apps/design-system/registry/default/example/input-form.tsx
@@ -2,10 +2,11 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -13,9 +14,8 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Input,
 } from 'ui'
-import { Input } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   username: z.string().min(2, {
@@ -32,8 +32,7 @@ export default function InputForm() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/input-otp-form.tsx b/apps/design-system/registry/default/example/input-otp-form.tsx
index 9036239ff06..bccd4423c69 100644
--- a/apps/design-system/registry/default/example/input-otp-form.tsx
+++ b/apps/design-system/registry/default/example/input-otp-form.tsx
@@ -2,10 +2,11 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -13,9 +14,10 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
 } from 'ui'
-import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   pin: z.string().min(6, {
@@ -32,8 +34,7 @@ export default function InputOTPForm() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/multi-select-form.tsx b/apps/design-system/registry/default/example/multi-select-form.tsx
index 339c5ca6b6f..83892ee5bab 100644
--- a/apps/design-system/registry/default/example/multi-select-form.tsx
+++ b/apps/design-system/registry/default/example/multi-select-form.tsx
@@ -1,5 +1,20 @@
 'use client'
 
+import { zodResolver } from '@hookform/resolvers/zod'
+import Image from 'next/image'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import z from 'zod'
+
+import {
+  Button,
+  Form_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
 import {
   MultiSelector,
   MultiSelectorContent,
@@ -8,21 +23,6 @@ import {
   MultiSelectorList,
   MultiSelectorTrigger,
 } from 'ui-patterns/multi-select'
-import {
-  Form_Shadcn_,
-  FormDescription_Shadcn_,
-  FormField_Shadcn_,
-  FormItem_Shadcn_,
-  FormLabel_Shadcn_,
-  FormMessage_Shadcn_,
-  useToast,
-} from 'ui'
-import z from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { toast } from 'ui'
-import { Button } from 'ui'
-import Image from 'next/image'
 
 const form = z.object({
   value: z.array(z.string()).nonempty('Please select at least one person'),
@@ -51,12 +51,8 @@ const MultiSelectZod = () => {
     defaultValues: form.parse({ value: [users[0].name] }),
   })
 
-  const { toast } = useToast()
   const onSubmit = (data: Form) => {
-    toast({
-      title: 'Form submitted ',
-      description: JSON.stringify(data, null, 2),
-    })
+    toast('Form submitted ', { description: JSON.stringify(data, null, 2) })
   }
 
   return (
diff --git a/apps/design-system/registry/default/example/radio-group-card-form.tsx b/apps/design-system/registry/default/example/radio-group-card-form.tsx
index 14d54b71ffb..447b92a071e 100644
--- a/apps/design-system/registry/default/example/radio-group-card-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-card-form.tsx
@@ -2,18 +2,20 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button, RadioGroupCard, RadioGroupCardItem } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  RadioGroupCard,
+  RadioGroupCardItem,
 } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {
@@ -28,8 +30,7 @@ export default function RadioGroupForm() {
 
   function onSubmit(data: z.infer) {
     console.log(JSON.stringify(data, null, 2))
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/radio-group-form.tsx b/apps/design-system/registry/default/example/radio-group-form.tsx
index 4fdf433393c..e9315da6141 100644
--- a/apps/design-system/registry/default/example/radio-group-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-form.tsx
@@ -2,19 +2,20 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  RadioGroup_Shadcn_,
+  RadioGroupItem_Shadcn_,
 } from 'ui'
-import { RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {
@@ -28,8 +29,7 @@ export default function RadioGroupForm() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/radio-group-stacked-form.tsx b/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
index 5c979c76c00..54aa17610e8 100644
--- a/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
+++ b/apps/design-system/registry/default/example/radio-group-stacked-form.tsx
@@ -2,18 +2,20 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button, RadioGroupStacked, RadioGroupStackedItem } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  RadioGroupStacked,
+  RadioGroupStackedItem,
 } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   type: z.enum(['all', 'mentions', 'none'], {
@@ -28,8 +30,7 @@ export default function RadioGroupForm() {
 
   function onSubmit(data: z.infer) {
     console.log(JSON.stringify(data, null, 2))
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/select-form.tsx b/apps/design-system/registry/default/example/select-form.tsx
index 8af25954845..0f4a31e7689 100644
--- a/apps/design-system/registry/default/example/select-form.tsx
+++ b/apps/design-system/registry/default/example/select-form.tsx
@@ -1,12 +1,13 @@
 'use client'
 
-import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
+import Link from 'next/link'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button } from 'ui'
 import {
+  Button,
   Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
@@ -14,15 +15,12 @@ import {
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
-} from 'ui'
-import {
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
 } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   email: z
@@ -38,8 +36,7 @@ export default function SelectForm() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/sonner-upload.tsx b/apps/design-system/registry/default/example/sonner-upload.tsx
index dcc25b45692..5d2fcc38b1b 100644
--- a/apps/design-system/registry/default/example/sonner-upload.tsx
+++ b/apps/design-system/registry/default/example/sonner-upload.tsx
@@ -1,11 +1,8 @@
 import { Check, Loader2 } from 'lucide-react'
-import { useState } from 'react'
 import { toast } from 'sonner'
 import { Button, Progress } from 'ui'
 
 export default function SonnerUpload() {
-  const [isUploading, setIsUploadingState] = useState(false)
-
   const uploadPromise = (files: number, toastId: number) => {
     toast.loading(, {
       id: toastId,
@@ -70,14 +67,12 @@ export default function SonnerUpload() {
           const max = 20 // specify the maximum value
           const files = Math.floor(Math.random() * max)
           try {
-            setIsUploadingState(true)
             const promise = await uploadPromise(files, toastId)
             // @ts-expect-error
             toast.success(, {
               duration: 2000,
               id: toastId,
             })
-            setIsUploadingState(false)
           } catch (error) {}
         }}
       >
diff --git a/apps/design-system/registry/default/example/switch-form.tsx b/apps/design-system/registry/default/example/switch-form.tsx
index e83be3d26bd..197c7359157 100644
--- a/apps/design-system/registry/default/example/switch-form.tsx
+++ b/apps/design-system/registry/default/example/switch-form.tsx
@@ -2,19 +2,19 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button, Form_Shadcn_ } from 'ui'
 import {
-  Form,
+  Button,
+  Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
+  Switch,
 } from 'ui'
-import { Switch } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   marketing_emails: z.boolean().default(false).optional(),
@@ -30,8 +30,7 @@ export default function SwitchForm() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx
index 529765679cb..9303fb27aaa 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalPrimary = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalPrimary = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
index dd8b94c20d4..99a2328ef19 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithCancelButton = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalWithCancelButton = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
index ef27bbf9b99..e6cf2176e67 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
@@ -1,16 +1,16 @@
 'use client'
 
-import { useState } from 'react'
-import { Button, useToast } from 'ui'
 import { UserPlus } from 'lucide-react'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithChildren = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -20,10 +20,7 @@ const TextConfirmModalWithChildren = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-destructive-alert.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-destructive-alert.tsx
index 120131fd71d..08a09885977 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-destructive-alert.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-destructive-alert.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithDestructiveAlert = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalWithDestructiveAlert = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-info-alert.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-info-alert.tsx
index b2f732f8761..fef97c1db9c 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-info-alert.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-info-alert.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithInfoAlert = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalWithInfoAlert = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
index eb8447556fb..a42f783a102 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithSize = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,10 +19,7 @@ const TextConfirmModalWithSize = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
-        description: 'Friday, February 10, 2023 at 5:57 PM',
-      })
+      toast('Updated project', { description: 'Friday, February 10, 2023 at 5:57 PM' })
     }, 3000)
   }
 
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-warning-alert.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-warning-alert.tsx
index 2a4cd6f372a..062734d0bb4 100644
--- a/apps/design-system/registry/default/example/text-confirm-dialog-with-warning-alert.tsx
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-warning-alert.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, useToast } from 'ui'
+import { toast } from 'sonner'
+
+import { Button } from 'ui'
 import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 const TextConfirmModalWithWarningAlert = () => {
   const [visible, setVisible] = useState(false)
   const [loading, setLoading] = useState(false)
 
-  const { toast } = useToast()
-
   function onVisibleChange() {
     setVisible(!visible)
   }
@@ -19,8 +19,7 @@ const TextConfirmModalWithWarningAlert = () => {
     setTimeout(() => {
       setLoading(false)
       setVisible(false)
-      toast({
-        title: 'Updated project',
+      toast('Updated project', {
         description: 'Friday, February 10, 2023 at 5:57 PM',
       })
     }, 3000)
diff --git a/apps/design-system/registry/default/example/textarea-form.tsx b/apps/design-system/registry/default/example/textarea-form.tsx
index 72baa8c892e..1ddb34d5718 100644
--- a/apps/design-system/registry/default/example/textarea-form.tsx
+++ b/apps/design-system/registry/default/example/textarea-form.tsx
@@ -2,20 +2,20 @@
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Button, Form_Shadcn_ } from 'ui'
 import {
-  Form,
+  Button,
+  Form_Shadcn_,
   FormControl_Shadcn_,
   FormDescription_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
+  Textarea,
 } from 'ui'
-import { Textarea } from 'ui'
-import { toast } from 'ui'
 
 const FormSchema = z.object({
   bio: z
@@ -34,8 +34,7 @@ export default function TextareaForm() {
   })
 
   function onSubmit(data: z.infer) {
-    toast({
-      title: 'You submitted the following values:',
+    toast('You submitted the following values:', {
       description: (
         
           {JSON.stringify(data, null, 2)}
diff --git a/apps/design-system/registry/default/example/toast-demo.tsx b/apps/design-system/registry/default/example/toast-demo.tsx
deleted file mode 100644
index 95466eac8b1..00000000000
--- a/apps/design-system/registry/default/example/toast-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { ToastAction } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastDemo() {
-  const { toast } = useToast()
-
-  return (
-    
-  )
-}
diff --git a/apps/design-system/registry/default/example/toast-destructive.tsx b/apps/design-system/registry/default/example/toast-destructive.tsx
deleted file mode 100644
index 841cce4586a..00000000000
--- a/apps/design-system/registry/default/example/toast-destructive.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { ToastAction } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastDestructive() {
-  const { toast } = useToast()
-
-  return (
-    
-  )
-}
diff --git a/apps/design-system/registry/default/example/toast-simple.tsx b/apps/design-system/registry/default/example/toast-simple.tsx
deleted file mode 100644
index f270008cd93..00000000000
--- a/apps/design-system/registry/default/example/toast-simple.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastSimple() {
-  const { toast } = useToast()
-
-  return (
-    
-  )
-}
diff --git a/apps/design-system/registry/default/example/toast-with-action.tsx b/apps/design-system/registry/default/example/toast-with-action.tsx
deleted file mode 100644
index 1683cab0cd4..00000000000
--- a/apps/design-system/registry/default/example/toast-with-action.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { ToastAction } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastWithAction() {
-  const { toast } = useToast()
-
-  return (
-    
-  )
-}
diff --git a/apps/design-system/registry/default/example/toast-with-title.tsx b/apps/design-system/registry/default/example/toast-with-title.tsx
deleted file mode 100644
index 92b1bec4f8b..00000000000
--- a/apps/design-system/registry/default/example/toast-with-title.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { Button } from 'ui'
-import { useToast } from 'ui'
-
-export default function ToastWithTitle() {
-  const { toast } = useToast()
-
-  return (
-    
-  )
-}
diff --git a/apps/design-system/registry/examples.ts b/apps/design-system/registry/examples.ts
index 4a87159a1d8..a7e7a595bb7 100644
--- a/apps/design-system/registry/examples.ts
+++ b/apps/design-system/registry/examples.ts
@@ -791,36 +791,6 @@ export const examples: Registry = [
     registryDependencies: ['textarea', 'label'],
     files: ['example/textarea-with-text.tsx'],
   },
-  {
-    name: 'toast-demo',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-demo.tsx'],
-  },
-  {
-    name: 'toast-destructive',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-destructive.tsx'],
-  },
-  {
-    name: 'toast-simple',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-simple.tsx'],
-  },
-  {
-    name: 'toast-with-action',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-with-action.tsx'],
-  },
-  {
-    name: 'toast-with-title',
-    type: 'components:example',
-    registryDependencies: ['toast'],
-    files: ['example/toast-with-title.tsx'],
-  },
   {
     name: 'toggle-group-demo',
     type: 'components:example',
diff --git a/apps/docs/features/app.providers.tsx b/apps/docs/features/app.providers.tsx
index 17a6e75b238..13e9d66572f 100644
--- a/apps/docs/features/app.providers.tsx
+++ b/apps/docs/features/app.providers.tsx
@@ -1,9 +1,9 @@
-import { CommandProvider } from '@ui-patterns/CommandMenu'
-import { ThemeProvider } from 'common'
-import { PortalToast } from 'ui'
-import { PromoToast } from 'ui-patterns'
 import { type PropsWithChildren } from 'react'
 
+import { ThemeProvider } from 'common'
+import { SonnerToaster } from 'ui'
+import { CommandProvider } from 'ui-patterns/CommandMenu'
+import { PromoToast } from 'ui-patterns/PromoToast'
 import SiteLayout from '~/layouts/SiteLayout'
 import { AuthContainer } from './auth/auth.client'
 import { DocsCommandMenu } from './command'
@@ -25,7 +25,6 @@ function GlobalProviders({ children }: PropsWithChildren) {
           
             

               
-                
                 
                 {children}
                 
@@ -33,6 +32,7 @@ function GlobalProviders({ children }: PropsWithChildren) {
               
             

           
+          
         
       
     
diff --git a/apps/docs/features/helpers.consent.tsx b/apps/docs/features/helpers.consent.tsx
new file mode 100644
index 00000000000..fb4025cbd4d
--- /dev/null
+++ b/apps/docs/features/helpers.consent.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useConsent } from 'ui-patterns/ConsentToast'
+
+/**
+ * Helper client component to trigger the consent toast. It has to be a client component.
+ */
+export const TriggerConsentToast = () => {
+  const { triggerConsentToast } = useConsent()
+  useEffect(() => {
+    setTimeout(() => triggerConsentToast(), 1000)
+  }, [triggerConsentToast])
+  return null
+}
diff --git a/apps/studio/components/grid/components/editor/JsonEditor.tsx b/apps/studio/components/grid/components/editor/JsonEditor.tsx
index 637df96e78b..8a815486632 100644
--- a/apps/studio/components/grid/components/editor/JsonEditor.tsx
+++ b/apps/studio/components/grid/components/editor/JsonEditor.tsx
@@ -3,7 +3,7 @@ import { isNil } from 'lodash'
 import { Maximize } from 'lucide-react'
 import { useCallback, useState } from 'react'
 import type { RenderEditCellProps } from 'react-data-grid'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useTrackedState } from 'components/grid/store/Store'
diff --git a/apps/studio/components/grid/components/editor/TextEditor.tsx b/apps/studio/components/grid/components/editor/TextEditor.tsx
index 12547ecc864..7496f78c727 100644
--- a/apps/studio/components/grid/components/editor/TextEditor.tsx
+++ b/apps/studio/components/grid/components/editor/TextEditor.tsx
@@ -2,7 +2,7 @@ import { PostgresTable } from '@supabase/postgres-meta'
 import { Maximize } from 'lucide-react'
 import { useCallback, useState } from 'react'
 import type { RenderEditCellProps } from 'react-data-grid'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useGetCellValueMutation } from 'data/table-rows/get-cell-value-mutation'
diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx
index 925b4db10a9..7f85c63f73b 100644
--- a/apps/studio/components/grid/components/header/Header.tsx
+++ b/apps/studio/components/grid/components/header/Header.tsx
@@ -5,7 +5,7 @@ import saveAs from 'file-saver'
 import { ArrowUp, ChevronDown, Download, FileText, Trash, X } from 'lucide-react'
 import Papa from 'papaparse'
 import { ReactNode, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useDispatch, useTrackedState } from 'components/grid/store/Store'
 import type { Filter, Sort, SupaTable } from 'components/grid/types'
diff --git a/apps/studio/components/interfaces/Account/AccessTokenList.tsx b/apps/studio/components/interfaces/Account/AccessTokenList.tsx
index 0afb7dafe68..94216539b89 100644
--- a/apps/studio/components/interfaces/Account/AccessTokenList.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokenList.tsx
@@ -2,7 +2,7 @@ import { useAccessTokenDeleteMutation } from 'data/access-tokens/access-tokens-d
 import { AccessToken, useAccessTokensQuery } from 'data/access-tokens/access-tokens-query'
 import { Trash } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import Table from 'components/to-be-cleaned/Table'
 import { Button } from 'ui'
diff --git a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
index e08e83410d1..c87f19e2478 100644
--- a/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/DeleteAccountButton.tsx
@@ -1,10 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { SupportCategories } from '@supabase/shared-types/out/constants'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
-import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 
 import { useSendSupportTicketMutation } from 'data/feedback/support-ticket-send'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
diff --git a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
index 5519801208c..85dfa041e0b 100644
--- a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   FormControl_Shadcn_,
   FormField_Shadcn_,
diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx
index 555e03f3391..fe519e25821 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx
@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
-import { Input, Modal } from 'ui'
+import { toast } from 'sonner'
+import { Input } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 import InformationBox from 'components/ui/InformationBox'
diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/DeleteFactorModal.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/DeleteFactorModal.tsx
index b51cf270113..6b6d3a0a322 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/DeleteFactorModal.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/DeleteFactorModal.tsx
@@ -1,4 +1,4 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useMfaUnenrollMutation } from 'data/profile/mfa-unenroll-mutation'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
diff --git a/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx b/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx
index 61832b7db2c..a81f971a346 100644
--- a/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx
+++ b/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useIsLoggedIn, useParams } from 'common'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
diff --git a/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx
index a5bff845e0f..7f647953084 100644
--- a/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { boolean, number, object, string } from 'yup'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index a2f4f3cab08..191145546b5 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -2,8 +2,8 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { Check, ChevronUp, ExternalLink } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
 import ReactMarkdown from 'react-markdown'
+import { toast } from 'sonner'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import type { components } from 'data/api'
diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx
index 0e3cf915574..dd53a8b8df1 100644
--- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { ExternalLink, Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { boolean, number, object, string } from 'yup'
 
 import { useParams } from 'common'
@@ -27,8 +27,8 @@ import {
   Input,
   InputNumber,
   Toggle,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui'
 import FormField from '../AuthProvidersForm/FormField'
 
 // Use a const string to represent no chars option. Represented as empty string on the backend side.
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index 0a2f3ab5cb9..dc60b27a893 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
 import ReactMarkdown from 'react-markdown'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import CodeEditor from 'components/ui/CodeEditor/CodeEditor'
diff --git a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
index 4b2502f7935..14177c0914b 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
@@ -3,8 +3,8 @@ import { X } from 'lucide-react'
 import randomBytes from 'randombytes'
 import { useEffect, useMemo } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
 import ReactMarkdown from 'react-markdown'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx b/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx
index 1eabe5bfda0..86e4149705d 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import AlertError from 'components/ui/AlertError'
diff --git a/apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/index.tsx b/apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/index.tsx
index e8fe964d1c6..e96411f8853 100644
--- a/apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/index.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/AIPolicyEditorPanel/index.tsx
@@ -9,7 +9,7 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   Button,
   Checkbox_Shadcn_,
diff --git a/apps/studio/components/interfaces/Auth/Policies/Policies.tsx b/apps/studio/components/interfaces/Auth/Policies/Policies.tsx
index 97c1dd64954..d3677dd2d25 100644
--- a/apps/studio/components/interfaces/Auth/Policies/Policies.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/Policies.tsx
@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash'
 import { HelpCircle } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import PolicyTableRow from 'components/interfaces/Auth/Policies/PolicyTableRow'
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
index 9c7fd55179b..ee6273c9deb 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
@@ -1,6 +1,6 @@
 import { isEmpty, noop } from 'lodash'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
index 700ad0fb428..a6258a90e71 100644
--- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
+++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import Link from 'next/link'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
index 6eb14bf3f28..de9f7208475 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'common'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { object, string } from 'yup'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
diff --git a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
index 9dfbcf9f1d1..4e0131ace8a 100644
--- a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
+++ b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { object, string } from 'yup'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
index 3d388a1073b..6f54f93a544 100644
--- a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { number, object, string } from 'yup'
 
 import { Markdown } from 'components/interfaces/Markdown'
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
index 70d42ef2485..69010641e6d 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAuth0Dialog.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Trash } from 'lucide-react'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
index ee4ab111c2e..c27876c6261 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateAwsCognitoAuthDialog.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Trash } from 'lucide-react'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
index ceedf23eff1..32de8cae74d 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/CreateFirebaseAuthDialog.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { AlertTriangle, Trash } from 'lucide-react'
 import { useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx
index 83941540b3c..d519fd87584 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Loader2 } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import AlertError from 'components/ui/AlertError'
diff --git a/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
index 1e854996d9a..fba1838b536 100644
--- a/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/CreateUserModal.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { Lock, Mail } from 'lucide-react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useUserCreateMutation } from 'data/auth/user-create-mutation'
diff --git a/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
index 24f75bd2bc7..32b3beef3d4 100644
--- a/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/InviteUserModal.tsx
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Mail } from 'lucide-react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useUserInviteMutation } from 'data/auth/user-invite-mutation'
diff --git a/apps/studio/components/interfaces/Auth/Users/UserDropdown.tsx b/apps/studio/components/interfaces/Auth/Users/UserDropdown.tsx
index a60c347e596..6271c2b82f1 100644
--- a/apps/studio/components/interfaces/Auth/Users/UserDropdown.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UserDropdown.tsx
@@ -1,6 +1,6 @@
 import { Mail, MoreHorizontal, ShieldOff, Trash, User as UserIcon } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useUserDeleteMFAFactorsMutation } from 'data/auth/user-delete-mfa-factors-mutation'
diff --git a/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx b/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx
index ab55a174629..8d4f50aa036 100644
--- a/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/AddNewPaymentMethodModal.tsx
@@ -3,7 +3,7 @@ import { Elements } from '@stripe/react-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
 import { useTheme } from 'next-themes'
 import { useCallback, useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Modal } from 'ui'
 
 import { useOrganizationPaymentMethodSetupIntent } from 'data/organizations/organization-payment-method-setup-intent-mutation'
diff --git a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx
index e638cd4a3fa..770d8ebbc10 100644
--- a/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx
@@ -4,7 +4,7 @@ import { organizationKeys } from 'data/organizations/keys'
 import { useOrganizationPaymentMethodMarkAsDefaultMutation } from 'data/organizations/organization-payment-method-default-mutation'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button, Checkbox_Shadcn_, Label_Shadcn_, Modal } from 'ui'
 
 interface AddPaymentMethodFormProps {
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
index a9c7359857b..4990044ce5b 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx
@@ -4,7 +4,7 @@ import { ExternalLink, MessageCircle } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
index 624e2205bc0..91f2e1f81f8 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
@@ -15,8 +15,8 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 import { PropsWithChildren, ReactNode, useState } from 'react'
-import toast from 'react-hot-toast'
 import { useInView } from 'react-intersection-observer'
+import { toast } from 'sonner'
 
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useBranchQuery } from 'data/branches/branch-query'
diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
index 143937a8982..8197fada4a4 100644
--- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
@@ -4,7 +4,7 @@ import { Check, ExternalLink, Loader2 } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import AlertError from 'components/ui/AlertError'
diff --git a/apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx b/apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx
index 224032b4b8c..06ea793fd58 100644
--- a/apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx
+++ b/apps/studio/components/interfaces/DataWarehouse/CreateWarehouseCollection.tsx
@@ -4,17 +4,17 @@ import { PlusIcon } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { FormMessage } from '@ui/components/shadcn/ui/form'
-import { useParams } from 'common'
-import { Button, FormControl_Shadcn_, FormField_Shadcn_, Form_Shadcn_, Modal } from 'ui'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { Input } from '@ui/components/shadcn/ui/input'
+import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useCreateCollection } from 'data/analytics/warehouse-collections-create-mutation'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { Button, FormControl_Shadcn_, FormField_Shadcn_, Form_Shadcn_, Modal } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 export const CreateWarehouseCollectionModal = () => {
   const [isOpen, setIsOpen] = useState(false)
diff --git a/apps/studio/components/interfaces/DataWarehouse/WarehouseAccessTokens.tsx b/apps/studio/components/interfaces/DataWarehouse/WarehouseAccessTokens.tsx
index 86a96ce8b77..d323dd4787e 100644
--- a/apps/studio/components/interfaces/DataWarehouse/WarehouseAccessTokens.tsx
+++ b/apps/studio/components/interfaces/DataWarehouse/WarehouseAccessTokens.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { MoreVertical, TrashIcon } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { TooltipContent } from '@radix-ui/react-tooltip'
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/DataWarehouse/WarehouseMenuItem.tsx b/apps/studio/components/interfaces/DataWarehouse/WarehouseMenuItem.tsx
index e328a432fd6..2e7202cda37 100644
--- a/apps/studio/components/interfaces/DataWarehouse/WarehouseMenuItem.tsx
+++ b/apps/studio/components/interfaces/DataWarehouse/WarehouseMenuItem.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { FormMessage } from '@ui/components/shadcn/ui/form'
@@ -15,7 +15,6 @@ import { useUpdateCollection } from 'data/analytics/warehouse-collections-update
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import {
   Button,
-  Checkbox_Shadcn_,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -23,7 +22,6 @@ import {
   DropdownMenuTrigger,
   FormControl_Shadcn_,
   FormField_Shadcn_,
-  FormLabel_Shadcn_,
   Form_Shadcn_,
   Input_Shadcn_,
   Modal,
diff --git a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
index ed66224b141..1c25952c1b1 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { Clock } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Panel from 'components/ui/Panel'
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
index 03c3602605a..2add991b5da 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/CreateEnumeratedTypeSidePanel.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useEffect, useRef } from 'react'
 import { DragDropContext, Droppable, DroppableProvided } from 'react-beautiful-dnd'
 import { useFieldArray, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/DeleteEnumeratedTypeModal.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/DeleteEnumeratedTypeModal.tsx
index 5d54690663d..47ae59ee3bc 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/DeleteEnumeratedTypeModal.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/DeleteEnumeratedTypeModal.tsx
@@ -1,15 +1,7 @@
-import {
-  AlertDescription_Shadcn_,
-  AlertTitle_Shadcn_,
-  Alert_Shadcn_,
-  IconAlertTriangle,
-  Modal,
-} from 'ui'
-
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { useEnumeratedTypeDeleteMutation } from 'data/enumerated-types/enumerated-type-delete-mutation'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 interface DeleteEnumeratedTypeModalProps {
   visible: boolean
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
index 6cef8de572b..86251dc37f7 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EditEnumeratedTypeSidePanel.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import Link from 'next/link'
 import { useEffect, useRef } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
index aae7012e721..6c1bb60dd97 100644
--- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -1,7 +1,7 @@
 import type { PostgresExtension } from '@supabase/postgres-meta'
 import { ExternalLinkIcon } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
diff --git a/apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx b/apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
index 74c561f455b..fb9d816b4fd 100644
--- a/apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Book, Github, Loader2, Settings } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useDatabaseExtensionDisableMutation } from 'data/database-extensions/database-extension-disable-mutation'
@@ -111,10 +111,10 @@ const ExtensionCard = ({ extension }: ExtensionCardProps) => {
                   extensionMeta?.link.startsWith('/guides')
                     ? siteUrl === 'http://localhost:8082'
                       ? `http://localhost:3001/docs${
-                          extensions.find((item: any) => item.name === extension.name)?.link
+                          extensions.find((item) => item.name === extension.name)?.link
                         }`
                       : `https://supabase.com/docs${
-                          extensions.find((item: any) => item.name === extension.name)?.link
+                          extensions.find((item) => item.name === extension.name)?.link
                         }`
                     : extensions.find((item: any) => item.name === extension.name)?.link ?? ''
                 }
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
index e0950b10feb..8d440869f36 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
@@ -3,7 +3,7 @@ import { isEmpty, isNull, keyBy, mapValues, partition } from 'lodash'
 import { Plus, Trash } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import z from 'zod'
 
 import { POSTGRES_DATA_TYPES } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants'
diff --git a/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx b/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
index 057e373ec2f..134881ccb2d 100644
--- a/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
@@ -1,9 +1,9 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseFunctionDeleteMutation } from 'data/database-functions/database-functions-delete-mutation'
 import { DatabaseFunction } from 'data/database-functions/database-functions-query'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteFunctionProps {
   func?: DatabaseFunction
diff --git a/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx b/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx
index 19c5d54e5bc..5e9b259eecd 100644
--- a/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/DeleteHookModal.tsx
@@ -1,9 +1,9 @@
 import type { PostgresTrigger } from '@supabase/postgres-meta'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteHookModalProps {
   visible: boolean
diff --git a/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx b/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
index 7bbdb296d0b..50ea982502c 100644
--- a/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
@@ -1,7 +1,7 @@
 import type { PostgresTable, PostgresTrigger } from '@supabase/postgres-meta'
 import Image from 'next/legacy/image'
 import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
index 2065602ea20..9e8c08577fd 100644
--- a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
@@ -1,7 +1,7 @@
 import { Check, ChevronsUpDown } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import CodeEditor from 'components/ui/CodeEditor/CodeEditor'
diff --git a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
index 63e9b71dc08..ee68475a0a5 100644
--- a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
+++ b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
@@ -1,6 +1,6 @@
 import { partition, sortBy } from 'lodash'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
index 4ad0f2fcd7d..7ed868f1e47 100644
--- a/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
+++ b/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button, IconAlertCircle, IconSearch, Input, Toggle } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
index 7fd10ea7fdd..8c10afa389f 100644
--- a/apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
+++ b/apps/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
@@ -7,7 +7,7 @@ import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectConte
 import Table from 'components/to-be-cleaned/Table'
 import { useDatabasePublicationUpdateMutation } from 'data/database-publications/database-publications-update-mutation'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 interface PublicationsTableItemProps {
   table: PostgresTable
diff --git a/apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx b/apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx
index 5b17f3e6a23..481d06b26e1 100644
--- a/apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx
+++ b/apps/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import z from 'zod'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx b/apps/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx
index 9707ab9353b..fae48ec353b 100644
--- a/apps/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx
+++ b/apps/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx
@@ -1,5 +1,5 @@
 import type { PostgresRole } from '@supabase/postgres-meta'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Modal } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
index ae1f6eb55bd..34c64c84fc2 100644
--- a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
+++ b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
@@ -1,6 +1,6 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   Button,
   Collapsible,
@@ -17,8 +17,8 @@ import {
 } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { PgRole } from 'data/database-roles/database-roles-query'
 import { useDatabaseRoleUpdateMutation } from 'data/database-roles/database-role-update-mutation'
+import { PgRole } from 'data/database-roles/database-roles-query'
 import { ROLE_PERMISSIONS } from './Roles.constants'
 
 interface RoleRowProps {
diff --git a/apps/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx b/apps/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
index 17a8499e988..01d9710a3c9 100644
--- a/apps/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
@@ -2,8 +2,8 @@ import { has, isEmpty, mapValues, union, without } from 'lodash'
 import { makeAutoObservable } from 'mobx'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { createContext, useContext, useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
 import SVG from 'react-inlinesvg'
+import { toast } from 'sonner'
 import {
   Badge,
   Button,
@@ -13,7 +13,6 @@ import {
   IconTerminal,
   Input,
   Listbox,
-  Modal,
   SidePanel,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
diff --git a/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx b/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
index 80da310e632..f2131e29369 100644
--- a/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
@@ -1,8 +1,8 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabaseTriggerDeleteMutation } from 'data/database-triggers/database-trigger-delete-mutation'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 
 interface DeleteTriggerProps {
   trigger?: any
diff --git a/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx b/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx
index ddffec3c04f..5e7e016d34a 100644
--- a/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx
+++ b/apps/studio/components/interfaces/Database/Wrappers/CreateWrapper.tsx
@@ -4,7 +4,7 @@ import { isEmpty } from 'lodash'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Database/Wrappers/DeleteWrapperModal.tsx b/apps/studio/components/interfaces/Database/Wrappers/DeleteWrapperModal.tsx
index 770f740f1b7..ad70ed7ca21 100644
--- a/apps/studio/components/interfaces/Database/Wrappers/DeleteWrapperModal.tsx
+++ b/apps/studio/components/interfaces/Database/Wrappers/DeleteWrapperModal.tsx
@@ -1,4 +1,4 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Modal } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Database/Wrappers/EditWrapper.tsx b/apps/studio/components/interfaces/Database/Wrappers/EditWrapper.tsx
index d69d07978ae..8295a6d8c23 100644
--- a/apps/studio/components/interfaces/Database/Wrappers/EditWrapper.tsx
+++ b/apps/studio/components/interfaces/Database/Wrappers/EditWrapper.tsx
@@ -4,7 +4,7 @@ import { isEmpty } from 'lodash'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx b/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
index 71e58cea3a6..6fa33f6aa19 100644
--- a/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
+++ b/apps/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Docs/Description.tsx b/apps/studio/components/interfaces/Docs/Description.tsx
index 22605029e52..5ad3e862050 100644
--- a/apps/studio/components/interfaces/Docs/Description.tsx
+++ b/apps/studio/components/interfaces/Docs/Description.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import AutoTextArea from 'components/to-be-cleaned/forms/AutoTextArea'
diff --git a/apps/studio/components/interfaces/Docs/GeneratingTypes.tsx b/apps/studio/components/interfaces/Docs/GeneratingTypes.tsx
index 2d3d2a0c026..c65bd7d1257 100644
--- a/apps/studio/components/interfaces/Docs/GeneratingTypes.tsx
+++ b/apps/studio/components/interfaces/Docs/GeneratingTypes.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
index 3d6bc56bf13..73bb231b853 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
@@ -6,7 +6,7 @@ import { ExternalLink, Maximize2, Minimize2, Terminal } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { FormActions } from 'components/ui/Forms/FormActions'
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretModal.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretModal.tsx
index ddedf66ba46..8b2deb18973 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretModal.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretModal.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button, Form, IconEye, IconEyeOff, Input, Modal } from 'ui'
 
 import { useSecretsCreateMutation } from 'data/secrets/secrets-create-mutation'
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
index 57a52777141..7d2ed076ec4 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { ExternalLink, Search } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
diff --git a/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx b/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx
index 2c006b347ce..b54187ecd71 100644
--- a/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx
+++ b/apps/studio/components/interfaces/Integrations/IntegrationConnection.tsx
@@ -2,7 +2,7 @@ import { ChevronDown, Loader2, RefreshCw, Trash } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { forwardRef, useCallback, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import {
   IntegrationConnection,
diff --git a/apps/studio/components/interfaces/Integrations/ProjectLinker.tsx b/apps/studio/components/interfaces/Integrations/ProjectLinker.tsx
index 153ad5bc153..d19b85a2dc1 100644
--- a/apps/studio/components/interfaces/Integrations/ProjectLinker.tsx
+++ b/apps/studio/components/interfaces/Integrations/ProjectLinker.tsx
@@ -1,7 +1,7 @@
 import { ChevronDown, PlusIcon } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { ReactNode, useEffect, useRef, useState } from 'react'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import ShimmerLine from 'components/ui/ShimmerLine'
 import {
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
index c23076f9d6f..1799508830c 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
@@ -3,10 +3,9 @@ import { ExternalLink, TrashIcon } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode, useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@ui/components/shadcn/ui/select'
 import { useParams } from 'common'
 import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
 import {
@@ -20,13 +19,6 @@ import {
   Input_Shadcn_,
   RadioGroupCard,
   RadioGroupCardItem,
-  Switch,
-  Sheet,
-  SheetContent,
-  SheetSection,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
   Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
@@ -34,6 +26,13 @@ import {
   SelectLabel_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetSection,
+  SheetTitle,
+  Switch,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
@@ -251,27 +250,27 @@ export function LogDrainDestinationSheetForm({
                     label="Type"
                     description={LOG_DRAIN_TYPES.find((t) => t.value === type)?.description || ''}
                   >
-                    
+                      
+                    
                   
                 )}
               
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrains.tsx b/apps/studio/components/interfaces/LogDrains/LogDrains.tsx
index 6aec0af96bd..ce41a14e033 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrains.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrains.tsx
@@ -1,9 +1,16 @@
-import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
-import { LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants'
+import { MoreHorizontal, Pencil, TrashIcon } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
 import { useParams } from 'common'
+import AlertError from 'components/ui/AlertError'
 import CardButton from 'components/ui/CardButton'
 import Panel from 'components/ui/Panel'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { useDeleteLogDrainMutation } from 'data/log-drains/delete-log-drain-mutation'
+import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
+import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import {
   Button,
   DropdownMenu,
@@ -17,15 +24,9 @@ import {
   TableHeader,
   TableRow,
 } from 'ui'
-import { MoreHorizontal, Pencil, TrashIcon } from 'lucide-react'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import { useState } from 'react'
-import { useDeleteLogDrainMutation } from 'data/log-drains/delete-log-drain-mutation'
-import AlertError from 'components/ui/AlertError'
-import toast from 'react-hot-toast'
-import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
-import Link from 'next/link'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants'
 
 export function LogDrains({
   onNewDrainClick,
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
index b7a8e29a42e..612a56bdae2 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import {
   ScaffoldSection,
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
index 0b3f1d7e72a..2e9a6b3504d 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useQueryClient } from '@tanstack/react-query'
 import { useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
index 32ce3e4b4d2..80ff2391062 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
@@ -3,7 +3,7 @@ import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import Table from 'components/to-be-cleaned/Table'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/ChangePaymentMethodModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/ChangePaymentMethodModal.tsx
index e30d69ef331..2157dc2189e 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/ChangePaymentMethodModal.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/ChangePaymentMethodModal.tsx
@@ -1,9 +1,9 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
+import { useOrganizationPaymentMethodMarkAsDefaultMutation } from 'data/organizations/organization-payment-method-default-mutation'
 import type { OrganizationPaymentMethod } from 'data/organizations/organization-payment-methods-query'
 import { Button, Modal } from 'ui'
-import { useOrganizationPaymentMethodMarkAsDefaultMutation } from 'data/organizations/organization-payment-method-default-mutation'
 
 export interface ChangePaymentMethodModalProps {
   selectedPaymentMethod?: OrganizationPaymentMethod
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/DeletePaymentMethodModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/DeletePaymentMethodModal.tsx
index fc58ab39861..62b27c9d2a2 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/DeletePaymentMethodModal.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/DeletePaymentMethodModal.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Alert, Button, Modal } from 'ui'
 
 import { useOrganizationPaymentMethodDeleteMutation } from 'data/organizations/organization-payment-method-delete-mutation'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/PaymentMethods.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/PaymentMethods.tsx
index 432ba80700d..af5a5f8dc46 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/PaymentMethods.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/PaymentMethods/PaymentMethods.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import AddNewPaymentMethodModal from 'components/interfaces/Billing/Payment/AddNewPaymentMethodModal'
 import {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx
index 68c944eb4cf..080ad8e8767 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx
@@ -1,7 +1,7 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { includes, without } from 'lodash'
 import { useReducer, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useSendDowngradeFeedbackMutation } from 'data/feedback/exit-survey-send'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx
index d1c15cd00dd..0e170839755 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PaymentMethodSelection.tsx
@@ -1,7 +1,7 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import AddNewPaymentMethodModal from 'components/interfaces/Billing/Payment/AddNewPaymentMethodModal'
 import { useOrganizationPaymentMethodsQuery } from 'data/organizations/organization-payment-methods-query'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
index 044ae31e015..2bf7e2fa07a 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
@@ -5,7 +5,7 @@ import { ChevronRight, ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { billingPartnerLabel } from 'components/interfaces/Billing/Subscription/Subscription.utils'
 import Table from 'components/to-be-cleaned/Table'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/UpgradeModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/UpgradeModal.tsx
index 4af3d39798a..ad2e547f5d7 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/UpgradeModal.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/UpgradeModal.tsx
@@ -1,6 +1,6 @@
 import { includes, without } from 'lodash'
 import { useReducer, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useSendUpgradeFeedbackMutation } from 'data/feedback/upgrade-survey-send'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx
index ef0a0670fe6..806e8b91b3c 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { X as IconX } from 'lucide-react'
 import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx b/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx
index a3ebad6bd49..dc43694d716 100644
--- a/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Download } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import {
diff --git a/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx b/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx
index def97c46c18..9aa74921ba5 100644
--- a/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { Download } from 'lucide-react'
 import Link from 'next/link'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button } from 'ui'
 
 import {
diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
index b90465a14c1..6c409622f6d 100644
--- a/apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
+++ b/apps/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useOrganizationDeleteMutation } from 'data/organizations/organization-delete-mutation'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
index eac11057230..37fd61c2476 100644
--- a/apps/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
+++ b/apps/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import NoProjectsOnPaidOrgInfo from 'components/interfaces/Billing/NoProjectsOnPaidOrgInfo'
diff --git a/apps/studio/components/interfaces/Organization/IntegrationSettings/IntegrationSettings.tsx b/apps/studio/components/interfaces/Organization/IntegrationSettings/IntegrationSettings.tsx
index 2d185a1a0e3..0ca40f95c45 100644
--- a/apps/studio/components/interfaces/Organization/IntegrationSettings/IntegrationSettings.tsx
+++ b/apps/studio/components/interfaces/Organization/IntegrationSettings/IntegrationSettings.tsx
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useCallback } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { EmptyIntegrationConnection } from 'components/interfaces/Integrations/IntegrationPanels'
 import { Markdown } from 'components/interfaces/Markdown'
diff --git a/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker.tsx b/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker.tsx
index 1a3b423f313..09d3c006af2 100644
--- a/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker.tsx
+++ b/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import ProjectLinker from 'components/interfaces/Integrations/ProjectLinker'
 import { Markdown } from 'components/interfaces/Markdown'
diff --git a/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx b/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx
index 0dfc068f24c..3a5fd782d24 100644
--- a/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx
+++ b/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx
@@ -1,6 +1,6 @@
 import { keyBy } from 'lodash'
 import { useCallback, useMemo } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { ENV_VAR_RAW_KEYS } from 'components/interfaces/Integrations/Integrations-Vercel.constants'
diff --git a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
index f41ee2ba537..6b40196ebe6 100644
--- a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
+++ b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import dayjs from 'dayjs'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import InvoiceStatusBadge from 'components/interfaces/Billing/InvoiceStatusBadge'
 import { InvoiceStatus } from 'components/interfaces/Billing/Invoices.types'
diff --git a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
index 3d191b49f1a..7e8369073ce 100644
--- a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
+++ b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
@@ -5,7 +5,7 @@ import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import SpendCapModal from 'components/interfaces/Billing/SpendCapModal'
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx
index 59d65bea7d8..9b601826cc6 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx
@@ -1,4 +1,4 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useOAuthAppDeleteMutation } from 'data/oauth/oauth-app-delete-mutation'
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx
index ce2eabf2213..8eff6ac129d 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel/index.tsx
@@ -1,7 +1,7 @@
 import type { OAuthScope } from '@supabase/shared-types/out/constants'
 import Link from 'next/link'
 import { ChangeEvent, useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import {
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx
index b63fc5f6143..44d699c5b37 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Alert, IconLock, Modal } from 'ui'
 
 import { useAuthorizedAppRevokeMutation } from 'data/oauth/authorized-app-revoke-mutation'
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
index aecc6537e96..12521de5dc8 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
@@ -5,7 +5,7 @@ import { Check, ChevronsUpDown } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
index 5b4a25eaf9c..b4094c18936 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { MoreVertical, Trash } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
index 4588ac75de0..7779fdf6cf5 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
@@ -1,6 +1,6 @@
 import { Search } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import {
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesConfirmationModal.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesConfirmationModal.tsx
index 922b995f1f8..d5e6066708c 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesConfirmationModal.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/UpdateRolesPanel/UpdateRolesConfirmationModal.tsx
@@ -1,6 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { organizationKeys } from 'data/organization-members/keys'
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
index 5c4d67dbc88..8d16eb41212 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
@@ -1,7 +1,7 @@
 import { CheckSquare } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useOrganizationAcceptInvitationMutation } from 'data/organization-members/organization-invitation-accept-mutation'
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx
index 0b79aeff184..ccf88ec6f61 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entities.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { generateTypes } from 'data/projects/project-type-generation-query'
diff --git a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisorDisabledState.tsx b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisorDisabledState.tsx
index d1d87531c10..2298148eeb2 100644
--- a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisorDisabledState.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisorDisabledState.tsx
@@ -1,6 +1,6 @@
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
index 6accde06aae..750eec8032f 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
@@ -1,6 +1,6 @@
 import { Check, Lightbulb, Table2 } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { AccordionTrigger } from '@ui/components/shadcn/ui/accordion'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx
index 3ebc8ff3f66..569187d08cb 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx
@@ -2,7 +2,7 @@ import { InformationCircleIcon } from '@heroicons/react/16/solid'
 import { X } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx
index d874a9c8e92..fc5b93bbf5b 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx
@@ -1,7 +1,7 @@
 import { useTelemetryProps } from 'common'
 import { useRouter } from 'next/router'
 import { Dispatch, SetStateAction, useEffect, useRef } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { RoleImpersonationPopover } from 'components/interfaces/RoleImpersonationSelector'
 import { useProjectApiQuery } from 'data/config/project-api-query'
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/useRealtimeMessages.ts b/apps/studio/components/interfaces/Realtime/Inspector/useRealtimeMessages.ts
index 9f767eddc9f..fc785187645 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/useRealtimeMessages.ts
+++ b/apps/studio/components/interfaces/Realtime/Inspector/useRealtimeMessages.ts
@@ -5,13 +5,13 @@ import {
 } from '@supabase/supabase-js/dist/main/lib/constants'
 import { merge, sortBy, take } from 'lodash'
 import { Dispatch, SetStateAction, useCallback, useEffect, useReducer, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectApiQuery } from 'data/config/project-api-query'
 import { uuidv4 } from 'lib/helpers'
 import { EMPTY_ARR } from 'lib/void'
-import type { LogData } from './Messages.types'
 import { useRoleImpersonationStateSnapshot } from 'state/role-impersonation-state'
+import type { LogData } from './Messages.types'
 
 function reducer(
   state: LogData[],
diff --git a/apps/studio/components/interfaces/Reports/Reports.CreateReportModal.tsx b/apps/studio/components/interfaces/Reports/Reports.CreateReportModal.tsx
index 7fad81db09c..3ebd0cc902c 100644
--- a/apps/studio/components/interfaces/Reports/Reports.CreateReportModal.tsx
+++ b/apps/studio/components/interfaces/Reports/Reports.CreateReportModal.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useContentInsertMutation } from 'data/content/content-insert-mutation'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
diff --git a/apps/studio/components/interfaces/Reports/Reports.UpdateModal.tsx b/apps/studio/components/interfaces/Reports/Reports.UpdateModal.tsx
index 69320de83e8..817fc988dcc 100644
--- a/apps/studio/components/interfaces/Reports/Reports.UpdateModal.tsx
+++ b/apps/studio/components/interfaces/Reports/Reports.UpdateModal.tsx
@@ -1,4 +1,4 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { Content } from 'data/content/content-query'
diff --git a/apps/studio/components/interfaces/Reports/Reports.tsx b/apps/studio/components/interfaces/Reports/Reports.tsx
index ce8148c7960..5e68ba26e04 100644
--- a/apps/studio/components/interfaces/Reports/Reports.tsx
+++ b/apps/studio/components/interfaces/Reports/Reports.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import dayjs from 'dayjs'
 import { groupBy, isNull } from 'lodash'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
diff --git a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
index de31c53a70c..4c81a45d591 100644
--- a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Check, Code, Plus } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
index 8c4126117fd..29a1a86024f 100644
--- a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { RefreshCw, StopCircle } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import AlertError from 'components/ui/AlertError'
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
diff --git a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
index 08b46770939..9da778c21dd 100644
--- a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
@@ -1,18 +1,18 @@
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useSqlTitleGenerateMutation } from 'data/ai/sql-title-mutation'
+import { getContentById } from 'data/content/content-id-query'
+import { Snippet } from 'data/content/sql-folders-query'
 import type { SqlSnippet } from 'data/content/sql-snippets-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
+import { useFlag } from 'hooks/ui/useFlag'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { AiIconAnimation, Button, Form, Input, Modal } from 'ui'
 import { subscriptionHasHipaaAddon } from '../Billing/Subscription/Subscription.utils'
-import { Snippet } from 'data/content/sql-folders-query'
-import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { useFlag } from 'hooks/ui/useFlag'
-import { getContentById } from 'data/content/content-id-query'
 
 export interface RenameQueryModalProps {
   snippet?: SqlSnippet | Snippet
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
index 178c02b1dac..ff718bf0aec 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
@@ -5,7 +5,7 @@ import { Loader2 } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { format } from 'sql-formatter'
 
 import { useParams, useTelemetryProps } from 'common'
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx
index bf5881e97b2..6f93069c242 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { partition } from 'lodash'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams, useTelemetryProps } from 'common'
 import { SQL_TEMPLATES } from 'components/interfaces/SQLEditor/SQLEditor.queries'
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
index ca443424b84..15c15d9f364 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
@@ -1,21 +1,21 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { partition } from 'lodash'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams, useTelemetryProps } from 'common'
 import { SQL_TEMPLATES } from 'components/interfaces/SQLEditor/SQLEditor.queries'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import type { SqlSnippet } from 'data/content/sql-snippets-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useFlag } from 'hooks/ui/useFlag'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
 import Telemetry from 'lib/telemetry'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { createSqlSnippetSkeleton, createSqlSnippetSkeletonV2 } from '../SQLEditor.utils'
 import SQLCard from './SQLCard'
-import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { useFlag } from 'hooks/ui/useFlag'
 
 const SQLTemplates = () => {
   const router = useRouter()
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ResultsDropdown.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ResultsDropdown.tsx
index df702f82a97..73b9f725a4c 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ResultsDropdown.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ResultsDropdown.tsx
@@ -3,14 +3,16 @@ import { markdownTable } from 'markdown-table'
 import { useRouter } from 'next/router'
 import { useMemo, useRef } from 'react'
 import { CSVLink } from 'react-csv'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useTelemetryProps } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useFlag } from 'hooks/ui/useFlag'
 import { copyToClipboard } from 'lib/helpers'
 import Telemetry from 'lib/telemetry'
 import { ChevronDownIcon, Clipboard, Download } from 'lucide-react'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import {
   Button,
   DropdownMenu,
@@ -18,8 +20,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from 'ui'
-import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { useFlag } from 'hooks/ui/useFlag'
 
 export type ResultsDropdownProps = {
   id: string
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
index 939f49a82c6..e8cf80a34d6 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
@@ -10,17 +10,20 @@ import {
   Loader2,
   MoreVertical,
 } from 'lucide-react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { RoleImpersonationPopover } from 'components/interfaces/RoleImpersonationSelector'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import DatabaseSelector from 'components/ui/DatabaseSelector'
 import { Content, ContentData } from 'data/content/content-query'
 import { contentKeys } from 'data/content/keys'
+import { Snippet } from 'data/content/sql-folders-query'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
+import { useFlag } from 'hooks/ui/useFlag'
 import { IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { detectOS } from 'lib/helpers'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import {
   Button,
   DropdownMenu,
@@ -36,9 +39,6 @@ import {
   cn,
 } from 'ui'
 import SavingIndicator from './SavingIndicator'
-import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { useFlag } from 'hooks/ui/useFlag'
-import { Snippet } from 'data/content/sql-folders-query'
 
 const ROWS_PER_PAGE_OPTIONS = [
   { value: -1, label: 'No limit' },
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx
index 23f31192ffd..70331b64783 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx
@@ -1,18 +1,18 @@
 import { useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useContentUpsertMutation } from 'data/content/content-upsert-mutation'
 import { contentKeys } from 'data/content/keys'
+import { Snippet } from 'data/content/sql-folders-query'
+import { useFlag } from 'hooks/ui/useFlag'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_, Tabs_Shadcn_ } from 'ui'
 import { ChartConfig } from './ChartConfig'
 import ResultsDropdown from './ResultsDropdown'
 import UtilityActions from './UtilityActions'
 import UtilityTabResults from './UtilityTabResults'
-import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { useFlag } from 'hooks/ui/useFlag'
-import { Snippet } from 'data/content/sql-folders-query'
 
 export type UtilityPanelProps = {
   id: string
diff --git a/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx b/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx
index d07b21ce523..038c8878f33 100644
--- a/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx
+++ b/apps/studio/components/interfaces/Settings/API/HardenAPIModal.tsx
@@ -1,5 +1,5 @@
 import { Check, ChevronDown, ExternalLink } from 'lucide-react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import InformationBox from 'components/ui/InformationBox'
diff --git a/apps/studio/components/interfaces/Settings/API/JWTSettings.tsx b/apps/studio/components/interfaces/Settings/API/JWTSettings.tsx
index 23901d6a896..b270feccc1d 100644
--- a/apps/studio/components/interfaces/Settings/API/JWTSettings.tsx
+++ b/apps/studio/components/interfaces/Settings/API/JWTSettings.tsx
@@ -15,7 +15,7 @@ import {
   RefreshCw,
 } from 'lucide-react'
 import { Dispatch, SetStateAction, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
diff --git a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
index 84ac768508c..ecea02f900d 100644
--- a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
+++ b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
@@ -4,7 +4,7 @@ import { indexOf } from 'lodash'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { useParams } from 'common'
@@ -21,6 +21,7 @@ import { useProjectPostgrestConfigUpdateMutation } from 'data/config/project-pos
 import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
 import { useSchemasQuery } from 'data/database/schemas-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { ExternalLink, Lock } from 'lucide-react'
 import {
   Admonition,
   AlertDescription_Shadcn_,
@@ -37,8 +38,8 @@ import {
   Separator,
   Skeleton,
   Switch,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import {
   MultiSelector,
@@ -48,7 +49,6 @@ import {
   MultiSelectorList,
   MultiSelectorTrigger,
 } from 'ui-patterns/multi-select'
-import { ExternalLink, Lock } from 'lucide-react'
 import { HardenAPIModal } from './HardenAPIModal'
 
 const formSchema = z
diff --git a/apps/studio/components/interfaces/Settings/API/ServiceList.tsx b/apps/studio/components/interfaces/Settings/API/ServiceList.tsx
index 601c58f4654..2f338814316 100644
--- a/apps/studio/components/interfaces/Settings/API/ServiceList.tsx
+++ b/apps/studio/components/interfaces/Settings/API/ServiceList.tsx
@@ -2,7 +2,7 @@ import { JwtSecretUpdateError, JwtSecretUpdateStatus } from '@supabase/shared-ty
 import { useQueryClient } from '@tanstack/react-query'
 import { AlertCircle } from 'lucide-react'
 import { useEffect, useRef } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
index 5e2f672a064..da8a1ee65d7 100644
--- a/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx
@@ -4,7 +4,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import {
diff --git a/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
index 8a30afce75e..0aaaac7df67 100644
--- a/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
diff --git a/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx
index b15ba45fdd2..44e9daff21d 100644
--- a/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
diff --git a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
index 1cd678fc680..0cbc7c7f111 100644
--- a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { subscriptionHasHipaaAddon } from 'components/interfaces/Billing/Subscription/Subscription.utils'
diff --git a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
index 27e174539f7..2c942355681 100644
--- a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { ExternalLink, Globe } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
index dcf98904feb..0b9b82be4f3 100644
--- a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { capitalize } from 'lodash'
 import { Fragment, useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import z from 'zod'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ConfirmDisableReadOnlyModal.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ConfirmDisableReadOnlyModal.tsx
index 70ba0437937..d7deafb33de 100644
--- a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ConfirmDisableReadOnlyModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ConfirmDisableReadOnlyModal.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Modal } from 'ui'
 
 import { useDisableReadOnlyModeMutation } from 'data/config/project-temp-disable-read-only-mutation'
diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
index 3180ce76dc2..8fa10f4f70a 100644
--- a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'common'
 import generator from 'generate-password-browser'
 import { debounce } from 'lodash'
 import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button, Input, Modal } from 'ui'
 
 import {
diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
index 9cf024d33f0..ae3d6a4954e 100644
--- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
@@ -3,8 +3,7 @@ import dayjs from 'dayjs'
 import { ExternalLink, Info } from 'lucide-react'
 import Link from 'next/link'
 import { SetStateAction } from 'react'
-import toast from 'react-hot-toast'
-import { number, object } from 'yup'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx
index 8592d2656e0..cbd8a637f23 100644
--- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfigurationModal.tsx
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { ExternalLink, Info } from 'lucide-react'
 import Link from 'next/link'
 import { SetStateAction } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { number, object } from 'yup'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
index b0bfcabe7a4..c30927910f1 100644
--- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/AddRestrictionModal.tsx
@@ -1,9 +1,10 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { useParams } from 'common'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button, Form, IconHelpCircle, Input, Modal } from 'ui'
 
 import InformationBox from 'components/ui/InformationBox'
+import { useNetworkRestrictionsQuery } from 'data/network-restrictions/network-restrictions-query'
 import { useNetworkRestrictionsApplyMutation } from 'data/network-restrictions/network-retrictions-apply-mutation'
 import {
   checkIfPrivate,
@@ -11,7 +12,6 @@ import {
   isValidAddress,
   normalize,
 } from './NetworkRestrictions.utils'
-import { useNetworkRestrictionsQuery } from 'data/network-restrictions/network-restrictions-query'
 
 const IPV4_MAX_CIDR_BLOCK_SIZE = 32
 const IPV6_MAX_CIDR_BLOCK_SIZE = 128
diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
index 1c9fbd135a7..46ad3225e8e 100644
--- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Alert, Button, Modal } from 'ui'
 
 import { useNetworkRestrictionsQuery } from 'data/network-restrictions/network-restrictions-query'
diff --git a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
index 19da22cbf4b..940475f0039 100644
--- a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Download, ExternalLink, Loader2 } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx
index dd81e8f6e4f..9d9579a102f 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainActivate.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import Panel from 'components/ui/Panel'
 import { useProjectApiQuery } from 'data/config/project-api-query'
@@ -15,7 +15,6 @@ import {
   Button,
   IconAlertCircle,
   IconExternalLink,
-  Modal,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
index 1a2d7f2d5ed..9366daf01cb 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import Panel from 'components/ui/Panel'
 import { useCustomDomainDeleteMutation } from 'data/custom-domains/custom-domains-delete-mutation'
diff --git a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectModal.tsx b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectModal.tsx
index 956d7706d04..541cc223596 100644
--- a/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectModal.tsx
+++ b/apps/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectModal.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { CANCELLATION_REASONS } from 'components/interfaces/Billing/Billing.constants'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Settings/General/General.tsx b/apps/studio/components/interfaces/Settings/General/General.tsx
index 546e772d197..b441fcdb3e8 100644
--- a/apps/studio/components/interfaces/Settings/General/General.tsx
+++ b/apps/studio/components/interfaces/Settings/General/General.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { FormActions } from 'components/ui/Forms/FormActions'
diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
index dec75ff2d4c..35c2723a3ed 100644
--- a/apps/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
@@ -3,7 +3,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { Pause } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import {
   useIsProjectActive,
diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
index b6bad341c29..ed5daf18d15 100644
--- a/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
+++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
@@ -3,7 +3,7 @@ import { AlertCircle, AlertTriangle } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectUpgradeEligibilityQuery } from 'data/config/project-upgrade-eligibility-query'
diff --git a/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx b/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
index f1e662f9611..cf853511973 100644
--- a/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import {
   useIsProjectActive,
diff --git a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
index edeac6fc017..1b03fd862a3 100644
--- a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx
index 563c60a7be5..05e99ed2e32 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DeployNewReplicaPanel.tsx
@@ -1,7 +1,7 @@
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useEnablePhysicalBackupsMutation } from 'data/database/enable-physical-backups-mutation'
@@ -22,8 +22,8 @@ import {
   Button,
   Listbox,
   SidePanel,
+  WarningIcon,
 } from 'ui'
-import { WarningIcon } from 'ui'
 import { AVAILABLE_REPLICA_REGIONS } from './InstanceConfiguration.constants'
 
 // [Joshen] FYI this is purely for AWS only, need to update to support Fly eventually
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropAllReplicasConfirmationModal.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropAllReplicasConfirmationModal.tsx
index 91d48b363e3..7b2fc820ca1 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropAllReplicasConfirmationModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropAllReplicasConfirmationModal.tsx
@@ -1,5 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { replicaKeys } from 'data/read-replicas/keys'
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal.tsx
index 965e5d9485b..fb5662247d8 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal.tsx
@@ -1,4 +1,4 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useReadReplicaRemoveMutation } from 'data/read-replicas/replica-remove-mutation'
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/EnablePhysicalBackupsModal.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/EnablePhysicalBackupsModal.tsx
index 874734aea02..745f714f27d 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/EnablePhysicalBackupsModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/EnablePhysicalBackupsModal.tsx
@@ -1,6 +1,6 @@
 import { ExternalLink, Loader2 } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/RestartReplicaConfirmationModal.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/RestartReplicaConfirmationModal.tsx
index 8acc83bb4bb..b068c1789bc 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/RestartReplicaConfirmationModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/RestartReplicaConfirmationModal.tsx
@@ -1,12 +1,12 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
+import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'common'
 import { useProjectRestartMutation } from 'data/projects/project-restart-mutation'
+import { replicaKeys } from 'data/read-replicas/keys'
 import { Database } from 'data/read-replicas/replicas-query'
 import { formatDatabaseID } from 'data/read-replicas/replicas.utils'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import { useParams } from 'common'
-import { useQueryClient } from '@tanstack/react-query'
-import { replicaKeys } from 'data/read-replicas/keys'
 import { REPLICA_STATUS } from './InstanceConfiguration.constants'
 
 interface RestartReplicaConfirmationModalProps {
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
index 070a5720635..fb444c7d535 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GitHubIntegrationConnectionForm.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { ChevronDown, GitBranch, RotateCcw, Shield } from 'lucide-react'
 import { useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { PermissionAction } from '@supabase/shared-types/out/constants'
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
index a69e76fb411..55cf42d8c07 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useCallback } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { IntegrationConnectionItem } from 'components/interfaces/Integrations/IntegrationConnection'
diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
index bd6d8821ace..37fd8a0e3b7 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { FormActions } from 'components/ui/Forms/FormActions'
diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
index d4bf85195fd..421d2590f4e 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
@@ -1,7 +1,7 @@
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useCallback, useMemo } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { IntegrationConnectionItem } from 'components/interfaces/Integrations/IntegrationConnection'
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx b/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx
index 4161e1f84d7..163d60b401f 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogSelection.tsx
@@ -1,6 +1,6 @@
 import { MousePointerClick, X } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Loading } from 'components/ui/Loading'
 import { useWarehouseQueryQuery } from 'data/analytics/warehouse-query'
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
index c1d2416f0c2..4339754b20c 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -4,7 +4,7 @@ import { isEqual } from 'lodash'
 import { ChevronDown, Clipboard, Download, Eye, EyeOff, Play } from 'lucide-react'
 import { Key, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import DataGrid, { Column, RenderRowProps, Row } from 'react-data-grid'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import CSVButton from 'components/ui/CSVButton'
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
index 0d58c9b699c..b1234aca32c 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import Table from 'components/to-be-cleaned/Table'
diff --git a/apps/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx b/apps/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx
index 501c7196863..701bfc19b3a 100644
--- a/apps/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx
+++ b/apps/studio/components/interfaces/Settings/Vault/Keys/EncryptionKeysManagement.tsx
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { sortBy } from 'lodash'
 import Link from 'next/link'
 import { Fragment, useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/Settings/Vault/Secrets/AddNewSecretModal.tsx b/apps/studio/components/interfaces/Settings/Vault/Secrets/AddNewSecretModal.tsx
index 1aaf7967d53..17c7123c8c5 100644
--- a/apps/studio/components/interfaces/Settings/Vault/Secrets/AddNewSecretModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Vault/Secrets/AddNewSecretModal.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import InformationBox from 'components/ui/InformationBox'
diff --git a/apps/studio/components/interfaces/Settings/Vault/Secrets/DeleteSecretModal.tsx b/apps/studio/components/interfaces/Settings/Vault/Secrets/DeleteSecretModal.tsx
index d9e843c31f7..3ccc854b739 100644
--- a/apps/studio/components/interfaces/Settings/Vault/Secrets/DeleteSecretModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Vault/Secrets/DeleteSecretModal.tsx
@@ -1,4 +1,4 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useVaultSecretDeleteMutation } from 'data/vault/vault-secret-delete-mutation'
diff --git a/apps/studio/components/interfaces/Settings/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Settings/Vault/Secrets/EditSecretModal.tsx
index cfd5355d51d..a238e9f8da5 100644
--- a/apps/studio/components/interfaces/Settings/Vault/Secrets/EditSecretModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Vault/Secrets/EditSecretModal.tsx
@@ -1,6 +1,6 @@
 import { isEmpty } from 'lodash'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
diff --git a/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx b/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
index c8f04456053..a29cedb8ed1 100644
--- a/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
+++ b/apps/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/SignIn/ForgotPasswordForm.tsx b/apps/studio/components/interfaces/SignIn/ForgotPasswordForm.tsx
index 0c5630b9007..176f4112373 100644
--- a/apps/studio/components/interfaces/SignIn/ForgotPasswordForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/ForgotPasswordForm.tsx
@@ -1,7 +1,7 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { useRouter } from 'next/router'
 import { useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { object, string } from 'yup'
 
 import { useResetPasswordMutation } from 'data/misc/reset-password-mutation'
diff --git a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
index 0f9ce861fda..bc237ef926b 100644
--- a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/nextjs'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { auth } from 'lib/gotrue'
 import { passwordSchema } from 'lib/schemas'
diff --git a/apps/studio/components/interfaces/SignIn/SignInForm.tsx b/apps/studio/components/interfaces/SignIn/SignInForm.tsx
index 57b537735f2..1b72d45fa83 100644
--- a/apps/studio/components/interfaces/SignIn/SignInForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInForm.tsx
@@ -5,7 +5,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { object, string } from 'yup'
 
 import { getMfaAuthenticatorAssuranceLevel } from 'data/profile/mfa-authenticator-assurance-level-query'
diff --git a/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx b/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
index 1ccb16a750b..5a31e6baf26 100644
--- a/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
@@ -2,7 +2,7 @@ import HCaptcha from '@hcaptcha/react-hcaptcha'
 import * as Sentry from '@sentry/nextjs'
 import { useQueryClient } from '@tanstack/react-query'
 import { useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { object, string } from 'yup'
 
 import { BASE_PATH } from 'lib/constants'
diff --git a/apps/studio/components/interfaces/SignIn/SignInWithGitHub.tsx b/apps/studio/components/interfaces/SignIn/SignInWithGitHub.tsx
index 26ef1f02bb4..b21631e82c5 100644
--- a/apps/studio/components/interfaces/SignIn/SignInWithGitHub.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInWithGitHub.tsx
@@ -1,7 +1,7 @@
+import * as Sentry from '@sentry/nextjs'
 import { Github } from 'lucide-react'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
-import * as Sentry from '@sentry/nextjs'
+import { toast } from 'sonner'
 
 import { BASE_PATH } from 'lib/constants'
 import { auth, buildPathWithParams } from 'lib/gotrue'
diff --git a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
index 3e593e5dcca..8f427e9f78d 100644
--- a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
@@ -1,7 +1,7 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { CheckCircle, Eye, EyeOff } from 'lucide-react'
 import { useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as yup from 'yup'
 
 import { useSignUpMutation } from 'data/misc/signup-mutation'
diff --git a/apps/studio/components/interfaces/SqlGenerator/SqlOutputActions.tsx b/apps/studio/components/interfaces/SqlGenerator/SqlOutputActions.tsx
index 5daf0680a69..a2200f86afc 100644
--- a/apps/studio/components/interfaces/SqlGenerator/SqlOutputActions.tsx
+++ b/apps/studio/components/interfaces/SqlGenerator/SqlOutputActions.tsx
@@ -3,7 +3,7 @@ import { codeBlock, stripIndent } from 'common-tags'
 import { Check, Clipboard, Save } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 import CopyToClipboard from 'react-copy-to-clipboard'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { createSqlSnippetSkeleton } from 'components/interfaces/SQLEditor/SQLEditor.utils'
diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
index de28da34603..548b0efd267 100644
--- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { StorageSizeUnits } from 'components/to-be-cleaned/Storage/StorageSettings/StorageSettings.constants'
diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
index a49687c10c7..e3f639d1212 100644
--- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   Alert,
   Button,
diff --git a/apps/studio/components/interfaces/Support/SupportForm.tsx b/apps/studio/components/interfaces/Support/SupportForm.tsx
index aa86070ae65..482943c2a1b 100644
--- a/apps/studio/components/interfaces/Support/SupportForm.tsx
+++ b/apps/studio/components/interfaces/Support/SupportForm.tsx
@@ -17,7 +17,7 @@ import {
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ChangeEvent, useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import {
   DocsSearchResultType as PageType,
diff --git a/apps/studio/components/interfaces/TableGridEditor/DeleteConfirmationDialogs.tsx b/apps/studio/components/interfaces/TableGridEditor/DeleteConfirmationDialogs.tsx
index e7e4bcc2d05..45c99ca76cb 100644
--- a/apps/studio/components/interfaces/TableGridEditor/DeleteConfirmationDialogs.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/DeleteConfirmationDialogs.tsx
@@ -1,6 +1,6 @@
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { formatFilterURLParams } from 'components/grid/SupabaseGrid.utils'
 import type { SupaRow } from 'components/grid/types'
diff --git a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
index f03305771bd..ff99e95d37d 100644
--- a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -5,7 +5,7 @@ import { useParams } from 'common'
 import { Lock, MousePointer2, PlusCircle, Unlock } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { getEntityLintDetails } from 'components/interfaces/TableGridEditor/TableEntity.utils'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
index 926b1c685e0..572934489b4 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
@@ -2,7 +2,7 @@ import * as Tooltip from '@radix-ui/react-tooltip'
 import { PostgresTable } from '@supabase/postgres-meta'
 import { AlignLeft } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import TwoOptionToggle from 'components/ui/TwoOptionToggle'
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx
index cb7b6b926c7..9670b580c30 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx
@@ -2,8 +2,8 @@ import { Editor } from '@monaco-editor/react'
 import { PostgresTable } from '@supabase/postgres-meta'
 import { Loader } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
 import remarkGfm from 'remark-gfm'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SchemaEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SchemaEditor.tsx
index d072fe906c4..72941a1c9b1 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SchemaEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SchemaEditor.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
 import { Input, SidePanel } from 'ui'
-import toast from 'react-hot-toast'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useSchemaCreateMutation } from 'data/database/schema-create-mutation'
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
index e0b3420446e..338941dcd64 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
@@ -2,10 +2,9 @@ import type { PostgresColumn, PostgresTable } from '@supabase/postgres-meta'
 import { useQueryClient } from '@tanstack/react-query'
 import { isEmpty, isUndefined, noop } from 'lodash'
 import { useState } from 'react'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { ToastLoader } from 'components/ui/ToastLoader'
 import { useDatabasePublicationCreateMutation } from 'data/database-publications/database-publications-create-mutation'
 import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query'
 import { useDatabasePublicationUpdateMutation } from 'data/database-publications/database-publications-update-mutation'
@@ -21,6 +20,7 @@ import { useUrlState } from 'hooks/ui/useUrlState'
 import { useGetImpersonatedRole } from 'state/role-impersonation-state'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 import type { Dictionary } from 'types'
+import { SonnerProgress } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import ColumnEditor from './ColumnEditor/ColumnEditor'
 import type { ForeignKey } from './ForeignKeySelector/ForeignKeySelector.types'
@@ -513,7 +513,7 @@ const SidePanelEditor = ({
         selectedHeaders,
         (progress: number) => {
           toast.loading(
-            ,
@@ -535,7 +535,7 @@ const SidePanelEditor = ({
         selectedHeaders,
         (progress: number) => {
           toast.loading(
-            
-        ) as any,
+      return toast('Unable to update row as table has no primary keys', {
         description: (
-          
-        ),
-        action: (
-          

-            
+          

+            

+              Add a primary key column to your table first to serve as a unique identifier for each
+              row before updating or deleting the row.
+            

+            
           

         ),
       })
diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx
index 885cee24eed..1edeb696a37 100644
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx
+++ b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingModal.tsx
@@ -4,7 +4,7 @@ import { last } from 'lodash'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { PermissionAction } from '@supabase/shared-types/out/constants'
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index 3e8b036772c..1f43e731be2 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -3,7 +3,7 @@ import { Camera, Image as ImageIcon, Upload, X } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ChangeEvent, useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   Button,
   DropdownMenu,
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx
index 32e4decbc16..0920ffe7130 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopoverV2/NotificationsPopover.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { useMemo, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   Button,
   PopoverContent_Shadcn_,
@@ -12,7 +12,6 @@ import {
 } from 'ui'
 
 import AlertError from 'components/ui/AlertError'
-import { CriticalIcon, WarningIcon } from 'ui'
 import InfiniteList from 'components/ui/InfiniteList'
 import ShimmeringLoader, { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useNotificationsArchiveAllMutation } from 'data/notifications/notifications-v2-archive-all-mutation'
@@ -21,10 +20,11 @@ import { useNotificationsSummaryQuery } from 'data/notifications/notifications-v
 import { useNotificationsV2UpdateMutation } from 'data/notifications/notifications-v2-update-mutation'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
+import { ArchiveIcon, InboxIcon } from 'lucide-react'
 import { useNotificationsStateSnapshot } from 'state/notifications'
+import { CriticalIcon, WarningIcon } from 'ui'
 import NotificationRow from './NotificationRow'
 import { NotificationsFilter } from './NotificationsFilter'
-import { ArchiveIcon, InboxIcon } from 'lucide-react'
 
 const NotificationsPopoverV2 = () => {
   const [open, setOpen] = useState(false)
diff --git a/apps/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx b/apps/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
index 7c8a7055218..a0f59a33192 100644
--- a/apps/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { Download, PauseCircle } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import AlertError from 'components/ui/AlertError'
@@ -28,10 +28,10 @@ import {
   TooltipContent_Shadcn_,
   TooltipTrigger_Shadcn_,
   Tooltip_Shadcn_,
+  WarningIcon,
 } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns'
 import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog'
-import { WarningIcon } from 'ui'
 import { useProjectContext } from './ProjectContext'
 import { RestorePaidPlanProjectNotice } from './RestorePaidPlanProjectNotice'
 
diff --git a/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx b/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx
index 2bfdd07b332..0fe62e0accf 100644
--- a/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx
+++ b/apps/studio/components/layouts/ReportsLayout/ReportsMenu.tsx
@@ -3,7 +3,7 @@ import { Plus } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { CreateReportModal } from 'components/interfaces/Reports/Reports.CreateReportModal'
diff --git a/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx
index e648b9df0a6..def6119d3eb 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/QueryItem.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
 import { noop } from 'lodash'
 import { Eye, Unlock } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import DownloadSnippetModal from 'components/interfaces/SQLEditor/DownloadSnippetModal'
 import RenameQueryModal from 'components/interfaces/SQLEditor/RenameQueryModal'
diff --git a/apps/studio/components/layouts/SQLEditorLayout/QueryItemActions.tsx b/apps/studio/components/layouts/SQLEditorLayout/QueryItemActions.tsx
index 53d1356f0c7..84d2e95a917 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/QueryItemActions.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/QueryItemActions.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { IS_PLATFORM, useParams } from 'common'
 import { Copy, Download, Edit, MoreHorizontal, Share, Trash } from 'lucide-react'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   Button,
   DropdownMenu,
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
index b87eb6ba54b..112442d002a 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { FilePlus, FolderPlus, Plus } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { untitledSnippetTitle } from 'components/interfaces/SQLEditor/SQLEditor.constants'
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx
index b03c992a2cf..d600c58e3f1 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx
@@ -1,23 +1,26 @@
 import { ChevronRight, Eye, EyeOffIcon, Heart, Unlock } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import DownloadSnippetModal from 'components/interfaces/SQLEditor/DownloadSnippetModal'
 import { MoveQueryModal } from 'components/interfaces/SQLEditor/MoveQueryModal'
 import RenameQueryModal from 'components/interfaces/SQLEditor/RenameQueryModal'
+import { untitledSnippetTitle } from 'components/interfaces/SQLEditor/SQLEditor.constants'
 import { createSqlSnippetSkeletonV2 } from 'components/interfaces/SQLEditor/SQLEditor.utils'
+import { useContentCountQuery } from 'data/content/content-count-query'
 import { useContentDeleteMutation } from 'data/content/content-delete-mutation'
 import { getContentById } from 'data/content/content-id-query'
 import { useSQLSnippetFoldersDeleteMutation } from 'data/content/sql-folders-delete-mutation'
 import {
-  getSQLSnippetFolders,
   Snippet,
   SnippetDetail,
   SnippetFolder,
+  getSQLSnippetFolders,
   useSQLSnippetFoldersQuery,
 } from 'data/content/sql-folders-query'
+import { useSqlSnippetsQuery } from 'data/content/sql-snippets-query'
 import { useLocalStorage } from 'hooks/misc/useLocalStorage'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import { useProfile } from 'lib/profile'
@@ -42,9 +45,6 @@ import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { ROOT_NODE, formatFolderResponseForTreeView } from './SQLEditorNav.utils'
 import { SQLEditorTreeViewItem } from './SQLEditorTreeViewItem'
-import { untitledSnippetTitle } from 'components/interfaces/SQLEditor/SQLEditor.constants'
-import { useSqlSnippetsQuery } from 'data/content/sql-snippets-query'
-import { useContentCountQuery } from 'data/content/content-count-query'
 
 interface SQLEditorNavProps {
   searchText: string
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
index 214020bd91b..d8b728746e2 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
@@ -3,7 +3,7 @@ import { Copy, Download, Edit, ExternalLink, Lock, Move, Plus, Share, Trash } fr
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { IS_PLATFORM } from 'common'
 import { useParams } from 'common/hooks/useParams'
diff --git a/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx b/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx
index 3a2cfe239f1..aa97b8fa2b8 100644
--- a/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx
+++ b/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { ReactNode, useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { AutoApiService, useProjectApiQuery } from 'data/config/project-api-query'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index 42dba9588a7..3edcf1ad88d 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -13,7 +13,7 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 import Papa from 'papaparse'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { IS_PLATFORM } from 'common'
 import {
diff --git a/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx b/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx
index 3f0f88bc4fc..70ec0ddb976 100644
--- a/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/DeleteBucketModal.tsx
@@ -1,14 +1,14 @@
 import { useParams } from 'common'
 import { get as _get, find } from 'lodash'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useDatabasePolicyDeleteMutation } from 'data/database-policies/database-policy-delete-mutation'
 import { useBucketDeleteMutation } from 'data/storage/bucket-delete-mutation'
 import { Bucket, useBucketsQuery } from 'data/storage/buckets-query'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
 import { formatPoliciesForStorage } from './Storage.utils'
 
 export interface DeleteBucketModalProps {
diff --git a/apps/studio/components/to-be-cleaned/Storage/EmptyBucketModal.tsx b/apps/studio/components/to-be-cleaned/Storage/EmptyBucketModal.tsx
index 4ea1860f3fe..7c125baa58f 100644
--- a/apps/studio/components/to-be-cleaned/Storage/EmptyBucketModal.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/EmptyBucketModal.tsx
@@ -1,17 +1,10 @@
 import { useParams } from 'common'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { useBucketEmptyMutation } from 'data/storage/bucket-empty-mutation'
 import type { Bucket } from 'data/storage/buckets-query'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
-import {
-  AlertDescription_Shadcn_,
-  AlertTitle_Shadcn_,
-  Alert_Shadcn_,
-  IconAlertTriangle,
-  Modal,
-} from 'ui'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 export interface EmptyBucketModalProps {
   visible: boolean
diff --git a/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.utils.ts b/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.utils.ts
index e6e3af3eb8e..18df10a550d 100644
--- a/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.utils.ts
+++ b/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/StorageExplorer.utils.ts
@@ -1,5 +1,5 @@
 import { copyToClipboard } from 'lib/helpers'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { StorageItem, StorageItemWithColumn } from '../Storage.types'
 
 export const copyPathToFolder = (openedFolders: StorageItem[], item: StorageItemWithColumn) => {
diff --git a/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/useCopyUrl.tsx b/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/useCopyUrl.tsx
index fa16c71a05e..925eea0cfdf 100644
--- a/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/useCopyUrl.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/StorageExplorer/useCopyUrl.tsx
@@ -1,8 +1,9 @@
+import { toast } from 'sonner'
+
 import { useProjectSettingsQuery } from 'data/config/project-settings-query'
 import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
 import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants/infrastructure'
 import { copyToClipboard } from 'lib/helpers'
-import toast from 'react-hot-toast'
 
 export const useCopyUrl = (ref: string) => {
   const { data: customDomainData } = useCustomDomainsQuery({ projectRef: ref })
diff --git a/apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.tsx b/apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.tsx
index ffe137510dd..436327f5b1a 100644
--- a/apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePolicies.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'common'
 import { filter, find, get, isEmpty } from 'lodash'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { IconLoader } from 'ui'
 
 import PolicyEditorModal from 'components/interfaces/Auth/Policies/PolicyEditorModal'
diff --git a/apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.tsx b/apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.tsx
index 399bc36653e..490c41782dc 100644
--- a/apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.tsx
@@ -1,6 +1,6 @@
 import { noop, pull } from 'lodash'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { POLICY_MODAL_VIEWS } from 'components/interfaces/Auth/Policies/Policies.constants'
 import PolicySelection from 'components/interfaces/Auth/Policies/PolicySelection'
diff --git a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/RevokeCredentialModal.tsx b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/RevokeCredentialModal.tsx
index c5ff7113090..2d775349fc5 100644
--- a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/RevokeCredentialModal.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/RevokeCredentialModal.tsx
@@ -1,4 +1,4 @@
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useS3AccessKeyDeleteMutation } from 'data/storage/s3-access-key-delete-mutation'
diff --git a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
index d89d3131790..85a659af2a1 100644
--- a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Clock } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { useParams } from 'common'
diff --git a/apps/studio/components/ui/ToastLoader.tsx b/apps/studio/components/ui/ToastLoader.tsx
deleted file mode 100644
index 1e0a96537cd..00000000000
--- a/apps/studio/components/ui/ToastLoader.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// [Joshen] Just FYI eventually we're going to move to use toasts
-// from the UI library, but this is a transition to move everything to
-// react-hot-toast while we're trying to deprecate mobx entirely
-
-import { PropsWithChildren } from 'react'
-
-import SparkBar from './SparkBar'
-
-interface ToastLoaderProps {
-  progress: number
-  message: string
-  labelTopOverride?: string
-}
-
-export const ToastLoader = ({
-  progress,
-  message,
-  labelTopOverride,
-  children,
-}: PropsWithChildren) => {
-  return (
-    

-      
-      {children}
-    

-  )
-}
diff --git a/apps/studio/data/__templates/resource-update-mutation.ts b/apps/studio/data/__templates/resource-update-mutation.ts
index ae277f09c54..0b8f26ff997 100644
--- a/apps/studio/data/__templates/resource-update-mutation.ts
+++ b/apps/studio/data/__templates/resource-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/access-tokens/access-tokens-create-mutation.ts b/apps/studio/data/access-tokens/access-tokens-create-mutation.ts
index 6afa1a4d01c..efc61f78e8b 100644
--- a/apps/studio/data/access-tokens/access-tokens-create-mutation.ts
+++ b/apps/studio/data/access-tokens/access-tokens-create-mutation.ts
@@ -1,7 +1,7 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
 import { isResponseOk, post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
+import { toast } from 'sonner'
 import type { ResponseError } from 'types'
 import type { AccessToken } from './access-tokens-query'
 import { accessTokenKeys } from './keys'
diff --git a/apps/studio/data/access-tokens/access-tokens-delete-mutation.ts b/apps/studio/data/access-tokens/access-tokens-delete-mutation.ts
index 84e7047ecad..b6fc3c02e96 100644
--- a/apps/studio/data/access-tokens/access-tokens-delete-mutation.ts
+++ b/apps/studio/data/access-tokens/access-tokens-delete-mutation.ts
@@ -1,7 +1,7 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
 import { delete_, isResponseOk } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
+import { toast } from 'sonner'
 import type { ResponseError } from 'types'
 import { accessTokenKeys } from './keys'
 
diff --git a/apps/studio/data/ai/sql-debug-mutation.ts b/apps/studio/data/ai/sql-debug-mutation.ts
index 32f3a462704..4c9b6c92fe2 100644
--- a/apps/studio/data/ai/sql-debug-mutation.ts
+++ b/apps/studio/data/ai/sql-debug-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { isResponseOk, post } from 'lib/common/fetch'
 import { BASE_PATH } from 'lib/constants'
diff --git a/apps/studio/data/ai/sql-title-mutation.ts b/apps/studio/data/ai/sql-title-mutation.ts
index 7306ec2df7a..eead40ac671 100644
--- a/apps/studio/data/ai/sql-title-mutation.ts
+++ b/apps/studio/data/ai/sql-title-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { isResponseOk, post } from 'lib/common/fetch'
 import { BASE_PATH } from 'lib/constants'
diff --git a/apps/studio/data/analytics/warehouse-access-tokens-create-mutation.ts b/apps/studio/data/analytics/warehouse-access-tokens-create-mutation.ts
index b74f6ba139b..417c69380fc 100644
--- a/apps/studio/data/analytics/warehouse-access-tokens-create-mutation.ts
+++ b/apps/studio/data/analytics/warehouse-access-tokens-create-mutation.ts
@@ -1,8 +1,8 @@
 import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react-query'
-import { analyticsKeys } from './keys'
 import { handleError, post } from 'data/fetchers'
+import { toast } from 'sonner'
 import { ResponseError } from 'types'
-import toast from 'react-hot-toast'
+import { analyticsKeys } from './keys'
 
 type WarehouseAccessTokenCreateVariables = {
   ref: string
diff --git a/apps/studio/data/analytics/warehouse-access-tokens-delete-mutation.ts b/apps/studio/data/analytics/warehouse-access-tokens-delete-mutation.ts
index 2d931a80037..c71bf4a6068 100644
--- a/apps/studio/data/analytics/warehouse-access-tokens-delete-mutation.ts
+++ b/apps/studio/data/analytics/warehouse-access-tokens-delete-mutation.ts
@@ -1,6 +1,6 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
-import { handleError, del } from 'data/fetchers'
+import { del, handleError } from 'data/fetchers'
+import { toast } from 'sonner'
 import type { ResponseError } from 'types'
 import { analyticsKeys } from './keys'
 
diff --git a/apps/studio/data/analytics/warehouse-collections-create-mutation.ts b/apps/studio/data/analytics/warehouse-collections-create-mutation.ts
index c1cefea73ca..3aa33a0edb7 100644
--- a/apps/studio/data/analytics/warehouse-collections-create-mutation.ts
+++ b/apps/studio/data/analytics/warehouse-collections-create-mutation.ts
@@ -1,6 +1,6 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
 import { handleError, post } from 'data/fetchers'
+import { toast } from 'sonner'
 import type { ResponseError } from 'types'
 import { analyticsKeys } from './keys'
 
diff --git a/apps/studio/data/analytics/warehouse-collections-delete-mutation.ts b/apps/studio/data/analytics/warehouse-collections-delete-mutation.ts
index 1420074960a..376e5f378f3 100644
--- a/apps/studio/data/analytics/warehouse-collections-delete-mutation.ts
+++ b/apps/studio/data/analytics/warehouse-collections-delete-mutation.ts
@@ -1,7 +1,7 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
-import { handleError, del } from 'data/fetchers'
+import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
 import { analyticsKeys } from './keys'
 
diff --git a/apps/studio/data/analytics/warehouse-collections-update-mutation.ts b/apps/studio/data/analytics/warehouse-collections-update-mutation.ts
index 8c85f85e162..f570d92567e 100644
--- a/apps/studio/data/analytics/warehouse-collections-update-mutation.ts
+++ b/apps/studio/data/analytics/warehouse-collections-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/api-authorization/api-authorization-approve-mutation.ts b/apps/studio/data/api-authorization/api-authorization-approve-mutation.ts
index 68cfda4c378..56f52c2eafe 100644
--- a/apps/studio/data/api-authorization/api-authorization-approve-mutation.ts
+++ b/apps/studio/data/api-authorization/api-authorization-approve-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/api-authorization/api-authorization-decline-mutation.ts b/apps/studio/data/api-authorization/api-authorization-decline-mutation.ts
index d90744f4c29..7976a7d94af 100644
--- a/apps/studio/data/api-authorization/api-authorization-decline-mutation.ts
+++ b/apps/studio/data/api-authorization/api-authorization-decline-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/api-settings/create-and-expose-api-schema-mutation.ts b/apps/studio/data/api-settings/create-and-expose-api-schema-mutation.ts
index ae4643c084f..6b698797f98 100644
--- a/apps/studio/data/api-settings/create-and-expose-api-schema-mutation.ts
+++ b/apps/studio/data/api-settings/create-and-expose-api-schema-mutation.ts
@@ -1,12 +1,11 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
+import { configKeys } from 'data/config/keys'
+import { handleError, patch } from 'data/fetchers'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { sqlKeys } from 'data/sql/keys'
 import type { ResponseError } from 'types'
-import { handleError, patch } from 'data/fetchers'
-import { components } from 'api-types'
-import { configKeys } from 'data/config/keys'
 
 export type CreateAndExposeAPISchemaVariables = {
   projectRef: string
diff --git a/apps/studio/data/api-settings/remove-public-schema-from-expose-and-disable-pg_graphql-mutation.ts b/apps/studio/data/api-settings/remove-public-schema-from-expose-and-disable-pg_graphql-mutation.ts
index e45410616ca..6644e2f4f5e 100644
--- a/apps/studio/data/api-settings/remove-public-schema-from-expose-and-disable-pg_graphql-mutation.ts
+++ b/apps/studio/data/api-settings/remove-public-schema-from-expose-and-disable-pg_graphql-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { configKeys } from 'data/config/keys'
 import { databaseExtensionsKeys } from 'data/database-extensions/keys'
diff --git a/apps/studio/data/auth/auth-config-update-mutation.ts b/apps/studio/data/auth/auth-config-update-mutation.ts
index 34f73a068d3..6d4e1597983 100644
--- a/apps/studio/data/auth/auth-config-update-mutation.ts
+++ b/apps/studio/data/auth/auth-config-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, patch } from 'data/fetchers'
diff --git a/apps/studio/data/auth/user-create-mutation.ts b/apps/studio/data/auth/user-create-mutation.ts
index b737368acee..b5f864aaff5 100644
--- a/apps/studio/data/auth/user-create-mutation.ts
+++ b/apps/studio/data/auth/user-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/auth/user-delete-mfa-factors-mutation.ts b/apps/studio/data/auth/user-delete-mfa-factors-mutation.ts
index 8190ce556c5..a03cdbbf0d4 100644
--- a/apps/studio/data/auth/user-delete-mfa-factors-mutation.ts
+++ b/apps/studio/data/auth/user-delete-mfa-factors-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { delete_ } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/auth/user-delete-mutation.ts b/apps/studio/data/auth/user-delete-mutation.ts
index a6a50713e69..25d4c73ce0b 100644
--- a/apps/studio/data/auth/user-delete-mutation.ts
+++ b/apps/studio/data/auth/user-delete-mutation.ts
@@ -1,11 +1,11 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { delete_ } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import type { ResponseError } from 'types'
-import type { User } from './users-query'
 import { authKeys } from './keys'
+import type { User } from './users-query'
 
 export type UserDeleteVariables = {
   projectRef: string
diff --git a/apps/studio/data/auth/user-invite-mutation.ts b/apps/studio/data/auth/user-invite-mutation.ts
index ca0924e05a5..df394472e9e 100644
--- a/apps/studio/data/auth/user-invite-mutation.ts
+++ b/apps/studio/data/auth/user-invite-mutation.ts
@@ -1,9 +1,9 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
-import type { ResponseError } from 'types'
 import { API_URL } from 'lib/constants'
+import type { ResponseError } from 'types'
 import { authKeys } from './keys'
 
 export type UserInviteVariables = {
diff --git a/apps/studio/data/auth/user-reset-password-mutation.ts b/apps/studio/data/auth/user-reset-password-mutation.ts
index ff76c1a1b15..fc0c9365a5b 100644
--- a/apps/studio/data/auth/user-reset-password-mutation.ts
+++ b/apps/studio/data/auth/user-reset-password-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/auth/user-send-magic-link-mutation.ts b/apps/studio/data/auth/user-send-magic-link-mutation.ts
index 6caed79dea3..39234474075 100644
--- a/apps/studio/data/auth/user-send-magic-link-mutation.ts
+++ b/apps/studio/data/auth/user-send-magic-link-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/auth/user-send-otp-mutation.ts b/apps/studio/data/auth/user-send-otp-mutation.ts
index 7630b637656..2fbda94de98 100644
--- a/apps/studio/data/auth/user-send-otp-mutation.ts
+++ b/apps/studio/data/auth/user-send-otp-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/banned-ips/banned-ips-delete-mutations.ts b/apps/studio/data/banned-ips/banned-ips-delete-mutations.ts
index ab67eb76c55..dc0a462fc99 100644
--- a/apps/studio/data/banned-ips/banned-ips-delete-mutations.ts
+++ b/apps/studio/data/banned-ips/banned-ips-delete-mutations.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/branches/branch-create-mutation.ts b/apps/studio/data/branches/branch-create-mutation.ts
index 168ce19e499..874f0bf102f 100644
--- a/apps/studio/data/branches/branch-create-mutation.ts
+++ b/apps/studio/data/branches/branch-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import { projectKeys } from 'data/projects/keys'
diff --git a/apps/studio/data/branches/branch-delete-mutation.ts b/apps/studio/data/branches/branch-delete-mutation.ts
index 94b8c0c4b86..b6682c4f915 100644
--- a/apps/studio/data/branches/branch-delete-mutation.ts
+++ b/apps/studio/data/branches/branch-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/branches/branch-reset-mutation.ts b/apps/studio/data/branches/branch-reset-mutation.ts
index 4a24da10ff9..7f378fc09b4 100644
--- a/apps/studio/data/branches/branch-reset-mutation.ts
+++ b/apps/studio/data/branches/branch-reset-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/branches/branch-update-mutation.ts b/apps/studio/data/branches/branch-update-mutation.ts
index 9a794603014..695ac0e9cad 100644
--- a/apps/studio/data/branches/branch-update-mutation.ts
+++ b/apps/studio/data/branches/branch-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/branches/branches-disable-mutation.ts b/apps/studio/data/branches/branches-disable-mutation.ts
index cccbcd49904..6b550437812 100644
--- a/apps/studio/data/branches/branches-disable-mutation.ts
+++ b/apps/studio/data/branches/branches-disable-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import { projectKeys } from 'data/projects/keys'
diff --git a/apps/studio/data/config/jwt-secret-update-mutation.ts b/apps/studio/data/config/jwt-secret-update-mutation.ts
index 95087a12902..7057b23471f 100644
--- a/apps/studio/data/config/jwt-secret-update-mutation.ts
+++ b/apps/studio/data/config/jwt-secret-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/config/project-disk-resize-mutation.ts b/apps/studio/data/config/project-disk-resize-mutation.ts
index dcc9977bb5f..af0e9aeb689 100644
--- a/apps/studio/data/config/project-disk-resize-mutation.ts
+++ b/apps/studio/data/config/project-disk-resize-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/config/project-postgrest-config-update-mutation.ts b/apps/studio/data/config/project-postgrest-config-update-mutation.ts
index 528e552019e..89dcde2befd 100644
--- a/apps/studio/data/config/project-postgrest-config-update-mutation.ts
+++ b/apps/studio/data/config/project-postgrest-config-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/config/project-storage-config-update-mutation.ts b/apps/studio/data/config/project-storage-config-update-mutation.ts
index b3ff8aa6eaa..56ff098a149 100644
--- a/apps/studio/data/config/project-storage-config-update-mutation.ts
+++ b/apps/studio/data/config/project-storage-config-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/config/project-temp-disable-read-only-mutation.ts b/apps/studio/data/config/project-temp-disable-read-only-mutation.ts
index d6942f8c492..e5827a4f2db 100644
--- a/apps/studio/data/config/project-temp-disable-read-only-mutation.ts
+++ b/apps/studio/data/config/project-temp-disable-read-only-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import { usageKeys } from 'data/usage/keys'
diff --git a/apps/studio/data/content/content-delete-mutation.ts b/apps/studio/data/content/content-delete-mutation.ts
index f8dd7f99efd..b427770dc04 100644
--- a/apps/studio/data/content/content-delete-mutation.ts
+++ b/apps/studio/data/content/content-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/content/content-insert-mutation.ts b/apps/studio/data/content/content-insert-mutation.ts
index 91a74b54fd5..af51d57ce1a 100644
--- a/apps/studio/data/content/content-insert-mutation.ts
+++ b/apps/studio/data/content/content-insert-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/content/content-update-mutation.ts b/apps/studio/data/content/content-update-mutation.ts
index b197e1864bd..5e467ec3625 100644
--- a/apps/studio/data/content/content-update-mutation.ts
+++ b/apps/studio/data/content/content-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/content/content-upsert-mutation.ts b/apps/studio/data/content/content-upsert-mutation.ts
index c1e25bbde61..554a7e9097a 100644
--- a/apps/studio/data/content/content-upsert-mutation.ts
+++ b/apps/studio/data/content/content-upsert-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, put } from 'data/fetchers'
diff --git a/apps/studio/data/content/content-upsert-v2-mutation.ts b/apps/studio/data/content/content-upsert-v2-mutation.ts
index 1d2f1df7303..ed824792038 100644
--- a/apps/studio/data/content/content-upsert-v2-mutation.ts
+++ b/apps/studio/data/content/content-upsert-v2-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, put } from 'data/fetchers'
diff --git a/apps/studio/data/content/sql-folder-create-mutation.ts b/apps/studio/data/content/sql-folder-create-mutation.ts
index 78f30f27526..267344eda53 100644
--- a/apps/studio/data/content/sql-folder-create-mutation.ts
+++ b/apps/studio/data/content/sql-folder-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/content/sql-folder-update-mutation.ts b/apps/studio/data/content/sql-folder-update-mutation.ts
index 095caa3b905..c639b74e58a 100644
--- a/apps/studio/data/content/sql-folder-update-mutation.ts
+++ b/apps/studio/data/content/sql-folder-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/content/sql-folders-delete-mutation.ts b/apps/studio/data/content/sql-folders-delete-mutation.ts
index c182161d379..25caae68a19 100644
--- a/apps/studio/data/content/sql-folders-delete-mutation.ts
+++ b/apps/studio/data/content/sql-folders-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/custom-domains/check-cname-mutation.ts b/apps/studio/data/custom-domains/check-cname-mutation.ts
index 5249707314c..d86bc749afe 100644
--- a/apps/studio/data/custom-domains/check-cname-mutation.ts
+++ b/apps/studio/data/custom-domains/check-cname-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { ResponseError } from 'types'
 
diff --git a/apps/studio/data/custom-domains/custom-domains-activate-mutation.ts b/apps/studio/data/custom-domains/custom-domains-activate-mutation.ts
index b898b78d014..3224dfb1f91 100644
--- a/apps/studio/data/custom-domains/custom-domains-activate-mutation.ts
+++ b/apps/studio/data/custom-domains/custom-domains-activate-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/custom-domains/custom-domains-create-mutation.ts b/apps/studio/data/custom-domains/custom-domains-create-mutation.ts
index 16eb5917d9e..5e3cef99010 100644
--- a/apps/studio/data/custom-domains/custom-domains-create-mutation.ts
+++ b/apps/studio/data/custom-domains/custom-domains-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/custom-domains/custom-domains-delete-mutation.ts b/apps/studio/data/custom-domains/custom-domains-delete-mutation.ts
index d44ccb78abf..7a9568d8da5 100644
--- a/apps/studio/data/custom-domains/custom-domains-delete-mutation.ts
+++ b/apps/studio/data/custom-domains/custom-domains-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/custom-domains/custom-domains-reverify-mutation.ts b/apps/studio/data/custom-domains/custom-domains-reverify-mutation.ts
index 1489770144f..e050146d02b 100644
--- a/apps/studio/data/custom-domains/custom-domains-reverify-mutation.ts
+++ b/apps/studio/data/custom-domains/custom-domains-reverify-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database-columns/database-column-create-mutation.ts b/apps/studio/data/database-columns/database-column-create-mutation.ts
index 42bbc19cd8c..c60bc80837e 100644
--- a/apps/studio/data/database-columns/database-column-create-mutation.ts
+++ b/apps/studio/data/database-columns/database-column-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/database-columns/database-column-delete-mutation.ts b/apps/studio/data/database-columns/database-column-delete-mutation.ts
index abdc8c4b2c9..cad881f0611 100644
--- a/apps/studio/data/database-columns/database-column-delete-mutation.ts
+++ b/apps/studio/data/database-columns/database-column-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { entityTypeKeys } from 'data/entity-types/keys'
 import { del, handleError } from 'data/fetchers'
diff --git a/apps/studio/data/database-columns/database-column-update-mutation.ts b/apps/studio/data/database-columns/database-column-update-mutation.ts
index 29721a3831d..4f486f8eaca 100644
--- a/apps/studio/data/database-columns/database-column-update-mutation.ts
+++ b/apps/studio/data/database-columns/database-column-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, patch } from 'data/fetchers'
diff --git a/apps/studio/data/database-extensions/database-extension-disable-mutation.ts b/apps/studio/data/database-extensions/database-extension-disable-mutation.ts
index 008579d79b2..b031411db36 100644
--- a/apps/studio/data/database-extensions/database-extension-disable-mutation.ts
+++ b/apps/studio/data/database-extensions/database-extension-disable-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database-extensions/database-extension-enable-mutation.ts b/apps/studio/data/database-extensions/database-extension-enable-mutation.ts
index 66d5e97e648..61ac3b0dd52 100644
--- a/apps/studio/data/database-extensions/database-extension-enable-mutation.ts
+++ b/apps/studio/data/database-extensions/database-extension-enable-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import { executeSql } from 'data/sql/execute-sql-query'
diff --git a/apps/studio/data/database-functions/database-functions-create-mutation.ts b/apps/studio/data/database-functions/database-functions-create-mutation.ts
index 60553f8a86b..230553fd563 100644
--- a/apps/studio/data/database-functions/database-functions-create-mutation.ts
+++ b/apps/studio/data/database-functions/database-functions-create-mutation.ts
@@ -1,11 +1,11 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import pgMeta from '@supabase/pg-meta'
 import { executeSql } from 'data/sql/execute-sql-query'
-import type { ResponseError } from 'types'
 import { sqlKeys } from 'data/sql/keys'
+import type { ResponseError } from 'types'
 
 export type DatabaseFunctionCreateVariables = {
   projectRef: string
diff --git a/apps/studio/data/database-functions/database-functions-delete-mutation.ts b/apps/studio/data/database-functions/database-functions-delete-mutation.ts
index c37e9a973cb..c19e086fb0f 100644
--- a/apps/studio/data/database-functions/database-functions-delete-mutation.ts
+++ b/apps/studio/data/database-functions/database-functions-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import pgMeta from '@supabase/pg-meta'
diff --git a/apps/studio/data/database-functions/database-functions-update-mutation.ts b/apps/studio/data/database-functions/database-functions-update-mutation.ts
index 134d8ff7e81..3f58bf3bdde 100644
--- a/apps/studio/data/database-functions/database-functions-update-mutation.ts
+++ b/apps/studio/data/database-functions/database-functions-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import pgMeta from '@supabase/pg-meta'
diff --git a/apps/studio/data/database-policies/database-policy-create-mutation.ts b/apps/studio/data/database-policies/database-policy-create-mutation.ts
index 2a6b74e28a6..fca5db95f4b 100644
--- a/apps/studio/data/database-policies/database-policy-create-mutation.ts
+++ b/apps/studio/data/database-policies/database-policy-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/database-policies/database-policy-delete-mutation.ts b/apps/studio/data/database-policies/database-policy-delete-mutation.ts
index bebcdeeb98a..fca0d5724ca 100644
--- a/apps/studio/data/database-policies/database-policy-delete-mutation.ts
+++ b/apps/studio/data/database-policies/database-policy-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database-policies/database-policy-update-mutation.ts b/apps/studio/data/database-policies/database-policy-update-mutation.ts
index 5ba38b3bab1..915a7bbed45 100644
--- a/apps/studio/data/database-policies/database-policy-update-mutation.ts
+++ b/apps/studio/data/database-policies/database-policy-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database-publications/database-publications-create-mutation.ts b/apps/studio/data/database-publications/database-publications-create-mutation.ts
index 5dbdec0b619..a31ec9b3461 100644
--- a/apps/studio/data/database-publications/database-publications-create-mutation.ts
+++ b/apps/studio/data/database-publications/database-publications-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database-publications/database-publications-update-mutation.ts b/apps/studio/data/database-publications/database-publications-update-mutation.ts
index b613ac27ad8..3a362f2dea8 100644
--- a/apps/studio/data/database-publications/database-publications-update-mutation.ts
+++ b/apps/studio/data/database-publications/database-publications-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database-roles/database-role-create-mutation.ts b/apps/studio/data/database-roles/database-role-create-mutation.ts
index 7601b21e30d..9e827b0f3d9 100644
--- a/apps/studio/data/database-roles/database-role-create-mutation.ts
+++ b/apps/studio/data/database-roles/database-role-create-mutation.ts
@@ -1,9 +1,9 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import pgMeta from '@supabase/pg-meta'
-import { toast } from 'react-hot-toast'
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
 
-import type { ResponseError } from 'types'
 import { executeSql } from 'data/sql/execute-sql-query'
+import type { ResponseError } from 'types'
 import { invalidateRolesQuery } from './database-roles-query'
 
 type CreateRoleBody = Parameters[0]
diff --git a/apps/studio/data/database-roles/database-role-delete-mutation.ts b/apps/studio/data/database-roles/database-role-delete-mutation.ts
index c2e7ddda4e7..a082250e77a 100644
--- a/apps/studio/data/database-roles/database-role-delete-mutation.ts
+++ b/apps/studio/data/database-roles/database-role-delete-mutation.ts
@@ -1,9 +1,9 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import pgMeta from '@supabase/pg-meta'
-import { toast } from 'react-hot-toast'
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
 
-import type { ResponseError } from 'types'
 import { executeSql } from 'data/sql/execute-sql-query'
+import type { ResponseError } from 'types'
 import { invalidateRolesQuery } from './database-roles-query'
 
 type DropRoleBody = Parameters[1]
diff --git a/apps/studio/data/database-roles/database-role-update-mutation.ts b/apps/studio/data/database-roles/database-role-update-mutation.ts
index a0d90520269..c2e5e9fb21b 100644
--- a/apps/studio/data/database-roles/database-role-update-mutation.ts
+++ b/apps/studio/data/database-roles/database-role-update-mutation.ts
@@ -1,9 +1,9 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import pgMeta from '@supabase/pg-meta'
-import { toast } from 'react-hot-toast'
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
 
-import type { ResponseError } from 'types'
 import { executeSql } from 'data/sql/execute-sql-query'
+import type { ResponseError } from 'types'
 import { invalidateRolesQuery } from './database-roles-query'
 
 type UpdateRoleBody = Parameters[1]
diff --git a/apps/studio/data/database-triggers/database-trigger-create-mutation.ts b/apps/studio/data/database-triggers/database-trigger-create-mutation.ts
index 4b9a819fa26..1ee800521b4 100644
--- a/apps/studio/data/database-triggers/database-trigger-create-mutation.ts
+++ b/apps/studio/data/database-triggers/database-trigger-create-mutation.ts
@@ -1,6 +1,6 @@
 import type { PostgresTrigger } from '@supabase/postgres-meta'
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/database-triggers/database-trigger-delete-mutation.ts b/apps/studio/data/database-triggers/database-trigger-delete-mutation.ts
index 275b4ed2a66..a23620fe3b8 100644
--- a/apps/studio/data/database-triggers/database-trigger-delete-mutation.ts
+++ b/apps/studio/data/database-triggers/database-trigger-delete-mutation.ts
@@ -1,11 +1,11 @@
-import { toast } from 'react-hot-toast'
 import type { PostgresTrigger } from '@supabase/postgres-meta'
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
 
 import { delete_ } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
-import { databaseTriggerKeys } from './keys'
 import type { ResponseError } from 'types'
+import { databaseTriggerKeys } from './keys'
 
 export type DatabaseTriggerDeleteVariables = {
   id: number
diff --git a/apps/studio/data/database-triggers/database-trigger-update-mutation.ts b/apps/studio/data/database-triggers/database-trigger-update-mutation.ts
index 77ae421992d..ca53c246e34 100644
--- a/apps/studio/data/database-triggers/database-trigger-update-mutation.ts
+++ b/apps/studio/data/database-triggers/database-trigger-update-mutation.ts
@@ -1,6 +1,6 @@
 import type { PostgresTrigger } from '@supabase/postgres-meta'
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/database-triggers/database-trigger-update-transaction-mutation.ts b/apps/studio/data/database-triggers/database-trigger-update-transaction-mutation.ts
index 57a5991a455..20a501477b8 100644
--- a/apps/studio/data/database-triggers/database-trigger-update-transaction-mutation.ts
+++ b/apps/studio/data/database-triggers/database-trigger-update-transaction-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { executeSql } from 'data/sql/execute-sql-query'
 import { quoteLiteral } from 'lib/pg-format'
diff --git a/apps/studio/data/database/backup-download-mutation.ts b/apps/studio/data/database/backup-download-mutation.ts
index 9239036b5a4..e8096f0225a 100644
--- a/apps/studio/data/database/backup-download-mutation.ts
+++ b/apps/studio/data/database/backup-download-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database/backup-restore-mutation.ts b/apps/studio/data/database/backup-restore-mutation.ts
index bc034f62f1c..cbe713a2236 100644
--- a/apps/studio/data/database/backup-restore-mutation.ts
+++ b/apps/studio/data/database/backup-restore-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/database/database-password-reset-mutation.ts b/apps/studio/data/database/database-password-reset-mutation.ts
index 11b89ea0e52..ad139d8087c 100644
--- a/apps/studio/data/database/database-password-reset-mutation.ts
+++ b/apps/studio/data/database/database-password-reset-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import { projectKeys } from 'data/projects/keys'
diff --git a/apps/studio/data/database/enable-physical-backups-mutation.ts b/apps/studio/data/database/enable-physical-backups-mutation.ts
index 7f532c62bf9..3ce9b937ce5 100644
--- a/apps/studio/data/database/enable-physical-backups-mutation.ts
+++ b/apps/studio/data/database/enable-physical-backups-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database/hooks-enable-mutation.ts b/apps/studio/data/database/hooks-enable-mutation.ts
index e5e0c715850..b3b0dbee867 100644
--- a/apps/studio/data/database/hooks-enable-mutation.ts
+++ b/apps/studio/data/database/hooks-enable-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database/pitr-restore-mutation.ts b/apps/studio/data/database/pitr-restore-mutation.ts
index b98199af658..1b06f73cafa 100644
--- a/apps/studio/data/database/pitr-restore-mutation.ts
+++ b/apps/studio/data/database/pitr-restore-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/database/pooling-configuration-update-mutation.ts b/apps/studio/data/database/pooling-configuration-update-mutation.ts
index 2a18a3e0fd7..9795ec7e722 100644
--- a/apps/studio/data/database/pooling-configuration-update-mutation.ts
+++ b/apps/studio/data/database/pooling-configuration-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, patch } from 'data/fetchers'
diff --git a/apps/studio/data/database/schema-create-mutation.ts b/apps/studio/data/database/schema-create-mutation.ts
index 81499a34b97..346963d1f4b 100644
--- a/apps/studio/data/database/schema-create-mutation.ts
+++ b/apps/studio/data/database/schema-create-mutation.ts
@@ -1,9 +1,9 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import pgMeta from '@supabase/pg-meta'
-import { toast } from 'react-hot-toast'
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
 
-import type { ResponseError } from 'types'
 import { executeSql } from 'data/sql/execute-sql-query'
+import type { ResponseError } from 'types'
 import { invalidateSchemasQuery } from './schemas-query'
 
 export type SchemaCreateVariables = {
diff --git a/apps/studio/data/edge-functions/edge-functions-delete-mutation.ts b/apps/studio/data/edge-functions/edge-functions-delete-mutation.ts
index bb0741c5167..e6aab7c26c9 100644
--- a/apps/studio/data/edge-functions/edge-functions-delete-mutation.ts
+++ b/apps/studio/data/edge-functions/edge-functions-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/edge-functions/edge-functions-update-mutation.ts b/apps/studio/data/edge-functions/edge-functions-update-mutation.ts
index d45f1a14838..1d9e501d79d 100644
--- a/apps/studio/data/edge-functions/edge-functions-update-mutation.ts
+++ b/apps/studio/data/edge-functions/edge-functions-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/enumerated-types/enumerated-type-create-mutation.ts b/apps/studio/data/enumerated-types/enumerated-type-create-mutation.ts
index 37fa2323d92..285c9f87be0 100644
--- a/apps/studio/data/enumerated-types/enumerated-type-create-mutation.ts
+++ b/apps/studio/data/enumerated-types/enumerated-type-create-mutation.ts
@@ -1,10 +1,10 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
-import type { ResponseError } from 'types'
-import { enumeratedTypesKeys } from './keys'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { wrapWithTransaction } from 'data/sql/utils/transaction'
+import type { ResponseError } from 'types'
+import { enumeratedTypesKeys } from './keys'
 
 export type EnumeratedTypeCreateVariables = {
   projectRef: string
diff --git a/apps/studio/data/enumerated-types/enumerated-type-delete-mutation.ts b/apps/studio/data/enumerated-types/enumerated-type-delete-mutation.ts
index a4cf539aec5..bf49ac1f35d 100644
--- a/apps/studio/data/enumerated-types/enumerated-type-delete-mutation.ts
+++ b/apps/studio/data/enumerated-types/enumerated-type-delete-mutation.ts
@@ -1,9 +1,9 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
+import { executeSql } from 'data/sql/execute-sql-query'
 import type { ResponseError } from 'types'
 import { enumeratedTypesKeys } from './keys'
-import { executeSql } from 'data/sql/execute-sql-query'
 
 export type EnumeratedTypeDeleteVariables = {
   projectRef: string
diff --git a/apps/studio/data/enumerated-types/enumerated-type-update-mutation.ts b/apps/studio/data/enumerated-types/enumerated-type-update-mutation.ts
index 037314bcb6e..4650f44ad32 100644
--- a/apps/studio/data/enumerated-types/enumerated-type-update-mutation.ts
+++ b/apps/studio/data/enumerated-types/enumerated-type-update-mutation.ts
@@ -1,10 +1,10 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
-import type { ResponseError } from 'types'
-import { enumeratedTypesKeys } from './keys'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { wrapWithTransaction } from 'data/sql/utils/transaction'
+import type { ResponseError } from 'types'
+import { enumeratedTypesKeys } from './keys'
 
 export type EnumeratedTypeUpdateVariables = {
   projectRef: string
diff --git a/apps/studio/data/fdw/fdw-create-mutation.ts b/apps/studio/data/fdw/fdw-create-mutation.ts
index 36e936df1a6..9a54d75489b 100644
--- a/apps/studio/data/fdw/fdw-create-mutation.ts
+++ b/apps/studio/data/fdw/fdw-create-mutation.ts
@@ -1,17 +1,17 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import {
   AvailableColumn,
   WrapperMeta,
 } from 'components/interfaces/Database/Wrappers/Wrappers.types'
+import { entityTypeKeys } from 'data/entity-types/keys'
 import { pgSodiumKeys } from 'data/pg-sodium-keys/keys'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { sqlKeys } from 'data/sql/keys'
 import { wrapWithTransaction } from 'data/sql/utils/transaction'
 import { vaultSecretsKeys } from 'data/vault/keys'
 import type { ResponseError } from 'types'
-import { entityTypeKeys } from 'data/entity-types/keys'
 
 export type FDWCreateVariables = {
   projectRef?: string
diff --git a/apps/studio/data/fdw/fdw-delete-mutation.ts b/apps/studio/data/fdw/fdw-delete-mutation.ts
index 9c121f9aa4e..bcb9e6d00c9 100644
--- a/apps/studio/data/fdw/fdw-delete-mutation.ts
+++ b/apps/studio/data/fdw/fdw-delete-mutation.ts
@@ -1,7 +1,8 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { WrapperMeta } from 'components/interfaces/Database/Wrappers/Wrappers.types'
+import { entityTypeKeys } from 'data/entity-types/keys'
 import { pgSodiumKeys } from 'data/pg-sodium-keys/keys'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { sqlKeys } from 'data/sql/keys'
@@ -9,7 +10,6 @@ import { wrapWithTransaction } from 'data/sql/utils/transaction'
 import { vaultSecretsKeys } from 'data/vault/keys'
 import type { ResponseError } from 'types'
 import { FDW } from './fdws-query'
-import { entityTypeKeys } from 'data/entity-types/keys'
 
 export type FDWDeleteVariables = {
   projectRef: string
diff --git a/apps/studio/data/fdw/fdw-update-mutation.ts b/apps/studio/data/fdw/fdw-update-mutation.ts
index 9268d6b7dc7..9092367076a 100644
--- a/apps/studio/data/fdw/fdw-update-mutation.ts
+++ b/apps/studio/data/fdw/fdw-update-mutation.ts
@@ -1,7 +1,8 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { WrapperMeta } from 'components/interfaces/Database/Wrappers/Wrappers.types'
+import { entityTypeKeys } from 'data/entity-types/keys'
 import { pgSodiumKeys } from 'data/pg-sodium-keys/keys'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { sqlKeys } from 'data/sql/keys'
@@ -11,7 +12,6 @@ import type { ResponseError } from 'types'
 import { getCreateFDWSql } from './fdw-create-mutation'
 import { getDeleteFDWSql } from './fdw-delete-mutation'
 import { FDW } from './fdws-query'
-import { entityTypeKeys } from 'data/entity-types/keys'
 
 export type FDWUpdateVariables = {
   projectRef?: string
diff --git a/apps/studio/data/feedback/exit-survey-send.ts b/apps/studio/data/feedback/exit-survey-send.ts
index d710e69d9e0..ada87365ab4 100644
--- a/apps/studio/data/feedback/exit-survey-send.ts
+++ b/apps/studio/data/feedback/exit-survey-send.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/feedback/feedback-send.ts b/apps/studio/data/feedback/feedback-send.ts
index 0d38ca943f3..506a4f1f801 100644
--- a/apps/studio/data/feedback/feedback-send.ts
+++ b/apps/studio/data/feedback/feedback-send.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/feedback/support-ticket-send.ts b/apps/studio/data/feedback/support-ticket-send.ts
index ddc6831cf31..45ed494472e 100644
--- a/apps/studio/data/feedback/support-ticket-send.ts
+++ b/apps/studio/data/feedback/support-ticket-send.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/feedback/upgrade-survey-send.ts b/apps/studio/data/feedback/upgrade-survey-send.ts
index 01b63abb697..bf41f599e1f 100644
--- a/apps/studio/data/feedback/upgrade-survey-send.ts
+++ b/apps/studio/data/feedback/upgrade-survey-send.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 // import { post } from 'lib/common/fetch'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/integrations/github-authorization-create-mutation.ts b/apps/studio/data/integrations/github-authorization-create-mutation.ts
index 55f24d21fab..ea3136245e7 100644
--- a/apps/studio/data/integrations/github-authorization-create-mutation.ts
+++ b/apps/studio/data/integrations/github-authorization-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/integrations/github-branch-check-query.ts b/apps/studio/data/integrations/github-branch-check-query.ts
index 21388e8ac55..6f7d8bffa78 100644
--- a/apps/studio/data/integrations/github-branch-check-query.ts
+++ b/apps/studio/data/integrations/github-branch-check-query.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { get, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/integrations/github-connection-create-mutation.ts b/apps/studio/data/integrations/github-connection-create-mutation.ts
index 7448653a018..da6ce1a4c28 100644
--- a/apps/studio/data/integrations/github-connection-create-mutation.ts
+++ b/apps/studio/data/integrations/github-connection-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/integrations/github-connection-delete-mutation.ts b/apps/studio/data/integrations/github-connection-delete-mutation.ts
index 1c68ea88d2f..a46cd699a25 100644
--- a/apps/studio/data/integrations/github-connection-delete-mutation.ts
+++ b/apps/studio/data/integrations/github-connection-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/integrations/github-connection-update-mutation.ts b/apps/studio/data/integrations/github-connection-update-mutation.ts
index a7158b1146a..be09295a9c1 100644
--- a/apps/studio/data/integrations/github-connection-update-mutation.ts
+++ b/apps/studio/data/integrations/github-connection-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts b/apps/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
index 00b6111290f..c80a5a07110 100644
--- a/apps/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
+++ b/apps/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/integrations/integrations-vercel-connections-create-mutation.ts b/apps/studio/data/integrations/integrations-vercel-connections-create-mutation.ts
index 24a14e36a7c..8596b60ed0c 100644
--- a/apps/studio/data/integrations/integrations-vercel-connections-create-mutation.ts
+++ b/apps/studio/data/integrations/integrations-vercel-connections-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import { useIntegrationInstallationSnapshot } from 'state/integration-installation'
diff --git a/apps/studio/data/integrations/integrations-vercel-installed-connection-delete-mutation.ts b/apps/studio/data/integrations/integrations-vercel-installed-connection-delete-mutation.ts
index c7a5d1b1ec0..2f98285d5ad 100644
--- a/apps/studio/data/integrations/integrations-vercel-installed-connection-delete-mutation.ts
+++ b/apps/studio/data/integrations/integrations-vercel-installed-connection-delete-mutation.ts
@@ -1,9 +1,9 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { delete_, isResponseOk } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
+import { toast } from 'sonner'
 import type { ResponseError, UserContent } from 'types'
 import { integrationKeys } from './keys'
-import { toast } from 'react-hot-toast'
 
 type DeleteVariables = {
   id: string
diff --git a/apps/studio/data/integrations/vercel-connection-update-mutate.ts b/apps/studio/data/integrations/vercel-connection-update-mutate.ts
index eeddcc19f38..d419adf5db1 100644
--- a/apps/studio/data/integrations/vercel-connection-update-mutate.ts
+++ b/apps/studio/data/integrations/vercel-connection-update-mutate.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/integrations/vercel-integration-create-mutation.ts b/apps/studio/data/integrations/vercel-integration-create-mutation.ts
index 6798d5b4a24..3d8b5c19c3e 100644
--- a/apps/studio/data/integrations/vercel-integration-create-mutation.ts
+++ b/apps/studio/data/integrations/vercel-integration-create-mutation.ts
@@ -1,9 +1,9 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
-import { integrationKeys } from './keys'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 import type { ResponseError } from 'types'
+import { integrationKeys } from './keys'
 
 export type VercelIntegrationCreateVariables = {
   code: string
diff --git a/apps/studio/data/log-drains/create-log-drain-mutation.ts b/apps/studio/data/log-drains/create-log-drain-mutation.ts
index ee34b5928e8..2156999333f 100644
--- a/apps/studio/data/log-drains/create-log-drain-mutation.ts
+++ b/apps/studio/data/log-drains/create-log-drain-mutation.ts
@@ -1,10 +1,10 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
+import { LogDrainType } from 'components/interfaces/LogDrains/LogDrains.constants'
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
 import { logDrainsKeys } from './keys'
-import { LogDrainType } from 'components/interfaces/LogDrains/LogDrains.constants'
 
 export type LogDrainCreateVariables = {
   projectRef: string
diff --git a/apps/studio/data/log-drains/delete-log-drain-mutation.ts b/apps/studio/data/log-drains/delete-log-drain-mutation.ts
index a78fcd108a4..a470f8ea06e 100644
--- a/apps/studio/data/log-drains/delete-log-drain-mutation.ts
+++ b/apps/studio/data/log-drains/delete-log-drain-mutation.ts
@@ -1,7 +1,7 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
-import { handleError, del } from 'data/fetchers'
+import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
 import { logDrainsKeys } from './keys'
 
diff --git a/apps/studio/data/log-drains/update-log-drain-mutation.ts b/apps/studio/data/log-drains/update-log-drain-mutation.ts
index 39d55bb8b5f..9acdd93e99c 100644
--- a/apps/studio/data/log-drains/update-log-drain-mutation.ts
+++ b/apps/studio/data/log-drains/update-log-drain-mutation.ts
@@ -1,10 +1,10 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
+import { LogDrainType } from 'components/interfaces/LogDrains/LogDrains.constants'
 import { handleError, put } from 'data/fetchers'
 import type { ResponseError } from 'types'
 import { logDrainsKeys } from './keys'
-import { LogDrainType } from 'components/interfaces/LogDrains/LogDrains.constants'
 
 export type LogDrainUpdateVariables = {
   projectRef: string
diff --git a/apps/studio/data/misc/reset-password-mutation.ts b/apps/studio/data/misc/reset-password-mutation.ts
index 1e2e21d597b..4f3570118ec 100644
--- a/apps/studio/data/misc/reset-password-mutation.ts
+++ b/apps/studio/data/misc/reset-password-mutation.ts
@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/nextjs'
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/misc/signup-mutation.ts b/apps/studio/data/misc/signup-mutation.ts
index e00bfbebf15..84e18d2bb4f 100644
--- a/apps/studio/data/misc/signup-mutation.ts
+++ b/apps/studio/data/misc/signup-mutation.ts
@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/nextjs'
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/network-restrictions/network-retrictions-apply-mutation.ts b/apps/studio/data/network-restrictions/network-retrictions-apply-mutation.ts
index 5163e7b2f28..29dd3038e4f 100644
--- a/apps/studio/data/network-restrictions/network-retrictions-apply-mutation.ts
+++ b/apps/studio/data/network-restrictions/network-retrictions-apply-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/notifications/notifications-dismiss-mutation.ts b/apps/studio/data/notifications/notifications-dismiss-mutation.ts
index c28280161df..b2238844670 100644
--- a/apps/studio/data/notifications/notifications-dismiss-mutation.ts
+++ b/apps/studio/data/notifications/notifications-dismiss-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/notifications/notifications-update-mutation.ts b/apps/studio/data/notifications/notifications-update-mutation.ts
index 263a6e5c04e..74d3e9bc7e4 100644
--- a/apps/studio/data/notifications/notifications-update-mutation.ts
+++ b/apps/studio/data/notifications/notifications-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/notifications/notifications-v2-archive-all-mutation.ts b/apps/studio/data/notifications/notifications-v2-archive-all-mutation.ts
index 9d245509a44..b6f5a875e7d 100644
--- a/apps/studio/data/notifications/notifications-v2-archive-all-mutation.ts
+++ b/apps/studio/data/notifications/notifications-v2-archive-all-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/notifications/notifications-v2-update-mutation.ts b/apps/studio/data/notifications/notifications-v2-update-mutation.ts
index 0063d408e0b..3a4920e2c5a 100644
--- a/apps/studio/data/notifications/notifications-v2-update-mutation.ts
+++ b/apps/studio/data/notifications/notifications-v2-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/oauth/authorized-app-revoke-mutation.ts b/apps/studio/data/oauth/authorized-app-revoke-mutation.ts
index 11fb114586b..105f164afec 100644
--- a/apps/studio/data/oauth/authorized-app-revoke-mutation.ts
+++ b/apps/studio/data/oauth/authorized-app-revoke-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/oauth/oauth-app-create-mutation.ts b/apps/studio/data/oauth/oauth-app-create-mutation.ts
index d47deb1f7bc..ee07dbfa183 100644
--- a/apps/studio/data/oauth/oauth-app-create-mutation.ts
+++ b/apps/studio/data/oauth/oauth-app-create-mutation.ts
@@ -1,6 +1,6 @@
 import type { OAuthScope } from '@supabase/shared-types/out/constants'
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/oauth/oauth-app-delete-mutation.ts b/apps/studio/data/oauth/oauth-app-delete-mutation.ts
index 471a93f11c8..e0663b14984 100644
--- a/apps/studio/data/oauth/oauth-app-delete-mutation.ts
+++ b/apps/studio/data/oauth/oauth-app-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { delete_ } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/oauth/oauth-app-update-mutation.ts b/apps/studio/data/oauth/oauth-app-update-mutation.ts
index 8b2513bfc0c..e65779f97ad 100644
--- a/apps/studio/data/oauth/oauth-app-update-mutation.ts
+++ b/apps/studio/data/oauth/oauth-app-update-mutation.ts
@@ -1,6 +1,6 @@
 import type { OAuthScope } from '@supabase/shared-types/out/constants'
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { put } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/organization-members/organization-invitation-accept-mutation.ts b/apps/studio/data/organization-members/organization-invitation-accept-mutation.ts
index 39cc0b22d7d..1776742a893 100644
--- a/apps/studio/data/organization-members/organization-invitation-accept-mutation.ts
+++ b/apps/studio/data/organization-members/organization-invitation-accept-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import { invalidateOrganizationsQuery } from 'data/organizations/organizations-query'
diff --git a/apps/studio/data/organization-members/organization-invitation-create-mutation.ts b/apps/studio/data/organization-members/organization-invitation-create-mutation.ts
index f08483e0d90..b7660ac0a56 100644
--- a/apps/studio/data/organization-members/organization-invitation-create-mutation.ts
+++ b/apps/studio/data/organization-members/organization-invitation-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { components } from 'api-types'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/organization-members/organization-invitation-delete-mutation.ts b/apps/studio/data/organization-members/organization-invitation-delete-mutation.ts
index 242362ca065..7cb7da986bf 100644
--- a/apps/studio/data/organization-members/organization-invitation-delete-mutation.ts
+++ b/apps/studio/data/organization-members/organization-invitation-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/organization-members/organization-member-role-assign-mutation.ts b/apps/studio/data/organization-members/organization-member-role-assign-mutation.ts
index 858471219f0..3e7484c986b 100644
--- a/apps/studio/data/organization-members/organization-member-role-assign-mutation.ts
+++ b/apps/studio/data/organization-members/organization-member-role-assign-mutation.ts
@@ -1,11 +1,11 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
-import { organizationKeys } from './keys'
+import { components } from 'api-types'
+import { handleError, patch } from 'data/fetchers'
 import { organizationKeys as organizationKeysV1 } from 'data/organizations/keys'
 import type { ResponseError } from 'types'
-import { handleError, patch } from 'data/fetchers'
-import { components } from 'api-types'
+import { organizationKeys } from './keys'
 
 export type OrganizationMemberAssignRoleVariables = {
   slug: string
diff --git a/apps/studio/data/organization-members/organization-member-role-unassign-mutation.ts b/apps/studio/data/organization-members/organization-member-role-unassign-mutation.ts
index cb281278d16..f486d86c99b 100644
--- a/apps/studio/data/organization-members/organization-member-role-unassign-mutation.ts
+++ b/apps/studio/data/organization-members/organization-member-role-unassign-mutation.ts
@@ -1,10 +1,10 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
+import { organizationKeys as organizationKeysV1 } from 'data/organizations/keys'
 import type { ResponseError } from 'types'
 import { organizationKeys } from './keys'
-import { organizationKeys as organizationKeysV1 } from 'data/organizations/keys'
 
 export type OrganizationMemberUnassignRoleVariables = {
   slug: string
diff --git a/apps/studio/data/organization-members/organization-member-role-update-mutation.ts b/apps/studio/data/organization-members/organization-member-role-update-mutation.ts
index 0b577c8961b..645337d6ede 100644
--- a/apps/studio/data/organization-members/organization-member-role-update-mutation.ts
+++ b/apps/studio/data/organization-members/organization-member-role-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, put } from 'data/fetchers'
 import { organizationKeys as organizationKeysV1 } from 'data/organizations/keys'
diff --git a/apps/studio/data/organizations/organization-by-fly-organization-id-mutation.ts b/apps/studio/data/organizations/organization-by-fly-organization-id-mutation.ts
index a4d59a9646d..94cd801beeb 100644
--- a/apps/studio/data/organizations/organization-by-fly-organization-id-mutation.ts
+++ b/apps/studio/data/organizations/organization-by-fly-organization-id-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { get, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/organizations/organization-create-mutation.ts b/apps/studio/data/organizations/organization-create-mutation.ts
index 28bef2019c9..77842d34cea 100644
--- a/apps/studio/data/organizations/organization-create-mutation.ts
+++ b/apps/studio/data/organizations/organization-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import { permissionKeys } from 'data/permissions/keys'
diff --git a/apps/studio/data/organizations/organization-customer-profile-update-mutation.ts b/apps/studio/data/organizations/organization-customer-profile-update-mutation.ts
index 0bf018a7cfb..945ae9c7f14 100644
--- a/apps/studio/data/organizations/organization-customer-profile-update-mutation.ts
+++ b/apps/studio/data/organizations/organization-customer-profile-update-mutation.ts
@@ -1,10 +1,10 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
-import { put, handleError } from 'data/fetchers'
+import { components } from 'api-types'
+import { handleError, put } from 'data/fetchers'
 import type { ResponseError } from 'types'
 import { organizationKeys } from './keys'
-import { components } from 'api-types'
 
 export type OrganizationCustomerProfileUpdateVariables = {
   slug: string
diff --git a/apps/studio/data/organizations/organization-delete-mutation.ts b/apps/studio/data/organizations/organization-delete-mutation.ts
index e54654adfa8..07c5f19e634 100644
--- a/apps/studio/data/organizations/organization-delete-mutation.ts
+++ b/apps/studio/data/organizations/organization-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import { permissionKeys } from 'data/permissions/keys'
diff --git a/apps/studio/data/organizations/organization-join-decline-mutation.ts b/apps/studio/data/organizations/organization-join-decline-mutation.ts
index d220a48c79a..1e06d29776c 100644
--- a/apps/studio/data/organizations/organization-join-decline-mutation.ts
+++ b/apps/studio/data/organizations/organization-join-decline-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/organizations/organization-join-mutation.ts b/apps/studio/data/organizations/organization-join-mutation.ts
index f680a90a3a3..d59eb254064 100644
--- a/apps/studio/data/organizations/organization-join-mutation.ts
+++ b/apps/studio/data/organizations/organization-join-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/organizations/organization-member-delete-mutation.ts b/apps/studio/data/organizations/organization-member-delete-mutation.ts
index cc888e9787b..abb41d19dc3 100644
--- a/apps/studio/data/organizations/organization-member-delete-mutation.ts
+++ b/apps/studio/data/organizations/organization-member-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { delete_ } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/organizations/organization-member-invite-create-mutation.ts b/apps/studio/data/organizations/organization-member-invite-create-mutation.ts
index 16ddbf8d25c..83e174ec3ef 100644
--- a/apps/studio/data/organizations/organization-member-invite-create-mutation.ts
+++ b/apps/studio/data/organizations/organization-member-invite-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/organizations/organization-member-invite-delete-mutation.ts b/apps/studio/data/organizations/organization-member-invite-delete-mutation.ts
index 26694650c25..75c37016f44 100644
--- a/apps/studio/data/organizations/organization-member-invite-delete-mutation.ts
+++ b/apps/studio/data/organizations/organization-member-invite-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/organizations/organization-member-update-mutation.ts b/apps/studio/data/organizations/organization-member-update-mutation.ts
index 58f6fa7b0b2..9d71c7ca53d 100644
--- a/apps/studio/data/organizations/organization-member-update-mutation.ts
+++ b/apps/studio/data/organizations/organization-member-update-mutation.ts
@@ -1,9 +1,9 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
-import { organizationKeys } from './keys'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 import type { ResponseError } from 'types'
+import { organizationKeys } from './keys'
 
 export type OrganizationMemberUpdateVariables = {
   slug: string
diff --git a/apps/studio/data/organizations/organization-payment-method-default-mutation.ts b/apps/studio/data/organizations/organization-payment-method-default-mutation.ts
index 7d395476158..998346a4108 100644
--- a/apps/studio/data/organizations/organization-payment-method-default-mutation.ts
+++ b/apps/studio/data/organizations/organization-payment-method-default-mutation.ts
@@ -1,6 +1,6 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
-import { put, handleError } from 'data/fetchers'
+import { handleError, put } from 'data/fetchers'
+import { toast } from 'sonner'
 import type { ResponseError } from 'types'
 import { organizationKeys } from './keys'
 
diff --git a/apps/studio/data/organizations/organization-payment-method-delete-mutation.ts b/apps/studio/data/organizations/organization-payment-method-delete-mutation.ts
index 5e41145036c..754f0c3044d 100644
--- a/apps/studio/data/organizations/organization-payment-method-delete-mutation.ts
+++ b/apps/studio/data/organizations/organization-payment-method-delete-mutation.ts
@@ -1,6 +1,6 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
 import { del, handleError } from 'data/fetchers'
+import { toast } from 'sonner'
 import type { ResponseError } from 'types'
 import { organizationKeys } from './keys'
 
diff --git a/apps/studio/data/organizations/organization-payment-method-setup-intent-mutation.ts b/apps/studio/data/organizations/organization-payment-method-setup-intent-mutation.ts
index 2eca3ada4da..2901a12c837 100644
--- a/apps/studio/data/organizations/organization-payment-method-setup-intent-mutation.ts
+++ b/apps/studio/data/organizations/organization-payment-method-setup-intent-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/organizations/organization-tax-id-update-mutation.ts b/apps/studio/data/organizations/organization-tax-id-update-mutation.ts
index cef8a6b336c..0af1701d696 100644
--- a/apps/studio/data/organizations/organization-tax-id-update-mutation.ts
+++ b/apps/studio/data/organizations/organization-tax-id-update-mutation.ts
@@ -1,9 +1,9 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
+import { del, handleError, put } from 'data/fetchers'
 import type { ResponseError } from 'types'
 import { organizationKeys } from './keys'
-import { put, del, handleError } from 'data/fetchers'
 
 export type OrganizationTaxIdUpdateVariables = {
   slug: string
diff --git a/apps/studio/data/organizations/organization-update-mutation.ts b/apps/studio/data/organizations/organization-update-mutation.ts
index f6d9c9ba31b..ebd346df750 100644
--- a/apps/studio/data/organizations/organization-update-mutation.ts
+++ b/apps/studio/data/organizations/organization-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, patch } from 'data/fetchers'
diff --git a/apps/studio/data/pg-sodium-keys/pg-sodium-key-create-mutation.ts b/apps/studio/data/pg-sodium-keys/pg-sodium-key-create-mutation.ts
index 0bb24027091..d92bb1c6cb4 100644
--- a/apps/studio/data/pg-sodium-keys/pg-sodium-key-create-mutation.ts
+++ b/apps/studio/data/pg-sodium-keys/pg-sodium-key-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { executeSql } from 'data/sql/execute-sql-query'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/pg-sodium-keys/pg-sodium-key-delete-mutation.ts b/apps/studio/data/pg-sodium-keys/pg-sodium-key-delete-mutation.ts
index e6dfb8cfc0c..b88e1038142 100644
--- a/apps/studio/data/pg-sodium-keys/pg-sodium-key-delete-mutation.ts
+++ b/apps/studio/data/pg-sodium-keys/pg-sodium-key-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Query } from 'components/grid/query/Query'
 import { executeSql } from 'data/sql/execute-sql-query'
diff --git a/apps/studio/data/privileges/column-privileges-grant-mutation.ts b/apps/studio/data/privileges/column-privileges-grant-mutation.ts
index 3bfdc4c953f..aa1a4cc92c5 100644
--- a/apps/studio/data/privileges/column-privileges-grant-mutation.ts
+++ b/apps/studio/data/privileges/column-privileges-grant-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/privileges/column-privileges-revoke-mutation.ts b/apps/studio/data/privileges/column-privileges-revoke-mutation.ts
index 142410bf9d3..c1e68a62d23 100644
--- a/apps/studio/data/privileges/column-privileges-revoke-mutation.ts
+++ b/apps/studio/data/privileges/column-privileges-revoke-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { del, handleError } from 'data/fetchers'
diff --git a/apps/studio/data/privileges/table-privileges-grant-mutation.ts b/apps/studio/data/privileges/table-privileges-grant-mutation.ts
index 33781bd794a..bd44e9b5ed7 100644
--- a/apps/studio/data/privileges/table-privileges-grant-mutation.ts
+++ b/apps/studio/data/privileges/table-privileges-grant-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/privileges/table-privileges-revoke-mutation.ts b/apps/studio/data/privileges/table-privileges-revoke-mutation.ts
index 546d1cd1eb1..888d2780c03 100644
--- a/apps/studio/data/privileges/table-privileges-revoke-mutation.ts
+++ b/apps/studio/data/privileges/table-privileges-revoke-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { del, handleError } from 'data/fetchers'
diff --git a/apps/studio/data/profile/mfa-challenge-and-verify-mutation.ts b/apps/studio/data/profile/mfa-challenge-and-verify-mutation.ts
index 88b90bf0b24..b70a7e5ab9e 100644
--- a/apps/studio/data/profile/mfa-challenge-and-verify-mutation.ts
+++ b/apps/studio/data/profile/mfa-challenge-and-verify-mutation.ts
@@ -1,7 +1,7 @@
 import * as Sentry from '@sentry/nextjs'
 import type { AuthMFAVerifyResponse, MFAChallengeAndVerifyParams } from '@supabase/supabase-js'
 import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { auth } from 'lib/gotrue'
 import { profileKeys } from './keys'
diff --git a/apps/studio/data/profile/mfa-enroll-mutation.ts b/apps/studio/data/profile/mfa-enroll-mutation.ts
index 905f0a18c2c..f8ffe96020b 100644
--- a/apps/studio/data/profile/mfa-enroll-mutation.ts
+++ b/apps/studio/data/profile/mfa-enroll-mutation.ts
@@ -1,7 +1,7 @@
 import type { AuthMFAEnrollResponse, MFAEnrollParams } from '@supabase/supabase-js'
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
 import { auth } from 'lib/gotrue'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 const mfaEnroll = async (params: MFAEnrollParams) => {
   const { error, data } = await auth.mfa.enroll(params)
diff --git a/apps/studio/data/profile/mfa-unenroll-mutation.ts b/apps/studio/data/profile/mfa-unenroll-mutation.ts
index 581d83a78f5..4b88df07476 100644
--- a/apps/studio/data/profile/mfa-unenroll-mutation.ts
+++ b/apps/studio/data/profile/mfa-unenroll-mutation.ts
@@ -1,8 +1,8 @@
 import type { AuthMFAUnenrollResponse, MFAUnenrollParams } from '@supabase/supabase-js'
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { auth } from 'lib/gotrue'
+import { toast } from 'sonner'
 import { profileKeys } from './keys'
-import { toast } from 'react-hot-toast'
 
 const mfaUnenroll = async (params: MFAUnenrollParams) => {
   const { error, data } = await auth.mfa.unenroll(params)
diff --git a/apps/studio/data/profile/profile-create-mutation.ts b/apps/studio/data/profile/profile-create-mutation.ts
index cecd1ad8276..f4c674300d2 100644
--- a/apps/studio/data/profile/profile-create-mutation.ts
+++ b/apps/studio/data/profile/profile-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { organizationKeys } from 'data/organizations/keys'
 import { permissionKeys } from 'data/permissions/keys'
diff --git a/apps/studio/data/profile/profile-update-mutation.ts b/apps/studio/data/profile/profile-update-mutation.ts
index 47e4412a749..06f895cfb8f 100644
--- a/apps/studio/data/profile/profile-update-mutation.ts
+++ b/apps/studio/data/profile/profile-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/projects/project-by-fly-extension-id-mutation.ts b/apps/studio/data/projects/project-by-fly-extension-id-mutation.ts
index 5ad93765553..efbd08546c1 100644
--- a/apps/studio/data/projects/project-by-fly-extension-id-mutation.ts
+++ b/apps/studio/data/projects/project-by-fly-extension-id-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { get, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/projects/project-create-mutation.ts b/apps/studio/data/projects/project-create-mutation.ts
index 8484041d65c..d6e2bbe2eff 100644
--- a/apps/studio/data/projects/project-create-mutation.ts
+++ b/apps/studio/data/projects/project-create-mutation.ts
@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/nextjs'
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/projects/project-delete-mutation.ts b/apps/studio/data/projects/project-delete-mutation.ts
index b3dd4a0293e..3d298680edd 100644
--- a/apps/studio/data/projects/project-delete-mutation.ts
+++ b/apps/studio/data/projects/project-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/projects/project-pause-mutation.ts b/apps/studio/data/projects/project-pause-mutation.ts
index 8d56dad2b42..9cdbc0ed963 100644
--- a/apps/studio/data/projects/project-pause-mutation.ts
+++ b/apps/studio/data/projects/project-pause-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/projects/project-restart-mutation.ts b/apps/studio/data/projects/project-restart-mutation.ts
index edbe551b304..719fc965c1b 100644
--- a/apps/studio/data/projects/project-restart-mutation.ts
+++ b/apps/studio/data/projects/project-restart-mutation.ts
@@ -1,9 +1,9 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
+import type { components } from 'api-types'
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
-import type { components } from 'api-types'
 
 export type ProjectRestartVariables = {
   ref: string
diff --git a/apps/studio/data/projects/project-restart-services-mutation.ts b/apps/studio/data/projects/project-restart-services-mutation.ts
index 6904742c8c8..1adb15c4bc3 100644
--- a/apps/studio/data/projects/project-restart-services-mutation.ts
+++ b/apps/studio/data/projects/project-restart-services-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/projects/project-restore-mutation.ts b/apps/studio/data/projects/project-restore-mutation.ts
index df62b811901..5747e34b332 100644
--- a/apps/studio/data/projects/project-restore-mutation.ts
+++ b/apps/studio/data/projects/project-restore-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/projects/project-transfer-mutation.ts b/apps/studio/data/projects/project-transfer-mutation.ts
index ba32612470d..2a53c8ed3f3 100644
--- a/apps/studio/data/projects/project-transfer-mutation.ts
+++ b/apps/studio/data/projects/project-transfer-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/projects/project-update-mutation.ts b/apps/studio/data/projects/project-update-mutation.ts
index 00f4d457f5e..5ac17aa3a4e 100644
--- a/apps/studio/data/projects/project-update-mutation.ts
+++ b/apps/studio/data/projects/project-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/projects/project-upgrade-mutation.ts b/apps/studio/data/projects/project-upgrade-mutation.ts
index 44c4f678c35..e2ef8352c83 100644
--- a/apps/studio/data/projects/project-upgrade-mutation.ts
+++ b/apps/studio/data/projects/project-upgrade-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/read-replicas/replica-remove-mutation.ts b/apps/studio/data/read-replicas/replica-remove-mutation.ts
index 99b211d39c2..75605f44f52 100644
--- a/apps/studio/data/read-replicas/replica-remove-mutation.ts
+++ b/apps/studio/data/read-replicas/replica-remove-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/read-replicas/replica-setup-mutation.ts b/apps/studio/data/read-replicas/replica-setup-mutation.ts
index d0a9b142dc0..64b2adfdbdc 100644
--- a/apps/studio/data/read-replicas/replica-setup-mutation.ts
+++ b/apps/studio/data/read-replicas/replica-setup-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/secrets/secrets-create-mutation.ts b/apps/studio/data/secrets/secrets-create-mutation.ts
index 8c663154c78..dc02c8a212b 100644
--- a/apps/studio/data/secrets/secrets-create-mutation.ts
+++ b/apps/studio/data/secrets/secrets-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/secrets/secrets-delete-mutation.ts b/apps/studio/data/secrets/secrets-delete-mutation.ts
index 5029d2aa14f..9ce21fbd6b1 100644
--- a/apps/studio/data/secrets/secrets-delete-mutation.ts
+++ b/apps/studio/data/secrets/secrets-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/sql/abort-query-mutation.ts b/apps/studio/data/sql/abort-query-mutation.ts
index 866e183db26..944d2750231 100644
--- a/apps/studio/data/sql/abort-query-mutation.ts
+++ b/apps/studio/data/sql/abort-query-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { executeSql } from 'data/sql/execute-sql-query'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/sql/execute-sql-mutation.ts b/apps/studio/data/sql/execute-sql-mutation.ts
index 51a9370643b..75ba20414cf 100644
--- a/apps/studio/data/sql/execute-sql-mutation.ts
+++ b/apps/studio/data/sql/execute-sql-mutation.ts
@@ -1,5 +1,5 @@
-import { toast } from 'react-hot-toast'
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { toast } from 'sonner'
 import { executeSql, ExecuteSqlData, ExecuteSqlVariables } from './execute-sql-query'
 
 export type QueryResponseError = {
diff --git a/apps/studio/data/ssl-enforcement/ssl-enforcement-update-mutation.ts b/apps/studio/data/ssl-enforcement/ssl-enforcement-update-mutation.ts
index e4b5d88f2ad..a301885b600 100644
--- a/apps/studio/data/ssl-enforcement/ssl-enforcement-update-mutation.ts
+++ b/apps/studio/data/ssl-enforcement/ssl-enforcement-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { put } from 'lib/common/fetch'
 import { API_ADMIN_URL } from 'lib/constants'
diff --git a/apps/studio/data/storage/bucket-create-mutation.ts b/apps/studio/data/storage/bucket-create-mutation.ts
index 16089a2a175..352e585fc29 100644
--- a/apps/studio/data/storage/bucket-create-mutation.ts
+++ b/apps/studio/data/storage/bucket-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/storage/bucket-delete-mutation.ts b/apps/studio/data/storage/bucket-delete-mutation.ts
index 63142b9c93c..b71cea5a3d5 100644
--- a/apps/studio/data/storage/bucket-delete-mutation.ts
+++ b/apps/studio/data/storage/bucket-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { delete_, post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/storage/bucket-empty-mutation.ts b/apps/studio/data/storage/bucket-empty-mutation.ts
index dfca2053adb..29d87a9496f 100644
--- a/apps/studio/data/storage/bucket-empty-mutation.ts
+++ b/apps/studio/data/storage/bucket-empty-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/storage/bucket-object-delete-mutation.ts b/apps/studio/data/storage/bucket-object-delete-mutation.ts
index 02dab04562d..20b80f10f03 100644
--- a/apps/studio/data/storage/bucket-object-delete-mutation.ts
+++ b/apps/studio/data/storage/bucket-object-delete-mutation.ts
@@ -1,7 +1,7 @@
 import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { del, handleError } from 'data/fetchers'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { ResponseError } from 'types'
 
 type DeleteBucketObjectParams = {
diff --git a/apps/studio/data/storage/bucket-object-download-mutation.ts b/apps/studio/data/storage/bucket-object-download-mutation.ts
index afbd37ad5df..896e5faac4a 100644
--- a/apps/studio/data/storage/bucket-object-download-mutation.ts
+++ b/apps/studio/data/storage/bucket-object-download-mutation.ts
@@ -1,5 +1,5 @@
 import { UseMutationOptions, useMutation } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { components } from 'data/api'
 import { post } from 'lib/common/fetch'
diff --git a/apps/studio/data/storage/bucket-object-get-public-url-mutation.ts b/apps/studio/data/storage/bucket-object-get-public-url-mutation.ts
index c5231e6ee40..a34a9ae108f 100644
--- a/apps/studio/data/storage/bucket-object-get-public-url-mutation.ts
+++ b/apps/studio/data/storage/bucket-object-get-public-url-mutation.ts
@@ -1,5 +1,5 @@
 import { UseMutationOptions, useMutation } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/storage/bucket-object-sign-mutation.ts b/apps/studio/data/storage/bucket-object-sign-mutation.ts
index a0d4c6d5df6..0fd305a3879 100644
--- a/apps/studio/data/storage/bucket-object-sign-mutation.ts
+++ b/apps/studio/data/storage/bucket-object-sign-mutation.ts
@@ -1,5 +1,5 @@
 import { UseMutationOptions, useMutation } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/storage/bucket-objects-list-mutation.ts b/apps/studio/data/storage/bucket-objects-list-mutation.ts
index e8c2ee38e08..9870e9b0bc2 100644
--- a/apps/studio/data/storage/bucket-objects-list-mutation.ts
+++ b/apps/studio/data/storage/bucket-objects-list-mutation.ts
@@ -1,5 +1,5 @@
 import { UseMutationOptions, useMutation } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/storage/bucket-update-mutation.ts b/apps/studio/data/storage/bucket-update-mutation.ts
index be17dd7f714..98cb6117e40 100644
--- a/apps/studio/data/storage/bucket-update-mutation.ts
+++ b/apps/studio/data/storage/bucket-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
diff --git a/apps/studio/data/storage/object-move-mutation.ts b/apps/studio/data/storage/object-move-mutation.ts
index fadf0c866fe..91f44e9f0c7 100644
--- a/apps/studio/data/storage/object-move-mutation.ts
+++ b/apps/studio/data/storage/object-move-mutation.ts
@@ -1,5 +1,5 @@
 import { UseMutationOptions, useMutation } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import { ResponseError } from 'types'
diff --git a/apps/studio/data/storage/s3-access-key-create-mutation.ts b/apps/studio/data/storage/s3-access-key-create-mutation.ts
index 9e34ae82b54..44372aae383 100644
--- a/apps/studio/data/storage/s3-access-key-create-mutation.ts
+++ b/apps/studio/data/storage/s3-access-key-create-mutation.ts
@@ -1,5 +1,5 @@
 import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import { ResponseError } from 'types'
diff --git a/apps/studio/data/storage/s3-access-key-delete-mutation.ts b/apps/studio/data/storage/s3-access-key-delete-mutation.ts
index ba28d8c6e2b..06b22c9676b 100644
--- a/apps/studio/data/storage/s3-access-key-delete-mutation.ts
+++ b/apps/studio/data/storage/s3-access-key-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import { ResponseError } from 'types'
diff --git a/apps/studio/data/stripe/setup-intent-mutation.ts b/apps/studio/data/stripe/setup-intent-mutation.ts
index 76f79fe8797..58c2ff859c8 100644
--- a/apps/studio/data/stripe/setup-intent-mutation.ts
+++ b/apps/studio/data/stripe/setup-intent-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/subscriptions/org-subscription-cancel-schedule-mutation.ts b/apps/studio/data/subscriptions/org-subscription-cancel-schedule-mutation.ts
index 893fc05197d..161c05277d1 100644
--- a/apps/studio/data/subscriptions/org-subscription-cancel-schedule-mutation.ts
+++ b/apps/studio/data/subscriptions/org-subscription-cancel-schedule-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/subscriptions/org-subscription-update-mutation.ts b/apps/studio/data/subscriptions/org-subscription-update-mutation.ts
index ee47f235d70..c8970e564a1 100644
--- a/apps/studio/data/subscriptions/org-subscription-update-mutation.ts
+++ b/apps/studio/data/subscriptions/org-subscription-update-mutation.ts
@@ -1,11 +1,11 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { handleError, put } from 'data/fetchers'
-import { toast } from 'react-hot-toast'
+import { invoicesKeys } from 'data/invoices/keys'
+import { usageKeys } from 'data/usage/keys'
+import { toast } from 'sonner'
 import type { ResponseError } from 'types/base'
 import { subscriptionKeys } from './keys'
-import { usageKeys } from 'data/usage/keys'
 import type { SubscriptionTier } from './types'
-import { invoicesKeys } from 'data/invoices/keys'
 
 export type OrgSubscriptionUpdateVariables = {
   slug: string
diff --git a/apps/studio/data/subscriptions/project-addon-remove-mutation.ts b/apps/studio/data/subscriptions/project-addon-remove-mutation.ts
index 59a6ce581a3..947d3015d93 100644
--- a/apps/studio/data/subscriptions/project-addon-remove-mutation.ts
+++ b/apps/studio/data/subscriptions/project-addon-remove-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/subscriptions/project-addon-update-mutation.ts b/apps/studio/data/subscriptions/project-addon-update-mutation.ts
index ca1974b04f8..257c088ad2c 100644
--- a/apps/studio/data/subscriptions/project-addon-update-mutation.ts
+++ b/apps/studio/data/subscriptions/project-addon-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/table-rows/get-cell-value-mutation.ts b/apps/studio/data/table-rows/get-cell-value-mutation.ts
index cab9afe0ffc..096a2771e40 100644
--- a/apps/studio/data/table-rows/get-cell-value-mutation.ts
+++ b/apps/studio/data/table-rows/get-cell-value-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Query } from 'components/grid/query/Query'
 import { executeSql } from 'data/sql/execute-sql-query'
diff --git a/apps/studio/data/table-rows/table-row-create-mutation.ts b/apps/studio/data/table-rows/table-row-create-mutation.ts
index 38087aee41e..d74111d52fe 100644
--- a/apps/studio/data/table-rows/table-row-create-mutation.ts
+++ b/apps/studio/data/table-rows/table-row-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Query } from 'components/grid/query/Query'
 import type { SupaTable } from 'components/grid/types'
diff --git a/apps/studio/data/table-rows/table-row-delete-all-mutation.ts b/apps/studio/data/table-rows/table-row-delete-all-mutation.ts
index 9255204aa6b..15a7ad0a6b3 100644
--- a/apps/studio/data/table-rows/table-row-delete-all-mutation.ts
+++ b/apps/studio/data/table-rows/table-row-delete-all-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Query } from 'components/grid/query/Query'
 import type { Filter, SupaTable } from 'components/grid/types'
diff --git a/apps/studio/data/table-rows/table-row-delete-mutation.tsx b/apps/studio/data/table-rows/table-row-delete-mutation.tsx
index e0e3cf3e519..4776e1ea881 100644
--- a/apps/studio/data/table-rows/table-row-delete-mutation.tsx
+++ b/apps/studio/data/table-rows/table-row-delete-mutation.tsx
@@ -1,7 +1,7 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { ExternalLink } from 'lucide-react'
-import { toast } from 'react-hot-toast'
-import { Button, toast as UiToast } from 'ui'
+import { toast } from 'sonner'
+import { Button } from 'ui'
 
 import { Query } from 'components/grid/query/Query'
 import type { SupaRow } from 'components/grid/types'
@@ -99,12 +99,7 @@ export const useTableRowDeleteMutation = ({
               : `Unable to delete row as it is currently referenced by a foreign key constraint from the table \`${referencingTable}\`.`
             const resolutionCTA = `Set an on delete behavior on the foreign key relation \`${fkName}\` in the \`${referencingTable}\` table to automatically respond when row(s) are being deleted in the \`${sourceTable}\` table.`
 
-            UiToast({
-              variant: 'default',
-              style: { flexDirection: 'column' },
-              title: (
-                
-              ) as any,
+            toast(initialMessage, {
               description: ,
               action: (
                 

@@ -127,32 +122,24 @@ export const useTableRowDeleteMutation = ({
               ),
             })
           } else if (isPkError) {
-            UiToast({
-              variant: 'default',
-              style: { flexDirection: 'column' },
-              title: (
-                
-              ) as any,
+            toast('Unable to delete row(s) as table has no primary keys', {
               description: (
-                
-              ),
-              action: (
-                

-                  
+                

+                  

+                    Add a primary key column to your table first to serve as a unique identifier for
+                    each row before updating or deleting the row.
+                  

+                  
                 

               ),
             })
diff --git a/apps/studio/data/table-rows/table-row-truncate-mutation.ts b/apps/studio/data/table-rows/table-row-truncate-mutation.ts
index 63b40f11fe9..1fe593a63bf 100644
--- a/apps/studio/data/table-rows/table-row-truncate-mutation.ts
+++ b/apps/studio/data/table-rows/table-row-truncate-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Query } from 'components/grid/query/Query'
 import type { SupaTable } from 'components/grid/types'
diff --git a/apps/studio/data/table-rows/table-row-update-mutation.ts b/apps/studio/data/table-rows/table-row-update-mutation.ts
index 2ef98e89daf..cd6fdc8e403 100644
--- a/apps/studio/data/table-rows/table-row-update-mutation.ts
+++ b/apps/studio/data/table-rows/table-row-update-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Query } from 'components/grid/query/Query'
 import type { SupaTable } from 'components/grid/types'
diff --git a/apps/studio/data/tables/table-create-mutation.ts b/apps/studio/data/tables/table-create-mutation.ts
index 9678ed1e4e1..f4459ba9bd3 100644
--- a/apps/studio/data/tables/table-create-mutation.ts
+++ b/apps/studio/data/tables/table-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
diff --git a/apps/studio/data/tables/table-delete-mutation.ts b/apps/studio/data/tables/table-delete-mutation.ts
index 1f445aca64d..2c4d98089d5 100644
--- a/apps/studio/data/tables/table-delete-mutation.ts
+++ b/apps/studio/data/tables/table-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { entityTypeKeys } from 'data/entity-types/keys'
 import { del, handleError } from 'data/fetchers'
diff --git a/apps/studio/data/tables/table-update-mutation.ts b/apps/studio/data/tables/table-update-mutation.ts
index b083658c86c..bffdf683d7c 100644
--- a/apps/studio/data/tables/table-update-mutation.ts
+++ b/apps/studio/data/tables/table-update-mutation.ts
@@ -1,11 +1,11 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import type { components } from 'data/api'
 import { handleError, patch } from 'data/fetchers'
+import { lintKeys } from 'data/lint/keys'
 import type { ResponseError } from 'types'
 import { tableKeys } from './keys'
-import { lintKeys } from 'data/lint/keys'
 
 export type UpdateTableBody = components['schemas']['UpdateTableBody']
 
diff --git a/apps/studio/data/third-party-auth/integration-create-mutation.ts b/apps/studio/data/third-party-auth/integration-create-mutation.ts
index 9bfe4541eb2..1e240b6bbaa 100644
--- a/apps/studio/data/third-party-auth/integration-create-mutation.ts
+++ b/apps/studio/data/third-party-auth/integration-create-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/third-party-auth/integration-delete-mutation.ts b/apps/studio/data/third-party-auth/integration-delete-mutation.ts
index 5675fe9210f..16312b81255 100644
--- a/apps/studio/data/third-party-auth/integration-delete-mutation.ts
+++ b/apps/studio/data/third-party-auth/integration-delete-mutation.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
diff --git a/apps/studio/data/vault/vault-secret-create-mutation.ts b/apps/studio/data/vault/vault-secret-create-mutation.ts
index e51387351e0..407404c12d1 100644
--- a/apps/studio/data/vault/vault-secret-create-mutation.ts
+++ b/apps/studio/data/vault/vault-secret-create-mutation.ts
@@ -1,11 +1,11 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Query } from 'components/grid/query/Query'
 import { executeSql } from 'data/sql/execute-sql-query'
+import { sqlKeys } from 'data/sql/keys'
 import type { ResponseError, VaultSecret } from 'types'
 import { vaultSecretsKeys } from './keys'
-import { sqlKeys } from 'data/sql/keys'
 
 export type VaultSecretCreateVariables = {
   projectRef: string
diff --git a/apps/studio/data/vault/vault-secret-delete-mutation.ts b/apps/studio/data/vault/vault-secret-delete-mutation.ts
index 0532ef5ab3b..d6d0cff6db9 100644
--- a/apps/studio/data/vault/vault-secret-delete-mutation.ts
+++ b/apps/studio/data/vault/vault-secret-delete-mutation.ts
@@ -1,11 +1,11 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Query } from 'components/grid/query/Query'
 import { executeSql } from 'data/sql/execute-sql-query'
+import { sqlKeys } from 'data/sql/keys'
 import type { ResponseError } from 'types'
 import { vaultSecretsKeys } from './keys'
-import { sqlKeys } from 'data/sql/keys'
 
 export type VaultSecretDeleteVariables = {
   projectRef: string
diff --git a/apps/studio/data/vault/vault-secret-update-mutation.ts b/apps/studio/data/vault/vault-secret-update-mutation.ts
index c8ba8fcf1ad..a2d0b441c45 100644
--- a/apps/studio/data/vault/vault-secret-update-mutation.ts
+++ b/apps/studio/data/vault/vault-secret-update-mutation.ts
@@ -1,11 +1,11 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { Query } from 'components/grid/query/Query'
 import { executeSql } from 'data/sql/execute-sql-query'
+import { sqlKeys } from 'data/sql/keys'
 import type { ResponseError, VaultSecret } from 'types'
 import { vaultSecretsKeys } from './keys'
-import { sqlKeys } from 'data/sql/keys'
 
 export type VaultSecretUpdateVariables = {
   projectRef: string
diff --git a/apps/studio/hooks/misc/withAuth.tsx b/apps/studio/hooks/misc/withAuth.tsx
index da864ede682..e376b13d981 100644
--- a/apps/studio/hooks/misc/withAuth.tsx
+++ b/apps/studio/hooks/misc/withAuth.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { ComponentType, useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useAuthenticatorAssuranceLevelQuery } from 'data/profile/mfa-authenticator-assurance-level-query'
diff --git a/apps/studio/lib/auth.tsx b/apps/studio/lib/auth.tsx
index a51c975ba20..e943b89c5ef 100644
--- a/apps/studio/lib/auth.tsx
+++ b/apps/studio/lib/auth.tsx
@@ -1,7 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { AuthProvider as AuthProviderInternal, gotrueClient } from 'common'
 import { PropsWithChildren, useCallback, useEffect } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { GOTRUE_ERRORS, IS_PLATFORM } from './constants'
 import { clearLocalStorage } from './local-storage'
diff --git a/apps/studio/lib/helpers.ts b/apps/studio/lib/helpers.ts
index 0cbe92c4fa5..6ca37af675d 100644
--- a/apps/studio/lib/helpers.ts
+++ b/apps/studio/lib/helpers.ts
@@ -1,5 +1,5 @@
 import { noop } from 'lodash'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 export { default as passwordStrength } from './password-strength'
 export { default as uuidv4 } from './uuid'
diff --git a/apps/studio/lib/password-strength.ts b/apps/studio/lib/password-strength.ts
index d1da5a4255e..2d4defad5c9 100644
--- a/apps/studio/lib/password-strength.ts
+++ b/apps/studio/lib/password-strength.ts
@@ -1,6 +1,6 @@
 import { post } from 'lib/common/fetch'
 import { API_URL, DEFAULT_MINIMUM_PASSWORD_STRENGTH, PASSWORD_STRENGTH } from 'lib/constants'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 export default async function passwordStrength(value: string) {
   let message: string = ''
diff --git a/apps/studio/lib/profile.tsx b/apps/studio/lib/profile.tsx
index 598d1db0aff..2d10bc3afb8 100644
--- a/apps/studio/lib/profile.tsx
+++ b/apps/studio/lib/profile.tsx
@@ -1,7 +1,7 @@
 import { useIsLoggedIn, useTelemetryProps } from 'common'
 import { useRouter } from 'next/router'
 import { PropsWithChildren, createContext, useContext, useMemo } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useProfileCreateMutation } from 'data/profile/profile-create-mutation'
diff --git a/apps/studio/localStores/storageExplorer/StorageExplorerStore.tsx b/apps/studio/localStores/storageExplorer/StorageExplorerStore.tsx
index 02ded63ebf8..336f18ba7c9 100644
--- a/apps/studio/localStores/storageExplorer/StorageExplorerStore.tsx
+++ b/apps/studio/localStores/storageExplorer/StorageExplorerStore.tsx
@@ -1,8 +1,8 @@
 import { SupabaseClient, createClient } from '@supabase/supabase-js'
 import { BlobReader, BlobWriter, ZipWriter } from '@zip.js/zip.js'
 import { chunk, compact, find, findIndex, has, isEqual, isObject, uniq, uniqBy } from 'lodash'
-import { makeAutoObservable, toJS } from 'mobx'
-import toast from 'react-hot-toast'
+import { makeAutoObservable } from 'mobx'
+import { toast } from 'sonner'
 import * as tus from 'tus-js-client'
 
 import {
@@ -19,7 +19,6 @@ import {
   StorageItemWithColumn,
 } from 'components/to-be-cleaned/Storage/Storage.types'
 import { convertFromBytes } from 'components/to-be-cleaned/Storage/StorageSettings/StorageSettings.utils'
-import { ToastLoader } from 'components/ui/ToastLoader'
 import { configKeys } from 'data/config/keys'
 import { ProjectStorageConfigResponse } from 'data/config/project-storage-config-query'
 import { getQueryClient } from 'data/query-client'
@@ -33,7 +32,7 @@ import { moveStorageObject } from 'data/storage/object-move-mutation'
 import { IS_PLATFORM } from 'lib/constants'
 import { lookupMime } from 'lib/mime'
 import { PROJECT_ENDPOINT_PROTOCOL } from 'pages/api/constants'
-import { Button, toast as UiToast } from 'ui'
+import { Button, SONNER_DEFAULT_DURATION, SonnerProgress } from 'ui'
 
 type CachedFile = { id: string; fetchedAt: number; expiresIn: number; url: string }
 
@@ -306,11 +305,7 @@ class StorageExplorerStore {
     if (formattedName === null) return
 
     if (!/^[a-zA-Z0-9_-\s]*$/.test(formattedName)) {
-      return UiToast({
-        variant: 'destructive',
-        description: 'Folder name contains invalid special characters',
-        duration: 6000,
-      })
+      return toast.error('Folder name contains invalid special characters')
     }
 
     if (formattedName.length === 0) {
@@ -441,7 +436,7 @@ class StorageExplorerStore {
 
   // https://stackoverflow.com/a/53058574
   private getFilesDataTransferItems = async (items: DataTransferItemList) => {
-    const { dismiss } = UiToast({ description: 'Retrieving items to upload...' })
+    const toastId = toast('Retrieving items to upload...')
     const files: (File & { path: string })[] = []
     const queue: FileSystemEntry[] = []
     for (const item of items) {
@@ -464,7 +459,7 @@ class StorageExplorerStore {
         queue.push(...(await this.readAllDirectoryEntries(dirEntry.createReader())))
       }
     }
-    dismiss()
+    toast.dismiss(toastId)
     return files
   }
 
@@ -493,22 +488,20 @@ class StorageExplorerStore {
     }
   }
 
-  onUploadProgress(toastId?: string) {
+  onUploadProgress(toastId?: string | number) {
     const totalFiles = this.uploadProgresses.length
     const progress =
       (this.uploadProgresses.reduce((acc, { percentage }) => acc + percentage, 0) / totalFiles) *
       100
     const remainingTime = this.calculateTotalRemainingTime(this.uploadProgresses)
 
-    return toast.loading(
-       1 ? 's' : ''}...`}
-        labelTopOverride={`${remainingTime && !isNaN(remainingTime) && isFinite(remainingTime) ? `${this.formatTime(remainingTime)} remaining – ` : ''}${progress.toFixed(2)}%`}
-      >
-        

-          
{STORAGE_PROGRESS_INFO_TEXT}

-          {toastId && (
+        progressPrefix={`${remainingTime && !isNaN(remainingTime) && isFinite(remainingTime) && remainingTime !== 0 ? `${this.formatTime(remainingTime)} remaining – ` : ''}`}
+        action={
+          toastId && (
             
-          )}
-        

-      ,
-      { id: toastId }
+          )
+        }
+      />,
+      { id: toastId, closeButton: false, position: 'bottom-right' }
     )
   }
 
@@ -568,8 +561,7 @@ class StorageExplorerStore {
           

             You may change the file size upload limit under Storage in Project Settings.
           

-        
,
-        { duration: 8000 }
+        

       )
 
       if (numberOfFilesRejected === filesToUpload.length) return
@@ -585,8 +577,7 @@ class StorageExplorerStore {
             {numberOfFilesRejected > 1 ? 'their' : 'its'} size
             {numberOfFilesRejected > 1 ? 's are' : ' is'} 0.
           

-        
,
-        { duration: 8000 }
+        
       )
 
       if (numberOfFilesRejected === filesWithinUploadLimit.length) return
@@ -822,25 +813,29 @@ class StorageExplorerStore {
       } else if (numberOfFilesUploadedFail === numberOfFilesToUpload) {
         toast.error(
           `Failed to upload ${numberOfFilesToUpload} file${numberOfFilesToUpload > 1 ? 's' : ''}!`,
-          { id: toastId }
+          { id: toastId, closeButton: true, duration: SONNER_DEFAULT_DURATION }
         )
       } else if (numberOfFilesUploadedSuccess === numberOfFilesToUpload) {
         toast.success(
           `Successfully uploaded ${numberOfFilesToUpload} file${
             numberOfFilesToUpload > 1 ? 's' : ''
           }!`,
-          { id: toastId }
+          { id: toastId, closeButton: true, duration: SONNER_DEFAULT_DURATION }
         )
       } else {
         toast.success(
           `Successfully uploaded ${numberOfFilesUploadedSuccess} out of ${numberOfFilesToUpload} file${
             numberOfFilesToUpload > 1 ? 's' : ''
           }!`,
-          { id: toastId }
+          { id: toastId, closeButton: true, duration: SONNER_DEFAULT_DURATION }
         )
       }
     } catch (e) {
-      toast.error('Failed to upload files', { id: toastId })
+      toast.error('Failed to upload files', {
+        id: toastId,
+        closeButton: true,
+        duration: SONNER_DEFAULT_DURATION,
+      })
     }
 
     const t2 = new Date()
@@ -849,7 +844,7 @@ class StorageExplorerStore {
     )
   }
 
-  abortUploads = (toastId: string) => {
+  abortUploads = (toastId: string | number) => {
     this.abortUploadCallbacks[toastId].forEach((callback) => callback())
     this.abortUploadCallbacks[toastId] = []
   }
@@ -860,8 +855,7 @@ class StorageExplorerStore {
     let numberOfFilesMovedFail = 0
     this.clearSelectedItems()
 
-    const { dismiss } = UiToast({
-      description: STORAGE_PROGRESS_INFO_TEXT,
+    const toastId = toast(STORAGE_PROGRESS_INFO_TEXT, {
       duration: Infinity,
     })
 
@@ -891,16 +885,16 @@ class StorageExplorerStore {
     )
 
     if (numberOfFilesMovedFail === this.selectedItemsToMove.length) {
-      UiToast({ variant: 'destructive', description: 'Failed to move files' })
+      toast.error('Failed to move files')
     } else {
-      UiToast({
-        description: `Successfully moved ${
+      toast(
+        `Successfully moved ${
           this.selectedItemsToMove.length - numberOfFilesMovedFail
-        } files to ${formattedNewPathToFile.length > 0 ? formattedNewPathToFile : 'the root of your bucket'}`,
-      })
+        } files to ${formattedNewPathToFile.length > 0 ? formattedNewPathToFile : 'the root of your bucket'}`
+      )
     }
 
-    dismiss()
+    toast.dismiss(toastId)
 
     // Clear file preview cache if moved files exist in cache
     const idsOfItemsToMove = this.selectedItemsToMove.map((item) => item.id)
@@ -969,10 +963,9 @@ class StorageExplorerStore {
 
     this.clearSelectedItems()
 
-    const toastId = toast.loading(
-      
-        
{STORAGE_PROGRESS_INFO_TEXT}

-      
+    const toastId = toast(
+      ,
+      { closeButton: false, position: 'bottom-right' }
     )
 
     // batch BATCH_SIZE prefixes per request
@@ -989,11 +982,12 @@ class StorageExplorerStore {
     await chunk(batches, BATCH_SIZE).reduce(async (previousPromise, nextBatch) => {
       await previousPromise
       await Promise.all(nextBatch.map((batch) => batch()))
-      toast.loading(
-        
-          
{STORAGE_PROGRESS_INFO_TEXT}

-        ,
-        { id: toastId }
+      toast(
+        ,
+        { id: toastId, closeButton: false, position: 'bottom-right' }
       )
     }, Promise.resolve())
 
@@ -1015,7 +1009,12 @@ class StorageExplorerStore {
       await Promise.all(
         parentFolderPrefixes.map((prefix) => this.validateParentFolderEmpty(prefix))
       )
-      toast.success(`Successfully deleted ${prefixes.length} file(s)`, { id: toastId })
+
+      toast.success(`Successfully deleted ${prefixes.length} file(s)`, {
+        id: toastId,
+        closeButton: true,
+        duration: SONNER_DEFAULT_DURATION,
+      })
       await this.refetchAllOpenedFolders()
       this.clearSelectedItemsToDelete()
     } else {
@@ -1030,14 +1029,12 @@ class StorageExplorerStore {
     try {
       const files = await this.getAllItemsAlongFolder(folder)
 
-      toast.loading(
-         1 ? 's' : ''}...`}
-        >
-          
{STORAGE_PROGRESS_INFO_TEXT}

-        ,
-        { id: toastId }
+        />,
+        { id: toastId, closeButton: false, position: 'bottom-right' }
       )
 
       const promises = files.map((file) => {
@@ -1078,14 +1075,12 @@ class StorageExplorerStore {
         async (previousPromise, nextBatch) => {
           const previousResults = await previousPromise
           const batchResults = await Promise.allSettled(nextBatch.map((batch) => batch()))
-          toast.loading(
-             1 ? 's' : ''}...`}
-            >
-              
{STORAGE_PROGRESS_INFO_TEXT}

-            ,
-            { id: toastId }
+            />,
+            { id: toastId, closeButton: false, position: 'bottom-right' }
           )
           return previousResults.concat(batchResults.map((x: any) => x.value).filter(Boolean))
         },
@@ -1102,7 +1097,11 @@ class StorageExplorerStore {
       const zipWriter = new ZipWriter(zipFileWriter, { bufferedWrite: true })
 
       if (downloadedFiles.length === 0) {
-        toast.error(`Failed to download files from "${folder.name}"`, { id: toastId })
+        toast.error(`Failed to download files from "${folder.name}"`, {
+          id: toastId,
+          closeButton: true,
+          duration: SONNER_DEFAULT_DURATION,
+        })
       }
 
       downloadedFiles.forEach((file) => {
@@ -1123,10 +1122,14 @@ class StorageExplorerStore {
           : `Downloaded folder "${folder.name}". However, ${
               files.length - downloadedFiles.length
             } files did not download successfully.`,
-        { id: toastId }
+        { id: toastId, closeButton: true, duration: SONNER_DEFAULT_DURATION }
       )
     } catch (error: any) {
-      toast.error(`Failed to download folder: ${error.message}`, { id: toastId })
+      toast.error(`Failed to download folder: ${error.message}`, {
+        id: toastId,
+        closeButton: true,
+        duration: SONNER_DEFAULT_DURATION,
+      })
     }
   }
 
@@ -1167,14 +1170,12 @@ class StorageExplorerStore {
     const downloadedFiles = await batchedPromises.reduce(async (previousPromise, nextBatch) => {
       const previousResults = await previousPromise
       const batchResults = await Promise.allSettled(nextBatch.map((batch) => batch()))
-      toast.loading(
-         1 ? 's' : ''}...`}
-        >
-          
{STORAGE_PROGRESS_INFO_TEXT}

-        ,
-        { id: toastId }
+        />,
+        { id: toastId, closeButton: false, position: 'bottom-right' }
       )
       return previousResults.concat(batchResults.map((x: any) => x.value).filter(Boolean))
     }, Promise.resolve<{ name: string; blob: Blob }[]>([]))
@@ -1193,7 +1194,11 @@ class StorageExplorerStore {
     link.click()
     link.parentNode?.removeChild(link)
 
-    toast.success(`Successfully downloaded ${downloadedFiles.length} files`, { id: toastId })
+    toast.success(`Successfully downloaded ${downloadedFiles.length} files`, {
+      id: toastId,
+      closeButton: true,
+      duration: SONNER_DEFAULT_DURATION,
+    })
   }
 
   downloadFile = async (file: StorageItemWithColumn, showToast = true, returnBlob = false) => {
@@ -1228,12 +1233,20 @@ class StorageExplorerStore {
       link.parentNode?.removeChild(link)
       window.URL.revokeObjectURL(blob)
       if (toastId) {
-        toast.success(`Downloading ${fileName}`, { id: toastId })
+        toast.success(`Downloading ${fileName}`, {
+          id: toastId,
+          closeButton: true,
+          duration: SONNER_DEFAULT_DURATION,
+        })
       }
       return true
     } catch {
       if (toastId) {
-        toast.error(`Failed to download ${fileName}`, { id: toastId })
+        toast.error(`Failed to download ${fileName}`, {
+          id: toastId,
+          closeButton: true,
+          duration: SONNER_DEFAULT_DURATION,
+        })
       }
       return false
     }
@@ -1514,10 +1527,9 @@ class StorageExplorerStore {
       return this.updateRowStatus(originalName, STORAGE_ROW_STATUS.READY, columnIndex)
     }
 
-    const toastId = toast.loading(
-      
-        
{STORAGE_PROGRESS_INFO_TEXT}

-      
+    const toastId = toast(
+      ,
+      { closeButton: false, position: 'bottom-right' }
     )
 
     try {
@@ -1574,18 +1586,24 @@ class StorageExplorerStore {
       await batchedPromises.reduce(async (previousPromise, nextBatch) => {
         await previousPromise
         await Promise.all(nextBatch.map((batch) => batch()))
-        toast.loading(
-          
-            
{STORAGE_PROGRESS_INFO_TEXT}

-          ,
-          { id: toastId }
+        toast(
+          ,
+          { id: toastId, closeButton: false, position: 'bottom-right' }
         )
       }, Promise.resolve())
 
       if (!hasErrors) {
-        toast.success(`Successfully renamed folder to ${newName}`, { id: toastId })
+        toast.success(`Successfully renamed folder to ${newName}`, {
+          id: toastId,
+          closeButton: true,
+          duration: SONNER_DEFAULT_DURATION,
+        })
       } else {
-        toast.error(`Renamed folder to ${newName} with some errors`, { id: toastId })
+        toast.error(`Renamed folder to ${newName} with some errors`, {
+          id: toastId,
+          closeButton: true,
+          duration: SONNER_DEFAULT_DURATION,
+        })
       }
       await this.refetchAllOpenedFolders()
 
@@ -1596,7 +1614,11 @@ class StorageExplorerStore {
       )
       this.filePreviewCache = updatedFilePreviewCache
     } catch (e: any) {
-      toast.error(`Failed to rename folder to ${newName}: ${e.message}`, { id: toastId })
+      toast.error(`Failed to rename folder to ${newName}: ${e.message}`, {
+        id: toastId,
+        closeButton: true,
+        duration: SONNER_DEFAULT_DURATION,
+      })
     }
   }
 
diff --git a/apps/studio/package.json b/apps/studio/package.json
index f496c4d0e09..1a82489f6fb 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -89,7 +89,6 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
     "react-grid-layout": "^1.4.2",
-    "react-hot-toast": "^2.4.1",
     "react-inlinesvg": "^4.0.4",
     "react-intersection-observer": "^9.5.3",
     "react-markdown": "^8.0.3",
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index 96b37e0bf96..51080723c23 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -33,15 +33,12 @@ import utc from 'dayjs/plugin/utc'
 import Head from 'next/head'
 import { ErrorInfo, useEffect, useMemo, useRef, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
-import toast from 'react-hot-toast'
-import { PortalToast, Toaster } from 'ui'
-import { CommandProvider } from 'ui-patterns/CommandMenu'
-import { ConsentToast } from 'ui-patterns/ConsentToast'
+import { toast } from 'sonner'
 
 import MetaFaviconsPagesRouter from 'common/MetaFavicons/pages-router'
 import { AppBannerWrapper, RouteValidationWrapper } from 'components/interfaces/App'
-import { StudioCommandMenu } from 'components/interfaces/App/CommandMenu'
 import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
+import { StudioCommandMenu } from 'components/interfaces/App/CommandMenu'
 import { FeaturePreviewContextProvider } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import FeaturePreviewModal from 'components/interfaces/App/FeaturePreview/FeaturePreviewModal'
 import { GenerateSql } from 'components/interfaces/SqlGenerator/SqlGenerator'
@@ -55,6 +52,9 @@ import { ProfileProvider } from 'lib/profile'
 import { useAppStateSnapshot } from 'state/app-state'
 import HCaptchaLoadedStore from 'stores/hcaptcha-loaded-store'
 import { AppPropsWithLayout } from 'types'
+import { SonnerToaster } from 'ui'
+import { CommandProvider } from 'ui-patterns/CommandMenu'
+import { ConsentToast } from 'ui-patterns/ConsentToast'
 
 dayjs.extend(customParseFormat)
 dayjs.extend(utc)
@@ -82,7 +82,7 @@ loader.config({
 function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
   const snap = useAppStateSnapshot()
   const queryClient = useRootQueryClient()
-  const consentToastId = useRef()
+  const consentToastId = useRef()
 
   // [Joshen] Some issues with using createBrowserSupabaseClient
   const [supabase] = useState(() =>
@@ -184,6 +184,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                                 
                               
                             
+                            
                           
                         
                       
@@ -192,8 +193,6 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
                 
 
                 {!isTestEnv && }
-                {!isTestEnv && }
-                
                 {!isTestEnv && }
               
             
diff --git a/apps/studio/pages/authorize.tsx b/apps/studio/pages/authorize.tsx
index 54d31f672c4..2c23397a595 100644
--- a/apps/studio/pages/authorize.tsx
+++ b/apps/studio/pages/authorize.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import AuthorizeRequesterDetails from 'components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails'
 import APIAuthorizationLayout from 'components/layouts/APIAuthorizationLayout'
diff --git a/apps/studio/pages/cli/login.tsx b/apps/studio/pages/cli/login.tsx
index 149598cc8b9..7c3ed52dd68 100644
--- a/apps/studio/pages/cli/login.tsx
+++ b/apps/studio/pages/cli/login.tsx
@@ -6,7 +6,7 @@ import { withAuth } from 'hooks/misc/withAuth'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { NextPageWithLayout } from 'types'
 
 const CliLoginPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
index c0cf0bd4ef1..6daec1ed3de 100644
--- a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
+++ b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
@@ -3,7 +3,7 @@ import generator from 'generate-password-browser'
 import { debounce } from 'lodash'
 import { useRouter } from 'next/router'
 import { ChangeEvent, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Alert, Button, Checkbox, Input, Listbox } from 'ui'
 
 import { Markdown } from 'components/interfaces/Markdown'
diff --git a/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx
index 3cbfdb35052..774a985f9e1 100644
--- a/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx
+++ b/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx
@@ -1,6 +1,6 @@
 import { keyBy } from 'lodash'
 import { useCallback, useMemo } from 'react'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { ENV_VAR_RAW_KEYS } from 'components/interfaces/Integrations/Integrations-Vercel.constants'
diff --git a/apps/studio/pages/integrations/vercel/install.tsx b/apps/studio/pages/integrations/vercel/install.tsx
index ece4758e980..8f6cc81832c 100644
--- a/apps/studio/pages/integrations/vercel/install.tsx
+++ b/apps/studio/pages/integrations/vercel/install.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
diff --git a/apps/studio/pages/new/[slug].tsx b/apps/studio/pages/new/[slug].tsx
index c57d8e8fb67..d269a99f53c 100644
--- a/apps/studio/pages/new/[slug].tsx
+++ b/apps/studio/pages/new/[slug].tsx
@@ -7,7 +7,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { PopoverSeparator } from '@ui/components/shadcn/ui/popover'
diff --git a/apps/studio/pages/project/[ref]/api/graphiql.tsx b/apps/studio/pages/project/[ref]/api/graphiql.tsx
index 22891efeb20..a658863ddc5 100644
--- a/apps/studio/pages/project/[ref]/api/graphiql.tsx
+++ b/apps/studio/pages/project/[ref]/api/graphiql.tsx
@@ -2,7 +2,7 @@ import '@graphiql/react/dist/style.css'
 import { createGraphiQLFetcher, Fetcher } from '@graphiql/toolkit'
 import { useTheme } from 'next-themes'
 import { useMemo } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import ExtensionCard from 'components/interfaces/Database/Extensions/ExtensionCard'
diff --git a/apps/studio/pages/project/[ref]/database/column-privileges.tsx b/apps/studio/pages/project/[ref]/database/column-privileges.tsx
index 6f5ce98d958..49ecb1beb28 100644
--- a/apps/studio/pages/project/[ref]/database/column-privileges.tsx
+++ b/apps/studio/pages/project/[ref]/database/column-privileges.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
 import { XIcon } from 'lucide-react'
 import Link from 'next/link'
 import { useCallback, useMemo, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useFeaturePreviewContext } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import {
diff --git a/apps/studio/pages/project/[ref]/database/hooks.tsx b/apps/studio/pages/project/[ref]/database/hooks.tsx
index f80c83b901a..3bc6f1ad659 100644
--- a/apps/studio/pages/project/[ref]/database/hooks.tsx
+++ b/apps/studio/pages/project/[ref]/database/hooks.tsx
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import DeleteHookModal from 'components/interfaces/Database/Hooks/DeleteHookModal'
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/index.tsx b/apps/studio/pages/project/[ref]/logs/explorer/index.tsx
index cbb4731a1f6..2d45651735a 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/index.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/index.tsx
@@ -2,8 +2,9 @@ import { useParams } from 'common/hooks'
 import dayjs from 'dayjs'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
+import { IS_PLATFORM } from 'common'
 import {
   Button,
   Form,
@@ -13,41 +14,40 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from 'ui'
-import { IS_PLATFORM } from 'common'
 
-import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
-import LoadingOpacity from 'components/ui/LoadingOpacity'
-import ShimmerLine from 'components/ui/ShimmerLine'
-import { useContentInsertMutation } from 'data/content/content-insert-mutation'
-import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
-import useLogsQuery from 'hooks/analytics/useLogsQuery'
-import { useUpgradePrompt } from 'hooks/misc/useUpgradePrompt'
-import { LOCAL_STORAGE_KEYS } from 'lib/constants'
-import { uuidv4 } from 'lib/helpers'
-import type { LogSqlSnippets, NextPageWithLayout } from 'types'
-import { useWarehouseCollectionsQuery } from 'data/analytics/warehouse-collections-query'
-import LogsQueryPanel, { SourceType } from 'components/interfaces/Settings/Logs/LogsQueryPanel'
-import { createWarehouseQueryTemplates } from 'components/interfaces/Settings/Logs/Warehouse.utils'
-import {
-  maybeShowUpgradePrompt,
-  useEditorHints,
-} from 'components/interfaces/Settings/Logs/Logs.utils'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import {
-  DatePickerToFrom,
-  LogTemplate,
-  LogsWarning,
-} from 'components/interfaces/Settings/Logs/Logs.types'
-import { useWarehouseQueryQuery } from 'data/analytics/warehouse-query'
 import { useLocalStorage } from '@uidotdev/usehooks'
 import {
   LOGS_LARGE_DATE_RANGE_DAYS_THRESHOLD,
   LOGS_TABLES,
   TEMPLATES,
 } from 'components/interfaces/Settings/Logs/Logs.constants'
-import CodeEditor from 'components/ui/CodeEditor/CodeEditor'
+import {
+  DatePickerToFrom,
+  LogTemplate,
+  LogsWarning,
+} from 'components/interfaces/Settings/Logs/Logs.types'
+import {
+  maybeShowUpgradePrompt,
+  useEditorHints,
+} from 'components/interfaces/Settings/Logs/Logs.utils'
+import LogsQueryPanel, { SourceType } from 'components/interfaces/Settings/Logs/LogsQueryPanel'
 import LogTable from 'components/interfaces/Settings/Logs/LogTable'
+import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
+import { createWarehouseQueryTemplates } from 'components/interfaces/Settings/Logs/Warehouse.utils'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
+import CodeEditor from 'components/ui/CodeEditor/CodeEditor'
+import LoadingOpacity from 'components/ui/LoadingOpacity'
+import ShimmerLine from 'components/ui/ShimmerLine'
+import { useWarehouseCollectionsQuery } from 'data/analytics/warehouse-collections-query'
+import { useWarehouseQueryQuery } from 'data/analytics/warehouse-query'
+import { useContentInsertMutation } from 'data/content/content-insert-mutation'
+import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
+import useLogsQuery from 'hooks/analytics/useLogsQuery'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
+import { useUpgradePrompt } from 'hooks/misc/useUpgradePrompt'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { uuidv4 } from 'lib/helpers'
+import type { LogSqlSnippets, NextPageWithLayout } from 'types'
 
 const PLACEHOLDER_WAREHOUSE_QUERY =
   '-- Fetch the last 10 logs in the last 7 days \nselect id, timestamp, event_message from `COLLECTION_NAME` \nwhere timestamp > timestamp_sub(current_timestamp(), interval 7 day) \norder by timestamp desc limit 10'
diff --git a/apps/studio/pages/project/[ref]/reports/database.tsx b/apps/studio/pages/project/[ref]/reports/database.tsx
index 7483a9b52fc..be19f3ce62a 100644
--- a/apps/studio/pages/project/[ref]/reports/database.tsx
+++ b/apps/studio/pages/project/[ref]/reports/database.tsx
@@ -2,6 +2,7 @@ import dayjs from 'dayjs'
 import { ArrowRight } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
 import { AlertDescription_Shadcn_, Alert_Shadcn_, Button, IconExternalLink } from 'ui'
 
 import { PermissionAction } from '@supabase/shared-types/out/constants'
@@ -23,7 +24,6 @@ import { useDatabaseReport } from 'data/reports/database-report-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { TIME_PERIODS_INFRA } from 'lib/constants/metrics'
 import { formatBytes } from 'lib/helpers'
-import toast from 'react-hot-toast'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import type { NextPageWithLayout } from 'types'
 
diff --git a/apps/studio/pages/project/[ref]/settings/log-drains.tsx b/apps/studio/pages/project/[ref]/settings/log-drains.tsx
index 1fde6cbef37..07a350f868f 100644
--- a/apps/studio/pages/project/[ref]/settings/log-drains.tsx
+++ b/apps/studio/pages/project/[ref]/settings/log-drains.tsx
@@ -1,3 +1,13 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { ExternalLink } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+import { useParams } from 'common'
+import { LogDrainDestinationSheetForm } from 'components/interfaces/LogDrains/LogDrainDestinationSheetForm'
+import { LogDrains } from 'components/interfaces/LogDrains/LogDrains'
+import { LogDrainType } from 'components/interfaces/LogDrains/LogDrains.constants'
 import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
   ScaffoldContainer,
@@ -5,23 +15,13 @@ import {
   ScaffoldHeader,
   ScaffoldTitle,
 } from 'components/layouts/Scaffold'
-import type { NextPageWithLayout } from 'types'
-import { LogDrains } from 'components/interfaces/LogDrains/LogDrains'
-import { LogDrainDestinationSheetForm } from 'components/interfaces/LogDrains/LogDrainDestinationSheetForm'
-import { Button } from 'ui'
-import { useState } from 'react'
-import { LOG_DRAIN_TYPES, LogDrainType } from 'components/interfaces/LogDrains/LogDrains.constants'
-import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
 import { useCreateLogDrainMutation } from 'data/log-drains/create-log-drain-mutation'
-import toast from 'react-hot-toast'
+import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
 import { useUpdateLogDrainMutation } from 'data/log-drains/update-log-drain-mutation'
-import { useParams } from 'common'
-import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
-import Link from 'next/link'
-import { ExternalLink } from 'lucide-react'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Alert } from '@ui/components/shadcn/ui/alert'
+import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
+import type { NextPageWithLayout } from 'types'
+import { Alert_Shadcn_, Button } from 'ui'
 
 const LogDrainsSettings: NextPageWithLayout = () => {
   const canManageLogDrains = useCheckPermissions(PermissionAction.ANALYTICS_WRITE, 'logflare')
@@ -154,7 +154,9 @@ const LogDrainsSettings: NextPageWithLayout = () => {
         {canManageLogDrains ? (
           
         ) : (
-          You do not have permission to manage log drains
+          
+            You do not have permission to manage log drains
+          
         )}
       
     
diff --git a/apps/studio/pages/sign-in-mfa.tsx b/apps/studio/pages/sign-in-mfa.tsx
index 24119139720..efc949e9743 100644
--- a/apps/studio/pages/sign-in-mfa.tsx
+++ b/apps/studio/pages/sign-in-mfa.tsx
@@ -1,7 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import { useTelemetryProps } from 'common'
 import SignInMfaForm from 'components/interfaces/SignIn/SignInMfaForm'
diff --git a/apps/studio/pages/vercel/integrate.tsx b/apps/studio/pages/vercel/integrate.tsx
index 562cd0a7430..6b562610370 100644
--- a/apps/studio/pages/vercel/integrate.tsx
+++ b/apps/studio/pages/vercel/integrate.tsx
@@ -3,7 +3,7 @@ import { observer, useLocalObservable } from 'mobx-react-lite'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ChangeEvent, createContext, useContext, useEffect, useState } from 'react'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 
 import VercelIntegrationLayout from 'components/layouts/VercelIntegrationLayout'
 import {
diff --git a/apps/studio/pages/vercel/setupProject.tsx b/apps/studio/pages/vercel/setupProject.tsx
index fa7d07fde2f..a9d24ba6070 100644
--- a/apps/studio/pages/vercel/setupProject.tsx
+++ b/apps/studio/pages/vercel/setupProject.tsx
@@ -4,10 +4,9 @@ import { makeAutoObservable } from 'mobx'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { ChangeEvent, createContext, useContext, useEffect, useRef, useState } from 'react'
-import { toast } from 'react-hot-toast'
+import { toast } from 'sonner'
 import { Button, Input, Listbox } from 'ui'
 
-import type { Dictionary } from 'types'
 import VercelIntegrationLayout from 'components/layouts/VercelIntegrationLayout'
 import {
   createVercelEnv,
@@ -25,6 +24,7 @@ import {
 import passwordStrength from 'lib/password-strength'
 import { VERCEL_INTEGRATION_CONFIGS } from 'lib/vercelConfigs'
 import { AWS_REGIONS } from 'shared-data'
+import type { Dictionary } from 'types'
 
 interface ISetupProjectStore {
   token: string
diff --git a/apps/studio/state/sql-editor-v2.ts b/apps/studio/state/sql-editor-v2.ts
index f982b9839ea..5053fc45883 100644
--- a/apps/studio/state/sql-editor-v2.ts
+++ b/apps/studio/state/sql-editor-v2.ts
@@ -1,15 +1,15 @@
 import { debounce, memoize } from 'lodash'
-import toast from 'react-hot-toast'
+import { toast } from 'sonner'
 import { proxy, snapshot, subscribe, useSnapshot } from 'valtio'
 import { devtools, proxySet } from 'valtio/utils'
 
 import { UpsertContentPayloadV2, upsertContent } from 'data/content/content-upsert-v2-mutation'
+import { contentKeys } from 'data/content/keys'
 import { createSQLSnippetFolder } from 'data/content/sql-folder-create-mutation'
 import { updateSQLSnippetFolder } from 'data/content/sql-folder-update-mutation'
 import { Snippet, SnippetFolder, SnippetFolderResponse } from 'data/content/sql-folders-query'
 import { SqlSnippet } from 'data/content/sql-snippets-query'
 import { getQueryClient } from 'data/query-client'
-import { contentKeys } from 'data/content/keys'
 
 export type StateSnippetFolder = {
   projectRef: string
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
index 83d5b6334ca..41be9a1cadb 100644
--- a/apps/www/pages/_app.tsx
+++ b/apps/www/pages/_app.tsx
@@ -9,7 +9,7 @@ import { AppProps } from 'next/app'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { PortalToast, themes } from 'ui'
+import { SonnerToaster, themes } from 'ui'
 import { CommandProvider } from 'ui-patterns/CommandMenu'
 import { useConsent } from 'ui-patterns/ConsentToast'
 
@@ -128,7 +128,7 @@ export default function App({ Component, pageProps }: AppProps) {
             forcedTheme={forceDarkMode ? 'dark' : undefined}
           >
             
-              
+              
               
               
             
diff --git a/package-lock.json b/package-lock.json
index 81681692aa3..ea2e2b3ace5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1694,7 +1694,6 @@
         "react-dom": "^18.2.0",
         "react-error-boundary": "^4.0.13",
         "react-grid-layout": "^1.4.2",
-        "react-hot-toast": "^2.4.1",
         "react-inlinesvg": "^4.0.4",
         "react-intersection-observer": "^9.5.3",
         "react-markdown": "^8.0.3",
@@ -22305,13 +22304,6 @@
       "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
     },
-    "node_modules/goober": {
-      "version": "2.1.13",
-      "license": "MIT",
-      "peerDependencies": {
-        "csstype": "^3.0.10"
-      }
-    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "license": "MIT",
@@ -34870,20 +34862,6 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
-    "node_modules/react-hot-toast": {
-      "version": "2.4.1",
-      "license": "MIT",
-      "dependencies": {
-        "goober": "^2.1.10"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
-      }
-    },
     "node_modules/react-inlinesvg": {
       "version": "4.0.4",
       "license": "MIT",
@@ -43215,7 +43193,6 @@
         "dat.gui": "^0.7.9",
         "lodash": "^4.17.21",
         "next-themes": "^0.3.0",
-        "react-hot-toast": "^2.4.1",
         "react-use": "^17.4.0"
       },
       "devDependencies": {
@@ -43313,7 +43290,6 @@
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
-        "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
@@ -43342,7 +43318,6 @@
         "react-day-picker": "^8.8.0",
         "react-feather": "^2.0.10",
         "react-hook-form": "^7.45.0",
-        "react-hot-toast": "^2.4.1",
         "react-intersection-observer": "^9.8.2",
         "react-markdown": "^8.0.3",
         "react-medium-image-zoom": "^5.2.4",
@@ -43412,7 +43387,6 @@
         "monaco-editor": "*",
         "next-themes": "*",
         "react-error-boundary": "^4.0.12",
-        "react-hot-toast": "*",
         "react-markdown": "^9.0.1",
         "react-syntax-highlighter": "^15.5.0",
         "react-tooltip": "*",
@@ -44435,39 +44409,6 @@
         }
       }
     },
-    "packages/ui/node_modules/@radix-ui/react-toast": {
-      "version": "1.1.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-collection": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1",
-        "@radix-ui/react-visually-hidden": "1.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "packages/ui/node_modules/argparse": {
       "version": "2.0.1",
       "dev": true,
diff --git a/packages/common/package.json b/packages/common/package.json
index 94c79aa9b0a..7fe6267e315 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -13,7 +13,6 @@
     "dat.gui": "^0.7.9",
     "lodash": "^4.17.21",
     "next-themes": "^0.3.0",
-    "react-hot-toast": "^2.4.1",
     "react-use": "^17.4.0"
   },
   "devDependencies": {
diff --git a/packages/ui-patterns/ConsentToast/index.tsx b/packages/ui-patterns/ConsentToast/index.tsx
index 40eb313b48d..1fd48f23c3e 100644
--- a/packages/ui-patterns/ConsentToast/index.tsx
+++ b/packages/ui-patterns/ConsentToast/index.tsx
@@ -9,8 +9,8 @@ import {
 } from 'common'
 import { noop } from 'lodash'
 import Link from 'next/link'
-import { useEffect, useRef, useState } from 'react'
-import { toast } from 'react-hot-toast'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { toast } from 'sonner'
 import { Button } from 'ui'
 
 interface ConsentToastProps {
@@ -63,19 +63,16 @@ export const ConsentToast = ({ onAccept = noop, onOptOut = noop }: ConsentToastP
   )
 }
 
-// Use with PortalToast from 'ui/src/layout/PortalToast'
 export const useConsent = () => {
   const { TELEMETRY_CONSENT } = LOCAL_STORAGE_KEYS
-  const consentToastId = useRef()
-  const isClient = typeof window !== 'undefined'
-  if (!isClient) return {}
+  const consentToastId = useRef()
   const telemetryProps = useTelemetryProps()
-  const [consentValue, setConsentValue] = useState(
-    localStorage?.getItem(TELEMETRY_CONSENT)
-  )
+
+  const initialValue = isBrowser ? localStorage?.getItem(TELEMETRY_CONSENT) : null
+  const [consentValue, setConsentValue] = useState(initialValue)
 
   const handleConsent = (value: 'true' | 'false') => {
-    if (!isClient) return
+    if (!isBrowser) return
     setConsentValue(value)
     localStorage.setItem(TELEMETRY_CONSENT, value)
 
@@ -84,43 +81,50 @@ export const useConsent = () => {
       handlePageTelemetry(process.env.NEXT_PUBLIC_API_URL!, location.pathname, telemetryProps)
   }
 
+  const triggerConsentToast = useCallback(() => {
+    if (isBrowser && consentValue === null) {
+      consentToastId.current = toast(
+         handleConsent('true')}
+          onOptOut={() => handleConsent('false')}
+        />,
+        {
+          id: 'consent-toast',
+          position: 'bottom-right',
+          duration: Infinity,
+          closeButton: true,
+        }
+      )
+    }
+  }, [])
+
   useEffect(() => {
     const handleSetLocalStorage = () => {
       if (localStorage?.getItem(TELEMETRY_CONSENT)) toast.dismiss(consentToastId.current)
     }
 
-    window.addEventListener('storage', handleSetLocalStorage)
-    return window.removeEventListener('storage', () => null)
+    if (isBrowser) {
+      window.addEventListener('storage', handleSetLocalStorage)
+      return window.removeEventListener('storage', () => null)
+    }
   }, [])
 
   useEffect(() => {
-    if (isClient && consentValue === null) {
-      setTimeout(() => {
-        consentToastId.current = toast(
-           handleConsent('true')}
-            onOptOut={() => handleConsent('false')}
-          />,
-          {
-            id: 'consent-toast',
-            position: 'bottom-right',
-            duration: Infinity,
-            className:
-              '!w-screen !-m-4 !border-t !rounded-none !max-w-none !bg-overlay !text sm:!m-0 sm:!rounded-lg sm:!w-auto sm:!max-w-[400px] sm:border',
-          }
-        )
-      }, 300)
-    }
+    triggerConsentToast()
   }, [consentValue])
 
-  return { consentValue, setConsentValue, hasAcceptedConsent: consentValue === 'true' }
+  return {
+    consentValue,
+    setConsentValue,
+    hasAcceptedConsent: consentValue === 'true',
+    triggerConsentToast,
+  }
 }
 
 export const useConsentValue = (KEY_NAME: string) => {
-  if (!isBrowser) return {}
-
   const telemetryProps = useTelemetryProps()
-  const [consentValue, setConsentValue] = useState(localStorage?.getItem(KEY_NAME))
+  const initialValue = isBrowser ? localStorage?.getItem(KEY_NAME) : null
+  const [consentValue, setConsentValue] = useState(initialValue)
 
   const handleConsent = (value: 'true' | 'false') => {
     if (!isBrowser) return
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index b7ba67bb8b8..30431bc1777 100644
--- a/packages/ui-patterns/package.json
+++ b/packages/ui-patterns/package.json
@@ -20,7 +20,6 @@
     "monaco-editor": "*",
     "next-themes": "*",
     "react-error-boundary": "^4.0.12",
-    "react-hot-toast": "*",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-tooltip": "*",
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index a5815536c6a..ed28da4ade0 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -32,7 +32,6 @@ export * from './src/components/Modal'
 export * from './src/components/SidePanel'
 export * from './src/components/ContextMenu'
 export * from './src/components/Popover'
-export * from './src/layout/PortalToast'
 
 // HTML
 
@@ -72,10 +71,8 @@ export * from './src/components/ThemeProvider/prefixedThemes'
 
 // shadcn
 export * from './src/components/shadcn/ui/dropdown-menu'
-export * from './src/components/shadcn/ui/use-toast'
-export * from './src/components/shadcn/ui/toast'
-export * from './src/components/shadcn/ui/toaster'
 export * from './src/components/shadcn/ui/sonner'
+export * from './src/components/shadcn/ui/sonner-progress'
 export * from './src/components/shadcn/ui/separator'
 export * from './src/components/shadcn/ui/sheet'
 export * from './src/components/shadcn/ui/badge'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 642ef603946..b71058dac4b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -43,7 +43,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
@@ -72,7 +71,6 @@
     "react-day-picker": "^8.8.0",
     "react-feather": "^2.0.10",
     "react-hook-form": "^7.45.0",
-    "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.8.2",
     "react-markdown": "^8.0.3",
     "react-medium-image-zoom": "^5.2.4",
diff --git a/packages/ui/src/components/Toast/Toast.module.css b/packages/ui/src/components/Toast/Toast.module.css
deleted file mode 100644
index fbd1133655f..00000000000
--- a/packages/ui/src/components/Toast/Toast.module.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.sbui-toast-container {
-  @apply max-w-xs w-full shadow-lg rounded-md pointer-events-auto overflow-hidden py-4 px-2;
-
-  @apply border border-solid;
-  @apply bg-surface-100 border-default;
-}
-
-.sbui-toast-container--sm {
-  @apply max-w-sm;
-}
-
-.sbui-toast-container--md {
-  @apply max-w-md;
-}
-
-.sbui-toast-container.sbui-toast-container--success {
-  @apply border border-solid border-green-500;
-}
-.sbui-toast-container.sbui-toast-container--error {
-  @apply border border-solid border-red-500;
-}
-
-.sbui-toast-container > div {
-  @apply flex items-start;
-}
-
-.sbui-toast-icon-container {
-  @apply flex-shrink-0 text-sm;
-}
-
-.sbui-toast-details {
-  @apply ml-3 w-0 flex flex-1 justify-between;
-}
-
-.sbui-toast-details--actions-bottom {
-  @apply flex-col;
-}
-
-.sbui-toast-details--actions-bottom .sbui-toast-details__actions {
-  @apply mt-4;
-}
-
-.sbui-toast-details__content {
-  @apply flex flex-col;
-}
-
-.sbui-toast-message {
-  @apply m-0 text-sm font-medium text-gray-900;
-}
-
-.sbui-toast-description {
-  @apply m-0 mt-1 text-sm font-normal text-gray-500;
-}
-
-.sbui-toast-details__actions {
-  @apply flex space-x-4;
-}
-
-.sbui-toast-close-container {
-  @apply ml-4 flex-shrink-0 flex;
-}
-
-.sbui-toast-close-button {
-  @apply bg-transparent rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none cursor-pointer border-0;
-}
-
-.sbui-toast-container--success .sbui-toast-icon-container {
-  @apply text-green-500;
-}
-
-.sbui-toast-container--error .sbui-toast-icon-container {
-  @apply text-red-500;
-}
-
-.sbui-alert--anim--spin {
-  @apply stroke-current;
-  animation-name: spin;
-  animation-duration: 1500ms;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  /* transform: rotate(3deg); */
-  /* transform: rotate(0.3rad);/ */
-  /* transform: rotate(3grad); */
-  /* transform: rotate(.03turn);  */
-  transform-origin: center center;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-div[data-radix-portal]:not(.portal--toast) {
-  /* 
-  override z-index to be lower than radix value of 2147483647 
-  except for the toast portal
-  */
-  z-index: 2147483646 !important;
-}
diff --git a/packages/ui/src/components/Toast/Toast.stories.tsx b/packages/ui/src/components/Toast/Toast.stories.tsx
deleted file mode 100644
index 7d9a7d649e9..00000000000
--- a/packages/ui/src/components/Toast/Toast.stories.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react'
-
-import { Toast } from '.'
-import { Button } from '../Button'
-
-export default {
-  title: 'Overlays/Toast',
-  component: Toast,
-}
-
-const Template = (args: any) => {
-  return 
-}
-
-Template.args = { message: 'Lorem ipsum', duration: 60000 }
-
-export const Default = Template.bind({})
-Default.args = Template.args
-
-export const Success = Template.bind({})
-Success.args = { ...Template.args, type: 'success' }
-
-export const Error = Template.bind({})
-Error.args = { ...Template.args, type: 'error' }
-
-export const Loading = Template.bind({})
-Loading.args = { ...Template.args, type: 'loading' }
-
-export const withActions = Template.bind({})
-withActions.args = {
-  ...Template.args,
-  actions: [, ],
-}
-
-export const UsingToasts = ({ message, duration, ...rest }: any) => (
-  

-    
-    
-    
-    
-    
-    
-    , ],
-        })
-      }}
-    >
-      Create toast with actions
-    
-  

-)
-
-UsingToasts.args = {
-  message: 'Lorem ipsum',
-  description:
-    'Lorem ipsum dolor sit amet consectetur adipisicing elit oluptatum tenetur.',
-  duration: 60000,
-}
diff --git a/packages/ui/src/components/Toast/Toast.tsx b/packages/ui/src/components/Toast/Toast.tsx
deleted file mode 100644
index 5d378fccb87..00000000000
--- a/packages/ui/src/components/Toast/Toast.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-'use client'
-
-import * as Portal from '@radix-ui/react-portal'
-import React, { ComponentProps } from 'react'
-import {
-  Toast as HotToastProps,
-  Toaster as HotToaster,
-  ToastType,
-  toast as hotToast,
-  resolveValue,
-} from 'react-hot-toast'
-import { IconAlertCircle } from '../Icon/icons/IconAlertCircle'
-import { IconCheck } from '../Icon/icons/IconCheck'
-import { IconLoader } from '../Icon/icons/IconLoader'
-import { IconX } from '../Icon/icons/IconX'
-// @ts-ignore
-import Typography from '../Typography'
-import ToastStyles from './Toast.module.css'
-
-const icons: Partial<{ [key in ToastType]: any }> = {
-  error: ,
-  success: ,
-}
-
-export interface ToastProps extends HotToastProps {
-  description?: string
-  closable?: boolean
-  actions?: React.ReactNode
-  actionsPosition?: 'inline' | 'bottom'
-  width?: 'xs' | 'sm' | 'md'
-}
-
-function Message({ children, ...props }: ComponentProps) {
-  return (
-    
-      {children}
-    
-  )
-}
-
-function Description({ children, ...props }: ComponentProps) {
-  return (
-    
-      {children}
-    
-  )
-}
-
-/**
- * react-hot-toast is used under-the-hood and is a required dependency.
- *
- * Add `` to your app or wrap it around your components ``
- *
- * You can also just use react-hot-toast's `toast` for basic toasts:
- *
- * `toast.success('Complete!')`
- *
- *  For the extra features you need to use the `Toast.toast` wrapper:
- *
- * `Toast.toast('Message', { description: 'Description', actions: [] })`
- */
-
-function Toast({
-  id,
-  visible,
-  type,
-  icon,
-  description,
-  closable = true,
-  actions,
-  actionsPosition = 'inline',
-  message,
-  width,
-  ...rest
-}: ToastProps) {
-  let containerClasses = [ToastStyles['sbui-toast-container']]
-  if (type) {
-    containerClasses.push(ToastStyles[`sbui-toast-container--${type}`])
-  }
-  if (width === 'sm' || width === 'md') {
-    containerClasses.push(ToastStyles[`sbui-toast-container--${width}`])
-  }
-
-  let closeButtonClasses = [ToastStyles['sbui-toast-close-button']]
-  if (type) {
-    closeButtonClasses.push(ToastStyles[`sbui-toast-close-button--${type}`])
-  }
-
-  let detailsClasses = [ToastStyles['sbui-toast-details']]
-  if (actionsPosition === 'bottom') {
-    detailsClasses.push(ToastStyles[`sbui-toast-details--actions-bottom`])
-  }
-
-  const _message =
-    typeof message === 'string' ? (
-      {message}
-    ) : (
-      resolveValue(message, { id, type, message, visible, ...rest })
-    )
-
-  return (
-    

-      

-        
-          {type === 'loading' ? (
-            
-          ) : (
-            icon || icons[type]
-          )}
-        
-        

-          

-            {_message}
-            {description && {description}}
-          

-          {actions && 
{actions}
}
-        

-        {closable && (
-          

-            
-          

-        )}
-      

-    

-  )
-}
-
-interface ToasterProps {
-  children?: React.ReactNode
-}
-
-function Toaster({ children }: ToasterProps) {
-  return (
-    
-      
-        {({ message, ...t }) =>
-          typeof message === 'string' ? (
-            
-          ) : (
-            <>{resolveValue(message, { message, ...t })}
-          )
-        }
-      
-      {children}
-    
-  )
-}
-
-type ToastOptions = Partial<
-  Pick<
-    ToastProps,
-    | 'id'
-    | 'icon'
-    | 'duration'
-    | 'position'
-    | 'ariaProps'
-    | 'style'
-    | 'className'
-    | 'iconTheme'
-    | 'type'
-    | 'description'
-    | 'closable'
-    | 'actions'
-    | 'actionsPosition'
-  >
->
-
-export function toast(message: string, opts?: ToastOptions) {
-  const { description, closable, actions, actionsPosition, type, ...rest } = opts || {}
-
-  return hotToast(
-    ({ message: _m, type: _t, ...t }) => (
-      
-    ),
-    rest
-  )
-}
-
-const createToastType = (type: ToastType) => (message: string, opts?: Omit) =>
-  toast(message, { ...opts, type })
-
-toast.success = createToastType('success')
-toast.error = createToastType('error')
-toast.loading = createToastType('loading')
-toast.promise = (...args: Parameters) => hotToast.promise(...args)
-
-Toast.Toaster = Toaster
-Toast.toast = toast
-
-export default Toast
diff --git a/packages/ui/src/components/Toast/index.tsx b/packages/ui/src/components/Toast/index.tsx
deleted file mode 100644
index 3d34af25126..00000000000
--- a/packages/ui/src/components/Toast/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Toast } from './Toast'
diff --git a/packages/ui/src/components/shadcn/ui/sonner-progress.tsx b/packages/ui/src/components/shadcn/ui/sonner-progress.tsx
new file mode 100644
index 00000000000..d77fe9cd47e
--- /dev/null
+++ b/packages/ui/src/components/shadcn/ui/sonner-progress.tsx
@@ -0,0 +1,43 @@
+import { Loader2 } from 'lucide-react'
+import { Progress } from './progress'
+
+/**
+ * A component to display a progress bar with a message and an optional action button. Meant to be rendered in toasts
+ * like so
+ *  toast.loading(
+ *    ,
+ *    { id: toastId, closeButton: false }
+ *  )
+ */
+export const SonnerProgress = ({
+  progress,
+  progressPrefix,
+  action,
+  message,
+}: {
+  progress: number
+  progressPrefix?: string
+  action?: React.ReactNode
+  message: string
+}) => (
+  

+    
+    

+      

+        
{message}

+        

+          {progressPrefix || ''}
+          {`${Number(progress).toFixed(0)}%`}
+        

+      

+      
+      

+        Please do not close the browser
+        {action}
+      

+    

+  

+)
diff --git a/packages/ui/src/components/shadcn/ui/sonner.tsx b/packages/ui/src/components/shadcn/ui/sonner.tsx
index e3089f6e8b2..72e45a8ff1b 100644
--- a/packages/ui/src/components/shadcn/ui/sonner.tsx
+++ b/packages/ui/src/components/shadcn/ui/sonner.tsx
@@ -2,13 +2,16 @@
 
 import { useTheme } from 'next-themes'
 import { Toaster as Sonner } from 'sonner'
+
 import { cn } from '../../../lib/utils'
-import { buttonVariants } from './../../Button'
+import { buttonVariants } from '../../Button'
 import { StatusIcon } from './../../StatusIcon'
 
+export const SONNER_DEFAULT_DURATION = 4000
+
 type ToasterProps = React.ComponentProps
 
-const SonnerToaster = ({ ...props }: ToasterProps) => {
+const SonnerToaster = ({ toastOptions, ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme()
 
   return (
@@ -19,7 +22,11 @@ const SonnerToaster = ({ ...props }: ToasterProps) => {
         info: ,
       }}
       theme={theme as ToasterProps['theme']}
-      className="toaster group"
+      // pointer-events-auto is needed to fix the toast when above radix modals. Set the width to 420px to fix the toast
+      // progress component (bottom row rendered in two lines).
+      className="toaster group pointer-events-auto"
+      // fontFamily: 'inherit' is needed to use the same font as the rest of the app
+      style={{ fontFamily: 'inherit' }}
       toastOptions={{
         unstyled: true,
         classNames: {
@@ -48,8 +55,22 @@ const SonnerToaster = ({ ...props }: ToasterProps) => {
             'group toast group-[.toaster]:!bg-warning-200 group-[.toaster]:!border-warning-500',
           error:
             'group toast group-[.toaster]:!bg-destructive-200 group-[.toaster]:!border-destructive-500',
+          closeButton: cn(
+            // unset all styles set from sonner
+            'absolute right-2 top-2 rounded-md text-foreground/50 opacity-0 transition-opacity',
+            'hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100',
+            'group-[.destructive]:text-destructive-300 group-[.destructive]:hover:text-destructive-50',
+            'group-[.destructive]:focus:ring-destructive-400 group-[.destructive]:focus:ring-offset-destructive-600',
+            'left-auto transform-none bg-transparent border-0 border-transparent hover:!bg-transparent hover:border-transparent'
+          ),
+          content: 'grow',
+          //group-[.toaster]:bg-overlay group-[.toaster]:text-foreground group-[.toaster]:border group-[.toaster]:border-overlay
         },
+        duration: SONNER_DEFAULT_DURATION,
+        closeButton: true,
+        ...toastOptions,
       }}
+      cn={cn}
       {...props}
     />
   )
diff --git a/packages/ui/src/components/shadcn/ui/toast.tsx b/packages/ui/src/components/shadcn/ui/toast.tsx
deleted file mode 100644
index cf6682d872b..00000000000
--- a/packages/ui/src/components/shadcn/ui/toast.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-'use client'
-
-import * as ToastPrimitives from '@radix-ui/react-toast'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { X } from 'lucide-react'
-import * as React from 'react'
-
-import { cn } from '../../../lib/utils/cn'
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef,
-  React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-  
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  'data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-top-full data-[state=closed]:slide-out-to-right-full',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background border',
-        destructive:
-          'group destructive border-destructive-400 bg-destructive-300 text-destructive-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef,
-  React.ComponentPropsWithoutRef & VariantProps
->(({ className, variant, ...props }, ref) => {
-  return (
-    
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef,
-  React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-  
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef,
-  React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-  
-    
-  
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef,
-  React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-  
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef,
-  React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-  
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef
-
-type ToastActionElement = React.ReactElement
-
-export {
-  Toast,
-  ToastAction,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-  type ToastActionElement,
-  type ToastProps,
-}
diff --git a/packages/ui/src/components/shadcn/ui/toaster.tsx b/packages/ui/src/components/shadcn/ui/toaster.tsx
deleted file mode 100644
index 3b95941195f..00000000000
--- a/packages/ui/src/components/shadcn/ui/toaster.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from './toast'
-import { useToast } from './use-toast'
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          
-            

-              {title && {title}}
-              {description && {description}}
-            

-            {action}
-            
-          
-        )
-      })}
-      
-    
-  )
-}
diff --git a/packages/ui/src/components/shadcn/ui/use-toast.ts b/packages/ui/src/components/shadcn/ui/use-toast.ts
deleted file mode 100644
index cd7988bb731..00000000000
--- a/packages/ui/src/components/shadcn/ui/use-toast.ts
+++ /dev/null
@@ -1,189 +0,0 @@
-'use client'
-
-// Inspired by react-hot-toast library
-import * as React from 'react'
-
-import { ToastActionElement, ToastProps } from './toast'
-
-const TOAST_LIMIT = 4
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: 'ADD_TOAST',
-  UPDATE_TOAST: 'UPDATE_TOAST',
-  DISMISS_TOAST: 'DISMISS_TOAST',
-  REMOVE_TOAST: 'REMOVE_TOAST',
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_VALUE
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType['ADD_TOAST']
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType['UPDATE_TOAST']
-      toast: Partial
-    }
-  | {
-      type: ActionType['DISMISS_TOAST']
-      toastId?: ToasterToast['id']
-    }
-  | {
-      type: ActionType['REMOVE_TOAST']
-      toastId?: ToasterToast['id']
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: 'REMOVE_TOAST',
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'ADD_TOAST':
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case 'UPDATE_TOAST':
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-      }
-
-    case 'DISMISS_TOAST': {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case 'REMOVE_TOAST':
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: 'UPDATE_TOAST',
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
-
-  dispatch({
-    type: 'ADD_TOAST',
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
-  }
-}
-
-export { useToast, toast }
diff --git a/packages/ui/src/layout/PortalToast/PortalToast.tsx b/packages/ui/src/layout/PortalToast/PortalToast.tsx
deleted file mode 100644
index 9de6c3006d7..00000000000
--- a/packages/ui/src/layout/PortalToast/PortalToast.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client'
-
-import { X } from 'lucide-react'
-import dynamic from 'next/dynamic'
-import { ToastBar, Toaster, toast } from 'react-hot-toast'
-import { Button } from '../../components/Button/Button'
-
-const PortalRootWithNoSSR = dynamic(
-  // @ts-ignore
-  () => import('@radix-ui/react-portal').then((portal) => portal.Root),
-  { ssr: false }
-)
-
-const PortalToast = () => (
-  // @ts-ignore
-  
-    
-      {(t) => (
-        
-          {({ icon, message }) => {
-            const isConsentToast = t.id === 'consent-toast'
-            return (
-              <>
-                
{icon}

-                

-                  

-                    {message}
-                  

-                  {t.type !== 'loading' && !isConsentToast && (
-                    

-                      
-                    

-                  )}
-                

-              
-            )
-          }}
-        
-      )}
-    
-  
-)
-
-export default PortalToast
diff --git a/packages/ui/src/layout/PortalToast/index.tsx b/packages/ui/src/layout/PortalToast/index.tsx
deleted file mode 100644
index 23ffa202779..00000000000
--- a/packages/ui/src/layout/PortalToast/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import PortalToast from './PortalToast'
-
-export { PortalToast }
-
-export default PortalToast
diff --git a/playwright-tests/tests/snapshot/spec/table-editor.spec.ts b/playwright-tests/tests/snapshot/spec/table-editor.spec.ts
index 046e4b7f1a4..efe78bc707f 100644
--- a/playwright-tests/tests/snapshot/spec/table-editor.spec.ts
+++ b/playwright-tests/tests/snapshot/spec/table-editor.spec.ts
@@ -2,8 +2,8 @@ import { Page, expect, test } from '@playwright/test'
 import { kebabCase } from 'lodash'
 
 const dismissToast = async (page: Page) => {
-  await page.locator('#toast').getByRole('button').waitFor({ state: 'visible' })
-  await page.locator('#toast').getByRole('button').click()
+  await page.locator('li.toast').getByRole('button').waitFor({ state: 'visible' })
+  await page.locator('li.toast').getByRole('button').click()
 }
 
 test.describe('Table Editor page', () => {