chore: update versions (#2547 )

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @nhost/apollo@6.0.6 ### Patch Changes - e0ab6d9: fix: add extra logic to check and wait for a valid JWT - @nhost/nhost-js@3.0.6 ## @nhost/react-apollo@9.0.1 ### Patch Changes - Updated dependencies [e0ab6d9] - @nhost/apollo@6.0.6 - @nhost/react@3.2.1 ## @nhost/react-urql@6.0.1 ### Patch Changes - @nhost/react@3.2.1 ## @nhost/graphql-js@0.1.6 ### Patch Changes - e0ab6d9: fix: add extra logic to check and wait for a valid JWT ## @nhost/hasura-auth-js@2.3.1 ### Patch Changes - 7baee8a: fix(hasura-auth-js): replace `jwt-decode` with `jose` for decoding access tokens that works on both the browser and Node.js - e0ab6d9: fix: add extra logic to check and wait for a valid JWT ## @nhost/nextjs@2.1.3 ### Patch Changes - @nhost/react@3.2.1 ## @nhost/nhost-js@3.0.6 ### Patch Changes - Updated dependencies [7baee8a] - Updated dependencies [e0ab6d9] - @nhost/hasura-auth-js@2.3.1 - @nhost/graphql-js@0.1.6 ## @nhost/react@3.2.1 ### Patch Changes - @nhost/nhost-js@3.0.6 ## @nhost/vue@2.2.1 ### Patch Changes - @nhost/nhost-js@3.0.6 ## @nhost/dashboard@1.8.0 ### Minor Changes - 713d53c: feat: add catch-all route for workspace/project - useful for documentation ### Patch Changes - 3db2999: fix: refresh table list after running SQL using the editor - 3c4dd55: fix: handle `Error` objects properly in the `ErrorToast` component - 92b434e: fix: resolve an issue where the checkbox in the data-grid header did not select all rows - @nhost/react-apollo@9.0.1 - @nhost/nextjs@2.1.3 ## @nhost-examples/cli@0.1.7 ### Patch Changes - @nhost/nhost-js@3.0.6 ## @nhost-examples/codegen-react-apollo@0.1.15 ### Patch Changes - @nhost/react-apollo@9.0.1 - @nhost/react@3.2.1 ## @nhost-examples/codegen-react-query@0.1.16 ### Patch Changes - @nhost/react@3.2.1 ## @nhost-examples/codegen-react-urql@0.0.12 ### Patch Changes - @nhost/react@3.2.1 - @nhost/react-urql@6.0.1 ## @nhost-examples/docker-compose@0.1.1 ### Patch Changes - aff059e: fix: timers ## @nhost-examples/multi-tenant-one-to-many@2.0.5 ### Patch Changes - @nhost/nhost-js@3.0.6 ## @nhost-examples/nextjs@0.1.17 ### Patch Changes - @nhost/react-apollo@9.0.1 - @nhost/react@3.2.1 - @nhost/nextjs@2.1.3 ## @nhost-examples/node-storage@0.0.9 ### Patch Changes - @nhost/nhost-js@3.0.6 ## @nhost-examples/nextjs-server-components@0.2.3 ### Patch Changes - @nhost/nhost-js@3.0.6 ## @nhost-examples/react-apollo@0.3.1 ### Patch Changes - @nhost/react-apollo@9.0.1 - @nhost/react@3.2.1 ## @nhost-examples/react-gqty@1.0.5 ### Patch Changes - @nhost/react@3.2.1 ## @nhost-examples/vue-apollo@0.2.2 ### Patch Changes - Updated dependencies [e0ab6d9] - @nhost/apollo@6.0.6 - @nhost/nhost-js@3.0.6 - @nhost/vue@2.2.1 ## @nhost-examples/vue-quickstart@0.0.14 ### Patch Changes - Updated dependencies [e0ab6d9] - @nhost/apollo@6.0.6 - @nhost/vue@2.2.1 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
fix (examples/docker-compose): timers (#2553 )
2024-02-23 10:07:53 +01:00 · 2024-02-23 10:04:20 +01:00 · 2024-02-22 17:59:24 -01:00 · 2024-02-22 18:44:43 +01:00 · 2024-02-21 11:17:03 +01:00 · 2024-02-20 13:40:46 +01:00
1305 changed files with 44898 additions and 34786 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,14 +1,14 @@
 # Documentation
 # https://help.github.com/en/articles/about-code-owners

-/packages                                @szilarddoro
-/packages/docgen                         @szilarddoro
-/integrations/stripe-graphql-js          @elitan
-/.github                                 @szilarddoro
-/dashboard/                              @szilarddoro
-/docs/                                   @elitan
-/config/                                 @szilarddoro
-/examples/                               @szilarddoro
-/examples/codegen-react-apollo           @elitan @szilarddoro
-/examples/codegen-react-query            @elitan @szilarddoro
-/examples/react-apollo-crm               @elitan @szilarddoro
+/packages                                @nunopato @onehassan
+/packages/docgen                         @nunopato @onehassan
+/integrations/stripe-graphql-js          @nunopato @onehassan
+/.github                                 @nunopato @onehassan
+/dashboard/                              @nunopato @onehassan
+/docs/                                   @nunopato @onehassan
+/config/                                 @nunopato @onehassan
+/examples/                               @nunopato @onehassan
+/examples/codegen-react-apollo           @nunopato @onehassan
+/examples/codegen-react-query            @nunopato @onehassan
+/examples/react-apollo-crm               @nunopato @onehassan
--- a/.github/actions/install-dependencies/action.yaml
+++ b/.github/actions/install-dependencies/action.yaml
@@ -14,7 +14,7 @@ runs:
  steps:
    - uses: pnpm/action-setup@v2.2.4
      with:
-        version: 8.6.2
+        version: 8.10.5
        run_install: false
    - name: Get pnpm cache directory
      id: pnpm-cache-dir
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -4,7 +4,6 @@ dashboard:
 documentation:
  - any:
      - docs/**/*
-      - '!docs/docs/reference/docgen/**/*'

 examples:
  - examples/**/*
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -1,23 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ],
-  "docker-compose": {
-    "enabled": true
-  },
-  "ignoreDeps": [
-    "pnpm",
-    "node",
-    "@types/node"
-  ],
-  "labels": [
-    "dependencies"
-  ],
-  "enabledManagers": [
-    "npm",
-    "dockerfile",
-    "docker-compose",
-    "github-actions"
-  ]
-}
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -106,6 +106,8 @@ jobs:
      # * Run every `lint` script in the workspace . Dependencies build is cached by Turborepo
      - name: Lint
        run: pnpm run lint:all
+      - name: Audit for vulnerabilities
+        run: pnpx audit-ci --config ./audit-ci.jsonc

  e2e:
    name: 'E2E (Package: ${{ matrix.package.path }})'
@@ -146,7 +148,7 @@ jobs:
        run: echo "NHOST_TEST_DASHBOARD_URL=https://${{ steps.fetch-dashboard-preview-url.outputs.preview_url }}" >> $GITHUB_ENV
      # * Run the `ci` script of the current package of the matrix. Dependencies build is cached by Turborepo
      - name: Run e2e tests
-        timeout-minutes: 15
+        timeout-minutes: 20
        run: pnpm --filter="${{ matrix.package.name }}" run e2e
      - id: file-name
        if: ${{ failure() }}
--- a/.github/workflows/gen_schedule_update_deps.yaml
+++ b/.github/workflows/gen_schedule_update_deps.yaml
@@ -0,0 +1,82 @@
+---
+name: "gen: update depenendencies"
+on:
+  schedule:
+    - cron: '0 2 1 * *'
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+
+    permissions:
+      id-token: write
+      contents: write
+      pull-requests: write
+
+    steps:
+    - name: Check out repository
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
+    - name: Configure aws
+      uses: aws-actions/configure-aws-credentials@v4
+      with:
+        role-to-assume: arn:aws:iam::${{ secrets.AWS_PRODUCTION_CORE_ACCOUNT_ID }}:role/github-actions-nhost-be
+        aws-region: eu-central-1
+
+    - uses: nixbuild/nix-quick-install-action@v26
+      with:
+        nix_version: 2.16.2
+        nix_conf: |
+          experimental-features = nix-command flakes
+          sandbox = false
+          access-tokens = github.com=${{ secrets.GITHUB_TOKEN }}
+          substituters = https://cache.nixos.org/?priority=40 s3://nhost-nix-cache?region=eu-central-1&priority=50
+          trusted-public-keys = cache.nixos.org-1:6NCHdD59X431o0gWypbMrAURkbJ16ZPMQFGspcDShjY= ${{ secrets.NIX_CACHE_PUB_KEY }}
+
+    - name: Cache nix store
+      uses: actions/cache@v4
+      with:
+        path: /nix
+        key: nix-update-deps-${{ hashFiles('flakes.nix', 'flake.lock') }}
+
+    - name: Update nix flakes
+      run: nix flake update
+
+    - name: Update dependencies
+      run: |
+        nix develop -c bash -c "
+          pnpm dedupe
+          pnpm update -r
+          pnpm dedupe
+        "
+
+    - name: Create Pull Request
+      uses: peter-evans/create-pull-request@v6
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        commit-message: Update dependencies
+        committer: GitHub <noreply@github.com>
+        author: ${{ github.actor }} <${{ github.actor }}@users.noreply.github.com>
+        signoff: false
+        branch: automated/update-deps
+        delete-branch: true
+        title: '[Scheduled] Update dependencies'
+        body: |
+          Dependencies updated
+
+          Note - If you see this PR and the checks haven't run, close and reopen the PR. See https://github.com/peter-evans/create-pull-request/blob/main/docs/concepts-guidelines.md#triggering-further-workflow-runs
+        labels: |
+          dependencies
+        draft: false
+
+    - name: "Cache nix store on s3"
+      run: |
+        echo ${{ secrets.NIX_CACHE_PRIV_KEY }} > cache-priv-key.pem
+        nix build .\#devShells.x86_64-linux.default
+        nix store sign --key-file cache-priv-key.pem --all
+        nix copy --to s3://nhost-nix-cache\?region=eu-central-1 .\#devShells.x86_64-linux.default
+
+    - run: rm cache-priv-key.pem
+      if: always()
--- a/.gitignore
+++ b/.gitignore
@@ -19,11 +19,11 @@ logs/
 coverage/
 dist/
 umd/
-node_modules/
+node_modules
 tmp/
 .pnpm-store
 .turbo
-.env
+.env*
 .secrets
 out/

