chore: update versions (#2956 )

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.0.5 # @nhost/dashboard ## 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 - 87a37cf: fix: remove unnecessary isPlatform check from verify button disable logic on custom domains - @nhost/react-apollo@12.0.2 - @nhost/nextjs@2.1.16 ## 1.16.2 ### Patch Changes - a9413af: fix: update `GetAllWorkspacesAndProjects` query polling to use exponential backoff - @nhost/react-apollo@12.0.1 - @nhost/nextjs@2.1.15 ## 1.16.1 ### Patch Changes - @nhost/react-apollo@12.0.0 - @nhost/nextjs@2.1.14 ## 1.16.0 ### Minor Changes - c6d5c5c: feat: add toggle switch to enable/disable public access in the database settings ## 1.15.2 ### Patch Changes - @nhost/react-apollo@11.0.4 - @nhost/nextjs@2.1.13 ## 1.15.1 ### Patch Changes - @nhost/react-apollo@11.0.3 - @nhost/nextjs@2.1.12 ## 1.15.0 ### Minor Changes - a7bde37: feat: send metadata in the edit form ### Patch Changes - 1bc615b: feat: improve error message handling in `ErrorToast` component - @nhost/react-apollo@11.0.2 - @nhost/nextjs@2.1.11 ## 1.14.0 ### Minor Changes - a448d7d: feat: allow configuring postmark and delete SMTP settings ## 1.13.3 ### Patch Changes - 5924bc3: fix: include password in `GetSmtpSettings` query - c5ad634: fix: resolved an issue where one-click install links were broken on Safari - 7278991: fix: update graphql auto-embeddings configuration to use String type for model field ## 1.13.2 ### Patch Changes - 026f84f: fix: use configuration server URL from environment variable ## 1.13.1 ### Patch Changes - 7e9a2ce: fix: resolve issue where run services form fails to open ## 1.13.0 ### Minor Changes - dd5d262: feat: add model field to the auto-embeddings form - 09962be: feat: enable settings and run services when running the dashboard locally - 9cdecb6: feat: enable users to update their email address from the account settings page ## 1.12.2 ### Patch Changes - c195c51: fix: send email upon signin for unverified users ## 1.12.1 ### Patch Changes - 93ebdf8: fix: use service urls when initilizaing NhostClient running local dashboard - @nhost/react-apollo@11.0.1 - @nhost/nextjs@2.1.10 ## 1.12.0 ### Minor Changes - f242e4b: feat: add connect with github to the user's account settings - 768ca17: chore: update dependencies - d62bd0f: fix: "Track this" option within the SQL editor now correctly updates the metadata - 91c2bb6: feat: refactor sign-in and sign-up pages to enforce email verification ### Patch Changes - 943831f: fix: resolve an error toast issue when unpausing a project - Updated dependencies [768ca17] - @nhost/react-apollo@11.0.0 - @nhost/nextjs@2.1.9 ## 1.11.2 ### Patch Changes - @nhost/react-apollo@10.0.2 - @nhost/nextjs@2.1.8 ## 1.11.1 ### Patch Changes - 981404f: fix: set default value for healthCheck field validation ## 1.11.0 ### Minor Changes - 7789469: chore: upgrade dependency `@graphql-codegen/cli` to `5.0.2` to address vulnerability - 6c11b75: feat: add update user displayName section in account settings ### Patch Changes - @nhost/react-apollo@10.0.1 - @nhost/nextjs@2.1.7 ## 1.10.0 ### Minor Changes - 49a80c2: chore: update dependencies - 150c04a: feat: add healthcheck config to run services ### Patch Changes - e03f141: fix: allow insert, update and delete on tables in `auth` and `storage` schemas - 28676f4: feat: add min postgres version check to enable the ai service - Updated dependencies [49a80c2] - @nhost/react-apollo@10.0.0 - @nhost/nextjs@2.1.6 ## 1.9.0 ### Minor Changes - d86e5c9: feat: add support for filtering the logs using a RegExp ## 1.8.3 ### Patch Changes - @nhost/react-apollo@9.0.3 - @nhost/nextjs@2.1.5 ## 1.8.2 ### Patch Changes - 6df4f02: fix: use custom error toast and show correct message when sending an invite ## 1.8.1 ### Patch Changes - @nhost/react-apollo@9.0.2 - @nhost/nextjs@2.1.4 ## 1.8.0 ### Minor Changes - 713d53c: feat: add catch-all route for workspace/project - useful for documentation ### Patch Changes - 3db2999: fix: refresh table list after running SQL using the editor - 3c4dd55: fix: handle `Error` objects properly in the `ErrorToast` component - 92b434e: fix: resolve an issue where the checkbox in the data-grid header did not select all rows - @nhost/react-apollo@9.0.1 - @nhost/nextjs@2.1.3 ## 1.7.0 ### Minor Changes - 0d8d0eb: Update docs and dashboard references ## 1.6.9 ### Patch Changes - @nhost/react-apollo@9.0.0 - @nhost/nextjs@2.1.2 ## 1.6.8 ### Patch Changes - @nhost/react-apollo@8.0.1 - @nhost/nextjs@2.1.1 ## 1.6.7 ### Patch Changes - 5ef5189: fix: update `@apollo/client` to `3.9.4` to fix a cache bug ## 1.6.6 ### Patch Changes - 3ba485e: fix: added discord.com to connect-src - e5bab6a: chore: update dependencies - Updated dependencies [b19ffed] - Updated dependencies [e5bab6a] - @nhost/nextjs@2.1.0 - @nhost/react-apollo@8.0.0 ## 1.6.5 ### Patch Changes - ba73bb4: fix: update ErrorToast component to show the internal graphql error - d5337ff: fix: utilize accumulator in the creation of validation schema within data grid utils ## 1.6.4 ### Patch Changes - 7c2a1c2: feat: show error and debug info in the error toast ## 1.6.3 ### Patch Changes - 6b8aad5: fix: add bare nhost.run to CSP ## 1.6.2 ### Patch Changes - b18edc0: feat: added CSP and X-Frame-Options ## 1.6.1 ### Patch Changes - 8d91f71: chore: update deps and enable pnpm audit - 3b8473b: chore: update turbo to `1.11.3` and pnpm to `8.10.5` in Dockerfile - Updated dependencies [8d91f71] - @nhost/react-apollo@7.0.2 - @nhost/nextjs@2.0.2 ## 1.6.0 ### Minor Changes - 3ff1c2b53: fix: show upgrade option for pro projects ## 1.5.0 ### Minor Changes - c2ef17c0a: feat: add support for new Team plan ## 1.4.0 ### Minor Changes - 7883bbcbd: feat: don't show deprecated plans - 44be6dc0a: feat: set redirectTo during sign-in to support preview environments ### Patch Changes - 3c3594898: fix: allow access to graphite when configured running in local dashboard - 32c246b7a: chore: update docs icon ## 1.3.2 ### Patch Changes - 174b4165b: chore: use env variables when running graphql codegen - 7c977e714: chore: change `Allowed Roles` to `Default Allowed Roles` - 46f028b9f: fix: remove hardcoded ai version setting ## 1.3.1 ### Patch Changes - af33c21d1: chore: remove backendUrl deprecation notice and remove all references to `providersUpdated` ## 1.3.0 ### Minor Changes - 04784d880: Fix graphite's default version ## 1.2.0 ### Minor Changes - 5733162ed: feat: add settings and ui for graphite ## 1.1.0 ### Minor Changes - e2b79b5ec: chore: remove sharp from deps ## 1.0.1 ### Patch Changes - @nhost/react-apollo@7.0.1 - @nhost/nextjs@2.0.1 ## 1.0.0 ### Major Changes - bc9eff6e4: chore: remove support for using backendUrl when instantiating the Nhost client ### Patch Changes - Updated dependencies [bc9eff6e4] - @nhost/nextjs@2.0.0 - @nhost/react-apollo@7.0.0 ## 0.21.1 ### Patch Changes - 97ced73a3: fix(dashboard): prevent dashboard from resolving secrets ## 0.21.0 ### Minor Changes - ed1a8d458: Update alert message on increasing PostgreSQL's volume capacity - 2e2248fd4: feat(dashboard): add SQL editor ## 0.20.28 ### Patch Changes - 7c2c31082: feat: add support for users to delete their account - @nhost/react-apollo@6.0.1 - @nhost/nextjs@1.13.40 ## 0.20.27 ### Patch Changes - fa79b7709: chore(dashboard): tweaks and fixes to the service form and dialog - 8df84d782: fix(dashboard): allow resetting custom domains - @nhost/react-apollo@6.0.0 - @nhost/nextjs@1.13.39 ## 0.20.26 ### Patch Changes - 331ba0376: feat(dashboard): add postgres storage capacity modifier in the settings - b7f801874: feat(dashboard): add new settings page for custom domains ## 0.20.25 ### Patch Changes - @nhost/react-apollo@5.0.38 ## 0.20.24 ### Patch Changes - e10389ecf: fix(dashboard): disable run tab when developing locally - @nhost/react-apollo@5.0.37 ## 0.20.23 ### Patch Changes - c01568a7d: chore(dashboard): show alert to update oauth providers ## 0.20.22 ### Patch Changes - c3efb7ec8: feat(dashboard): query latest announcement from platform ## 0.20.21 ### Patch Changes - 3e46d3873: chore: update link to node18 announcement ## 0.20.20 ### Patch Changes - @nhost/react-apollo@5.0.36 - @nhost/nextjs@1.13.38 ## 0.20.19 ### Patch Changes - 75c4c8ae3: feat(dashboard): make env value input multiline ## 0.20.18 ### Patch Changes - 425d485f8: fix(dashboard): make sure dedicated resources pricing follows total resources ## 0.20.17 ### Patch Changes - ae324f67f: fix(dashboard): remove unused graphql fields ## 0.20.16 ### Patch Changes - df5b4302c: chore(dashboard): remove run feature flag - bf4a1f6c2: feat(dashboard): fetch auth, postgres, hasura and storage versions from dashboard - 34fc08ca7: fix(dashboard/run): show correct private registry in service details - 885d10620: chore(dashboard): change feedback to contact us ## 0.20.15 ### Patch Changes - ed16c8b5d: feat(run): add a confirmation dialog when deleting a run service - 216990888: fix(run): center loading indicator when selecting a project ## 0.20.14 ### Patch Changes - 9fbea9787: feat: add node18 announcement ## 0.20.13 ### Patch Changes - e84acf469: fix(run): handle subdomain undefined error when creating a new service ## 0.20.12 ### Patch Changes - b7c799d62: feat(run): add dialog to copy registry and URLs ## 0.20.11 ### Patch Changes - 8903e6abd: fix(dashboard): show correct egress limit in usage stats ## 0.20.10 ### Patch Changes - 666a75a23: feat(dashboard): add functions execution time and egress volume to usage stats ## 0.20.9 ### Patch Changes - 5e1e80aa8: fix(dashboard): show correct locales in user details - @nhost/react-apollo@5.0.35 - @nhost/nextjs@1.13.37 ## 0.20.8 ### Patch Changes - @nhost/react-apollo@5.0.34 - @nhost/nextjs@1.13.36 ## 0.20.7 ### Patch Changes - 4a7ede11e: fix: distinguish files that were not uploaded - 202b64723: feat(nhost-run): add support for one-click-install run services - 074a0fa11: feat(dashboard): add settings toggle to enable/disable antivirus - @nhost/react-apollo@5.0.33 - @nhost/nextjs@1.13.35 ## 0.20.6 ### Patch Changes - b20761e97: feat(services): add pricing info and confirmation dialog - 90df6d81d: fix(services): handle null values when editing a service - aa8508467: fix: query service logs correctly feat: enable multiline support for environment value input ## 0.20.5 ### Patch Changes - 8d7f84b8d: fix: make announcement adapt to theme ## 0.20.4 ### Patch Changes - 3b75bfce2: fix: make announcement close properly - f49819075: fix: show correct values when dedicated resources are disabled ## 0.20.3 ### Patch Changes - e643bd362: fix(services): fix errors when config is null - bcdab66bf: feat: add annoucement for nhost run - f967a2e59: added note about storage not being able to be downsized - 311c7756d: chore(services): consistent naming for compute ## 0.20.2 ### Patch Changes - 9073182d5: chore(dashboard): bump `turbo` to 1.10.11 - ece717d6e: feat(logs): show services in the logs page - 82b335311: feat(metrics): change grafana link to point to the dashboards - b135ef695: fix(services): set command as optional and set min replicas to 0 ## 0.20.1 ### Patch Changes - 3d5c34f4c: fix(auth): fix users pagination limit ## 0.20.0 ### Minor Changes - c99d117d1: feat(services): add support for custom services ## 0.19.2 ### Patch Changes - face99ccd: chore(deps): bump turbo version - cfe527307: style: tweak pull config warning in dark mode - a9d7da8af: chore(deps): update dependency @types/pluralize to ^0.0.30 - 9aa4371ef: chore: add hasura-auth version 0.21.2 - d14e112bf: chore(deps): update dependency prettier-plugin-tailwindcss to ^0.4.0 - d3e8bb94a: chore(deps): update dependency vite-plugin-dts to v3 ## 0.19.1 ### Patch Changes - @nhost/react-apollo@5.0.32 - @nhost/nextjs@1.13.34 ## 0.19.0 ### Minor Changes - 9c61c69a7: chore(dashboard):add postgres 14.6-20230705-1 to the version selector ### Patch Changes - 47bda15ff: feat(settings): add warning to pull config ## 0.18.0 ### Minor Changes - ee0b9b8ed: chore(dashboard):add hasura v2.28.2 and v2.29.0 to the version selector ## 0.17.20 ### Patch Changes - @nhost/react-apollo@5.0.31 - @nhost/nextjs@1.13.33 ## 0.17.19 ### Patch Changes - f866120a6: fix(users): use the password length from the config ## 0.17.18 ### Patch Changes - @nhost/react-apollo@5.0.30 - @nhost/nextjs@1.13.32 ## 0.17.17 ### Patch Changes - ea7b102c0: fix(pat): highlight expired tokens ## 0.17.16 ### Patch Changes - b3b64a3b7: chore(deps): bump `@types/react` to `v18.2.14` and `@types/react-dom` to `v18.2.6` - 32b221f94: chore(deps): bump `graphiql` to `v3` - 3a56c12df: chore(deps): bump `turbo` to `v1.10.6` - Updated dependencies [b3b64a3b7] - @nhost/react-apollo@5.0.29 - @nhost/nextjs@1.13.31 ## 0.17.15 ### Patch Changes - f41fdc12a: chore(deps): bump `turbo` to `1.10.5` - 6199c1c55: fix(projects): don't redirect to 404 page - Updated dependencies [07a45fde0] - @nhost/react-apollo@5.0.28 - @nhost/nextjs@1.13.30 ## 0.17.14 ### Patch Changes - 80b22724d: chore(deps): bump `@types/react` to `v18.2.13`, `@types/react-dom` to `v18.2.6` and `@storybook/testing-library` to `v0.2.0` ## 0.17.13 ### Patch Changes - cc02902cb: chore(docs): update environment variable documentation ## 0.17.12 ### Patch Changes - 660d339e1: fix(storybook): don't break storybook - 660d339e1: fix(tests): prevent warnings during tests - @nhost/react-apollo@5.0.27 - @nhost/nextjs@1.13.29 ## 0.17.11 ### Patch Changes - bd4d0c270: chore(dashboard):add postgres 14.6-20230613-1 to the version selector ## 0.17.10 ### Patch Changes - c8c2a10b2: fix(database): don't break the password reset flow - e70b45498: chore(deps): bump `@types/react` to `v18.2.12` and `@types/react-dom` to `v18.2.5` ## 0.17.9 ### Patch Changes - 842055099: chore(deps): bump `turbo` to `v1.10.3` and `pnpm` to `v8.6.2` - fd12aa0a8: chore(projects): remove the postgres password input from the project creation screen - 022b76e78: chore(deps): bump `@types/react` to `v18.2.11` - 3555ab2b7: chore(deps): bump `vitest` monorepo to `v0.32.0` - c43e54922: feat(backups): add download button to backups ## 0.17.8 ### Patch Changes - d0457fe5c: feat(settings): improve the dashboard and config parity - @nhost/react-apollo@5.0.26 - @nhost/nextjs@1.13.28 ## 0.17.7 ### Patch Changes - 4f0368b95: fix(account): don't break account settings page ## 0.17.6 ### Patch Changes - 64a8f41d0: chore(resources): lower the maximum allowed resources per service ## 0.17.5 ### Patch Changes - @nhost/react-apollo@5.0.25 - @nhost/nextjs@1.13.27 ## 0.17.4 ### Patch Changes - 9b1d0f7a5: fix(deployments): use correct timestamp for deployment details - 6d2963ffa: chore(deps): bump `@types/react` to `v18.2.8` - 8871267b9: chore(deps): downgrade `pnpm` to `v8.5.1` because of no Turborepo support ## 0.17.3 ### Patch Changes - 01eeef9de: chore(misc): under the hood improvements - 21e13db05: chore(deps): bump `@types/react` to `v18.2.7` and `turbo` to `v1.10.1` - f16433ae6: chore(secrets): allow empty secrets and environment variables - aa3c62989: chore(cli): bump Nhost CLI version to v1.0 - @nhost/react-apollo@5.0.24 - @nhost/nextjs@1.13.26 ## 0.17.2 ### Patch Changes - 88a4983f: chore(misc): under the hood improvements ## 0.17.1 ### Patch Changes - 9b0d4dde: feat(secrets): enable secrets ## 0.17.0 ### Minor Changes - 15d84a19: Add postgres 14.6-20230525 ## 0.16.14 ### Patch Changes - 4c626174: chore: updated import paths, improved directory structure - cc047b71: chore(deps): bump `@fontsource` monorepo to `v5.0.0` - 99edd012: feat(account): add support for personal access tokens ## 0.16.13 ### Patch Changes - 78c7109c: feat(settings): allow selecting service versions ## 0.16.12 ### Patch Changes - 399009d6: fix(gql): don't enter an infinite loop when fetching remote app data - 329e5a91: fix(deployments): use the same sorting of deployments everywhere - 6d559d6e: chore(settings): add under the hood improvements to the settings page - 12eb236c: chore(deps): bump `prettier-plugin-tailwindcss` to `v0.3.0` - f9b81a2a: chore(deps): bump `turbo` to `v1.9.8` - 1345741b: fix(projects): don't redirect to 404 on project creation - Updated dependencies [7fea29a8] - @nhost/react-apollo@5.0.23 - @nhost/nextjs@1.13.25 ## 0.16.11 ### Patch Changes - 1230b722: fix(projects): don't redirect to 404 on when the project is renamed - @nhost/react-apollo@5.0.22 - @nhost/nextjs@1.13.24 ## 0.16.10 ### Patch Changes - Updated dependencies [da03bf39] - @nhost/react-apollo@5.0.21 - @nhost/nextjs@1.13.23 ## 0.16.9 ### Patch Changes - 349aac36: fix(settings): use region domain when constructing the postgres connection string ## 0.16.8 ### Patch Changes - 20fb69fa: chore(projects): change the way how API URLs are constructed ## 0.16.7 ### Patch Changes - 49f9b837: chore(docker): bump `pnpm` to `v8.4.0` and `turbo` to `v1.9.3` - 3f478a4e: chore(deps): bump `vitest` to `v0.31.0`, `@types/react` to `v18.2.6` and `@types/react-dom` to `v18.2.4` ## 0.16.6 ### Patch Changes - d926f156: fix(projects): redirect to 404 when an invalid project is opened - 49b99728: fix(projects): disable features for non-owner members of workspaces ## 0.16.5 ### Patch Changes - 12e2855f: chore(deps): bump `jsdom` to v22 - e4972b83: feat(metrics): add Grafana page ## 0.16.4 ### Patch Changes - 3f396a9e: fix(projects): unpause after upgrading a paused project to pro - 3f396a9e: fix(projects): don't redirect to 404 page after project creation ## 0.16.3 ### Patch Changes - Updated dependencies [90c60311] - @nhost/react-apollo@5.0.20 - @nhost/nextjs@1.13.22 ## 0.16.2 ### Patch Changes - 0f34f0c6: fix(projects): disallow downgrading to free plan - 8da291ad: chore(deps): bump `@types/react` to v18.2.0 and `@types/react-dom` to v18.2.1 ## 0.16.1 ### Patch Changes - adc828a5: fix(gql): don't enter an infinite loop when fetching remote app data ## 0.16.0 ### Minor Changes - 2fb1145f: feat(compute): add support for replicas ### Patch Changes - d8ceccec: chore(env): remove deprecated `NHOST_BACKEND_URL` environment variable ## 0.15.2 ### Patch Changes - 84b84ab7: fix(projects): filter projects by workspace ## 0.15.1 ### Patch Changes - 2faf7907: chore(deps): bump `graphql-request` to v6 - f1b5a944: chore(deps): bump `@vitejs/plugin-react` to v4 - 7f1785ac: chore(deps): bump `@types/react` to v18.0.37 - @nhost/react-apollo@5.0.19 ## 0.15.0 ### Minor Changes - 85889ee8: feat(dashboard): add Compute management to the settings ## 0.14.8 ### Patch Changes - 668c8771: chore(dialogs): unify dialog management of payment dialogs ## 0.14.7 ### Patch Changes - d4ccc656: chore: cleanup unused code - @nhost/react-apollo@5.0.18 - @nhost/nextjs@1.13.21 ## 0.14.6 ### Patch Changes - b299cfc9: chore(deps): bump `vitest` to v0.30.0 - 411cb65b: chore(projects): refactor workspace and project hooks - 43b1b144: chore(deps): bump `@types/react` to v18.0.34 and `@types/react-dom` to v18.0.11 - Updated dependencies [43b1b144] - @nhost/react-apollo@5.0.17 - @nhost/nextjs@1.13.20 ## 0.14.5 ### Patch Changes - ba0d57ee: fix(i18n): revert i18n library - 3328ed05: feat(projects): improve overview when there is an error ## 0.14.4 ### Patch Changes - 5e0920ba: chore(deps): bump `next-seo` to v6 - 706c9dc3: chore(deps): bump `@types/react` to 18.0.33 - 99f8f6b3: feat(metrics): show metrics on the overview ## 0.14.3 ### Patch Changes - @nhost/react-apollo@5.0.16 ## 0.14.2 ### Patch Changes - 3cb67300: fix(logs): don't break UI when clearing time picker - 7453bf3b: feat(projects): show project creator info - c166dad0: chore(tests): improve auth page tests - 6a290bb2: chore(deps): bump `@types/react` to 18.0.32 ## 0.14.1 ### Patch Changes - @nhost/react-apollo@5.0.15 - @nhost/nextjs@1.13.19 ## 0.14.0 ### Minor Changes - 6e1f03ea: feat(dashboard): add support for the Azure AD provider ### Patch Changes - 1bd2c373: chore(deps): bump `turbo` to 1.8.6 - d329b621: chore(deps): bump `@types/react` to 18.0.30 - cb248f0d: fix(tests): avoid name collision in database tests - 867c8076: chore(deps): bump `@types/react` to 18.0.29 ## 0.13.10 ### Patch Changes - e93b06ab: fix(dashboard): remove left margin from workspace list on mobile - 1c4806bf: chore(deps): bump `sharp` to 0.32.0 - @nhost/react-apollo@5.0.14 - @nhost/nextjs@1.13.18 ## 0.13.9 ### Patch Changes - 912ed76c: chore(dashboard): bump `@apollo/client` to 3.7.10 - Updated dependencies [912ed76c] - @nhost/react-apollo@5.0.13 ## 0.13.8 ### Patch Changes - 7c127372: chore(dashboard): bump `react-error-boundary` to v4 ## 0.13.7 ### Patch Changes - 9130ab12: chore(dashboard): bump `yup` to v1 and `@hookform/resolvers` to v3 ## 0.13.6 ### Patch Changes - 253dd235: using new mutation to create projects + refactor Create Project page. ## 0.13.5 ### Patch Changes - @nhost/react-apollo@5.0.12 - @nhost/nextjs@1.13.17 ## 0.13.4 ### Patch Changes - b48bc034: fix(dashboard): disable new users - 798e591b: fix(dashboard): show correct date in data grid ## 0.13.3 ### Patch Changes - bfb4c1a6: chore(dashboard): remove `useAxios` property - d8d8394b: Dashboard: allow to override hasura admin secret in docker - Updated dependencies [ce1ee40d] - @nhost/nextjs@1.13.16 - @nhost/react-apollo@5.0.11 ## 0.13.2 ### Patch Changes - beed2eba: Fix docker entrypoint for dashboard - 2c8559a3: fix(dashboard): refresh project list after deleting a project - 4329d048: chore(dashboard): bump `graphiql` dependencies ## 0.13.1 ### Patch Changes - cbb1fc5b: chore(dashboard): cleanup GraphQL operations ## 0.13.0 ### Minor Changes - 088584e7: feat(dashboard): add support for custom local subdomains ### Patch Changes - 2ac90dfd: fix(dashboard): improve mobile responsive layout - Updated dependencies [f375eacc] - @nhost/nextjs@1.13.15 - @nhost/react-apollo@5.0.10 ## 0.12.4 ### Patch Changes - @nhost/react-apollo@5.0.9 - @nhost/nextjs@1.13.14 ## 0.12.3 ### Patch Changes - 2b1338f7: chore(dashboard): bump `turbo` to 1.8.3 - 5223ee93: fix(dashboard): show correct deployment status on the main page - 850a049c: chore(deps): update docker/build-push-action action to v4 - Updated dependencies [850a049c] - @nhost/nextjs@1.13.13 - @nhost/react-apollo@5.0.8 ## 0.12.2 ### Patch Changes - 4bf40995: chore(deps): bump `typescript` to `4.9.5` - 8bb097c9: chore(deps): bump `vitest` - 35d52aab: chore(deps): replace `cross-fetch` with `isomorphic-unfetch` - Updated dependencies [4bf40995] - Updated dependencies [8bb097c9] - Updated dependencies [35d52aab] - @nhost/react-apollo@5.0.7 - @nhost/nextjs@1.13.12 ## 0.12.1 ### Patch Changes - c96d7ccd: fix(dashboard): fix docker builds ## 0.12.0 ### Minor Changes - d1671210: feat(dashboard): use mimir to manage project configuration ### Patch Changes - f65e4de9: chore(deps): bump @graphql-codegen monorepo to v3 ## 0.11.20 ### Patch Changes - 4b4f0d01: chore(dashboard): improve dialog management ## 0.11.19 ### Patch Changes - @nhost/react-apollo@5.0.6 - @nhost/nextjs@1.13.11 ## 0.11.18 ### Patch Changes - 01318860: fix(nhost-js): use correct URL for functions requests - Updated dependencies [01318860] - @nhost/react-apollo@5.0.5 - @nhost/nextjs@1.13.10 ## 0.11.17 ### Patch Changes - f673adea: fix(dashboard): set correct Content-Type for user creation - 445d8ef4: chore(deps): bump `@nhost/react-apollo` to 5.0.4 - 445d8ef4: chore(deps): bump `@nhost/nextjs` to 1.13.9 - 0368663d: fix(dashboard): allow permission editing for auth and storage schemas - Updated dependencies [445d8ef4] - Updated dependencies [445d8ef4] - @nhost/react-apollo@5.0.4 - @nhost/nextjs@1.13.9 ## 0.11.16 ### Patch Changes - b755e908: fix(dashboard): use correct date for last seen - 2d9145f9: chore(deps): revert GraphQL client - 1ddf704c: fix(dashboard): don't show false positive message for failed user creation - @nhost/react-apollo@5.0.3 - @nhost/nextjs@1.13.8 ## 0.11.15 ### Patch Changes - @nhost/react-apollo@5.0.2 - @nhost/nextjs@1.13.7 ## 0.11.14 ### Patch Changes - 2cc18dcb: fix(dashboard): prevent permission editor dropdown from being always open ## 0.11.13 ### Patch Changes - 3343a363: chore(dashboard): bump `@testing-library/react` to v14 and `@testing-library/dom` to v9 - @nhost/react-apollo@5.0.1 - @nhost/nextjs@1.13.6 ## 0.11.12 ### Patch Changes - 87eda76e: chore(dashboard): bump `@types/react` to v18.0.28 and `@types/react-dom` to v18.0.11 - 6f0ac570: feat(dashboard): show dashboard version in account menu ## 0.11.11 ### Patch Changes - bf1e4071: chore(dashboard): bump `react-is` version to `18.2.0` - Updated dependencies [bf1e4071] - Updated dependencies [5013213b] - @nhost/nextjs@1.13.5 - @nhost/react-apollo@4.13.5 ## 0.11.10 ### Patch Changes - a37a430b: fix(dashboard): don't break UI when deployments are unavailable - @nhost/react-apollo@4.13.4 - @nhost/nextjs@1.13.4 ## 0.11.9 ### Patch Changes - 7b970e68: fix(dashboard): fix header link color ## 0.11.8 ### Patch Changes - f33242f2: feat(dashboard): add new sign up, sign in and reset password pages ## 0.11.7 ### Patch Changes - e9c8909c: fix(dashboard): use correct theme color in dark mode ## 0.11.6 ### Patch Changes - 902f486b: fix(dashboard): re-enable Hasura on logs page ## 0.11.5 ### Patch Changes - 1f9720fa: fix(dashboard): apply select permissions properly ## 0.11.4 ### Patch Changes - deb14b51: fix(dashboard): don't break billing form ## 0.11.3 ### Patch Changes - @nhost/react-apollo@4.13.3 - @nhost/nextjs@1.13.3 ## 0.11.2 ### Patch Changes - f143e51d: chore(dashboard): pin Turborepo to 1.6.3 ## 0.11.1 ### Patch Changes - c2b5a41a: chore(dashboard): select system colors by default ## 0.11.0 ### Minor Changes - 1ebaf429: feat(dashboard): introduce Dark Mode 🌚 ### Patch Changes - 63b445c4: fixed duplicated logs bug and made to date count during live mode ## 0.10.1 ### Patch Changes - e146d32e: chore(deps): update dependency @types/react to v18.0.27 - 59347fcd: correct allowed role name - 5b65cac9: updated authentication documentation - 963f9b5e: feat(dashboard): include project info in feedback ## 0.10.0 ### Minor Changes - ed4c7801: chore(dashboard): remove Functions section ## 0.9.10 ### Patch Changes - 4e2f8ccd: fix(dashboard): don't break Auth page in local mode ## 0.9.9 ### Patch Changes - 31abbe5f: fix(dashboard): enable toggle when settings are filled in ## 0.9.8 ### Patch Changes - 5bdd31ad: chore(dashboard): list fewer images per page on the Storage page - 5121851c: fix(dashboard): don't throw validation error for valid permission rules ## 0.9.7 ### Patch Changes - c126b20d: fix(dashboard): correct redeployment button ## 0.9.6 ### Patch Changes - 36c3519c: feat(dashboard): retrigger deployments ## 0.9.5 ### Patch Changes - 200e9f77: chore(deps): update dependency @types/react-dom to v18.0.10 - Updated dependencies [200e9f77] - @nhost/nextjs@1.13.2 - @nhost/react-apollo@4.13.2 ## 0.9.4 ### Patch Changes - dbd3ded5: fix(dashboard): workspaces creation, new form, correct redirects. ## 0.9.3 ### Patch Changes - 85f0f943: fix(dashboard): don't break the table creation process ## 0.9.2 ### Patch Changes - Updated dependencies [d42c27ae] - Updated dependencies [927be4a2] - @nhost/nextjs@1.13.1 - @nhost/react-apollo@4.13.1 ## 0.9.1 ### Patch Changes - d0f80811: fix(dashboard): don't show error when signing out the user ## 0.9.0 ### Minor Changes - d92891b2: feat(dashboard): add Permission Editor to the Database section ### Patch Changes - 3d379128: fix(dashboard): create new user - @nhost/react-apollo@4.13.0 - @nhost/nextjs@1.13.0 ## 0.8.1 ### Patch Changes - 7cadd944: fix(dashboard): display Twitter provider settings ## 0.8.0 ### Minor Changes - 9a1aa7bb: add functions to the log dashboard - f29abe62: feat(dashboard): Users Management v2 ### Patch Changes - 7766624b: feat(dashboard): add JWT secret editor modal - @nhost/react-apollo@4.12.1 - @nhost/nextjs@1.12.1 ## 0.7.13 ### Patch Changes - dd0738d5: fix(dashboard): provisioning status polling ## 0.7.12 ### Patch Changes - b21222b3: chore(deps): update dependency @types/node to v16 - 9e0486a3: fix(dashboard): close modals when navigating - Updated dependencies [b21222b3] - Updated dependencies [65687bee] - Updated dependencies [54df0df4] - @nhost/nextjs@1.12.0 - @nhost/react-apollo@4.12.0 ## 0.7.11 ### Patch Changes - d6527122: fix(dashboard): use correct service URLs ## 0.7.10 ### Patch Changes - Updated dependencies [57db5b83] - @nhost/nextjs@1.11.0 - @nhost/nhost-js@1.7.0 - @nhost/react@0.17.0 - @nhost/react-apollo@4.11.0 ## 0.7.9 ### Patch Changes - a6d31dc2: fix(dashboard): don't break the UI when project is not loaded yet ## 0.7.8 ### Patch Changes - 7f251111: Use `NhostProvider` instead of `NhostReactProvider` and `NhostNextProvider` `NhostReactProvider` and `NhostNextProvider` are now deprecated - f4d70f88: fix(dashboard): do not break when region is nullish - 4a9471cc: Windows Live Provider displayed link updated to match backend url - 594488e4: fix(dashboard): do not show error when submitting Apple provider settings - Updated dependencies [7f251111] - @nhost/nextjs@1.10.0 - @nhost/react@0.16.0 - @nhost/react-apollo@4.10.0 ## 0.7.7 ### Patch Changes - 80b604ad: fix(dashboard): use correct Hasura slug ## 0.7.6 ### Patch Changes - 2d2beb53: fix(dashboard): prevent error on GraphQL page - ac8efcbd: chore(dashboard): deprecate old DNS name ## 0.7.5 ### Patch Changes - 132a4f4b: chore(dashboard): remove unused dependencies - 132a4f4b: chore(deps): synchronize @types/react-dom and @types/react versions - db57572f: fix(dashboard): correct section paddings when no env vars - Updated dependencies [132a4f4b] - @nhost/react@0.15.2 - @nhost/react-apollo@4.9.2 - @nhost/nextjs@1.9.3 ## 0.7.4 ### Patch Changes - 34d85e54: chore(deps): update dependency critters to ^0.0.16 - 9b93cf95: chore(deps): update dependency @netlify/functions to ^0.11.0 - e0439030: chore(deps): update dependency @types/react-dom to v18.0.9 - Updated dependencies [82124329] - @nhost/nextjs@1.9.2 ## 0.7.3 ### Patch Changes - a1193da4: fix(dashboard): remove character limit from env var inputs ## 0.7.2 ### Patch Changes - 44f13f62: chore(dashboard): cleanup unused files ## 0.7.1 ### Patch Changes - e01cb2ed: chore(dashboard): change settings sidebar menu item density ## 0.7.0 ### Minor Changes - db342f45: chore(dashboard): refactor Roles and Permissions settings sections - 8b9fa0b1: feat(dashboard): add Environment Variables page ### Patch Changes - Updated dependencies [66b4f3d0] - Updated dependencies [2e6923dc] - Updated dependencies [ef117c28] - Updated dependencies [aebb8225] - @nhost/core@0.9.4 - @nhost/nhost-js@1.6.2 - @nhost/nextjs@1.9.1 - @nhost/react@0.15.1 - @nhost/react-apollo@4.9.1 ## 0.6.0 ### Minor Changes - eef9c914: feat(dashboard): add Roles and Permissions page ## 0.5.0 ### Minor Changes - a48dd5bf: feat(dashboard): make backend port configurable ## 0.4.3 ### Patch Changes - 5de965d9: fix(dashboard): alphabetic ordering of providers - b9087a4a: fix(dashboard): console -> dashboard terminology - ca012d79: docs(workos): WorkOS Docs ## 0.4.2 ### Patch Changes - 89bd37bc: fix(dashboard): correct redirect URL input opacity - Updated dependencies [4601d84e] - Updated dependencies [843087cb] - @nhost/react@0.15.0 - @nhost/nextjs@1.9.0 - @nhost/react-apollo@4.9.0 ## 0.4.1 ### Patch Changes - 766cb612: fix(dashboard): correct redirect URL for oauth providers - Updated dependencies [53bdc294] - Updated dependencies [f2aaff05] - @nhost/nextjs@1.8.3 - @nhost/core@0.9.3 - @nhost/react@0.14.3 - @nhost/nhost-js@1.6.1 - @nhost/react-apollo@4.8.3 ## 0.4.0 ### Minor Changes - 9211743d: feat(dashboard): migrate Settings page features ## 0.3.0 ### Minor Changes - 73da6a67: fix(dashboard): avoid using BACKEND_URL locally ## 0.2.0 ### Minor Changes - db118f97: feat(dashboard): generate Docker image Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
fix: project errored state (#2955 )
2024-10-29 12:07:02 +01:00 · 2024-10-29 12:00:29 +01:00 · 2024-10-29 00:41:44 +01:00 · 2024-10-29 00:38:31 +01:00 · 2024-10-28 23:01:28 +01:00 · 2024-10-28 22:33:23 +01:00
1332 changed files with 148131 additions and 20026 deletions
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -22,6 +22,7 @@ env:
  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_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 }}
