chore: update versions (#3163)

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/dashboard@2.17.0

### Minor Changes

-   fd59918: fix: redirect to 404 with nhost cli dashboard

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.changeset/beige-lobsters-pay.md

@@ -1,5 +0,0 @@
----
-'@nhost/dashboard': minor
----
-
-fix: postgres version validation when activating ai in ai settings page

.github/actions/install-dependencies/action.yaml

@@ -12,24 +12,24 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: pnpm/action-setup@v2.2.4
+    - uses: pnpm/action-setup@v4
       with:
-        version: 8.10.5
+        version: 9.15.0
         run_install: false
     - name: Get pnpm cache directory
       id: pnpm-cache-dir
       shell: bash
       run: echo "dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: pnpm-cache
       with:
         path: ${{ steps.pnpm-cache-dir.outputs.dir }}
         key: ${{ runner.os }}-node-${{ hashFiles('pnpm-lock.yaml') }}
         restore-keys: ${{ runner.os }}-node-
-    - name: Use Node.js v18
+    - name: Use Node.js v20
       uses: actions/setup-node@v3
       with:
-        node-version: 18
+        node-version: 20
     - shell: bash
       name: Install packages
       run: pnpm install --frozen-lockfile

.github/workflows/changesets.yaml

@@ -65,29 +65,13 @@ jobs:
 
   publish-vercel:
     name: Publish to Vercel
-    runs-on: ubuntu-latest
     needs:
       - test
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Install Node and dependencies
-        uses: ./.github/actions/install-dependencies
-        with:
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
-      - name: Setup Vercel CLI
-        run: pnpm add -g vercel
-      - name: Trigger a Vercel deployment
-        env:
-          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
-          VERCEL_PROJECT_ID: ${{ secrets.DASHBOARD_VERCEL_PROJECT_ID }}
-        run: |
-          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
-          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+    uses: ./.github/workflows/deploy-dashboard.yaml
+    with:
+      git_ref: ${{ github.ref_name }}
+      environment: production
+    secrets: inherit
 
   publish-docker:
     name: Publish to Docker Hub

.github/workflows/ci.yaml

@@ -18,10 +18,14 @@ env:
   TURBO_TEAM: nhost
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
-  NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
   NHOST_TEST_DASHBOARD_URL: ${{ vars.NHOST_TEST_DASHBOARD_URL }}
   NHOST_TEST_WORKSPACE_NAME: ${{ vars.NHOST_TEST_WORKSPACE_NAME }}
   NHOST_TEST_PROJECT_NAME: ${{ vars.NHOST_TEST_PROJECT_NAME }}
+  NHOST_TEST_ORGANIZATION_NAME: ${{ vars.NHOST_TEST_ORGANIZATION_NAME }}
+  NHOST_TEST_ORGANIZATION_SLUG: ${{ vars.NHOST_TEST_ORGANIZATION_SLUG }}
+  NHOST_TEST_PERSONAL_ORG_SLUG: ${{ vars.NHOST_TEST_PERSONAL_ORG_SLUG }}
+  NHOST_TEST_PROJECT_SUBDOMAIN: ${{ vars.NHOST_TEST_PROJECT_SUBDOMAIN }}
+  NHOST_PRO_TEST_PROJECT_NAME: ${{ vars.NHOST_PRO_TEST_PROJECT_NAME }}
   NHOST_TEST_USER_EMAIL: ${{ secrets.NHOST_TEST_USER_EMAIL }}
   NHOST_TEST_USER_PASSWORD: ${{ secrets.NHOST_TEST_USER_PASSWORD }}
   NHOST_TEST_PROJECT_ADMIN_SECRET: ${{ secrets.NHOST_TEST_PROJECT_ADMIN_SECRET }}
@@ -159,7 +163,7 @@ jobs:
       # * Run this step only if the previous step failed, and Playwright generated a report
       - name: Upload Playwright Report
         if: ${{ failure() && hashFiles(format('{0}/playwright-report/**', matrix.package.path)) != ''}}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: playwright-${{ steps.file-name.outputs.fileName }}
           path: ${{format('{0}/playwright-report/**', matrix.package.path)}}

.github/workflows/dashboard.yaml

@@ -8,7 +8,6 @@ env:
   TURBO_TEAM: nhost
   NEXT_PUBLIC_ENV: dev
   NEXT_TELEMETRY_DISABLED: 1
-  NEXT_PUBLIC_NHOST_BACKEND_URL: http://localhost:1337
 
 jobs:
   build:

.github/workflows/deploy-dashboard.yaml

@@ -0,0 +1,58 @@
+name: 'dashboard: release form'
+
+on:
+  workflow_dispatch:
+    inputs:
+      git_ref:
+        type: string
+        description: 'Branch, tag, or commit SHA'
+        required: true
+
+      environment:
+        type: choice
+        description: 'Deployment environment'
+        required: true
+        default: staging
+        options:
+          - staging
+          - production
+
+  workflow_call:
+    inputs:
+      git_ref:
+        required: true
+        type: string
+      environment:
+        required: true
+        type: string
+
+jobs:
+  publish-vercel:
+    name: Publish to Vercel
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.git_ref }}
+          fetch-depth: 0
+
+      - name: Install Node and dependencies
+        uses: ./.github/actions/install-dependencies
+        with:
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+      - name: Setup Vercel CLI
+        run: pnpm add -g vercel
+
+      - name: Trigger Vercel deployment
+        env:
+          VERCEL_ORG_ID: ${{ secrets.DASHBOARD_VERCEL_TEAM_ID }}
+          VERCEL_PROJECT_ID: ${{ inputs.environment == 'production' && secrets.DASHBOARD_VERCEL_PROJECT_ID || secrets.DASHBOARD_STAGING_VERCEL_PROJECT_ID }}
+        run: |
+          echo "Deploying to: ${{ inputs.environment }}..."
+          vercel pull --environment=production --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel build --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}
+          vercel deploy --prebuilt --prod --token=${{ secrets.DASHBOARD_VERCEL_DEPLOY_TOKEN }}

.github/workflows/gen_ai_review.yaml

@@ -0,0 +1,27 @@
+---
+name: "gen: AI review"
+on:
+  pull_request:
+    types: [opened, reopened, ready_for_review]
+  issue_comment:
+jobs:
+  pr_agent_job:
+    if: ${{ github.event.sender.type != 'Bot' }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    permissions:
+      issues: write
+      pull-requests: write
+    name: Run pr agent on every pull request, respond to user comments
+    steps:
+      - name: PR Agent action step
+        id: pragent
+        uses: Codium-ai/pr-agent@v0.26
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          OPENAI_KEY: ${{ secrets.OPENAI_API_KEY }}
+          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
+          config.max_model_tokens: 100000
+          config.model: "anthropic/claude-3-5-sonnet-20240620"
+          config.model_turbo: "anthropic/claude-3-5-sonnet-20240620"
+          ignore.glob: "['pnpm-lock.yaml','**/pnpm-lock.yaml']"

.github/workflows/gen_schedule_update_deps.yaml

@@ -2,7 +2,7 @@
 name: "gen: update depenendencies"
 on:
   schedule:
-    - cron: '0 2 1 * *'
+    - cron: '0 2 1 2,5,8,11 *'
 
 jobs:
   run:

README.md

@@ -15,6 +15,8 @@
 <a href="https://twitter.com/nhost">Twitter</a>
 <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
 <a href="https://nhost.io/discord">Discord</a>
+<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+<a href="https://gurubase.io/g/nhost">Ask Nhost Guru (third party, unofficial)</a>
 <br />
 
   <hr />
@@ -148,4 +150,4 @@ Here are some ways of contributing to making Nhost better:
   <p align="center">
     <img width="720" src="https://contrib.rocks/image?repo=nhost/nhost" alt="A table of avatars from the project's contributors" />
   </p>
-</a>
+</a>

audit-ci.jsonc

@@ -2,5 +2,5 @@
   // $schema provides code completion hints to IDEs.
   "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
   "moderate": true,
-  "allowlist": ["trim-newlines"]
+  "allowlist": ["vue-template-compiler"]
 }

changelog_summary.sh

@@ -0,0 +1,17 @@
+#/usr/bin/env bash
+PREV_MONTH=$(date -d "1 month ago" +%Y-%m)
+
+echo "prev: $PREV_MONTH"
+
+files=$(git log --since="$PREV_MONTH-01" --until="$PREV_MONTH-31" --name-only -- '**/CHANGELOG.md' | grep CHANGE | sort -u)
+
+echo "files: $files"
+
+echo "Below you can find the latest release for each individual package released during this month:"
+echo
+
+for file in $files; do
+  name=$(grep '^# ' $file | awk '{ print substr($0, 4) }')
+  last_release=$(grep '^## ' $file | awk '{ print substr($0, 4) }' | head -n 1)
+  echo "@$name: $last_release [CHANGELOG.md](https://github.com/nhost/nhost/blob/main/$file)"
+done

dashboard/.env.example

@@ -17,5 +17,11 @@ 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>
 
+NEXT_PUBLIC_ZENDESK_URL=
+NEXT_PUBLIC_ZENDESK_API_KEY=
+NEXT_PUBLIC_ZENDESK_USER_EMAIL=
+
+
 CODEGEN_GRAPHQL_URL=https://local.graphql.nhost.run/v1
 CODEGEN_HASURA_ADMIN_SECRET=nhost-admin-secret
+NEXT_PUBLIC_TURNSTILE_SITE_KEY=FIXME

dashboard/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   ],
   rules: {
     'react/react-in-jsx-scope': 'off',
+    'react/prop-types': [2, { ignore: ['className'] }],
     'react/jsx-props-no-spreading': 'off',
     'react/require-default-props': 'off',
     'react-hooks/exhaustive-deps': 'warn',
@@ -76,4 +77,29 @@ module.exports = {
       },
     ],
   },
+  overrides: [
+    {
+      files: ['**/components/ui/v3/*.tsx'],
+      rules: {
+        'react/prop-types': [
+          2,
+          {
+            ignore: [
+              'className',
+              'align',
+              'sideOffset',
+              'orientation',
+              'decorative',
+              'checked',
+              'position',
+            ],
+          },
+        ],
+        'react-refresh/only-export-components': 'off',
+        'react/function-component-definition': 'off',
+        'arrow-body-style': 'off',
+        'react/no-unknown-property': 'off',
+      },
+    },
+  ],
 };

dashboard/.npmrc

@@ -1 +1,3 @@
-link-workspace-packages = false
+link-workspace-packages = false
+auto-install-peers = false
+resolution-mode=highest

dashboard/.storybook/main.js

@@ -42,7 +42,6 @@ module.exports = {
   env: (config) => ({
     ...config,
     NEXT_PUBLIC_ENV: 'dev',
-    NEXT_PUBLIC_NHOST_BACKEND_URL: 'http://localhost:1337',
     NEXT_PUBLIC_NHOST_PLATFORM: 'false',
   }),
 };

dashboard/CHANGELOG.md

@@ -1,5 +1,256 @@
 # @nhost/dashboard
 
+## 2.17.0
+
+### Minor Changes
+
+- fd59918: fix: redirect to 404 with nhost cli dashboard
+
+## 2.16.0
+
+### Minor Changes
+
+- f8e6b61: fix: can add rule groups in table permissions
+- 9e404c8: fix: not redirect to 404 page if using local Nhost backend
+- ac4aa01: fix: can delete column in database page
+- 4385524: fix: update url to check service health in local dashboard
+
+### Patch Changes
+
+- @nhost/react-apollo@16.0.1
+- @nhost/nextjs@2.2.2
+
+## 2.15.0
+
+### Minor Changes
+
+- f1052a8: fix: improve stability of the dashboard when pausing projects
+- 30daa41: fix: update links to docs in overview page
+- 7537237: feat: add image preview toggle in storage
+
+## 2.14.0
+
+### Minor Changes
+
+- d43931e: fix: invalid organization slug/project subdomain doesn't open 404 page
+- 5df6fa2: feat: add unencrypted disk warning in storage capacity settings
+
+### Patch Changes
+
+- 44c1e17: chore: update `msw` to v1.3.5 to fix vulnerabilities
+  - @nhost/react-apollo@16.0.0
+  - @nhost/nextjs@2.2.1
+
+## 2.13.0
+
+### Minor Changes
+
+- 21e90da: chore: remove restrictions on SMTP sender so My Name <name@acme.com> can be added
+- 865dd93: fix: duplicate Run placeholders when there is an error in the backend
+- 6902a36: fix: can remove resources if postgres capacity is higher than 10
+- a535aa3: fix: fetch user roles locally in auth section
+- 0c50816: fix: allow decimal numbers in database row insert
+- aea6d18: chore: add warning when pausing a project about losing Run services persistent volume data
+- d3b4fc3: feat: allow to change postgres settings if project is paused
+- 29d27e1: chore: update `next` to v14.2.22 to fix vulnerabilities
+- c9dca09: feat: add reset password form
+- b3bcacb: fix: paused project banner cannot read null project name
+
+### Patch Changes
+
+- Updated dependencies [46fc520]
+- Updated dependencies [29d27e1]
+  - @nhost/nextjs@2.2.0
+  - @nhost/react-apollo@15.0.1
+
+## 2.12.0
+
+### Minor Changes
+
+- eb95562: fix: show all available permission variables in permission dropdown select
+
+### Patch Changes
+
+- 8b5c4a0: chore: cleanup layout and add disable duplicate atom key checking in development mode
+
+## 2.11.3
+
+### Patch Changes
+
+- 714dffa: fix: improve project polling logic and unify usage across components
+
+## 2.11.2
+
+### Patch Changes
+
+- 6a34f89: fix: improve project polling logic and unify usage across components
+
+## 2.11.1
+
+### Patch Changes
+
+- 0f6ce52: fix: consolidate useProject hook and fix jwt expired error
+
+## 2.11.0
+
+### Minor Changes
+
+- cea3ef5: Feat: add org and project placeholders
+
+## 2.10.0
+
+### Minor Changes
+
+- 86ecf27: feat: add support for additional metrics in overview
+- 21708be: feat: dashboard: add support for storage buckets to AI assistants
+
+## 1.30.0
+
+### Minor Changes
+
+- 50441a8: feat: add ui for project autoscaler settings and run services autoscaler settings
+
+## 1.29.0
+
+### Minor Changes
+
+- 55d8bb5: feat: integrate turnstile for signup verification
+- 2a2e54c: fix: update docs url in run services form tooltip
+- 18f942f: fix: display long error messages in error toast without overflow
+
+### Patch Changes
+
+- @nhost/react-apollo@13.0.0
+- @nhost/nextjs@2.1.22
+
+## 1.28.2
+
+### Patch Changes
+
+- 52a38fe: chore: update dependencies to address security vulnerabilities
+- Updated dependencies [52a38fe]
+  - @nhost/nextjs@2.1.21
+
+## 1.28.1
+
+### Patch Changes
+
+- 9735fa2: chore: remove broken link
+
+## 1.28.0
+
+### Minor Changes
+
+- 526183a: feat: allow filtering users in "make request as" in graphql section
+- be3b85b: feat: add conceal errors toggle on auth settings page
+
+### Patch Changes
+
+- 35a2f12: fix: prevent run service details from opening when attempting to delete
+  - @nhost/react-apollo@12.0.6
+  - @nhost/nextjs@2.1.20
+
+## 1.27.0
+
+### Minor Changes
+
+- a7cd02c: fix: resolve rate limit query
+
+## 1.26.0
+
+### Minor Changes
+
+- 3773ad7: chore: update pricing information
+- b63250d: fix: not allow run service creation form resubmission while creating a run service
+- a44a1d4: feat: add rate limits settings page
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.5
+- @nhost/nextjs@2.1.19
+
+## 1.25.0
+
+### Minor Changes
+
+- d1ceede: feat: add setting to migrate postgres major and/or minor versions
+- e5d3d1a: fix: allow manually typing column for custom check in database row permissions
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.4
+- @nhost/nextjs@2.1.18
+
+## 1.24.1
+
+### Patch Changes
+
+- 49f2e55: fix: use service subdomain in service form and service details dialog
+- 598b988: fix: use current project subdomain in ServiceDetailsDialog component
+
+## 1.24.0
+
+### Minor Changes
+
+- abb24af: chore: add redirect to support page when project is locked
+- 18a6455: feat: show contact us info and locked reason when project is locked
+
+### Patch Changes
+
+- e31eefa: fix: include ingresses field when updating run services
+
+## 1.23.0
+
+### Minor Changes
+
+- 33284d3: fix: don't show double scrollbar in configuration editor
+
+### Patch Changes
+
+- @nhost/react-apollo@12.0.3
+- @nhost/nextjs@2.1.17
+
+## 1.22.0
+
+### Minor Changes
+
+- 998c037: fix: align drop-down list in select component
+- 807b8c0: fix: show city name in region selection for project creation
+
+## 1.21.0
+
+### Minor Changes
+
+- a2efeed: fix: improve project health error handling, add unknown state and polling interval for health state
+
+## 1.20.0
+
+### Minor Changes
+
+- 8ea4210: fix: error toasts can be closed individually, instead of dismissing all toasts at once
+- 58919ba: chore: add blink animation when project health service is updating
+
+## 1.19.0
+
+### Minor Changes
+
+- b519862: fix: get configuration in configuration editor using local development environment
+
+## 1.18.0
+
+### Minor Changes
+
+- 502abad: feat: add services health checks indicators to the overview page
+- b3ff6ad: chore: update title text on service status modal
+- dbadf59: feat: add project configuration TOML editor to the settings page
+
+## 1.17.0
+
+### Minor Changes
+
+- 77fba27: fix: postgres version validation when activating ai in ai settings page
+- ac6d1b6: feat: use name instead of awsName
+
 ## 1.16.3
 
 ### Patch Changes

dashboard/Dockerfile

@@ -1,13 +1,13 @@
-FROM node:18-alpine AS pruner
+FROM node:20-alpine AS pruner
 RUN apk add --no-cache libc6-compat
 RUN apk update
 WORKDIR /app
 
-RUN yarn global add turbo@1.11.3
+RUN yarn global add turbo@2.2.3
 COPY . .
 RUN turbo prune --scope="@nhost/dashboard" --docker
 
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 ARG TURBO_TOKEN
 ARG TURBO_TEAM
 
@@ -15,22 +15,22 @@ RUN apk add --no-cache libc6-compat python3 make g++
 RUN apk update
 WORKDIR /app
 
-ENV NEXT_TELEMETRY_DISABLED 1
-ENV NEXT_PUBLIC_ENV dev
-ENV NEXT_PUBLIC_NHOST_PLATFORM false
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PUBLIC_ENV=dev
+ENV NEXT_PUBLIC_NHOST_PLATFORM=false
 
 # placeholders for URLs, will be replaced on runtime by entrypoint script
-ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET __NEXT_PUBLIC_NHOST_ADMIN_SECRET__
-ENV NEXT_PUBLIC_NHOST_AUTH_URL __NEXT_PUBLIC_NHOST_AUTH_URL__
-ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL __NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
-ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL __NEXT_PUBLIC_NHOST_GRAPHQL_URL__
-ENV NEXT_PUBLIC_NHOST_STORAGE_URL __NEXT_PUBLIC_NHOST_STORAGE_URL__
-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__
-ENV NEXT_PUBLIC_NHOST_CONFIGSERVER_URL __NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__
+ENV NEXT_PUBLIC_NHOST_ADMIN_SECRET=__NEXT_PUBLIC_NHOST_ADMIN_SECRET__
+ENV NEXT_PUBLIC_NHOST_AUTH_URL=__NEXT_PUBLIC_NHOST_AUTH_URL__
+ENV NEXT_PUBLIC_NHOST_FUNCTIONS_URL=__NEXT_PUBLIC_NHOST_FUNCTIONS_URL__
+ENV NEXT_PUBLIC_NHOST_GRAPHQL_URL=__NEXT_PUBLIC_NHOST_GRAPHQL_URL__
+ENV NEXT_PUBLIC_NHOST_STORAGE_URL=__NEXT_PUBLIC_NHOST_STORAGE_URL__
+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__
+ENV NEXT_PUBLIC_NHOST_CONFIGSERVER_URL=__NEXT_PUBLIC_NHOST_CONFIGSERVER_URL__
 
-RUN yarn global add pnpm@8.10.5
+RUN yarn global add pnpm@9.15.0
 COPY .gitignore .gitignore
 COPY --from=pruner /app/out/json/ .
 COPY --from=pruner /app/out/pnpm-*.yaml .
@@ -41,7 +41,7 @@ COPY turbo.json turbo.json
 COPY config/ config/
 RUN pnpm build:dashboard
 
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 RUN addgroup --system --gid 1001 nodejs
@@ -58,4 +58,4 @@ COPY --from=builder --chown=nextjs:nodejs /app/dashboard/.next/standalone/app ./
 COPY --from=builder --chown=nextjs:nodejs /app/dashboard/.next/static ./dashboard/.next/static
 
 ENTRYPOINT ["./docker-entrypoint.sh"]
-CMD ["node", "dashboard/server.js"]
+CMD ["node", "dashboard/server.js"]

dashboard/README.md

@@ -100,7 +100,6 @@ pnpm storybook --port 6007
 
 | Name                                    | Description                                                                                 |
 | --------------------------------------- | ------------------------------------------------------------------------------------------- |