--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
-prefer-workspace-packages = true
+prefer-workspace-packages = true
+auto-install-peers = false
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +0,0 @@
-{
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": true
-  },
-  "eslint.workingDirectories": ["./dashboard"],
-  "typescript.tsdk": "node_modules/typescript/lib"
-}
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -0,0 +1,7 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+At Nhost, we take security vulnerabilities seriously and appreciate the assistance of the community in bringing any issues to our attention. If you discover a security vulnerability, please use the GitHub Security Advisory ["Report a Vulnerability"](https://github.com/nhost/nhost/security/advisories/new) tab.
+
+Once you have submitted the report, we will promptly conduct a thorough investigation within 72 hours. In case we need further information, we may contact you for additional details. Rest assured that addressing the reported vulnerability in a timely manner is our top priority.
--- a/audit-ci.jsonc
+++ b/audit-ci.jsonc
@@ -0,0 +1,6 @@
+{
+  // $schema provides code completion hints to IDEs.
+  "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
+  "moderate": true,
+  "allowlist": ["trim-newlines"]
+}
--- a/dashboard/.env.example
+++ b/dashboard/.env.example
@@ -16,3 +16,6 @@ NEXT_PUBLIC_STRIPE_PK=<nhost_stripe_public_key>
 NEXT_PUBLIC_GITHUB_APP_INSTALL_URL=<github_app_install_url>
 NEXT_PUBLIC_ANALYTICS_WRITE_KEY=<analytics_write_key>
 NEXT_PUBLIC_NHOST_BRAGI_WEBSOCKET=<nhost_bragi_websocket>
+
+CODEGEN_GRAPHQL_URL=https://local.graphql.nhost.run/v1
+CODEGEN_HASURA_ADMIN_SECRET=nhost-admin-secret
--- a/dashboard/CHANGELOG.md
+++ b/dashboard/CHANGELOG.md
@@ -1,5 +1,129 @@
 # @nhost/dashboard

+## 1.8.0
+
+### Minor Changes
+
+- 713d53c: feat: add catch-all route for workspace/project - useful for documentation
+
+### Patch Changes
+
+- 3db2999: fix: refresh table list after running SQL using the editor
+- 3c4dd55: fix: handle `Error` objects properly in the `ErrorToast` component
+- 92b434e: fix: resolve an issue where the checkbox in the data-grid header did not select all rows
+  - @nhost/react-apollo@9.0.1
+  - @nhost/nextjs@2.1.3
+
+## 1.7.0
+
+### Minor Changes
+
+- 0d8d0eb: Update docs and dashboard references
+
+## 1.6.9
+
+### Patch Changes
+
+- @nhost/react-apollo@9.0.0
+- @nhost/nextjs@2.1.2
+
+## 1.6.8
+
+### Patch Changes
+
+- @nhost/react-apollo@8.0.1
+- @nhost/nextjs@2.1.1
+
+## 1.6.7
+
+### Patch Changes
+
+- 5ef5189: fix: update `@apollo/client` to `3.9.4` to fix a cache bug
+
+## 1.6.6
+
+### Patch Changes
+
+- 3ba485e: fix: added discord.com to connect-src
+- e5bab6a: chore: update dependencies
+- Updated dependencies [b19ffed]
+- Updated dependencies [e5bab6a]
+  - @nhost/nextjs@2.1.0
+  - @nhost/react-apollo@8.0.0
+
+## 1.6.5
+
+### Patch Changes
+
+- ba73bb4: fix: update ErrorToast component to show the internal graphql error
+- d5337ff: fix: utilize accumulator in the creation of validation schema within data grid utils
+
+## 1.6.4
+
+### Patch Changes
+
+- 7c2a1c2: feat: show error and debug info in the error toast
+
+## 1.6.3
+
+### Patch Changes
+
+- 6b8aad5: fix: add bare nhost.run to CSP
+
+## 1.6.2
+
+### Patch Changes
+
+- b18edc0: feat: added CSP and X-Frame-Options
+
+## 1.6.1
+
+### Patch Changes
+
+- 8d91f71: chore: update deps and enable pnpm audit
+- 3b8473b: chore: update turbo to `1.11.3` and pnpm to `8.10.5` in Dockerfile
+- Updated dependencies [8d91f71]
+  - @nhost/react-apollo@7.0.2
+  - @nhost/nextjs@2.0.2
+
+## 1.6.0
+
+### Minor Changes
+
+- 3ff1c2b53: fix: show upgrade option for pro projects
+
+## 1.5.0
+
+### Minor Changes
+
+- c2ef17c0a: feat: add support for new Team plan
+
+## 1.4.0
+
+### Minor Changes
+
+- 7883bbcbd: feat: don't show deprecated plans
+- 44be6dc0a: feat: set redirectTo during sign-in to support preview environments
+
+### Patch Changes
+
+- 3c3594898: fix: allow access to graphite when configured running in local dashboard
+- 32c246b7a: chore: update docs icon
+
+## 1.3.2
+
+### Patch Changes
+
+- 174b4165b: chore: use env variables when running graphql codegen
+- 7c977e714: chore: change `Allowed Roles` to `Default Allowed Roles`
+- 46f028b9f: fix: remove hardcoded ai version setting
+
+## 1.3.1
+
+### Patch Changes
+
+- af33c21d1: chore: remove backendUrl deprecation notice and remove all references to `providersUpdated`
+
 ## 1.3.0

 ### Minor Changes
--- a/dashboard/Dockerfile
+++ b/dashboard/Dockerfile
@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app

-RUN yarn global add turbo@1.10.11
+RUN yarn global add turbo@1.11.3
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker

@@ -29,7 +29,7 @@ ENV NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL __NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL_
 ENV NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL __NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL__
 ENV NEXT_PUBLIC_NHOST_HASURA_API_URL __NEXT_PUBLIC_NHOST_HASURA_API_URL__

-RUN yarn global add pnpm@8.6.2
+RUN yarn global add pnpm@8.10.5
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
 COPY --from=pruner /app/out/pnpm-*.yaml .
--- a/dashboard/e2e/account/pat/manage-pat.test.ts
+++ b/dashboard/e2e/account/pat/manage-pat.test.ts
@@ -27,7 +27,7 @@ test('should be able to create then delete a personal access token', async () =>
  const patName = faker.lorem.slug(3);

  await page.getByRole('textbox', { name: /name/i }).fill(patName);
-  await page.getByRole('button', { name: /expiration/i }).click();
+  await page.getByLabel('Expiration').click();
  await page.getByRole('option', { name: /7 days/i }).click();
  await page.getByRole('button', { name: /create/i }).click();

--- a/dashboard/e2e/database/create-table.test.ts
+++ b/dashboard/e2e/database/create-table.test.ts
@@ -138,7 +138,8 @@ test('should create a table with an identity column', async () => {
    ],
  });

-  await page.getByRole('button', { name: /identity/i }).click();
+  // await page.getByRole('button', { name: /identity/i }).click();
+  await page.getByLabel('Identity').click();
  await page.getByRole('option', { name: /id/i }).click();

  // create table
@@ -194,26 +195,18 @@ test('should create table with foreign key constraint', async () => {

  await page.getByRole('button', { name: /add foreign key/i }).click();

-  // select column in current table
-  await page
-    .getByRole('button', { name: /column/i })
-    .first()
-    .click();
+  await page.locator('#columnName').click();
  await page.getByRole('option', { name: /author_id/i }).click();

  // select reference schema
-  await page.getByRole('button', { name: /schema/i }).click();
+  await page.getByLabel('Schema').click();
  await page.getByRole('option', { name: /public/i }).click();

  // select reference table
-  await page.getByRole('button', { name: /table/i }).click();
+  await page.getByLabel('Table').click();
  await page.getByRole('option', { name: firstTableName, exact: true }).click();

-  // select reference column
-  await page
-    .getByRole('button', { name: /column/i })
-    .nth(1)
-    .click();
+  await page.locator('#referencedColumn').click();
  await page.getByRole('option', { name: /id/i }).click();

  await page.getByRole('button', { name: /add/i }).click();
--- a/dashboard/e2e/database/delete-table.test.ts
+++ b/dashboard/e2e/database/delete-table.test.ts
@@ -113,27 +113,21 @@ test('should not be able to delete a table if other tables have foreign keys ref
  await page.getByRole('button', { name: /add foreign key/i }).click();

  // select column in current table
-  await page
-    .getByRole('button', { name: /column/i })
-    .first()
-    .click();
+  await page.locator('#columnName').click();
+
  await page.getByRole('option', { name: /author_id/i }).click();

  // select reference schema
-  await page.getByRole('button', { name: /schema/i }).click();
+  await page.getByLabel('Schema').click();
  await page.getByRole('option', { name: /public/i }).click();

  // select reference table
-  await page.getByRole('button', { name: /table/i }).click();
+  await page.getByLabel('Table').click();
  await page.getByRole('option', { name: firstTableName, exact: true }).click();

  // select reference column
-  await page
-    .getByRole('button', { name: /column/i })
-    .nth(1)
-    .click();
+  await page.locator('#referencedColumn').click();
  await page.getByRole('option', { name: /id/i }).click();
-
  await page.getByRole('button', { name: /add/i }).click();

  await expect(
--- a/dashboard/e2e/overview/overview.test.ts
+++ b/dashboard/e2e/overview/overview.test.ts
@@ -93,7 +93,7 @@ test("should show the project's region and subdomain", async () => {

 test('should not have a GitHub repository connected', async () => {
  await expect(
-    page.getByRole('button', { name: /connect to github/i }),
+    page.getByRole('button', { name: /connect to github/i }).first(),
  ).toBeVisible();
 });

--- a/dashboard/e2e/utils.ts
+++ b/dashboard/e2e/utils.ts
@@ -116,7 +116,8 @@ export async function prepareTable({
  );

  // select the first column as primary key
-  await page.getByRole('button', { name: /primary key/i }).click();
+  // await page.getByRole('button', { name: /primary key/i }).click();
+  await page.getByLabel('Primary Key').click();
  await page.getByRole('option', { name: primaryKey, exact: true }).click();
 }

--- a/dashboard/graphql.config.yaml
+++ b/dashboard/graphql.config.yaml
@@ -1,7 +1,7 @@
 schema:
-  - https://local.graphql.nhost.run/v1:
+  - ${CODEGEN_GRAPHQL_URL}:
      headers:
-        x-hasura-admin-secret: nhost-admin-secret
+        x-hasura-admin-secret: ${CODEGEN_HASURA_ADMIN_SECRET}
 generates:
  src/utils/__generated__/graphql.ts:
    documents:
--- a/dashboard/hypertune.graphql
+++ b/dashboard/hypertune.graphql
@@ -1,5 +0,0 @@
-query InitQuery {
-  root {
-    enableServices
-  }
-}
--- a/dashboard/hypertune.json
+++ b/dashboard/hypertune.json
@@ -1,5 +0,0 @@
-{
-  "projectId": 2596,
-  "token": "U2FsdGVkX19+V8BJnVR0xLEC+42OW5qZl/A0i6beAaRmJoIhFh5Yf6eIKBzLbV9h",
-  "outputDirectoryPath": "src/hypertune"
-}
--- a/dashboard/next.config.js
+++ b/dashboard/next.config.js
@@ -4,6 +4,22 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 });
 const { version } = require('./package.json');

+const cspHeader = `
+    default-src 'self' *.nhost.run ws://*.nhost.run nhost.run ws://nhost.run;
+    script-src 'self' 'unsafe-eval' 'unsafe-inline' cdn.segment.com js.stripe.com;
+    connect-src 'self' *.nhost.run ws://*.nhost.run nhost.run ws://nhost.run discord.com;
+    style-src 'self' 'unsafe-inline';
+    img-src 'self' blob: data: avatars.githubusercontent.com s.gravatar.com *.nhost.run nhost.run;
+    font-src 'self' data:;
+    object-src 'none';
+    base-uri 'self';
+    form-action 'self';
+    frame-ancestors 'none';
+    frame-src 'self' js.stripe.com;
+    block-all-mixed-content;
+    upgrade-insecure-requests;
+`;
+
 module.exports = withBundleAnalyzer({
  reactStrictMode: true,
  swcMinify: false,
@@ -17,6 +33,23 @@ module.exports = withBundleAnalyzer({
  eslint: {
    dirs: ['src'],
  },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'X-Frame-Options',
+            value: 'SAMEORIGIN',
+          },
+          {
+            key: 'Content-Security-Policy',
+            value: cspHeader.replace(/\n/g, ''),
+          },
+        ],
+      },
+    ];
+  },
  async redirects() {
    return [
      {
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@nhost/dashboard",
-  "version": "1.3.0",
+  "version": "1.8.0",
  "private": true,
  "scripts": {
    "preinstall": "npx only-allow pnpm",
@@ -10,67 +10,67 @@
    "start": "next start",
    "lint": "next lint --max-warnings 0",
    "test": "vitest",
-    "codegen": "graphql-codegen --config graphql.config.yaml --errors-only",
+    "codegen": "DOTENV_CONFIG_PATH=./.env.local graphql-codegen -r dotenv/config --config graphql.config.yaml --errors-only",
    "codegen-graphite": "graphql-codegen --config graphite.graphql.config.yaml --errors-only",
    "format": "prettier --write \"src/**/*.{js,ts,tsx,jsx,json,md}\" --plugin-search-dir=.",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook",
-    "install-browsers": "pnpm dlx playwright@1.31.0 install --with-deps",
-    "e2e": "pnpm install-browsers && pnpm dlx playwright@1.31.0 test"
+    "install-browsers": "pnpm playwright install && pnpm playwright install-deps",
+    "e2e": "pnpm install-browsers && pnpm playwright test"
  },
  "dependencies": {
-    "@apollo/client": "^3.7.10",
-    "@codemirror/lang-sql": "^6.5.4",
-    "@emotion/cache": "^11.10.5",
-    "@emotion/react": "^11.10.5",
-    "@emotion/server": "^11.4.0",
-    "@emotion/styled": "^11.10.5",
-    "@fontsource/inter": "^5.0.0",
-    "@fontsource/roboto-mono": "^5.0.0",
-    "@graphiql/react": "^0.18.0",
-    "@graphiql/toolkit": "^0.8.2",
-    "@headlessui/react": "^1.6.5",
+    "@apollo/client": "^3.9.4",
+    "@codemirror/lang-sql": "^6.5.5",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/inter": "^5.0.16",
+    "@fontsource/roboto-mono": "^5.0.16",
+    "@graphiql/react": "^0.20.2",
+    "@graphiql/toolkit": "^0.9.1",
+    "@headlessui/react": "^1.7.18",
    "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^3.0.0",
-    "@mui/base": "^5.0.0-alpha.106",
-    "@mui/material": "^5.10.14",
-    "@mui/system": "^5.10.14",
-    "@mui/x-date-pickers": "^5.0.8",
+    "@hookform/resolvers": "^3.3.4",
+    "@mui/base": "5.0.0-beta.31",
+    "@mui/material": "^5.15.7",
+    "@mui/system": "^5.15.7",
+    "@mui/x-date-pickers": "^5.0.20",
    "@nhost/nextjs": "workspace:*",
    "@nhost/react-apollo": "workspace:*",
-    "@segment/snippet": "^4.15.3",
-    "@stripe/react-stripe-js": "^2.0.0",
-    "@stripe/stripe-js": "^1.35.0",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tanstack/react-query": "^4.16.1",
-    "@tanstack/react-table": "^8.5.30",
-    "@tanstack/react-virtual": "^3.0.0-beta.23",
-    "@uiw/codemirror-theme-github": "^4.21.20",
-    "@uiw/react-codemirror": "^4.21.20",
+    "@segment/snippet": "^4.16.2",
+    "@stripe/react-stripe-js": "^2.4.0",
+    "@stripe/stripe-js": "^1.54.2",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-table": "^8.11.7",
+    "@tanstack/react-virtual": "^3.0.2",
+    "@uiw/codemirror-theme-github": "^4.21.21",
+    "@uiw/react-codemirror": "^4.21.21",
    "analytics-node": "^6.2.0",
    "bcryptjs": "^2.4.3",
    "clsx": "^1.2.1",
-    "date-fns": "^2.29.3",
-    "generate-password": "^1.7.0",
-    "graphiql": "^3.0.0",
-    "graphql": "^16.6.0",
-    "graphql-request": "^6.0.0",
+    "date-fns": "^2.30.0",
+    "framer-motion": "^10.18.0",
+    "generate-password": "^1.7.1",
+    "graphiql": "^3.1.0",
+    "graphql": "16.8.1",
+    "graphql-request": "^6.1.0",
    "graphql-tag": "^2.12.6",
-    "graphql-ws": "^5.11.2",
-    "hypertune": "^1.4.4",
-    "just-kebab-case": "^4.1.1",
+    "graphql-ws": "^5.14.3",
+    "just-kebab-case": "^4.2.0",
    "lodash.debounce": "^4.0.8",
-    "next": "^12.3.1",
-    "next-seo": "^6.0.0",
+    "next": "^14.1.0",
+    "next-seo": "^6.4.0",
    "node-pg-format": "^1.3.5",
    "pluralize": "^8.0.0",
    "react": "18.2.0",
-    "react-children-utilities": "^2.9.0",
+    "react-children-utilities": "^2.10.0",
    "react-dom": "18.2.0",
-    "react-error-boundary": "^4.0.0",
-    "react-hook-form": "^7.42.1",
-    "react-hot-toast": "^2.4.0",
-    "react-intersection-observer": "^9.5.2",
+    "react-error-boundary": "^4.0.12",
+    "react-hook-form": "^7.50.0",
+    "react-hot-toast": "^2.4.1",
+    "react-intersection-observer": "^9.5.4",
    "react-is": "18.2.0",
    "react-loading-skeleton": "^2.2.0",
    "react-markdown": "^9.0.1",
@@ -82,87 +82,87 @@
    "rehype-highlight": "^7.0.0",
    "remark-gfm": "^4.0.0",
    "shell-quote": "^1.8.1",
-    "slugify": "^1.6.5",
+    "slugify": "^1.6.6",
    "stripe": "^10.17.0",
-    "tailwind-merge": "^1.8.0",
-    "utility-types": "^3.10.0",
-    "validator": "^13.7.0",
-    "yup": "^1.0.2",
+    "tailwind-merge": "^1.14.0",
+    "utility-types": "^3.11.0",
+    "validator": "^13.11.0",
+    "yup": "^1.3.3",
    "yup-password": "^0.2.2"
  },
  "devDependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.23.9",
    "@faker-js/faker": "^7.6.0",
-    "@graphql-codegen/cli": "^3.0.0",
-    "@graphql-codegen/typescript": "^3.0.0",
-    "@graphql-codegen/typescript-operations": "^3.0.0",
-    "@graphql-codegen/typescript-react-apollo": "^3.3.1",
-    "@next/bundle-analyzer": "^12.3.1",
-    "@playwright/test": "1.31.0",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-interactions": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
+    "@graphql-codegen/cli": "^3.3.1",
+    "@graphql-codegen/typescript": "^3.0.4",
+    "@graphql-codegen/typescript-operations": "^3.0.4",
+    "@graphql-codegen/typescript-react-apollo": "^3.3.7",
+    "@next/bundle-analyzer": "^12.3.4",
+    "@playwright/test": "1.41.0",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.14",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^7.6.15",
+    "@storybook/testing-library": "^0.2.2",
    "@tailwindcss/typography": "^0.5.10",
-    "@testing-library/dom": "^9.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.2.0",
+    "@testing-library/user-event": "^14.5.2",
    "@types/ace": "^0.0.48",
-    "@types/bcryptjs": "^2.4.2",
-    "@types/jest": "^29.5.3",
-    "@types/lodash.debounce": "^4.0.7",
-    "@types/node": "^16.11.7",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/jest": "^29.5.11",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^16.18.78",
    "@types/pluralize": "^0.0.30",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-table": "^7.7.12",
-    "@types/shell-quote": "^1.7.1",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@types/validator": "^13.7.10",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "@vitest/coverage-v8": "^0.32.0",
-    "autoprefixer": "^10.4.13",
+    "@types/react": "^18.2.50",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-table": "^7.7.19",
+    "@types/shell-quote": "^1.7.5",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "@types/validator": "^13.11.8",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^0.32.4",
+    "autoprefixer": "^10.4.17",
    "babel-loader": "^8.3.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
-    "csstype": "^3.0.10",
-    "dotenv": "^16.0.3",
+    "csstype": "^3.1.3",
+    "dotenv": "^16.4.1",
    "encoding": "^0.1.13",
-    "eslint": "^8.28.0",
+    "eslint": "^8.56.0",
    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-next": "^13.0.2",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-next": "^13.5.6",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
-    "jsdom": "^22.0.0",
-    "lint-staged": ">=13",
-    "msw": "^1.0.1",
-    "msw-storybook-addon": "^1.6.3",
-    "node-fetch": "^3.3.0",
-    "postcss": "^8.4.19",
-    "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^3.2.0",
-    "prettier-plugin-tailwindcss": "^0.4.0",
+    "jsdom": "^22.1.0",
+    "lint-staged": "^15.2.1",
+    "msw": "^1.3.2",
+    "msw-storybook-addon": "^1.10.0",
+    "node-fetch": "^3.3.2",
+    "postcss": "^8.4.33",
+    "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.4.1",
    "react-date-fns-hooks": "^0.9.4",
    "require-from-string": "^2.0.2",
    "snake-case": "^3.0.4",
-    "storybook-addon-next-router": "^4.0.1",
-    "tailwindcss": "^3.1.2",
-    "ts-node": "^10.9.1",
-    "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "vite": "^4.0.2",
-    "vite-tsconfig-paths": "^4.0.3",
-    "vitest": "^0.32.0"
+    "storybook-addon-next-router": "^4.0.2",
+    "tailwindcss": "^3.4.1",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "vite": "^5.0.12",
+    "vite-tsconfig-paths": "^4.3.1",
+    "vitest": "^0.32.4"
  },
  "browserslist": {
    "production": [
--- a/dashboard/public/logos/Note.svg
+++ b/dashboard/public/logos/Note.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6H10" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 8H10" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 10H8" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.79289 13.5H3C2.86739 13.5 2.74021 13.4473 2.64645 13.3536C2.55268 13.2598 2.5 13.1326 2.5 13V3C2.5 2.86739 2.55268 2.74021 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5H13C13.1326 2.5 13.2598 2.55268 13.3536 2.64645C13.4473 2.74021 13.5 2.86739 13.5 3V9.79289C13.5 9.85855 13.4871 9.92357 13.4619 9.98423C13.4368 10.0449 13.4 10.1 13.3536 10.1464L10.1464 13.3536C10.1 13.4 10.0449 13.4368 9.98423 13.4619C9.92357 13.4871 9.85855 13.5 9.79289 13.5V13.5Z" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4548 9.99948H10V13.4545" stroke="#21324B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/dashboard/public/logos/light/Note.svg
+++ b/dashboard/public/logos/light/Note.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6H10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 8H10" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 10H8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.79289 13.5H3C2.86739 13.5 2.74021 13.4473 2.64645 13.3536C2.55268 13.2598 2.5 13.1326 2.5 13V3C2.5 2.86739 2.55268 2.74021 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5H13C13.1326 2.5 13.2598 2.55268 13.3536 2.64645C13.4473 2.74021 13.5 2.86739 13.5 3V9.79289C13.5 9.85855 13.4871 9.92357 13.4619 9.98423C13.4368 10.0449 13.4 10.1 13.3536 10.1464L10.1464 13.3536C10.1 13.4 10.0449 13.4368 9.98423 13.4619C9.92357 13.4871 9.85855 13.5 9.79289 13.5V13.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.4548 9.99948H10V13.4545" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/dashboard/src/components/common/ContactUs/ContactUs.tsx
+++ b/dashboard/src/components/common/ContactUs/ContactUs.tsx
@@ -4,9 +4,17 @@ import type { DetailedHTMLProps, HTMLProps } from 'react';
 import { twMerge } from 'tailwind-merge';

 export interface ContactUsProps
-  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {}
+  extends DetailedHTMLProps<HTMLProps<HTMLDivElement>, HTMLDivElement> {
+  isTeam?: boolean;
+  isOwner?: boolean;
+}

-export default function FeedbackForm({ className, ...props }: ContactUsProps) {
+export default function FeedbackForm({
+  className,
+  isTeam,
+  isOwner,
+  ...props
+}: ContactUsProps) {
  return (
    <div
      className={twMerge(
@@ -19,6 +27,30 @@ export default function FeedbackForm({ className, ...props }: ContactUsProps) {
        Contact us
      </Text>

+      {isTeam && isOwner && (
+        <Text>
+          If this is a new Team project, or you need to manage members, reach
+          out to us on discord or via email at{' '}
+          <Link
+            href="mailto:support@nhost.io"
+            target="_blank"
+            rel="noopener noreferrer"
+            underline="hover"
+          >
+            support@nhost.io
+          </Link>{' '}
+          so we can have your dedicated channel set up.
+        </Text>
+      )}
+
+      {isTeam && !isOwner && (
+        <Text>
+          As part of a team plan you can reach out to us on the private channel
+          for this workspace. If you haven&apos;t been added to the channel, ask
+          the workspace owner to add you.
+        </Text>
+      )}
+
      <Text>
        To report issues with Nhost, please open a GitHub issue in the{' '}
        <Link
--- a/dashboard/src/components/common/DepricationNotice/DepricationNotice.tsx
+++ b/dashboard/src/components/common/DepricationNotice/DepricationNotice.tsx
@@ -1,28 +0,0 @@
-import { Alert } from '@/components/ui/v2/Alert';
-import { Text } from '@/components/ui/v2/Text';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-
-export default function DepricationNotice() {
-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  return (
-    !currentProject?.providersUpdated && (
-      <Alert severity="warning" className="grid place-content-center">
-        <Text color="warning" className="max-w-3xl text-sm">
-          On December 1st the old backend domain will cease to work. You need to
-          make sure your client is instantiated using the subdomain and region
-          and update your oauth2 settings. You can find more information{' '}
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline"
-            href="https://github.com/nhost/nhost/discussions/2303"
-          >
-            here
-          </a>
-          .
-        </Text>
-      </Alert>
-    )
-  );
-}
--- a/dashboard/src/components/common/DepricationNotice/index.ts
+++ b/dashboard/src/components/common/DepricationNotice/index.ts
@@ -1 +0,0 @@
-export { default as ContactUs } from './DepricationNotice';
--- a/dashboard/src/components/common/NavLink/NavLink.tsx
+++ b/dashboard/src/components/common/NavLink/NavLink.tsx
@@ -17,7 +17,7 @@ function NavLink(
  ref: ForwardedRef<HTMLAnchorElement>,
 ) {
  return (
-    <NextLink href={href} passHref>
+    <NextLink href={href} passHref legacyBehavior>
      <Link className={twMerge('font-display', className)} ref={ref} {...props}>
        {children}
      </Link>
--- a/dashboard/src/components/common/ThemeSwitcher/ThemeSwitcher.tsx
+++ b/dashboard/src/components/common/ThemeSwitcher/ThemeSwitcher.tsx
@@ -26,7 +26,7 @@ export default function ThemeSwitcher({
        listbox: { className: 'min-w-0 w-full' },
        popper: {
          disablePortal: false,
-          className: 'z-[10000] w-[270px] w-full',
+          className: 'z-[10000] w-[270px]',
        },
      }}
    >
--- a/dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx
+++ b/dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx
@@ -26,7 +26,7 @@ export default function UpgradeToProBanner({
  return (
    <Box
      sx={{ backgroundColor: 'primary.light' }}
-      className="flex flex-col justify-between space-y-4 rounded-md p-4 lg:flex-row lg:items-center lg:space-y-0"
+      className="flex flex-col justify-between p-4 space-y-4 rounded-md lg:flex-row lg:items-center lg:space-y-0"
    >
      <div className="flex flex-col justify-between space-y-4">
        <div className="space-y-2">
@@ -81,13 +81,13 @@ export default function UpgradeToProBanner({
            target="_blank"
            rel="noopener noreferrer"
            underline="hover"
-            className="text-center font-medium"
+            className="font-medium text-center"
            sx={{
              color: 'text.secondary',
            }}
          >
            See all features
-            <ArrowSquareOutIcon className="ml-1 h-4 w-4" />
+            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
          </Link>
        </div>
      </div>
@@ -97,6 +97,7 @@ export default function UpgradeToProBanner({
        width={300}
        height={140}
        objectFit="contain"
+        alt='Upgrade to Pro illustration'
      />
    </Box>
  );
--- a/dashboard/src/components/dataGrid/DataGridCell/DataGridCell.tsx
+++ b/dashboard/src/components/dataGrid/DataGridCell/DataGridCell.tsx
@@ -8,7 +8,7 @@ import type {
  DataBrowserGridCellProps,
 } from '@/features/database/dataGrid/types/dataBrowser';
 import { triggerToast } from '@/utils/toast';
-import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import type { FocusEvent, JSXElementConstructor, KeyboardEvent, MouseEvent, ReactElement, ReactNode, ReactPortal } from 'react';
 import {
  Children,
  cloneElement,
@@ -320,7 +320,7 @@ function DataGridCellContent<TData extends object = {}, TValue = unknown>({
      sx={{ backgroundColor: 'transparent' }}
      {...props}
    >
-      {Children.map(children, (child) => {
+      {Children.map(children, (child: ReactNode | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>>) => {
        if (!isValidElement(child)) {
          return null;
        }
--- a/dashboard/src/components/dataGrid/DataGridHeader/DataGridHeader.tsx
+++ b/dashboard/src/components/dataGrid/DataGridHeader/DataGridHeader.tsx
@@ -96,45 +96,52 @@ export default function DataGridHeader<T extends object>({
            }}
            key={column.id}
          >
-            <Dropdown.Trigger
-              className={twMerge(
-                'focus:outline-none motion-safe:transition-colors',
-              )}
-              disabled={
-                column.isDisabled ||
-                column.id === 'selection' ||
-                (column.disableSortBy && !onRemoveColumn)
-              }
-              hideChevron
-            >
+            {column.id === 'selection' ? (
              <span
                {...headerProps}
                className="relative grid w-full grid-flow-col items-center justify-between p-2"
              >
                {column.render('Header')}
-
-                {allowSort && (
-                  <Box component="span" sx={{ color: 'text.primary' }}>
-                    {column.isSorted && !column.isSortedDesc && (
-                      <ArrowUpIcon className="h-3 w-3" />
-                    )}
-
-                    {column.isSorted && column.isSortedDesc && (
-                      <ArrowDownIcon className="h-3 w-3" />
-                    )}
-                  </Box>
-                )}
              </span>
-
-              {allowResize && !column.disableResizing && (
+            ) : (
+              <Dropdown.Trigger
+                className={twMerge(
+                  'focus:outline-none motion-safe:transition-colors',
+                )}
+                disabled={
+                  column.isDisabled || (column.disableSortBy && !onRemoveColumn)
+                }
+                hideChevron
+              >
                <span
-                  {...column.getResizerProps({
-                    onClick: (event: Event) => event.stopPropagation(),
-                  })}
-                  className="absolute top-0 bottom-0 -right-0.5 z-10 h-full w-1.5 group-hover:bg-slate-900 group-hover:bg-opacity-20 group-active:bg-slate-900 group-active:bg-opacity-20 motion-safe:transition-colors"
-                />
-              )}
-            </Dropdown.Trigger>
+                  {...headerProps}
+                  className="relative grid w-full grid-flow-col items-center justify-between p-2"
+                >
+                  {column.render('Header')}
+
+                  {allowSort && (
+                    <Box component="span" sx={{ color: 'text.primary' }}>
+                      {column.isSorted && !column.isSortedDesc && (
+                        <ArrowUpIcon className="h-3 w-3" />
+                      )}
+
+                      {column.isSorted && column.isSortedDesc && (
+                        <ArrowDownIcon className="h-3 w-3" />
+                      )}
+                    </Box>
+                  )}
+                </span>
+
+                {allowResize && !column.disableResizing && (
+                  <span
+                    {...column.getResizerProps({
+                      onClick: (event: Event) => event.stopPropagation(),
+                    })}
+                    className="absolute -right-0.5 bottom-0 top-0 z-10 h-full w-1.5 group-hover:bg-slate-900 group-hover:bg-opacity-20 group-active:bg-slate-900 group-active:bg-opacity-20 motion-safe:transition-colors"
+                  />
+                )}
+              </Dropdown.Trigger>
+            )}

            <Dropdown.Content
              menu
--- a/dashboard/src/components/layout/Header/Header.tsx
+++ b/dashboard/src/components/layout/Header/Header.tsx
@@ -13,6 +13,7 @@ import { Dropdown } from '@/components/ui/v2/Dropdown';
 import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
 import { DevAssistant } from '@/features/ai/DevAssistant';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { ApplicationStatus } from '@/types/application';
 import { getToastStyleProps } from '@/utils/constants/settings';
@@ -37,6 +38,8 @@ export default function Header({ className, ...props }: HeaderProps) {
  const { currentProject, refetch: refetchProject } =
    useCurrentWorkspaceAndProject();

+  const isOwner = useIsCurrentUserOwner();
+
  const isProjectUpdating =
    currentProject?.appStates[0]?.stateId === ApplicationStatus.Updating;

@@ -114,7 +117,11 @@ export default function Header({ className, ...props }: HeaderProps) {
              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
            >
-              <ContactUs className="max-w-md" />
+              <ContactUs
+                className="max-w-md"
+                isTeam={currentProject?.plan?.name === 'Team'}
+                isOwner={isOwner}
+              />
            </Dropdown.Content>
          </Dropdown.Root>
        )}
--- a/dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx
+++ b/dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx
@@ -1,4 +1,3 @@
-import DepricationNotice from '@/components/common/DepricationNotice/DepricationNotice';
 import type { ProjectLayoutProps } from '@/components/layout/ProjectLayout';
 import { ProjectLayout } from '@/components/layout/ProjectLayout';
 import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
@@ -50,7 +49,6 @@ export default function SettingsLayout({
      >
        <RetryableErrorBoundary>
          <div className="flex flex-col space-y-2">
-            <DepricationNotice />
            {hasGitRepo && (
              <Alert
                severity="warning"
--- a/dashboard/src/components/settings/ProvidersUpdatedAlert.tsx
+++ b/dashboard/src/components/settings/ProvidersUpdatedAlert.tsx
@@ -1,100 +0,0 @@
-import { useDialog } from '@/components/common/DialogProvider';
-import { Alert } from '@/components/ui/v2/Alert';
-import { Button } from '@/components/ui/v2/Button';
-import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
-import { Link } from '@/components/ui/v2/Link';
-import { Text } from '@/components/ui/v2/Text';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { useConfirmProvidersUpdatedMutation } from '@/utils/__generated__/graphql';
-import { useTheme } from '@mui/material';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-
-export default function ProvidersUpdatedAlert() {
-  const theme = useTheme();
-  const { openAlertDialog } = useDialog();
-  const [confirmed, setConfirmed] = useState(true);
-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  const [confirmProvidersUpdated] = useConfirmProvidersUpdatedMutation({
-    variables: { id: currentProject?.id },
-  });
-
-  async function handleSubmitConfirmation() {
-    const confirmProvidersUpdatedPromise = confirmProvidersUpdated();
-
-    await toast.promise(
-      confirmProvidersUpdatedPromise,
-      {
-        loading: 'Confirming...',
-        success: 'Your settings have been updated successfully.',
-        error: 'An error occurred while trying to confirm the message.',
-      },
-      getToastStyleProps(),
-    );
-
-    setConfirmed(false);
-  }
-
-  function handleOpenConfirmationDialog() {
-    openAlertDialog({
-      title: 'Confirm all providers updated?',
-      payload: (
-        <Text variant="subtitle1" component="span">
-          Please make sure to update all providers before continuing. Your
-          sign-in flows might break if you don&apos;t.
-        </Text>
-      ),
-      props: {
-        onPrimaryAction: handleSubmitConfirmation,
-      },
-    });
-  }
-
-  if (!confirmed) {
-    return null;
-  }
-
-  return (
-    <Alert
-      severity="warning"
-      className="grid items-center grid-flow-row gap-2 p-4 place-items-center lg:grid-flow-col lg:place-content-between"
-    >
-      <div className="grid grid-flow-row gap-1 text-left">
-        <Text className="font-semibold">
-          Please update the Redirect URL for all providers being used
-        </Text>
-
-        <Text className="text-sm+">
-          We are deprecating your project&apos;s old DNS name in favor of
-          individual DNS names for each service. Please make sure to update your
-          providers to use the new auth specific URL under <b>Redirect URL</b>{' '}
-          before the 1st of February 2023.{' '}
-          <Link
-            href="https://github.com/nhost/nhost/discussions/1319"
-            target="_blank"
-            rel="noopener noreferrer"
-            underline="hover"
-            className="font-medium"
-          >
-            Read the discussion here.
-            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
-          </Link>
-        </Text>
-      </div>
-
-      <Button
-        variant="borderless"
-        className={
-          theme.palette.mode === 'dark'
-            ? 'text-white hover:bg-brown'
-            : 'text-black hover:bg-orange-300'
-        }
-        onClick={handleOpenConfirmationDialog}
-      >
-        I have updated all Redirect URLs
-      </Button>
-    </Alert>
-  );
-}
--- a/dashboard/src/components/settings/index.ts
+++ b/dashboard/src/components/settings/index.ts
@@ -1 +0,0 @@
-export { default as ProvidersUpdatedAlert } from './ProvidersUpdatedAlert';
--- a/dashboard/src/components/ui/v2/Autocomplete/Autocomplete.tsx
+++ b/dashboard/src/components/ui/v2/Autocomplete/Autocomplete.tsx
@@ -8,9 +8,9 @@ import { Input, inputClasses } from '@/components/ui/v2/Input';
 import { OptionBase } from '@/components/ui/v2/Option';
 import { OptionGroupBase } from '@/components/ui/v2/OptionGroup';
 import type { StyledComponent } from '@emotion/styled';
-import type { UseAutocompleteProps } from '@mui/base/AutocompleteUnstyled';
-import { createFilterOptions } from '@mui/base/AutocompleteUnstyled';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
+import type { UseAutocompleteProps } from '@mui/base/useAutocomplete';
+import { createFilterOptions } from '@mui/base/useAutocomplete';
+import { Popper } from '@mui/base'
 import { styled } from '@mui/material';
 import type { AutocompleteProps as MaterialAutocompleteProps } from '@mui/material/Autocomplete';
 import MaterialAutocomplete, {
@@ -142,7 +142,7 @@ const StyledOptionBase = styled(OptionBase)(({ theme }) => ({
  gap: theme.spacing(0.5),
 }));

-export const AutocompletePopper = styled(PopperUnstyled)(({ theme }) => ({
+export const AutocompletePopper = styled(Popper)(({ theme }) => ({
  zIndex: theme.zIndex.modal + 1,
  boxShadow: 'none',
  minWidth: 320,
--- a/dashboard/src/components/ui/v2/Box/Box.tsx
+++ b/dashboard/src/components/ui/v2/Box/Box.tsx
@@ -1,9 +1,7 @@
 import { styled } from '@mui/material';
-import type {
-  BoxProps as MaterialBoxProps,
-  BoxTypeMap,
-} from '@mui/material/Box';
+import type { BoxProps as MaterialBoxProps } from '@mui/material/Box';
 import MaterialBox from '@mui/material/Box';
+import { type BoxTypeMap } from '@mui/system';
 import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';

--- a/dashboard/src/components/ui/v2/Chip/Chip.tsx
+++ b/dashboard/src/components/ui/v2/Chip/Chip.tsx
@@ -10,7 +10,7 @@ export interface ChipProps extends MaterialChipProps {
  /**
   * Custom component for the root node.
   */
-  component?: string | ElementType;
+  component?: ElementType;
 }

 const Chip = styled(MaterialChip)<ChipProps>(({ theme }) => ({
--- a/dashboard/src/components/ui/v2/ErrorToast/ErrorToast.tsx
+++ b/dashboard/src/components/ui/v2/ErrorToast/ErrorToast.tsx
@@ -0,0 +1,163 @@
+import { ChevronDownIcon } from '@/components/ui/v2/icons/ChevronDownIcon';
+import { ChevronUpIcon } from '@/components/ui/v2/icons/ChevronUpIcon';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { XIcon } from '@/components/ui/v2/icons/XIcon';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { getToastBackgroundColor } from '@/utils/constants/settings';
+import { copy } from '@/utils/copy';
+import { ApolloError } from '@apollo/client';
+import { useUserData } from '@nhost/nextjs';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+
+interface ErrorDetails {
+  info: {
+    projectId: string;
+    userId: string;
+    url?: string;
+  };
+  error: any;
+}
+
+const getInternalErrorMessage = (
+  error: Error | ApolloError | undefined,
+): string | null => {
+  if (!error) {
+    return null;
+  }
+
+  if (error instanceof ApolloError) {
+    const internalError = error.graphQLErrors?.[0]?.extensions?.internal as
+      | { error: { message: string } }
+      | undefined;
+    return internalError?.error?.message || null;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return null;
+};
+
+const errorToObject = (error: ApolloError | Error) => {
+  if (error instanceof ApolloError) {
+    return error;
+  }
+
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message,
+      stack: error.stack,
+    };
+  }
+
+  return {};
+};
+
+export default function ErrorToast({
+  isVisible,
+  errorMessage,
+  error,
+  close,
+}: {
+  isVisible: boolean;
+  errorMessage: string;
+  error: ApolloError | Error;
+  close: () => void;
+}) {
+  const userData = useUserData();
+  const { asPath } = useRouter();
+
+  const [showInfo, setShowInfo] = useState(false);
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const errorDetails: ErrorDetails = {
+    info: {
+      projectId: currentProject?.id,
+      userId: userData?.id || 'local',
+      url: asPath,
+    },
+    error: errorToObject(error),
+  };
+
+  const msg = getInternalErrorMessage(error) || errorMessage;
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          style={{
+            backgroundColor: getToastBackgroundColor(),
+          }}
+          className="flex w-full max-w-xl flex-col space-y-4 rounded-lg p-4 text-white"
+          initial={{
+            opacity: 0,
+            y: 100,
+          }}
+          animate={{
+            opacity: 1,
+            scale: 1,
+            y: 0,
+          }}
+          exit={{
+            opacity: 0,
+            scale: 0,
+            y: 100,
+          }}
+          transition={{
+            bounce: 0.1,
+          }}
+        >
+          <div className="flex w-full flex-row items-center justify-between space-x-4">
+            <button onClick={close} type="button" aria-label="Close">
+              <XIcon className="h-4 w-4 text-white" />
+            </button>
+            <span>
+              {msg ?? 'An unkown error has occured, please try again later!'}
+            </span>
+
+            <button
+              type="button"
+              onClick={() => setShowInfo(!showInfo)}
+              className="flex flex-row items-center justify-center space-x-2 text-white"
+            >
+              <span>Info</span>
+              {showInfo ? (
+                <ChevronUpIcon className="h-3 w-3 text-white" />
+              ) : (
+                <ChevronDownIcon className="h-3 w-3 text-white" />
+              )}
+            </button>
+          </div>
+
+          {showInfo && (
+            <div className="flex flex-col space-y-4">
+              <div className="relative flex flex-col">
+                <div className="relative flex max-h-[400px] w-full max-w-xl flex-row justify-between overflow-x-auto rounded-lg bg-black p-4">
+                  <pre>{JSON.stringify(errorDetails, null, 2)}</pre>
+                </div>
+                <button
+                  type="button"
+                  aria-label="Copy error details"
+                  className="absolute right-2 top-2"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    copy(
+                      JSON.stringify(errorDetails, null, 2),
+                      'Error details',
+                    );
+                  }}
+                >
+                  <CopyIcon className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          )}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
--- a/dashboard/src/components/ui/v2/ErrorToast/index.ts
+++ b/dashboard/src/components/ui/v2/ErrorToast/index.ts
@@ -0,0 +1 @@
+export { default as ErrorToast } from './ErrorToast';
--- a/dashboard/src/components/ui/v2/HelperText/HelperText.tsx
+++ b/dashboard/src/components/ui/v2/HelperText/HelperText.tsx
@@ -7,7 +7,7 @@ export interface HelperTextProps extends MaterialFormHelperTextProps {
  /**
   * Custom component for the root node.
   */
-  component?: string | ElementType;
+  component?: ElementType;
 }

 const HelperText = styled(MaterialFormHelperText)<HelperTextProps>({
--- a/dashboard/src/components/ui/v2/Option/Option.tsx
+++ b/dashboard/src/components/ui/v2/Option/Option.tsx
@@ -1,41 +1,42 @@
-import type { OptionUnstyledProps } from '@mui/base/OptionUnstyled';
-import OptionUnstyled, {
-  optionUnstyledClasses,
-} from '@mui/base/OptionUnstyled';
+import {
+  Option as BaseOption,
+  optionClasses as baseOptionClasses,
+  type OptionProps as BaseOptionProps,
+} from '@mui/base';
 import { darken, styled } from '@mui/material';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import OptionBase from './OptionBase';

 export interface OptionProps<TValue extends {}>
-  extends OptionUnstyledProps<TValue> {}
+  extends BaseOptionProps<TValue> {}

-const StyledOption = styled(OptionUnstyled)(({ theme }) => ({
+const StyledOption = styled(BaseOption)(({ theme }) => ({
  transition: theme.transitions.create(['background-color']),
  color: theme.palette.text.primary,
-  [`&.${optionUnstyledClasses.selected}`]: {
+  [`&.${baseOptionClasses.selected}`]: {
    backgroundColor:
      theme.palette.mode === 'dark'
        ? `${darken(theme.palette.action.hover, 0.1)} !important`
        : `${darken(theme.palette.action.hover, 0.05)} !important`,
  },
-  [`&.${optionUnstyledClasses.selected}:hover, &.${optionUnstyledClasses.selected}.${optionUnstyledClasses.highlighted}`]:
+  [`&.${baseOptionClasses.selected}:hover, &.${baseOptionClasses.selected}.${baseOptionClasses.highlighted}`]:
    {
      backgroundColor:
        theme.palette.mode === 'dark'
          ? `${darken(theme.palette.action.hover, 0.25)} !important`
          : `${darken(theme.palette.action.hover, 0.075)} !important`,
    },
-  [`&.${optionUnstyledClasses.highlighted}, &:hover`]: {
+  [`&.${baseOptionClasses.highlighted}, &:hover`]: {
    backgroundColor:
      theme.palette.mode === 'dark'
        ? `${darken(theme.palette.action.hover, 0.15)} !important`
        : `${theme.palette.action.hover} !important`,
  },
-  [`&.${optionUnstyledClasses.disabled}`]: {
+  [`&.${baseOptionClasses.disabled}`]: {
    color: theme.palette.text.disabled,
  },
-  [`&.${optionUnstyledClasses.disabled}:hover`]: {
+  [`&.${baseOptionClasses.disabled}:hover`]: {
    backgroundColor: 'transparent !important',
  },
 }));
--- a/dashboard/src/components/ui/v2/OptionGroup/OptionGroup.tsx
+++ b/dashboard/src/components/ui/v2/OptionGroup/OptionGroup.tsx
@@ -1,11 +1,13 @@
-import type { OptionGroupUnstyledProps } from '@mui/base/OptionGroupUnstyled';
-import OptionGroupUnstyled from '@mui/base/OptionGroupUnstyled';
+import {
+  OptionGroup as BaseOptionGroup,
+  type OptionGroupProps as BaseOptionGroupProps,
+} from '@mui/base';
 import { styled } from '@mui/material';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import OptionGroupBase from './OptionGroupBase';

-export interface OptionGroupProps extends OptionGroupUnstyledProps {}
+export interface OptionGroupProps extends BaseOptionGroupProps {}

 const StyledGroupRoot = styled('li')(({ theme }) => ({
  listStyle: 'none',
@@ -25,7 +27,7 @@ function OptionGroup(
    ...externalSlots,
  };

-  return <OptionGroupUnstyled {...props} ref={ref} slots={slots} />;
+  return <BaseOptionGroup {...props} ref={ref} slots={slots} />;
 }

 OptionGroup.displayName = 'NhostOptionGroup';
--- a/dashboard/src/components/ui/v2/Select/Select.tsx
+++ b/dashboard/src/components/ui/v2/Select/Select.tsx
@@ -1,9 +1,9 @@
 import type { FormControlProps } from '@/components/ui/v2/FormControl';
 import { FormControl } from '@/components/ui/v2/FormControl';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
-import type { SelectUnstyledProps } from '@mui/base/SelectUnstyled';
-import SelectUnstyled from '@mui/base/SelectUnstyled';
-import { styled } from '@mui/material';
+import { Popper as BasePopper } from '@mui/base/Popper';
+import type { SelectProps as BaseSelectProps } from '@mui/base/Select';
+import { Select as BaseSelect } from '@mui/base/Select';
+import { styled } from '@mui/system';
 import clsx from 'clsx';
 import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';
@@ -11,7 +11,7 @@ import type { ToggleButtonProps } from './ToggleButton';
 import ToggleButton from './ToggleButton';

 export interface SelectProps<TValue extends {}>
-  extends SelectUnstyledProps<TValue>,
+  extends BaseSelectProps<TValue, false>,
    Pick<
      FormControlProps,
      | 'fullWidth'
@@ -25,7 +25,7 @@ export interface SelectProps<TValue extends {}>
  /**
   * Props for component slots.
   */
-  slotProps?: SelectUnstyledProps<TValue>['slotProps'] & {
+  slotProps?: BaseSelectProps<TValue, false>['slotProps'] & {
    root?: Partial<PropsWithoutRef<ToggleButtonProps>>;
    label?: Partial<FormControlProps['labelProps']>;
    formControl?: Partial<FormControlProps>;
@@ -59,8 +59,8 @@ const StyledListbox = styled('ul')(({ theme }) => ({
  },
 }));

-const StyledPopper = styled(PopperUnstyled)`
-  z-index: 10;
+const StyledPopper = styled(BasePopper)`
+  z-index: 9999;
 `;

 function Select<TValue>(
@@ -80,7 +80,7 @@ function Select<TValue>(
  }: SelectProps<TValue>,
  ref: ForwardedRef<HTMLButtonElement>,
 ) {
-  const slots: SelectUnstyledProps<TValue>['slots'] = {
+  const slots: BaseSelectProps<TValue, false>['slots'] = {
    root: ToggleButton,
    popper: StyledPopper,
    listbox: StyledListbox,
@@ -107,7 +107,7 @@ function Select<TValue>(
        htmlFor: props.id,
      }}
    >
-      <SelectUnstyled
+      <BaseSelect
        aria-label={typeof label === 'string' ? label : undefined}
        {...props}
        className={clsx(error && 'error')}
@@ -117,7 +117,6 @@ function Select<TValue>(
          ...slotProps,
          root: {
            ...slotProps?.root,
-            placeholder,
          },
          listbox: {
            ...slotProps?.listbox,
@@ -132,7 +131,7 @@ function Select<TValue>(
        placeholder={placeholder}
      >
        {children}
-      </SelectUnstyled>
+      </BaseSelect>
    </FormControl>
  );
 }
--- a/dashboard/src/components/ui/v2/Select/ToggleButton.tsx
+++ b/dashboard/src/components/ui/v2/Select/ToggleButton.tsx
@@ -1,8 +1,10 @@
 import { ChevronDownIcon } from '@/components/ui/v2/icons/ChevronDownIcon';
 import { ChevronUpIcon } from '@/components/ui/v2/icons/ChevronUpIcon';
-import type { ButtonUnstyledProps } from '@mui/base/ButtonUnstyled';
-import ButtonUnstyled from '@mui/base/ButtonUnstyled';
-import { selectUnstyledClasses } from '@mui/base/SelectUnstyled';
+import {
+  Button as ButtonUnstyled,
+  type ButtonProps as ButtonUnstyledProps,
+} from '@mui/base';
+import { selectClasses as selectUnstyledClasses } from '@mui/base/Select';
 import type { SxProps } from '@mui/material';
 import { styled } from '@mui/material';
 import type { Theme } from '@mui/system';
@@ -24,6 +26,7 @@ export interface ToggleButtonProps
      Omit<DetailedHTMLProps<HTMLProps<HTMLSpanElement>, HTMLSpanElement>, 'as'>
    >;
  };
+  placeholder?: string;
 }

 const StyledButton = styled(ButtonUnstyled)(({ theme }) => ({
--- a/dashboard/src/components/ui/v2/Switch/Switch.tsx
+++ b/dashboard/src/components/ui/v2/Switch/Switch.tsx
@@ -1,14 +1,15 @@
 import type { FormControlLabelProps } from '@/components/ui/v2/FormControlLabel';
 import { FormControlLabel } from '@/components/ui/v2/FormControlLabel';
-import SwitchUnstyled, {
-  switchUnstyledClasses,
-} from '@mui/base/SwitchUnstyled';
-import type { SwitchUnstyledProps } from '@mui/base/SwitchUnstyled/SwitchUnstyled.types';
+import {
+  Switch as BaseSwitch,
+  switchClasses as baseSwitchClasses,
+} from '@mui/base';
+import type { SwitchProps as BaseSwitchProps } from '@mui/base/Switch';
 import { styled } from '@mui/material';
 import type { ForwardedRef, PropsWithoutRef } from 'react';
 import { forwardRef } from 'react';

-export interface SwitchProps extends SwitchUnstyledProps {
+export interface SwitchProps extends BaseSwitchProps {
  /**
   * Label to be displayed next to the checkbox.
   */
@@ -16,11 +17,11 @@ export interface SwitchProps extends SwitchUnstyledProps {
  /**
   * Props to be passed to the internal components.
   */
-  slotProps?: SwitchUnstyledProps['slotProps'] & {
+  slotProps?: BaseSwitchProps['slotProps'] & {
    /**
     * Props to be passed to the `Switch` component.
     */
-    root?: Partial<SwitchUnstyledProps>;
+    root?: Partial<BaseSwitchProps>;
    /**
     * Props to be passed to the `FormControlLabel` component.
     */
@@ -35,23 +36,23 @@ const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
  justifyContent: 'start',
 }));

-const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
+const StyledSwitch = styled(BaseSwitch)(({ theme }) => ({
  position: 'relative',
  display: 'inline-block',
  width: '40px',
  height: '24px',
  cursor: 'pointer',

-  [`&.${switchUnstyledClasses.disabled}`]: {
+  [`&.${baseSwitchClasses.disabled}`]: {
    cursor: 'not-allowed',

-    [`& .${switchUnstyledClasses.track}`]: {
+    [`& .${baseSwitchClasses.track}`]: {
      backgroundColor: theme.palette.grey[200],
      color: theme.palette.grey[200],
    },
  },

-  [`& .${switchUnstyledClasses.track}`]: {
+  [`& .${baseSwitchClasses.track}`]: {
    backgroundColor:
      theme.palette.mode === 'dark'
        ? theme.palette.grey[500]
@@ -63,7 +64,7 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
    position: 'absolute',
  },

-  [` & .${switchUnstyledClasses.thumb}`]: {
+  [` & .${baseSwitchClasses.thumb}`]: {
    display: 'block',
    width: '18px',
    height: '18px',
@@ -77,24 +78,24 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
    transitionDuration: '120ms',
  },

-  [`&.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb}`]: {
+  [`&.${baseSwitchClasses.focusVisible} .${baseSwitchClasses.thumb}`]: {
    backgroundColor: theme.palette.action.focus,
    boxShadow: '0 0 1px 8px rgba(0, 0, 0, 0.25)',
  },

-  [`&.${switchUnstyledClasses.checked}`]: {
-    [`.${switchUnstyledClasses.thumb}`]: {
+  [`&.${baseSwitchClasses.checked}`]: {
+    [`.${baseSwitchClasses.thumb}`]: {
      left: '19px',
      top: '3px',
      backgroundColor: theme.palette.common.white,
    },

-    [`.${switchUnstyledClasses.track}`]: {
+    [`.${baseSwitchClasses.track}`]: {
      backgroundColor: theme.palette.primary.main,
    },

-    [`&.${switchUnstyledClasses.disabled}`]: {
-      [`.${switchUnstyledClasses.track}`]: {
+    [`&.${baseSwitchClasses.disabled}`]: {
+      [`.${baseSwitchClasses.track}`]: {
        opacity: 0.5,
        backgroundColor:
          theme.palette.mode === 'dark'
@@ -104,7 +105,7 @@ const StyledSwitch = styled(SwitchUnstyled)(({ theme }) => ({
    },
  },

-  [`& .${switchUnstyledClasses.input}`]: {
+  [`& .${baseSwitchClasses.input}`]: {
    cursor: 'inherit',
    position: 'absolute',
    width: '100%',
--- a/dashboard/src/features/account/settings/components/DeleteAccount/DeleteAccount.tsx
+++ b/dashboard/src/features/account/settings/components/DeleteAccount/DeleteAccount.tsx
@@ -4,16 +4,14 @@ import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
 import { Checkbox } from '@/components/ui/v2/Checkbox';
 import { Text } from '@/components/ui/v2/Text';
-import { getToastStyleProps } from '@/utils/constants/settings';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import {
  useDeleteUserAccountMutation,
  useGetAllWorkspacesAndProjectsQuery,
 } from '@/utils/__generated__/graphql';
-import { type ApolloError } from '@apollo/client';
 import { useSignOut, useUserData } from '@nhost/nextjs';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
-import toast from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 function ConfirmDeleteAccountModal({
@@ -44,30 +42,19 @@ function ConfirmDeleteAccountModal({
  const onClickConfirm = async () => {
    setLoadingRemove(true);

-    await toast.promise(
-      deleteUserAccount(),
-      {
-        loading: 'Deleting your account...',
-        success: `The account has been deleted successfully.`,
-        error: (arg: ApolloError) => {
-          // we need to get the internal error message from the GraphQL error
-          const { internal } = arg.graphQLErrors[0]?.extensions || {};
-          const { message } = (internal as Record<string, any>)?.error || {};
-
-          // we use the default Apollo error message if we can't find the
-          // internal error message
-          return (
-            message ||
-            arg.message ||
-            'An error occurred while deleting your account. Please try again.'
-          );
-        },
+    await execPromiseWithErrorToast(
+      async () => {
+        await deleteUserAccount();
+        onDelete?.();
+        close();
+      },
+      {
+        loadingMessage: 'Deleting your account...',
+        successMessage: 'The account has been deleted successfully.',
+        errorMessage:
+          'An error occurred while deleting your account. Please try again.',
      },
-      getToastStyleProps(),
    );
-
-    onDelete?.();
-    close();
  };

  return (
--- a/dashboard/src/features/account/settings/components/PATSettings/PATSettings.tsx
+++ b/dashboard/src/features/account/settings/components/PATSettings/PATSettings.tsx
@@ -15,15 +15,13 @@ import { ListItem } from '@/components/ui/v2/ListItem';
 import { Text } from '@/components/ui/v2/Text';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
 import { CreatePATForm } from '@/features/account/settings/components/CreatePATForm';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import {
  GetPersonalAccessTokensDocument,
  useDeletePersonalAccessTokenMutation,
  useGetPersonalAccessTokensQuery,
 } from '@/utils/__generated__/graphql';
 import { Fragment } from 'react';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function PATSettings() {
@@ -59,28 +57,20 @@ export default function PATSettings() {

  async function handleDeletePAT({
    id,
-  }: typeof availablePersonalAccessTokens[0]) {
-    const deletePATPromise = deletePAT({ variables: { patId: id } });
-
-    try {
-      await toast.promise(
-        deletePATPromise,
-        {
-          loading: 'Deleting personal access token...',
-          success: 'Personal access token has been deleted successfully.',
-          error: getServerError(
-            'An error occurred while deleting the personal access token.',
-          ),
-        },
-        getToastStyleProps(),
-      );
-    } catch {
-      // Note: The toast will handle the error.
-    }
+  }: (typeof availablePersonalAccessTokens)[0]) {
+    await execPromiseWithErrorToast(
+      () => deletePAT({ variables: { patId: id } }),
+      {
+        loadingMessage: 'Deleting personal access token...',
+        successMessage: 'Personal access token has been deleted successfully.',
+        errorMessage:
+          'An error occurred while deleting the personal access token.',
+      },
+    );
  }

  function handleConfirmDelete(
-    originalPAT: typeof availablePersonalAccessTokens[0],
+    originalPAT: (typeof availablePersonalAccessTokens)[0],
  ) {
    openAlertDialog({
      title: 'Delete Personal Access Token',
--- a/dashboard/src/features/account/settings/components/PasswordSettings/PasswordSettings.tsx
+++ b/dashboard/src/features/account/settings/components/PasswordSettings/PasswordSettings.tsx
@@ -1,12 +1,10 @@
 import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { Input } from '@/components/ui/v2/Input';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useChangePassword } from '@nhost/nextjs';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -38,25 +36,19 @@ export default function PasswordSettings() {
  const isDirty = Object.keys(formState.dirtyFields).length > 0;

  async function handleSubmit(formValues: PasswordSettingsFormValues) {
-    try {
-      const changePasswordPromise = changePassword(formValues.newPassword);
-
-      await toast.promise(
-        changePasswordPromise,
-        {
-          loading: 'Changing password...',
-          success: 'The password has been changed successfully.',
-          error: getServerError(
-            'An error occurred while trying to update the password. Please try again.',
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset();
-    } catch {
-      // Note: The error is handled by the toast.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        // TODO fix changePassword should throw an error if something happens
+        await changePassword(formValues.newPassword);
+        form.reset();
+      },
+      {
+        loadingMessage: 'Changing password...',
+        successMessage: 'The password has been changed successfully.',
+        errorMessage:
+          'An error occurred while trying to update the password. Please try again.',
+      },
+    );
  }

  return (
--- a/dashboard/src/features/ai/AssistantForm/AssistantForm.tsx
+++ b/dashboard/src/features/ai/AssistantForm/AssistantForm.tsx
@@ -10,26 +10,17 @@ import { Text } from '@/components/ui/v2/Text';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
 import { GraphqlDataSourcesFormSection } from '@/features/ai/AssistantForm/components/GraphqlDataSourcesFormSection';
 import { WebhooksDataSourcesFormSection } from '@/features/ai/AssistantForm/components/WebhooksDataSourcesFormSection';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
 import type { DialogFormProps } from '@/types/common';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getHasuraAdminSecret } from '@/utils/env';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { removeTypename, type DeepRequired } from '@/utils/helpers';
 import {
  useInsertAssistantMutation,
  useUpdateAssistantMutation,
 } from '@/utils/__generated__/graphite.graphql';
-import {
-  ApolloClient,
-  HttpLink,
-  InMemoryCache,
-  type ApolloError,
-} from '@apollo/client';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 export const validationSchema = Yup.object({
@@ -101,32 +92,15 @@ export default function AssistantForm({
 }: AssistantFormProps) {
  const { onDirtyStateChange } = useDialog();

-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  const serviceUrl = generateAppServiceUrl(
-    currentProject?.subdomain,
-    currentProject?.region,
-    'graphql',
-  );
-
-  const client = new ApolloClient({
-    cache: new InMemoryCache(),
-    link: new HttpLink({
-      uri: serviceUrl,
-      headers: {
-        'x-hasura-admin-secret':
-          process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? getHasuraAdminSecret()
-            : currentProject?.config?.hasura.adminSecret,
-      },
-    }),
-  });
+  const { adminClient } = useAdminApolloClient();

  const [insertAssistantMutation] = useInsertAssistantMutation({
-    client,
+    client: adminClient,
  });

-  const [updateAssistantMutation] = useUpdateAssistantMutation({ client });
+  const [updateAssistantMutation] = useUpdateAssistantMutation({
+    client: adminClient,
+  });

  const form = useForm<AssistantFormValues>({
    defaultValues: initialData,
@@ -186,33 +160,18 @@ export default function AssistantForm({
  const handleSubmit = async (
    values: DeepRequired<AssistantFormValues> & { assistantID: string },
  ) => {
-    try {
-      await toast.promise(
-        createOrUpdateAutoEmbeddings(values),
-        {
-          loading: 'Configuring the Assistant...',
-          success: `The Assistant has been configured successfully.`,
-          error: (arg: ApolloError) => {
-            // we need to get the internal error message from the GraphQL error
-            const { internal } = arg.graphQLErrors[0]?.extensions || {};
-            const { message } = (internal as Record<string, any>)?.error || {};
-
-            // we use the default Apollo error message if we can't find the
-            // internal error message
-            return (
-              message ||
-              arg.message ||
-              'An error occurred while configuring the Assistant. Please try again.'
-            );
-          },
-        },
-        getToastStyleProps(),
-      );
-
-      onSubmit?.();
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await createOrUpdateAutoEmbeddings(values);
+        onSubmit?.();
+      },
+      {
+        loadingMessage: 'Configuring the Assistant...',
+        successMessage: 'The Assistant has been configured successfully.',
+        errorMessage:
+          'An error occurred while configuring the Assistant. Please try again.',
+      },
+    );
  };

  return (
--- a/dashboard/src/features/ai/AutoEmbeddingsForm/AutoEmbeddingsForm.tsx
+++ b/dashboard/src/features/ai/AutoEmbeddingsForm/AutoEmbeddingsForm.tsx
@@ -8,25 +8,16 @@ import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
 import { Input } from '@/components/ui/v2/Input';
 import { Text } from '@/components/ui/v2/Text';
 import { Tooltip } from '@/components/ui/v2/Tooltip';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
+import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
 import type { DialogFormProps } from '@/types/common';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getHasuraAdminSecret } from '@/utils/env';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import {
  useInsertGraphiteAutoEmbeddingsConfigurationMutation,
  useUpdateGraphiteAutoEmbeddingsConfigurationMutation,
 } from '@/utils/__generated__/graphite.graphql';
-import {
-  ApolloClient,
-  HttpLink,
-  InMemoryCache,
-  type ApolloError,
-} from '@apollo/client';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 export const validationSchema = Yup.object({
@@ -70,34 +61,17 @@ export default function AutoEmbeddingsForm({
 }: AutoEmbeddingsFormProps) {
  const { onDirtyStateChange } = useDialog();

-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  const serviceUrl = generateAppServiceUrl(
-    currentProject?.subdomain,
-    currentProject?.region,
-    'graphql',
-  );
-
-  const client = new ApolloClient({
-    cache: new InMemoryCache(),
-    link: new HttpLink({
-      uri: serviceUrl,
-      headers: {
-        'x-hasura-admin-secret':
-          process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? getHasuraAdminSecret()
-            : currentProject?.config?.hasura.adminSecret,
-      },
-    }),
-  });
+  const { adminClient } = useAdminApolloClient();

  const [insertGraphiteAutoEmbeddingsConfiguration] =
    useInsertGraphiteAutoEmbeddingsConfigurationMutation({
-      client,
+      client: adminClient,
    });

  const [updateGraphiteAutoEmbeddingsConfiguration] =
-    useUpdateGraphiteAutoEmbeddingsConfigurationMutation({ client });
+    useUpdateGraphiteAutoEmbeddingsConfigurationMutation({
+      client: adminClient,
+    });

  const form = useForm<AutoEmbeddingsFormValues>({
    defaultValues: initialData,
@@ -137,33 +111,18 @@ export default function AutoEmbeddingsForm({
  };

  const handleSubmit = async (values: AutoEmbeddingsFormValues) => {
-    try {
-      await toast.promise(
-        createOrUpdateAutoEmbeddings(values),
-        {
-          loading: 'Configuring the Auto-Embeddings...',
-          success: `The Auto-Embeddings has been configured successfully.`,
-          error: (arg: ApolloError) => {
-            // we need to get the internal error message from the GraphQL error
-            const { internal } = arg.graphQLErrors[0]?.extensions || {};
-            const { message } = (internal as Record<string, any>)?.error || {};
-
-            // we use the default Apollo error message if we can't find the
-            // internal error message
-            return (
-              message ||
-              arg.message ||
-              'An error occurred while configuring the Auto-Embeddings. Please try again.'
-            );
-          },
-        },
-        getToastStyleProps(),
-      );
-
-      onSubmit?.();
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await createOrUpdateAutoEmbeddings(values);
+        onSubmit?.();
+      },
+      {
+        loadingMessage: 'Configuring the Auto-Embeddings...',
+        successMessage: 'The Auto-Embeddings has been configured successfully.',
+        errorMessage:
+          'An error occurred while configuring the Auto-Embeddings. Please try again.',
+      },
+    );
  };

  return (
--- a/dashboard/src/features/ai/DeleteAssistantModal/DeleteAssistantModal.tsx
+++ b/dashboard/src/features/ai/DeleteAssistantModal/DeleteAssistantModal.tsx
@@ -2,20 +2,11 @@ import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
 import { Checkbox } from '@/components/ui/v2/Checkbox';
 import { Text } from '@/components/ui/v2/Text';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getHasuraAdminSecret } from '@/utils/env';
+import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { useDeleteAssistantMutation } from '@/utils/__generated__/graphite.graphql';
-import {
-  ApolloClient,
-  HttpLink,
-  InMemoryCache,
-  type ApolloError,
-} from '@apollo/client';
 import { type Assistant } from 'pages/[workspaceSlug]/[appSlug]/ai/assistants';
 import { useState } from 'react';
-import toast from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export interface DeleteAssistantModalProps {
@@ -32,29 +23,10 @@ export default function DeleteAssistantModal({
  const [remove, setRemove] = useState(false);
  const [loadingRemove, setLoadingRemove] = useState(false);

-  const { currentProject } = useCurrentWorkspaceAndProject();
-
-  const serviceUrl = generateAppServiceUrl(
-    currentProject?.subdomain,
-    currentProject?.region,
-    'graphql',
-  );
-
-  const client = new ApolloClient({
-    cache: new InMemoryCache(),
-    link: new HttpLink({
-      uri: serviceUrl,
-      headers: {
-        'x-hasura-admin-secret':
-          process.env.NEXT_PUBLIC_ENV === 'dev'
-            ? getHasuraAdminSecret()
-            : currentProject?.config?.hasura.adminSecret,
-      },
-    }),
-  });
+  const { adminClient } = useAdminApolloClient();

  const [deleteAssistantMutation] = useDeleteAssistantMutation({
-    client,
+    client: adminClient,
  });

  const deleteAssistant = async () => {
@@ -70,27 +42,12 @@ export default function DeleteAssistantModal({
  async function handleClick() {
    setLoadingRemove(true);

-    await toast.promise(
-      deleteAssistant(),
-      {
-        loading: 'Deleting the assistant...',
-        success: `The Assistant has been deleted successfully.`,
-        error: (arg: ApolloError) => {
-          // we need to get the internal error message from the GraphQL error
-          const { internal } = arg.graphQLErrors[0]?.extensions || {};
-          const { message } = (internal as Record<string, any>)?.error || {};
-
-          // we use the default Apollo error message if we can't find the
-          // internal error message
-          return (
-            message ||
-            arg.message ||
-            'An error occurred while deleting the Assistant. Please try again.'
-          );
-        },
-      },
-      getToastStyleProps(),
-    );
+    await execPromiseWithErrorToast(deleteAssistant, {
+      loadingMessage: 'Deleting the assistant...',
+      successMessage: 'The Assistant has been deleted successfully.',
+      errorMessage:
+        'An error occurred while deleting the Assistant. Please try again.',
+    });
  }

  return (
--- a/dashboard/src/features/ai/DeleteAutoEmbeddingsModal/DeleteAutoEmbeddingsModal.tsx
+++ b/dashboard/src/features/ai/DeleteAutoEmbeddingsModal/DeleteAutoEmbeddingsModal.tsx
@@ -4,18 +4,12 @@ import { Checkbox } from '@/components/ui/v2/Checkbox';
 import { Text } from '@/components/ui/v2/Text';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { getHasuraAdminSecret } from '@/utils/env';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { useDeleteGraphiteAutoEmbeddingsConfigurationMutation } from '@/utils/__generated__/graphite.graphql';
-import {
-  ApolloClient,
-  HttpLink,
-  InMemoryCache,
-  type ApolloError,
-} from '@apollo/client';
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
 import { type AutoEmbeddingsConfiguration } from 'pages/[workspaceSlug]/[appSlug]/ai/auto-embeddings';
 import { useState } from 'react';
-import toast from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export interface DeleteAutoEmbeddingsModalProps {
@@ -71,27 +65,13 @@ export default function DeleteAutoEmbeddingsModal({
  async function handleClick() {
    setLoadingRemove(true);

-    await toast.promise(
-      deleteAutoEmbeddingsConfig(),
-      {
-        loading: 'Deleting Auto-Embeddings Configuration...',
-        success: `The Auto-Embeddings Configuration has been deleted successfully.`,
-        error: (arg: ApolloError) => {
-          // we need to get the internal error message from the GraphQL error
-          const { internal } = arg.graphQLErrors[0]?.extensions || {};
-          const { message } = (internal as Record<string, any>)?.error || {};
-
-          // we use the default Apollo error message if we can't find the
-          // internal error message
-          return (
-            message ||
-            arg.message ||
-            'An error occurred while deleting the Auto-Embeddings Configuration. Please try again.'
-          );
-        },
-      },
-      getToastStyleProps(),
-    );
+    await execPromiseWithErrorToast(deleteAutoEmbeddingsConfig, {
+      loadingMessage: 'Deleting Auto-Embeddings Configuration...',
+      successMessage:
+        'The Auto-Embeddings Configuration has been deleted successfully.',
+      errorMessage:
+        'An error occurred while deleting the Auto-Embeddings Configuration. Please try again.',
+    });
  }

  return (
--- a/dashboard/src/features/ai/DevAssistant/DevAssistant.tsx
+++ b/dashboard/src/features/ai/DevAssistant/DevAssistant.tsx
@@ -2,6 +2,7 @@ import { UpgradeToProBanner } from '@/components/common/UpgradeToProBanner';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
+import { ErrorToast } from '@/components/ui/v2/ErrorToast';
 import { IconButton } from '@/components/ui/v2/IconButton';
 import { ArrowUpIcon } from '@/components/ui/v2/icons/ArrowUpIcon';
 import { Input } from '@/components/ui/v2/Input';
@@ -15,7 +16,8 @@ import {
 } from '@/features/ai/DevAssistant/state';
 import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { getToastStyleProps } from '@/utils/constants/settings';
+import { useIsGraphiteEnabled } from '@/features/projects/common/hooks/useIsGraphiteEnabled';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import {
  useSendDevMessageMutation,
  useStartDevSessionMutation,
@@ -33,6 +35,7 @@ export type Message = Omit<
 >;

 export default function DevAssistant() {
+  const isPlatform = useIsPlatform();
  const { currentProject, currentWorkspace } = useCurrentWorkspaceAndProject();

  const [loading, setLoading] = useState(false);
@@ -45,6 +48,8 @@ export default function DevAssistant() {
  const [startDevSession] = useStartDevSessionMutation({ client: adminClient });
  const [sendDevMessage] = useSendDevMessageMutation({ client: adminClient });

+  const { isGraphiteEnabled } = useIsGraphiteEnabled();
+
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

@@ -117,11 +122,17 @@ export default function DevAssistant() {

      setMessages(thread);
    } catch (error) {
-      toast.error(
-        'Failed to send the message to graphite. Please try again later.',
+      toast.custom(
+        (t) => (
+          <ErrorToast
+            isVisible={t.visible}
+            errorMessage="Failed to send the message. Please try again later."
+            error={error}
+            close={() => toast.dismiss()}
+          />
+        ),
        {
-          style: getToastStyleProps().style,
-          ...getToastStyleProps().error,
+          duration: Number.POSITIVE_INFINITY,
        },
      );
    } finally {
@@ -141,7 +152,7 @@ export default function DevAssistant() {
    }
  };

-  if (currentProject.plan.isFree) {
+  if (isPlatform && currentProject?.plan?.isFree) {
    return (
      <Box className="p-4">
        <UpgradeToProBanner
@@ -157,7 +168,12 @@ export default function DevAssistant() {
    );
  }

-  if (!currentProject.plan.isFree && !currentProject.config?.ai) {
+  if (
+    (isPlatform &&
+      !currentProject?.plan?.isFree &&
+      !currentProject.config?.ai) ||
+    !isGraphiteEnabled
+  ) {
    return (
      <Box className="p-4">
        <Alert className="grid w-full grid-flow-col place-content-between items-center gap-2">
--- a/dashboard/src/features/ai/DevAssistant/components/MessageBox/MessageBox.tsx
+++ b/dashboard/src/features/ai/DevAssistant/components/MessageBox/MessageBox.tsx
@@ -24,7 +24,7 @@ function PreComponent(
  const { children } = props;

  return (
-    <div className="group relative">
+    <div className="relative group">
      <pre>{children}</pre>
      <IconButton
        sx={{
@@ -34,13 +34,13 @@ function PreComponent(
        }}
        color="warning"
        variant="contained"
-        className="absolute top-2 right-2 hidden group-hover:flex"
+        className="absolute hidden top-2 right-2 group-hover:flex"
        onClick={(e) => {
          e.stopPropagation();
          copy(onlyText(children), 'Snippet');
        }}
      >
-        <CopyIcon className="h-5 w-5" />
+        <CopyIcon className="w-5 h-5" />
      </IconButton>
    </div>
  );
@@ -53,7 +53,7 @@ export default function MessageBox({ message }: { message: Message }) {

  return (
    <Box
-      className="flex flex-col space-y-4 border-t p-4 first:border-t-0"
+      className="flex flex-col p-4 space-y-4 border-t first:border-t-0"
      sx={{
        backgroundColor: isUserMessage && 'background.default',
      }}
@@ -67,7 +67,7 @@ export default function MessageBox({ message }: { message: Message }) {
        ) : (
          <>
            <Avatar
-              className="h-7 w-7 rounded-full"
+              className="rounded-full h-7 w-7"
              alt={user?.displayName}
              src={user?.avatarUrl}
            >
--- a/dashboard/src/features/ai/DevAssistant/state/projectMessages.ts
+++ b/dashboard/src/features/ai/DevAssistant/state/projectMessages.ts
@@ -1,7 +1,6 @@
-import {
-  messagesState,
+import messagesState, {
  type ProjectMessage,
-} from '@/features/ai/DevAssistant/state';
+} from '@/features/ai/DevAssistant/state/messages';
 import { selectorFamily } from 'recoil';

 const projectMessagesState = selectorFamily<ProjectMessage[], string>({
--- a/dashboard/src/features/ai/settings/components/AISettings.tsx
+++ b/dashboard/src/features/ai/settings/components/AISettings.tsx
@@ -5,7 +5,6 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Alert } from '@/components/ui/v2/Alert';
-import { filterOptions } from '@/components/ui/v2/Autocomplete';
 import { Box } from '@/components/ui/v2/Box';
 import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
 import { Input } from '@/components/ui/v2/Input';
@@ -22,12 +21,10 @@ import {
  useUpdateConfigMutation,
 } from '@/generated/graphql';
 import { RESOURCE_VCPU_MULTIPLIER } from '@/utils/constants/common';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';
 import { DisableAIServiceConfirmationDialog } from './DisableAIServiceConfirmationDialog';

@@ -95,8 +92,8 @@ export default function AISettings() {
    reValidateMode: 'onSubmit',
    defaultValues: {
      version: {
-        label: '0.1.0',
-        value: '0.1.0',
+        label: ai?.version ?? availableVersions?.at(0)?.label,
+        value: ai?.version ?? availableVersions?.at(0)?.value,
      },
      webhookSecret: '',
      organization: '',
@@ -110,12 +107,17 @@ export default function AISettings() {
    resolver: yupResolver(validationSchema),
  });

-  const { register, formState, reset, watch } = form;
+  const { register, formState, reset, watch, setValue } = form;
+
+  const aiSettingsFormValues = watch();

  useEffect(() => {
    if (ai) {
      reset({
-        version: { label: ai?.version, value: ai?.version },
+        version: {
+          label: ai?.version,
+          value: ai?.version,
+        },
        webhookSecret: ai?.webhookSecret,
        synchPeriodMinutes: ai?.autoEmbeddings?.synchPeriodMinutes,
        apiKey: ai?.openai?.apiKey,
@@ -130,10 +132,27 @@ export default function AISettings() {
    setAIServiceEnabled(!!ai);
  }, [ai, reset]);

+  useEffect(() => {
+    if (
+      !loadingGraphiteVersionsData &&
+      availableVersions.length > 0 &&
+      !ai &&
+      !aiSettingsFormValues.version.value
+    ) {
+      setValue('version', availableVersions?.at(0));
+    }
+  }, [
+    ai,
+    setValue,
+    availableVersions,
+    aiSettingsFormValues,
+    loadingGraphiteVersionsData,
+  ]);
+
  const toggleAIService = async (enabled: boolean) => {
    setAIServiceEnabled(enabled);

-    if (!enabled) {
+    if (!enabled && ai) {
      openDialog({
        title: 'Confirm Disabling the AI service',
        component: (
@@ -161,9 +180,9 @@ export default function AISettings() {
  }

  async function handleSubmit(formValues: AISettingsFormValues) {
-    try {
-      await toast.promise(
-        updateConfig({
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfig({
          variables: {
            appId: currentProject.id,
            config: {
@@ -186,25 +205,19 @@ export default function AISettings() {
              },
            },
          },
-        }),
-        {
-          loading: `AI settings are being updated...`,
-          success: `AI settings has been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the AI settings!`,
-          ),
-        },
-        getToastStyleProps(),
-      );
+        });

-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'AI settings are being updated...',
+        successMessage: 'AI settings has been updated successfully.',
+        errorMessage:
+          'An error occurred while trying to update the AI settings!',
+      },
+    );
  }

-  const aiSettingsFormValues = watch();
-
  const getAIResourcesCost = () => {
    const vCPUs = `${
      aiSettingsFormValues.compute.cpu / RESOURCE_VCPU_MULTIPLIER
@@ -240,37 +253,54 @@ export default function AISettings() {
              className="flex flex-col"
            >
              <Box className="space-y-4">
-                <Box className="space-y-2">
-                  <Box className="flex flex-row items-center space-x-2">
-                    <Text className="text-lg font-semibold">Version</Text>
-                    <Tooltip title="Version of the service to use.">
-                      <InfoIcon
-                        aria-label="Info"
-                        className="h-4 w-4"
-                        color="primary"
-                      />
-                    </Tooltip>
-                  </Box>
-                  <ControlledAutocomplete
-                    id="version"
-                    name="version"
-                    filterOptions={(options, state) => {
-                      if (state.inputValue === ai?.version) {
-                        return options;
+                {availableVersions.length > 0 && (
+                  <Box className="space-y-2">
+                    <Box className="flex flex-row items-center space-x-2">
+                      <Text className="text-lg font-semibold">Version</Text>
+                      <Tooltip title="Version of the service to use.">
+                        <InfoIcon
+                          aria-label="Info"
+                          className="h-4 w-4"
+                          color="primary"
+                        />
+                      </Tooltip>
+                    </Box>
+                    <ControlledAutocomplete
+                      id="version"
+                      name="version"
+                      autoHighlight
+                      isOptionEqualToValue={() => false}
+                      filterOptions={(options, { inputValue }) => {
+                        const inputValueLower = inputValue.toLowerCase();
+                        const matched = [];
+                        const otherOptions = [];
+
+                        options.forEach((option) => {
+                          const optionLabelLower = option.label.toLowerCase();
+
+                          if (optionLabelLower.startsWith(inputValueLower)) {
+                            matched.push(option);
+                          } else {
+                            otherOptions.push(option);
+                          }
+                        });
+
+                        const result = [...matched, ...otherOptions];
+
+                        return result;
+                      }}
+                      fullWidth
+                      className="col-span-4"
+                      options={availableVersions}
+                      error={!!formState.errors?.version?.message}
+                      helperText={formState.errors?.version?.message}
+                      showCustomOption="auto"
+                      customOptionLabel={(value) =>
+                        `Use custom value: "${value}"`
                      }
-                      return filterOptions(options, state);
-                    }}
-                    fullWidth
-                    className="col-span-4"
-                    options={availableVersions}
-                    error={!!formState.errors?.version?.message}
-                    helperText={formState.errors?.version?.message}
-                    showCustomOption="auto"
-                    customOptionLabel={(value) =>
-                      `Use custom value: "${value}"`
-                    }
-                  />
-                </Box>
+                    />
+                  </Box>
+                )}

                <Box className="space-y-2">
                  <Box className="flex flex-row items-center space-x-2">
--- a/dashboard/src/features/ai/settings/components/DisableAIServiceConfirmationDialog/DisableAIServiceConfirmationDialog.tsx
+++ b/dashboard/src/features/ai/settings/components/DisableAIServiceConfirmationDialog/DisableAIServiceConfirmationDialog.tsx
@@ -3,11 +3,9 @@ import { Box } from '@/components/ui/v2/Box';
 import { Button } from '@/components/ui/v2/Button';
 import { Text } from '@/components/ui/v2/Text';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { getToastStyleProps } from '@/utils/constants/settings';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { useUpdateConfigMutation } from '@/utils/__generated__/graphql';
-import type { ApolloError } from '@apollo/client';
 import { useState } from 'react';
-import toast from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export interface DisableAIServiceConfirmationDialogProps {
@@ -34,37 +32,26 @@ export default function DisableAIServiceConfirmationDialog({
  async function handleClick() {
    setLoading(true);

-    await toast.promise(
-      updateConfig({
-        variables: {
-          appId: currentProject.id,
-          config: {
-            ai: null,
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfig({
+          variables: {
+            appId: currentProject.id,
+            config: {
+              ai: null,
+            },
          },
-        },
-      }),
-      {
-        loading: 'Disabling the AI service...',
-        success: () => {
-          onServiceDisabled();
-          closeDialog();
-          return `The service has been disabled.`;
-        },
-        error: (arg: ApolloError) => {
-          // we need to get the internal error message from the GraphQL error
-          const { internal } = arg.graphQLErrors[0]?.extensions || {};
-          const { message } = (internal as Record<string, any>)?.error || {};
+        });

-          // we use the default Apollo error message if we can't find the
-          // internal error message
-          return (
-            message ||
-            arg.message ||
-            'An error occurred while disabling the AI service. Please try again later.'
-          );
-        },
+        onServiceDisabled();
+        closeDialog();
+      },
+      {
+        loadingMessage: 'Disabling the AI service...',
+        successMessage: 'The service has been disabled.',
+        errorMessage:
+          'An error occurred while disabling the AI service. Please try again later.',
      },
-      getToastStyleProps(),
    );
  }

--- a/dashboard/src/features/authentication/settings/components/AllowedEmailSettings/AllowedEmailSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/AllowedEmailSettings/AllowedEmailSettings.tsx
@@ -9,11 +9,9 @@ import {
  useGetAuthenticationSettingsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';

@@ -103,21 +101,19 @@ export default function AllowedEmailDomainsSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Allowed email settings are being updated...`,
-          success: `Allowed email settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's allowed email settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-    } catch {
-      // Note: The toast will handle the error
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'Allowed email settings are being updated...',
+        successMessage:
+          'Allowed email settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's allowed email settings.",
+      },
+    );

    form.reset(values);
  };
@@ -134,7 +130,7 @@ export default function AllowedEmailDomainsSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication#allowed-emails-and-domains"
+          docsLink="https://docs.nhost.io/guides/auth/overview#allowed-emails-and-domains"
          switchId="enabled"
          showSwitch
          className={twMerge(
--- a/dashboard/src/features/authentication/settings/components/AllowedRedirectURLsSettings/AllowedRedirectURLsSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/AllowedRedirectURLsSettings/AllowedRedirectURLsSettings.tsx
@@ -9,11 +9,9 @@ import {
  useGetAuthenticationSettingsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -80,23 +78,19 @@ export default function AllowedRedirectURLsSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Allowed redirect URL settings are being updated...`,
-          success: `Allowed redirect URL settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's allowed redirect URL settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'Allowed redirect URL settings are being updated...',
+        successMessage:
+          'Allowed redirect URL settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's allowed redirect URL settings.",
+      },
+    );
  };

  return (
@@ -111,7 +105,7 @@ export default function AllowedRedirectURLsSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication#allowed-redirect-urls"
+          docsLink="https://docs.nhost.io/guides/auth/overview#allowed-redirect-urls"
          className="grid grid-flow-row px-4 lg:grid-cols-5"
        >
          <Input
--- a/dashboard/src/features/authentication/settings/components/AnonymousSignInSettings/AnonymousSignInSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/AnonymousSignInSettings/AnonymousSignInSettings.tsx
@@ -8,11 +8,9 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -73,23 +71,19 @@ export default function AnonymousSignInSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Anonymous sign-in settings are being updated...`,
-          success: `Anonymous sign-in settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update Anonymous sign-in settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'Anonymous sign-in settings are being updated...',
+        successMessage:
+          'Anonymous sign-in settings have been updated successfully.',
+        errorMessage:
+          'An error occurred while trying to update Anonymous sign-in settings.',
+      },
+    );
  };

  return (
--- a/dashboard/src/features/authentication/settings/components/AppleProviderSettings/AppleProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/AppleProviderSettings/AppleProviderSettings.tsx
@@ -13,13 +13,11 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useTheme } from '@mui/material';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';

@@ -117,23 +115,18 @@ export default function AppleProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Apple settings are being updated...`,
-          success: `Apple settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Apple settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Apple settings are being updated...',
+        successMessage: 'Apple settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Apple settings.",
+      },
+    );
  }

  return (
@@ -148,7 +141,7 @@ export default function AppleProviderSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication/sign-in-with-apple"
+          docsLink="https://docs.nhost.io/guides/auth/social/sign-in-apple"
          docsTitle="how to sign in users with Apple"
          icon={
            theme.palette.mode === 'dark'
@@ -158,7 +151,7 @@ export default function AppleProviderSettings() {
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/AuthServiceVersionSettings/AuthServiceVersionSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/AuthServiceVersionSettings/AuthServiceVersionSettings.tsx
@@ -3,7 +3,6 @@ import { ControlledAutocomplete } from '@/components/form/ControlledAutocomplete
 import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
-import { filterOptions } from '@/components/ui/v2/Autocomplete';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import {
  GetAuthenticationSettingsDocument,
@@ -12,11 +11,9 @@ import {
  useGetSoftwareVersionsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -96,23 +93,17 @@ export default function AuthServiceVersionSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Auth version is being updated...`,
-          success: `Auth version has been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update Auth version.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Auth version is being updated...',
+        successMessage: 'Auth version has been updated successfully.',
+        errorMessage: 'An error occurred while trying to update Auth version.',
+      },
+    );
  };

  return (
@@ -129,17 +120,31 @@ export default function AuthServiceVersionSettings() {
          }}
          docsLink="https://github.com/nhost/hasura-auth/releases"
          docsTitle="the latest releases"
-          className="grid grid-flow-row gap-y-2 gap-x-4 px-4 lg:grid-cols-5"
+          className="grid grid-flow-row gap-x-4 gap-y-2 px-4 lg:grid-cols-5"
        >
          <ControlledAutocomplete
            id="version"
            name="version"
-            filterOptions={(options, state) => {
-              if (state.inputValue === version) {
-                return options;
-              }
+            autoHighlight
+            isOptionEqualToValue={() => false}
+            filterOptions={(options, { inputValue }) => {
+              const inputValueLower = inputValue.toLowerCase();
+              const matched = [];
+              const otherOptions = [];

-              return filterOptions(options, state);
+              options.forEach((option) => {
+                const optionLabelLower = option.label.toLowerCase();
+
+                if (optionLabelLower.startsWith(inputValueLower)) {
+                  matched.push(option);
+                } else {
+                  otherOptions.push(option);
+                }
+              });
+
+              const result = [...matched, ...otherOptions];
+
+              return result;
            }}
            fullWidth
            className="lg:col-span-2"
--- a/dashboard/src/features/authentication/settings/components/AzureADProviderSettings/AzureADProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/AzureADProviderSettings/AzureADProviderSettings.tsx
@@ -14,12 +14,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';

@@ -106,23 +104,18 @@ export default function AzureADProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Azure AD settings are being updated...`,
-          success: `Azure AD settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Azure AD settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Azure AD settings are being updated...',
+        successMessage: 'Azure AD settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Azure AD settings.",
+      },
+    );
  }

  return (
@@ -141,7 +134,7 @@ export default function AzureADProviderSettings() {
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid grid-flow-row grid-cols-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid grid-flow-row grid-cols-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/BitbucketProviderSettings/BitbucketProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/BitbucketProviderSettings/BitbucketProviderSettings.tsx
@@ -18,12 +18,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function BitbucketProviderSettings() {
@@ -84,23 +82,18 @@ export default function BitbucketProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Bitbucket settings are being updated...`,
-          success: `Bitbucket settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Bitbucket settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Bitbucket settings are being updated...',
+        successMessage: 'Bitbucket settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Bitbucket settings.",
+      },
+    );
  }

  return (
@@ -119,7 +112,7 @@ export default function BitbucketProviderSettings() {
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/BlockedEmailSettings/BlockedEmailSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/BlockedEmailSettings/BlockedEmailSettings.tsx
@@ -9,11 +9,9 @@ import {
  useGetAuthenticationSettingsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';

@@ -110,23 +108,20 @@ export default function BlockedEmailSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Blocked email and domain settings are being updated...`,
-          success: `Blocked email and domain settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's blocked email and domain settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage:
+          'Blocked email and domain settings are being updated...',
+        successMessage:
+          'Blocked email and domain settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's blocked email and domain settings.",
+      },
+    );
  };

  return (
@@ -141,7 +136,7 @@ export default function BlockedEmailSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication#blocked-emails-and-domains"
+          docsLink="https://docs.nhost.io/guides/auth/overview#allowed-emails-and-domains"
          switchId="enabled"
          showSwitch
          className={twMerge(
--- a/dashboard/src/features/authentication/settings/components/ClientURLSettings/ClientURLSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/ClientURLSettings/ClientURLSettings.tsx
@@ -9,11 +9,9 @@ import {
  useGetAuthenticationSettingsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -75,23 +73,18 @@ export default function ClientURLSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Client URL is being updated...`,
-          success: `Client URL has been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Client URL.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'Client URL is being updated...',
+        successMessage: 'Client URL has been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Client URL.",
+      },
+    );
  };

  return (
@@ -106,7 +99,7 @@ export default function ClientURLSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication#client-url"
+          docsLink="https://docs.nhost.io/guides/auth/overview#client-url"
          className="grid grid-flow-row lg:grid-cols-5"
        >
          <Input
--- a/dashboard/src/features/authentication/settings/components/DisableNewUsersSettings/DisableNewUsersSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/DisableNewUsersSettings/DisableNewUsersSettings.tsx
@@ -3,15 +3,13 @@ import { Form } from '@/components/form/Form';
 import { SettingsContainer } from '@/components/layout/SettingsContainer';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import {
  GetAuthenticationSettingsDocument,
  useGetAuthenticationSettingsQuery,
  useUpdateConfigMutation,
 } from '@/utils/__generated__/graphql';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -71,23 +69,18 @@ export default function DisableNewUsersSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Disabling new user sign ups...`,
-          success: `New user sign ups have been disabled successfully.`,
-          error: getServerError(
-            `An error occurred while trying to disable new user sign ups.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'Disabling new user sign ups...',
+        successMessage: 'New user sign ups have been disabled successfully.',
+        errorMessage:
+          'An error occurred while trying to disable new user sign ups.',
+      },
+    );
  };

  return (
@@ -96,7 +89,7 @@ export default function DisableNewUsersSettings() {
        <SettingsContainer
          title="Disable New Users"
          description="If set, newly registered users are disabled and won't be able to sign in."
-          docsLink="https://docs.nhost.io/authentication#disable-new-users"
+          docsLink="https://docs.nhost.io/guides/auth/overview#disable-new-users"
          switchId="disabled"
          showSwitch
          slotProps={{
--- a/dashboard/src/features/authentication/settings/components/DiscordProviderSettings/DiscordProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/DiscordProviderSettings/DiscordProviderSettings.tsx
@@ -18,12 +18,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function DiscordProviderSettings() {
@@ -87,23 +85,18 @@ export default function DiscordProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Discord settings are being updated...`,
-          success: `Discord settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Discrod settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Discord settings are being updated...',
+        successMessage: 'Discord settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Discrod settings.",
+      },
+    );
  }

  return (
@@ -118,13 +111,13 @@ export default function DiscordProviderSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/platform/authentication/sign-in-with-discord"
+          docsLink="https://docs.nhost.io/guides/auth/social/sign-in-discord"
          docsTitle="how to sign in users with Discord"
          icon="/assets/brands/discord.svg"
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/EmailAndPasswordSettings/EmailAndPasswordSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/EmailAndPasswordSettings/EmailAndPasswordSettings.tsx
@@ -11,11 +11,9 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -85,23 +83,19 @@ export default function EmailAndPasswordSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Email and password sign-in settings are being updated...`,
-          success: `Email and password sign-in settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update email sign-in settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: `Email and password sign-in settings are being updated...`,
+        successMessage:
+          'Email and password sign-in settings have been updated successfully.',
+        errorMessage:
+          'An error occurred while trying to update email sign-in settings.',
+      },
+    );
  }

  return (
@@ -110,7 +104,7 @@ export default function EmailAndPasswordSettings() {
        <SettingsContainer
          title="Email and Password"
          description="Allow users to sign in with email and password."
-          docsLink="https://docs.nhost.io/authentication/sign-in-with-email-and-password"
+          docsLink="https://docs.nhost.io/guides/auth/sign-in-email-password"
          docsTitle="how to sign in users with email and password"
          className="grid grid-flow-row"
          showSwitch
--- a/dashboard/src/features/authentication/settings/components/FacebookProviderSettings/FacebookProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/FacebookProviderSettings/FacebookProviderSettings.tsx
@@ -18,12 +18,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function FacebookProviderSettings() {
@@ -87,23 +85,18 @@ export default function FacebookProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Facebook settings are being updated...`,
-          success: `Facebook settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Facebook settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Facebook settings are being updated...',
+        successMessage: 'Facebook settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Facebook settings.",
+      },
+    );
  }

  return (
@@ -118,13 +111,13 @@ export default function FacebookProviderSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/platform/authentication/sign-in-with-facebook"
+          docsLink="https://docs.nhost.io/guides/auth/social/sign-in-facebook"
          docsTitle="how to sign in users with Facebook"
          icon="/assets/brands/facebook.svg"
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/GitHubProviderSettings/GitHubProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/GitHubProviderSettings/GitHubProviderSettings.tsx
@@ -18,13 +18,11 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useTheme } from '@mui/material';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function GitHubProviderSettings() {
@@ -89,23 +87,18 @@ export default function GitHubProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `GitHub settings are being updated...`,
-          success: `GitHub settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's GitHub settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'GitHub settings are being updated...',
+        successMessage: 'GitHub settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's GitHub settings.",
+      },
+    );
  }

  return (
@@ -120,7 +113,7 @@ export default function GitHubProviderSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/platform/authentication/sign-in-with-github"
+          docsLink="https://docs.nhost.io/guides/auth/social/sign-in-github"
          docsTitle="how to sign in users with GitHub"
          icon={
            theme.palette.mode === 'dark'
@@ -130,7 +123,7 @@ export default function GitHubProviderSettings() {
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/GitLabProviderSettings/GitLabProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/GitLabProviderSettings/GitLabProviderSettings.tsx
@@ -18,12 +18,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function GitLabProviderSettings() {
@@ -87,23 +85,18 @@ export default function GitLabProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `GitLab settings are being updated...`,
-          success: `GitLab settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's GitLab settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'GitLab settings are being updated...',
+        successMessage: 'GitLab settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's GitLab settings.",
+      },
+    );
  }

  return (
@@ -122,7 +115,7 @@ export default function GitLabProviderSettings() {
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/GoogleProviderSettings/GoogleProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/GoogleProviderSettings/GoogleProviderSettings.tsx
@@ -18,12 +18,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function GoogleProviderSettings() {
@@ -87,23 +85,18 @@ export default function GoogleProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Google settings are being updated...`,
-          success: `Google settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Google settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Google settings are being updated...',
+        successMessage: 'Google settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Google settings.",
+      },
+    );
  }

  return (
@@ -118,13 +111,13 @@ export default function GoogleProviderSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/platform/authentication/sign-in-with-google"
+          docsLink="https://docs.nhost.io/guides/auth/social/sign-in-google"
          docsTitle="how to sign in users with Google"
          icon="/assets/brands/google.svg"
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/GravatarSettings/GravatarSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/GravatarSettings/GravatarSettings.tsx
@@ -13,12 +13,10 @@ import {
 import {
  AUTH_GRAVATAR_DEFAULT,
  AUTH_GRAVATAR_RATING,
-  getToastStyleProps,
 } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';

@@ -89,23 +87,18 @@ export default function GravatarSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Gravatar settings are being updated...`,
-          success: `Gravatar settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Gravatar settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'Gravatar settings are being updated...',
+        successMessage: 'Gravatar settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Gravatar settings.",
+      },
+    );
  };

  return (
@@ -120,7 +113,7 @@ export default function GravatarSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication#gravatar"
+          docsLink="https://docs.nhost.io/guides/auth/overview#gravatar"
          switchId="enabled"
          showSwitch
          className={twMerge(
--- a/dashboard/src/features/authentication/settings/components/LinkedInProviderSettings/LinkedInProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/LinkedInProviderSettings/LinkedInProviderSettings.tsx
@@ -18,12 +18,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function LinkedInProviderSettings() {
@@ -87,23 +85,18 @@ export default function LinkedInProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `LinkedIn settings are being updated...`,
-          success: `LinkedIn settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's LinkedIn settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'LinkedIn settings are being updated...',
+        successMessage: 'LinkedIn settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's LinkedIn settings.",
+      },
+    );
  }

  return (
@@ -118,13 +111,13 @@ export default function LinkedInProviderSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/platform/authentication/sign-in-with-linkedin"
+          docsLink="https://docs.nhost.io/guides/auth/social/sign-in-linkedin"
          docsTitle="how to sign in users with LinkedIn"
          icon="/assets/brands/linkedin.svg"
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/MFASettings/MFASettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/MFASettings/MFASettings.tsx
@@ -9,11 +9,9 @@ import {
  useGetAuthenticationSettingsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';

@@ -76,23 +74,20 @@ export default function MFASettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Multi-factor authentication settings are being updated...`,
-          success: `Multi-factor authentication settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's multi-factor authentication settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage:
+          'Multi-factor authentication settings are being updated...',
+        successMessage:
+          'Multi-factor authentication settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's multi-factor authentication settings.",
+      },
+    );
  };

  return (
@@ -107,7 +102,7 @@ export default function MFASettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication#multi-factor-authentication"
+          docsLink="https://docs.nhost.io/guides/auth/overview#multi-factor-authentication"
          switchId="enabled"
          showSwitch
          className={twMerge(
--- a/dashboard/src/features/authentication/settings/components/MagicLinkSettings/MagicLinkSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/MagicLinkSettings/MagicLinkSettings.tsx
@@ -8,11 +8,9 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -73,23 +71,18 @@ export default function MagicLinkSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Magic Link settings are being updated...`,
-          success: `Magic Link settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Magic Link settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'Magic Link settings are being updated...',
+        successMessage: 'Magic Link settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Magic Link settings.",
+      },
+    );
  };

  return (
@@ -104,7 +97,7 @@ export default function MagicLinkSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication/sign-in-with-magic-link"
+          docsLink="https://docs.nhost.io/guides/auth/sign-in-magic-link"
          docsTitle="how to sign in users with Magic Link"
          switchId="enabled"
          showSwitch
--- a/dashboard/src/features/authentication/settings/components/SMSSettings/SMSSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/SMSSettings/SMSSettings.tsx
@@ -12,12 +12,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Image from 'next/image';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';

@@ -112,23 +110,17 @@ export default function SMSSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `SMS settings are being updated...`,
-          success: `SMS settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update SMS settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'SMS settings are being updated...',
+        successMessage: 'SMS settings have been updated successfully.',
+        errorMessage: 'An error occurred while trying to update SMS settings.',
+      },
+    );
  };

  return (
@@ -145,10 +137,10 @@ export default function SMSSettings() {
          }}
          switchId="enabled"
          showSwitch
-          docsLink="https://docs.nhost.io/authentication/sign-in-with-phone-number-sms"
+          docsLink="https://docs.nhost.io/guides/auth/sign-in-phone-number"
          docsTitle="how to sign in users with a phone number (SMS)"
          className={twMerge(
-            'grid grid-flow-col grid-cols-2 grid-rows-4 gap-y-4 gap-x-3 px-4 py-2',
+            'grid grid-flow-col grid-cols-2 grid-rows-4 gap-x-3 gap-y-4 px-4 py-2',
            !authSmsPasswordlessEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/SessionSettings/SessionSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/SessionSettings/SessionSettings.tsx
@@ -9,11 +9,9 @@ import {
  useGetAuthenticationSettingsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -84,23 +82,18 @@ export default function SessionSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Session settings are being updated...`,
-          success: `Session settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's session settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Session settings are being updated...',
+        successMessage: 'Session settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's session settings.",
+      },
+    );
  };

  return (
--- a/dashboard/src/features/authentication/settings/components/SpotifyProviderSettings/SpotifyProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/SpotifyProviderSettings/SpotifyProviderSettings.tsx
@@ -18,12 +18,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function SpotifyProviderSettings() {
@@ -87,23 +85,18 @@ export default function SpotifyProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Spotify settings are being updated...`,
-          success: `Spotify settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Spotify settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Spotify settings are being updated...',
+        successMessage: 'Spotify settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Spotify settings.",
+      },
+    );
  }

  return (
@@ -118,13 +111,13 @@ export default function SpotifyProviderSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/platform/authentication/sign-in-with-spotify"
+          docsLink="https://docs.nhost.io/guides/auth/social/sign-in-spotify"
          docsTitle="how to sign in users with Spotify"
          icon="/assets/brands/spotify.svg"
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/StravaProviderSettings/StravaProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/StravaProviderSettings/StravaProviderSettings.tsx
@@ -18,12 +18,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function StravaProviderSettings() {
@@ -87,23 +85,18 @@ export default function StravaProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Strava settings are being updated...`,
-          success: `Strava settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Strava settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'Strava settings are being updated...',
+        successMessage: 'Strava settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Strava settings.",
+      },
+    );
  }

  return (
@@ -122,7 +115,7 @@ export default function StravaProviderSettings() {
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/TwitchProviderSettings/TwitchProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/TwitchProviderSettings/TwitchProviderSettings.tsx
@@ -18,13 +18,11 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useTheme } from '@mui/material';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function TwitchProviderSettings() {
@@ -89,23 +87,18 @@ export default function TwitchProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Twitch settings are being updated...`,
-          success: `Twitch settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Twitch settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Twitch settings are being updated...',
+        successMessage: 'Twitch settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's Twitch settings.",
+      },
+    );
  }

  return (
@@ -120,7 +113,7 @@ export default function TwitchProviderSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/platform/authentication/sign-in-with-twitch"
+          docsLink="https://docs.nhost.io/guides/auth/social/sign-in-twitch"
          docsTitle="how to sign in users with Twitch"
          icon={
            theme.palette.mode === 'dark'
@@ -130,7 +123,7 @@ export default function TwitchProviderSettings() {
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/TwitterProviderSettings/TwitterProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/TwitterProviderSettings/TwitterProviderSettings.tsx
@@ -13,12 +13,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';

@@ -98,23 +96,17 @@ export default function TwitterProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Twitter settings are being updated...`,
-          success: `Twitter settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Twitter settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Twitter settings are being updated...',
+        successMessage: 'Twitter settings have been updated successfully.',
+        errorMessage: `An error occurred while trying to update the project's Twitter settings.`,
+      },
+    );
  }

  return (
@@ -134,7 +126,7 @@ export default function TwitterProviderSettings() {
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/WebAuthnSettings/WebAuthnSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/WebAuthnSettings/WebAuthnSettings.tsx
@@ -8,11 +8,9 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 const validationSchema = Yup.object({
@@ -66,33 +64,29 @@ export default function WebAuthnSettings() {
        config: {
          auth: {
            method: {
-              webauthn: {...values,
-              relyingParty: {
-                name: currentProject.name,
-              }},
+              webauthn: {
+                ...values,
+                relyingParty: {
+                  name: currentProject.name,
+                },
+              },
            },
          },
        },
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `WebAuthn settings are being updated...`,
-          success: `WebAuthn settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's WebAuthn settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(values);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+      },
+      {
+        loadingMessage: 'WebAuthn settings are being updated...',
+        successMessage: 'WebAuthn settings have been updated successfully.',
+        errorMessage: `An error occurred while trying to update the project's WebAuthn settings.`,
+      },
+    );
  };

  return (
@@ -107,7 +101,7 @@ export default function WebAuthnSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication/sign-in-with-security-keys"
+          docsLink="https://docs.nhost.io/guides/auth/sign-in-webauthn"
          docsTitle="how to sign in users with security keys"
          switchId="enabled"
          showSwitch
--- a/dashboard/src/features/authentication/settings/components/WindowsLiveProviderSettings/WindowsLiveProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/WindowsLiveProviderSettings/WindowsLiveProviderSettings.tsx
@@ -18,12 +18,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';

 export default function WindowsLiveProviderSettings() {
@@ -87,23 +85,17 @@ export default function WindowsLiveProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `Windows Live settings are being updated...`,
-          success: `Windows Live settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's Windows Live settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'Windows Live settings are being updated...',
+        successMessage: 'Windows Live settings have been updated successfully.',
+        errorMessage: `An error occurred while trying to update the project's Windows Live settings.`,
+      },
+    );
  }

  return (
@@ -123,7 +115,7 @@ export default function WindowsLiveProviderSettings() {
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid-flow-rows grid grid-cols-2 grid-rows-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/settings/components/WorkOsProviderSettings/WorkOsProviderSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/WorkOsProviderSettings/WorkOsProviderSettings.tsx
@@ -14,12 +14,10 @@ import {
  useGetSignInMethodsQuery,
  useUpdateConfigMutation,
 } from '@/generated/graphql';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
 import * as Yup from 'yup';

@@ -113,23 +111,18 @@ export default function WorkOsProviderSettings() {
      },
    });

-    try {
-      await toast.promise(
-        updateConfigPromise,
-        {
-          loading: `WorkOS settings are being updated...`,
-          success: `WorkOS settings have been updated successfully.`,
-          error: getServerError(
-            `An error occurred while trying to update the project's WorkOS settings.`,
-          ),
-        },
-        getToastStyleProps(),
-      );
-
-      form.reset(formValues);
-    } catch {
-      // Note: The toast will handle the error.
-    }
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(formValues);
+      },
+      {
+        loadingMessage: 'WorkOS settings are being updated...',
+        successMessage: 'WorkOS settings have been updated successfully.',
+        errorMessage:
+          "An error occurred while trying to update the project's WorkOS settings.",
+      },
+    );
  }

  return (
@@ -144,13 +137,13 @@ export default function WorkOsProviderSettings() {
              loading: formState.isSubmitting,
            },
          }}
-          docsLink="https://docs.nhost.io/authentication/sign-in-with-workos"
+          docsLink="https://docs.nhost.io/guides/auth/social/sign-in-workos"
          docsTitle="how to sign in users with WorkOS"
          icon="/assets/brands/workos.svg"
          switchId="enabled"
          showSwitch
          className={twMerge(
-            'grid grid-flow-row grid-cols-2 gap-y-4 gap-x-3 px-4 py-2',
+            'grid grid-flow-row grid-cols-2 gap-x-3 gap-y-4 px-4 py-2',
            !authEnabled && 'hidden',
          )}
        >
--- a/dashboard/src/features/authentication/users/components/CreateUserForm/CreateUserForm.tsx
+++ b/dashboard/src/features/authentication/users/components/CreateUserForm/CreateUserForm.tsx
@@ -6,12 +6,10 @@ import { Input } from '@/components/ui/v2/Input';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
 import type { DialogFormProps } from '@/types/common';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 export interface CreateUserFormProps extends DialogFormProps {
@@ -77,9 +75,9 @@ export default function CreateUserForm({
  async function handleCreateUser({ email, password }: CreateUserFormValues) {
    setCreateUserFormError(null);

-    try {
-      await toast.promise(
-        fetch(signUpUrl, {
+    await execPromiseWithErrorToast(
+      async () => {
+        await fetch(signUpUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email, password }),
@@ -95,21 +93,16 @@ export default function CreateUserForm({
          }

          throw new Error(data?.message || 'Something went wrong.');
-        }),
-        {
-          loading: 'Creating user...',
-          success: 'User has been created successfully.',
-          error: getServerError(
-            'An error occurred while trying to create the user.',
-          ),
-        },
-        getToastStyleProps(),
-      );
+        });

-      onSubmit?.();
-    } catch (error) {
-      // Note: The error is already handled by the toast promise.
-    }
+        onSubmit?.();
+      },
+      {
+        loadingMessage: 'Creating user...',
+        successMessage: 'User has been created successfully.',
+        errorMessage: 'An error occurred while trying to create the user.',
+      },
+    );
  }

  return (
--- a/dashboard/src/features/authentication/users/components/EditUserForm/EditUserForm.tsx
+++ b/dashboard/src/features/authentication/users/components/EditUserForm/EditUserForm.tsx
@@ -19,9 +19,8 @@ import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/
 import { getUserRoles } from '@/features/projects/roles/settings/utils/getUserRoles';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
 import type { DialogFormProps } from '@/types/common';
-import { getToastStyleProps } from '@/utils/constants/settings';
 import { copy } from '@/utils/copy';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import {
  RemoteAppGetUsersDocument,
  useGetProjectLocalesQuery,
@@ -36,7 +35,6 @@ import Image from 'next/image';
 import type { RemoteAppUser } from 'pages/[workspaceSlug]/[appSlug]/users';
 import { useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 export interface EditUserFormProps extends DialogFormProps {
@@ -173,21 +171,15 @@ export default function EditUserForm({
      },
    });

-    await toast.promise(
-      banUser,
-      {
-        loading: shouldBan ? 'Banning user...' : 'Unbanning user...',
-        success: shouldBan
-          ? 'User has been banned successfully.'
-          : 'User has been unbanned successfully.',
-        error: getServerError(
-          shouldBan
-            ? 'An error occurred while trying to ban the user.'
-            : 'An error occurred while trying to unban the user.',
-        ),
-      },
-      getToastStyleProps(),
-    );
+    await execPromiseWithErrorToast(() => banUser, {
+      loadingMessage: shouldBan ? 'Banning user...' : 'Unbanning user...',
+      successMessage: shouldBan
+        ? 'User has been banned successfully.'
+        : 'User has been unbanned successfully.',
+      errorMessage: shouldBan
+        ? 'An error occurred while trying to ban the user.'
+        : 'An error occurred while trying to unban the user.',
+    });
  }

  return (
@@ -424,6 +416,7 @@ export default function EditUserForm({
                      }
                      width={25}
                      height={25}
+                      alt="Oauth provider logo"
                    />
                    <Text className="font-medium capitalize">
                      {getReadableProviderName(provider.providerId)}
--- a/dashboard/src/features/authentication/users/components/EditUserPasswordForm/EditUserPasswordForm.tsx
+++ b/dashboard/src/features/authentication/users/components/EditUserPasswordForm/EditUserPasswordForm.tsx
@@ -6,8 +6,7 @@ import { Input } from '@/components/ui/v2/Input';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
 import type { DialogFormProps } from '@/types/common';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import type { RemoteAppGetUsersQuery } from '@/utils/__generated__/graphql';
 import {
  useGetSignInMethodsQuery,
@@ -17,7 +16,6 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import bcrypt from 'bcryptjs';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
-import { toast } from 'react-hot-toast';
 import * as Yup from 'yup';

 export interface EditUserPasswordFormProps extends DialogFormProps {
@@ -90,23 +88,23 @@ export default function EditUserPasswordForm({
      client: remoteProjectGQLClient,
    });

-    try {
-      await toast.promise(
-        updateUserPasswordPromise,
-        {
-          loading: 'Updating user password...',
-          success: 'User password updated successfully.',
-          error: getServerError('Failed to update user password.'),
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateUserPasswordPromise;
+      },
+      {
+        loadingMessage: 'Updating user password...',
+        successMessage: 'User password updated successfully.',
+        errorMessage: 'Failed to update user password.',
+        onError: (error) => {
+          setEditUserPasswordFormError(
+            new Error(error.message || 'Something went wrong.'),
+          );
        },
-        getToastStyleProps(),
-      );
-    } catch (error) {
-      setEditUserPasswordFormError(
-        new Error(error.message || 'Something went wrong.'),
-      );
-    } finally {
-      closeDialog();
-    }
+      },
+    );
+
+    closeDialog();
  };

  const {
--- a/dashboard/src/features/authentication/users/components/UsersBody/UsersBody.tsx
+++ b/dashboard/src/features/authentication/users/components/UsersBody/UsersBody.tsx
@@ -17,8 +17,7 @@ import { getReadableProviderName } from '@/features/authentication/users/utils/g
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { getUserRoles } from '@/features/projects/roles/settings/utils/getUserRoles';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
-import { getToastStyleProps } from '@/utils/constants/settings';
-import { getServerError } from '@/utils/getServerError';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
 import {
  useDeleteRemoteAppUserRolesMutation,
  useGetRolesPermissionsQuery,
@@ -33,7 +32,6 @@ import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import type { RemoteAppUser } from 'pages/[workspaceSlug]/[appSlug]/users';
 import { Fragment, useMemo } from 'react';
-import toast from 'react-hot-toast';

 const EditUserForm = dynamic(
  () =>
@@ -153,20 +151,18 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
      });
    }

-    await toast.promise(
-      updateUserMutationPromise,
-      {
-        loading: `Updating user's settings...`,
-        success: 'User settings have been updated successfully.',
-        error: getServerError(
-          `An error occurred while trying to update this user's settings.`,
-        ),
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateUserMutationPromise;
+      },
+      {
+        loadingMessage: `Updating user's settings...`,
+        successMessage: 'User settings have been updated successfully.',
+        errorMessage: `An error occurred while trying to update this user's settings.`,
      },
-      getToastStyleProps(),
    );

    await onSubmit?.();
-
    closeDrawer();
  }

@@ -181,20 +177,20 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
      ),
      props: {
        onPrimaryAction: async () => {
-          await toast.promise(
-            deleteUser({
-              variables: {
-                id: user.id,
-              },
-            }),
-            {
-              loading: 'Deleting user...',
-              success: 'User deleted successfully.',
-              error: getServerError(
-                'An error occurred while trying to delete this user.',
-              ),
+          await execPromiseWithErrorToast(
+            async () => {
+              await deleteUser({
+                variables: {
+                  id: user.id,
+                },
+              });
+            },
+            {
+              loadingMessage: 'Deleting user...',
+              successMessage: 'User deleted successfully.',
+              errorMessage:
+                'An error occurred while trying to delete this user.',
            },
-            getToastStyleProps(),
          );

          await onSubmit();
@@ -227,7 +223,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
  if (!users) {
    return (
      <div className="h-screen w-screen overflow-hidden">
-        <div className="absolute top-0 left-0 z-50 block h-full w-full">
+        <div className="absolute left-0 top-0 z-50 block h-full w-full">
          <span className="top50percent relative top-1/2 mx-auto my-0 block">
            <ActivityIndicator
              label="Loading users..."
@@ -362,6 +358,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
                        }
                        width={16}
                        height={16}
+                        alt="Oauth provider logo"
                      />
                    }
                  />
--- a/dashboard/src/features/database/dataGrid/components/BaseColumnForm/BaseColumnForm.tsx
+++ b/dashboard/src/features/database/dataGrid/components/BaseColumnForm/BaseColumnForm.tsx
@@ -102,10 +102,10 @@ export default function BaseColumnForm({
  return (
    <Form
      onSubmit={handleExternalSubmit}
-      className="flex flex-auto flex-col content-between overflow-hidden border-t-1"
+      className="flex flex-col content-between flex-auto overflow-hidden border-t-1"
    >
      <div className="flex-auto overflow-y-auto">
-        <section className="grid grid-cols-8 py-3 px-6">
+        <section className="grid grid-cols-8 px-6 py-3">
          <Input
            {...register('name', {
              onChange: (event) => {
@@ -184,7 +184,7 @@ export default function BaseColumnForm({
                  </Text>
                </span>
              }
-              className="col-span-8 m-0 w-full py-3 sm:col-span-6 sm:col-start-3 sm:ml-1"
+              className="w-full col-span-8 py-3 m-0 sm:col-span-6 sm:col-start-3 sm:ml-1"
              onChange={(_event, checked) => {
                if (checked) {
                  setDefaultValueInputText('');
@@ -197,7 +197,7 @@ export default function BaseColumnForm({

        <Box
          component="section"
-          className="grid grid-cols-8 border-t-1 py-3 px-6"
+          className="grid grid-cols-8 px-6 py-3 border-t-1"
        >
          <ControlledAutocomplete
            id="defaultValue"
@@ -249,7 +249,7 @@ export default function BaseColumnForm({
          />

          <ControlledCheckbox
-            className="col-span-8 m-0 w-full py-3 sm:col-span-6 sm:col-start-3 sm:ml-1"
+            className="w-full col-span-8 py-3 m-0 sm:col-span-6 sm:col-start-3 sm:ml-1"
            name="isNullable"
            label={
              <span className="inline-grid grid-flow-row">
@@ -269,7 +269,7 @@ export default function BaseColumnForm({
          />

          <ControlledCheckbox
-            className="col-span-8 m-0 w-full py-3 sm:col-span-6 sm:col-start-3 sm:ml-1"
+            className="w-full col-span-8 py-3 m-0 sm:col-span-6 sm:col-start-3 sm:ml-1"
            name="isUnique"
            label={
              <span className="inline-grid grid-flow-row">
@@ -306,7 +306,7 @@ export default function BaseColumnForm({
        </Box>
      </div>

-      <Box className="grid flex-shrink-0 grid-flow-col justify-between gap-3 border-t-1 p-2">
+      <Box className="grid justify-between flex-shrink-0 grid-flow-col gap-3 p-2 border-t-1">
        <Button
          variant="borderless"
          color="secondary"
--- a/dashboard/src/features/database/dataGrid/components/BaseForeignKeyForm/BaseForeignKeyForm.tsx
+++ b/dashboard/src/features/database/dataGrid/components/BaseForeignKeyForm/BaseForeignKeyForm.tsx
@@ -107,9 +107,9 @@ export default function BaseForeignKeyForm({
            selectedColumn?.isPrimary || selectedColumn?.isUnique || false,
        });
      }}
-      className="flex flex-auto flex-col content-between overflow-hidden pb-4"
+      className="flex flex-col content-between flex-auto pb-4 overflow-hidden"
    >
-      <Box className="grid flex-auto grid-flow-row gap-4 overflow-y-auto border-t-1 py-4">
+      <Box className="grid flex-auto grid-flow-row gap-4 py-4 overflow-y-auto border-t-1">
        <Box component="section" className="grid grid-flow-row gap-4 px-6">
          <Text variant="h3">From</Text>

@@ -185,7 +185,7 @@ export default function BaseForeignKeyForm({
        </Box>
      </Box>

-      <Box className="grid flex-shrink-0 grid-flow-row gap-2 border-t-1 px-6 pt-4">
+      <Box className="grid flex-shrink-0 grid-flow-row gap-2 px-6 pt-4 border-t-1">
        <Button loading={isSubmitting} disabled={isSubmitting} type="submit">
          {submitButtonText}
        </Button>
--- a/dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.tsx
+++ b/dashboard/src/features/database/dataGrid/components/ColumnAutocomplete/ColumnAutocomplete.tsx
@@ -14,8 +14,8 @@ import { Text } from '@/components/ui/v2/Text';
 import { useMetadataQuery } from '@/features/database/dataGrid/hooks/useMetadataQuery';
 import { useTableQuery } from '@/features/database/dataGrid/hooks/useTableQuery';
 import { getTruncatedText } from '@/utils/getTruncatedText';
-import type { AutocompleteGroupedOption } from '@mui/base/AutocompleteUnstyled';
-import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
+import type { AutocompleteGroupedOption } from '@mui/base/useAutocomplete';
+import { useAutocomplete } from '@mui/base/useAutocomplete';
 import type { AutocompleteRenderGroupParams } from '@mui/material/Autocomplete';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
 import type {
@@ -366,11 +366,11 @@ function ColumnAutocomplete(
                  );
                }}
              >
-                <ArrowLeftIcon className="h-4 w-4" />
+                <ArrowLeftIcon className="w-4 h-4" />
              </IconButton>
            )}

-            <Text className="direction-rtl truncate text-left">
+            <Text className="text-left truncate direction-rtl">
              <Text component="span" color="disabled">
                {defaultTable}
              </Text>
--- a/dashboard/src/features/database/dataGrid/components/CreateColumnForm/CreateColumnForm.tsx
+++ b/dashboard/src/features/database/dataGrid/components/CreateColumnForm/CreateColumnForm.tsx
@@ -14,6 +14,7 @@ import { triggerToast } from '@/utils/toast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useRouter } from 'next/router';
 import { FormProvider, useForm } from 'react-hook-form';
+import type * as Yup from 'yup';

 export interface CreateColumnFormProps
  extends Pick<BaseColumnFormProps, 'onCancel' | 'location'> {
@@ -50,7 +51,9 @@ export default function CreateColumnForm({
    resetForeignKeyError();
  }

-  const form = useForm<BaseColumnFormValues>({
+  const form = useForm<
+    BaseColumnFormValues | Yup.InferType<typeof baseColumnValidationSchema>
+  >({
    defaultValues: {
      name: '',
      type: null,
--- a/dashboard/src/features/database/dataGrid/components/CreateForeignKeyForm/CreateForeignKeyForm.tsx
+++ b/dashboard/src/features/database/dataGrid/components/CreateForeignKeyForm/CreateForeignKeyForm.tsx
@@ -11,6 +11,7 @@ import {
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import type * as Yup from 'yup';

 export interface CreateForeignKeyFormProps
  extends Pick<
@@ -34,7 +35,10 @@ export default function CreateForeignKeyForm({
 }: CreateForeignKeyFormProps) {
  const [error, setError] = useState<Error>(null);

-  const form = useForm<BaseForeignKeyFormValues>({
+  const form = useForm<
+    | BaseForeignKeyFormValues
+    | Yup.InferType<typeof baseForeignKeyValidationSchema>
+  >({
    defaultValues: {
      id: null,
      name: '',
--- a/dashboard/src/features/database/dataGrid/components/CreateTableForm/CreateTableForm.tsx
+++ b/dashboard/src/features/database/dataGrid/components/CreateTableForm/CreateTableForm.tsx
@@ -16,6 +16,7 @@ import { triggerToast } from '@/utils/toast';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useRouter } from 'next/router';
 import { FormProvider, useForm } from 'react-hook-form';
+import type * as Yup from 'yup';

 export interface CreateTableFormProps
  extends Pick<BaseTableFormProps, 'onCancel' | 'location'> {
@@ -53,7 +54,9 @@ export default function CreateTableForm({

  const error = createTableError || trackTableError || foreignKeyError;

-  const form = useForm<BaseTableFormValues>({
+  const form = useForm<
+    BaseTableFormValues | Yup.InferType<typeof baseTableValidationSchema>
+  >({
    defaultValues: {
      columns: [
        {
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`export { default as ContactUs } from './DepricationNotice';`
				`@@ -1 +0,0 @@`
				`export { default as ProvidersUpdatedAlert } from './ProvidersUpdatedAlert';`
				`@@ -0,0 +1 @@`
				`export { default as ErrorToast } from './ErrorToast';`