--- a/.github/workflows/gen_ai_review.yaml
+++ b/.github/workflows/gen_ai_review.yaml
@@ -0,0 +1,28 @@
+---
+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
+      contents: 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.24
+        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']"
--- a/audit-ci.jsonc
+++ b/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", "micromatch", "path-to-regexp"]
 }
--- a/dashboard/.env.example
+++ b/dashboard/.env.example
@@ -24,3 +24,4 @@ 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
--- a/dashboard/.eslintrc.js
+++ b/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',
+      },
+    },
+  ],
 };
--- a/dashboard/.npmrc
+++ b/dashboard/.npmrc
@@ -1 +1,3 @@
-link-workspace-packages = false
+link-workspace-packages = false
+auto-install-peers = false
+resolution-mode=highest
--- a/dashboard/CHANGELOG.md
+++ b/dashboard/CHANGELOG.md
@@ -1,5 +1,100 @@
 # @nhost/dashboard

+## 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
--- a/dashboard/components.json
+++ b/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"
+  }
+}
--- a/dashboard/e2e/account/pat/manage-pat.test.ts
+++ b/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
--- a/dashboard/e2e/ai/assistants.test.ts
+++ b/dashboard/e2e/ai/assistants.test.ts
@@ -0,0 +1,60 @@
+import {
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } 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 openProject({
+    page,
+    projectName: PRO_TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /ai/i })
+    .click();
+});
+
+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();
+});
--- a/dashboard/e2e/ai/auto-embeddings.test.ts
+++ b/dashboard/e2e/ai/auto-embeddings.test.ts
@@ -0,0 +1,55 @@
+import {
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } 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 openProject({
+    page,
+    projectName: PRO_TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /ai/i })
+    .click();
+});
+
+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();
+});
--- a/dashboard/e2e/auth/ban-user.test.ts
+++ b/dashboard/e2e/auth/ban-user.test.ts
@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
  TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