-| `NEXT_PUBLIC_NHOST_BACKEND_URL`         | Backend URL. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                   |
 | `NEXT_PUBLIC_STRIPE_PK`                 | Stripe public key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.             |
 | `NEXT_PUBLIC_GITHUB_APP_INSTALL_URL`    | URL of the GitHub application. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`. |
 | `NEXT_PUBLIC_ANALYTICS_WRITE_KEY`       | Analytics key. This is only used if `NEXT_PUBLIC_NHOST_PLATFORM` is `true`.                 |

dashboard/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui/v3",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

dashboard/e2e/account/pat/manage-pat.test.ts

@@ -17,7 +17,7 @@ test.afterAll(async () => {
 });
 
 test('should be able to create then delete a personal access token', async () => {
-  await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(1000);
   await page.getByRole('banner').getByRole('button').last().click();
   await page.getByRole('link', { name: /account settings/i }).click();
   await page

dashboard/e2e/ai/assistants.test.ts

@@ -0,0 +1,54 @@
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { navigateToProject } from '@/e2e/utils';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await navigateToProject({
+    page,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
+  });
+
+  const AIRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/ai/assistants`;
+  await page.goto(AIRoute);
+  await page.waitForURL(AIRoute);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create and delete an Assistant', async () => {
+  await page.getByRole('link', { name: 'Assistants' }).click();
+
+  await expect(page.getByText(/no assistants are configured/i)).toBeVisible();
+
+  await page.getByRole('button', { name: 'Create a new assistant' }).click();
+  await page.getByLabel('Name').fill('test');
+  await page.getByLabel('Description').fill('test');
+  await page.getByLabel('Instructions').fill('test');
+  await page.getByLabel('Model').fill('gpt-3.5-turbo-1106');
+
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
+
+  await page.getByLabel(/more options/i).click();
+  await page.getByRole('menuitem', { name: /delete test/i }).click();
+
+  await page.getByLabel('Confirm Delete Assistant').check();
+  await page.getByRole('button', { name: 'Delete Assistant' }).click();
+
+  await expect(
+    page.getByRole('heading', { name: /no assistants are configured/i }),
+  ).toBeVisible();
+});

dashboard/e2e/ai/auto-embeddings.test.ts