@@ -12,9 +12,9 @@ test('should be able to ban and unban a user', async ({ page }) => {

  await openProject({
    page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
  });

  await page
@@ -22,7 +22,9 @@ test('should be able to ban and unban a user', async ({ page }) => {
    .getByRole('link', { name: /auth/i })
    .click();

-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
+  );

  const email = generateTestEmail();
  const password = faker.internet.password();
--- a/dashboard/e2e/auth/create-user.test.ts
+++ b/dashboard/e2e/auth/create-user.test.ts
@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
  TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
@@ -19,9 +19,9 @@ test.beforeEach(async () => {

  await openProject({
    page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
  });

  await page
@@ -29,7 +29,9 @@ test.beforeEach(async () => {
    .getByRole('link', { name: /auth/i })
    .click();

-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
+  );
 });

 test.afterAll(async () => {
--- a/dashboard/e2e/auth/delete-user.test.ts
+++ b/dashboard/e2e/auth/delete-user.test.ts
@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
  TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
@@ -19,9 +19,9 @@ test.beforeEach(async () => {

  await openProject({
    page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
  });

  await page
@@ -29,7 +29,9 @@ test.beforeEach(async () => {
    .getByRole('link', { name: /auth/i })
    .click();

-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
+  );
 });

 test.afterAll(async () => {
--- a/dashboard/e2e/auth/verify-user.test.ts
+++ b/dashboard/e2e/auth/verify-user.test.ts
@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
  TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
@@ -19,9 +19,9 @@ test.beforeEach(async () => {

  await openProject({
    page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
  });

  await page
@@ -29,7 +29,9 @@ test.beforeEach(async () => {
    .getByRole('link', { name: /auth/i })
    .click();

-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+  await page.waitForURL(
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/users`,
+  );
 });

 test.afterAll(async () => {
--- a/dashboard/e2e/database/create-table.test.ts
+++ b/dashboard/e2e/database/create-table.test.ts
@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
  TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { openProject, prepareTable } from '@/e2e/utils';
@@ -20,9 +20,9 @@ test.beforeEach(async () => {

  await openProject({
    page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
  });

  await page
@@ -55,7 +55,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
  );

  await expect(
@@ -84,7 +84,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
  );

  await expect(
@@ -113,7 +113,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
  );

  await expect(
@@ -146,7 +146,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
  );

  await expect(
@@ -174,7 +174,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
  );

  await page.getByRole('button', { name: /new table/i }).click();
@@ -219,7 +219,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
  );

  await expect(
@@ -247,7 +247,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
  );

  await page.getByRole('button', { name: /new table/i }).click();
--- a/dashboard/e2e/database/delete-table.test.ts
+++ b/dashboard/e2e/database/delete-table.test.ts
@@ -1,6 +1,6 @@
 import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
  TEST_WORKSPACE_SLUG,
 } from '@/e2e/env';
 import { deleteTable, openProject, prepareTable } from '@/e2e/utils';
@@ -20,9 +20,9 @@ test.beforeEach(async () => {

  await openProject({
    page,
-    projectName: TEST_PROJECT_NAME,
+    projectName: PRO_TEST_PROJECT_NAME,
    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
  });

  await page
@@ -53,7 +53,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${tableName}`,
  );

  await deleteTable({
@@ -63,7 +63,7 @@ test('should delete a table', async () => {

  // navigate to next URL
  await page.waitForURL(
-    `/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/database/browser/default/public/**`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/**`,
  );

  await expect(
@@ -91,7 +91,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${firstTableName}`,
  );

  await page.getByRole('button', { name: /new table/i }).click();
@@ -138,7 +138,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}`,
+    `/${TEST_WORKSPACE_SLUG}/${PRO_TEST_PROJECT_SLUG}/database/browser/default/public/${secondTableName}`,
  );

  await expect(
--- a/dashboard/e2e/env.ts
+++ b/dashboard/e2e/env.ts
@@ -23,6 +23,11 @@ export const TEST_WORKSPACE_SLUG = slugify(TEST_WORKSPACE_NAME, {
 */
 export const TEST_PROJECT_NAME = process.env.NHOST_TEST_PROJECT_NAME;

+/**
+ * Name of the pro test project to test against.
+ */
+export const PRO_TEST_PROJECT_NAME = process.env.NHOST_PRO_TEST_PROJECT_NAME;
+
 /**
 * Slugified name of the project to test against.
 */
@@ -31,6 +36,14 @@ export const TEST_PROJECT_SLUG = slugify(TEST_PROJECT_NAME, {
  strict: true,
 });

+/**
+ * Slugified name of the pro project to test against.
+ */
+export const PRO_TEST_PROJECT_SLUG = slugify(PRO_TEST_PROJECT_NAME, {
+  lower: true,
+  strict: true,
+});
+
 /**
 * Hasura admin secret of the test project to use.
 */
--- a/dashboard/e2e/run/run.test.ts
+++ b/dashboard/e2e/run/run.test.ts
@@ -0,0 +1,73 @@
+import {
+  PRO_TEST_PROJECT_NAME,
+  PRO_TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { openProject } 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 openProject({
+    page,
+    projectName: PRO_TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: PRO_TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /run/i })
+    .click();
+});
+
+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.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: /service details/i }),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /ok/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();
+});
--- a/dashboard/global-teardown.ts
+++ b/dashboard/global-teardown.ts
@@ -43,8 +43,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(() => {
--- a/dashboard/next-env.d.ts
+++ b/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.
--- a/dashboard/next.config.js
+++ b/dashboard/next.config.js
@@ -19,7 +19,7 @@ const cspHeader = `
 `;

 module.exports = withBundleAnalyzer({
-  reactStrictMode: true,
+  reactStrictMode: false,
  swcMinify: false,
  output: 'standalone',
  experimental: {
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@nhost/dashboard",
-  "version": "1.23.0",
+  "version": "2.0.5",
  "private": true,
  "scripts": {
    "preinstall": "npx only-allow pnpm",
@@ -27,20 +27,34 @@
    "@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",
+    "@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-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",
@@ -54,8 +68,11 @@
    "@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.3.1",
@@ -65,15 +82,19 @@
    "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.10",
+    "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",
@@ -90,10 +111,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",
@@ -129,6 +153,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",
@@ -155,17 +180,17 @@
    "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"
  },
--- a/dashboard/playwright.config.ts
+++ b/dashboard/playwright.config.ts
@@ -10,10 +10,10 @@ export default defineConfig({
  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: {
--- a/dashboard/prettier.config.js
+++ b/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'
  ],
 };
--- a/dashboard/public/assets/LockedApp.svg
+++ b/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>
--- a/dashboard/src/components/common/DialogProvider/DialogProvider.tsx
+++ b/dashboard/src/components/common/DialogProvider/DialogProvider.tsx
@@ -291,7 +291,7 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
        PaperProps={{
          ...drawerProps?.PaperProps,
          className: twMerge(
-            'max-w-2.5xl w-full',
+            'max-w-4xl w-full',
            drawerProps?.PaperProps?.className,
          ),
        }}
--- a/dashboard/src/components/common/UpgradeToProBanner/UpgradeToProBanner.tsx
+++ b/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,47 +50,48 @@ 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 space-y-2 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-2 gap-2">
          <Button
-            className="rounded-md"
+            className="lg:w-auto max-w-xs"
            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: {
                    secondaryButtonText: 'I understand',
                    hidePrimaryAction: true,
                  },
+
+
                });
              }
            }}
          >
-            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 +101,7 @@ export default function UpgradeToProBanner({
        width={300}
        height={140}
        objectFit="contain"
-        alt='Upgrade to Pro illustration'
+        alt="Upgrade to Pro illustration"
      />
    </Box>
  );
--- a/dashboard/src/components/common/useMediaQuery/index.ts
+++ b/dashboard/src/components/common/useMediaQuery/index.ts
@@ -0,0 +1 @@
+export { default as useMediaQuery } from './useMediaQuery';
--- a/dashboard/src/components/common/useMediaQuery/useMediaQuery.tsx
+++ b/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;
--- a/dashboard/src/components/layout/AuthenticatedLayout/AuthenticatedLayout.tsx
+++ b/dashboard/src/components/layout/AuthenticatedLayout/AuthenticatedLayout.tsx
@@ -3,19 +3,29 @@ 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 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,
+  type DetailedHTMLProps,
+  type HTMLProps,
+} from 'react';

 export interface AuthenticatedLayoutProps extends BaseLayoutProps {
  /**
@@ -29,16 +39,18 @@ 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 +66,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) {
@@ -78,7 +90,7 @@ export default function AuthenticatedLayout({

        <Container
          rootClassName="h-full"
-          className="my-12 grid max-w-md grid-flow-row justify-center gap-2 text-center"
+          className="grid justify-center max-w-md grid-flow-row gap-2 my-12 text-center"
        >
          <div className="mx-auto">
            <Image
@@ -115,22 +127,36 @@ export default function AuthenticatedLayout({
  }

  return (
-    <BaseLayout className="flex h-full flex-col" {...props}>
-      <Header className="flex max-h-[59px] flex-auto" />
+    <BaseLayout className="flex flex-col h-full" {...props}>
+      <Header className="flex py-1" />

-      <InviteNotification />
+      <div
+        className="relative flex flex-row h-full overflow-x-hidden"
+        ref={setMainNavContainer}
+      >
+        {mainNavPinned && isMdOrLarger && <PinnedMainNav />}

-      <RetryableErrorBoundary errorMessageProps={{ className: 'pt-20' }}>
-        <div
-          className={twMerge(
-            'relative flex flex-auto overflow-x-hidden',
-            contentContainerClassName,
+        <div className="relative flex flex-row w-full h-full bg-accent">
+          {(!mainNavPinned || !isMdOrLarger) && (
+            <div className="flex justify-center w-6 h-full">
+              <MainNav container={mainNavContainer} />
+            </div>
          )}
-          {...contentContainerProps}
-        >
-          {children}
+
+          <RetryableErrorBoundary
+            errorMessageProps={{
+              className: 'flex flex-col items-center',
+            }}
+          >
+            <div className="flex flex-col w-full h-full">
+              <OrgStatus />
+              {children}
+            </div>
+          </RetryableErrorBoundary>
+
+          <InviteNotification />
        </div>
-      </RetryableErrorBoundary>
+      </div>
    </BaseLayout>
  );
 }
--- a/dashboard/src/components/layout/Container/Container.tsx
+++ b/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}
--- a/dashboard/src/components/layout/Header/BreadcrumbComboBox.tsx
+++ b/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>
+  );
+}
--- a/dashboard/src/components/layout/Header/BreadcrumbNav.tsx
+++ b/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>
+  );
+}
--- a/dashboard/src/components/layout/Header/Header.tsx
+++ b/dashboard/src/components/layout/Header/Header.tsx
@@ -1,24 +1,22 @@
 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 { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
 import { DevAssistant } from '@/features/ai/DevAssistant';
-import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { AnnouncementsTray } from '@/features/orgs/components/members/components/AnnouncementsTray';
+import { NotificationsTray } from '@/features/orgs/components/members/components/NotificationsTray';
+import { useProject } from '@/features/orgs/projects/hooks/useProject';
 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<
@@ -26,36 +24,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 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 openDevAssistant = () => {
    // The dev assistant can be only answer questions related to a particular project
-    if (!currentProject) {
+    if (!project) {
      toast.error('You need to be inside a project to open the Assistant', {
        style: getToastStyleProps().style,
        ...getToastStyleProps().error,
@@ -74,36 +51,32 @@ export default function Header({ className, ...props }: HeaderProps) {
    <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="w-6 h-6 mr-2">
+        <Logo className="w-6 h-6 mx-auto cursor-pointer" />
      </div>

-      <div className="hidden grid-flow-col items-center gap-2 sm:grid">
+      <BreadcrumbNav />
+
+      <div className="items-center hidden grid-flow-col gap-1 sm:grid">
        <Button className="rounded-full" onClick={openDevAssistant}>
-          <GraphiteIcon />
+          <GraphiteIcon className="w-4 h-4" />
        </Button>

+        <NotificationsTray />
+
+        <AnnouncementsTray />
+
        {isPlatform && (
          <NavLink
            underline="none"
            href="/support"
-            className="mr-2 rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
+            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' },
--- a/dashboard/src/components/layout/Header/OrgPagesComboBox.tsx
+++ b/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>
+  );
+}
--- a/dashboard/src/components/layout/Header/OrgsComboBox.tsx
+++ b/dashboard/src/components/layout/Header/OrgsComboBox.tsx
@@ -0,0 +1,210 @@
+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
+                  key={option.value}
+                  value={option.label}
+                  className="flex items-center justify-between bg-background 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}`);
+                    }
+                  }}
+                >
+                  <div className="flex items-center font-normal">
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        selectedItem?.value === option.value
+                          ? 'opacity-100'
+                          : 'opacity-0',
+                      )}
+                    />
+                    <span className="truncate max-w-52">{option.label}</span>
+                  </div>
+                  {renderBadge(option.plan)}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+
+            {workspaces.length > 0 && (
+              <>
+                <CommandSeparator />
+
+                <CommandGroup heading="Workspaces">
+                  {workspacesOptions.map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.label}
+                      className="flex items-center justify-between bg-background text-foreground hover:bg-accent 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}`);
+                        }
+                      }}
+                    >
+                      <div className="flex items-center">
+                        <Check
+                          className={cn(
+                            'mr-2 h-4 w-4',
+                            selectedItem?.value === option.value
+                              ? 'opacity-100'
+                              : 'opacity-0',
+                          )}
+                        />
+                        <span className="truncate max-w-52">
+                          {option.label}
+                        </span>
+                      </div>
+                      {renderBadge(option.plan)}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/dashboard/src/components/layout/Header/ProjectPagesComboBox.tsx
+++ b/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>
+  );
+}
--- a/dashboard/src/components/layout/Header/ProjectSettingsPagesComboBox.tsx
+++ b/dashboard/src/components/layout/Header/ProjectSettingsPagesComboBox.tsx
@@ -0,0 +1,168 @@
+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: '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' },
+].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="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={() => {
+                    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="truncate max-w-52">{option.label}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/dashboard/src/components/layout/Header/ProjectStatus.tsx
+++ b/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;
+}
--- a/dashboard/src/components/layout/Header/ProjectsComboBox.tsx
+++ b/dashboard/src/components/layout/Header/ProjectsComboBox.tsx
@@ -0,0 +1,111 @@
+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 { 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 { currentOrg: { slug: orgSlug, apps = [] } = {} } = useOrgs();
+  const selectedProjectFromUrl = apps.find(
+    (item) => item.subdomain === appSubdomain,
+  );
+  const [selectedProject, setSelectedProject] = useState<Option | null>(null);
+
+  useEffect(() => {
+    if (selectedProjectFromUrl) {
+      setSelectedProject({
+        label: selectedProjectFromUrl.name,
+        value: selectedProjectFromUrl.subdomain,
+      });
+    }
+  }, [selectedProjectFromUrl]);
+
+  const options: Option[] = apps.map((app) => ({
+    label: app.name,
+    value: app.subdomain,
+  }));
+
+  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"
+        >
+          {selectedProject ? (
+            <div className="flex flex-row items-center justify-center gap-1">
+              <Box className="w-4 h-4" />
+              {selectedProject.label}
+              <ProjectStatus />
+            </div>
+          ) : (
+            <>Select a project</>
+          )}
+          <ChevronsUpDown className="w-5 h-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.label}
+                  onSelect={() => {
+                    setSelectedProject(option);
+                    setOpen(false);
+                    push(`/orgs/${orgSlug}/projects/${option.value}`);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selectedProject?.value === option.value
+                        ? 'opacity-100'
+                        : 'opacity-0',
+                    )}
+                  />
+                  <div className="flex flex-row items-center gap-1">
+                    <Box className="w-4 h-4" />
+                    <span className="truncate max-w-52">{option.label}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/dashboard/src/components/layout/Header/index.ts
+++ b/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';
--- a/dashboard/src/components/layout/MainNav/MainNav.tsx
+++ b/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>
+  );
+}
--- a/dashboard/src/components/layout/MainNav/NavTree.tsx
+++ b/dashboard/src/components/layout/MainNav/NavTree.tsx
@@ -0,0 +1,538 @@
+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="w-4 h-4" />,
+    route: '',
+    slug: 'overview',
+  },
+  {
+    name: 'Database',
+    icon: <DatabaseIcon className="w-4 h-4" />,
+    route: 'database/browser/default',
+    slug: 'database',
+  },
+  {
+    name: 'GraphQL',
+    icon: <GraphQLIcon className="w-4 h-4" />,
+    route: 'graphql',
+    slug: 'graphql',
+  },
+  {
+    name: 'Hasura',
+    icon: <HasuraIcon className="w-4 h-4" />,
+    route: 'hasura',
+    slug: 'hasura',
+  },
+  {
+    name: 'Auth',
+    icon: <UserIcon className="w-4 h-4" />,
+    route: 'users',
+    slug: 'users',
+  },
+  {
+    name: 'Storage',
+    icon: <StorageIcon className="w-4 h-4" />,
+    route: 'storage',
+    slug: 'storage',
+  },
+  {
+    name: 'Run',
+    icon: <ServicesIcon className="w-4 h-4" />,
+    route: 'run',
+    slug: 'run',
+  },
+  {
+    name: 'AI',
+    icon: <AIIcon className="w-4 h-4" />,
+    route: 'ai/auto-embeddings',
+    slug: 'ai',
+  },
+  {
+    name: 'Deployments',
+    icon: <RocketIcon className="w-4 h-4" />,
+    route: 'deployments',
+    slug: 'deployments',
+  },
+  {
+    name: 'Backups',
+    icon: <CloudIcon className="w-4 h-4" />,
+    route: 'backups',
+    slug: 'backups',
+  },
+  {
+    name: 'Logs',
+    icon: <FileTextIcon className="w-4 h-4" />,
+    route: 'logs',
+    slug: 'logs',
+  },
+  {
+    name: 'Metrics',
+    icon: <GaugeIcon className="w-4 h-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: '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 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="w-4 h-4 mr-1 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="w-4 h-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="w-4 h-4 font-bold" strokeWidth={3} />
+            ) : (
+              <ChevronRight className="w-4 h-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 flex-row w-full">
+            <div className="flex justify-center px-[12px] pb-3">
+              <div className="w-0 h-full 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>
+  );
+}
--- a/dashboard/src/components/layout/MainNav/PinnedMainNav.tsx
+++ b/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="h-full w-full 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>
+  );
+}
--- a/dashboard/src/components/layout/MainNav/TreeNavStateContext.tsx
+++ b/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 };
--- a/dashboard/src/components/layout/MainNav/WorkspacesNavTree.tsx
+++ b/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="w-4 h-4" />,
+    route: '',
+    slug: 'overview',
+  },
+  {
+    name: 'Database',
+    icon: <DatabaseIcon className="w-4 h-4" />,
+    route: 'database/browser/default',
+    slug: 'database',
+  },
+  {
+    name: 'GraphQL',
+    icon: <GraphQLIcon className="w-4 h-4" />,
+    route: 'graphql',
+    slug: 'graphql',
+  },
+  {
+    name: 'Hasura',
+    icon: <HasuraIcon className="w-4 h-4" />,
+    route: 'hasura',
+    slug: 'hasura',
+  },
+  {
+    name: 'Auth',
+    icon: <UserIcon className="w-4 h-4" />,
+    route: 'users',
+    slug: 'users',
+  },
+  {
+    name: 'Storage',
+    icon: <StorageIcon className="w-4 h-4" />,
+    route: 'storage',
+    slug: 'storage',
+  },
+  {
+    name: 'Run',
+    icon: <ServicesIcon className="w-4 h-4" />,
+    route: 'services',
+    slug: 'services',
+  },
+  {
+    name: 'AI',
+    icon: <AIIcon className="w-4 h-4" />,
+    route: 'ai/auto-embeddings',
+    slug: 'ai',
+  },
+  {
+    name: 'Deployments',
+    icon: <RocketIcon className="w-4 h-4" />,
+    route: 'deployments',
+    slug: 'deployments',
+  },
+  {
+    name: 'Backups',
+    icon: <CloudIcon className="w-4 h-4" />,
+    route: 'backups',
+    slug: 'backups',
+  },
+  {
+    name: 'Logs',
+    icon: <FileTextIcon className="w-4 h-4" />,
+    route: 'logs',
+    slug: 'logs',
+  },
+  {
+    name: 'Metrics',
+    icon: <GaugeIcon className="w-4 h-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="w-4 h-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-52 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="w-4 h-4 mb-1 ml-1" />
+                </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="w-4 h-4 font-bold" strokeWidth={3} />
+            ) : (
+              <ChevronRight className="w-4 h-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 flex-row w-full">
+            <div className="flex justify-center px-[12px] pb-3">
+              <div className="w-0 h-full 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>
+  );
+}
--- a/dashboard/src/components/layout/MainNav/index.ts
+++ b/dashboard/src/components/layout/MainNav/index.ts
@@ -0,0 +1 @@
+export { default as MainNav } from './MainNav';
--- a/dashboard/src/components/layout/OrgProjectLayout/OrgProjectLayout.tsx
+++ b/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>
+  );
+}
--- a/dashboard/src/components/layout/OrgProjectLayout/index.ts
+++ b/dashboard/src/components/layout/OrgProjectLayout/index.ts
@@ -0,0 +1 @@
+export { default as OrgProjectLayout } from './OrgProjectLayout';
--- a/dashboard/src/components/layout/ProjectLayout/ProjectLayout.tsx
+++ b/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>
  );
 }

--- a/dashboard/src/components/layout/SettingsContainer/SettingsContainer.tsx
+++ b/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}
--- a/dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx
+++ b/dashboard/src/components/layout/SettingsLayout/SettingsLayout.tsx
@@ -1,98 +1,69 @@
-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 w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
    >
-      <SettingsSidebar
-        className={twMerge('w-full max-w-sidebar', sidebarClassName)}
-        {...sidebarProps}
-      />
-
      <Box
        sx={{ backgroundColor: 'background.default' }}
-        className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
+        className="flex h-full flex-col"
      >
-        <Box
-          sx={{ backgroundColor: 'background.default' }}
-          className="flex h-full flex-col"
-        >
-          <RetryableErrorBoundary>
-            <div className="flex flex-col space-y-2">
-              {hasGitRepo && (
-                <Alert
-                  severity="warning"
-                  className="grid grid-flow-row place-content-center gap-2"
-                >
-                  <Text color="warning" className="text-sm ">
-                    As you have a connected repository, make sure to synchronize
-                    your changes with{' '}
-                    <code
-                      className={twMerge(
-                        'rounded-md px-2 py-px',
-                        theme.palette.mode === 'dark'
-                          ? 'bg-brown text-copper'
-                          : 'bg-slate-200 text-slate-700',
-                      )}
-                    >
-                      nhost config pull
-                    </code>{' '}
-                    or they may be reverted with the next push.
-                    <br />
-                    If there are multiple projects linked to the same repository
-                    and you only want these changes to apply to a subset of
-                    them, please check out{' '}
-                    <a
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="underline"
-                      href="https://docs.nhost.io/cli/overlays"
-                    >
-                      docs.nhost.io/cli/overlays
-                    </a>{' '}
-                    for guidance.
-                  </Text>
-                </Alert>
-              )}
-            </div>
-            {children}
-          </RetryableErrorBoundary>
-        </Box>
+        <RetryableErrorBoundary>
+          <div className="flex flex-col space-y-2">
+            {hasGitRepo && (
+              <Alert
+                severity="warning"
+                className="grid grid-flow-row place-content-center gap-2"
+              >
+                <Text color="warning" className="text-sm">
+                  As you have a connected repository, make sure to synchronize
+                  your changes with{' '}
+                  <code
+                    className={twMerge(
+                      'rounded-md px-2 py-px',
+                      theme.palette.mode === 'dark'
+                        ? 'bg-brown text-copper'
+                        : 'bg-slate-200 text-slate-700',
+                    )}
+                  >
+                    nhost config pull
+                  </code>{' '}
+                  or they may be reverted with the next push.
+                  <br />
+                  If there are multiple projects linked to the same repository
+                  and you only want these changes to apply to a subset of them,
+                  please check out{' '}
+                  <a
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                    href="https://docs.nhost.io/cli/overlays"
+                  >
+                    docs.nhost.io/cli/overlays
+                  </a>{' '}
+                  for guidance.
+                </Text>
+              </Alert>
+            )}
+          </div>
+          {children}
+        </RetryableErrorBoundary>
      </Box>
-    </ProjectLayout>
+    </Box>
  );
 }
--- a/dashboard/src/components/layout/SettingsSidebar/SettingsSidebar.tsx
+++ b/dashboard/src/components/layout/SettingsSidebar/SettingsSidebar.tsx
@@ -221,6 +221,13 @@ 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>
--- a/dashboard/src/components/layout/UnauthenticatedLayout/UnauthenticatedLayout.tsx
+++ b/dashboard/src/components/layout/UnauthenticatedLayout/UnauthenticatedLayout.tsx
@@ -59,19 +59,19 @@ export default function UnauthenticatedLayout({

        <RetryableErrorBoundary>
          <Box
-            className="flex min-h-screen items-center"
+            className="flex items-center min-h-screen"
            sx={{ backgroundColor: (theme) => theme.palette.common.black }}
          >
            <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 items-center w-full h-full gap-12 pt-8 pb-12 bg-transparent justify-items-center 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 top-0 bottom-0 left-0 right-0 flex items-center justify-center w-full h-full max-w-xl mx-auto overflow-hidden opacity-70">
                  <Image
                    priority
                    src="/assets/line-grid.svg"
--- a/dashboard/src/components/presentational/Logo/Logo.tsx
+++ b/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"
--- a/dashboard/src/components/ui/v2/ErrorToast/ErrorToast.tsx
+++ b/dashboard/src/components/ui/v2/ErrorToast/ErrorToast.tsx
@@ -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 ? (
--- a/dashboard/src/components/ui/v2/ThemeProvider/ThemeProvider.tsx
+++ b/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;
  /**
--- a/dashboard/src/components/ui/v2/createTheme/createTheme.ts
+++ b/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: {
--- a/dashboard/src/components/ui/v2/icons/InfoOutlinedIcon/InfoOutlinedIcon.tsx
+++ b/dashboard/src/components/ui/v2/icons/InfoOutlinedIcon/InfoOutlinedIcon.tsx
@@ -0,0 +1,45 @@
+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 InfoOutlinedIcon(props: IconProps, ref: ForwardedRef<SVGSVGElement>) {
+  return (
+    <SvgIcon
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-label="Info"
+      stroke="currentColor"
+      ref={ref}
+      {...props}
+    >
+      <path
+        fill="none"
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fill="none"
+        d="M12 16V12"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fill="none"
+        d="M12 8H12.01"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </SvgIcon>
+  );
+}
+
+InfoOutlinedIcon.displayName = 'NhostInfoOutlinedIcon';
+
+export default forwardRef(InfoOutlinedIcon);
--- a/dashboard/src/components/ui/v2/icons/InfoOutlinedIcon/index.ts
+++ b/dashboard/src/components/ui/v2/icons/InfoOutlinedIcon/index.ts
@@ -0,0 +1 @@
+export { default as InfoOutlinedIcon } from './InfoOutlinedIcon';
--- a/dashboard/src/components/ui/v2/icons/PowerOffIcon/PowerOffIcon.tsx
+++ b/dashboard/src/components/ui/v2/icons/PowerOffIcon/PowerOffIcon.tsx
@@ -0,0 +1,27 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function PowerOffIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      {...props}
+    >
+      <path
+        fill="none"
+        d="M18.36 6.64A9 9 0 0 1 20.77 15M6.16 6.16a9 9 0 1 0 12.68 12.68M12 2v4M2 2l20 20"
+      />
+    </SvgIcon>
+  );
+}
+
+PowerOffIcon.displayName = 'NhostPowerOffIcon';
+
+export default PowerOffIcon;
--- a/dashboard/src/components/ui/v2/icons/PowerOffIcon/index.ts
+++ b/dashboard/src/components/ui/v2/icons/PowerOffIcon/index.ts
@@ -0,0 +1 @@
+export { default as PowerOffIcon } from './PowerOffIcon';
--- a/dashboard/src/components/ui/v2/icons/RepeatIcon/RepeatIcon.tsx
+++ b/dashboard/src/components/ui/v2/icons/RepeatIcon/RepeatIcon.tsx
@@ -0,0 +1,31 @@
+import type { IconProps } from '@/components/ui/v2/icons';
+import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
+
+function RepeatIcon(props: IconProps) {
+  return (
+    <SvgIcon
+      aria-label="Repeat"
+      width="16"
+      height="20"
+      viewBox="0 0 16 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.4062 11.9779H15.9998L13.7035 8L11.4062 11.9779Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.1959 16.2243C13.1959 17.466 11.9655 18.4759 10.4525 18.4759L4.05328 18.4749C2.54037 18.4749 1.30989 17.2444 1.30989 15.7315V4.26843C1.30989 2.75552 2.54034 1.52504 4.05328 1.52504H10.4525C11.9654 1.52504 13.1959 2.535 13.1959 3.77661V6.53613C13.1959 6.81655 13.4235 7.04415 13.7039 7.04415C13.9844 7.04415 14.212 6.81655 14.212 6.53613V3.77557C14.212 1.97409 12.5253 0.508057 10.4526 0.508057L4.05333 0.509073C1.98056 0.509073 0.293945 2.19574 0.293945 4.26846V15.7326C0.293945 17.8054 1.98061 19.492 4.05333 19.492H10.4526C12.5253 19.492 14.212 18.0258 14.212 16.2245L14.212 13.5H13.1959L13.1959 16.2243Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="0.5"
+      />
+    </SvgIcon>
+  );
+}
+
+RepeatIcon.displayName = 'NhostRepeatIcon';
+
+export default RepeatIcon;
--- a/dashboard/src/components/ui/v2/icons/RepeatIcon/index.ts
+++ b/dashboard/src/components/ui/v2/icons/RepeatIcon/index.ts
@@ -0,0 +1 @@
+export { default as RepeatIcon } from './RepeatIcon';
--- a/dashboard/src/components/ui/v2/theme/getDesignTokens/getDesignTokens.ts
+++ b/dashboard/src/components/ui/v2/theme/getDesignTokens/getDesignTokens.ts
@@ -63,6 +63,9 @@ export default function getDesignTokens(mode: PaletteMode): PaletteOptions {
        paper: '#171d26',
      },
      divider: '#2f363d',
+      beige: {
+        main: '#362c22',
+      },
    };
  }

@@ -125,5 +128,8 @@ export default function getDesignTokens(mode: PaletteMode): PaletteOptions {
      paper: '#ffffff',
    },
    divider: '#eaedf0',
+    beige: {
+      main: '#e5d1bf',
+    },
  };
 }
--- a/dashboard/src/components/ui/v3/alert-dialog.tsx
+++ b/dashboard/src/components/ui/v3/alert-dialog.tsx
@@ -0,0 +1,139 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+
+import { buttonVariants } from '@/components/ui/v3/button';
+import { cn } from '@/lib/utils';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
--- a/dashboard/src/components/ui/v3/alert.tsx
+++ b/dashboard/src/components/ui/v3/alert.tsx
@@ -0,0 +1,61 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  >
+    {props.children}
+  </h5>
+));
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };
--- a/dashboard/src/components/ui/v3/badge.tsx
+++ b/dashboard/src/components/ui/v3/badge.tsx
@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80 dark:text-white',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
--- a/dashboard/src/components/ui/v3/breadcrumb.tsx
+++ b/dashboard/src/components/ui/v3/breadcrumb.tsx
@@ -0,0 +1,115 @@
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<'ol'>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-1.5',
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn('inline-flex items-center gap-1.5', className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn('font-normal text-foreground', className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5', className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="w-4 h-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
--- a/dashboard/src/components/ui/v3/button.tsx
+++ b/dashboard/src/components/ui/v3/button.tsx
@@ -0,0 +1,56 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-white hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
--- a/dashboard/src/components/ui/v3/checkbox.tsx
+++ b/dashboard/src/components/ui/v3/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
--- a/dashboard/src/components/ui/v3/command.tsx
+++ b/dashboard/src/components/ui/v3/command.tsx
@@ -0,0 +1,153 @@
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import * as React from 'react';
+
+import { Dialog, DialogContent } from '@/components/ui/v3/dialog';
+import { cn } from '@/lib/utils';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="p-0 overflow-hidden shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center px-3 border-b" cmdk-input-wrapper="">
+    <Search className="w-4 h-4 mr-2 opacity-50 shrink-0" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full rounded-md border-none bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-sm text-center"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 h-px bg-border', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 data-[selected='true']:dark:bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'ml-auto text-xs tracking-widest text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
--- a/dashboard/src/components/ui/v3/dialog.tsx
+++ b/dashboard/src/components/ui/v3/dialog.tsx
@@ -0,0 +1,121 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/30 py-4 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay>
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'relative z-50 grid w-full max-w-lg gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogOverlay>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
--- a/dashboard/src/components/ui/v3/dropdown-menu.tsx
+++ b/dashboard/src/components/ui/v3/dropdown-menu.tsx
@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
--- a/dashboard/src/components/ui/v3/form.tsx
+++ b/dashboard/src/components/ui/v3/form.tsx
@@ -0,0 +1,175 @@
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { Controller, FormProvider, useFormContext } from 'react-hook-form';
+
+import { Label } from '@/components/ui/v3/label';
+import { cn } from '@/lib/utils';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  const value = React.useMemo(() => ({ name: props.name }), [props.name]);
+
+  return (
+    <FormFieldContext.Provider value={value}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  const contextValue = React.useMemo(() => ({ id }), [id]);
+
+  return (
+    <FormItemContext.Provider value={contextValue}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
--- a/dashboard/src/components/ui/v3/hover-card.tsx
+++ b/dashboard/src/components/ui/v3/hover-card.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/dashboard/src/components/ui/v3/input.tsx
+++ b/dashboard/src/components/ui/v3/input.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };
--- a/dashboard/src/components/ui/v3/label.tsx
+++ b/dashboard/src/components/ui/v3/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
--- a/dashboard/src/components/ui/v3/popover.tsx
+++ b/dashboard/src/components/ui/v3/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
--- a/dashboard/src/components/ui/v3/progress.tsx
+++ b/dashboard/src/components/ui/v3/progress.tsx
@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+
+interface ProgressProps
+  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+  indeterminate?: boolean;
+}
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value, indeterminate = false, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className={cn(
+        'h-full w-full flex-1 rounded-full bg-primary transition-all',
+        indeterminate && 'animate-progress origin-left',
+      )}
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
--- a/dashboard/src/components/ui/v3/radio-group.tsx
+++ b/dashboard/src/components/ui/v3/radio-group.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
--- a/dashboard/src/components/ui/v3/select.tsx
+++ b/dashboard/src/components/ui/v3/select.tsx
@@ -0,0 +1,158 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="w-4 h-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="w-4 h-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="w-4 h-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="w-4 h-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
--- a/dashboard/src/components/ui/v3/separator.tsx
+++ b/dashboard/src/components/ui/v3/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
--- a/dashboard/src/components/ui/v3/shadcn-theme-provider.tsx
+++ b/dashboard/src/components/ui/v3/shadcn-theme-provider.tsx
@@ -0,0 +1,8 @@
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { type ThemeProviderProps } from 'next-themes/dist/types';
+
+export const ShadcnThemeProvider = (
+  props: ThemeProviderProps,
+): React.JSX.Element => {
+  return NextThemesProvider(props) as React.JSX.Element;
+};
--- a/dashboard/src/components/ui/v3/sheet.tsx
+++ b/dashboard/src/components/ui/v3/sheet.tsx
@@ -0,0 +1,162 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+  // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {
+  container?: HTMLElement;
+  hideCloseButton?: boolean;
+}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(
+  (
+    {
+      side = 'right',
+      className,
+      container,
+      hideCloseButton,
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <SheetPortal container={container}>
+      <SheetPrimitive.Content
+        ref={ref}
+        className={cn(sheetVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+        {!hideCloseButton && (
+          <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+            <X className="w-4 h-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  ),
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+function SheetHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col space-y-2 text-center sm:text-left',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+SheetHeader.displayName = 'SheetHeader';
+
+function SheetFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+  // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold text-foreground', className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+  // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
--- a/dashboard/src/components/ui/v3/table.tsx
+++ b/dashboard/src/components/ui/v3/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/dashboard/src/components/ui/v3/tooltip.tsx
+++ b/dashboard/src/components/ui/v3/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/dashboard/src/features/ai/DeleteAssistantModal/DeleteAssistantModal.tsx
+++ b/dashboard/src/features/ai/DeleteAssistantModal/DeleteAssistantModal.tsx
@@ -4,6 +4,7 @@ import { Checkbox } from '@/components/ui/v2/Checkbox';
 import { Text } from '@/components/ui/v2/Text';
 import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+// eslint-disable-next-line import/extensions
 import { useDeleteAssistantMutation } from '@/utils/__generated__/graphite.graphql';
 import { type Assistant } from 'pages/[workspaceSlug]/[appSlug]/ai/assistants';
 import { useState } from 'react';
--- a/dashboard/src/features/ai/DeleteAutoEmbeddingsModal/DeleteAutoEmbeddingsModal.tsx
+++ b/dashboard/src/features/ai/DeleteAutoEmbeddingsModal/DeleteAutoEmbeddingsModal.tsx
@@ -6,6 +6,7 @@ import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/
 import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
 import { getHasuraAdminSecret } from '@/utils/env';
 import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+// eslint-disable-next-line import/extensions
 import { useDeleteGraphiteAutoEmbeddingsConfigurationMutation } from '@/utils/__generated__/graphite.graphql';
 import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
 import { type AutoEmbeddingsConfiguration } from 'pages/[workspaceSlug]/[appSlug]/ai/auto-embeddings';
--- a/dashboard/src/features/ai/DevAssistant/DevAssistant.tsx
+++ b/dashboard/src/features/ai/DevAssistant/DevAssistant.tsx
@@ -152,7 +152,7 @@ export default function DevAssistant() {
    }
  };

-  if (isPlatform && currentProject?.plan?.isFree) {
+  if (isPlatform && currentProject?.legacyPlan?.isFree) {
    return (
      <Box className="p-4">
        <UpgradeToProBanner
@@ -170,18 +170,18 @@ export default function DevAssistant() {

  if (
    (isPlatform &&
-      !currentProject?.plan?.isFree &&
-      !currentProject.config?.ai) ||
+      !currentProject?.legacyPlan?.isFree &&
+      !currentProject?.config?.ai) ||
    !isGraphiteEnabled
  ) {
    return (
      <Box className="p-4">
-        <Alert className="grid w-full grid-flow-col place-content-between items-center gap-2">
+        <Alert className="grid items-center w-full grid-flow-col gap-2 place-content-between">
          <Text className="grid grid-flow-row justify-items-start gap-0.5">
            <Text component="span">
              To enable graphite, configure the service first in{' '}
              <Link
-                href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/ai`}
+                href={`/${currentWorkspace?.slug}/${currentProject?.slug}/settings/ai`}
                target="_blank"
                rel="noopener noreferrer"
                underline="hover"
@@ -197,11 +197,11 @@ export default function DevAssistant() {
  }

  return (
-    <div className="flex h-full flex-col overflow-auto">
+    <div className="flex flex-col h-full overflow-auto">
      <MessagesList loading={loading} />

      <form onSubmit={handleSubmit}>
-        <Box className="relative flex w-full flex-row justify-between p-2">
+        <Box className="relative flex flex-row justify-between w-full p-2">
          <Input
            value={userInput}
            onChange={(event) => {
@@ -224,7 +224,7 @@ export default function DevAssistant() {
            color="primary"
            aria-label="Send"
            type="submit"
-            className="absolute right-2 h-10 w-12 self-end rounded-xl"
+            className="absolute self-end w-12 h-10 right-2 rounded-xl"
          >
            {loading ? <ActivityIndicator /> : <ArrowUpIcon />}
          </IconButton>
--- a/dashboard/src/features/authentication/settings/components/ConcealErrorsSettings/ConcealErrorsSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/ConcealErrorsSettings/ConcealErrorsSettings.tsx
@@ -0,0 +1,136 @@
+import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
+import { useDialog } from '@/components/common/DialogProvider';
+import { useUI } from '@/components/common/UIProvider';
+import { Form } from '@/components/form/Form';
+import { SettingsContainer } from '@/components/layout/SettingsContainer';
+import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
+import {
+  GetAuthenticationSettingsDocument,
+  useGetAuthenticationSettingsQuery,
+  useUpdateConfigMutation,
+} from '@/utils/__generated__/graphql';
+import { useEffect } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+
+const validationSchema = Yup.object({
+  enabled: Yup.boolean(),
+});
+
+export type ToggleConcealErrorsFormValues = Yup.InferType<
+  typeof validationSchema
+>;
+
+export default function ConcealErrorsSettings() {
+  const { openDialog } = useDialog();
+  const isPlatform = useIsPlatform();
+  const { maintenanceActive } = useUI();
+  const localMimirClient = useLocalMimirClient();
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const [updateConfig] = useUpdateConfigMutation({
+    refetchQueries: [GetAuthenticationSettingsDocument],
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { data, loading, error } = useGetAuthenticationSettingsQuery({
+    variables: { appId: currentProject?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const form = useForm<ToggleConcealErrorsFormValues>({
+    reValidateMode: 'onSubmit',
+    defaultValues: {
+      enabled: data?.config?.auth?.misc?.concealErrors,
+    },
+  });
+
+  useEffect(() => {
+    if (!loading) {
+      form.reset({
+        enabled: data?.config?.auth?.misc?.concealErrors,
+      });
+    }
+  }, [loading, data, form]);
+
+  if (loading) {
+    return (
+      <ActivityIndicator
+        delay={1000}
+        label="Loading conceal error settings..."
+        className="justify-center"
+      />
+    );
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  const { formState } = form;
+
+  const handleToggleConcealErrors = async (
+    values: ToggleConcealErrorsFormValues,
+  ) => {
+    const updateConfigPromise = updateConfig({
+      variables: {
+        appId: currentProject.id,
+        config: {
+          auth: {
+            misc: {
+              concealErrors: values.enabled,
+            },
+          },
+        },
+      },
+    });
+
+    await execPromiseWithErrorToast(
+      async () => {
+        await updateConfigPromise;
+        form.reset(values);
+
+        if (!isPlatform) {
+          openDialog({
+            title: 'Apply your changes',
+            component: <ApplyLocalSettingsDialog />,
+            props: {
+              PaperProps: {
+                className: 'max-w-2xl',
+              },
+            },
+          });
+        }
+      },
+      {
+        loadingMessage: 'Updating conceal error settings...',
+        successMessage: 'Conceal error settings updated successfully.',
+        errorMessage:
+          'Failed to update conceal error settings. Please try again.',
+      },
+    );
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={handleToggleConcealErrors}>
+        <SettingsContainer
+          title="Conceal errors"
+          description="If set, conceals sensitive error messages to prevent leaking information about user accounts."
+          switchId="enabled"
+          showSwitch
+          slotProps={{
+            submitButton: {
+              disabled: !formState.isDirty || maintenanceActive,
+              loading: formState.isSubmitting,
+            },
+          }}
+          className="hidden"
+        />
+      </Form>
+    </FormProvider>
+  );
+}
--- a/dashboard/src/features/authentication/settings/components/ConcealErrorsSettings/index.ts
+++ b/dashboard/src/features/authentication/settings/components/ConcealErrorsSettings/index.ts
@@ -0,0 +1 @@
+export { default as ConcealErrorsSettings } from './ConcealErrorsSettings';
--- a/dashboard/src/features/authentication/settings/components/SMTPSettings/SMTPSettings.tsx
+++ b/dashboard/src/features/authentication/settings/components/SMTPSettings/SMTPSettings.tsx
@@ -22,14 +22,7 @@ import * as yup from 'yup';
 const smtpValidationSchema = yup
  .object({
    secure: yup.bool().label('SMTP Secure'),
-    host: yup
-      .string()
-      .label('SMTP Host')
-      .matches(
-        /((https?):\/\/)?(www\.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#[a-zA-Z0-9#]+?)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,
-        'SMTP Host must be a valid URL',
-      )
-      .required(),
+    host: yup.string().label('SMTP Host').required(),
    port: yup
      .number()
      .typeError('The SMTP port should contain only numbers.')
--- a/dashboard/src/features/authentication/settings/gql/getAuthenticationSettings.gql
+++ b/dashboard/src/features/authentication/settings/gql/getAuthenticationSettings.gql
@@ -50,6 +50,9 @@ query GetAuthenticationSettings($appId: uuid!) {
          default
        }
      }
+      misc {
+        concealErrors
+      }
      version
    }
  }
--- a/dashboard/src/features/database/common/hooks/useEstimatedDatabaseMigrationDowntime/index.ts
+++ b/dashboard/src/features/database/common/hooks/useEstimatedDatabaseMigrationDowntime/index.ts
@@ -0,0 +1 @@
+export { default as useEstimatedDatabaseMigrationDowntime } from './useEstimatedDatabaseMigrationDowntime';
--- a/dashboard/src/features/database/common/hooks/useEstimatedDatabaseMigrationDowntime/useEstimatedDatabaseMigrationDowntime.ts
+++ b/dashboard/src/features/database/common/hooks/useEstimatedDatabaseMigrationDowntime/useEstimatedDatabaseMigrationDowntime.ts
@@ -0,0 +1,93 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import {
+  useGetApplicationBackupsQuery,
+  type GetApplicationBackupsQuery,
+  type GetApplicationBackupsQueryVariables,
+} from '@/utils/__generated__/graphql';
+import type { QueryHookOptions } from '@apollo/client';
+
+interface TimePeriod {
+  value: number;
+  unit: 'hours' | 'minutes';
+  downtime: string;
+  downtimeShort: string;
+}
+
+export interface UseEstimatedDatabaseMigrationDowntimeOptions
+  extends QueryHookOptions<
+    GetApplicationBackupsQuery,
+    GetApplicationBackupsQueryVariables
+  > {}
+
+const DEFAULT_ESTIMATED_DOWNTIME: TimePeriod = {
+  value: 10,
+  unit: 'minutes',
+  downtime: '10 minutes',
+  downtimeShort: '10min',
+};
+
+function getEstimatedTime(diff: number): TimePeriod {
+  if (diff > 1000 * 3600) {
+    const value = Math.floor(diff / (1000 * 3600));
+    const unitStr = value === 1 ? 'hour' : 'hours';
+    return {
+      value,
+      unit: 'hours',
+      downtime: `${value} ${unitStr}`,
+      downtimeShort: `${value}hr`,
+    };
+  }
+  // 10 minutes is the minimum estimated downtime
+  if (diff > 1000 * 60 * 10) {
+    const value = Math.floor(diff / (1000 * 60));
+    const unitStr = value === 1 ? 'minute' : 'minutes';
+    return {
+      value,
+      unit: 'minutes',
+      downtime: `${value} ${unitStr}`,
+      downtimeShort: `${value}min`,
+    };
+  }
+
+  return DEFAULT_ESTIMATED_DOWNTIME;
+}
+
+/*
+ * This hook returns the estimated downtime for a database migration.
+ * The estimated downtime is calculated based on the time taken to complete the last backup.
+ * If there are no backups, the estimated downtime is set to 10 minutes.
+ */
+
+export default function useEstimatedDatabaseMigrationDowntime(
+  options: UseEstimatedDatabaseMigrationDowntimeOptions = {},
+): TimePeriod {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+
+  const isPlanFree = currentProject?.legacyPlan?.isFree;
+
+  const { data, loading, error } = useGetApplicationBackupsQuery({
+    ...options,
+    variables: { ...options.variables, appId: currentProject?.id },
+    skip: isPlanFree,
+  });
+
+  if (loading || error) {
+    return DEFAULT_ESTIMATED_DOWNTIME;
+  }
+
+  const backups = data?.app?.backups;
+
+  let estimatedMilliseconds = 1000 * 60 * 10; // DEFAULT ESTIMATED DOWNTIME is 10 minutes
+
+  if (!isPlanFree && backups?.length > 0) {
+    const lastBackup = backups[0];
+    const createdAt = new Date(lastBackup.createdAt);
+    const completedAt = new Date(lastBackup.completedAt);
+    const diff = completedAt.valueOf() - createdAt.valueOf();
+    estimatedMilliseconds = diff * 2;
+  }
+
+  const estimated = getEstimatedTime(estimatedMilliseconds);
+
+  return estimated;
+}
--- a/dashboard/src/features/database/common/hooks/useGetPostgresVersion/index.ts
+++ b/dashboard/src/features/database/common/hooks/useGetPostgresVersion/index.ts
@@ -0,0 +1 @@
+export { default as useGetPostgresVersion } from './useGetPostgresVersion';
--- a/dashboard/src/features/database/common/hooks/useGetPostgresVersion/useGetPostgresVersion.ts
+++ b/dashboard/src/features/database/common/hooks/useGetPostgresVersion/useGetPostgresVersion.ts
@@ -0,0 +1,37 @@
+import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
+import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
+import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
+import { useGetPostgresSettingsQuery } from '@/utils/__generated__/graphql';
+
+/**
+ * Queries the postgres version of the current project.
+ * @returns Major, minor and full version of the postgres database. Loading and error states.
+ */
+export default function useGetPostgresVersion() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const localMimirClient = useLocalMimirClient();
+  const isPlatform = useIsPlatform();
+
+  const {
+    data: postgresSettingsData,
+    loading,
+    error,
+  } = useGetPostgresSettingsQuery({
+    variables: { appId: currentProject?.id },
+    ...(!isPlatform ? { client: localMimirClient } : {}),
+  });
+
+  const { version } = postgresSettingsData?.config?.postgres || {};
+  const [postgresMajor, postgresMinor] = version?.split('.') || [
+    undefined,
+    undefined,
+  ];
+
+  return {
+    version,
+    postgresMajor,
+    postgresMinor,
+    loading,
+    error,
+  };
+}
--- a/dashboard/src/features/database/common/hooks/useIsDatabaseMigrating/index.ts
+++ b/dashboard/src/features/database/common/hooks/useIsDatabaseMigrating/index.ts
@@ -0,0 +1 @@
+export { default as useIsDatabaseMigrating } from './useIsDatabaseMigrating';
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default as useMediaQuery } from './useMediaQuery';`
				`@@ -0,0 +1 @@`
				`export { default as MainNav } from './MainNav';`
				`@@ -0,0 +1 @@`
				`export { default as OrgProjectLayout } from './OrgProjectLayout';`
				`@@ -0,0 +1 @@`
				`export { default as InfoOutlinedIcon } from './InfoOutlinedIcon';`
				`@@ -0,0 +1 @@`
				`export { default as PowerOffIcon } from './PowerOffIcon';`
				`@@ -0,0 +1 @@`
				`export { default as RepeatIcon } from './RepeatIcon';`
				`@@ -0,0 +1 @@`
				`export { default as ConcealErrorsSettings } from './ConcealErrorsSettings';`
				`@@ -0,0 +1 @@`
				`export { default as useEstimatedDatabaseMigrationDowntime } from './useEstimatedDatabaseMigrationDowntime';`
				`@@ -0,0 +1 @@`
				`export { default as useGetPostgresVersion } from './useGetPostgresVersion';`
				`@@ -0,0 +1 @@`
				`export { default as useIsDatabaseMigrating } from './useIsDatabaseMigrating';`