@@ -0,0 +1,49 @@
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { navigateToProject } from '@/e2e/utils';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await navigateToProject({
+    page,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
+  });
+
+  const AIRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/ai/auto-embeddings`;
+  await page.goto(AIRoute);
+  await page.waitForURL(AIRoute);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create and delete an Auto-Embeddings', async () => {
+  await page.getByRole('button', { name: 'Add a new Auto-Embeddings' }).click();
+
+  await page.getByLabel('Name').fill('test');
+  await page.getByLabel('Schema').fill('auth');
+  await page.getByLabel('Table').fill('users');
+  await page.getByLabel('Column').fill('email');
+
+  await page.getByRole('button', { name: 'Create' }).click();
+  await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
+
+  await page.getByLabel(/more options/i).click();
+  await page.getByRole('menuitem', { name: /delete test/i }).click();
+
+  await page.getByLabel('Confirm Delete Auto-').check();
+  await page.getByRole('button', { name: 'Delete Auto-Embeddings' }).click();
+  await expect(
+    page.getByRole('heading', { name: /No Auto-Embeddings are configured/i }),
+  ).toBeVisible();
+});

dashboard/e2e/auth/ban-user.test.ts

@@ -1,28 +1,12 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import test, { expect } from '@playwright/test';
 
 test('should be able to ban and unban a user', async ({ page }) => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 
   const email = generateTestEmail();
   const password = faker.internet.password();

dashboard/e2e/auth/create-user.test.ts

@@ -1,9 +1,5 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import test, { expect } from '@playwright/test';
@@ -15,21 +11,9 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 });
 
 test.afterAll(async () => {

dashboard/e2e/auth/delete-user.test.ts

@@ -1,9 +1,5 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import test, { expect } from '@playwright/test';
@@ -15,21 +11,9 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 });
 
 test.afterAll(async () => {

dashboard/e2e/auth/verify-user.test.ts

@@ -1,9 +1,5 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { createUser, generateTestEmail } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
@@ -15,21 +11,9 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.beforeEach(async () => {
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  const authUrl = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/users`;
+  await page.goto(authUrl);
+  await page.waitForURL(authUrl, { waitUntil: 'networkidle' });
 });
 
 test.afterAll(async () => {

dashboard/e2e/database/create-table.test.ts

@@ -1,9 +1,5 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject, prepareTable } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { navigateToProject, prepareTable } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
@@ -18,17 +14,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /database/i })
-    .click();
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
 });
 
 test.afterAll(async () => {
@@ -55,7 +49,7 @@ test('should create a simple table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -84,7 +78,7 @@ test('should create a table with unique constraints', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -113,7 +107,7 @@ test('should create a table with nullable columns', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -146,7 +140,7 @@ test('should create a table with an identity column', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await expect(
@@ -174,7 +168,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${firstTableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -219,7 +213,7 @@ test('should create table with foreign key constraint', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${secondTableName}`,
   );
 
   await expect(
@@ -247,7 +241,7 @@ test('should not be able to create a table with a name that already exists', asy
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();

dashboard/e2e/database/delete-table.test.ts

@@ -1,9 +1,5 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { deleteTable, openProject, prepareTable } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import { deleteTable, navigateToProject, prepareTable } from '@/e2e/utils';
 import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
@@ -18,17 +14,15 @@ test.beforeAll(async ({ browser }) => {
 test.beforeEach(async () => {
   await page.goto('/');
 
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /database/i })
-    .click();
+  const databaseRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default`;
+  await page.goto(databaseRoute);
+  await page.waitForURL(databaseRoute);
 });
 
 test.afterAll(async () => {
@@ -53,7 +47,7 @@ test('should delete a table', async () => {
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${tableName}`,
   );
 
   await deleteTable({
@@ -63,7 +57,7 @@ test('should delete a table', async () => {
 
   // navigate to next URL
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/**`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/**`,
   );
 
   await expect(
@@ -91,7 +85,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${firstTableName}`,
   );
 
   await page.getByRole('button', { name: /new table/i }).click();
@@ -138,7 +132,7 @@ test('should not be able to delete a table if other tables have foreign keys ref
   await page.getByRole('button', { name: /create/i }).click();
 
   await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
+    `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/database/browser/default/public/${secondTableName}`,
   );
 
   await expect(

dashboard/e2e/env.ts

@@ -1,5 +1,3 @@
-import slugify from 'slugify';
-
 /**
  * URL of the dashboard to test against.
  */
@@ -8,15 +6,12 @@ export const TEST_DASHBOARD_URL = process.env.NHOST_TEST_DASHBOARD_URL;
 /**
  * Name of the workspace to test against.
  */
-export const TEST_WORKSPACE_NAME = process.env.NHOST_TEST_WORKSPACE_NAME;
+export const TEST_ORGANIZATION_NAME = process.env.NHOST_TEST_ORGANIZATION_NAME;
 
 /**
- * Slugified name of the workspace to test against.
+ * Slug of the organization to test against.
  */
-export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
-  lower: true,
-  strict: true,
-});
+export const TEST_ORGANIZATION_SLUG = process.env.NHOST_TEST_ORGANIZATION_SLUG;
 
 /**
  * Name of the project to test against.
@@ -24,12 +19,9 @@ export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
 export const TEST_PROJECT_NAME = process.env.NHOST_TEST_PROJECT_NAME;
 
 /**
- * Slugified name of the project to test against.
+ * Subdomain of the project to test against.
  */
-export const TEST_PROJECT_SLUG = slugify(TEST_PROJECT_NAME, {
-  lower: true,
-  strict: true,
-});
+export const TEST_PROJECT_SUBDOMAIN = process.env.NHOST_TEST_PROJECT_SUBDOMAIN;
 
 /**
  * Hasura admin secret of the test project to use.
@@ -46,3 +38,5 @@ export const TEST_USER_EMAIL = process.env.NHOST_TEST_USER_EMAIL;
  * Password of the test account to use.
  */
 export const TEST_USER_PASSWORD = process.env.NHOST_TEST_USER_PASSWORD;
+
+export const TEST_PERSONAL_ORG_SLUG = process.env.NHOST_TEST_PERSONAL_ORG_SLUG;

dashboard/e2e/overview/overview.test.ts

@@ -1,12 +1,7 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_NAME,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
+import { navigateToProject } from '../utils';
 
 let page: Page;
 
@@ -14,11 +9,11 @@ test.beforeAll(async ({ browser }) => {
   page = await browser.newPage();
 
   await page.goto('/');
-  await openProject({
+
+  await navigateToProject({
     page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 });
 
@@ -26,60 +21,34 @@ test.afterAll(async () => {
   await page.close();
 });
 
-test('should show a sidebar with menu items', async () => {
-  const navLocator = page.getByRole('navigation', { name: /main navigation/i });
+test('should show the navtree with all links visible', async () => {
+  const navLocator = page.getByLabel('Navigation Tree');
   await expect(navLocator).toBeVisible();
-  await expect(navLocator.getByRole('list').getByRole('listitem')).toHaveCount(
-    13,
-  );
-  await expect(
-    navLocator.getByRole('link', { name: /overview/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /database/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /graphql/i }),
-  ).toBeVisible();
-  await expect(navLocator.getByRole('link', { name: /hasura/i })).toBeVisible();
-  await expect(navLocator.getByRole('link', { name: /auth/i })).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /storage/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /deployments/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /backups/i }),
-  ).toBeVisible();
-  await expect(navLocator.getByRole('link', { name: /logs/i })).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /metrics/i }),
-  ).toBeVisible();
-  await expect(
-    navLocator.getByRole('link', { name: /settings/i }),
-  ).toBeVisible();
-});
 
-test('should show a header with a logo, the workspace name, and the project name', async () => {
-  await expect(
-    page.getByRole('banner').getByRole('link', { name: TEST_WORKSPACE_NAME }),
-  ).toBeVisible();
+  const links = [
+    'Nhost Automation Test Project',
+    'Overview',
+    'Database',
+    'GraphQL',
+    'Hasura',
+    'Auth',
+    'Storage',
+    'Run',
+    'AI',
+    'Deployments',
+    'Backups',
+    'Logs',
+    'Metrics',
+    'Settings',
+  ];
 
-  await expect(
-    page.getByRole('banner').getByRole('link', { name: TEST_PROJECT_NAME }),
-  ).toBeVisible();
-});
-
-test("should show the project's name, the Upgrade button and the Settings button", async () => {
-  await expect(
-    page.getByRole('heading', { name: TEST_PROJECT_NAME }),
-  ).toBeVisible();
-  await expect(page.getByText(/starter/i)).toBeVisible();
-  await expect(page.getByRole('button', { name: /upgrade/i })).toBeVisible();
-  await expect(
-    page.getByRole('main').getByRole('link', { name: /settings/i }),
-  ).toBeVisible();
+  for (const linkName of links) {
+    const link =
+      linkName === 'Settings'
+        ? page.getByRole('link', { name: linkName }).first()
+        : page.getByRole('link', { name: linkName });
+    await expect(link).toBeVisible();
+  }
 });
 
 test("should show the project's region and subdomain", async () => {
@@ -96,27 +65,3 @@ test('should not have a GitHub repository connected', async () => {
     page.getByRole('button', { name: /connect to github/i }).first(),
   ).toBeVisible();
 });
-
-test('should show metrics', async () => {
-  await expect(page.getByText(/cpu usage seconds\d+/i)).toBeVisible();
-  await expect(page.getByText(/total requests\d+/i)).toBeVisible();
-  await expect(page.getByText(/function invocations\d+/i)).toBeVisible();
-  await expect(
-    page.getByText(/egress volume\d+(\.\d+)? [a-zA-Z]+/i),
-  ).toBeVisible();
-  await expect(page.getByText(/logs\d+(\.\d+)? [a-zA-Z]+/i)).toBeVisible();
-});
-
-test('should show proper limits for the free project', async () => {
-  await expect(
-    page.getByText(/database\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
-  ).toBeVisible();
-
-  await expect(
-    page.getByText(/storage\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
-  ).toBeVisible();
-
-  await expect(page.getByText(/users[0-9]+ of [0-9]+/i)).toBeVisible();
-
-  await expect(page.getByText(/functions[0-9]+ of [0-9]+/i)).toBeVisible();
-});

dashboard/e2e/run/run.test.ts

@@ -0,0 +1,65 @@
+import { TEST_ORGANIZATION_SLUG, TEST_PROJECT_SUBDOMAIN } from '@/e2e/env';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+import { navigateToProject } from '../utils';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await navigateToProject({
+    page,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
+  });
+
+  const runRoute = `/orgs/${TEST_ORGANIZATION_SLUG}/projects/${TEST_PROJECT_SUBDOMAIN}/run`;
+  await page.goto(runRoute);
+  await page.waitForURL(runRoute);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create and delete a run service', async () => {
+  await page.getByRole('button', { name: 'Add service' }).first().click();
+  await expect(page.getByText(/create a new service/i)).toBeVisible();
+  await page.getByPlaceholder(/service name/i).click();
+  await page.getByPlaceholder(/service name/i).fill('test');
+
+  await page.getByText('Nhost registry').click();
+  await page.getByPlaceholder('Replicas').click();
+  await page.getByPlaceholder('Replicas').fill('0');
+
+  await page.getByRole('button', { name: /create/i }).click();
+
+  await expect(
+    page.getByRole('heading', { name: /confirm resources/i }),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /confirm/i }).click();
+
+  await expect(page.getByRole('heading', { name: /test/i })).toBeVisible();
+
+  await page.getByLabel(/more options/i).click();
+
+  await page.getByRole('menuitem', { name: /delete service/i }).click();
+
+  await page.getByLabel(/confirm delete project #/i).check();
+
+  await page.getByRole('button', { name: /delete service/i }).click();
+
+  await expect(
+    page
+      .getByRole('main')
+      .locator('div')
+      .filter({ hasText: 'No custom services are' })
+      .nth(2),
+  ).toBeVisible();
+});

dashboard/e2e/setup/auth.setup.ts

@@ -1,5 +1,6 @@
 import {
   TEST_DASHBOARD_URL,
+  TEST_PERSONAL_ORG_SLUG,
   TEST_USER_EMAIL,
   TEST_USER_PASSWORD,
 } from '@/e2e/env';
@@ -15,6 +16,9 @@ setup('authenticate user', async ({ page }) => {
   await page.getByLabel('Password').fill(TEST_USER_PASSWORD);
   await page.getByRole('button', { name: /sign in/i }).click();
 
-  await page.waitForURL(TEST_DASHBOARD_URL);
+  await page.waitForURL(
+    `${TEST_DASHBOARD_URL}/orgs/${TEST_PERSONAL_ORG_SLUG}/projects`,
+    { waitUntil: 'networkidle' },
+  );
   await page.context().storageState({ path: 'e2e/.auth/user.json' });
 });

dashboard/e2e/utils.ts

@@ -5,24 +5,27 @@ import type { Page } from '@playwright/test';
  * Open a project by navigating to the project's overview page.
  *
  * @param page - The Playwright page object.
- * @param workspaceSlug - The slug of the workspace that contains the project.
- * @param projectSlug - The slug of the project to open.
- * @param projectName - The name of the project to open.
+ * @param orgSlug - The slug of the organization that contains the project.
+ * @param projectSubdomain - The subdomain of the project to open.
  * @returns A promise that resolves when the project is opened.
  */
-export async function openProject({
+export async function navigateToProject({
   page,
-  projectName,
-  workspaceSlug,
-  projectSlug,
+  orgSlug,
+  projectSubdomain,
 }: {
   page: Page;
-  workspaceSlug: string;
-  projectSlug: string;
-  projectName: string;
+  orgSlug: string;
+  projectSubdomain: string;
 }) {
-  await page.getByRole('link', { name: projectName }).click();
-  await page.waitForURL(`/${workspaceSlug}/${projectSlug}`);
+  const projectUrl = `/orgs/${orgSlug}/projects/${projectSubdomain}`;
+
+  try {
+    await page.goto(projectUrl, { waitUntil: 'networkidle' });
+    await page.waitForURL(projectUrl, { timeout: 10000 });
+  } catch (error) {
+    console.error(`Failed to navigate to project URL: ${projectUrl}`, error);
+  }
 }
 
 /**

dashboard/global-teardown.ts

@@ -1,11 +1,10 @@
 import {
   TEST_DASHBOARD_URL,
+  TEST_ORGANIZATION_SLUG,
   TEST_PROJECT_ADMIN_SECRET,
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
+  TEST_PROJECT_SUBDOMAIN,
 } from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
+import { navigateToProject } from '@/e2e/utils';
 import { chromium } from '@playwright/test';
 
 async function globalTeardown() {
@@ -18,13 +17,10 @@ async function globalTeardown() {
 
   const page = await context.newPage();
 
-  await page.goto('/');
-
-  await openProject({
+  await navigateToProject({
     page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    orgSlug: TEST_ORGANIZATION_SLUG,
+    projectSubdomain: TEST_PROJECT_SUBDOMAIN,
   });
 
   const pagePromise = context.waitForEvent('page');
@@ -43,8 +39,8 @@ async function globalTeardown() {
   await adminSecretInput.press('Enter');
 
   // note: getByRole doesn't work here
-  await hasuraPage.locator('a', { hasText: /data/i }).click();
-  await hasuraPage.getByRole('link', { name: /sql/i }).click();
+  await hasuraPage.locator('a', { hasText: /data/i }).nth(0).click();
+  await hasuraPage.locator('[data-test="sql-link"]').click();
 
   // Set the value of the Ace code editor using JavaScript evaluation in the browser context
   await hasuraPage.evaluate(() => {

dashboard/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

dashboard/next.config.js

@@ -19,7 +19,7 @@ const cspHeader = `
 `;
 
 module.exports = withBundleAnalyzer({
-  reactStrictMode: true,
+  reactStrictMode: false,
   swcMinify: false,
   output: 'standalone',
   experimental: {

dashboard/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nhost/dashboard",
-  "version": "1.16.3",
+  "version": "2.17.0",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev",
+    "dev": "RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false next dev",
     "build": "next build --no-lint",
     "analyze": "ANALYZE=true pnpm build --no-lint",
     "start": "next start",
@@ -21,23 +21,41 @@
   "dependencies": {
     "@apollo/client": "^3.9.9",
     "@codemirror/lang-sql": "^6.6.2",
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/legacy-modes": "^6.4.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
-    "@fontsource/inter": "^5.0.17",
-    "@fontsource/roboto-mono": "^5.0.17",
-    "@graphiql/react": "^0.20.3",
+    "@fontsource/inter": "^5.0.21",
+    "@fontsource/roboto-mono": "^5.0.20",
+    "@graphiql/react": "^0.22.3",
     "@graphiql/toolkit": "^0.9.1",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.9.0",
+    "@iarna/toml": "^2.2.5",
+    "@marsidev/react-turnstile": "^1.0.2",
     "@mui/base": "5.0.0-beta.31",
     "@mui/material": "^5.15.14",
     "@mui/system": "^5.15.14",
     "@mui/x-date-pickers": "^5.0.20",
     "@nhost/nextjs": "workspace:*",
     "@nhost/react-apollo": "workspace:*",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
     "@segment/snippet": "^4.16.2",
     "@stripe/react-stripe-js": "^2.6.2",
     "@stripe/stripe-js": "^1.54.2",
@@ -45,30 +63,39 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-table": "^8.15.3",
     "@tanstack/react-virtual": "^3.2.0",
+    "@uidotdev/usehooks": "^2.4.1",
+    "@uiw/codemirror-theme-bbedit": "^4.22.2",
     "@uiw/codemirror-theme-github": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
     "analytics-node": "^6.2.0",
     "bcryptjs": "^2.4.3",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
+    "cmdk": "1.0.0",
     "date-fns": "^2.30.0",
+    "dequal": "^2.0.3",
     "framer-motion": "^10.18.0",
     "generate-password": "^1.7.1",
-    "graphiql": "^3.1.1",
+    "graphiql": "^3.3.1",
     "graphql": "16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.16.0",
     "just-kebab-case": "^4.2.0",
     "lodash.debounce": "^4.0.8",
-    "next": "^14.1.4",
+    "lucide-react": "^0.416.0",
+    "next": "^14.2.22",
+    "next-nprogress-bar": "^2.3.13",
     "next-seo": "^6.5.0",
+    "next-themes": "^0.3.0",
     "node-pg-format": "^1.3.5",
     "pluralize": "^8.0.0",
     "react": "18.2.0",
     "react-children-utilities": "^2.10.0",
+    "react-complex-tree": "^2.4.5",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.51.2",
+    "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.8.1",
     "react-is": "18.2.0",
@@ -85,10 +112,13 @@
     "slugify": "^1.6.6",
     "stripe": "^10.17.0",
     "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
     "utility-types": "^3.11.0",
+    "uuid": "^9.0.1",
     "validator": "^13.11.0",
     "yup": "^1.4.0",
-    "yup-password": "^0.2.2"
+    "yup-password": "^0.2.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.24.3",
@@ -98,7 +128,7 @@
     "@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",
+    "@playwright/test": "1.47.0",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -124,6 +154,7 @@
     "@types/react-table": "^7.7.20",
     "@types/shell-quote": "^1.7.5",
     "@types/testing-library__jest-dom": "^5.14.9",
+    "@types/uuid": "^9.0.8",
     "@types/validator": "^13.11.9",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
@@ -146,21 +177,21 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jsdom": "^22.1.0",
     "lint-staged": "^15.2.2",
-    "msw": "^1.3.3",
+    "msw": "^1.3.5",
     "msw-storybook-addon": "^1.10.0",
     "node-fetch": "^3.3.2",
     "postcss": "^8.4.38",
-    "prettier": "^2.8.8",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "prettier-plugin-tailwindcss": "^0.4.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "react-date-fns-hooks": "^0.9.4",
     "require-from-string": "^2.0.2",
     "snake-case": "^3.0.4",
     "storybook-addon-next-router": "^4.0.2",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.12",
     "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "vite": "^5.2.7",
+    "vite": "^5.4.6",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^0.32.4"
   },

dashboard/playwright.config.ts

@@ -6,20 +6,23 @@ dotenv.config({ path: path.resolve(__dirname, '.env.test') });
 
 export default defineConfig({
   testDir: './e2e',
-  timeout: 30 * 1000,
+  timeout: 40 * 1000,
   expect: {
     timeout: 5000,
   },
-  fullyParallel: true,
+  fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   reporter: 'html',
   globalTeardown: require.resolve('./global-teardown'),
   use: {
     actionTimeout: 0,
     trace: 'on-first-retry',
     baseURL: process.env.NHOST_TEST_DASHBOARD_URL,
+    launchOptions: {
+      slowMo: 500,
+    },
   },
   projects: [
     {

dashboard/prettier.config.js

@@ -9,7 +9,7 @@ module.exports = {
   endOfLine: 'auto',
   semi: true,
   plugins: [
-    require('prettier-plugin-organize-imports'),
-    require('prettier-plugin-tailwindcss'),
+    'prettier-plugin-organize-imports',
+    'prettier-plugin-tailwindcss'
   ],
 };

dashboard/public/assets/LockedApp.svg

@@ -0,0 +1,12 @@
+<svg width="72" height="73" viewBox="0 0 72 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_10501_253)">
+<path d="M0 8.5C0 4.08172 3.58172 0.5 8 0.5H64C68.4183 0.5 72 4.08172 72 8.5V64.5C72 68.9183 68.4183 72.5 64 72.5H8C3.58172 72.5 0 68.9183 0 64.5V8.5Z" fill="#9C73DF" fill-opacity="0.2"/>
+<path d="M43.1203 35.5H29.7687C28.7153 35.5 27.8613 36.3954 27.8613 37.5V44.5C27.8613 45.6046 28.7153 46.5 29.7687 46.5H43.1203C44.1737 46.5 45.0276 45.6046 45.0276 44.5V37.5C45.0276 36.3954 44.1737 35.5 43.1203 35.5Z" stroke="#9C73DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.6758 35.5V31.5C31.6758 30.1739 32.1782 28.9021 33.0724 27.9645C33.9667 27.0268 35.1795 26.5 36.4442 26.5C37.7089 26.5 38.9217 27.0268 39.816 27.9645C40.7102 28.9021 41.2126 30.1739 41.2126 31.5V35.5" stroke="#9C73DF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_10501_253">
+<rect width="72" height="72" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

dashboard/src/components/common/DialogProvider/DialogProvider.tsx

@@ -258,6 +258,7 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
           className: twMerge(
             'max-w-md w-full',
             dialogProps?.PaperProps?.className,
+            'z-30',
           ),
         }}
       >
@@ -288,10 +289,11 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
         open={drawerOpen}
         onClose={closeDrawerWithDirtyGuard}
         SlideProps={{ onExited: clearDrawerContent, unmountOnExit: false }}
+        className="z-40"
         PaperProps={{
           ...drawerProps?.PaperProps,
           className: twMerge(
-            'max-w-2.5xl w-full',
+            'max-w-4xl w-full',
             drawerProps?.PaperProps?.className,
           ),
         }}

dashboard/src/components/common/SelectOrg/SelectOrg.tsx

@@ -0,0 +1,137 @@
+
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Input } from '@/components/ui/v2/Input';
+import { List } from '@/components/ui/v2/List';
+import { ListItem } from '@/components/ui/v2/ListItem';
+import { Text } from '@/components/ui/v2/Text';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { } from '@/utils/__generated__/graphql';
+import { Divider } from '@mui/material';
+import debounce from 'lodash.debounce';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import type { ChangeEvent } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+
+export default function SelectOrganizationAndProject() {
+  const { orgs, loading } = useOrgs();
+  const router = useRouter();
+
+  const organizations = orgs.map((org) => ({
+    name: org.name,
+    value: `/orgs/${org.slug}`,
+  }));
+
+  const [filter, setFilter] = useState('');
+
+  const handleFilterChange = useMemo(
+    () =>
+      debounce((event: ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+      }, 200),
+    [],
+  );
+
+  useEffect(() => () => handleFilterChange.cancel(), [handleFilterChange]);
+
+  const goToOrgPage = async (org: {
+    name: string;
+    value: string;
+  }) => {
+    const { slug } = router.query;
+    await router.push({
+      pathname: `${org.value}/${
+        (() => {
+          if (!slug) {
+            return '';
+          }
+          return Array.isArray(slug) ? slug.join('/') : slug;
+        })()
+      }`,
+    });
+  };
+
+  const orgsToDisplay = filter
+    ? organizations.filter((org) =>
+        org.name.toLowerCase().includes(filter.toLowerCase()),
+      )
+    : organizations;
+
+  if (loading) {
+    return (
+      <div className="flex w-full justify-center">
+        <ActivityIndicator
+          delay={500}
+          label="Loading organizations..."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-start w-full h-full px-5 py-4 mx-auto bg-background">
+      <div className="mx-auto flex h-full w-full max-w-[760px] flex-col gap-4 py-6 sm:py-14">
+        <Text variant="h2" component="h1" className="">
+          Select an Organization
+        </Text>
+
+        <div>
+          <div className="mb-2 flex w-full">
+            <Input
+              placeholder="Search..."
+              onChange={handleFilterChange}
+              fullWidth
+              autoFocus
+            />
+          </div>
+          <RetryableErrorBoundary>
+            {orgsToDisplay.length === 0 ? (
+              <Box className="h-import py-2">
+                <Text variant="subtitle2">No results found.</Text>
+              </Box>
+            ) : (
+              <List className="h-import overflow-y-auto">
+                {orgsToDisplay.map((org, index) => (
+                  <Fragment key={org.value}>
+                    <ListItem.Root
+                      className="grid grid-flow-col justify-start gap-2  py-2.5"
+                      secondaryAction={
+                        <Button
+                          variant="borderless"
+                          color="primary"
+                          onClick={() => goToOrgPage(org)}
+                        >
+                          Select
+                        </Button>
+                      }
+                    >
+                      <ListItem.Avatar>
+                        <span className="inline-block h-6 w-6 overflow-hidden rounded-md">
+                          <Image
+                            src="/logos/new.svg"
+                            alt="Nhost Logo"
+                            width={24}
+                            height={24}
+                          />
+                        </span>
+                      </ListItem.Avatar>
+                      <ListItem.Text
+                        primary={org.name}
+                        secondary={`${org.name} / ${org.name}`}
+                      />
+                    </ListItem.Root>
+
+                    {index < orgs.length - 1 && <Divider component="li" />}
+                  </Fragment>
+                ))}
+              </List>
+            )}
+          </RetryableErrorBoundary>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/common/SelectOrg/index.ts

@@ -0,0 +1 @@
+export { default as SelectOrg } from './SelectOrg';

dashboard/src/components/common/SelectOrgAndProject/SelectOrgAndProject.tsx

@@ -0,0 +1,141 @@
+
+import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { Box } from '@/components/ui/v2/Box';
+import { Button } from '@/components/ui/v2/Button';
+import { Input } from '@/components/ui/v2/Input';
+import { List } from '@/components/ui/v2/List';
+import { ListItem } from '@/components/ui/v2/ListItem';
+import { Text } from '@/components/ui/v2/Text';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { } from '@/utils/__generated__/graphql';
+import { Divider } from '@mui/material';
+import debounce from 'lodash.debounce';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import type { ChangeEvent } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+
+export default function SelectOrganizationAndProject() {
+  const { orgs, loading } = useOrgs();
+  const router = useRouter();
+
+  const projects = orgs.flatMap((org) =>
+    org.apps.map((app) => ({
+      organizationName: org.name,
+      projectName: app.name,
+      value: `/orgs/${org.slug}/projects/${app.subdomain}`,
+    })),
+  );
+
+  const [filter, setFilter] = useState('');
+
+  const handleFilterChange = useMemo(
+    () =>
+      debounce((event: ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+      }, 200),
+    [],
+  );
+
+  useEffect(() => () => handleFilterChange.cancel(), [handleFilterChange]);
+
+  const goToProjectPage = async (project: {
+    organizationName: string;
+    projectName: string;
+    value: string;
+  }) => {
+    const { slug } = router.query;
+    await router.push({
+      pathname: `${project.value}/${
+        (() => {
+          if (!slug) {
+            return '';
+          }
+          return Array.isArray(slug) ? slug.join('/') : slug;
+        })()
+      }`,
+    });
+  };
+
+  const projectsToDisplay = filter
+    ? projects.filter((project) =>
+        project.projectName.toLowerCase().includes(filter.toLowerCase()),
+      )
+    : projects;
+
+  if (loading) {
+    return (
+      <div className="flex w-full justify-center">
+        <ActivityIndicator
+          delay={500}
+          label="Loading organizations and projects..."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-start w-full h-full px-5 py-4 mx-auto bg-background">
+      <div className="mx-auto flex h-full w-full max-w-[760px] flex-col gap-4 py-6 sm:py-14">
+        <Text variant="h2" component="h1" className="">
+          Select a Project
+        </Text>
+
+        <div>
+          <div className="mb-2 flex w-full">
+            <Input
+              placeholder="Search..."
+              onChange={handleFilterChange}
+              fullWidth
+              autoFocus
+            />
+          </div>
+          <RetryableErrorBoundary>
+            {projectsToDisplay.length === 0 ? (
+              <Box className="h-import py-2">
+                <Text variant="subtitle2">No results found.</Text>
+              </Box>
+            ) : (
+              <List className="h-import overflow-y-auto">
+                {projectsToDisplay.map((project, index) => (
+                  <Fragment key={project.value}>
+                    <ListItem.Root
+                      className="grid grid-flow-col justify-start gap-2  py-2.5"
+                      secondaryAction={
+                        <Button
+                          variant="borderless"
+                          color="primary"
+                          onClick={() => goToProjectPage(project)}
+                        >
+                          Select
+                        </Button>
+                      }
+                    >
+                      <ListItem.Avatar>
+                        <span className="inline-block h-6 w-6 overflow-hidden rounded-md">
+                          <Image
+                            src="/logos/new.svg"
+                            alt="Nhost Logo"
+                            width={24}
+                            height={24}
+                          />
+                        </span>
+                      </ListItem.Avatar>
+                      <ListItem.Text
+                        primary={project.projectName}
+                        secondary={`${project.organizationName} / ${project.projectName}`}
+                      />
+                    </ListItem.Root>
+
+                    {index < projects.length - 1 && <Divider component="li" />}
+                  </Fragment>
+                ))}
+              </List>
+            )}
+          </RetryableErrorBoundary>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/src/components/common/SelectOrgAndProject/index.ts

@@ -0,0 +1,2 @@
+
+export { default as SelectOrgAndProject } from './SelectOrgAndProject';

dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx

@@ -5,8 +5,9 @@ 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 { ChangePlanModal } from '@/features/projects/common/components/ChangePlanModal';
-import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
+import { TransferProjectDialog } from '@/features/orgs/components/common/TransferProjectDialog';
+import { useIsCurrentUserOwner } from '@/features/orgs/projects/common/hooks/useIsCurrentUserOwner';
+import { useState } from 'react';
 
 import Image from 'next/image';
 import { type ReactNode } from 'react';
@@ -20,22 +21,24 @@ export default function UpgradeToProBanner({
   title,
   description,
 }: UpgradeToProBannerProps) {
-  const { openDialog, openAlertDialog } = useDialog();
   const isOwner = useIsCurrentUserOwner();
+  const { openAlertDialog } = useDialog();
+  const [transferProjectDialogOpen, setTransferProjectDialogOpen] =
+    useState(false);
 
   return (
     <Box
       sx={{ backgroundColor: 'primary.light' }}
-      className="flex flex-col justify-between p-4 space-y-4 rounded-md lg:flex-row lg:items-center lg:space-y-0"
+      className="flex flex-col justify-between space-y-4 rounded-md p-4 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">
-          <div className="flex flex-col space-y-2 xs:flex-row xs:space-y-0 xs:space-x-2">
+          <div className="flex flex-col space-y-2 xs:flex-row xs:space-x-2 xs:space-y-0">
             <Text>Available with</Text>
             <div className="flex flex-row space-x-2">
               <NhostIcon />
               <Text sx={{ color: 'primary.main' }} className="font-semibold">
-                Nhost Pro
+                Nhost Pro & Team
               </Text>
             </div>
           </div>
@@ -47,23 +50,18 @@ export default function UpgradeToProBanner({
           )}
         </div>
 
-        <div className="flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-2">
+        <div className="flex flex-col gap-2 space-y-2 lg:flex-row lg:items-center lg:space-x-2 lg:space-y-0">
           <Button
-            className="rounded-md"
+            className="max-w-xs lg:w-auto"
             onClick={() => {
               if (isOwner) {
-                openDialog({
-                  component: <ChangePlanModal />,
-                  props: {
-                    PaperProps: { className: 'p-0 max-w-xl w-full' },
-                  },
-                });
+                setTransferProjectDialogOpen(true);
               } else {
                 openAlertDialog({
-                  title: "You can't upgrade this project",
+                  title: "You can't migrate this project",
                   payload: (
                     <Text variant="subtitle1" component="span">
-                      Ask an owner of this workspace to upgrade the project.
+                      Ask an owner of this organization to migrate the project.
                     </Text>
                   ),
                   props: {
@@ -74,20 +72,24 @@ export default function UpgradeToProBanner({
               }
             }}
           >
-            Upgrade to Pro
+            Transfer Project
           </Button>
+          <TransferProjectDialog
+            open={transferProjectDialogOpen}
+            setOpen={setTransferProjectDialogOpen}
+          />
           <Link
             href="https://nhost.io/pricing"
             target="_blank"
             rel="noopener noreferrer"
             underline="hover"
-            className="font-medium text-center"
+            className="text-center font-medium"
             sx={{
               color: 'text.secondary',
             }}
           >
             See all features
-            <ArrowSquareOutIcon className="w-4 h-4 ml-1" />
+            <ArrowSquareOutIcon className="ml-1 h-4 w-4" />
           </Link>
         </div>
       </div>
@@ -97,7 +99,8 @@ export default function UpgradeToProBanner({
         width={300}
         height={140}
         objectFit="contain"
-        alt='Upgrade to Pro illustration'
+        className=""
+        alt="Upgrade to Pro illustration"
       />
     </Box>
   );

dashboard/src/components/common/useMediaQuery/index.ts

@@ -0,0 +1 @@
+export { default as useMediaQuery } from './useMediaQuery';

dashboard/src/components/common/useMediaQuery/useMediaQuery.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import resolveConfig from 'tailwindcss/resolveConfig';
+// eslint-disable-next-line no-restricted-imports
+import tailwindConfig from '../../../../tailwind.config';
+
+const fullConfig = resolveConfig(tailwindConfig);
+
+const {
+  theme: { screens },
+} = fullConfig;
+
+const useMediaQuery = (query: keyof typeof screens): boolean => {
+  const [isMatch, setMatch] = useState<boolean>(false);
+
+  useEffect(() => {
+    // Ensure this runs only on the client side
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const mediaQuery = `(min-width: ${screens[query]})`;
+    const matchQueryList = window.matchMedia(mediaQuery);
+
+    const onChange = (e: MediaQueryListEvent) => setMatch(e.matches);
+
+    // Set initial value
+    setMatch(matchQueryList.matches);
+
+    // Listen for changes
+    matchQueryList.addEventListener('change', onChange);
+
+    // Clean up the listener on unmount
+    // eslint-disable-next-line consistent-return
+    return () => matchQueryList.removeEventListener('change', onChange);
+  }, [query]);
+
+  return isMatch;
+};
+
+export default useMediaQuery;

dashboard/src/components/form/CountrySelector/CountrySelector.tsx

@@ -29,7 +29,7 @@ export default function CountrySelector({
         listbox: { className: 'min-w-0 w-full' },
         popper: {
           disablePortal: false,
-          className: 'z-[10000] w-[270px] w-full',
+          className: 'z-[10000] w-[270px]',
         },
       }}
     >

dashboard/src/components/layout/AISidebar/AISidebar.tsx

@@ -20,8 +20,7 @@ interface AINavLinkProps extends ListItemButtonProps {
    */
   href: string;
   /**
-   * Determines whether or not the link should be active if it's href exactly
-   * matches the current route.
+   * Determines whether or not the link should be active if href matches the current route.
    *
    * @default true
    */
@@ -87,7 +86,7 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
     <>
       <Backdrop
         open={expanded}
-        className="absolute top-0 left-0 bottom-0 right-0 z-[34] md:hidden"
+        className="absolute bottom-0 left-0 right-0 top-0 z-[34] md:hidden"
         role="button"
         tabIndex={-1}
         onClick={() => setExpanded(false)}
@@ -104,7 +103,7 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
       <Box
         component="aside"
         className={twMerge(
-          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pt-2 pb-17 motion-safe:transition-transform md:relative md:z-0 md:h-full md:py-2.5 md:transition-none',
+          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pb-17 pt-2 motion-safe:transition-transform md:relative md:z-0 md:h-full md:py-2.5 md:transition-none',
           expanded ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
           className,
         )}
@@ -119,6 +118,7 @@ export default function AISidebar({ className, ...props }: AISidebarProps) {
             >
               Auto-Embeddings
             </AINavLink>
+
             <AINavLink href="/assistants" exact={false} onClick={handleSelect}>
               Assistants
             </AINavLink>

dashboard/src/components/layout/AuthenticatedLayout/AuthenticatedLayout.tsx

@@ -3,42 +3,42 @@ import type { BaseLayoutProps } from '@/components/layout/BaseLayout';
 import { BaseLayout } from '@/components/layout/BaseLayout';
 import { Container } from '@/components/layout/Container';
 import { Header } from '@/components/layout/Header';
+import { MainNav } from '@/components/layout/MainNav';
+import { useTreeNavState } from '@/components/layout/MainNav/TreeNavStateContext';
 import { HighlightedText } from '@/components/presentational/HighlightedText';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
 import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
 import { Link } from '@/components/ui/v2/Link';
 import { Text } from '@/components/ui/v2/Text';
-import { useIsHealthy } from '@/features/projects/common/hooks/useIsHealthy';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
 import { useAuthenticationStatus } from '@nhost/nextjs';
+
+import { useMediaQuery } from '@/components/common/useMediaQuery';
+import PinnedMainNav from '@/components/layout/MainNav/PinnedMainNav';
+import { OrgStatus } from '@/features/orgs/components/OrgStatus';
+import { useIsHealthy } from '@/features/orgs/projects/common/hooks/useIsHealthy';
+import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoundRedirect';
+import { cn } from '@/lib/utils';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import type { DetailedHTMLProps, HTMLProps } from 'react';
-import { useEffect } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { useEffect, useState } from 'react';
 
-export interface AuthenticatedLayoutProps extends BaseLayoutProps {
-  /**
-   * Props passed to the internal content container.
-   */
-  contentContainerProps?: DetailedHTMLProps<
-    HTMLProps<HTMLDivElement>,
-    HTMLDivElement
-  >;
-}
+export interface AuthenticatedLayoutProps extends BaseLayoutProps {}
 
 export default function AuthenticatedLayout({
   children,
-  contentContainerProps: {
-    className: contentContainerClassName,
-    ...contentContainerProps
-  } = {},
   ...props
 }: AuthenticatedLayoutProps) {
   const router = useRouter();
   const isPlatform = useIsPlatform();
+  const isMdOrLarger = useMediaQuery('md');
+
   const { isAuthenticated, isLoading } = useAuthenticationStatus();
   const isHealthy = useIsHealthy();
+  const [mainNavContainer, setMainNavContainer] = useState(null);
+  const { mainNavPinned } = useTreeNavState();
+
+  useNotFoundRedirect();
 
   useEffect(() => {
     if (!isPlatform || isLoading || isAuthenticated) {
@@ -54,13 +54,13 @@ export default function AuthenticatedLayout({
     }
 
     if (
-      router.query.workspaceSlug === 'local' &&
-      router.query.appSlug === 'local'
+      router.query.orgSlug === 'local' &&
+      router.query.appSubdomain === 'local'
     ) {
       return;
     }
 
-    router.push('/local/local');
+    router.push('/orgs/local/projects/local');
   }, [isPlatform, router]);
 
   if (isPlatform && isLoading) {
@@ -116,21 +116,40 @@ export default function AuthenticatedLayout({
 
   return (
     <BaseLayout className="flex h-full flex-col" {...props}>
-      <Header className="flex max-h-[59px] flex-auto" />
+      <Header className="flex py-1" />
 
-      <InviteNotification />
+      <div
+        className="relative flex h-full flex-row overflow-hidden"
+        ref={setMainNavContainer}
+      >
+        {mainNavPinned && isMdOrLarger && <PinnedMainNav />}
 
-      <RetryableErrorBoundary errorMessageProps={{ className: 'pt-20' }}>
         <div
-          className={twMerge(
-            'relative flex flex-auto overflow-x-hidden',
-            contentContainerClassName,
+          className={cn(
+            'relative flex h-full w-full flex-row bg-accent',
+            mainNavPinned && isMdOrLarger ? 'overflow-x-auto' : '',
           )}
-          {...contentContainerProps}
         >
-          {children}
+          {(!mainNavPinned || !isMdOrLarger) && (
+            <div className="flex h-full w-6 justify-center">
+              <MainNav container={mainNavContainer} />
+            </div>
+          )}
+
+          <RetryableErrorBoundary
+            errorMessageProps={{
+              className: 'flex flex-col items-center',
+            }}
+          >
+            <div className="flex h-full w-full flex-col overflow-auto">
+              <OrgStatus />
+              {children}
+            </div>
+          </RetryableErrorBoundary>
+
+          <InviteNotification />
         </div>
-      </RetryableErrorBoundary>
+      </div>
     </BaseLayout>
   );
 }

dashboard/src/components/layout/Container/Container.tsx

@@ -16,9 +16,9 @@ export default function Container({
   ...props
 }: ContainerProps) {
   return (
-    <Box className={twMerge('mx-auto w-full', rootClassName)}>
+    <Box className={twMerge('mx-auto w-full', rootClassName)} {...props}>
       <Box
-        className={twMerge('mx-auto max-w-7xl px-5 pt-6 pb-20', className)}
+        className={twMerge('mx-auto max-w-7xl px-5 py-4', className)}
         {...props}
       >
         {children}

dashboard/src/components/layout/Header/BreadcrumbComboBox.tsx

@@ -0,0 +1,109 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { cn } from '@/lib/utils';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useState, type ReactNode } from 'react';
+
+type BreadCrumbComboBoxItem<T> = {
+  label: string | ReactNode;
+  value: string | T;
+};
+
+interface BreadCrumbComboBoxProps<T> {
+  selectedValue?: T;
+  options: BreadCrumbComboBoxItem<T>[];
+  renderItem?: (item: T) => ReactNode;
+  onChange?: (item: BreadCrumbComboBoxItem<T>) => void;
+  filter?: (value: string, search: string) => number;
+}
+
+export default function BreadCrumbComboBox<T>({
+  selectedValue,
+  options,
+  renderItem,
+  onChange,
+  filter,
+}: BreadCrumbComboBoxProps<T>) {
+  const [open, setOpen] = useState(false);
+  const [selectedItem, setSelectedItem] =
+    useState<BreadCrumbComboBoxItem<T> | null>(
+      options.find((option) => option.value === selectedValue) || null,
+    );
+
+  const renderSelectedItem = (item: BreadCrumbComboBoxItem<T>) => {
+    if (typeof item.value === 'string') {
+      return typeof item.label === 'string' ? (
+        <span className="text-foreground">{item.label}</span>
+      ) : (
+        item.label
+      );
+    }
+    return renderItem ? renderItem(item.value) : null;
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="justify-start text-foreground"
+        >
+          <div className="flex flex-row items-center justify-center gap-1">
+            {selectedItem && renderSelectedItem(selectedItem)}
+            <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command filter={filter}>
+          <CommandInput placeholder="Search..." autoFocus />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option, index) => (
+                <CommandItem
+                  key={`${
+                    typeof option.value === 'string' ? option.value : index
+                  }`}
+                  value={
+                    typeof option.value === 'string' ? option.value : `${index}`
+                  }
+                  onSelect={() => {
+                    setSelectedItem(option);
+                    setOpen(false);
+                    onChange?.(option);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedItem?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  {typeof option.value === 'string'
+                    ? option.label
+                    : renderItem && renderItem(option.value)}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

dashboard/src/components/layout/Header/BreadcrumbNav.tsx

@@ -0,0 +1,91 @@
+import { Slash } from 'lucide-react';
+import { useMemo } from 'react';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '@/components/ui/v3/breadcrumb';
+import { useRouter } from 'next/router';
+import OrgPagesComboBox from './OrgPagesComboBox';
+import OrgsComboBox from './OrgsComboBox';
+import ProjectPagesComboBox from './ProjectPagesComboBox';
+import ProjectsComboBox from './ProjectsComboBox';
+import ProjectSettingsPagesComboBox from './ProjectSettingsPagesComboBox';
+
+export default function BreadcrumbNav() {
+  const { query, asPath, route } = useRouter();
+
+  // Extract orgSlug and appSubdomain from router.query
+  const { appSubdomain, workspaceSlug } = query;
+
+  // Extract path segments from the URL
+  const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
+
+  // Identify project and settings pages based on the URL pattern
+  const projectPage = pathSegments[3] || null;
+  const isSettingsPage = pathSegments[5] === 'settings';
+
+  const showBreadcrumbs =
+    !workspaceSlug && !['/', '/orgs/verify'].includes(route);
+
+  return (
+    <Breadcrumb className="mt-2 flex w-full flex-row flex-nowrap overflow-x-auto lg:mt-0 lg:overflow-visible">
+      <BreadcrumbList className="flex-nowrap">
+        <BreadcrumbSeparator>
+          <Slash strokeWidth={3.5} className="text-muted-foreground/50" />
+        </BreadcrumbSeparator>
+
+        <BreadcrumbItem>
+          <OrgsComboBox />
+        </BreadcrumbItem>
+
+        {showBreadcrumbs && (
+          <>
+            <BreadcrumbSeparator>
+              <Slash strokeWidth={3.5} className="text-muted-foreground/50" />
+            </BreadcrumbSeparator>
+
+            {projectPage && <OrgPagesComboBox />}
+          </>
+        )}
+
+        {showBreadcrumbs && appSubdomain && (
+          <>
+            <BreadcrumbSeparator>
+              <Slash strokeWidth={3.5} className="text-muted-foreground/50" />
+            </BreadcrumbSeparator>
+
+            <BreadcrumbItem>
+              <ProjectsComboBox />
+            </BreadcrumbItem>
+
+            <BreadcrumbSeparator>
+              <Slash strokeWidth={3.5} className="text-muted-foreground/50" />
+            </BreadcrumbSeparator>
+
+            <BreadcrumbItem>
+              <ProjectPagesComboBox />
+            </BreadcrumbItem>
+
+            {isSettingsPage && (
+              <>
+                <BreadcrumbSeparator>
+                  <Slash
+                    strokeWidth={3.5}
+                    className="text-muted-foreground/50"
+                  />
+                </BreadcrumbSeparator>
+
+                <BreadcrumbItem>
+                  <ProjectSettingsPagesComboBox />
+                </BreadcrumbItem>
+              </>
+            )}
+          </>
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

dashboard/src/components/layout/Header/Header.tsx

@@ -1,27 +1,25 @@
-import { ContactUs } from '@/components/common/ContactUs';
 import { useDialog } from '@/components/common/DialogProvider';
 import { NavLink } from '@/components/common/NavLink';
 import { AccountMenu } from '@/components/layout/AccountMenu';
-import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
 import { LocalAccountMenu } from '@/components/layout/LocalAccountMenu';
 import { MobileNav } from '@/components/layout/MobileNav';
 import { Logo } from '@/components/presentational/Logo';
 import { Box } from '@/components/ui/v2/Box';
-import { Button } from '@/components/ui/v2/Button';
-import { Chip } from '@/components/ui/v2/Chip';
-import { Dropdown } from '@/components/ui/v2/Dropdown';
 import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
-import { DevAssistant } from '@/features/ai/DevAssistant';
+import { Button } from '@/components/ui/v3/button';
+import { DevAssistant as WorkspaceProjectDevAssistant } from '@/features/ai/DevAssistant';
+import { AnnouncementsTray } from '@/features/orgs/components/members/components/AnnouncementsTray';
+import { NotificationsTray } from '@/features/orgs/components/members/components/NotificationsTray';
+import { DevAssistant } from '@/features/orgs/projects/ai/DevAssistant';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 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';
-import { useRouter } from 'next/router';
 import type { DetailedHTMLProps, HTMLProps, PropsWithoutRef } from 'react';
-import { useEffect } from 'react';
 import { toast } from 'react-hot-toast';
 import { twMerge } from 'tailwind-merge';
+import BreadcrumbNav from './BreadcrumbNav';
 
 export interface HeaderProps
   extends PropsWithoutRef<
@@ -29,38 +27,15 @@ export interface HeaderProps
   > {}
 
 export default function Header({ className, ...props }: HeaderProps) {
-  const router = useRouter();
-
   const isPlatform = useIsPlatform();
-
   const { openDrawer } = useDialog();
-
-  const { currentProject, refetch: refetchProject } =
-    useCurrentWorkspaceAndProject();
-
-  const isOwner = useIsCurrentUserOwner();
-
-  const isProjectUpdating =
-    currentProject?.appStates[0]?.stateId === ApplicationStatus.Updating;
-
-  // Poll for project updates
-  useEffect(() => {
-    if (!isProjectUpdating) {
-      return () => {};
-    }
-
-    const interval = setInterval(async () => {
-      await refetchProject();
-    }, 5000);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [isProjectUpdating, refetchProject]);
+  const { project } = useProject();
+  const { currentProject: workspaceProject } = useCurrentWorkspaceAndProject();
+  const { currentOrg: org } = useOrgs();
 
   const openDevAssistant = () => {
     // The dev assistant can be only answer questions related to a particular project
-    if (!currentProject) {
+    if (!project && !workspaceProject) {
       toast.error('You need to be inside a project to open the Assistant', {
         style: getToastStyleProps().style,
         ...getToastStyleProps().error,
@@ -69,61 +44,62 @@ export default function Header({ className, ...props }: HeaderProps) {
       return;
     }
 
-    openDrawer({
-      title: <GraphiteIcon />,
-      component: <DevAssistant />,
-    });
+    if (org && project) {
+      openDrawer({
+        title: <GraphiteIcon />,
+        component: <DevAssistant />,
+      });
+    } else {
+      openDrawer({
+        title: <GraphiteIcon />,
+        component: <WorkspaceProjectDevAssistant />,
+      });
+    }
   };
 
   return (
     <Box
       component="header"
       className={twMerge(
-        'z-40 grid w-full transform-gpu grid-flow-col items-center justify-between gap-2 border-b-1 px-4 py-3',
+        'relative z-40 grid w-full transform-gpu grid-flow-col items-center justify-between gap-2 border-b px-4',
         className,
       )}
       sx={{ backgroundColor: 'background.paper' }}
       {...props}
     >
-      <div className="grid grid-flow-col items-center gap-3">
-        <NavLink href="/" className="w-12">
-          <Logo className="mx-auto cursor-pointer" />
-        </NavLink>
-
-        {(router.query.workspaceSlug || router.query.appSlug) && (
-          <Breadcrumbs aria-label="Workspace breadcrumbs" />
-        )}
-
-        {isProjectUpdating && (
-          <Chip size="small" label="Updating" color="warning" />
-        )}
+      <div className="mr-2 h-6 w-6">
+        <Logo className="mx-auto h-6 w-6 cursor-pointer" />
       </div>
 
-      <div className="hidden grid-flow-col items-center gap-2 sm:grid">
-        <Button className="rounded-full" onClick={openDevAssistant}>
-          <GraphiteIcon />
+      <BreadcrumbNav />
+
+      <div className="hidden grid-flow-col items-center gap-1 sm:grid">
+        <Button
+          variant="outline"
+          className="h-8 w-8"
+          onClick={openDevAssistant}
+        >
+          <GraphiteIcon className="h-4" />
         </Button>
 
-        {isPlatform && (
-          <Dropdown.Root>
-            <Dropdown.Trigger
-              hideChevron
-              className="rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
-            >
-              Contact us
-            </Dropdown.Trigger>
+        <NotificationsTray />
 
-            <Dropdown.Content
-              transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-            >
-              <ContactUs
-                className="max-w-md"
-                isTeam={currentProject?.plan?.name === 'Team'}
-                isOwner={isOwner}
-              />
-            </Dropdown.Content>
-          </Dropdown.Root>
+        <AnnouncementsTray />
+
+        {isPlatform && (
+          <NavLink
+            underline="none"
+            href="/support"
+            className="mr-1 rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
+            sx={{
+              color: 'text.primary',
+              '&:hover': { backgroundColor: 'grey.200' },
+            }}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Support
+          </NavLink>
         )}
 
         <NavLink

dashboard/src/components/layout/Header/OrgPagesComboBox.tsx

@@ -0,0 +1,116 @@
+import { Button } from '@/components/ui/v3/button';
+import { cn } from '@/lib/utils';
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+
+import { useRouter } from 'next/router';
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+const orgPages = [
+  { label: 'Settings', value: 'settings' },
+  { label: 'Projects', value: 'projects' },
+  { label: 'Members', value: 'members' },
+  { label: 'Billing', value: 'billing' },
+];
+
+export default function OrgPagesComboBox() {
+  const {
+    query: { orgSlug },
+    push,
+    asPath,
+  } = useRouter();
+
+  const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
+  const orgPageFromUrl = pathSegments[3] || null;
+
+  const selectedOrgPageFromUrl = orgPages.find(
+    (item) => item.value === orgPageFromUrl,
+  );
+
+  const [selectedOrgPage, setSelectedOrgPage] = useState<Option | null>(null);
+
+  useEffect(() => {
+    if (selectedOrgPageFromUrl) {
+      setSelectedOrgPage(selectedOrgPageFromUrl);
+    }
+  }, [selectedOrgPageFromUrl]);
+
+  const options: Option[] = orgPages.map((page) => ({
+    label: page.label,
+    value: page.value,
+  }));
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+        >
+          {selectedOrgPage ? (
+            <div>{selectedOrgPage.label}</div>
+          ) : (
+            <>Select a page</>
+          )}
+          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command>
+          <CommandInput placeholder="Select a page..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  onSelect={() => {
+                    setSelectedOrgPage(option);
+                    setOpen(false);
+                    push(`/orgs/${orgSlug}/${option.value}`);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedOrgPage?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <div className="flex flex-row items-center gap-2">
+                    <span className="truncate max-w-52">{option.label}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

dashboard/src/components/layout/Header/OrgsComboBox.tsx

@@ -0,0 +1,206 @@
+import { Badge } from '@/components/ui/v3/badge';
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/v3/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
+import { cn } from '@/lib/utils';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+  plan: string;
+  type: 'organization' | 'workspace';
+};
+
+export default function OrgsComboBox() {
+  const { orgs } = useOrgs();
+  const isPlatform = useIsPlatform();
+  const { workspaces } = useWorkspaces();
+  const [, setLastSlug] = useSSRLocalStorage('slug', null);
+
+  const {
+    query: { orgSlug, workspaceSlug },
+    push,
+  } = useRouter();
+
+  const selectedOrgFromUrl =
+    Boolean(orgSlug) && orgs.find((item) => item.slug === orgSlug);
+  const selectedWorkspaceFromUrl =
+    Boolean(workspaceSlug) &&
+    workspaces.find((item) => item.slug === workspaceSlug);
+
+  const [selectedItem, setSelectedItem] = useState<Option | null>(null);
+
+  useEffect(() => {
+    const selectedItemFromUrl = selectedOrgFromUrl || selectedWorkspaceFromUrl;
+
+    if (selectedItemFromUrl) {
+      setSelectedItem({
+        label: selectedItemFromUrl.name,
+        value: selectedItemFromUrl.slug,
+        plan: selectedOrgFromUrl ? selectedOrgFromUrl.plan.name : 'Legacy',
+        type: selectedOrgFromUrl ? 'organization' : 'workspace',
+      });
+    }
+  }, [selectedOrgFromUrl, selectedWorkspaceFromUrl]);
+
+  const orgsOptions: Option[] = orgs.map((org) => ({
+    label: org.name,
+    value: org.slug,
+    plan: org.plan.name,
+    type: 'organization',
+  }));
+
+  const workspacesOptions: Option[] = workspaces.map((workspace) => ({
+    label: workspace.name,
+    value: workspace.slug,
+    plan: 'Legacy',
+    type: 'workspace',
+  }));
+
+  const [open, setOpen] = useState(false);
+
+  const renderBadge = (plan: string) => {
+    if (!isPlatform) {
+      return null;
+    }
+
+    return (
+      <Badge
+        variant={plan === 'Starter' ? 'outline' : 'default'}
+        className={cn(
+          plan === 'Starter' ? 'bg-muted' : '',
+          plan === 'Legacy'
+            ? 'bg-orange-200 text-foreground hover:bg-orange-200 dark:bg-orange-500'
+            : '',
+          'hover:none ml-2 h-5 px-[6px] text-[10px]',
+        )}
+      >
+        {plan}
+      </Badge>
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="justify-between w-full gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+        >
+          {selectedItem ? (
+            <div className="flex flex-row items-center justify-center">
+              {selectedItem.label}
+              {renderBadge(selectedItem.plan)}
+            </div>
+          ) : (
+            'Select organization / workspace'
+          )}
+          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command>
+          <CommandInput placeholder="Select organization..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Organizations">
+              {orgsOptions.map((option) => (
+                <CommandItem
+                  keywords={[option.label]}
+                  key={option.value}
+                  value={option.value}
+                  className="flex items-center text-foreground dark:hover:bg-muted"
+                  onSelect={() => {
+                    setSelectedItem(option);
+                    setOpen(false);
+
+                    // persist last slug in local storage
+                    setLastSlug(option.value);
+
+                    if (option.type === 'organization') {
+                      push(`/orgs/${option.value}/projects`);
+                    } else {
+                      push(`/${option.value}`);
+                    }
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedItem?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <span className="w-full truncate">{option.label}</span>
+                  {renderBadge(option.plan)}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+
+            {workspaces.length > 0 && (
+              <>
+                <CommandSeparator />
+
+                <CommandGroup heading="Workspaces">
+                  {workspacesOptions.map((option) => (
+                    <CommandItem
+                      keywords={[option.label]}
+                      key={option.value}
+                      value={option.value}
+                      className="flex items-center text-foreground dark:hover:bg-muted"
+                      onSelect={() => {
+                        setSelectedItem(option);
+                        setOpen(false);
+
+                        // persist last slug in local storage
+                        setLastSlug(option.value);
+
+                        if (option.type === 'organization') {
+                          push(`/orgs/${option.value}/projects`);
+                        } else {
+                          push(`/${option.value}`);
+                        }
+                      }}
+                    >
+                      <Check
+                        className={cn(
+                          'mr-2 h-4 w-4',
+                          selectedItem?.value === option.value
+                            ? 'opacity-100'
+                            : 'opacity-0',
+                        )}
+                      />
+                      <span className="w-full truncate">{option.label}</span>
+                      {renderBadge(option.plan)}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

dashboard/src/components/layout/Header/ProjectPagesComboBox.tsx

@@ -0,0 +1,219 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+
+import {
+  Check,
+  ChevronsUpDown,
+  CloudIcon,
+  CogIcon,
+  DatabaseIcon,
+  FileTextIcon,
+  GaugeIcon,
+  HomeIcon,
+  RocketIcon,
+  UserIcon,
+} from 'lucide-react';
+
+import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
+import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
+import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
+import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
+import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { cn } from '@/lib/utils';
+import { useRouter } from 'next/router';
+import { useEffect, useMemo, useState, type ReactElement } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+  icon: ReactElement;
+};
+
+const projectPages = [
+  {
+    label: 'Overview',
+    value: 'overview',
+    icon: <HomeIcon className="w-4 h-4" />,
+    slug: '',
+  },
+  {
+    label: 'Database',
+    value: 'database',
+    icon: <DatabaseIcon className="w-4 h-4" />,
+    slug: '/database/browser/default',
+  },
+  {
+    label: 'GraphQL',
+    value: 'graphql',
+    icon: <GraphQLIcon className="w-4 h-4" />,
+    slug: 'graphql',
+  },
+  {
+    label: 'Hasura',
+    value: 'hasura',
+    icon: <HasuraIcon className="w-4 h-4" />,
+    slug: 'hasura',
+  },
+  {
+    label: 'Auth',
+    value: 'users',
+    icon: <UserIcon className="w-4 h-4" />,
+    slug: 'users',
+  },
+  {
+    label: 'Storage',
+    value: 'storage',
+    icon: <StorageIcon className="w-4 h-4" />,
+    slug: 'storage',
+  },
+  {
+    label: 'Run',
+    value: 'run',
+    icon: <ServicesIcon className="w-4 h-4" />,
+    slug: 'run',
+  },
+  {
+    label: 'AI',
+    value: 'ai',
+    icon: <AIIcon className="w-4 h-4" />,
+    slug: 'ai/auto-embeddings',
+  },
+  {
+    label: 'Deployments',
+    value: 'deployments',
+    icon: <RocketIcon className="w-4 h-4" />,
+    slug: 'deployments',
+  },
+  {
+    label: 'Backups',
+    value: 'backups',
+    icon: <CloudIcon className="w-4 h-4" />,
+    slug: 'backups',
+  },
+  {
+    label: 'Logs',
+    value: 'logs',
+    icon: <FileTextIcon className="w-4 h-4" />,
+    slug: 'logs',
+  },
+  {
+    label: 'Metrics',
+    value: 'metrics',
+    icon: <GaugeIcon className="w-4 h-4" />,
+    slug: 'metrics',
+  },
+  {
+    label: 'Settings',
+    value: 'settings',
+    icon: <CogIcon className="w-4 h-4" />,
+    slug: 'settings',
+  },
+];
+
+export default function ProjectPagesComboBox() {
+  const {
+    query: { orgSlug, appSubdomain },
+    push,
+    asPath,
+  } = useRouter();
+
+  const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
+  const projectPageFromUrl = appSubdomain
+    ? pathSegments[5] || 'overview'
+    : null;
+  const selectedProjectPageFromUrl = projectPages.find(
+    (item) => item.value === projectPageFromUrl,
+  );
+  const [selectedProjectPage, setSelectedProjectPage] = useState<Option | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (selectedProjectPageFromUrl) {
+      setSelectedProjectPage({
+        label: selectedProjectPageFromUrl.label,
+        value: selectedProjectPageFromUrl.slug,
+        icon: selectedProjectPageFromUrl.icon,
+      });
+    }
+  }, [selectedProjectPageFromUrl]);
+
+  const options: Option[] = projectPages.map((app) => ({
+    label: app.label,
+    value: app.slug,
+    icon: app.icon,
+  }));
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+        >
+          {selectedProjectPage ? (
+            <div className="flex flex-row items-center justify-center gap-2">
+              {selectedProjectPage.icon}
+              {selectedProjectPage.label}
+            </div>
+          ) : (
+            <>Select a page</>
+          )}
+          <ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command>
+          <CommandInput placeholder="Select a page..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  onSelect={() => {
+                    setSelectedProjectPage(option);
+                    setOpen(false);
+                    push(
+                      `/orgs/${orgSlug}/projects/${appSubdomain}/${option.value}`,
+                    );
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedProjectPage?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <div className="flex flex-row items-center gap-2">
+                    {option.icon}
+                    <span className="truncate max-w-52">{option.label}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

dashboard/src/components/layout/Header/ProjectSettingsPagesComboBox.tsx

@@ -0,0 +1,174 @@
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { cn } from '@/lib/utils';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useMemo, useState } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+  route: string;
+};
+
+const projectSettingsPages = [
+  { name: 'General', slug: 'general', route: '' },
+  {
+    name: 'Compute Resources',
+    slug: 'compute-resources',
+    route: 'compute-resources',
+  },
+  { name: 'Database', slug: 'database', route: 'database' },
+  { name: 'Hasura', slug: 'hasura', route: 'hasura' },
+  {
+    name: 'Authentication',
+    slug: 'authentication',
+    route: 'authentication',
+  },
+  {
+    name: 'JWT',
+    slug: 'jwt',
+    route: 'jwt',
+  },
+  {
+    name: 'Sign-In methods',
+    slug: 'sign-in-methods',
+    route: 'sign-in-methods',
+  },
+  { name: 'Storage', slug: 'storage', route: 'storage' },
+  {
+    name: 'Roles and Permissions',
+    slug: 'roles-and-permissions',
+    route: 'roles-and-permissions',
+  },
+  { name: 'SMTP', slug: 'smtp', route: 'smtp' },
+  { name: 'Git', slug: 'git', route: 'git' },
+  {
+    name: 'Environment Variables',
+    slug: 'environment-variables',
+    route: 'environment-variables',
+  },
+  { name: 'Secrets', slug: 'secrets', route: 'secrets' },
+  {
+    name: 'Custom Domains',
+    slug: 'custom-domains',
+    route: 'custom-domains',
+  },
+  {
+    name: 'Rate Limiting',
+    slug: 'rate-limiting',
+    route: 'rate-limiting',
+  },
+  { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Observability', slug: 'metrics', route: 'metrics' },
+  { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
+].map((item) => ({
+  label: item.name,
+  value: item.slug,
+  route: item.route,
+}));
+
+export default function ProjectSettingsPagesComboBox() {
+  const {
+    query: { orgSlug, appSubdomain },
+    push,
+    asPath,
+  } = useRouter();
+
+  const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
+  const isSettingsPage = pathSegments.includes('settings');
+  const settingsPageFromUrl = isSettingsPage
+    ? pathSegments[6] || 'general'
+    : null;
+
+  const selectedSettingsPageFromUrl = projectSettingsPages.find(
+    (item) => item.value === settingsPageFromUrl,
+  );
+  const [selectedSettingsPage, setSelectedSettingsPage] =
+    useState<Option | null>(null);
+
+  useEffect(() => {
+    if (selectedSettingsPageFromUrl) {
+      setSelectedSettingsPage({
+        label: selectedSettingsPageFromUrl.label,
+        value: selectedSettingsPageFromUrl.value,
+        route: selectedSettingsPageFromUrl.route,
+      });
+    }
+  }, [selectedSettingsPageFromUrl]);
+
+  const options: Option[] = projectSettingsPages.map((page) => ({
+    label: page.label,
+    value: page.value,
+    route: page.route,
+  }));
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+        >
+          {selectedSettingsPage ? (
+            <div>{selectedSettingsPage.label}</div>
+          ) : (
+            <>Select a page</>
+          )}
+          <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command>
+          <CommandInput placeholder="Select a page..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.label}
+                  onSelect={() => {
+                    setSelectedSettingsPage(option);
+                    setOpen(false);
+                    push(
+                      `/orgs/${orgSlug}/projects/${appSubdomain}/settings/${option.route}/`,
+                    );
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedSettingsPage?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <div className="flex flex-row items-center gap-2">
+                    <span className="max-w-52 truncate">{option.label}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

dashboard/src/components/layout/Header/ProjectStatus.tsx

@@ -0,0 +1,41 @@
+import { Chip } from '@/components/ui/v2/Chip';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
+import { ApplicationStatus } from '@/types/application';
+import { useEffect } from 'react';
+
+export default function ProjectStatus() {
+  const { project, refetch: refetchProject } = useProject();
+
+  const isProjectUpdating =
+    project?.appStates[0]?.stateId === ApplicationStatus.Updating;
+
+  const isProjectMigratingDatabase =
+    project?.appStates[0]?.stateId === ApplicationStatus.Migrating;
+
+  // Poll for project updates
+  useEffect(() => {
+    if (!isProjectUpdating && !isProjectMigratingDatabase) {
+      return () => {};
+    }
+
+    const interval = setInterval(async () => {
+      await refetchProject();
+    }, 5000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [isProjectUpdating, isProjectMigratingDatabase, refetchProject]);
+
+  if (isProjectUpdating) {
+    return <Chip size="small" label="Updating" color="warning" />;
+  }
+
+  if (isProjectMigratingDatabase) {
+    return (
+      <Chip size="small" label="Upgrading Postgres version" color="warning" />
+    );
+  }
+
+  return null;
+}

dashboard/src/components/layout/Header/ProjectsComboBox.tsx

@@ -0,0 +1,119 @@
+import ProjectStatus from '@/components/layout/Header/ProjectStatus';
+import { Button } from '@/components/ui/v3/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/v3/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/v3/popover';
+import { ProjectStatusIndicator } from '@/features/orgs/components/common/ProjectStatusIndicator';
+import { useAppState } from '@/features/orgs/projects/common/hooks/useAppState';
+import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
+import { cn } from '@/lib/utils';
+import { Box, Check, ChevronsUpDown } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+export default function ProjectsComboBox() {
+  const {
+    query: { appSubdomain },
+    push,
+  } = useRouter();
+
+  const { state: appState } = useAppState();
+  const { currentOrg: { slug: orgSlug, apps = [] } = {} } = useOrgs();
+
+  const [selectedProject, setSelectedProject] = useState<Option | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const options: Option[] = apps.map((app) => ({
+    label: app.name,
+    value: app.subdomain,
+  }));
+
+  const selectedProjectFromUrl = apps.find(
+    (app) => app.subdomain === appSubdomain,
+  );
+
+  useEffect(() => {
+    if (selectedProjectFromUrl) {
+      setSelectedProject({
+        label: selectedProjectFromUrl.name,
+        value: selectedProjectFromUrl.subdomain,
+      });
+    }
+  }, [selectedProjectFromUrl]);
+
+  const handleProjectSelect = (option: Option) => {
+    setSelectedProject(option);
+    setOpen(false);
+    push(`/orgs/${orgSlug}/projects/${option.value}`);
+  };
+
+  return (
+    <div className="flex items-center gap-1">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
+          >
+            {selectedProject ? (
+              <div className="flex items-center gap-2">
+                <ProjectStatusIndicator status={appState} />
+                {selectedProject.label}
+                <ProjectStatus />
+              </div>
+            ) : (
+              <>Select a project</>
+            )}
+            <ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0" side="bottom" align="start">
+          <Command>
+            <CommandInput placeholder="Select a project..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    onSelect={() => handleProjectSelect(option)}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        selectedProject?.value === option.value
+                          ? 'opacity-100'
+                          : 'opacity-0',
+                      )}
+                    />
+                    <div className="flex items-center gap-1">
+                      <Box className="h-4 w-4" />
+                      <span className="max-w-52 truncate">{option.label}</span>
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

dashboard/src/components/layout/Header/index.ts

@@ -1,2 +1,3 @@
+export { default as BreadcrumbNav } from './BreadcrumbNav';
 export * from './Header';
 export { default as Header } from './Header';

dashboard/src/components/layout/MainNav/MainNav.tsx

@@ -0,0 +1,110 @@
+import { Button } from '@/components/ui/v3/button';
+import { Separator } from '@/components/ui/v3/separator';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/v3/sheet';
+import CreateOrgDialog from '@/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog';
+import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
+import { Menu, Pin, PinOff, X } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import NavTree from './NavTree';
+import { useTreeNavState } from './TreeNavStateContext';
+import WorkspacesNavTree from './WorkspacesNavTree';
+
+interface MainNavProps {
+  container: HTMLElement;
+}
+
+export default function MainNav({ container }: MainNavProps) {
+  const { asPath } = useRouter();
+  const { workspaces } = useWorkspaces();
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+  const { open, setOpen, mainNavPinned, setMainNavPinned } = useTreeNavState();
+
+  const scrollToCurrentPath = () => {
+    requestAnimationFrame(() => {
+      const element = document.querySelector(`a[href="${asPath}"]`);
+      if (element && scrollContainerRef.current) {
+        element.scrollIntoView({ block: 'center' });
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (open) {
+      scrollToCurrentPath();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <div
+        className="min- absolute left-0 z-50 flex h-full w-6 justify-center border-r-[1px] bg-background pt-1 hover:bg-accent"
+        onMouseEnter={() => setOpen(true)}
+      >
+        <Menu className="w-4 h-4" />
+      </div>
+
+      <SheetContent
+        side="left"
+        container={container}
+        hideCloseButton
+        className="h-full w-full p-0 sm:max-w-[310px]"
+        onMouseLeave={() => setOpen(false)}
+      >
+        <SheetHeader>
+          <SheetTitle className="sr-only">Main navigation</SheetTitle>
+          <SheetDescription className="sr-only">
+            Nhost Dashboard Main Navigation
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex flex-row items-center justify-end w-full h-12 px-1 border-b bg-background">
+          <Button
+            variant="ghost"
+            className="hidden sm:flex"
+            onClick={() => setMainNavPinned(!mainNavPinned)}
+          >
+            {mainNavPinned ? (
+              <PinOff className="w-5 h-5" />
+            ) : (
+              <Pin className="w-5 h-5" />
+            )}
+          </Button>
+
+          <Button
+            variant="ghost"
+            className="flex sm:hidden"
+            onClick={() => setOpen(false)}
+          >
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        <div
+          ref={scrollContainerRef}
+          className="h-[calc(100vh-7rem)] space-y-4 overflow-auto pb-12 pt-2 lg:h-[calc(100vh-6rem)]"
+        >
+          <div className="flex flex-col gap-1 px-2">
+            <NavTree />
+            <CreateOrgDialog />
+          </div>
+          {workspaces.length > 0 && (
+            <>
+              <Separator className="mx-auto my-2" />
+              <div className="px-2">
+                <WorkspacesNavTree />
+              </div>
+            </>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

dashboard/src/components/layout/MainNav/NavTree.tsx

@@ -0,0 +1,544 @@
+import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
+import { CloudIcon } from '@/components/ui/v2/icons/CloudIcon';
+import { DatabaseIcon } from '@/components/ui/v2/icons/DatabaseIcon';
+import { FileTextIcon } from '@/components/ui/v2/icons/FileTextIcon';
+import { GaugeIcon } from '@/components/ui/v2/icons/GaugeIcon';
+import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
+import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
+import { HomeIcon } from '@/components/ui/v2/icons/HomeIcon';
+import { RocketIcon } from '@/components/ui/v2/icons/RocketIcon';
+import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
+import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Badge } from '@/components/ui/v3/badge';
+import { Button } from '@/components/ui/v3/button';
+import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
+import { useOrgs, type Org } from '@/features/orgs/projects/hooks/useOrgs';
+import { cn } from '@/lib/utils';
+import { Box, ChevronDown, ChevronRight, Plus } from 'lucide-react';
+import Link from 'next/link';
+import { useMemo, type ReactElement } from 'react';
+
+import {
+  ControlledTreeEnvironment,
+  Tree,
+  type TreeItem,
+  type TreeItemIndex,
+} from 'react-complex-tree';
+import { useTreeNavState } from './TreeNavStateContext';
+
+const projectPages = [
+  {
+    name: 'Overview',
+    icon: <HomeIcon className="h-4 w-4" />,
+    route: '',
+    slug: 'overview',
+  },
+  {
+    name: 'Database',
+    icon: <DatabaseIcon className="h-4 w-4" />,
+    route: 'database/browser/default',
+    slug: 'database',
+  },
+  {
+    name: 'GraphQL',
+    icon: <GraphQLIcon className="h-4 w-4" />,
+    route: 'graphql',
+    slug: 'graphql',
+  },
+  {
+    name: 'Hasura',
+    icon: <HasuraIcon className="h-4 w-4" />,
+    route: 'hasura',
+    slug: 'hasura',
+  },
+  {
+    name: 'Auth',
+    icon: <UserIcon className="h-4 w-4" />,
+    route: 'users',
+    slug: 'users',
+  },
+  {
+    name: 'Storage',
+    icon: <StorageIcon className="h-4 w-4" />,
+    route: 'storage',
+    slug: 'storage',
+  },
+  {
+    name: 'Run',
+    icon: <ServicesIcon className="h-4 w-4" />,
+    route: 'run',
+    slug: 'run',
+  },
+  {
+    name: 'AI',
+    icon: <AIIcon className="h-4 w-4" />,
+    route: 'ai/auto-embeddings',
+    slug: 'ai',
+  },
+  {
+    name: 'Deployments',
+    icon: <RocketIcon className="h-4 w-4" />,
+    route: 'deployments',
+    slug: 'deployments',
+  },
+  {
+    name: 'Backups',
+    icon: <CloudIcon className="h-4 w-4" />,
+    route: 'backups',
+    slug: 'backups',
+  },
+  {
+    name: 'Logs',
+    icon: <FileTextIcon className="h-4 w-4" />,
+    route: 'logs',
+    slug: 'logs',
+  },
+  {
+    name: 'Metrics',
+    icon: <GaugeIcon className="h-4 w-4" />,
+    route: 'metrics',
+    slug: 'metrics',
+  },
+  {
+    name: 'Settings',
+    route: 'settings',
+    slug: 'settings',
+  },
+];
+
+const projectSettingsPages = [
+  { name: 'General', slug: 'general', route: '' },
+  {
+    name: 'Compute Resources',
+    slug: 'compute-resources',
+    route: 'compute-resources',
+  },
+  { name: 'Database', slug: 'database', route: 'database' },
+  { name: 'Hasura', slug: 'hasura', route: 'hasura' },
+  {
+    name: 'Authentication',
+    slug: 'authentication',
+    route: 'authentication',
+  },
+  {
+    name: 'JWT',
+    slug: 'jwt',
+    route: 'jwt',
+  },
+  {
+    name: 'Sign-In methods',
+    slug: 'sign-in-methods',
+    route: 'sign-in-methods',
+  },
+  { name: 'Storage', slug: 'storage', route: 'storage' },
+  {
+    name: 'Roles and Permissions',
+    slug: 'roles-and-permissions',
+    route: 'roles-and-permissions',
+  },
+  { name: 'SMTP', slug: 'smtp', route: 'smtp' },
+  { name: 'Git', slug: 'git', route: 'git' },
+  {
+    name: 'Environment Variables',
+    slug: 'environment-variables',
+    route: 'environment-variables',
+  },
+  { name: 'Secrets', slug: 'secrets', route: 'secrets' },
+  {
+    name: 'Custom Domains',
+    slug: 'custom-domains',
+    route: 'custom-domains',
+  },
+  {
+    name: 'Rate Limiting',
+    slug: 'rate-limiting',
+    route: 'rate-limiting',
+  },
+  { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Observability', slug: 'metrics', route: 'metrics' },
+  { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
+];
+
+const createOrganization = (org: Org, isPlatform: boolean) => {
+  const result = {};
+
+  result[org.slug] = {
+    index: org.slug,
+    canMove: false,
+    isFolder: true,
+    children: [
+      `${org.slug}-projects`,
+      `${org.slug}-settings`,
+      `${org.slug}-members`,
+      `${org.slug}-billing`,
+    ],
+    data: {
+      name: org.name,
+      slug: org.slug,
+      type: 'org',
+      isFree: org.plan.isFree,
+      plan: org.plan.name,
+      targetUrl: `/orgs/${org.slug}/projects`, // default to projects
+      disabled: false,
+    },
+    canRename: false,
+  };
+
+  result[`${org.slug}-projects`] = {
+    index: `${org.slug}-projects`,
+    canMove: false,
+    isFolder: true,
+    children: [
+      ...org.apps.map((app) => `${org.slug}-${app.subdomain}`),
+      `${org.slug}-new-project`,
+    ],
+    data: {
+      name: 'Projects',
+      targetUrl: `/orgs/${org.slug}/projects`,
+      disabled: false,
+    },
+    canRename: false,
+  };
+
+  result[`${org.slug}-new-project`] = {
+    index: `${org.slug}-new-project`,
+    isFolder: false,
+    canMove: false,
+    canRename: false,
+    data: {
+      name: 'New project',
+      slug: 'new',
+      icon: <Plus className="mr-1 h-4 w-4 font-bold" strokeWidth={3} />,
+      targetUrl: `/orgs/${org.slug}/projects/new`,
+      disabled: !isPlatform,
+    },
+  };
+
+  org.apps.forEach((app) => {
+    result[`${org.slug}-${app.subdomain}`] = {
+      index: `${org.slug}-${app.subdomain}`,
+      isFolder: true,
+      canMove: false,
+      canRename: false,
+      data: {
+        name: app.name,
+        slug: app.subdomain,
+        icon: <Box className="h-4 w-4" />,
+        targetUrl: `/orgs/${org.slug}/projects/${app.subdomain}`,
+      },
+      children: projectPages.map(
+        (page) => `${org.slug}-${app.subdomain}-${page.slug}`,
+      ),
+    };
+  });
+
+  org.apps.forEach((_app) => {
+    projectPages.forEach((_page) => {
+      result[`${org.slug}-${_app.subdomain}-${_page.slug}`] = {
+        index: `${org.slug}-${_app.subdomain}-${_page.slug}`,
+        canMove: false,
+        isFolder: _page.name === 'Settings',
+        children:
+          _page.name === 'Settings'
+            ? projectSettingsPages.map(
+                (p) => `${org.slug}-${_app.subdomain}-settings-${p.slug}`,
+              )
+            : undefined,
+        data: {
+          name: _page.name,
+          icon: _page.icon,
+          isProjectPage: true,
+          targetUrl: `/orgs/${org.slug}/projects/${_app.subdomain}/${_page.route}`,
+          disabled:
+            ['deployments', 'backups', 'logs', 'metrics'].includes(
+              _page.slug,
+            ) && !isPlatform,
+        },
+        canRename: false,
+      };
+    });
+
+    // add the settings pages
+    projectSettingsPages.forEach((p) => {
+      result[`${org.slug}-${_app.subdomain}-settings-${p.slug}`] = {
+        index: `${org.slug}-${_app.subdomain}-settings-${p.slug}`,
+        canMove: false,
+        isFolder: false,
+        children: undefined,
+        data: {
+          name: p.name,
+          targetUrl:
+            p.slug === 'general'
+              ? `/orgs/${org.slug}/projects/${_app.subdomain}/settings`
+              : `/orgs/${org.slug}/projects/${_app.subdomain}/settings/${p.route}`,
+        },
+        canRename: false,
+      };
+    });
+  });
+
+  result[`${org.slug}-settings`] = {
+    index: `${org.slug}-settings`,
+    canMove: false,
+    isFolder: false,
+    children: [],
+    data: {
+      name: 'Settings',
+      targetUrl: `/orgs/${org.slug}/settings`,
+      disabled: !isPlatform,
+    },
+    canRename: false,
+  };
+
+  result[`${org.slug}-members`] = {
+    index: `${org.slug}-members`,
+    canMove: false,
+    isFolder: false,
+    children: [],
+    data: {
+      name: 'Members',
+      targetUrl: `/orgs/${org.slug}/members`,
+      disabled: !isPlatform,
+    },
+    canRename: false,
+  };
+
+  result[`${org.slug}-billing`] = {
+    index: `${org.slug}-billing`,
+    canMove: false,
+    isFolder: false,
+    children: [],
+    data: {
+      name: 'Billing',
+      targetUrl: `/orgs/${org.slug}/billing`,
+      disabled: !isPlatform,
+    },
+    canRename: false,
+  };
+
+  return result;
+};
+
+type NavItem = {
+  name: string;
+  slug?: string;
+  type?: string;
+  isFree?: boolean;
+  plan?: string;
+  icon?: ReactElement;
+  targetUrl?: string;
+  disabled?: boolean;
+};
+
+const buildNavTreeData = (
+  org: Org,
+  isPlatform: boolean,
+): { items: Record<TreeItemIndex, TreeItem<NavItem>> } => {
+  if (!org) {
+    return {
+      items: {
+        root: {
+          index: 'root',
+          canMove: false,
+          isFolder: true,
+          children: [],
+          data: { name: 'root' },
+          canRename: false,
+        },
+      },
+    };
+  }
+
+  const navTree = {
+    items: {
+      root: {
+        index: 'root',
+        canMove: false,
+        isFolder: true,
+        children: [
+          `${org.slug}-projects`,
+          `${org.slug}-settings`,
+          `${org.slug}-members`,
+          `${org.slug}-billing`,
+        ],
+        data: { name: 'root' },
+        canRename: false,
+      },
+      ...createOrganization(org, isPlatform),
+    },
+  };
+
+  return navTree;
+};
+
+export default function NavTree() {
+  const { currentOrg: org } = useOrgs();
+  const isPlatform = useIsPlatform();
+  const navTree = useMemo(
+    () => buildNavTreeData(org, isPlatform),
+    [org, isPlatform],
+  );
+  const { orgsTreeViewState, setOrgsTreeViewState, setOpen } =
+    useTreeNavState();
+
+  return (
+    <ControlledTreeEnvironment
+      items={navTree.items}
+      getItemTitle={(item) => item.data.name}
+      viewState={{
+        'nav-tree': orgsTreeViewState,
+      }}
+      renderItemTitle={({ title }) => <span>{title}</span>}
+      renderItemArrow={({ item, context }) => {
+        if (!item.isFolder) {
+          return null;
+        }
+
+        return (
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => context.toggleExpandedState()}
+            className="h-8 px-1"
+          >
+            {context.isExpanded ? (
+              <ChevronDown className="h-4 w-4 font-bold" strokeWidth={3} />
+            ) : (
+              <ChevronRight className="h-4 w-4" strokeWidth={3} />
+            )}
+          </Button>
+        );
+      }}
+      renderItem={({ arrow, context, item, children }) => (
+        <li
+          {...context.itemContainerWithChildrenProps}
+          className="flex flex-col gap-1"
+        >
+          <div className="flex flex-row items-center">
+            {arrow}
+            <Button
+              asChild
+              onClick={() => {
+                // do not focus an item if we already there
+                // this will prevent the case where clikcing on the project name
+                // would focus on the project name instead of the overview page
+                if (
+                  navTree.items[item.index].data.targetUrl ===
+                  item.data.targetUrl
+                ) {
+                  return;
+                }
+
+                if (item.data.type !== 'org') {
+                  context.focusItem();
+                }
+              }}
+              className={cn(
+                'flex h-8 w-full flex-row justify-start gap-1 bg-background px-1 text-foreground hover:bg-accent dark:hover:bg-muted',
+                context.isFocused &&
+                  'bg-[#ebf3ff] hover:bg-[#ebf3ff] dark:bg-muted',
+                item.data.disabled && 'pointer-events-none opacity-50',
+              )}
+            >
+              <Link
+                href={item.data.targetUrl || '/'}
+                shallow
+                onClick={() => setOpen(false)}
+              >
+                {item.data.icon && (
+                  <span
+                    className={cn(
+                      'flex items-start',
+                      context.isFocused ? 'text-primary' : '',
+                    )}
+                  >
+                    {item.data.icon}
+                  </span>
+                )}
+                <span
+                  className={cn(
+                    item?.index === 'organizations' && 'font-bold',
+                    context.isFocused ? 'font-bold text-primary' : '',
+                    'max-w-52 truncate',
+                  )}
+                >
+                  {item.data.name}
+                </span>
+                {item.data?.plan && (
+                  <Badge
+                    variant={item.data.isFree ? 'outline' : 'default'}
+                    className={cn(
+                      'h-5 px-[6px] text-[10px]',
+                      item.data.isFree ? 'bg-muted' : '',
+                    )}
+                  >
+                    {item.data.plan}
+                  </Badge>
+                )}
+              </Link>
+            </Button>
+          </div>
+          <div>{children}</div>
+        </li>
+      )}
+      renderTreeContainer={({ children, containerProps }) => (
+        <div {...containerProps} className="w-full">
+          {children}
+        </div>
+      )}
+      renderItemsContainer={({ children, containerProps, depth }) => {
+        if (depth === 0) {
+          return (
+            <ul {...containerProps} className="w-full">
+              {children}
+            </ul>
+          );
+        }
+
+        return (
+          <div className="flex w-full flex-row">
+            <div className="flex justify-center px-[12px] pb-3">
+              <div className="h-full w-0 border-r border-dashed" />
+            </div>
+            <ul {...containerProps} className="w-full">
+              {children}
+            </ul>
+          </div>
+        );
+      }}
+      canSearch={false}
+      onExpandItem={(item) => {
+        setOrgsTreeViewState(
+          ({ expandedItems: prevExpandedItems, ...rest }) => ({
+            ...rest,
+            // Add item index to expandedItems only if it's not already present
+            expandedItems: prevExpandedItems.includes(item.index)
+              ? prevExpandedItems
+              : [...prevExpandedItems, item.index],
+          }),
+        );
+      }}
+      onCollapseItem={(item) => {
+        setOrgsTreeViewState(
+          ({ expandedItems: prevExpandedItems, ...rest }) => ({
+            ...rest,
+            // Remove the item index from expandedItems
+            expandedItems: prevExpandedItems.filter(
+              (index) => index !== item.index,
+            ),
+          }),
+        );
+      }}
+      onFocusItem={(item) => {
+        setOrgsTreeViewState((prevViewState) => ({
+          ...prevViewState,
+          // Set the focused item
+          focusedItem: item.index,
+        }));
+      }}
+    >
+      <Tree treeId="nav-tree" rootItem="root" treeLabel="Navigation Tree" />
+    </ControlledTreeEnvironment>
+  );
+}

dashboard/src/components/layout/MainNav/PinnedMainNav.tsx

@@ -0,0 +1,89 @@
+import NavTree from '@/components/layout/MainNav/NavTree';
+import { Button } from '@/components/ui/v3/button';
+import { Separator } from '@/components/ui/v3/separator';
+import CreateOrgDialog from '@/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog';
+import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
+import { Pin, PinOff } from 'lucide-react';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
+import { useTreeNavState } from './TreeNavStateContext';
+import WorkspacesNavTree from './WorkspacesNavTree';
+
+export default function PinnedMainNav() {
+  const {
+    asPath,
+    query: { workspaceSlug, orgSlug },
+  } = useRouter();
+
+  const scrollContainerRef = useRef();
+  const { workspaces } = useWorkspaces();
+  const { mainNavPinned, setMainNavPinned } = useTreeNavState();
+
+  useEffect(() => {
+    let observer: MutationObserver;
+
+    const scrollToElement = () => {
+      const element = document.querySelector(`a[href="${asPath}"]`);
+      if (element) {
+        element.scrollIntoView({ block: 'center' });
+        observer.disconnect(); // Stop observing once the element is found and scrolled to
+      }
+    };
+
+    if (scrollContainerRef.current) {
+      observer = new MutationObserver(scrollToElement);
+
+      // Start observing the tree container for child additions or subtree changes
+      observer.observe(scrollContainerRef.current, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    // Clean up the observer when the component unmounts or the effect re-runs
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [asPath]);
+
+  if (!orgSlug && !workspaceSlug) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full w-full flex-shrink-0 flex-col border-r p-0 sm:max-w-[310px]">
+      <div className="flex justify-end w-full h-12 p-1 border-b bg-background">
+        <Button
+          variant="ghost"
+          onClick={() => setMainNavPinned(!mainNavPinned)}
+        >
+          {mainNavPinned ? (
+            <PinOff className="w-5 h-5" />
+          ) : (
+            <Pin className="w-5 h-5" />
+          )}
+        </Button>
+      </div>
+
+      <div
+        ref={scrollContainerRef}
+        className="h-[calc(100vh-7rem)] overflow-auto pb-12 pt-2 lg:h-[calc(100vh-6rem)]"
+      >
+        <div className="flex flex-col gap-1 px-2">
+          <NavTree />
+          <CreateOrgDialog />
+        </div>
+        {workspaces.length > 0 && (
+          <>
+            <Separator className="mx-auto my-2" />
+            <div className="px-2">
+              <WorkspacesNavTree />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

dashboard/src/components/layout/MainNav/TreeNavStateContext.tsx

@@ -0,0 +1,120 @@
+import { useNavTreeStateFromURL } from '@/features/orgs/projects/hooks/useNavTreeStateFromURL';
+import { useWorkspacesNavTreeStateFromURL } from '@/features/orgs/projects/hooks/useWorkspacesNavTreeStateFromURL';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from 'react';
+import type { IndividualTreeViewState } from 'react-complex-tree';
+
+interface TreeNavStateContextType {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  mainNavPinned: boolean;
+  orgsTreeViewState: IndividualTreeViewState<never>;
+  setOrgsTreeViewState: Dispatch<
+    SetStateAction<IndividualTreeViewState<never>>
+  >;
+  workspacesTreeViewState: IndividualTreeViewState<never>;
+  setWorkspacesTreeViewState: Dispatch<
+    SetStateAction<IndividualTreeViewState<never>>
+  >;
+  setMainNavPinned: (value: boolean) => void;
+}
+
+const TreeNavStateContext = createContext<TreeNavStateContextType | undefined>(
+  undefined,
+);
+
+interface TreeNavProviderProps {
+  children: ReactNode;
+}
+
+function useSyncedTreeViewState(
+  useTreeStateFromURL: () => {
+    expandedItems: string[];
+    focusedItem: string | null;
+  },
+) {
+  const { expandedItems, focusedItem } = useTreeStateFromURL();
+
+  const [state, setState] = useState<IndividualTreeViewState<never>>({
+    expandedItems,
+    focusedItem,
+    selectedItems: null,
+  });
+
+  useEffect(() => {
+    setState((prevState) => ({
+      ...prevState,
+      expandedItems: [
+        ...new Set([...prevState.expandedItems, ...expandedItems]),
+      ],
+      focusedItem,
+    }));
+  }, [expandedItems, focusedItem]);
+
+  return { state, setState };
+}
+
+function TreeNavStateProvider({ children }: TreeNavProviderProps) {
+  const [open, setOpen] = useState(false);
+  const [mainNavPinned, setMainNavPinned] = useSSRLocalStorage(
+    'pin-nav-tree',
+    true,
+  );
+  const orgsTreeViewState = useSyncedTreeViewState(useNavTreeStateFromURL);
+
+  const workspacesTreeViewState = useSyncedTreeViewState(
+    useWorkspacesNavTreeStateFromURL,
+  );
+
+  const value = useMemo(
+    () => ({
+      open,
+      setOpen,
+      mainNavPinned,
+      setMainNavPinned,
+      orgsTreeViewState: orgsTreeViewState.state,
+      setOrgsTreeViewState: orgsTreeViewState.setState,
+      workspacesTreeViewState: workspacesTreeViewState.state,
+      setWorkspacesTreeViewState: workspacesTreeViewState.setState,
+    }),
+    [
+      open,
+      setOpen,
+      mainNavPinned,
+      setMainNavPinned,
+      orgsTreeViewState.state,
+      orgsTreeViewState.setState,
+      workspacesTreeViewState.state,
+      workspacesTreeViewState.setState,
+    ],
+  );
+
+  return (
+    <TreeNavStateContext.Provider value={value}>
+      {children}
+    </TreeNavStateContext.Provider>
+  );
+}
+
+const useTreeNavState = (): TreeNavStateContextType => {
+  const context = useContext(TreeNavStateContext);
+
+  if (!context) {
+    throw new Error(
+      'useTreeNavState must be used within a TreeNavStateProvider',
+    );
+  }
+
+  return context;
+};
+
+export { TreeNavStateProvider, useTreeNavState };

dashboard/src/components/layout/MainNav/WorkspacesNavTree.tsx

@@ -0,0 +1,495 @@
+import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
+import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
+import { CloudIcon } from '@/components/ui/v2/icons/CloudIcon';
+import { DatabaseIcon } from '@/components/ui/v2/icons/DatabaseIcon';
+import { FileTextIcon } from '@/components/ui/v2/icons/FileTextIcon';
+import { GaugeIcon } from '@/components/ui/v2/icons/GaugeIcon';
+import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
+import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
+import { HomeIcon } from '@/components/ui/v2/icons/HomeIcon';
+import { RocketIcon } from '@/components/ui/v2/icons/RocketIcon';
+import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
+import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
+import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
+import { Link } from '@/components/ui/v2/Link';
+import { Button } from '@/components/ui/v3/button';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/v3/hover-card';
+import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
+import { type Workspace } from '@/features/orgs/projects/hooks/useWorkspaces/useWorkspaces';
+import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
+import { cn } from '@/lib/utils';
+import { Box, ChevronDown, ChevronRight } from 'lucide-react';
+import NextLink from 'next/link';
+import { type ReactElement } from 'react';
+
+import {
+  ControlledTreeEnvironment,
+  Tree,
+  type TreeItem,
+  type TreeItemIndex,
+} from 'react-complex-tree';
+import { useTreeNavState } from './TreeNavStateContext';
+
+const projectPages = [
+  {
+    name: 'Overview',
+    icon: <HomeIcon className="h-4 w-4" />,
+    route: '',
+    slug: 'overview',
+  },
+  {
+    name: 'Database',
+    icon: <DatabaseIcon className="h-4 w-4" />,
+    route: 'database/browser/default',
+    slug: 'database',
+  },
+  {
+    name: 'GraphQL',
+    icon: <GraphQLIcon className="h-4 w-4" />,
+    route: 'graphql',
+    slug: 'graphql',
+  },
+  {
+    name: 'Hasura',
+    icon: <HasuraIcon className="h-4 w-4" />,
+    route: 'hasura',
+    slug: 'hasura',
+  },
+  {
+    name: 'Auth',
+    icon: <UserIcon className="h-4 w-4" />,
+    route: 'users',
+    slug: 'users',
+  },
+  {
+    name: 'Storage',
+    icon: <StorageIcon className="h-4 w-4" />,
+    route: 'storage',
+    slug: 'storage',
+  },
+  {
+    name: 'Run',
+    icon: <ServicesIcon className="h-4 w-4" />,
+    route: 'services',
+    slug: 'services',
+  },
+  {
+    name: 'AI',
+    icon: <AIIcon className="h-4 w-4" />,
+    route: 'ai/auto-embeddings',
+    slug: 'ai',
+  },
+  {
+    name: 'Deployments',
+    icon: <RocketIcon className="h-4 w-4" />,
+    route: 'deployments',
+    slug: 'deployments',
+  },
+  {
+    name: 'Backups',
+    icon: <CloudIcon className="h-4 w-4" />,
+    route: 'backups',
+    slug: 'backups',
+  },
+  {
+    name: 'Logs',
+    icon: <FileTextIcon className="h-4 w-4" />,
+    route: 'logs',
+    slug: 'logs',
+  },
+  {
+    name: 'Metrics',
+    icon: <GaugeIcon className="h-4 w-4" />,
+    route: 'metrics',
+    slug: 'metrics',
+  },
+  {
+    name: 'Settings',
+    route: 'settings/general',
+    slug: 'settings',
+  },
+];
+
+const projectSettingsPages = [
+  { name: 'General', slug: 'general', route: 'general' },
+  {
+    name: 'Compute Resources',
+    slug: 'resources',
+    route: 'resources',
+  },
+  { name: 'Database', slug: 'database', route: 'database' },
+  { name: 'Hasura', slug: 'hasura', route: 'hasura' },
+  {
+    name: 'Authentication',
+    slug: 'authentication',
+    route: 'authentication',
+  },
+  {
+    name: 'Sign-In methods',
+    slug: 'sign-in-methods',
+    route: 'sign-in-methods',
+  },
+  { name: 'Storage', slug: 'storage', route: 'storage' },
+  {
+    name: 'Roles and Permissions',
+    slug: 'roles-and-permissions',
+    route: 'roles-and-permissions',
+  },
+  { name: 'SMTP', slug: 'smtp', route: 'smtp' },
+  { name: 'Git', slug: 'git', route: 'git' },
+  {
+    name: 'Environment Variables',
+    slug: 'environment-variables',
+    route: 'environment-variables',
+  },
+  { name: 'Secrets', slug: 'secrets', route: 'secrets' },
+  {
+    name: 'Custom Domains',
+    slug: 'custom-domains',
+    route: 'custom-domains',
+  },
+  {
+    name: 'Rate Limiting',
+    slug: 'rate-limiting',
+    route: 'rate-limiting',
+  },
+  { name: 'AI', slug: 'ai', route: 'ai' },
+  { name: 'Configuration Editor', slug: 'editor', route: 'editor' },
+];
+
+const createWorkspace = (workspace: Workspace) => {
+  const result = {};
+
+  result[workspace.slug] = {
+    index: workspace.slug,
+    canMove: false,
+    isFolder: true,
+    children: [`${workspace.slug}-overview`, `${workspace.slug}-projects`],
+    data: {
+      name: workspace.name,
+      slug: workspace.slug,
+      type: 'workspace',
+      targetUrl: `/${workspace.slug}`,
+    },
+    canRename: false,
+  };
+
+  result[`${workspace.slug}-overview`] = {
+    index: `${workspace.slug}-overview`,
+    canMove: false,
+    isFolder: false,
+    children: null,
+    data: {
+      name: 'Overview',
+      targetUrl: `/${workspace.slug}`,
+    },
+    canRename: false,
+  };
+
+  result[`${workspace.slug}-projects`] = {
+    index: `${workspace.slug}-projects`,
+    canMove: false,
+    isFolder: true,
+    children: workspace.projects.map((app) => `${workspace.slug}-${app.slug}`),
+    data: {
+      name: 'Projects',
+    },
+    canRename: false,
+  };
+
+  workspace.projects.forEach((app) => {
+    result[`${workspace.slug}-${app.slug}`] = {
+      index: `${workspace.slug}-${app.slug}`,
+      isFolder: true,
+      canMove: false,
+      canRename: false,
+      data: {
+        name: app.name,
+        slug: app.slug,
+        icon: <Box className="h-4 w-4" />,
+        targetUrl: `/${workspace.slug}/${app.slug}`,
+      },
+      children: projectPages.map(
+        (page) => `${workspace.slug}-${app.slug}-${page.slug}`,
+      ),
+    };
+  });
+
+  workspace.projects.forEach((_app) => {
+    projectPages.forEach((_page) => {
+      result[`${workspace.slug}-${_app.slug}-${_page.slug}`] = {
+        index: `${workspace.slug}-${_app.slug}-${_page.slug}`,
+        canMove: false,
+        isFolder: _page.name === 'Settings',
+        children:
+          _page.name === 'Settings'
+            ? projectSettingsPages.map(
+                (p) => `${workspace.slug}-${_app.slug}-settings-${p.slug}`,
+              )
+            : undefined,
+        data: {
+          name: _page.name,
+          icon: _page.icon,
+          isProjectPage: true,
+          targetUrl: `/${workspace.slug}/${_app.slug}/${_page.route}`,
+        },
+        canRename: false,
+      };
+    });
+
+    // add the settings pages
+    projectSettingsPages.forEach((p) => {
+      result[`${workspace.slug}-${_app.slug}-settings-${p.slug}`] = {
+        index: `${workspace.slug}-${_app.slug}-settings-${p.slug}`,
+        canMove: false,
+        isFolder: false,
+        children: undefined,
+        data: {
+          name: p.name,
+          targetUrl: `/${workspace.slug}/${_app.slug}/settings/${p.route}`,
+        },
+        canRename: false,
+      };
+    });
+  });
+
+  return result;
+};
+
+type NavItem = {
+  name: string;
+  slug?: string;
+  type?: string;
+  icon?: ReactElement;
+  targetUrl?: string;
+};
+
+const buildNavTreeData = (
+  workspaces: Workspace[],
+): { items: Record<TreeItemIndex, TreeItem<NavItem>> } => {
+  const navTree = {
+    items: {
+      root: {
+        index: 'root',
+        canMove: false,
+        isFolder: true,
+        children: ['workspaces'],
+        data: { name: 'root' },
+        canRename: false,
+      },
+      workspaces: {
+        index: 'workspaces',
+        canMove: false,
+        isFolder: true,
+        children: workspaces.map((workspace) => workspace.slug),
+        data: { name: 'Workspaces', type: 'workspaces-root' },
+        canRename: false,
+      },
+      ...workspaces.reduce(
+        (acc, workspace) => ({ ...acc, ...createWorkspace(workspace) }),
+        {},
+      ),
+    },
+  };
+
+  return navTree;
+};
+
+export default function WorkspacesNavTree() {
+  const { workspaces } = useWorkspaces();
+  const navTree = buildNavTreeData(workspaces);
+  const [, setLastSlug] = useSSRLocalStorage('slug', null);
+
+  const { workspacesTreeViewState, setWorkspacesTreeViewState, setOpen } =
+    useTreeNavState();
+
+  const renderItem = ({ arrow, context, item, children }) => {
+    const navItemContent = () => (
+      <>
+        {item.data.icon && (
+          <span
+            className={cn(
+              'flex items-start',
+              context.isFocused ? 'text-primary' : '',
+            )}
+          >
+            {item.data.icon}
+          </span>
+        )}
+        <span
+          className={cn(
+            item?.index === 'workspaces' && 'font-bold',
+            context.isFocused ? 'font-bold text-primary' : '',
+            'max-w-40 truncate',
+          )}
+        >
+          {item.data.name}
+        </span>
+        {item.data.type === 'workspaces-root' && (
+          <HoverCard openDelay={0}>
+            <HoverCardTrigger asChild>
+              <div
+                className={cn(
+                  'h-5 rounded-full bg-muted bg-orange-200 px-[6px] text-[10px] dark:bg-orange-500',
+                )}
+              >
+                Legacy
+              </div>
+            </HoverCardTrigger>
+            <HoverCardContent className="w-64" side="top">
+              <div className="whitespace-normal">
+                <span>For more information read the </span>
+                <Link
+                  href="https://nhost.io/blog/organization-billing"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-medium"
+                >
+                  announcement
+                  <ArrowSquareOutIcon className="mb-1 ml-1 h-4 w-4" />
+                </Link>
+              </div>
+            </HoverCardContent>
+          </HoverCard>
+        )}
+      </>
+    );
+
+    return (
+      <li
+        {...context.itemContainerWithChildrenProps}
+        className="flex flex-col gap-1"
+      >
+        <div className="flex flex-row items-center">
+          {arrow}
+          <Button
+            asChild
+            onClick={() => {
+              if (item.data.type !== 'workspace') {
+                context.focusItem();
+              } else {
+                // persist last slug if the nav item is a workspace
+                setLastSlug(item.data.slug);
+              }
+            }}
+            className={cn(
+              'flex h-8 w-full flex-row justify-start gap-1 bg-background px-1 text-foreground hover:bg-accent dark:hover:bg-muted',
+              context.isFocused &&
+                'bg-[#ebf3ff] hover:bg-[#ebf3ff] dark:bg-muted',
+              item.data.disabled && 'pointer-events-none opacity-50',
+            )}
+          >
+            {item.data.targetUrl ? (
+              <NextLink
+                href={item.data.targetUrl || '/'}
+                onClick={() => setOpen(false)}
+              >
+                {navItemContent()}
+              </NextLink>
+            ) : (
+              <div className="cursor-pointer">{navItemContent()}</div>
+            )}
+          </Button>
+        </div>
+        <div>{children}</div>
+      </li>
+    );
+  };
+
+  return (
+    <ControlledTreeEnvironment
+      items={navTree.items}
+      getItemTitle={(item) => item.data.name}
+      viewState={{
+        'workspaces-nav-tree': workspacesTreeViewState,
+      }}
+      renderItemTitle={({ title }) => <span>{title}</span>}
+      renderItemArrow={({ item, context }) => {
+        if (!item.isFolder) {
+          return null;
+        }
+
+        return (
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => context.toggleExpandedState()}
+            className="h-8 px-1"
+          >
+            {context.isExpanded ? (
+              <ChevronDown className="h-4 w-4 font-bold" strokeWidth={3} />
+            ) : (
+              <ChevronRight className="h-4 w-4" strokeWidth={3} />
+            )}
+          </Button>
+        );
+      }}
+      renderItem={renderItem}
+      renderTreeContainer={({ children, containerProps }) => (
+        <div {...containerProps} className="w-full">
+          {children}
+        </div>
+      )}
+      renderItemsContainer={({ children, containerProps, depth }) => {
+        if (depth === 0) {
+          return (
+            <ul {...containerProps} className="w-full">
+              {children}
+            </ul>
+          );
+        }
+
+        return (
+          <div className="flex w-full flex-row">
+            <div className="flex justify-center px-[12px] pb-3">
+              <div className="h-full w-0 border-r border-dashed" />
+            </div>
+            <ul {...containerProps} className="w-full">
+              {children}
+            </ul>
+          </div>
+        );
+      }}
+      canSearch={false}
+      onExpandItem={(item) => {
+        setWorkspacesTreeViewState(
+          ({ expandedItems: prevExpandedItems, ...rest }) => ({
+            ...rest,
+            // Add item index to expandedItems only if it's not already present
+            expandedItems: prevExpandedItems.includes(item.index)
+              ? prevExpandedItems
+              : [...prevExpandedItems, item.index],
+          }),
+        );
+      }}
+      onCollapseItem={(item) => {
+        setWorkspacesTreeViewState(
+          ({ expandedItems: prevExpandedItems, ...rest }) => ({
+            ...rest,
+            // Remove the item index from expandedItems
+            expandedItems: prevExpandedItems.filter(
+              (index) => index !== item.index,
+            ),
+          }),
+        );
+      }}
+      onFocusItem={(item) => {
+        setWorkspacesTreeViewState((prevViewState) => ({
+          ...prevViewState,
+          // Set the focused item
+          focusedItem: item.index,
+        }));
+      }}
+    >
+      <Tree
+        rootItem="root"
+        treeId="workspaces-nav-tree"
+        treeLabel="Workspaces Navigation Tree"
+      />
+    </ControlledTreeEnvironment>
+  );
+}

dashboard/src/components/layout/MainNav/index.ts

@@ -0,0 +1 @@
+export { default as MainNav } from './MainNav';

dashboard/src/components/layout/OrgProjectLayout/OrgProjectLayout.tsx

@@ -0,0 +1,123 @@
+import type { AuthenticatedLayoutProps } from '@/components/layout/AuthenticatedLayout';
+import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
+import { DesktopNav } from '@/components/layout/DesktopNav';
+import { LoadingScreen } from '@/components/presentational/LoadingScreen';
+import type { BoxProps } from '@/components/ui/v2/Box';
+import { Box } from '@/components/ui/v2/Box';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useNavigationVisible } from '@/features/projects/common/hooks/useNavigationVisible';
+import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
+import { NextSeo } from 'next-seo';
+import { useRouter } from 'next/router';
+import { twMerge } from 'tailwind-merge';
+
+export interface ProjectLayoutProps extends AuthenticatedLayoutProps {
+  /**
+   * Props passed to the internal `<main />` element.
+   */
+  mainContainerProps?: BoxProps;
+}
+
+function ProjectLayoutContent({
+  children,
+  mainContainerProps: {
+    className: mainContainerClassName,
+    ...mainContainerProps
+  } = {},
+}: ProjectLayoutProps) {
+  const { currentProject, loading, error } = useCurrentWorkspaceAndProject();
+
+  const router = useRouter();
+  const shouldDisplayNav = useNavigationVisible();
+  const isPlatform = useIsPlatform();
+  const { nhostRoutes } = useProjectRoutes();
+  const pathWithoutWorkspaceAndProject = router.asPath.replace(
+    /^\/[\w\-_[\]]+\/[\w\-_[\]]+/i,
+    '',
+  );
+  const isRestrictedPath =
+    !isPlatform &&
+    nhostRoutes.some((route) =>
+      pathWithoutWorkspaceAndProject.startsWith(
+        route.relativeMainPath || route.relativePath,
+      ),
+    );
+
+  // useNotFoundRedirect();
+
+  // useEffect(() => {
+  //   if (isPlatform || !router.isReady) {
+  //     return;
+  //   }
+
+  //   TODO // Double check what restricted path means here
+  //   if (isRestrictedPath) {
+  //     router.push('/local/local');
+  //   }
+  // }, [isPlatform, isRestrictedPath, router]);
+
+  if (isRestrictedPath || loading) {
+    return <LoadingScreen />;
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  if (!isPlatform) {
+    return (
+      <>
+        <DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
+
+        <Box
+          component="main"
+          className={twMerge(
+            'relative flex-auto overflow-y-auto',
+            mainContainerClassName,
+          )}
+          {...mainContainerProps}
+        >
+          {children}
+
+          <NextSeo title="Local App" />
+        </Box>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {shouldDisplayNav && (
+        <DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
+      )}
+
+      <Box
+        component="main"
+        className={twMerge(
+          'relative flex-auto overflow-y-auto',
+          mainContainerClassName,
+        )}
+        {...mainContainerProps}
+      >
+        {children}
+
+        <NextSeo title={currentProject?.name} />
+      </Box>
+    </>
+  );
+}
+
+export default function OrgProjectLayout({
+  children,
+  mainContainerProps,
+  ...props
+}: ProjectLayoutProps) {
+  return (
+    <AuthenticatedLayout {...props}>
+      <ProjectLayoutContent mainContainerProps={mainContainerProps}>
+        {children}
+      </ProjectLayoutContent>
+    </AuthenticatedLayout>
+  );
+}

dashboard/src/components/layout/OrgProjectLayout/index.ts

@@ -0,0 +1 @@
+export { default as OrgProjectLayout } from './OrgProjectLayout';

dashboard/src/components/layout/ProjectLayout/ProjectLayout.tsx

@@ -1,16 +1,14 @@
 import type { AuthenticatedLayoutProps } from '@/components/layout/AuthenticatedLayout';
 import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
-import { DesktopNav } from '@/components/layout/DesktopNav';
 import { LoadingScreen } from '@/components/presentational/LoadingScreen';
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
-import { useNavigationVisible } from '@/features/projects/common/hooks/useNavigationVisible';
-import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoundRedirect';
 import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
 import { NextSeo } from 'next-seo';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export interface ProjectLayoutProps extends AuthenticatedLayoutProps {
@@ -27,10 +25,8 @@ function ProjectLayoutContent({
     ...mainContainerProps
   } = {},
 }: ProjectLayoutProps) {
-  const { currentProject, loading, error } = useCurrentWorkspaceAndProject();
-
+  const { project, loading, error } = useProject();
   const router = useRouter();
-  const shouldDisplayNav = useNavigationVisible();
   const isPlatform = useIsPlatform();
   const { nhostRoutes } = useProjectRoutes();
   const pathWithoutWorkspaceAndProject = router.asPath.replace(
@@ -45,18 +41,18 @@ function ProjectLayoutContent({
       ),
     );
 
-  useNotFoundRedirect();
+  // TODO(orgs) 1
+  // useNotFoundRedirect();
 
-  // useEffect(() => {
-  //   if (isPlatform || !router.isReady) {
-  //     return;
-  //   }
+  useEffect(() => {
+    if (isPlatform || !router.isReady) {
+      return;
+    }
 
-  //   TODO // Double check what restricted path means here
-  //   if (isRestrictedPath) {
-  //     router.push('/local/local');
-  //   }
-  // }, [isPlatform, isRestrictedPath, router]);
+    if (isRestrictedPath) {
+      router.push('/local/local');
+    }
+  }, [isPlatform, isRestrictedPath, router]);
 
   if (isRestrictedPath || loading) {
     return <LoadingScreen />;
@@ -68,31 +64,6 @@ function ProjectLayoutContent({
 
   if (!isPlatform) {
     return (
-      <>
-        <DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
-
-        <Box
-          component="main"
-          className={twMerge(
-            'relative flex-auto overflow-y-auto',
-            mainContainerClassName,
-          )}
-          {...mainContainerProps}
-        >
-          {children}
-
-          <NextSeo title="Local App" />
-        </Box>
-      </>
-    );
-  }
-
-  return (
-    <>
-      {shouldDisplayNav && (
-        <DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
-      )}
-
       <Box
         component="main"
         className={twMerge(
@@ -102,10 +73,24 @@ function ProjectLayoutContent({
         {...mainContainerProps}
       >
         {children}
-
-        <NextSeo title={currentProject?.name} />
+        <NextSeo title="Local App" />
       </Box>
-    </>
+    );
+  }
+
+  return (
+    <Box
+      component="main"
+      className={twMerge(
+        'relative flex-auto overflow-y-auto',
+        mainContainerClassName,
+      )}
+      {...mainContainerProps}
+    >
+      {children}
+
+      <NextSeo title={project?.name} />
+    </Box>
   );
 }
 

dashboard/src/components/layout/SettingsContainer/SettingsContainer.tsx

@@ -63,6 +63,10 @@ export interface SettingsContainerProps
    * @default false
    */
   showSwitch?: boolean;
+  /**
+   * Custom element to be rendered at the top-right corner of the section.
+   */
+  topRightElement?: ReactNode;
   /**
    * Custom class names passed to the root element.
    */
@@ -108,6 +112,7 @@ export default function SettingsContainer({
   showSwitch = false,
   rootClassName,
   docsTitle,
+  topRightElement,
   slotProps: { root, switch: switchSlot, submitButton, footer } = {},
 }: SettingsContainerProps) {
   return (
@@ -137,6 +142,7 @@ export default function SettingsContainer({
             {description && <Text color="secondary">{description}</Text>}
           </div>
         </div>
+        {topRightElement}
         {!switchId && showSwitch && (
           <Switch
             checked={enabled}

dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx

@@ -1,60 +1,36 @@
-import type { ProjectLayoutProps } from '@/components/layout/ProjectLayout';
-import { ProjectLayout } from '@/components/layout/ProjectLayout';
-import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
-import { SettingsSidebar } from '@/components/layout/SettingsSidebar';
 import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
 import { Alert } from '@/components/ui/v2/Alert';
 import { Box } from '@/components/ui/v2/Box';
 import { Text } from '@/components/ui/v2/Text';
+import type { ProjectLayoutProps } from '@/features/orgs/layout/ProjectLayout';
 import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
 import { useTheme } from '@mui/material';
 import { twMerge } from 'tailwind-merge';
 
-export interface SettingsLayoutProps extends ProjectLayoutProps {
-  /**
-   * Props passed to the sidebar component.
-   */
-  sidebarProps?: SettingsSidebarProps;
-}
+export interface SettingsLayoutProps extends ProjectLayoutProps {}
 
-export default function SettingsLayout({
-  children,
-  mainContainerProps: {
-    className: mainContainerClassName,
-    ...mainContainerProps
-  } = {},
-  sidebarProps: { className: sidebarClassName, ...sidebarProps } = {},
-  ...props
-}: SettingsLayoutProps) {
+export default function SettingsLayout({ children }: SettingsLayoutProps) {
   const theme = useTheme();
   const { currentProject } = useCurrentWorkspaceAndProject();
   const hasGitRepo = !!currentProject?.githubRepository;
 
   return (
-    <ProjectLayout
-      mainContainerProps={{
-        className: twMerge('flex h-full', mainContainerClassName),
-        ...mainContainerProps,
-      }}
-      {...props}
+    <Box
+      sx={{ backgroundColor: 'background.default' }}
+      className="flex flex-col flex-auto w-full overflow-x-hidden overflow-y-auto"
     >
-      <SettingsSidebar
-        className={twMerge('w-full max-w-sidebar', sidebarClassName)}
-        {...sidebarProps}
-      />
-
       <Box
         sx={{ backgroundColor: 'background.default' }}
-        className="flex w-full flex-auto flex-col overflow-scroll overflow-x-hidden"
+        className="flex flex-col h-full"
       >
         <RetryableErrorBoundary>
           <div className="flex flex-col space-y-2">
             {hasGitRepo && (
               <Alert
                 severity="warning"
-                className="grid grid-flow-row place-content-center gap-2"
+                className="grid grid-flow-row gap-2 place-content-center"
               >
-                <Text color="warning" className="text-sm ">
+                <Text color="warning" className="text-sm">
                   As you have a connected repository, make sure to synchronize
                   your changes with{' '}
                   <code
@@ -76,9 +52,9 @@ export default function SettingsLayout({
                     target="_blank"
                     rel="noopener noreferrer"
                     className="underline"
-                    href="https://docs.nhost.io/cli/overlays"
+                    href="https://docs.nhost.io/guides/cli/configuration-overlays#configuration-overlays"
                   >
-                    docs.nhost.io/cli/overlays
+                    Configuration Overlays
                   </a>{' '}
                   for guidance.
                 </Text>
@@ -88,6 +64,6 @@ export default function SettingsLayout({
           {children}
         </RetryableErrorBoundary>
       </Box>
-    </ProjectLayout>
+    </Box>
   );
 }

dashboard/src/components/layout/SettingsSidebar/SettingsSidebar.tsx

@@ -3,6 +3,7 @@ import { Backdrop } from '@/components/ui/v2/Backdrop';
 import type { BoxProps } from '@/components/ui/v2/Box';
 import { Box } from '@/components/ui/v2/Box';
 import { IconButton } from '@/components/ui/v2/IconButton';
+import { SlidersIcon } from '@/components/ui/v2/icons/SlidersIcon';
 import { List } from '@/components/ui/v2/List';
 import type { ListItemButtonProps } from '@/components/ui/v2/ListItem';
 import { ListItem } from '@/components/ui/v2/ListItem';
@@ -27,12 +28,17 @@ interface SettingsNavLinkProps extends ListItemButtonProps {
    * @default true
    */
   exact?: boolean;
+  /**
+   * Class name passed to the text element.
+   */
+  textClassName?: string;
 }
 
 function SettingsNavLink({
   exact = true,
   href,
   children,
+  textClassName,
   ...props
 }: SettingsNavLinkProps) {
   const router = useRouter();
@@ -52,7 +58,7 @@ function SettingsNavLink({
         selected={active}
         {...props}
       >
-        <ListItem.Text>{children}</ListItem.Text>
+        <ListItem.Text className={textClassName}>{children}</ListItem.Text>
       </ListItem.Button>
     </ListItem.Root>
   );
@@ -114,13 +120,13 @@ export default function SettingsSidebar({
       <Box
         component="aside"
         className={twMerge(
-          'absolute top-0 z-[35] h-full w-full overflow-auto border-r-1 px-2 pb-17 pt-2 motion-safe:transition-transform md:relative md:z-0 md:h-full md:py-2.5 md:transition-none',
+          'absolute top-0 z-[35] flex h-full w-full flex-col justify-between overflow-auto border-r-1 pb-17 pt-2 motion-safe:transition-transform md:relative md:z-0 md:h-full md:pb-0 md:pt-2.5 md:transition-none',
           expanded ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
           className,
         )}
         {...props}
       >
-        <nav aria-label="Settings navigation">
+        <nav aria-label="Settings navigation" className="px-2">
           <List className="grid gap-2">
             <SettingsNavLink
               href="/general"
@@ -215,11 +221,32 @@ export default function SettingsSidebar({
             >
               Custom Domains
             </SettingsNavLink>
+            <SettingsNavLink
+              href="/rate-limiting"
+              exact={false}
+              onClick={handleSelect}
+            >
+              Rate Limiting
+            </SettingsNavLink>
             <SettingsNavLink href="/ai" exact={false} onClick={handleSelect}>
               AI
             </SettingsNavLink>
           </List>
         </nav>
+        <Box className="border-t">
+          <SettingsNavLink
+            href="/editor"
+            exact={false}
+            onClick={handleSelect}
+            className="flex w-full border group-focus-within:pr-9 group-hover:pr-9 group-active:pr-9"
+            textClassName="flex w-full justify-center"
+          >
+            <div className="flex w-full flex-row items-center justify-center space-x-4 py-2.5">
+              <SlidersIcon />
+              <span className="flex">Configuration Editor</span>
+            </div>
+          </SettingsNavLink>
+        </Box>
       </Box>
 
       <IconButton

dashboard/src/components/layout/UnauthenticatedLayout/UnauthenticatedLayout.tsx

@@ -21,23 +21,22 @@ export default function UnauthenticatedLayout({
   const router = useRouter();
   const isPlatform = useIsPlatform();
   const { isAuthenticated, isLoading } = useAuthenticationStatus();
+  const isOnResetPassword = router.route === '/password/reset';
 
   useEffect(() => {
     if (!isPlatform || (!isLoading && isAuthenticated)) {
-      router.push('/');
+      // we do not want to redirect if the user tries to reset their password
+      if (!isOnResetPassword) {
+        router.push('/');
+      }
     }
-  }, [isLoading, isAuthenticated, router, isPlatform]);
+  }, [isLoading, isAuthenticated, router, isPlatform, isOnResetPassword]);
 
-  if (!isPlatform || isLoading || isAuthenticated) {
+  if ((!isPlatform || isLoading || isAuthenticated) && !isOnResetPassword) {
     return (
       <BaseLayout {...props}>
         <LoadingScreen
           sx={{ backgroundColor: (theme) => theme.palette.background.default }}
-          slotProps={{
-            activityIndicator: {
-              className: 'text-white',
-            },
-          }}
         />
       </BaseLayout>
     );
@@ -64,14 +63,14 @@ export default function UnauthenticatedLayout({
           >
             <Container
               rootClassName="bg-transparent h-full"
-              className="grid h-full w-full items-center justify-items-center gap-12 bg-transparent pt-8 pb-12 lg:grid-cols-2 lg:gap-4 lg:pt-0 lg:pb-0"
+              className="grid h-full w-full items-center justify-items-center gap-12 bg-transparent pb-12 pt-8 lg:grid-cols-2 lg:gap-4 lg:pb-0 lg:pt-0"
             >
               <div className="relative z-10 order-2 grid w-full max-w-[544px] grid-flow-row gap-12 lg:order-1">
                 {children}
               </div>
 
               <div className="relative z-0 order-1 flex h-full w-full items-center justify-center md:min-h-[150px] lg:order-2 lg:min-h-[none]">
-                <div className="absolute top-0 left-0 right-0 bottom-0 mx-auto flex h-full w-full max-w-xl items-center justify-center opacity-70">
+                <div className="absolute bottom-0 left-0 right-0 top-0 mx-auto flex h-full w-full max-w-xl items-center justify-center overflow-hidden opacity-70">
                   <Image
                     priority
                     src="/assets/line-grid.svg"

dashboard/src/components/presentational/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,132 @@
+import { clsx } from 'clsx';
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ForwardedRef,
+  type ReactElement,
+} from 'react';
+
+import { Box } from '@/components/ui/v2/Box';
+import { CopyToClipboardButton as CopyToClipboardButtonOriginal } from './CopyToClipboardButton';
+import { getNodeText } from './getNodeText';
+
+export interface CodeBlockPropsBase {
+  filename?: string;
+  /**
+   *  Color of the filename text and the border underneath it when content is being shown.
+   */
+  filenameColor?: string;
+  /**
+   * Text of the toast that appears when the code is copied to the clipboard.
+   */
+  copyToClipboardToastTitle?: string;
+}
+
+export type CodeBlockProps = CodeBlockPropsBase &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof CodeBlockPropsBase>;
+
+/**
+ * Different from CodeGroup because we cannot use Headless UI's Tab component outside a Tab.Group
+ * Styling should look the same though.
+ */
+function CodeTabBar({
+  filename,
+  filenameColor,
+  children,
+}: {
+  filename: string;
+  filenameColor?: string;
+  children?: ReactElement;
+}) {
+  return (
+    <div className="flex text-xs leading-6 text-slate-400">
+      <div
+        className="flex flex-none items-center border-b border-t border-t-transparent px-4 py-1"
+        style={{ color: filenameColor, borderBottomColor: filenameColor }}
+      >
+        {filename}
+      </div>
+      <div className="bg-codeblock-tabs flex flex-auto items-center rounded-t border border-slate-500/30">
+        {children && (
+          <div className="flex flex-auto items-center justify-end space-x-4 px-4">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface CopyToClipboardButtonProps
+  extends Partial<
+    ComponentPropsWithoutRef<typeof CopyToClipboardButtonOriginal>
+  > {
+  filenameColor?: string;
+  tooltipColor?: string;
+  toastTitle?: string;
+}
+
+function CopyToClipboardButton({
+  tooltipColor,
+  filenameColor,
+  textToCopy,
+  toastTitle,
+  ...props
+}: CopyToClipboardButtonProps) {
+  return (
+    <CopyToClipboardButtonOriginal
+      textToCopy={textToCopy}
+      title={toastTitle}
+      {...props}
+    />
+  );
+}
+
+export const CodeBlock = forwardRef(
+  (
+    {
+      filename,
+      filenameColor,
+      children,
+      className,
+      copyToClipboardToastTitle,
+      ...props
+    }: CodeBlockProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <Box
+      sx={{
+        backgroundColor: (theme) =>
+          theme.palette.mode === 'dark' ? 'grey.200' : 'grey.200',
+      }}
+      className={clsx(
+        'not-prose relative mt-5 px-2',
+        filename && 'pt-2',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {filename ? (
+        <CodeTabBar filename={filename} filenameColor={filenameColor}>
+          <CopyToClipboardButton
+            filenameColor={filenameColor}
+            textToCopy={getNodeText(children)}
+            toastTitle={copyToClipboardToastTitle}
+            className="relative"
+          />
+        </CodeTabBar>
+      ) : (
+        <CopyToClipboardButton
+          filenameColor={filenameColor}
+          textToCopy={getNodeText(children)}
+          toastTitle={copyToClipboardToastTitle}
+          className="absolute right-3 top-0"
+        />
+      )}
+      <pre className="overflow-x-auto">
+        <code className="font-mono">{children}</code>
+      </pre>
+    </Box>
+  ),
+);

dashboard/src/components/presentational/CodeBlock/CopyToClipboardButton.tsx

@@ -0,0 +1,55 @@
+import { clsx } from 'clsx';
+import { useEffect, useState } from 'react';
+
+import {
+  IconButton,
+  type IconButtonProps,
+} from '@/components/ui/v2/IconButton';
+import { CopyIcon } from '@/components/ui/v2/icons/CopyIcon';
+import { copy } from '@/utils/copy';
+
+export function CopyToClipboardButton({
+  textToCopy,
+  className,
+  title,
+  ...props
+}: {
+  textToCopy: string;
+  title: string;
+} & IconButtonProps) {
+  const [disabled, setDisabled] = useState(true);
+
+  useEffect(() => {
+    // Hide copy button if the browser does not support it
+    if (typeof window !== 'undefined' && !navigator?.clipboard) {
+      console.error(
+        "The browser's Clipboard API is unavailable. The Clipboard API is only available on HTTPS.",
+      );
+      setDisabled(true);
+    } else {
+      setDisabled(false);
+    }
+  }, []);
+
+  // Hide copy button if you would copy an empty string
+  if (!textToCopy || disabled) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      variant="borderless"
+      color="secondary"
+      className={clsx('group', className)}
+      onClick={(event) => {
+        event.stopPropagation();
+
+        copy(textToCopy, title);
+      }}
+      aria-label={textToCopy}
+      {...props}
+    >
+      <CopyIcon className="top-5 h-4 w-4" />
+    </IconButton>
+  );
+}

dashboard/src/components/presentational/CodeBlock/getNodeText.ts

@@ -0,0 +1,17 @@
+// Gets the text from a component as if you selected it with a mouse and copied it.
+export const getNodeText = (node: any): string => {
+  if (['string', 'number'].includes(typeof node)) {
+    // Convert number into string
+    return node.toString();
+  }
+
+  if (node instanceof Array) {
+    return node.map(getNodeText).join('');
+  }
+
+  if (typeof node === 'object' && node?.props?.children) {
+    return getNodeText(node.props.children);
+  }
+
+  return '';
+};

dashboard/src/components/presentational/CodeBlock/index.ts

@@ -0,0 +1,8 @@
+import {
+  CodeBlock,
+  type CodeBlockProps,
+  type CodeBlockPropsBase,
+} from './CodeBlock';
+
+export type { CodeBlockPropsBase, CodeBlockProps };
+export { CodeBlock };

dashboard/src/components/presentational/Logo/Logo.tsx

@@ -11,8 +11,9 @@ function Logo(
   return (
     <svg
       ref={ref}
-      width="32"
-      height="34"
+      width="100%"
+      height="100%"
+      viewBox="0 0 32 34"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-label="Logo of Nhost"

dashboard/src/components/ui/v2/Accordion/Accordion.tsx

@@ -0,0 +1,28 @@
+import { styled } from '@mui/material';
+import type { AccordionProps as MaterialAccordionProps } from '@mui/material/Accordion';
+
+import MaterialAccordion, { accordionClasses } from '@mui/material/Accordion';
+
+export interface AccordionProps extends MaterialAccordionProps {}
+
+const Accordion = styled(MaterialAccordion)<AccordionProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  borderBottom: `transparent solid 0px`,
+  boxShadow: `none`,
+  [`&.${accordionClasses.disabled}`]: {
+    backgroundColor: 'transparent',
+  },
+  [`&.${accordionClasses.root}`]: {
+    overflowX: 'hidden',
+  },
+  [`&.${accordionClasses.expanded}`]: {
+    marginTop: 0,
+    marginBottom: 0,
+  },
+}));
+
+Accordion.displayName = 'NhostAccordion';
+
+export default Accordion;

dashboard/src/components/ui/v2/Accordion/AccordionActions.tsx

@@ -0,0 +1,18 @@
+import { styled } from '@mui/material';
+import type { AccordionActionsProps as MaterialAccordionActionsProps } from '@mui/material/AccordionActions';
+
+import MaterialAccordionActions from '@mui/material/AccordionActions';
+
+export interface AccordionActionsProps extends MaterialAccordionActionsProps {}
+
+const AccordionActions = styled(
+  MaterialAccordionActions,
+)<AccordionActionsProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+}));
+
+AccordionActions.displayName = 'NhostAccordionActions';
+
+export default AccordionActions;

dashboard/src/components/ui/v2/Accordion/AccordionDetails.tsx

@@ -0,0 +1,21 @@
+import { styled } from '@mui/material';
+import type { AccordionDetailsProps as MaterialAccordionDetailsProps } from '@mui/material/AccordionDetails';
+
+import MaterialAccordionDetails from '@mui/material/AccordionDetails';
+
+export interface AccordionDetailsProps extends MaterialAccordionDetailsProps {}
+
+const AccordionDetails = styled(
+  MaterialAccordionDetails,
+)<AccordionDetailsProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  backgroundColor: theme.palette.grey[200],
+  marginTop: 0,
+  marginBottom: 0,
+}));
+
+AccordionDetails.displayName = 'NhostAccordionDetails';
+
+export default AccordionDetails;

dashboard/src/components/ui/v2/Accordion/AccordionSummary.tsx

@@ -0,0 +1,24 @@
+import { styled } from '@mui/material';
+import type { AccordionSummaryProps as MaterialAccordionSummaryProps } from '@mui/material/AccordionSummary';
+
+import MaterialAccordionSummary, {
+  accordionSummaryClasses,
+} from '@mui/material/AccordionSummary';
+
+export interface AccordionSummaryProps extends MaterialAccordionSummaryProps {}
+
+const AccordionSummary = styled(
+  MaterialAccordionSummary,
+)<AccordionSummaryProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  [`&.${accordionSummaryClasses.disabled}`]: {
+    backgroundColor: 'transparent',
+    opacity: 1,
+  },
+}));
+
+AccordionSummary.displayName = 'NhostAccordionSummary';
+
+export default AccordionSummary;

dashboard/src/components/ui/v2/Accordion/index.ts

@@ -0,0 +1,19 @@
+import AccordionRoot from './Accordion';
+import AccordionActions from './AccordionActions';
+import AccordionDetails from './AccordionDetails';
+import AccordionSummary from './AccordionSummary';
+
+export { default as BaseAccordion } from './Accordion';
+export * from './AccordionActions';
+export { default as AccordionActions } from './AccordionActions';
+export * from './AccordionDetails';
+export { default as AccordionDetails } from './AccordionDetails';
+export * from './AccordionSummary';
+export { default as AccordionSummary } from './AccordionSummary';
+
+export const Accordion = {
+  Root: AccordionRoot,
+  Details: AccordionDetails,
+  Summary: AccordionSummary,
+  Actions: AccordionActions,
+};

dashboard/src/components/ui/v2/Badge/Badge.tsx

@@ -0,0 +1,47 @@
+import { styled } from '@mui/material';
+import type { BadgeProps as MaterialBadgeProps } from '@mui/material/Badge';
+import MaterialBadge from '@mui/material/Badge';
+import type { ElementType } from 'react';
+
+export interface BadgeProps extends MaterialBadgeProps {
+  /**
+   * Custom component for the root node.
+   */
+  component?: ElementType;
+}
+
+const Badge = styled(MaterialBadge)<BadgeProps>(({ theme }) => ({
+  fontFamily: theme.typography.fontFamily,
+  fontSize: theme.typography.pxToRem(12),
+  lineHeight: theme.typography.pxToRem(16),
+  fontWeight: 500,
+  padding: 0,
+  '& .MuiBadge-dot': {
+    minWidth: '0.625rem',
+    minHeight: '0.625rem',
+    borderRadius: '50%',
+  },
+  '& .MuiBadge-standard': {
+    padding: 0,
+    margin: 0,
+    minWidth: '0.625rem',
+    height: '0.625rem',
+    borderRadius: '50%',
+  },
+  '& .MuiBadge-colorError': {
+    backgroundColor: theme.palette.error.main,
+  },
+  '& .MuiBadge-colorWarning': {
+    backgroundColor: theme.palette.warning.main,
+  },
+  '& .MuiBadge-colorSuccess': {
+    backgroundColor: theme.palette.success.dark,
+  },
+  '& .MuiBadge-colorSecondary': {
+    backgroundColor: theme.palette.grey[500],
+  },
+}));
+
+Badge.displayName = 'NhostBadge';
+
+export default Badge;

dashboard/src/components/ui/v2/Badge/index.ts

@@ -0,0 +1,2 @@
+export * from './Badge';
+export { default as Badge } from './Badge';

dashboard/src/components/ui/v2/Dialog/DialogRoot.tsx

@@ -1,12 +1,12 @@
 import { Backdrop } from '@/components/ui/v2/Backdrop';
 import type { ButtonProps } from '@/components/ui/v2/Button';
+import type { DialogTitleProps } from '@/components/ui/v2/Dialog';
 import { styled } from '@mui/material';
 import type { DialogProps as MaterialDialogProps } from '@mui/material/Dialog';
 import MaterialDialog from '@mui/material/Dialog';
 import type { DialogActionsProps } from '@mui/material/DialogActions';
 import type { DialogContentProps } from '@mui/material/DialogContent';
 import type { DialogContentTextProps } from '@mui/material/DialogContentText';
-import type { DialogTitleProps } from '@mui/material/DialogTitle';
 import Paper from '@mui/material/Paper';
 import type { ReactNode } from 'react';
 

dashboard/src/components/ui/v2/ErrorToast/ErrorToast.test.tsx

@@ -0,0 +1,85 @@
+import { render, screen } from '@/tests/testUtils';
+import { test } from 'vitest';
+import ErrorToast from './ErrorToast';
+
+const oneMemberByWorkspaceError = {
+  name: 'ApolloError',
+  graphQLErrors: [
+    {
+      message: 'database query error',
+      extensions: {
+        path: '$.selectionSet.insertApp.args.object',
+        code: 'unexpected',
+        internal: {
+          arguments: [],
+          error: {
+            description: null,
+            exec_status: 'FatalError',
+            hint: null,
+            message:
+              'Only one workspace member is allowed for individual plans',
+            status_code: 'P0001',
+          },
+          prepared: false,
+          statement: '.....',
+        },
+      },
+    },
+  ],
+  protocolErrors: [],
+  clientErrors: [],
+  networkError: null,
+  message: 'database query error',
+};
+
+const changeNodeInvalidVersionError = {
+  name: 'ApolloError',
+  graphQLErrors: [
+    {
+      message:
+        'failed to resolve config: failed to validate config: config is not valid: #Config.functions.node.version: 2 errors in empty disjunction: (and 2 more errors)',
+      path: ['replaceConfigRawJSON'],
+    },
+  ],
+  protocolErrors: [],
+  clientErrors: [],
+  networkError: null,
+  message:
+    'failed to resolve config: failed to validate config: config is not valid: #Config.functions.node.version: 2 errors in empty disjunction: (and 2 more errors)',
+};
+
+test('should render the error message when creating a project with an individual plan in a workspace with multiple users', () => {
+  const errorMessage =
+    'An error occurred while creating the project. Please try again.';
+  render(
+    <ErrorToast
+      isVisible
+      errorMessage={errorMessage}
+      error={oneMemberByWorkspaceError}
+      close={() => {}}
+    />,
+  );
+
+  expect(
+    screen.getByText(
+      /Only one workspace member is allowed for individual plans/i,
+    ),
+  ).toBeInTheDocument();
+});
+
+test('should render the error message when changing the node version to an invalid value in configuration editor', () => {
+  const errorMessage =
+    'An error occurred while saving configuration. Please try again.';
+  render(
+    <ErrorToast
+      isVisible
+      errorMessage={errorMessage}
+      error={changeNodeInvalidVersionError}
+      close={() => {}}
+    />,
+  );
+  const regex =
+    /failed to resolve config: failed to validate config: config is not valid: #Config\.functions\.node\.version: 2 errors in empty disjunction: \(and 2 more errors\)/i;
+
+  expect(screen.getByText(regex)).toBeInTheDocument();
+});

dashboard/src/components/ui/v2/ErrorToast/ErrorToast.tsx

@@ -32,7 +32,7 @@ const getInternalErrorMessage = (
     const graphqlError = error.graphQLErrors?.[0];
     const graphqlExtensionsError = graphqlError?.extensions?.internal
       ?.error as { message: string };
-    return graphqlError.message || graphqlExtensionsError?.message || null;
+    return graphqlExtensionsError?.message || graphqlError.message || null;
   }
 
   if (error instanceof Error) {
@@ -112,18 +112,24 @@ export default function ErrorToast({
             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">
+          <div className="flex w-full flex-row items-center justify-between gap-4">
+            <button
+              className="flex-shrink-0"
+              onClick={close}
+              type="button"
+              aria-label="Close"
+            >
               <XIcon className="h-4 w-4 text-white" />
             </button>
-            <span>
+            <span className="flex-grow overflow-hidden break-words">
               {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"
+              className="flex flex-shrink-0 flex-row items-center justify-center space-x-2 text-white"
+              aria-label="Show error details"
             >
               <span>Info</span>
               {showInfo ? (

dashboard/src/components/ui/v2/ThemeProvider/ThemeProvider.tsx

@@ -5,14 +5,21 @@ import CssBaseline from '@mui/material/CssBaseline';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { ThemeProvider as MaterialThemeProvider } from '@mui/material/styles';
 import Head from 'next/head';
-import type { PropsWithChildren } from 'react';
+import { useEffect, type PropsWithChildren } from 'react';
 
 function ThemeProviderContent({
   children,
   color: manualColor,
 }: PropsWithChildren<{ color?: 'light' | 'dark' }>) {
-  const { color } = useColorPreference();
-  const theme = createTheme(manualColor || color);
+  const { color: preferredColor } = useColorPreference();
+  const theme = createTheme(manualColor || preferredColor);
+
+  // Use effect to set the class on the root html tag
+  useEffect(() => {
+    const rootElement = document.documentElement;
+    rootElement.classList.remove('light', 'dark'); // Remove previous classes
+    rootElement.classList.add(preferredColor); // Add the current class
+  }, [preferredColor]);
 
   return (
     <MaterialThemeProvider theme={theme}>
@@ -22,13 +29,14 @@ function ThemeProviderContent({
           'html, body': {
             backgroundColor: `${theme.palette.background.default} !important`,
           },
+          html: {
+            class: `${preferredColor}`,
+          },
         }}
       />
-
       <Head>
         <meta name="theme-color" content={theme.palette.background.paper} />
       </Head>
-
       {children}
     </MaterialThemeProvider>
   );
@@ -36,9 +44,9 @@ function ThemeProviderContent({
 
 export interface ThemeProviderProps extends PropsWithChildren<unknown> {
   /**
-   * The key used to store the color preference in the local storage.
+   * The key used to store the color preference in local storage.
    *
-   * @default 'color-mode'
+   * @default 'color-preference'
    */
   colorPreferenceStorageKey?: string;
   /**

dashboard/src/components/ui/v2/createTheme/createTheme.ts

@@ -8,6 +8,17 @@ import { createTheme as createMuiTheme } from '@mui/material/styles';
  * @param mode - Color mode
  * @returns Material UI theme
  */
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    beige: Palette['primary'];
+  }
+
+  interface PaletteOptions {
+    beige?: PaletteOptions['primary'];
+  }
+}
+
 export default function createTheme(mode: PaletteMode) {
   return createMuiTheme({
     shape: {

dashboard/src/components/ui/v2/icons/CommunityIcon/CommunityIcon.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+export default function CommunityIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5.5 10C7.29493 10 8.75 8.54493 8.75 6.75C8.75 4.95507 7.29493 3.5 5.5 3.5C3.70507 3.5 2.25 4.95507 2.25 6.75C2.25 8.54493 3.70507 10 5.5 10Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M9.71338 3.62107C10.1604 3.49513 10.6292 3.46644 11.0882 3.53693C11.5473 3.60743 11.9859 3.77547 12.3745 4.02975C12.7631 4.28403 13.0927 4.61863 13.3411 5.01102C13.5896 5.40342 13.751 5.84449 13.8146 6.30453C13.8782 6.76457 13.8425 7.2329 13.7098 7.67797C13.5772 8.12304 13.3507 8.53452 13.0457 8.8847C12.7406 9.23487 12.364 9.51561 11.9413 9.70799C11.5187 9.90038 11.0596 9.99996 10.5952 10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M1 12.3373C1.50758 11.6153 2.18143 11.026 2.96466 10.6192C3.74788 10.2124 4.61748 10 5.50005 10C6.38262 9.99997 7.25224 10.2123 8.0355 10.619C8.81875 11.0258 9.49264 11.615 10.0003 12.337"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.5952 10C11.4779 9.99936 12.3477 10.2114 13.131 10.6182C13.9143 11.025 14.5881 11.6146 15.0952 12.337"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

dashboard/src/components/ui/v2/icons/CommunityIcon/index.ts

@@ -0,0 +1 @@
+export { default as CommunityIcon } from './CommunityIcon';

dashboard/src/components/ui/v2/icons/DiscordIcon/DiscordIcon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export default function DiscordIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={14}
+      height={14}
+      viewBox="0 0 14 14"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.40571 1.5H12.5943C13.3691 1.5 14 2.13086 14 2.91257V15.2143L12.5257 13.9114L11.696 13.1434L10.8183 12.3274L11.1817 13.596H3.40571C2.63086 13.596 2 12.9651 2 12.1834V2.91257C2 2.13086 2.63086 1.5 3.40571 1.5ZM9.49486 9.9C9.70057 10.1606 9.94743 10.4554 9.94743 10.4554C11.4629 10.4074 12.0457 9.41314 12.0457 9.41314C12.0457 7.20514 11.0583 5.41543 11.0583 5.41543C10.0709 4.67486 9.13143 4.69543 9.13143 4.69543L9.03543 4.80514C10.2011 5.16171 10.7429 5.676 10.7429 5.676C10.0297 5.28514 9.33029 5.09314 8.67886 5.01771C8.18514 4.96286 7.712 4.97657 7.29371 5.03143C7.2578 5.03143 7.2271 5.03665 7.19251 5.04254C7.18748 5.0434 7.18237 5.04427 7.17714 5.04514C6.93714 5.06571 6.35429 5.15486 5.62057 5.47714C5.36686 5.59371 5.216 5.676 5.216 5.676C5.216 5.676 5.78514 5.13429 7.01943 4.77771L6.95086 4.69543C6.95086 4.69543 6.01143 4.67486 5.024 5.41543C5.024 5.41543 4.03657 7.20514 4.03657 9.41314C4.03657 9.41314 4.61257 10.4074 6.128 10.4554C6.128 10.4554 6.38171 10.1469 6.58743 9.88628C5.71657 9.62571 5.38743 9.07714 5.38743 9.07714C5.38743 9.07714 5.456 9.12514 5.57943 9.19371C5.58629 9.20057 5.59314 9.20743 5.60686 9.21428C5.61714 9.22114 5.62743 9.22628 5.63771 9.23143C5.648 9.23657 5.65829 9.24171 5.66857 9.24857C5.84 9.34457 6.01143 9.42 6.16914 9.48171C6.45029 9.59143 6.78629 9.70114 7.17714 9.77657C7.69143 9.87257 8.29486 9.90686 8.95314 9.78343C9.27543 9.72857 9.60457 9.63257 9.94743 9.48857C10.1874 9.39943 10.4549 9.26914 10.736 9.084C10.736 9.084 10.3931 9.64628 9.49486 9.9ZM6.05942 8.01421C6.05942 7.59593 6.36799 7.25307 6.75885 7.25307C7.1497 7.25307 7.46513 7.59593 7.45827 8.01421C7.45827 8.4325 7.1497 8.77536 6.75885 8.77536C6.37485 8.77536 6.05942 8.4325 6.05942 8.01421ZM8.56227 8.01421C8.56227 7.59593 8.87084 7.25307 9.2617 7.25307C9.65256 7.25307 9.96113 7.59593 9.96113 8.01421C9.96113 8.4325 9.65256 8.77536 9.2617 8.77536C8.8777 8.77536 8.56227 8.4325 8.56227 8.01421Z"
+          fill="currentColor"
+        />
+      </svg>
+    </svg>
+  );
+}

dashboard/src/components/ui/v2/icons/DiscordIcon/index.ts

@@ -0,0 +1 @@
+export { default as DiscordIcon } from './DiscordIcon';

dashboard/src/components/ui/v2/icons/EnvelopeIcon/EnvelopeIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+export default function EnvelopeIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={14}
+      height={14}
+      viewBox="0 0 14 14"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M2 3.5H14V12C14 12.1326 13.9473 12.2598 13.8536 12.3536C13.7598 12.4473 13.6326 12.5 13.5 12.5H2.5C2.36739 12.5 2.24021 12.4473 2.14645 12.3536C2.05268 12.2598 2 12.1326 2 12V3.5Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14 3.5L8 9L2 3.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </svg>
+  );
+}

dashboard/src/components/ui/v2/icons/EnvelopeIcon/index.ts

@@ -0,0 +1 @@
+export { default as EnvelopeIcon } from './EnvelopeIcon';

dashboard/src/components/ui/v2/icons/ExclamationFilledIcon/ExclamationFilledIcon.tsx

@@ -0,0 +1,33 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+function ExclamationFilledIcon(
+  props: IconProps,
+  ref: ForwardedRef<SVGSVGElement>,
+) {
+  return (
+    <SvgIcon
+      width="7"
+      height="7"
+      viewBox="0 0 7 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Exclamation mark"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 3.5C7 5.433 5.433 7 3.5 7C1.567 7 0 5.433 0 3.5C0 1.567 1.567 0 3.5 0C5.433 0 7 1.567 7 3.5ZM3.96667 5.36667C3.96667 5.6244 3.75773 5.83333 3.5 5.83333C3.24227 5.83333 3.03333 5.6244 3.03333 5.36667C3.03333 5.10893 3.24227 4.9 3.5 4.9C3.75773 4.9 3.96667 5.10893 3.96667 5.36667ZM3.5 1.16667C3.20564 1.16667 2.97296 1.41615 2.99345 1.70979L3.16724 4.20075C3.17943 4.37554 3.32478 4.51111 3.5 4.51111C3.67522 4.51111 3.82057 4.37554 3.83276 4.20075L4.00655 1.70979C4.02704 1.41615 3.79436 1.16667 3.5 1.16667Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+ExclamationFilledIcon.displayName = 'NhostExclamationFilledIcon';
+
+export default forwardRef(ExclamationFilledIcon);

dashboard/src/components/ui/v2/icons/ExclamationFilledIcon/index.ts

@@ -0,0 +1 @@
+export { default as ExclamationFilledIcon } from './ExclamationFilledIcon';