From ba93732222111355f0f42a46d609600ca17591e0 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Wed, 30 Apr 2025 22:58:12 +1200
Subject: [PATCH 1/4] move team engines to projects

---
 .../analytics/analytics-page.tsx              |    0
 .../{ => (overview)}/analytics/filter.tsx     |    4 +-
 .../analytics/ftux.client.tsx                 |    2 +-
 .../analytics/send-test-tx.client.tsx         |    0
 .../{ => (overview)}/analytics/summary.tsx    |    0
 .../analytics/tx-chart/tx-chart-ui.tsx        |    0
 .../analytics/tx-chart/tx-chart.tsx           |    0
 .../analytics/tx-table/tx-table-ui.tsx        |    2 +-
 .../analytics/tx-table/tx-table.tsx           |    0
 .../analytics/tx-table/types.ts               |    0
 .../engine/{ => (overview)}/explorer/page.tsx |    0
 .../engine/{ => (overview)}/layout.tsx        |   37 +-
 .../engine/{ => (overview)}/lib/analytics.ts  |    4 +-
 .../engine/{ => (overview)}/lib/utils.ts      |    0
 .../{ => (overview)}/lib/vault.client.ts      |    2 +-
 .../engine/{ => (overview)}/page.tsx          |    8 +-
 .../create-server-wallet.client.tsx           |  150 ++
 .../server-wallets/components/try-it-out.tsx  |  303 +++
 .../{ => (overview)}/server-wallets/page.tsx  |    4 +-
 .../server-wallets/wallet-table/types.ts      |    0
 .../wallet-table/wallet-table-ui.client.tsx   |    8 +-
 .../wallet-table/wallet-table.tsx             |    0
 .../{ => (overview)}/tx/[id]/layout.tsx       |    0
 .../engine/{ => (overview)}/tx/[id]/page.tsx  |    4 +-
 .../create-vault-account.client.tsx           |    0
 .../vault/components/key-management.tsx       |    0
 .../components/list-access-tokens.client.tsx  |    0
 .../components/rotate-admin-key.client.tsx    |  322 +++
 .../engine/{ => (overview)}/vault/page.tsx    |    2 +-
 .../(general)/EngineFooterCard.stories.tsx    |   44 +
 .../engine/legacy/(general)/_components.tsx   |  167 ++
 .../import/EngineImportPage.stories.tsx       |   37 +
 .../(general)/import/EngineImportPage.tsx     |  193 ++
 .../engine/legacy/(general)/import/page.tsx   |   27 +
 .../engine/legacy/(general)/layout.tsx        |  113 ++
 .../engine-instances-table.stories.tsx        |  166 ++
 .../overview/engine-instances-table.tsx       |  938 +++++++++
 .../legacy/(general)/overview/engine-list.tsx |   26 +
 .../engine/legacy/(general)/page.tsx          |   52 +
 .../_components/EngineErrorPage.tsx           |   28 +
 .../_components/EnginePageLayout.tsx          |   72 +
 .../_components/EnsureEnginePermission.tsx    |   87 +
 .../[engineId]/_components/version.tsx        |  289 +++
 .../components/access-tokens-table.tsx        |  312 +++
 .../components/add-access-token-button.tsx    |  123 ++
 .../components/add-keypair-button.tsx         |  233 +++
 .../components/engine-access-tokens.tsx       |  205 ++
 .../components/keypairs-table.tsx             |  218 ++
 .../[engineId]/access-tokens/page.tsx         |   15 +
 .../admins/components/add-admin-button.tsx    |  131 ++
 .../admins/components/admins-table.tsx        |  300 +++
 .../admins/components/engine-admins.tsx       |   48 +
 .../(instance)/[engineId]/admins/page.tsx     |   13 +
 .../components/EngineAlertDialogForm.tsx      |  231 +++
 .../alerts/components/EngineAlertsPage.tsx    |   37 +
 .../components/EngineDeleteAlertModal.tsx     |   52 +
 .../components/ManageEngineAlerts.stories.tsx |  122 ++
 .../alerts/components/ManageEngineAlerts.tsx  |  387 ++++
 .../components/RecentEngineAlerts.stories.tsx |   65 +
 .../alerts/components/RecentEngineAlerts.tsx  |  144 ++
 .../(instance)/[engineId]/alerts/page.tsx     |   15 +
 .../components/circle-config.tsx              |  129 ++
 .../configuration/components/cors.tsx         |  105 +
 .../components/engine-configuration.tsx       |   35 +
 .../components/engine-wallet-config.tsx       |  117 ++
 .../configuration/components/ip-allowlist.tsx |  112 ++
 .../components/kms-aws-config.tsx             |  185 ++
 .../components/kms-gcp-config.tsx             |  232 +++
 .../configuration/components/local-config.tsx |   10 +
 .../configuration/components/system.tsx       |   33 +
 .../[engineId]/configuration/page.tsx         |   19 +
 .../add-contract-subscription-button.tsx      |  566 ++++++
 .../contract-subscriptions-table.tsx          |  470 +++++
 .../engine-contract-subscription.tsx          |   73 +
 .../contract-subscriptions/page.tsx           |   18 +
 .../explorer/components/engine-explorer.tsx   |   38 +
 .../explorer/components/swagger-ui.css        | 1759 +++++++++++++++++
 .../(instance)/[engineId]/explorer/page.tsx   |   13 +
 .../legacy/(instance)/[engineId]/layout.tsx   |  134 ++
 .../components/EngineSystemMetrics.tsx        |  149 ++
 .../metrics/components/ErrorRate.tsx          |  110 ++
 .../metrics/components/Healthcheck.tsx        |   47 +
 .../metrics/components/StatusCodes.tsx        |  152 ++
 .../(instance)/[engineId]/metrics/page.tsx    |   19 +
 .../components/backend-wallets-table.tsx      |  732 +++++++
 .../create-backend-wallet-button.tsx          |  333 ++++
 .../overview/components/engine-overview.tsx   |  151 ++
 .../import-backend-wallet-button.tsx          |  347 ++++
 .../components/transaction-timeline.tsx       |  295 +++
 .../components/transactions-table.tsx         |  878 ++++++++
 .../[engineId]/overview/components/utils.ts   |   11 +
 .../legacy/(instance)/[engineId]/page.tsx     |   19 +
 .../components/add-relayer-button.tsx         |  239 +++
 .../relayers/components/engine-relayer.tsx    |   50 +
 .../relayers/components/relayers-table.tsx    |  449 +++++
 .../(instance)/[engineId]/relayers/page.tsx   |   13 +
 .../legacy/(instance)/[engineId]/types.ts     |    6 +
 .../create-wallet-credential-button.tsx       |   78 +
 .../components/credential-form.tsx            |  171 ++
 .../credential-type-fields/circle.tsx         |   62 +
 .../edit-wallet-credential-button.tsx         |   97 +
 .../wallet-credentials/components/types.ts    |   23 +
 .../components/wallet-credentials-table.tsx   |  105 +
 .../components/wallet-credentials.tsx         |   93 +
 .../[engineId]/wallet-credentials/page.tsx    |   18 +
 .../components/add-webhook-button.tsx         |  146 ++
 .../webhooks/components/engine-webhooks.tsx   |   49 +
 .../webhooks/components/webhooks-table.tsx    |  332 ++++
 .../(instance)/[engineId]/webhooks/page.tsx   |   13 +
 .../_utils/getEngineAccessPermission.ts       |   33 +
 .../engine/legacy/_utils/getEngineInstance.ts |   46 +
 .../_utils/getEngineInstancePageMeta.ts       |   35 +
 .../legacy/_utils/getEngineInstances.ts       |   33 +
 .../create-server-wallet.client.tsx           |    2 +-
 .../components/rotate-admin-key.client.tsx    |  242 +++
 .../server-wallets/components/try-it-out.tsx  |    6 +-
 .../components/rotate-admin-key.client.tsx    |    2 +-
 .../TeamAndProjectSelectorPopoverButton.tsx   |    7 +-
 118 files changed, 15348 insertions(+), 35 deletions(-)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/analytics-page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/filter.tsx (87%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/ftux.client.tsx (97%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/send-test-tx.client.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/summary.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/tx-chart/tx-chart-ui.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/tx-chart/tx-chart.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/tx-table/tx-table-ui.tsx (99%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/tx-table/tx-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/analytics/tx-table/types.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/explorer/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/layout.tsx (70%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/lib/analytics.ts (97%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/lib/utils.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/lib/vault.client.ts (98%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/page.tsx (94%)
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/create-server-wallet.client.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/try-it-out.tsx
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/server-wallets/page.tsx (92%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/server-wallets/wallet-table/types.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/server-wallets/wallet-table/wallet-table-ui.client.tsx (94%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/server-wallets/wallet-table/wallet-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/tx/[id]/layout.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/tx/[id]/page.tsx (84%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/vault/components/create-vault-account.client.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/vault/components/key-management.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/vault/components/list-access-tokens.client.tsx (100%)
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/rotate-admin-key.client.tsx
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{ => (overview)}/vault/page.tsx (92%)
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/EngineFooterCard.stories.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/_components.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.stories.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.stories.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-list.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EngineErrorPage.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnginePageLayout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/version.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/add-admin-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/admins-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/engine-admins.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/circle-config.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/cors.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-configuration.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/local-config.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/system.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/engine-explorer.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/swagger-ui.css
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/layout.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/ErrorRate.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/Healthcheck.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/StatusCodes.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/engine-overview.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transaction-timeline.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transactions-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/utils.ts
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/engine-relayer.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/relayers-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/types.ts
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/types.ts
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/page.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineAccessPermission.ts
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstance.ts
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstancePageMeta.ts
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstances.ts
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/rotate-admin-key.client.tsx

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/analytics-page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/analytics-page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/analytics-page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/analytics-page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/filter.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/filter.tsx
similarity index 87%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/filter.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/filter.tsx
index 8679439c57d..773264f8375 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/filter.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/filter.tsx
@@ -5,8 +5,8 @@ import {
   useResponsiveSearchParams,
   useSetResponsiveSearchParams,
 } from "responsive-rsc";
-import { DateRangeSelector } from "../../../../../../../components/analytics/date-range-selector";
-import { IntervalSelector } from "../../../../../../../components/analytics/interval-selector";
+import { DateRangeSelector } from "../../../../../../../../components/analytics/date-range-selector";
+import { IntervalSelector } from "../../../../../../../../components/analytics/interval-selector";
 import { getTxAnalyticsFiltersFromSearchParams } from "../lib/utils";
 
 export function TransactionAnalyticsFilter() {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/ftux.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/ftux.client.tsx
similarity index 97%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/ftux.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/ftux.client.tsx
index 49c4ef9f131..cb7e6eb2950 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/ftux.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/ftux.client.tsx
@@ -3,7 +3,7 @@ import type { Project } from "@/api/projects";
 import { type Step, StepsCard } from "components/dashboard/StepsCard";
 import Link from "next/link";
 import { useMemo, useState } from "react";
-import { Button } from "../../../../../../../@/components/ui/button";
+import { Button } from "../../../../../../../../@/components/ui/button";
 import CreateServerWallet from "../server-wallets/components/create-server-wallet.client";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import CreateVaultAccountButton from "../vault/components/create-vault-account.client";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/send-test-tx.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/send-test-tx.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/send-test-tx.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/send-test-tx.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/summary.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/summary.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/summary.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/summary.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-chart/tx-chart-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-chart/tx-chart-ui.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-chart/tx-chart-ui.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-chart/tx-chart-ui.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-chart/tx-chart.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-chart/tx-chart.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-chart/tx-chart.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-chart/tx-chart.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-table/tx-table-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/tx-table-ui.tsx
similarity index 99%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-table/tx-table-ui.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/tx-table-ui.tsx
index 117ee68f629..cd8daf51e23 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-table/tx-table-ui.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/tx-table-ui.tsx
@@ -37,7 +37,7 @@ import { useAllChainsData } from "hooks/chains/allChains";
 import { ExternalLinkIcon, InfoIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import { ChainIconClient } from "../../../../../../../../components/icons/ChainIcon";
+import { ChainIconClient } from "../../../../../../../../../components/icons/ChainIcon";
 import type { Wallet } from "../../server-wallets/wallet-table/types";
 import type {
   Transaction,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-table/tx-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/tx-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-table/tx-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/tx-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-table/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/types.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/analytics/tx-table/types.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/types.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/explorer/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/explorer/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/explorer/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/explorer/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/layout.tsx
similarity index 70%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/layout.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/layout.tsx
index eea3d9a80dd..35d14daf36f 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/layout.tsx
@@ -1,22 +1,30 @@
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
-import { CloudIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { Button } from "../../../../../../@/components/ui/button";
+import { EngineIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
+import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { getEngineInstances } from "../legacy/_utils/getEngineInstances";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
   children: React.ReactNode;
 }) {
   const { team_slug, project_slug } = await props.params;
+  const authToken = await getAuthToken();
 
-  const [team, project] = await Promise.all([
+  if (!authToken) {
+    redirect("/team");
+  }
+
+  const [team, project, engineInstances] = await Promise.all([
     getTeamBySlug(team_slug),
     getProject(team_slug, project_slug),
+    getEngineInstances({ authToken, teamIdOrSlug: team_slug }),
   ]);
 
   if (!team) {
@@ -27,6 +35,11 @@ export default async function Page(props: {
     redirect(`/team/${team_slug}`);
   }
 
+  // if we have any legacy engine instances, redirect to the legacy engine layout
+  if (engineInstances.data?.length && engineInstances.data.length > 0) {
+    redirect(`/team/${team_slug}/${project_slug}/engine/legacy`);
+  }
+
   return (
     <TransactionsLayout
       projectSlug={project.slug}
@@ -54,8 +67,14 @@ function TransactionsLayout(props: {
         <div className="container flex max-w-7xl flex-col gap-4">
           <div className="flex flex-row items-center justify-between">
             <div className="flex flex-col">
-              <h1 className="mb-0.5 font-semibold text-2xl tracking-tight lg:text-3xl">
-                Engine
+              <h1 className="mb-0.5 flex items-center gap-2 font-semibold text-3xl tracking-tight">
+                Engine{" "}
+                <Badge
+                  variant="success"
+                  className="mt-0.5 flex items-center gap-2 text-sm"
+                >
+                  <EngineIcon className="size-4" /> Cloud
+                </Badge>
               </h1>
               <div className="flex items-center gap-2">
                 <Link
@@ -65,14 +84,10 @@ function TransactionsLayout(props: {
                 >
                   {THIRDWEB_ENGINE_CLOUD_URL}
                 </Link>
-                <Badge variant="success" className="flex items-center gap-2">
-                  <CloudIcon className="h-4 w-4" />
-                  Cloud
-                </Badge>
               </div>
             </div>
-            <Link href={`/team/${props.teamSlug}/~/engine`} target="_blank">
-              <Button variant="outline">Looking for legacy engines?</Button>
+            <Link href={`${engineLayoutSlug}/legacy`}>
+              <Button variant="outline">Switch to dedicated engines</Button>
             </Link>
           </div>
         </div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/analytics.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/analytics.ts
similarity index 97%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/analytics.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/analytics.ts
index df00470dc4c..05020cfeda5 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/analytics.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/analytics.ts
@@ -1,6 +1,6 @@
 import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
-import type { TransactionStats } from "../../../../../../../types/analytics";
-import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import type { TransactionStats } from "../../../../../../../../types/analytics";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
 
 // Define the structure of the data we expect back from our fetch function
 export type TransactionSummaryData = {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/utils.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/utils.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/utils.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/utils.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/vault.client.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/vault.client.ts
similarity index 98%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/vault.client.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/vault.client.ts
index f66f308ab93..225f87bed3c 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/lib/vault.client.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/vault.client.ts
@@ -7,7 +7,7 @@ import {
   createAccessToken,
   createVaultClient,
 } from "@thirdweb-dev/vault-sdk";
-import { updateProjectClient } from "../../../../../../../@3rdweb-sdk/react/hooks/useApi";
+import { updateProjectClient } from "../../../../../../../../@3rdweb-sdk/react/hooks/useApi";
 
 const SERVER_WALLET_ACCESS_TOKEN_PURPOSE =
   "Access Token for All Server Wallets";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/page.tsx
similarity index 94%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/page.tsx
index eb332671b6c..86bd31a2d48 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/page.tsx
@@ -3,7 +3,7 @@ import { getTeamBySlug } from "@/api/team";
 import { THIRDWEB_VAULT_URL } from "@/constants/env";
 import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
 import { notFound, redirect } from "next/navigation";
-import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { getAuthToken } from "../../../../../api/lib/getAuthToken";
 import { TransactionsAnalyticsPageContent } from "./analytics/analytics-page";
 import { EngineChecklist } from "./analytics/ftux.client";
 import { TransactionAnalyticsSummary } from "./analytics/summary";
@@ -50,7 +50,11 @@ export default async function TransactionsAnalyticsPage(props: {
 
   const vaultClient = await createVaultClient({
     baseUrl: THIRDWEB_VAULT_URL,
-  });
+  }).catch(() => undefined);
+
+  if (!vaultClient) {
+    return <div>Error: Failed to connect to Vault</div>;
+  }
 
   const managementAccessToken =
     projectEngineCloudService?.managementAccessToken;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/create-server-wallet.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/create-server-wallet.client.tsx
new file mode 100644
index 00000000000..ce18a9712bc
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/create-server-wallet.client.tsx
@@ -0,0 +1,150 @@
+"use client";
+import type { Project } from "@/api/projects";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { useMutation } from "@tanstack/react-query";
+import { createEoa } from "@thirdweb-dev/vault-sdk";
+import { Loader2, WalletIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { initVaultClient } from "../../lib/vault.client";
+
+export default function CreateServerWallet(props: {
+  project: Project;
+  managementAccessToken: string | undefined;
+}) {
+  const router = useDashboardRouter();
+  const [label, setLabel] = useState("");
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const createEoaMutation = useMutation({
+    mutationFn: async ({
+      managementAccessToken,
+      label,
+    }: {
+      managementAccessToken: string;
+      label: string;
+    }) => {
+      const vaultClient = await initVaultClient();
+
+      const eoa = await createEoa({
+        request: {
+          options: {
+            metadata: {
+              projectId: props.project.id,
+              teamId: props.project.teamId,
+              type: "server-wallet",
+              label,
+            },
+          },
+          auth: {
+            accessToken: managementAccessToken,
+          },
+        },
+        client: vaultClient,
+      });
+
+      if (!eoa.success) {
+        throw new Error("Failed to create eoa");
+      }
+
+      router.refresh();
+      setModalOpen(false);
+
+      return eoa;
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+
+  const handleCreateServerWallet = async () => {
+    if (!props.managementAccessToken) {
+      router.push("vault");
+    } else {
+      await createEoaMutation.mutateAsync({
+        managementAccessToken: props.managementAccessToken,
+        label,
+      });
+    }
+  };
+
+  const isLoading = createEoaMutation.isPending;
+
+  return (
+    <>
+      <Button
+        variant={"primary"}
+        onClick={() =>
+          props.managementAccessToken
+            ? setModalOpen(true)
+            : router.push("vault")
+        }
+        className="flex flex-row items-center gap-2"
+      >
+        {isLoading ? (
+          <Loader2 className="animate-spin" />
+        ) : (
+          <WalletIcon className="size-4" />
+        )}
+        {props.managementAccessToken
+          ? isLoading
+            ? "Creating..."
+            : "Create Server Wallet"
+          : "Get Started"}
+      </Button>
+
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="p-0">
+          <DialogHeader className="px-6 pt-6">
+            <DialogTitle>Create server wallet</DialogTitle>
+            <DialogDescription>
+              Enter a label for your server wallet.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-4 px-6">
+            <div>
+              <Input
+                placeholder="Wallet label (optional)"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                className="w-full"
+              />
+            </div>
+          </div>
+          <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
+            <Button
+              variant="outline"
+              onClick={() => setModalOpen(false)}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleCreateServerWallet}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                "Create"
+              )}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/try-it-out.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/try-it-out.tsx
new file mode 100644
index 00000000000..455bbdd6270
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/try-it-out.tsx
@@ -0,0 +1,303 @@
+"use client";
+import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
+import Link from "next/link";
+import { useState } from "react";
+import { Button } from "../../../../../../../../../@/components/ui/button";
+import { CodeClient } from "../../../../../../../../../@/components/ui/code/code.client";
+import { TabButtons } from "../../../../../../../../../@/components/ui/tabs";
+import type { Wallet } from "../wallet-table/types";
+
+export function TryItOut(props: {
+  authToken: string;
+  wallet?: Wallet;
+  team_slug: string;
+  project_slug: string;
+}) {
+  const [activeTab, setActiveTab] = useState<string>("curl");
+
+  return (
+    <div className="flex flex-col gap-6 overflow-hidden rounded-lg border border-border bg-card p-6">
+      <div className="flex flex-row items-center gap-4">
+        <div className="flex flex-1 flex-col gap-4 rounded-lg rounded-b-none lg:flex-row lg:justify-between">
+          <div>
+            <h2 className="font-semibold text-xl tracking-tight">
+              Usage from your backend
+            </h2>
+            <p className="text-muted-foreground text-sm">
+              Send transactions from your server wallets using a simple http API
+            </p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <TabButtons
+          tabs={[
+            {
+              name: "curl",
+              onClick: () => setActiveTab("curl"),
+              isActive: activeTab === "curl",
+            },
+            {
+              name: "JavaScript",
+              onClick: () => setActiveTab("js"),
+              isActive: activeTab === "js",
+            },
+            {
+              name: "Python",
+              onClick: () => setActiveTab("python"),
+              isActive: activeTab === "python",
+            },
+            {
+              name: "Go",
+              onClick: () => setActiveTab("go"),
+              isActive: activeTab === "go",
+            },
+            {
+              name: "C#",
+              onClick: () => setActiveTab("csharp"),
+              isActive: activeTab === "csharp",
+            },
+          ]}
+        />
+
+        <div className="h-4" />
+
+        {activeTab === "curl" && (
+          <CodeClient
+            lang="bash"
+            code={curlExample()}
+            className="bg-background"
+          />
+        )}
+        {activeTab === "js" && (
+          <CodeClient lang="js" code={jsExample()} className="bg-background" />
+        )}
+        {activeTab === "python" && (
+          <CodeClient
+            lang="python"
+            code={pythonExample()}
+            className="bg-background"
+          />
+        )}
+        {activeTab === "go" && (
+          <CodeClient lang="go" code={goExample()} className="bg-background" />
+        )}
+        {activeTab === "csharp" && (
+          <CodeClient
+            lang="csharp"
+            code={csharpExample()}
+            className="bg-background"
+          />
+        )}
+
+        <div className="h-4" />
+        <div className="flex flex-row justify-end gap-4">
+          <Button variant={"secondary"} asChild>
+            <Link
+              href={`/team/${props.team_slug}/${props.project_slug}/engine/explorer`}
+              rel="noreferrer"
+            >
+              View API reference
+            </Link>
+          </Button>
+          {props.wallet && (
+            <Button variant={"primary"} asChild>
+              <Link
+                href={`/team/${props.team_slug}/${props.project_slug}/engine?expand_test_tx=true`}
+                rel="noreferrer"
+              >
+                Send a test transaction
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const curlExample = () => `\
+curl -X POST "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract" \\
+  -H "Content-Type: application/json" \\
+  -H "x-secret-key: <your-project-secret-key>" \\
+  -H "x-vault-access-token: <your-vault-access-token>" \\
+  -d '{
+    "executionOptions": {
+      "type": "AA",
+      "signerAddress": "<your-signer-address>",
+      "chainId": "84532"
+    },
+    "params": [
+      {
+        "contractAddress": "0x...",
+        "method": "function mintTo(address to, uint256 amount)",
+        "params": ["0x...", "100"]
+      }
+    ]
+  }'`;
+
+const jsExample = () => `\
+const response = await fetch(
+  "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract",
+  {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "x-secret-key": "<your-project-secret-key>",
+      "x-vault-access-token": "<your-vault-access-token>"
+    },
+    body: JSON.stringify({
+      "executionOptions": {
+        "type": "AA",
+        "signerAddress": "<your-signer-address>",
+        "chainId": "84532"
+      },
+      "params": [
+        {
+          "contractAddress": "0x...",
+          "method": "function mintTo(address to, uint256 amount)",
+          "params": ["0x...", "100"]
+        }
+      ]
+    })
+  }
+);`;
+
+const pythonExample = () => `\
+import requests
+import json
+
+url = "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract"
+headers = {
+    "Content-Type": "application/json",
+    "x-secret-key": "<your-project-secret-key>",
+    "x-vault-access-token": "<your-vault-access-token>"
+}
+payload = {
+    "executionOptions": {
+        "type": "AA",
+        "signerAddress": "<your-signer-address>",
+        "chainId": "84532"
+    },
+    "params": [
+        {
+            "contractAddress": "0x...",
+            "method": "function mintTo(address to, uint256 amount)",
+            "params": ["0x...", "100"]
+        }
+    ]
+}
+
+response = requests.post(url, headers=headers, json=payload)
+result = response.json()`;
+
+const goExample = () => `\
+package main
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"net/http"
+)
+
+func main() {
+	url := "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract"
+	
+	// Create the request payload
+	type Param struct {
+		ContractAddress string   \`json:"contractAddress"\`
+		Method          string   \`json:"method"\`
+		Params          []string \`json:"params"\`
+	}
+	
+	type RequestBody struct {
+		ExecutionOptions struct {
+			Type          string \`json:"type"\`
+			SignerAddress string \`json:"signerAddress"\`
+			ChainId       string \`json:"chainId"\`
+		} \`json:"executionOptions"\`
+		Params []Param \`json:"params"\`
+	}
+	
+	requestBody := RequestBody{
+		Params: []Param{
+			{
+				ContractAddress: "0x...",
+				Method:          "function mintTo(address to, uint256 amount)",
+				Params:          []string{"0x...", "100"},
+			},
+		},
+	}
+	requestBody.ExecutionOptions.Type = "AA"
+	requestBody.ExecutionOptions.SignerAddress = "<your-signer-address>"
+	requestBody.ExecutionOptions.ChainId = "84532"
+	
+	jsonData, _ := json.Marshal(requestBody)
+	
+	// Create the HTTP request
+	req, _ := http.NewRequest("POST", url, bytes.NewBuffer(jsonData))
+	req.Header.Set("Content-Type", "application/json")
+	req.Header.Set("x-secret-key", "<your-project-secret-key>")
+	req.Header.Set("x-vault-access-token", "<your-vault-access-token>")
+	
+	// Send the request
+	client := &http.Client{}
+	resp, err := client.Do(req)
+	if err != nil {
+		fmt.Println("Error:", err)
+		return
+	}
+	defer resp.Body.Close()
+	
+	// Process the response
+	var result map[string]interface{}
+	json.NewDecoder(resp.Body).Decode(&result)
+	fmt.Println("Response:", result)
+}`;
+
+const csharpExample = () => `\
+using System;
+using System.Net.Http;
+using System.Text;
+using System.Text.Json;
+using System.Threading.Tasks;
+
+class Program
+{
+    static async Task Main()
+    {
+        var url = "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract";
+        
+        var requestData = new
+        {
+            executionOptions = new
+            {
+                type = "AA",
+                signerAddress = "<your-signer-address>",
+                chainId = "84532"
+            },
+            @params = new[]
+            {
+                new
+                {
+                    contractAddress = "0x...",
+                    method = "function mintTo(address to, uint256 amount)",
+                    @params = new[] { "0x...", "100" }
+                }
+            }
+        };
+        
+        var json = JsonSerializer.Serialize(requestData);
+        var content = new StringContent(json, Encoding.UTF8, "application/json");
+        
+        using var httpClient = new HttpClient();
+        httpClient.DefaultRequestHeaders.Add("x-secret-key", "<your-project-secret-key>");
+        httpClient.DefaultRequestHeaders.Add("x-vault-access-token", "<your-vault-access-token>");
+        
+        var response = await httpClient.PostAsync(url, content);
+        var responseContent = await response.Content.ReadAsStringAsync();
+        
+        Console.WriteLine(responseContent);
+    }
+}`;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/page.tsx
similarity index 92%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/page.tsx
index 368791001a8..5e853b4d840 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/page.tsx
@@ -1,8 +1,8 @@
 import { getProject } from "@/api/projects";
 import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
 import { notFound } from "next/navigation";
-import { THIRDWEB_VAULT_URL } from "../../../../../../../@/constants/env";
-import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { THIRDWEB_VAULT_URL } from "../../../../../../../../@/constants/env";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
 import { TryItOut } from "./components/try-it-out";
 import type { Wallet } from "./wallet-table/types";
 import { ServerWalletsTable } from "./wallet-table/wallet-table";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/types.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/types.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/types.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/wallet-table-ui.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/wallet-table-ui.client.tsx
similarity index 94%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/wallet-table-ui.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/wallet-table-ui.client.tsx
index f017d1f283e..cc3a5b34c21 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/wallet-table-ui.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/wallet-table-ui.client.tsx
@@ -2,6 +2,9 @@
 
 import type { Project } from "@/api/projects";
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
 import {
   Table,
   TableBody,
@@ -21,10 +24,7 @@ import {
   DEFAULT_ACCOUNT_FACTORY_V0_7,
   predictSmartAccountAddress,
 } from "thirdweb/wallets/smart";
-import { Badge } from "../../../../../../../../@/components/ui/badge";
-import { Skeleton } from "../../../../../../../../@/components/ui/skeleton";
-import { Switch } from "../../../../../../../../@/components/ui/switch";
-import { useV5DashboardChain } from "../../../../../../../../lib/v5-adapter";
+import { useV5DashboardChain } from "../../../../../../../../../lib/v5-adapter";
 import CreateServerWallet from "../components/create-server-wallet.client";
 import type { Wallet } from "./types";
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/wallet-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/wallet-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/wallet-table/wallet-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/wallet-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/tx/[id]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/tx/[id]/layout.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/tx/[id]/layout.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/tx/[id]/layout.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/tx/[id]/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/tx/[id]/page.tsx
similarity index 84%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/tx/[id]/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/tx/[id]/page.tsx
index 365e84a1215..68843aa1313 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/tx/[id]/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/tx/[id]/page.tsx
@@ -1,6 +1,6 @@
 import { notFound, redirect } from "next/navigation";
-import { getProject } from "../../../../../../../../@/api/projects";
-import { CodeServer } from "../../../../../../../../@/components/ui/code/code.server";
+import { getProject } from "../../../../../../../../../@/api/projects";
+import { CodeServer } from "../../../../../../../../../@/components/ui/code/code.server";
 import { getSingleTransaction } from "../../lib/analytics";
 
 export default async function TransactionPage({
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/create-vault-account.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/create-vault-account.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/create-vault-account.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/create-vault-account.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/key-management.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/key-management.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/key-management.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/key-management.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/list-access-tokens.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/list-access-tokens.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/list-access-tokens.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/list-access-tokens.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/rotate-admin-key.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/rotate-admin-key.client.tsx
new file mode 100644
index 00000000000..d1634fc02d5
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/rotate-admin-key.client.tsx
@@ -0,0 +1,322 @@
+"use client";
+
+import type { Project } from "@/api/projects";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
+import { useMutation } from "@tanstack/react-query";
+import { rotateServiceAccount } from "@thirdweb-dev/vault-sdk";
+import {
+  CheckIcon,
+  CircleAlertIcon,
+  DownloadIcon,
+  Loader2,
+  RefreshCcwIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  createManagementAccessToken,
+  createWalletAccessToken,
+  initVaultClient,
+  maskSecret,
+} from "../../lib/vault.client";
+
+export default function RotateAdminKeyButton(props: { project: Project }) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [keysConfirmed, setKeysConfirmed] = useState(false);
+  const [keysDownloaded, setKeysDownloaded] = useState(false);
+  const router = useDashboardRouter();
+
+  const rotateAdminKeyMutation = useMutation({
+    mutationFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const vaultClient = await initVaultClient();
+      const rotationCode = props.project.services.find(
+        (service) => service.name === "engineCloud",
+      )?.rotationCode;
+
+      if (!rotationCode) {
+        throw new Error("Rotation code not found");
+      }
+
+      const rotateServiceAccountRes = await rotateServiceAccount({
+        client: vaultClient,
+        request: {
+          auth: {
+            rotationCode,
+          },
+        },
+      });
+
+      if (rotateServiceAccountRes.error) {
+        throw new Error(rotateServiceAccountRes.error.message);
+      }
+
+      // need to recreate the management access token with the new admin key
+      const managementAccessTokenPromise = createManagementAccessToken({
+        project: props.project,
+        adminKey: rotateServiceAccountRes.data.newAdminKey,
+        rotationCode: rotateServiceAccountRes.data.newRotationCode,
+        vaultClient,
+      });
+
+      const userAccesTokenPromise = createWalletAccessToken({
+        project: props.project,
+        adminKey: rotateServiceAccountRes.data.newAdminKey,
+        vaultClient,
+      });
+
+      const [userAccessTokenRes, managementAccessTokenRes] = await Promise.all([
+        userAccesTokenPromise,
+        managementAccessTokenPromise,
+      ]);
+
+      if (!managementAccessTokenRes.success || !userAccessTokenRes.success) {
+        throw new Error("Failed to create access token");
+      }
+
+      return {
+        success: true,
+        adminKey: rotateServiceAccountRes.data.newAdminKey,
+        userAccessToken: userAccessTokenRes.data,
+      };
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+
+  const handleDownloadKeys = () => {
+    if (!rotateAdminKeyMutation.data) {
+      return;
+    }
+
+    const fileContent = `Project:\n${props.project.name} (${props.project.publishableKey})\n\nVault Admin Key:\n${rotateAdminKeyMutation.data.adminKey}\n\nVault Access Token:\n${rotateAdminKeyMutation.data.userAccessToken.accessToken}\n`;
+    const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    const filename = `${props.project.name}-vault-keys-rotated.txt`;
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link); // Required for Firefox
+    link.click();
+
+    // Clean up
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+
+    toast.success(`Keys downloaded as ${filename}`);
+    setKeysDownloaded(true);
+  };
+
+  const handleCloseModal = () => {
+    if (!keysConfirmed) {
+      return;
+    }
+
+    setModalOpen(false);
+    setKeysConfirmed(false);
+    setKeysDownloaded(false);
+    // invalidate the page to force a reload
+    rotateAdminKeyMutation.reset();
+    router.refresh();
+  };
+
+  const isLoading = rotateAdminKeyMutation.isPending;
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        onClick={() => setModalOpen(true)}
+        disabled={isLoading}
+        className="h-auto gap-2 rounded-lg bg-background px-4 py-3"
+      >
+        {isLoading && <Loader2 className="animate-spin" />}
+        {!isLoading && <RefreshCcwIcon className="size-4" />}
+        Rotate Admin Key
+      </Button>
+
+      <Dialog open={modalOpen} onOpenChange={handleCloseModal} modal={true}>
+        <DialogContent
+          className="overflow-hidden p-0"
+          dialogCloseClassName={cn(!keysConfirmed && "hidden")}
+        >
+          {rotateAdminKeyMutation.isPending ? (
+            <>
+              <DialogHeader className="p-6">
+                <DialogTitle>Generating new keys...</DialogTitle>
+              </DialogHeader>
+              <div className="flex flex-col items-center justify-center gap-4 p-10">
+                <Spinner className="size-8" />
+                <p className="text-muted-foreground text-xs">
+                  This may take a few seconds.
+                </p>
+              </div>
+            </>
+          ) : rotateAdminKeyMutation.data ? (
+            <div>
+              <DialogHeader className="p-6">
+                <DialogTitle>New Vault Keys</DialogTitle>
+              </DialogHeader>
+
+              <div className="space-y-6 p-6 pt-0">
+                <div className="space-y-4">
+                  <div>
+                    <h3 className="mb-2 font-medium text-sm">
+                      New Vault Admin Key
+                    </h3>
+                    <div className="flex flex-col gap-2">
+                      <CopyTextButton
+                        textToCopy={rotateAdminKeyMutation.data.adminKey}
+                        className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
+                        textToShow={maskSecret(
+                          rotateAdminKeyMutation.data.adminKey,
+                        )}
+                        copyIconPosition="right"
+                        tooltip="Copy Admin Key"
+                      />
+                      <p className="text-muted-foreground text-xs">
+                        This key is used to create or revoke your access tokens.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div>
+                    <h3 className="mb-2 font-medium text-sm">
+                      New Vault Access Token
+                    </h3>
+                    <div className="flex flex-col gap-2 ">
+                      <CopyTextButton
+                        textToCopy={
+                          rotateAdminKeyMutation.data.userAccessToken
+                            .accessToken
+                        }
+                        className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
+                        textToShow={maskSecret(
+                          rotateAdminKeyMutation.data.userAccessToken
+                            .accessToken,
+                        )}
+                        copyIconPosition="right"
+                        tooltip="Copy Vault Access Token"
+                      />
+                      <p className="text-muted-foreground text-xs">
+                        This access token is used to sign transactions and
+                        messages from your backend. Can be revoked and recreated
+                        with your admin key.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <Alert variant="destructive">
+                  <AlertTitle>Secure your keys</AlertTitle>
+                  <AlertDescription>
+                    These keys will not be displayed again. Store them securely
+                    as they provide access to your server wallets.
+                  </AlertDescription>
+                  <div className="h-4" />
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="link"
+                      onClick={handleDownloadKeys}
+                      className="flex h-auto items-center gap-2 p-0 text-sm text-success-text"
+                    >
+                      <DownloadIcon className="size-4" />
+                      {keysDownloaded ? "Keys Downloaded" : "Download Keys"}
+                    </Button>
+                    {keysDownloaded && (
+                      <span className="text-success-text text-xs">
+                        <CheckIcon className="size-4" />
+                      </span>
+                    )}
+                  </div>
+                  <div className="h-4" />
+                  <CheckboxWithLabel className="text-foreground">
+                    <Checkbox
+                      checked={keysConfirmed}
+                      onCheckedChange={(v) => setKeysConfirmed(!!v)}
+                    />
+                    I confirm that I've securely stored these keys
+                  </CheckboxWithLabel>
+                </Alert>
+              </div>
+
+              <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
+                <Button
+                  onClick={handleCloseModal}
+                  disabled={!keysConfirmed}
+                  variant="primary"
+                >
+                  Close
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <>
+              <DialogHeader className="px-6 pt-6">
+                <DialogTitle>Rotate your Vault admin key</DialogTitle>
+                <DialogDescription>
+                  This action will generate a new Vault admin key and rotation
+                  code.{" "}
+                </DialogDescription>
+              </DialogHeader>
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-4 px-6">
+                  <p className="text-md text-primary-foreground">
+                    Revoke your current keys and generates new ones.
+                  </p>
+                  <Alert variant="destructive">
+                    <CircleAlertIcon className="size-5" />
+                    <AlertTitle>Important</AlertTitle>
+                    <AlertDescription>
+                      This action will invalidate your current admin key and all
+                      existing access tokens. You will need to update your
+                      backend to use these new access tokens.
+                    </AlertDescription>
+                  </Alert>
+                </div>
+                <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={() => rotateAdminKeyMutation.mutate()}
+                    disabled={rotateAdminKeyMutation.isPending}
+                  >
+                    {rotateAdminKeyMutation.isPending ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Rotating...
+                      </>
+                    ) : (
+                      "Rotate Admin Key"
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/page.tsx
similarity index 92%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/page.tsx
index 149cb1dfa24..02857a44b72 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/page.tsx
@@ -1,6 +1,6 @@
 import { getProject } from "@/api/projects";
 import { notFound } from "next/navigation";
-import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
 import { KeyManagement } from "./components/key-management";
 
 export default async function VaultPage(props: {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/EngineFooterCard.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/EngineFooterCard.stories.tsx
new file mode 100644
index 00000000000..22a678e32f1
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/EngineFooterCard.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EngineFooterCard } from "./_components";
+
+const meta = {
+  title: "Engine/EngineFooterCard",
+  component: EngineFooterCard,
+  args: {
+    team_slug: "demo-team",
+  },
+  decorators: [
+    (Story) => (
+      <div className="container max-w-6xl py-10">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof EngineFooterCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Growth: Story = {
+  args: {
+    teamPlan: "growth",
+  },
+};
+
+export const Accelerate: Story = {
+  args: {
+    teamPlan: "accelerate",
+  },
+};
+
+export const Scale: Story = {
+  args: {
+    teamPlan: "scale",
+  },
+};
+
+export const Pro: Story = {
+  args: {
+    teamPlan: "pro",
+  },
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/_components.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/_components.tsx
new file mode 100644
index 00000000000..8c6680521a8
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/_components.tsx
@@ -0,0 +1,167 @@
+import type { Team } from "@/api/team";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { PRO_CONTACT_US_URL } from "constants/pro";
+import { ArrowRightIcon, DownloadIcon, ExternalLinkIcon } from "lucide-react";
+import Link from "next/link";
+
+export function ImportEngineLink(props: {
+  label: string;
+  engineLinkPrefix: string;
+}) {
+  return (
+    <Button asChild variant="outline" size="sm" className="gap-2 bg-card">
+      <TrackedLinkTW
+        href={`${props.engineLinkPrefix}/import`}
+        category="engine"
+        trackingProps={{
+          action: "import",
+        }}
+      >
+        <DownloadIcon className="size-3" />
+        {props.label}
+      </TrackedLinkTW>
+    </Button>
+  );
+}
+
+function EngineInfoSection(props: { team_slug: string }) {
+  const engineLinkPrefix = `/team/${props.team_slug}/~/engine`;
+
+  return (
+    <div className="">
+      <h3 className="mb-1 font-semibold text-lg tracking-tight">
+        What is Engine?
+      </h3>
+
+      <ul className="list-disc space-y-2 pl-3 text-muted-foreground text-sm">
+        <li>Read, write, and deploy contracts at production scale</li>
+        <li>
+          Reliably parallelize and retry transactions with gas & nonce
+          management
+        </li>
+        <li>Securely manage backend wallets</li>
+        <li>Built-in support for account abstraction, relayers, and more</li>
+      </ul>
+
+      <div className="mt-4 flex justify-start gap-3">
+        <Button asChild variant="outline" size="sm">
+          <Link
+            href="https://portal.thirdweb.com/engine"
+            className="gap-2"
+            target="_blank"
+          >
+            Learn More
+            <ExternalLinkIcon className="size-3 text-muted-foreground" />
+          </Link>
+        </Button>
+
+        <Button size="sm" asChild variant="outline">
+          <TrackedLinkTW
+            href={`${engineLinkPrefix}/sandbox`}
+            className="gap-2"
+            category="engine"
+            label="click-try-demo"
+            trackingProps={{
+              action: "try-demo",
+            }}
+          >
+            Try Demo Engine
+            <ArrowRightIcon className="size-3 text-muted-foreground" />
+          </TrackedLinkTW>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function CloudHostedEngineSection(props: {
+  teamPlan: Exclude<Team["billingPlan"], "accelerate" | "scale">;
+  teamSlug: string;
+}) {
+  return (
+    <div className="flex flex-col">
+      <h3 className="mb-0.5 font-semibold text-lg tracking-tight">
+        Get Managed Engine
+      </h3>
+
+      {props.teamPlan !== "pro" ? (
+        <div>
+          <p className="text-muted-foreground text-sm">
+            Upgrade your plan to{" "}
+            <UnderlineLink href="/pricing" target="_blank">
+              Accelerate
+            </UnderlineLink>{" "}
+            or{" "}
+            <UnderlineLink href="/pricing" target="_blank">
+              Scale
+            </UnderlineLink>{" "}
+            to get a managed Engine instance
+          </p>
+
+          <div className="h-5" />
+          <div className="flex justify-start gap-3">
+            <Button
+              variant="outline"
+              size="sm"
+              asChild
+              className="gap-2 bg-card"
+            >
+              <Link href={`/team/${props.teamSlug}/~/settings/billing`}>
+                Upgrade Plan
+                <ArrowRightIcon className="size-3 text-muted-foreground" />
+              </Link>
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              asChild
+              className="gap-2 bg-card"
+            >
+              <Link href="/pricing" target="_blank">
+                View Pricing
+                <ExternalLinkIcon className="size-3 text-muted-foreground" />
+              </Link>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div>
+          <p className="mb-4 text-muted-foreground text-sm">
+            Contact us to get a managed engine for your team
+          </p>
+          <Button variant="outline" size="sm" asChild className="gap-2">
+            <Link href={PRO_CONTACT_US_URL} target="_blank">
+              Contact Us
+              <ExternalLinkIcon className="size-3 text-muted-foreground" />
+            </Link>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function EngineFooterCard(props: {
+  teamPlan: Team["billingPlan"];
+  team_slug: string;
+}) {
+  return (
+    <div className="relative rounded-lg border p-6">
+      {props.teamPlan === "accelerate" || props.teamPlan === "scale" ? null : (
+        <>
+          <CloudHostedEngineSection
+            teamPlan={props.teamPlan}
+            teamSlug={props.team_slug}
+          />
+          <Separator className="my-5" />
+        </>
+      )}
+
+      <EngineInfoSection team_slug={props.team_slug} />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.stories.tsx
new file mode 100644
index 00000000000..4e3307be5c4
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EngineImportCardUI } from "./EngineImportPage";
+
+const meta: Meta<typeof EngineImportCardUI> = {
+  title: "Engine/general/import",
+  component: EngineImportCardUI,
+  decorators: [
+    (Story) => (
+      <div className="py-10">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EngineImportCardUI>;
+
+export const Default: Story = {
+  args: {
+    prefillImportUrl: undefined,
+    importEngine: async (params) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      console.log("importEngine", params);
+    },
+  },
+};
+
+export const WithPrefillUrl: Story = {
+  args: {
+    prefillImportUrl: "https://engine.example.com",
+    importEngine: async (params) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      console.log("importEngine", params);
+    },
+  },
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.tsx
new file mode 100644
index 00000000000..ea9f330bc2b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { apiServerProxy } from "@/actions/proxies";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { FormControl } from "@chakra-ui/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { CircleAlertIcon, DownloadIcon, ExternalLinkIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const formSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  url: z.string().url("Please enter a valid URL").min(1, "URL is required"),
+});
+
+type ImportEngineParams = z.infer<typeof formSchema>;
+
+async function importEngine({
+  teamIdOrSlug,
+  ...data
+}: ImportEngineParams & { teamIdOrSlug: string }) {
+  // Instance URLs should end with a /.
+  const url = data.url.endsWith("/") ? data.url : `${data.url}/`;
+
+  const res = await apiServerProxy({
+    pathname: `/v1/teams/${teamIdOrSlug}/engine`,
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      name: data.name,
+      url,
+    }),
+  });
+
+  if (!res.ok) {
+    throw new Error(res.error);
+  }
+}
+
+export function EngineImportCard(props: {
+  prefillImportUrl: string | undefined;
+  teamSlug: string;
+}) {
+  const router = useDashboardRouter();
+
+  return (
+    <EngineImportCardUI
+      prefillImportUrl={props.prefillImportUrl}
+      importEngine={async (params) => {
+        await importEngine({ ...params, teamIdOrSlug: props.teamSlug });
+        router.push(`/team/${props.teamSlug}/~/engine`);
+      }}
+    />
+  );
+}
+
+export function EngineImportCardUI(props: {
+  prefillImportUrl: string | undefined;
+  importEngine: (params: ImportEngineParams) => Promise<void>;
+}) {
+  const form = useForm<ImportEngineParams>({
+    resolver: zodResolver(formSchema),
+    values: {
+      name: "",
+      url: props.prefillImportUrl || "",
+    },
+  });
+
+  const importMutation = useMutation({
+    mutationFn: props.importEngine,
+  });
+
+  const onSubmit = async (data: ImportEngineParams) => {
+    try {
+      await importMutation.mutateAsync(data);
+      toast.success("Engine imported successfully");
+    } catch (e) {
+      const message = e instanceof Error ? e.message : undefined;
+      toast.error(
+        "Error importing Engine. Please check if the details are correct.",
+        {
+          description: message,
+        },
+      );
+    }
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-lg rounded-lg border border-border bg-card">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          {/* Card */}
+          <div className="p-6">
+            <div>
+              <h1 className="mb-1 font-semibold text-xl tracking-tight">
+                Import Engine Instance
+              </h1>
+
+              <p className="text-muted-foreground text-sm">
+                Import an Engine instance hosted on your infrastructure
+              </p>
+
+              <div className="h-4" />
+
+              <TrackedLinkTW
+                className="flex items-center justify-between gap-2 rounded-lg border border-border bg-card p-3 text-sm hover:bg-accent"
+                href="https://portal.thirdweb.com/infrastructure/engine/get-started"
+                target="_blank"
+                category="engine"
+                label="clicked-self-host-instructions"
+              >
+                Get help setting up Engine for free
+                <ExternalLinkIcon className="size-4 text-muted-foreground" />
+              </TrackedLinkTW>
+            </div>
+
+            <div className="mt-6 flex flex-col gap-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter a descriptive label"
+                        autoFocus
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="url"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>URL</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="url"
+                        placeholder="Enter your Engine URL"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                    <div className="mt-3 flex items-center gap-2">
+                      <CircleAlertIcon className="size-3 shrink-0 text-muted-foreground" />
+                      <p className="text-muted-foreground text-sm">
+                        Do not import a URL you do not recognize.
+                      </p>
+                    </div>
+                  </FormItem>
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="h-8" />
+
+          <div className="flex justify-end border-border border-t p-6">
+            <Button type="submit" className="min-w-28 gap-2">
+              {importMutation.isPending ? (
+                <Spinner className="size-4" />
+              ) : (
+                <DownloadIcon className="size-4" />
+              )}
+              Import
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/page.tsx
new file mode 100644
index 00000000000..89d16708101
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/page.tsx
@@ -0,0 +1,27 @@
+import { EngineImportCard } from "./EngineImportPage";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string }>;
+  searchParams: Promise<{
+    importUrl?: string | string[];
+  }>;
+}) {
+  const [params, searchParams] = await Promise.all([
+    props.params,
+    props.searchParams,
+  ]);
+
+  const importUrl =
+    typeof searchParams.importUrl === "string"
+      ? searchParams.importUrl
+      : undefined;
+
+  return (
+    <div className="flex grow flex-col justify-center pt-8 pb-20">
+      <EngineImportCard
+        prefillImportUrl={importUrl ? decodeURIComponent(importUrl) : undefined}
+        teamSlug={params.team_slug}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/layout.tsx
new file mode 100644
index 00000000000..c3105737adc
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/layout.tsx
@@ -0,0 +1,113 @@
+import type { SidebarLink } from "@/components/blocks/Sidebar";
+import { SidebarLayout } from "@/components/blocks/SidebarLayout";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { DatabaseIcon } from "lucide-react";
+import Link from "next/link";
+import { EngineIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
+import { ImportEngineLink } from "./_components";
+
+export default async function Layout(props: {
+  params: Promise<{
+    team_slug: string;
+    project_slug: string;
+  }>;
+  children: React.ReactNode;
+}) {
+  const params = await props.params;
+  const linkPrefix = `/team/${params.team_slug}/${params.project_slug}/engine/legacy`;
+  const sidebarLinks: SidebarLink[] = [
+    {
+      label: "Engine Instances",
+      href: `${linkPrefix}`,
+      exactMatch: true,
+    },
+    {
+      label: "Import Engine",
+      href: `${linkPrefix}/import`,
+    },
+  ];
+
+  return (
+    <div className="container flex max-w-7xl grow flex-col">
+      {/* header */}
+      <header className="border-border border-b py-10">
+        <div className="container flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
+          <div className="flex flex-col gap-2">
+            <h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
+              Engine{" "}
+              <Badge
+                variant="warning"
+                className="flex items-center gap-2 text-sm"
+              >
+                <DatabaseIcon className="size-4" /> Dedicated
+              </Badge>
+            </h1>
+            <p className="flex flex-col text-muted-foreground text-sm">
+              Manage your deployed Engine instances.
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <ImportEngineLink
+              label="Import Engine"
+              engineLinkPrefix={linkPrefix}
+            />
+          </div>
+        </div>
+        <div className="h-6" />
+        <div className="container">
+          <EngineLegacyBannerUI
+            teamSlug={params.team_slug}
+            projectSlug={params.project_slug}
+          />
+        </div>
+      </header>
+
+      {/* sidebar layout */}
+      <SidebarLayout sidebarLinks={sidebarLinks}>
+        {props.children}
+      </SidebarLayout>
+    </div>
+  );
+}
+
+function EngineLegacyBannerUI(props: {
+  teamSlug: string;
+  projectSlug: string;
+}) {
+  return (
+    <Alert variant="info">
+      <EngineIcon className="size-5" />
+      <AlertTitle>Engine Cloud (Beta)</AlertTitle>
+      <AlertDescription>
+        <div className="h-2" />
+        <p className="text-primary-foreground text-sm">
+          Try Engine Cloud (Beta) - now included for free in every thirdweb
+          project.
+        </p>
+        <div className="h-2" />
+        <ul className="list-disc pl-4 text-muted-foreground text-sm">
+          <li>No recurring monthly cost, pay-per-request model</li>
+          <li>Powered by Vault: our new TEE based key management system</li>
+          <li>Improved performance and simplified transaction API</li>
+        </ul>
+        <div className="h-4" />
+        <div className="flex justify-end gap-2">
+          {/* TODO (cloud): add link to Engine Cloud blog post */}
+          <Link
+            href={"https://portal.thirdweb.com/engine/cloud"}
+            target="_blank"
+          >
+            <Button variant="outline">Learn More</Button>
+          </Link>
+          <Link href={`/team/${props.teamSlug}/${props.projectSlug}/engine`}>
+            <Button variant={"primary"} className="flex items-center gap-2">
+              <EngineIcon className="size-4" /> Try Engine Cloud
+            </Button>
+          </Link>
+        </div>
+      </AlertDescription>
+    </Alert>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.stories.tsx
new file mode 100644
index 00000000000..b5f703bcfa5
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.stories.tsx
@@ -0,0 +1,166 @@
+import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
+import type { Meta, StoryObj } from "@storybook/react";
+import { EngineInstancesTableUI } from "./engine-instances-table";
+
+const meta: Meta<typeof Story> = {
+  title: "Engine/general/instances",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (StoryInstance) => (
+      <div className="container max-w-[1154px] py-10">
+        <StoryInstance />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Story>;
+
+function createEngineInstanceStub(
+  name: string,
+  status: EngineInstance["status"],
+  isCloudHosted: boolean,
+  isPlanEngine: boolean,
+): EngineInstance {
+  const engineId = `${name.toLowerCase().replace(/\s+/g, "-")}-engine`;
+  return {
+    id: engineId,
+    name,
+    url: `https://${engineId}.example.com`,
+    status,
+    deploymentId: status === "active" ? "dep-123" : undefined,
+    accountId: "acc-123",
+    lastAccessedAt: new Date().toISOString(),
+    isCloudHosted,
+    isPlanEngine,
+  };
+}
+
+const cloudHostedEngineInstance = createEngineInstanceStub(
+  "Cloud Hosted Engine",
+  "active",
+  true,
+  false,
+);
+
+const cloudHostedPlanActiveEngineInstance = createEngineInstanceStub(
+  "Cloud Hosted Plan Engine",
+  "active",
+  true,
+  true,
+);
+const selfHostedActiveEngineInstance = createEngineInstanceStub(
+  "Self Hosted Engine",
+  "active",
+  false,
+  false,
+);
+const pendingEngineInstance = createEngineInstanceStub(
+  "Pending Engine",
+  "requested",
+  false,
+  false,
+);
+const deployingEngineInstance = createEngineInstanceStub(
+  "Deploying Engine",
+  "deploying",
+  false,
+  false,
+);
+
+const paymentFailedEngineInstance = createEngineInstanceStub(
+  "Payment Failed Engine",
+  "paymentFailed",
+  false,
+  false,
+);
+
+const deploymentFailedEngineInstance = createEngineInstanceStub(
+  "Deployment Failed Engine",
+  "deploymentFailed",
+  false,
+  false,
+);
+
+export const MultipleInstances: Story = {
+  args: {
+    instances: [
+      // active
+      cloudHostedEngineInstance,
+      cloudHostedPlanActiveEngineInstance,
+      selfHostedActiveEngineInstance,
+      // others
+      pendingEngineInstance,
+      deployingEngineInstance,
+      paymentFailedEngineInstance,
+      deploymentFailedEngineInstance,
+    ],
+    engineLinkPrefix: "/team/test/engine",
+  },
+};
+
+export const NoInstancesProPlan: Story = {
+  args: {
+    instances: [],
+    engineLinkPrefix: "/team/test/engine",
+    teamPlan: "pro",
+  },
+};
+
+export const NoInstancesGrowthPlan: Story = {
+  args: {
+    instances: [],
+    engineLinkPrefix: "/team/test/engine",
+    teamPlan: "growth",
+  },
+};
+
+// this one can't technically happen because Accelerate plan always has one cloud hosted engine by default - but testing it anyway
+// the section that prompts user to either choose a cloud-hosted engine or import an engine is hidden in this case
+export const NoInstancesAcceleratePlan: Story = {
+  args: {
+    instances: [],
+    engineLinkPrefix: "/team/test/engine",
+    teamPlan: "accelerate",
+  },
+};
+
+export const OneInstance: Story = {
+  args: {
+    instances: [cloudHostedEngineInstance],
+    engineLinkPrefix: "/team/test/engine",
+  },
+};
+
+function Story(
+  props: Omit<
+    React.ComponentProps<typeof EngineInstancesTableUI>,
+    | "deleteCloudHostedEngine"
+    | "editEngineInstance"
+    | "removeEngineFromDashboard"
+  >,
+) {
+  return (
+    <EngineInstancesTableUI
+      deleteCloudHostedEngine={async (params) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        console.log("deleteCloudHostedEngine", params);
+      }}
+      editEngineInstance={async (params) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        console.log("editEngineInstance", params);
+      }}
+      removeEngineFromDashboard={async (params) => {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        console.log("removeEngineFromDashboard", params);
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.tsx
new file mode 100644
index 00000000000..92ee878b9ce
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.tsx
@@ -0,0 +1,938 @@
+"use client";
+
+import type { Team } from "@/api/team";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge, type BadgeProps } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Textarea } from "@/components/ui/textarea";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
+import {
+  type DeleteCloudHostedEngineParams,
+  type EditEngineInstanceParams,
+  type EngineInstance,
+  type RemoveEngineFromDashboardIParams,
+  deleteCloudHostedEngine,
+  editEngineInstance,
+  removeEngineFromDashboard,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import { PRO_CONTACT_US_URL } from "constants/pro";
+import { useTrack } from "hooks/analytics/useTrack";
+import {
+  CheckIcon,
+  CircleAlertIcon,
+  InfoIcon,
+  PencilIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { MoreHorizontalIcon } from "lucide-react";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { EngineIcon } from "../../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
+
+type DeletedCloudHostedEngine = (
+  params: DeleteCloudHostedEngineParams,
+) => Promise<void>;
+
+type EditedEngineInstance = (params: EditEngineInstanceParams) => Promise<void>;
+
+type RemovedEngineFromDashboard = (
+  params: RemoveEngineFromDashboardIParams,
+) => Promise<void>;
+
+export function EngineInstancesTable(props: {
+  teamSlug: string;
+  instances: EngineInstance[];
+  engineLinkPrefix: string;
+  teamPlan: Team["billingPlan"];
+}) {
+  const router = useDashboardRouter();
+
+  return (
+    <EngineInstancesTableUI
+      teamPlan={props.teamPlan}
+      instances={props.instances}
+      engineLinkPrefix={props.engineLinkPrefix}
+      teamSlug={props.teamSlug}
+      deleteCloudHostedEngine={async (params) => {
+        await deleteCloudHostedEngine(params);
+        router.refresh();
+      }}
+      editEngineInstance={async (params) => {
+        await editEngineInstance(params);
+        router.refresh();
+      }}
+      removeEngineFromDashboard={async (params) => {
+        await removeEngineFromDashboard(params);
+        router.refresh();
+      }}
+    />
+  );
+}
+
+export function EngineInstancesTableUI(props: {
+  instances: EngineInstance[];
+  engineLinkPrefix: string;
+  deleteCloudHostedEngine: DeletedCloudHostedEngine;
+  editEngineInstance: EditedEngineInstance;
+  removeEngineFromDashboard: RemovedEngineFromDashboard;
+  teamPlan: Team["billingPlan"];
+  teamSlug: string;
+}) {
+  return (
+    <div className="flex grow flex-col">
+      <h2 className="mb-4 font-semibold text-2xl tracking-tight">
+        Engine Instances
+      </h2>
+
+      {props.instances.length === 0 ? (
+        <EmptyEngineState teamPlan={props.teamPlan} teamSlug={props.teamSlug} />
+      ) : (
+        <TableContainer>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-full">Engine Instance</TableHead>
+                <TableHead className="w-[100px]">Version</TableHead>
+                <TableHead className="w-[100px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {props.instances.map((instance) => (
+                <EngineInstanceRow
+                  key={instance.id}
+                  teamIdOrSlug={props.teamSlug}
+                  instance={instance}
+                  engineLinkPrefix={props.engineLinkPrefix}
+                  deleteCloudHostedEngine={props.deleteCloudHostedEngine}
+                  editEngineInstance={props.editEngineInstance}
+                  removeEngineFromDashboard={props.removeEngineFromDashboard}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </div>
+  );
+}
+
+function EngineInstanceRow(props: {
+  teamIdOrSlug: string;
+  instance: EngineInstance;
+  engineLinkPrefix: string;
+  deleteCloudHostedEngine: DeletedCloudHostedEngine;
+  editEngineInstance: EditedEngineInstance;
+  removeEngineFromDashboard: RemovedEngineFromDashboard;
+}) {
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
+  const { instance, engineLinkPrefix } = props;
+
+  return (
+    <>
+      <TableRow
+        className={instance.status === "active" ? "hover:bg-accent/50" : ""}
+        linkBox
+      >
+        <TableCell>
+          <div className="flex items-center justify-between">
+            <div className="flex-grow space-y-0.5">
+              <InstanceNameLink
+                instance={instance}
+                engineLinkPrefix={engineLinkPrefix}
+              />
+              <EngineURL url={instance.url} />
+            </div>
+            {instance.status !== "active" && (
+              <div>
+                <EngineStatusBadge status={instance.status} />
+              </div>
+            )}
+          </div>
+        </TableCell>
+        <TableCell>
+          <Badge variant="warning">v2</Badge>
+        </TableCell>
+        <TableCell className="relative z-10 w-[50px]">
+          <EngineActionsDropdown
+            instance={instance}
+            onEdit={() => setIsEditModalOpen(true)}
+            onRemove={() => setIsRemoveModalOpen(true)}
+          />
+        </TableCell>
+      </TableRow>
+
+      <EditModal
+        teamIdOrSlug={props.teamIdOrSlug}
+        instance={instance}
+        open={isEditModalOpen}
+        onOpenChange={setIsEditModalOpen}
+        editEngineInstance={props.editEngineInstance}
+      />
+
+      <RemoveModal
+        teamIdOrSlug={props.teamIdOrSlug}
+        instance={instance}
+        onOpenChange={setIsRemoveModalOpen}
+        open={isRemoveModalOpen}
+        deleteCloudHostedEngine={props.deleteCloudHostedEngine}
+        removeEngineFromDashboard={props.removeEngineFromDashboard}
+      />
+    </>
+  );
+}
+
+function InstanceNameLink(props: {
+  instance: EngineInstance;
+  engineLinkPrefix: string;
+}) {
+  const name = (
+    <span className="font-medium text-base tracking-tight">
+      {props.instance.name}
+    </span>
+  );
+  return (
+    <div className="flex flex-col gap-0.5">
+      {props.instance.status === "requested" ||
+      props.instance.status === "deploying" ||
+      props.instance.status === "deploymentFailed" ||
+      props.instance.status === "paymentFailed" ? (
+        <span>{name}</span>
+      ) : (
+        <Link
+          href={`${props.engineLinkPrefix}/${props.instance.id}`}
+          className="flex items-center text-foreground before:absolute before:inset-0 before:bg-transparent"
+        >
+          {name}
+        </Link>
+      )}
+    </div>
+  );
+}
+
+function EngineURL(props: { url: string }) {
+  const cleanedURL = props.url.endsWith("/")
+    ? props.url.slice(0, -1)
+    : props.url;
+
+  return <p className="text-muted-foreground text-xs">{cleanedURL}</p>;
+}
+
+const engineStatusMeta: Record<
+  EngineInstance["status"],
+  {
+    label: string;
+    variant: BadgeProps["variant"];
+    icon: React.FC<{ className?: string }>;
+  }
+> = {
+  requested: {
+    label: "Pending",
+    variant: "outline",
+    icon: Spinner,
+  },
+  deploying: {
+    label: "Deploying",
+    variant: "default",
+    icon: Spinner,
+  },
+  active: {
+    label: "Active",
+    variant: "default",
+    icon: CheckIcon,
+  },
+  pending: {
+    label: "Pending",
+    variant: "outline",
+    icon: Spinner,
+  },
+  paymentFailed: {
+    label: "Payment Failed",
+    variant: "destructive",
+    icon: CircleAlertIcon,
+  },
+  deploymentFailed: {
+    label: "Deployment Failed",
+    variant: "destructive",
+    icon: CircleAlertIcon,
+  },
+};
+
+function EngineStatusBadge(props: {
+  status: EngineInstance["status"];
+}) {
+  const statusMeta = engineStatusMeta[props.status];
+  return (
+    <Badge variant={statusMeta.variant} className="gap-2 px-3 py-2">
+      <statusMeta.icon className="size-3" />
+      {statusMeta.label}
+    </Badge>
+  );
+}
+
+function EngineActionsDropdown(props: {
+  instance: EngineInstance;
+  onEdit: (instance: EngineInstance) => void;
+  onRemove: (instance: EngineInstance) => void;
+}) {
+  const trackEvent = useTrack();
+  const canDelete =
+    props.instance.status === "paymentFailed" ||
+    props.instance.status === "deploymentFailed" ||
+    props.instance.status === "active" ||
+    !!props.instance.deploymentId;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="size-10 p-1">
+          <MoreHorizontalIcon className="size-5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-40">
+        <DropdownMenuItem
+          className="gap-2"
+          onClick={() => {
+            trackEvent({
+              category: "engine",
+              action: "edit",
+              label: "open-modal",
+            });
+            props.onEdit(props.instance);
+          }}
+        >
+          <PencilIcon className="size-4" />
+          Edit
+        </DropdownMenuItem>
+
+        {/* plan engine is not removable */}
+        {!props.instance.isPlanEngine && (
+          <DropdownMenuItem
+            className="gap-2 text-destructive"
+            disabled={!canDelete}
+            onClick={() => {
+              trackEvent({
+                category: "engine",
+                action: "remove",
+                label: "open-modal",
+              });
+              props.onRemove(props.instance);
+            }}
+          >
+            <Trash2Icon className="size-4" />
+            Delete
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function EditModal(props: {
+  open: boolean;
+  teamIdOrSlug: string;
+  onOpenChange: (open: boolean) => void;
+  instance: EngineInstance;
+  editEngineInstance: EditedEngineInstance;
+}) {
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent className="overflow-hidden p-0">
+        <EditModalContent
+          teamIdOrSlug={props.teamIdOrSlug}
+          instance={props.instance}
+          editEngineInstance={props.editEngineInstance}
+          closeModal={() => props.onOpenChange(false)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const editEngineFormSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  url: z.string().url("Invalid URL"),
+});
+
+function EditModalContent(props: {
+  teamIdOrSlug: string;
+  instance: EngineInstance;
+  editEngineInstance: EditedEngineInstance;
+  closeModal: () => void;
+}) {
+  const editInstance = useMutation({
+    mutationFn: props.editEngineInstance,
+  });
+  const { instance } = props;
+
+  const form = useForm<z.infer<typeof editEngineFormSchema>>({
+    resolver: zodResolver(editEngineFormSchema),
+    values: {
+      name: instance.name,
+      url: instance.url,
+    },
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit((data) =>
+          editInstance.mutate(
+            {
+              teamIdOrSlug: props.teamIdOrSlug,
+              instanceId: props.instance.id,
+              name: data.name,
+              url: data.url,
+            },
+            {
+              onSuccess: () => {
+                toast.success("Engine updated successfully");
+                props.closeModal();
+              },
+              onError: () => {
+                toast.error("Failed to update Engine");
+              },
+            },
+          ),
+        )}
+      >
+        <div className="flex flex-col gap-4 p-6">
+          <DialogHeader>
+            <DialogTitle>Edit Engine Instance</DialogTitle>
+          </DialogHeader>
+
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input
+                    {...field}
+                    type="text"
+                    placeholder="Enter a descriptive label"
+                    className="bg-card"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* cloud hosted engine url is not editable */}
+          {!props.instance.isCloudHosted && (
+            <FormField
+              control={form.control}
+              name="url"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>URL</FormLabel>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      type="url"
+                      placeholder="Enter your Engine URL"
+                      className="bg-card"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+        </div>
+
+        <div className="mt-4 flex justify-end gap-3 border-t bg-card p-6">
+          <Button onClick={() => props.closeModal()} variant="outline">
+            Close
+          </Button>
+          <Button
+            type="submit"
+            className="gap-2"
+            disabled={!form.formState.isDirty}
+          >
+            {editInstance.isPending && <Spinner className="size-4" />}
+            Update
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
+
+function RemoveModal(props: {
+  teamIdOrSlug: string;
+  instance: EngineInstance;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  deleteCloudHostedEngine: DeletedCloudHostedEngine;
+  removeEngineFromDashboard: RemovedEngineFromDashboard;
+}) {
+  const { instance, open, onOpenChange } = props;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="overflow-hidden p-0">
+        {instance.status === "paymentFailed" ||
+        instance.status === "deploymentFailed" ||
+        (instance.status === "active" && !instance.deploymentId) ? (
+          <RemoveEngineFromDashboardModalContent
+            instance={instance}
+            teamIdOrSlug={props.teamIdOrSlug}
+            close={() => onOpenChange(false)}
+            removeEngineFromDashboard={props.removeEngineFromDashboard}
+          />
+        ) : instance.deploymentId ? (
+          <DeleteEngineSubscriptionModalContent
+            instance={instance}
+            close={() => onOpenChange(false)}
+            deleteCloudHostedEngine={props.deleteCloudHostedEngine}
+          />
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function RemoveEngineFromDashboardModalContent(props: {
+  teamIdOrSlug: string;
+  instance: EngineInstance;
+  close: () => void;
+  removeEngineFromDashboard: RemovedEngineFromDashboard;
+}) {
+  const { instance, close } = props;
+  const removeFromDashboard = useMutation({
+    mutationFn: props.removeEngineFromDashboard,
+  });
+
+  return (
+    <div>
+      <div className="p-6">
+        <DialogHeader>
+          <DialogTitle>Remove Engine from Dashboard</DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            <span className="mb-2 block">
+              Are you sure you want to remove{" "}
+              <em className="font-semibold not-italic">{instance.name}</em> from
+              your dashboard?
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="h-2" />
+
+        <Alert variant="info">
+          <InfoIcon className="size-5" />
+          <AlertTitle className="text-sm">
+            This action does not modify your Engine infrastructure
+          </AlertTitle>
+          <AlertDescription className="mt-0.5 text-sm">
+            You can import engine to dashboard again later
+          </AlertDescription>
+        </Alert>
+      </div>
+
+      <div className="flex justify-end gap-3 border-t bg-card p-6">
+        <Button onClick={close} variant="outline">
+          Close
+        </Button>
+        <Button
+          onClick={() => {
+            removeFromDashboard.mutate(
+              {
+                instanceId: instance.id,
+                teamIdOrSlug: props.teamIdOrSlug,
+              },
+              {
+                onSuccess: () => {
+                  toast.success(
+                    "Removed an Engine instance from your dashboard",
+                  );
+                  close();
+                },
+                onError: () => {
+                  toast.error(
+                    "Error removing an Engine instance from your dashboard",
+                  );
+                },
+              },
+            );
+          }}
+          variant="destructive"
+          className="gap-2"
+        >
+          {removeFromDashboard.isPending ? (
+            <Spinner className="size-4" />
+          ) : (
+            <Trash2Icon className="size-4" />
+          )}
+          Remove
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+const deleteEngineReasons: Array<{
+  value: DeleteCloudHostedEngineParams["reason"];
+  label: string;
+}> = [
+  { value: "USING_SELF_HOSTED", label: "Migrating to self-hosted" },
+  { value: "TOO_EXPENSIVE", label: "Too expensive" },
+  { value: "MISSING_FEATURES", label: "Missing features" },
+  { value: "OTHER", label: "Other" },
+];
+
+const deleteEngineFormSchema = z.object({
+  reason: z.enum([
+    "USING_SELF_HOSTED",
+    "TOO_EXPENSIVE",
+    "MISSING_FEATURES",
+    "OTHER",
+  ]),
+  feedback: z.string(),
+  confirmDeletion: z.boolean(),
+});
+
+function DeleteEngineSubscriptionModalContent(props: {
+  instance: EngineInstance;
+  close: () => void;
+  deleteCloudHostedEngine: DeletedCloudHostedEngine;
+}) {
+  const { instance, close } = props;
+  const deleteCloudHostedEngine = useMutation({
+    mutationFn: props.deleteCloudHostedEngine,
+  });
+
+  const form = useForm<z.infer<typeof deleteEngineFormSchema>>({
+    resolver: zodResolver(deleteEngineFormSchema),
+    defaultValues: {
+      feedback: "",
+      confirmDeletion: false,
+    },
+    reValidateMode: "onChange",
+  });
+
+  const onSubmit = (data: z.infer<typeof deleteEngineFormSchema>) => {
+    // unexpected state
+    if (!instance.deploymentId) {
+      toast.error("Can not delete this Engine instance", {
+        description: "Engine instance is missing deployment id",
+      });
+      return;
+    }
+
+    deleteCloudHostedEngine.mutate(
+      {
+        deploymentId: instance.deploymentId,
+        reason: data.reason,
+        feedback: data.feedback,
+      },
+      {
+        onSuccess: () => {
+          toast.success(
+            "Deleting Engine. Please check again in a few minutes.",
+            {
+              dismissible: true,
+              duration: 10000,
+            },
+          );
+
+          close();
+        },
+        onError: () => {
+          toast.error(
+            "Error deleting Engine. Please visit https://thirdweb.com/support.",
+          );
+        },
+      },
+    );
+  };
+
+  return (
+    <div>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="p-6">
+            <DialogHeader className="mb-2">
+              <DialogTitle>Permanently Delete Engine</DialogTitle>
+            </DialogHeader>
+
+            <p className="mb-3 text-muted-foreground text-sm">
+              This step will cancel your monthly subscription and immediately
+              delete all data and infrastructure for this Engine.
+            </p>
+
+            {/* Reason */}
+            <FormField
+              control={form.control}
+              name="reason"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    Please share your feedback to help us improve Engine.
+                  </FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      defaultValue={field.value}
+                      className="flex flex-col gap-1"
+                    >
+                      {deleteEngineReasons.map((reason) => (
+                        <FormItem
+                          key={reason.value}
+                          className="flex items-center space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <RadioGroupItem value={reason.value} />
+                          </FormControl>
+                          <FormLabel className="!text-foreground font-normal text-sm">
+                            {reason.label}
+                          </FormLabel>
+                        </FormItem>
+                      ))}
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="h-4" />
+
+            {/* Feedback */}
+            <FormField
+              control={form.control}
+              name="feedback"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Textarea
+                      className="bg-card"
+                      placeholder="Provide additional feedback"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="h-4" />
+
+            <Alert variant="destructive">
+              <AlertTitle>This action is irreversible!</AlertTitle>
+
+              <AlertDescription className="!pl-0">
+                <CheckboxWithLabel>
+                  <Checkbox
+                    checked={form.watch("confirmDeletion")}
+                    onCheckedChange={(checked) =>
+                      form.setValue("confirmDeletion", !!checked)
+                    }
+                  />
+                  I understand that access to my local backend wallets and any
+                  remaining funds will be lost.
+                </CheckboxWithLabel>
+              </AlertDescription>
+            </Alert>
+          </div>
+
+          <div className="flex justify-end gap-3 border-t bg-card p-6">
+            <Button onClick={close} variant="outline">
+              Close
+            </Button>
+            <Button
+              type="submit"
+              variant="destructive"
+              disabled={
+                !form.watch("confirmDeletion") ||
+                deleteCloudHostedEngine.isPending
+              }
+              className="gap-2"
+            >
+              {deleteCloudHostedEngine.isPending && (
+                <Spinner className="size-4" />
+              )}
+              Permanently Delete Engine
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+function EmptyEngineState(props: {
+  teamPlan: Team["billingPlan"];
+  teamSlug: string;
+}) {
+  const [selectedTab, setSelectedTab] = useState<
+    "self-hosted" | "cloud-hosted"
+  >("cloud-hosted");
+
+  return (
+    <div className="flex flex-col items-center justify-center rounded-lg border bg-card px-4 py-12 lg:px-6">
+      <div className="mb-4 rounded-full border bg-card p-2">
+        <EngineIcon className="size-6 text-muted-foreground" />
+      </div>
+
+      <h2 className="mb-1 font-semibold text-xl">No Engine instances found</h2>
+      <p className="mb-6 max-w-lg text-center text-muted-foreground text-sm">
+        Get started with one of the options below to add your first engine
+        instance.
+      </p>
+
+      {props.teamPlan !== "accelerate" && props.teamPlan !== "scale" && (
+        <>
+          <div className="w-full max-w-md">
+            <div className="mx-auto max-w-sm">
+              <div className="grid grid-cols-2 gap-1 rounded-lg border p-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={cn(selectedTab === "cloud-hosted" && "bg-accent")}
+                  onClick={() => setSelectedTab("cloud-hosted")}
+                >
+                  Managed
+                </Button>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={cn(selectedTab === "self-hosted" && "bg-accent")}
+                  onClick={() => setSelectedTab("self-hosted")}
+                >
+                  Self-hosted
+                </Button>
+              </div>
+            </div>
+
+            <div className="h-5" />
+
+            {selectedTab === "self-hosted" && (
+              <div className="flex flex-col text-center">
+                <h3 className="mb-0.5 font-semibold text-base">
+                  Self-Hosted Engine
+                </h3>
+                <p className="text-muted-foreground text-sm">
+                  Add engine instance running on your own infrastructure.
+                </p>
+                <div className="h-4" />
+                <div className="mt-auto">
+                  <Button
+                    className="w-full gap-2"
+                    variant="default"
+                    size="sm"
+                    asChild
+                  >
+                    <Link href={`/team/${props.teamSlug}/~/engine/import`}>
+                      Import self-hosted Engine
+                      <ArrowRight size={16} />
+                    </Link>
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {selectedTab === "cloud-hosted" && (
+              <div className="flex flex-col text-center">
+                <h3 className="mb-0.5 font-semibold text-base">
+                  Managed Engine
+                </h3>
+                <p className="text-muted-foreground text-sm">
+                  {props.teamPlan !== "pro" ? (
+                    <>
+                      Upgrade your team plan to Accelerate or Scale to get a
+                      fully managed engine instance.{" "}
+                      <UnderlineLink href="/pricing" target="_blank">
+                        View pricing
+                      </UnderlineLink>
+                    </>
+                  ) : (
+                    <>
+                      Contact us to add a managed engine instance to your team
+                    </>
+                  )}
+                </p>
+                <div className="h-4" />
+                <div className="mt-auto">
+                  {props.teamPlan !== "pro" ? (
+                    <Button className="w-full gap-2" size="sm" asChild>
+                      <Link href={`/team/${props.teamSlug}/~/settings/billing`}>
+                        Upgrade Plan
+                        <ArrowRight size={16} />
+                      </Link>
+                    </Button>
+                  ) : (
+                    <Button className="w-full gap-2" size="sm" asChild>
+                      <Link href={PRO_CONTACT_US_URL} target="_blank">
+                        Contact Us
+                        <ArrowRight size={16} />
+                      </Link>
+                    </Button>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="mt-4 text-center text-muted-foreground text-sm">
+            Need help getting started? <br className="lg:hidden" />
+            <Link
+              href="https://portal.thirdweb.com/engine"
+              target="_blank"
+              className="text-foreground hover:underline"
+            >
+              View documentation
+            </Link>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-list.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-list.tsx
new file mode 100644
index 00000000000..0c0a394cffa
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-list.tsx
@@ -0,0 +1,26 @@
+import type { Team } from "@/api/team";
+import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
+import { EngineFooterCard } from "../_components";
+import { EngineInstancesTable } from "./engine-instances-table";
+
+export const EngineInstancesList = (props: {
+  team_slug: string;
+  instances: EngineInstance[];
+  teamPlan: Team["billingPlan"];
+}) => {
+  const engineLinkPrefix = `/team/${props.team_slug}/~/engine`;
+
+  return (
+    <div className="flex grow flex-col">
+      <EngineInstancesTable
+        teamSlug={props.team_slug}
+        instances={props.instances}
+        engineLinkPrefix={engineLinkPrefix}
+        teamPlan={props.teamPlan}
+      />
+
+      <div className="h-40" />
+      <EngineFooterCard teamPlan={props.teamPlan} team_slug={props.team_slug} />
+    </div>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/page.tsx
new file mode 100644
index 00000000000..ee1946e0cd5
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/page.tsx
@@ -0,0 +1,52 @@
+import { getTeamBySlug } from "@/api/team";
+import { redirect } from "next/navigation";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../../../login/loginRedirect";
+import { getEngineInstances } from "../_utils/getEngineInstances";
+import { EngineInstancesList } from "./overview/engine-list";
+
+export default async function Page(props: {
+  params: Promise<{
+    team_slug: string;
+  }>;
+  searchParams: Promise<{
+    importUrl?: string;
+  }>;
+}) {
+  const [params, searchParams] = await Promise.all([
+    props.params,
+    props.searchParams,
+  ]);
+
+  if (searchParams.importUrl) {
+    redirect(
+      `/team/${params.team_slug}/~/engine/import?importUrl=${searchParams.importUrl}`,
+    );
+  }
+
+  const [authToken, team] = await Promise.all([
+    getAuthToken(),
+    getTeamBySlug(params.team_slug),
+  ]);
+
+  if (!authToken) {
+    loginRedirect(`/team/${params.team_slug}/~/engine`);
+  }
+
+  if (!team) {
+    redirect("/team");
+  }
+
+  const res = await getEngineInstances({
+    authToken,
+    teamIdOrSlug: params.team_slug,
+  });
+
+  return (
+    <EngineInstancesList
+      team_slug={params.team_slug}
+      instances={res.data || []}
+      teamPlan={team.billingPlan}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EngineErrorPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EngineErrorPage.tsx
new file mode 100644
index 00000000000..6fccdb6982f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EngineErrorPage.tsx
@@ -0,0 +1,28 @@
+import { ArrowLeftIcon, CircleAlertIcon } from "lucide-react";
+import Link from "next/link";
+
+export function EngineErrorPage(props: {
+  children: React.ReactNode;
+  rootPath: string;
+}) {
+  return (
+    <div className="flex grow flex-col">
+      <Link
+        href={props.rootPath}
+        className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
+      >
+        <ArrowLeftIcon className="size-5" />
+        Back
+      </Link>
+
+      <div className="mt-5 flex min-h-[300px] grow flex-col items-center justify-center rounded-lg border border-border px-4 lg:min-h-[400px]">
+        <div className="flex flex-col items-center gap-4">
+          <CircleAlertIcon className="size-16 text-destructive-text" />
+          <div className="text-center text-muted-foreground">
+            {props.children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnginePageLayout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnginePageLayout.tsx
new file mode 100644
index 00000000000..b8c7de2ef93
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnginePageLayout.tsx
@@ -0,0 +1,72 @@
+import type { SidebarLink } from "@/components/blocks/Sidebar";
+import { SidebarLayout } from "@/components/blocks/SidebarLayout";
+
+const sidebarLinkMeta: Array<{ pathId: string; label: string }> = [
+  {
+    pathId: "",
+    label: "Overview",
+  },
+  {
+    pathId: "explorer",
+    label: "Explorer",
+  },
+  {
+    pathId: "relayers",
+    label: "Relayers",
+  },
+  {
+    pathId: "contract-subscriptions",
+    label: "Contract Subscriptions",
+  },
+  {
+    pathId: "admins",
+    label: "Admins",
+  },
+  {
+    pathId: "access-tokens",
+    label: "Access Tokens",
+  },
+  {
+    pathId: "webhooks",
+    label: "Webhooks",
+  },
+  {
+    pathId: "metrics",
+    label: "Metrics",
+  },
+  {
+    pathId: "alerts",
+    label: "Alerts",
+  },
+  {
+    pathId: "wallet-credentials",
+    label: "Wallet Credentials",
+  },
+  {
+    pathId: "configuration",
+    label: "Configuration",
+  },
+];
+
+export function EngineSidebarLayout(props: {
+  engineId: string;
+  teamSlug: string;
+  children: React.ReactNode;
+}) {
+  const rootPath = `/team/${props.teamSlug}/~/engine`;
+
+  const links: SidebarLink[] = sidebarLinkMeta.map((linkMeta) => {
+    return {
+      href: `${rootPath}/${props.engineId}${linkMeta.pathId === "" ? "" : `/${linkMeta.pathId}`}`,
+      label: linkMeta.label,
+      exactMatch: true,
+      tracking: {
+        category: "engine",
+        action: "navigate-tab",
+        label: linkMeta.label,
+      },
+    };
+  });
+
+  return <SidebarLayout sidebarLinks={links}>{props.children}</SidebarLayout>;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnsureEnginePermission.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
new file mode 100644
index 00000000000..1e3bfc6bd63
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
+import { useQuery } from "@tanstack/react-query";
+import type React from "react";
+import GenericLoadingPage from "../../../../ecosystem/loading";
+import { getEngineAccessPermission } from "../../../_utils/getEngineAccessPermission";
+import { EngineErrorPage } from "./EngineErrorPage";
+
+export function EnsureEnginePermission(props: {
+  engineId: string;
+  accountId: string;
+  authToken: string;
+  children: React.ReactNode;
+  teamSlug: string;
+  instance: EngineInstance;
+}) {
+  const { instance } = props;
+  const rootPath = `/team/${props.teamSlug}/~/engine`;
+
+  const permissionQuery = useQuery({
+    queryKey: [
+      "engine-permission",
+      {
+        instanceUrl: instance.url,
+        authToken: props.authToken,
+      },
+    ],
+    queryFn: () => {
+      const url = instance.url;
+      if (!url) {
+        throw new Error();
+      }
+
+      return getEngineAccessPermission({
+        authToken: props.authToken,
+        instanceUrl: url,
+      });
+    },
+    retry: false,
+  });
+
+  if (permissionQuery.isPending) {
+    return <GenericLoadingPage />;
+  }
+
+  if (!permissionQuery.data) {
+    return (
+      <EngineErrorPage rootPath={rootPath}>
+        Failed to verify access to engine instance
+      </EngineErrorPage>
+    );
+  }
+
+  const permission = permissionQuery.data;
+
+  if (!permission.ok) {
+    if (permission.status === 404) {
+      return (
+        <EngineErrorPage rootPath={rootPath}>
+          <p> Engine instance not found </p>
+        </EngineErrorPage>
+      );
+    }
+
+    if (permission.fetchFailed) {
+      return (
+        <EngineErrorPage rootPath={rootPath}>
+          <p> Engine instance could not be reached </p>
+        </EngineErrorPage>
+      );
+    }
+
+    if (permission.status === 401 || permission.status === 500) {
+      return (
+        <EngineErrorPage rootPath={rootPath}>
+          <div>
+            <p>You are not an admin for this Engine instance. </p>
+            <p> Contact the owner to add your wallet as an admin</p>
+          </div>
+        </EngineErrorPage>
+      );
+    }
+  }
+
+  return <div>{props.children}</div>;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/version.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/version.tsx
new file mode 100644
index 00000000000..1cfb38d1cbc
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/version.tsx
@@ -0,0 +1,289 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import {
+  type EngineInstance,
+  useEngineGetDeploymentPublicConfiguration,
+  useEngineSystemHealth,
+  useEngineUpdateDeployment,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { formatDistanceToNow } from "date-fns";
+import { CircleArrowUpIcon, TriangleAlertIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import invariant from "tiny-invariant";
+
+export const EngineVersionBadge = ({
+  instance,
+  teamSlug,
+}: {
+  instance: EngineInstance;
+  teamSlug: string;
+}) => {
+  const healthQuery = useEngineSystemHealth(instance.url);
+  const publicConfigurationQuery = useEngineGetDeploymentPublicConfiguration({
+    teamSlug,
+  });
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  if (!healthQuery.data || !publicConfigurationQuery.data) {
+    return null;
+  }
+
+  const serverVersions = publicConfigurationQuery.data.serverVersions;
+  const latestVersion = serverVersions[0];
+  const currentVersion = healthQuery.data.engineVersion;
+  const hasNewerVersion = latestVersion?.name !== currentVersion;
+
+  if (!currentVersion) {
+    return null;
+  }
+
+  // Hide the change version modal unless owner.
+  if (!instance.deploymentId) {
+    return (
+      <Button variant="outline" asChild className="hover:bg-transparent">
+        <div>{currentVersion}</div>
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <ToolTipLabel
+        label={
+          hasNewerVersion
+            ? "An update is available"
+            : "Engine is on the latest update"
+        }
+        leftIcon={<CircleArrowUpIcon className="size-4 text-link-foreground" />}
+      >
+        <Button
+          variant="outline"
+          className="relative"
+          onClick={() => setModalOpen(true)}
+        >
+          {currentVersion}
+
+          {/* Notification dot if an update is available */}
+          {hasNewerVersion && (
+            <span className="-top-1 -right-1 absolute">
+              <PulseDot />
+            </span>
+          )}
+        </Button>
+      </ToolTipLabel>
+
+      <ChangeVersionModal
+        open={isModalOpen}
+        onOpenChange={setModalOpen}
+        instance={instance}
+        currentVersion={currentVersion}
+        serverVersions={serverVersions}
+        teamSlug={teamSlug}
+      />
+    </>
+  );
+};
+
+const ChangeVersionModal = (props: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  instance: EngineInstance;
+  currentVersion: string;
+  serverVersions: { name: string; createdAt: string }[];
+  teamSlug: string;
+}) => {
+  const {
+    open,
+    onOpenChange,
+    instance,
+    currentVersion,
+    serverVersions,
+    teamSlug,
+  } = props;
+  const [selectedVersion, setSelectedVersion] = useState(
+    serverVersions[0]?.name,
+  );
+  const updateDeploymentMutation = useEngineUpdateDeployment();
+
+  if (!instance.deploymentId) {
+    // Self-hosted modal: prompt to update manually.
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-w-[400px]">
+          <DialogHeader>
+            <DialogTitle className="mb-6 pr-4 font-semibold text-2xl tracking-tight">
+              Update your self-hosted Engine
+            </DialogTitle>
+            <DialogDescription>
+              View the{" "}
+              <TrackedLinkTW
+                href="https://github.com/thirdweb-dev/engine/releases"
+                category="engine"
+                label="clicked-engine-releases"
+                target="_blank"
+                className="text-link-foreground hover:text-foreground"
+              >
+                latest changelog
+              </TrackedLinkTW>
+              .
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  const onClickUpdate = async () => {
+    invariant(selectedVersion, "No version selected.");
+    invariant(instance.deploymentId, "Engine is missing deploymentId.");
+
+    try {
+      const promise = updateDeploymentMutation.mutateAsync({
+        teamSlug,
+        deploymentId: instance.deploymentId,
+        serverVersion: selectedVersion,
+      });
+      toast.promise(promise, {
+        success: `Updating your Engine to ${selectedVersion}.`,
+        error: "Unexpected error updating Engine.",
+      });
+      await promise;
+    } finally {
+      onOpenChange(false);
+    }
+  };
+
+  // For cloud-hosted, prompt the user to select a version to update to.
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[400px]">
+        <DialogHeader>
+          <DialogTitle>Update Engine version</DialogTitle>
+        </DialogHeader>
+
+        <DialogDescription>
+          <Select
+            onValueChange={(value) => setSelectedVersion(value)}
+            value={selectedVersion}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                {serverVersions.map(({ name, createdAt }, idx) => {
+                  const isCurrentVersion = name === currentVersion;
+                  const isLatestVersion = idx === 0;
+                  return (
+                    <SelectItem
+                      key={name}
+                      value={name}
+                      id={name}
+                      disabled={isCurrentVersion}
+                    >
+                      <span>{name}</span>
+                      <span className="ml-4 text-muted-foreground">
+                        {formatDistanceToNow(new Date(createdAt), {
+                          addSuffix: true,
+                        })}
+                      </span>
+                      {isCurrentVersion ? (
+                        <Badge className="ml-2">current</Badge>
+                      ) : isLatestVersion ? (
+                        <Badge className="ml-2">latest</Badge>
+                      ) : null}
+                    </SelectItem>
+                  );
+                })}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+
+          <div className="h-4" />
+
+          {currentVersion.startsWith("v") && (
+            <div>
+              <TrackedLinkTW
+                href={`https://github.com/thirdweb-dev/engine/compare/${currentVersion}...${selectedVersion}`}
+                category="engine"
+                label="clicked-engine-releases"
+                target="_blank"
+                className="text-link-foreground hover:text-foreground"
+              >
+                View changes: {currentVersion} &rarr; {selectedVersion}
+              </TrackedLinkTW>
+            </div>
+          )}
+
+          <div className="h-4" />
+
+          <Alert variant="warning">
+            <TriangleAlertIcon className="!text-warning-text size-4" />
+            <AlertTitle>There may be up to 1 minute of downtime.</AlertTitle>
+
+            <AlertDescription className="!pl-0 pt-2">
+              We recommended pausing traffic to Engine before performing this
+              version update.
+            </AlertDescription>
+          </Alert>
+        </DialogDescription>
+
+        <DialogFooter className="mt-5">
+          <Button
+            type="button"
+            onClick={() => onOpenChange(false)}
+            variant="outline"
+          >
+            Close
+          </Button>
+          <Button
+            type="submit"
+            onClick={onClickUpdate}
+            variant="primary"
+            className="gap-2"
+            disabled={selectedVersion === currentVersion}
+          >
+            {updateDeploymentMutation.isPending ? (
+              <Spinner className="size-4" />
+            ) : (
+              <CircleArrowUpIcon className="size-4" />
+            )}
+            Update to {selectedVersion}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+function PulseDot() {
+  return (
+    <span className="relative flex size-2">
+      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" />
+      <span className="relative inline-flex size-2 rounded-full bg-primary" />
+    </span>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
new file mode 100644
index 00000000000..82451fea4d1
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
@@ -0,0 +1,312 @@
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import {
+  type AccessToken,
+  useEngineRevokeAccessToken,
+  useEngineUpdateAccessToken,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  type UseDisclosureReturn,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import { TWTable } from "components/shared/TWTable";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { PencilIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { Button, FormLabel, Text } from "tw-components";
+import { toDateTimeLocal } from "utils/date-utils";
+
+interface AccessTokensTableProps {
+  instanceUrl: string;
+  accessTokens: AccessToken[];
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+}
+
+const columnHelper = createColumnHelper<AccessToken>();
+
+const columns = [
+  columnHelper.accessor("tokenMask", {
+    header: "Access Token",
+    cell: (cell) => {
+      return (
+        <p className="py-3 font-mono text-foreground">{cell.getValue()}</p>
+      );
+    },
+  }),
+  columnHelper.accessor("label", {
+    header: "Label",
+    cell: (cell) => {
+      return (
+        <Text isTruncated maxW={300}>
+          {cell.getValue()}
+        </Text>
+      );
+    },
+  }),
+  columnHelper.accessor("walletAddress", {
+    header: "Created By",
+    cell: (cell) => {
+      const address = cell.getValue();
+      return <WalletAddress address={address} />;
+    },
+  }),
+  columnHelper.accessor("createdAt", {
+    header: "Created At",
+    cell: (cell) => {
+      const value = cell.getValue();
+
+      if (!value) {
+        return;
+      }
+      return <Text>{toDateTimeLocal(value)}</Text>;
+    },
+  }),
+];
+
+export const AccessTokensTable: React.FC<AccessTokensTableProps> = ({
+  instanceUrl,
+  accessTokens,
+  isPending,
+  isFetched,
+  authToken,
+}) => {
+  const editDisclosure = useDisclosure();
+  const removeDisclosure = useDisclosure();
+  const [selectedAccessToken, setSelectedAccessToken] = useState<AccessToken>();
+
+  return (
+    <>
+      <TWTable
+        title="access tokens"
+        data={accessTokens}
+        columns={columns}
+        isPending={isPending}
+        isFetched={isFetched}
+        onMenuClick={[
+          {
+            icon: <PencilIcon className="size-4" />,
+            text: "Edit",
+            onClick: (accessToken) => {
+              setSelectedAccessToken(accessToken);
+              editDisclosure.onOpen();
+            },
+          },
+          {
+            icon: <Trash2Icon className="size-4" />,
+            text: "Delete",
+            onClick: (accessToken) => {
+              setSelectedAccessToken(accessToken);
+              removeDisclosure.onOpen();
+            },
+            isDestructive: true,
+          },
+        ]}
+      />
+
+      {selectedAccessToken && editDisclosure.isOpen && (
+        <EditModal
+          accessToken={selectedAccessToken}
+          disclosure={editDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+      {selectedAccessToken && removeDisclosure.isOpen && (
+        <RemoveModal
+          accessToken={selectedAccessToken}
+          disclosure={removeDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+    </>
+  );
+};
+
+const EditModal = ({
+  accessToken,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: {
+  accessToken: AccessToken;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const { mutate: updateAccessToken } = useEngineUpdateAccessToken({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Successfully updated access token",
+    "Failed to update access token",
+  );
+
+  const [label, setLabel] = useState(accessToken.label ?? "");
+
+  const onClick = () => {
+    updateAccessToken(
+      {
+        id: accessToken.id,
+        label,
+      },
+      {
+        onSuccess: () => {
+          onSuccess();
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "update-access-token",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          onError(error);
+          trackEvent({
+            category: "engine",
+            action: "update-access-token",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Update Access Token</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <FormControl>
+              <FormLabel>Access Token</FormLabel>
+              <Text>{accessToken.tokenMask}</Text>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Input
+                type="text"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                placeholder="Enter a description for this access token"
+              />
+            </FormControl>
+          </div>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button type="button" onClick={disclosure.onClose} variant="ghost">
+            Cancel
+          </Button>
+          <Button type="submit" colorScheme="blue" onClick={onClick}>
+            Save
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const RemoveModal = ({
+  accessToken,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: {
+  accessToken: AccessToken;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const { mutate: deleteAccessToken } = useEngineRevokeAccessToken({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Successfully deleted access token",
+    "Failed to delete access token",
+  );
+
+  const onClick = () => {
+    deleteAccessToken(
+      {
+        id: accessToken.id,
+      },
+      {
+        onSuccess: () => {
+          onSuccess();
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "revoke-access-token",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          onError(error);
+          trackEvent({
+            category: "engine",
+            action: "revoke-access-token",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Delete Access Token</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <Text>Are you sure you want to delete this access token?</Text>
+            <FormControl>
+              <FormLabel>Access Token</FormLabel>
+              <Text>{accessToken.tokenMask}</Text>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Text>{accessToken.label ?? <em>N/A</em>}</Text>
+            </FormControl>
+          </div>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button type="button" onClick={disclosure.onClose} variant="ghost">
+            Cancel
+          </Button>
+          <Button type="submit" colorScheme="red" onClick={onClick}>
+            Delete
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
new file mode 100644
index 00000000000..daa5dd3c03a
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
@@ -0,0 +1,123 @@
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
+import { useEngineCreateAccessToken } from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
+import { useState } from "react";
+import { Button, Text } from "tw-components";
+
+interface AddAccessTokenButtonProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const AddAccessTokenButton: React.FC<AddAccessTokenButtonProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const [accessToken, setAccessToken] = useState<string>("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { mutate: createAccessToken } = useEngineCreateAccessToken({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const [hasStoredToken, setHasStoredToken] = useState<boolean>(false);
+
+  const { onSuccess, onError } = useTxNotifications(
+    "Access token created successfully.",
+    "Failed to create Access Token.",
+  );
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          createAccessToken(undefined, {
+            onSuccess: (response) => {
+              onSuccess();
+              trackEvent({
+                category: "engine",
+                action: "create-access-token",
+                label: "success",
+                instance: instanceUrl,
+              });
+              setAccessToken(response.accessToken);
+              onOpen();
+            },
+            onError: (error) => {
+              onError(error);
+              trackEvent({
+                category: "engine",
+                action: "create-access-token",
+                label: "error",
+                instance: instanceUrl,
+                error,
+              });
+            },
+          });
+        }}
+        variant="ghost"
+        size="sm"
+        leftIcon={<CirclePlusIcon className="size-6" />}
+        colorScheme="primary"
+        w="fit-content"
+      >
+        Create Access Token
+      </Button>
+
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        closeOnOverlayClick={false}
+        closeOnEsc={false}
+        isCentered
+      >
+        <ModalOverlay />
+        <ModalContent className="!bg-background rounded-lg border border-border">
+          <ModalHeader>Access token</ModalHeader>
+          <ModalBody as={Flex} flexDir="column" gap={4}>
+            <div className="flex flex-col gap-4">
+              <PlainTextCodeBlock code={accessToken} />
+              <Text color="red.500">
+                This access token will not be shown again.
+              </Text>
+              <CheckboxWithLabel>
+                <Checkbox
+                  checked={hasStoredToken}
+                  onCheckedChange={(val) => setHasStoredToken(!!val)}
+                />
+                <span>I have securely stored this access token.</span>
+              </CheckboxWithLabel>
+            </div>
+          </ModalBody>
+
+          <ModalFooter as={Flex} gap={3}>
+            <Button
+              type="submit"
+              colorScheme="primary"
+              isDisabled={!hasStoredToken}
+              onClick={() => {
+                onClose();
+                setAccessToken("");
+              }}
+            >
+              Done
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
new file mode 100644
index 00000000000..d3da3bf5c4b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
@@ -0,0 +1,233 @@
+import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
+import {
+  type KeypairAlgorithm,
+  useEngineAddKeypair,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Alert,
+  Flex,
+  FormControl,
+  Input,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  Textarea,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
+import { useState } from "react";
+import { Button, FormLabel, Text } from "tw-components";
+
+const KEYPAIR_ALGORITHM_DETAILS: Record<
+  KeypairAlgorithm,
+  {
+    name: string;
+    privateKeyInstructions: string;
+    publicKeyInstructions: string;
+  }
+> = {
+  ES256: {
+    name: "ECDSA",
+    privateKeyInstructions:
+      "openssl ecparam -name prime256v1 -genkey -noout -out private.key",
+    publicKeyInstructions: "openssl ec -in private.key -pubout -out public.key",
+  },
+  RS256: {
+    name: "RSASSA-PKCS1-v1_5",
+    privateKeyInstructions:
+      "openssl genpkey -algorithm RSA -out private.key -pkeyopt rsa_keygen_bits:2048",
+    publicKeyInstructions:
+      "openssl rsa -pubout -in private.key -out public.key",
+  },
+  PS256: {
+    name: "RSASSA-PSS",
+    privateKeyInstructions:
+      "openssl genpkey -algorithm RSA-PSS -out private.key -pkeyopt rsa_keygen_bits:2048 -pkeyopt rsa_pss_keygen_md:sha256",
+    publicKeyInstructions:
+      "openssl rsa -pubout -in private.key -out public.key",
+  },
+};
+
+interface AddKeypairButtonProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const [publicKey, setPublicKey] = useState<string>("");
+  const [algorithm, setAlgorithm] = useState<KeypairAlgorithm>("ES256");
+  const [label, setLabel] = useState<string>("");
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { mutateAsync: importKeypair } = useEngineAddKeypair({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+
+  const { onSuccess, onError } = useTxNotifications(
+    "Public key added successfully.",
+    "Failed to add public key.",
+  );
+
+  const onClick = async () => {
+    try {
+      await importKeypair({
+        publicKey,
+        algorithm,
+        label,
+      });
+
+      onSuccess();
+      trackEvent({
+        category: "engine",
+        action: "add-keypair",
+        label: "success",
+        instance: instanceUrl,
+      });
+      setPublicKey("");
+      onClose();
+    } catch (error) {
+      onError(error);
+      trackEvent({
+        category: "engine",
+        action: "add-keypair",
+        label: "error",
+        instance: instanceUrl,
+        error,
+      });
+    }
+  };
+
+  return (
+    <>
+      <Button
+        onClick={onOpen}
+        variant="ghost"
+        size="sm"
+        leftIcon={<CirclePlusIcon className="size-6" />}
+        colorScheme="primary"
+        w="fit-content"
+      >
+        Add Public Key
+      </Button>
+
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        closeOnOverlayClick={false}
+        closeOnEsc={false}
+        isCentered
+        size="2xl"
+      >
+        <ModalOverlay />
+        <ModalContent className="!bg-background rounded-lg border border-border">
+          <ModalHeader>Add Public Key</ModalHeader>
+          <ModalBody as={Flex} flexDir="column" gap={8}>
+            <FormControl>
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-row gap-2">
+                  <Text>Create a private key using:</Text>
+                  <Select
+                    w="fit-content"
+                    value={algorithm}
+                    onChange={(e) =>
+                      setAlgorithm(e.target.value as KeypairAlgorithm)
+                    }
+                    fontSize="small"
+                    size="sm"
+                    variant="unstyled"
+                    // fontWeight="bold"
+                    fontFamily="mono"
+                    color="primary.500"
+                    mt="-1px"
+                  >
+                    {(
+                      Object.keys(
+                        KEYPAIR_ALGORITHM_DETAILS,
+                      ) as KeypairAlgorithm[]
+                    ).map((key) => (
+                      <option key={key} value={key}>
+                        {key} ({KEYPAIR_ALGORITHM_DETAILS[key].name})
+                      </option>
+                    ))}
+                  </Select>
+                </div>
+
+                <PlainTextCodeBlock
+                  code={
+                    KEYPAIR_ALGORITHM_DETAILS[algorithm].privateKeyInstructions
+                  }
+                />
+                <Text>Extract the public key.</Text>
+                <PlainTextCodeBlock
+                  code={
+                    KEYPAIR_ALGORITHM_DETAILS[algorithm].publicKeyInstructions
+                  }
+                />
+                <Text>Print the public key.</Text>
+                <PlainTextCodeBlock code="cat public.key" />
+              </div>
+            </FormControl>
+
+            <FormControl isRequired>
+              <FormLabel>
+                Public Key ({KEYPAIR_ALGORITHM_DETAILS[algorithm].name})
+              </FormLabel>
+              <Textarea
+                fontFamily="mono"
+                value={publicKey}
+                onChange={(e) => setPublicKey(e.target.value)}
+                placeholder="-----BEGIN PUBLIC KEY-----\n...\n...\n...\n...\n-----END PUBLIC KEY-----"
+                rows={6}
+                fontSize="small"
+              />
+            </FormControl>
+
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Input
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                placeholder="Enter a description for this keypair"
+              />
+            </FormControl>
+
+            <Alert variant="left-accent">
+              <div className="flex flex-col gap-2">
+                <Text>
+                  <strong>Keep your private key secure!</strong>
+                  <br />
+                  Your backend will sign access tokens with this private key
+                  which Engine verifies with this public key.
+                </Text>
+              </div>
+            </Alert>
+          </ModalBody>
+
+          <ModalFooter as={Flex} gap={3}>
+            <Button variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              colorScheme="primary"
+              onClick={onClick}
+              isDisabled={!publicKey}
+            >
+              Add Public Key
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
new file mode 100644
index 00000000000..0a6ec16b40c
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import { CodeClient } from "@/components/ui/code/code.client";
+import { InlineCode } from "@/components/ui/inline-code";
+import {
+  useEngineAccessTokens,
+  useEngineKeypairs,
+  useHasEngineFeature,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { ButtonGroup, Flex } from "@chakra-ui/react";
+import { useState } from "react";
+import { Button, Heading, Link, Text } from "tw-components";
+import { AccessTokensTable } from "./access-tokens-table";
+import { AddAccessTokenButton } from "./add-access-token-button";
+import { AddKeypairButton } from "./add-keypair-button";
+import { KeypairsTable } from "./keypairs-table";
+
+interface EngineAccessTokensProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+type AccessTokenType = "standard" | "keypair";
+
+export const EngineAccessTokens: React.FC<EngineAccessTokensProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const [selected, setSelected] = useState<AccessTokenType>("standard");
+  const { isSupported: supportsKeyPairAuth } = useHasEngineFeature(
+    instanceUrl,
+    "KEYPAIR_AUTH",
+  );
+
+  return (
+    <Flex flexDir="column" gap={4}>
+      <Flex flexDir="column" gap={2}>
+        <Heading size="title.md">Access Tokens</Heading>
+      </Flex>
+
+      {supportsKeyPairAuth && (
+        <ButtonGroup size="sm" variant="ghost" spacing={2}>
+          <Button
+            type="button"
+            isActive={selected === "standard"}
+            _active={{
+              bg: "bgBlack",
+              color: "bgWhite",
+            }}
+            rounded="lg"
+            onClick={() => setSelected("standard")}
+          >
+            Standard
+          </Button>
+          <Button
+            type="button"
+            isActive={selected === "keypair"}
+            _active={{
+              bg: "bgBlack",
+              color: "bgWhite",
+            }}
+            rounded="lg"
+            onClick={() => setSelected("keypair")}
+          >
+            Keypair Authentication
+          </Button>
+        </ButtonGroup>
+      )}
+
+      {selected === "standard" ? (
+        <StandardAccessTokensPanel
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      ) : selected === "keypair" ? (
+        <KeypairAuthenticationPanel
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      ) : null}
+    </Flex>
+  );
+};
+
+const StandardAccessTokensPanel = ({
+  instanceUrl,
+  authToken,
+}: {
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const accessTokens = useEngineAccessTokens({
+    instanceUrl,
+    authToken,
+  });
+
+  return (
+    <>
+      <Text>
+        Access tokens allow API access to Engine.{" "}
+        <Link
+          href="https://portal.thirdweb.com/engine/features/access-tokens"
+          color="primary.500"
+          isExternal
+        >
+          Learn more about access tokens
+        </Link>
+        .
+      </Text>
+
+      <AccessTokensTable
+        instanceUrl={instanceUrl}
+        accessTokens={accessTokens.data ?? []}
+        isPending={accessTokens.isPending}
+        isFetched={accessTokens.isFetched}
+        authToken={authToken}
+      />
+      <AddAccessTokenButton instanceUrl={instanceUrl} authToken={authToken} />
+
+      <Flex direction="column" gap={2} mt={16}>
+        <Heading size="title.md">Authenticate with your access token</Heading>
+        <Text>
+          Set the <InlineCode code="authorization" /> header.
+        </Text>
+        <CodeClient
+          lang="ts"
+          code={`const resp = fetch("<engine_url>/backend-wallet/get-all", {
+  headers: {
+    authorization: "Bearer <access_token>",
+  },
+});`}
+        />
+      </Flex>
+    </>
+  );
+};
+
+const KeypairAuthenticationPanel = ({
+  instanceUrl,
+  authToken,
+}: {
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const keypairs = useEngineKeypairs({
+    instanceUrl,
+    authToken,
+  });
+
+  return (
+    <>
+      <Text>
+        Keypair authentication allows your app to generate short-lived access
+        tokens.
+        <br />
+        They are securely signed by your backend and verified with a public key.{" "}
+        <Link
+          href="https://portal.thirdweb.com/engine/features/keypair-authentication"
+          color="primary.500"
+          isExternal
+        >
+          Learn more about keypair authentication
+        </Link>
+        .
+      </Text>
+
+      <KeypairsTable
+        instanceUrl={instanceUrl}
+        keypairs={keypairs.data || []}
+        isPending={keypairs.isPending}
+        isFetched={keypairs.isFetched}
+        authToken={authToken}
+      />
+      <AddKeypairButton instanceUrl={instanceUrl} authToken={authToken} />
+
+      <Flex direction="column" gap={2} mt={16}>
+        <Heading size="title.md">Authenticate with your access token</Heading>
+
+        <Text>
+          Set the <InlineCode code="authorization" /> header.
+        </Text>
+        <CodeClient
+          lang="ts"
+          code={`import jsonwebtoken from "jsonwebtoken";
+
+// Generate an access token.
+const payload = {
+  iss: publicKey,
+};
+const accessToken = jsonwebtoken.sign(payload, privateKey, {
+  algorithm: "ES256",   // The keypair algorithm
+  expiresIn: "15s",     // Invalidate after 15 seconds
+});
+
+// Call Engine.
+const resp = fetch("<engine_url>/backend-wallet/get-all", {
+  headers: {
+    authorization: \`Bearer \${restrictedAccessToken}\`,
+  },
+});`}
+        />
+      </Flex>
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
new file mode 100644
index 00000000000..012b4071025
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
@@ -0,0 +1,218 @@
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
+import {
+  type Keypair,
+  useEngineRemoveKeypair,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  type UseDisclosureReturn,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import { TWTable } from "components/shared/TWTable";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { Button, FormLabel, Text } from "tw-components";
+import { toDateTimeLocal } from "utils/date-utils";
+
+interface KeypairsTableProps {
+  instanceUrl: string;
+  keypairs: Keypair[];
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+}
+
+const columnHelper = createColumnHelper<Keypair>();
+
+const columns = [
+  columnHelper.accessor("label", {
+    header: "Label",
+    cell: (cell) => {
+      return <Text>{cell.getValue()}</Text>;
+    },
+  }),
+  columnHelper.accessor("hash", {
+    header: "Key ID",
+    cell: (cell) => {
+      return (
+        <CopyAddressButton address={cell.getValue()} copyIconPosition="right" />
+      );
+    },
+  }),
+  columnHelper.accessor("publicKey", {
+    header: "Public Key",
+    cell: (cell) => {
+      return (
+        <PlainTextCodeBlock
+          code={cell.getValue()}
+          className="max-w-[350px]"
+          codeClassName="text-xs"
+        />
+      );
+    },
+  }),
+  columnHelper.accessor("algorithm", {
+    header: "Type",
+    cell: (cell) => {
+      return <Text>{cell.getValue()}</Text>;
+    },
+  }),
+  columnHelper.accessor("createdAt", {
+    header: "Added At",
+    cell: (cell) => {
+      return <Text>{toDateTimeLocal(cell.getValue())}</Text>;
+    },
+  }),
+];
+
+export const KeypairsTable: React.FC<KeypairsTableProps> = ({
+  instanceUrl,
+  keypairs,
+  isPending,
+  isFetched,
+  authToken,
+}) => {
+  const removeDisclosure = useDisclosure();
+  const [selectedKeypair, setSelectedKeypair] = useState<Keypair>();
+
+  return (
+    <>
+      <TWTable
+        title="public keys"
+        data={keypairs}
+        columns={columns}
+        isPending={isPending}
+        isFetched={isFetched}
+        onMenuClick={[
+          {
+            icon: <Trash2Icon className="size-4" />,
+            text: "Remove",
+            onClick: (keypair) => {
+              setSelectedKeypair(keypair);
+              removeDisclosure.onOpen();
+            },
+            isDestructive: true,
+          },
+        ]}
+      />
+
+      {selectedKeypair && removeDisclosure.isOpen && (
+        <RemoveModal
+          keypair={selectedKeypair}
+          disclosure={removeDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+    </>
+  );
+};
+
+const RemoveModal = ({
+  keypair,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: {
+  keypair: Keypair;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const { mutate: revokeKeypair } = useEngineRemoveKeypair({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Successfully removed public key",
+    "Failed to remove public key",
+  );
+
+  const onClick = () => {
+    revokeKeypair(
+      { hash: keypair.hash },
+      {
+        onSuccess: () => {
+          onSuccess();
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "remove-keypair",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          onError(error);
+          trackEvent({
+            category: "engine",
+            action: "remove-keypair",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Remove Keypair</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <Text>Are you sure you want to remove this keypair?</Text>
+            <Text>
+              Access tokens signed by the private key for this keypair will no
+              longer be valid.
+            </Text>
+
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Text>{keypair.label}</Text>
+            </FormControl>
+
+            <FormControl>
+              <FormLabel>Type</FormLabel>
+              <Text>{keypair.algorithm}</Text>
+            </FormControl>
+
+            <FormControl>
+              <FormLabel>Public Key</FormLabel>
+              <Flex overflowX="scroll">
+                <Text fontFamily="mono" fontSize="small" whiteSpace="pre-line">
+                  {keypair.publicKey}
+                </Text>
+              </Flex>
+            </FormControl>
+          </div>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button type="button" onClick={disclosure.onClose} variant="ghost">
+            Cancel
+          </Button>
+          <Button type="submit" colorScheme="red" onClick={onClick}>
+            Remove
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/page.tsx
new file mode 100644
index 00000000000..f1dd2edd5d3
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/page.tsx
@@ -0,0 +1,15 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { EngineAccessTokens } from "./components/engine-access-tokens";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return (
+    <EngineAccessTokens instanceUrl={instance.url} authToken={authToken} />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/add-admin-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/add-admin-button.tsx
new file mode 100644
index 00000000000..0f1c70d2a35
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/add-admin-button.tsx
@@ -0,0 +1,131 @@
+import {
+  type EngineAdmin,
+  useEngineGrantPermissions,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { isAddress } from "thirdweb";
+import { Button, FormLabel } from "tw-components";
+
+interface AddAdminButtonProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const AddAdminButton: React.FC<AddAdminButtonProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { mutate: grantPermissions } = useEngineGrantPermissions({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const form = useForm<EngineAdmin>({
+    defaultValues: {
+      permissions: "ADMIN",
+    },
+  });
+
+  const { onSuccess, onError } = useTxNotifications(
+    "Successfully added admin.",
+    "Failed to add admin.",
+  );
+
+  return (
+    <>
+      <Button
+        onClick={onOpen}
+        variant="ghost"
+        size="sm"
+        leftIcon={<CirclePlusIcon className="size-6" />}
+        colorScheme="primary"
+        w="fit-content"
+      >
+        Add Admin
+      </Button>
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent
+          className="!bg-background rounded-lg border border-border"
+          as="form"
+          onSubmit={form.handleSubmit((data) => {
+            if (!isAddress(data.walletAddress)) {
+              onError(new Error("Invalid wallet address"));
+            }
+            grantPermissions(data, {
+              onSuccess: () => {
+                onSuccess();
+                onClose();
+                trackEvent({
+                  category: "engine",
+                  action: "add-admin",
+                  label: "success",
+                  instance: instanceUrl,
+                });
+              },
+              onError: (error) => {
+                onError(error);
+                trackEvent({
+                  category: "engine",
+                  action: "add-admin",
+                  label: "error",
+                  instance: instanceUrl,
+                  error,
+                });
+              },
+            });
+          })}
+        >
+          <ModalHeader>Add Admin</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <div className="flex flex-col gap-4">
+              <FormControl isRequired>
+                <FormLabel>Wallet Address</FormLabel>
+                <Input
+                  type="text"
+                  placeholder="The wallet address for this admin"
+                  {...form.register("walletAddress", { required: true })}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>Label</FormLabel>
+                <Input
+                  type="text"
+                  placeholder="Enter a description for this admin"
+                  {...form.register("label")}
+                />
+              </FormControl>
+            </div>
+          </ModalBody>
+
+          <ModalFooter as={Flex} gap={3}>
+            <Button type="button" onClick={onClose} variant="ghost">
+              Cancel
+            </Button>
+            <Button type="submit" colorScheme="primary">
+              Add
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/admins-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/admins-table.tsx
new file mode 100644
index 00000000000..ef7fb39f964
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/admins-table.tsx
@@ -0,0 +1,300 @@
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Badge } from "@/components/ui/badge";
+import {
+  type EngineAdmin,
+  useEngineGrantPermissions,
+  useEngineRevokePermissions,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  type UseDisclosureReturn,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import { TWTable } from "components/shared/TWTable";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { PencilIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { Button, FormLabel, Text } from "tw-components";
+
+interface AdminsTableProps {
+  instanceUrl: string;
+  admins: EngineAdmin[];
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+}
+
+const columnHelper = createColumnHelper<EngineAdmin>();
+
+const columns = [
+  columnHelper.accessor("walletAddress", {
+    header: "Address",
+    cell: (cell) => {
+      const address = cell.getValue();
+      return <WalletAddress address={address} />;
+    },
+  }),
+  columnHelper.accessor("label", {
+    header: "Label",
+    cell: (cell) => {
+      return (
+        <Text isTruncated maxW={300}>
+          {cell.getValue()}
+        </Text>
+      );
+    },
+  }),
+  columnHelper.accessor("permissions", {
+    header: "Role",
+    cell: (cell) => {
+      return <Badge variant="default">{cell.getValue()}</Badge>;
+    },
+  }),
+];
+
+export const AdminsTable: React.FC<AdminsTableProps> = ({
+  instanceUrl,
+  admins,
+  isPending,
+  isFetched,
+  authToken,
+}) => {
+  const editDisclosure = useDisclosure();
+  const removeDisclosure = useDisclosure();
+  const [selectedAdmin, setSelectedAdmin] = useState<EngineAdmin>();
+
+  return (
+    <>
+      <TWTable
+        title="admins"
+        data={admins}
+        columns={columns}
+        isPending={isPending}
+        isFetched={isFetched}
+        onMenuClick={[
+          {
+            icon: <PencilIcon className="size-4" />,
+            text: "Edit",
+            onClick: (admin) => {
+              setSelectedAdmin(admin);
+              editDisclosure.onOpen();
+            },
+          },
+          {
+            icon: <Trash2Icon className="size-4" />,
+            text: "Remove",
+            onClick: (admin) => {
+              setSelectedAdmin(admin);
+              removeDisclosure.onOpen();
+            },
+            isDestructive: true,
+          },
+        ]}
+      />
+
+      {selectedAdmin && editDisclosure.isOpen && (
+        <EditModal
+          admin={selectedAdmin}
+          disclosure={editDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+      {selectedAdmin && removeDisclosure.isOpen && (
+        <RemoveModal
+          admin={selectedAdmin}
+          disclosure={removeDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+    </>
+  );
+};
+
+const EditModal = ({
+  admin,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: {
+  admin: EngineAdmin;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const { mutate: updatePermissions } = useEngineGrantPermissions({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Successfully updated admin",
+    "Failed to update admin",
+  );
+
+  const [label, setLabel] = useState(admin.label ?? "");
+
+  const onClick = () => {
+    updatePermissions(
+      {
+        walletAddress: admin.walletAddress,
+        permissions: admin.permissions,
+        label,
+      },
+      {
+        onSuccess: () => {
+          onSuccess();
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "update-admin",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          onError(error);
+          trackEvent({
+            category: "engine",
+            action: "update-admin",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Update Admin</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <FormControl>
+              <FormLabel>Wallet Address</FormLabel>
+              <Text>{admin.walletAddress}</Text>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Input
+                type="text"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                placeholder="Enter a description for this admin"
+              />
+            </FormControl>
+          </div>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button type="button" onClick={disclosure.onClose} variant="ghost">
+            Cancel
+          </Button>
+          <Button type="submit" colorScheme="blue" onClick={onClick}>
+            Save
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const RemoveModal = ({
+  admin,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: {
+  admin: EngineAdmin;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const { mutate: revokePermissions } = useEngineRevokePermissions({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Successfully removed admin",
+    "Failed to remove admin",
+  );
+
+  const onClick = () => {
+    revokePermissions(
+      {
+        walletAddress: admin.walletAddress,
+      },
+      {
+        onSuccess: () => {
+          onSuccess();
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "revoke-admin",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          onError(error);
+          trackEvent({
+            category: "engine",
+            action: "revoke-admin",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Remove Admin</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <Text>Are you sure you want to remove this admin?</Text>
+            <FormControl>
+              <FormLabel>Wallet Address</FormLabel>
+              <Text>{admin.walletAddress}</Text>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Text>{admin.label ?? <em>N/A</em>}</Text>
+            </FormControl>
+          </div>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button type="button" onClick={disclosure.onClose} variant="ghost">
+            Cancel
+          </Button>
+          <Button type="submit" colorScheme="red" onClick={onClick}>
+            Remove
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/engine-admins.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/engine-admins.tsx
new file mode 100644
index 00000000000..d1d1706995f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/engine-admins.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useEnginePermissions } from "@3rdweb-sdk/react/hooks/useEngine";
+import { Heading, Link, Text } from "tw-components";
+import { AddAdminButton } from "./add-admin-button";
+import { AdminsTable } from "./admins-table";
+
+interface EngineAdminsProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const EngineAdmins: React.FC<EngineAdminsProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const admins = useEnginePermissions({
+    instanceUrl,
+    authToken,
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Heading size="title.md">Admins</Heading>
+        <Text>
+          Admins are allowed to manage your Engine instance from the dashboard.{" "}
+          <Link
+            href="https://portal.thirdweb.com/engine/features/admins"
+            color="primary.500"
+            isExternal
+          >
+            Learn more about admins
+          </Link>
+          .
+        </Text>
+      </div>
+      <AdminsTable
+        instanceUrl={instanceUrl}
+        admins={admins.data || []}
+        isPending={admins.isPending}
+        isFetched={admins.isFetched}
+        authToken={authToken}
+      />
+      <AddAdminButton instanceUrl={instanceUrl} authToken={authToken} />
+    </div>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/page.tsx
new file mode 100644
index 00000000000..e3d235d774b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/page.tsx
@@ -0,0 +1,13 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { EngineAdmins } from "./components/engine-admins";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return <EngineAdmins instanceUrl={instance.url} authToken={authToken} />;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
new file mode 100644
index 00000000000..f42acc39b62
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  type EngineAlertRule,
+  EngineNotificationChannelTypeConfig,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const alertFormSchema = z.object({
+  subscriptionRoutes: z.array(z.string()),
+  type: z.enum(
+    Object.keys(EngineNotificationChannelTypeConfig) as [
+      keyof typeof EngineNotificationChannelTypeConfig,
+    ],
+  ),
+  value: z.string(),
+});
+
+type EngineAlertFormValues = z.infer<typeof alertFormSchema>;
+
+export function EngineAlertDialogForm(props: {
+  alertRules: EngineAlertRule[];
+  title: string;
+  values: EngineAlertFormValues | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  submitButton: {
+    isLoading: boolean;
+    label: string;
+    onSubmit: (value: EngineAlertFormValues) => void;
+  };
+}) {
+  const form = useForm<z.infer<typeof alertFormSchema>>({
+    resolver: zodResolver(alertFormSchema),
+    defaultValues: {
+      subscriptionRoutes: ["alert.*"],
+      type: "slack",
+    },
+    values: props.values ?? undefined,
+  });
+
+  function onSubmit(values: z.infer<typeof alertFormSchema>) {
+    props.submitButton.onSubmit(values);
+  }
+
+  const alertRuleOptions: EngineAlertRule[] = [
+    {
+      id: "_all_alerts",
+      routingKey: "alert.*",
+      title: "All alerts",
+      description: "Get notified of all alerts.",
+      createdAt: new Date(),
+      pausedAt: null,
+    },
+    ...props.alertRules,
+  ];
+
+  const selectedAlertRule = alertRuleOptions.find(
+    (alertRule) =>
+      alertRule.routingKey === form.getValues("subscriptionRoutes")[0],
+  );
+
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent className="p-0">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="p-6">
+              <DialogHeader className="mb-4">
+                <DialogTitle className="font-semibold text-2xl tracking-tight">
+                  {props.title}
+                </DialogTitle>
+              </DialogHeader>
+
+              <div className="flex flex-col gap-5">
+                {/* Alert Rule */}
+                <FormField
+                  control={form.control}
+                  name="subscriptionRoutes"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Alert Rule</FormLabel>
+                      <FormControl>
+                        <Select
+                          onValueChange={(value) => field.onChange([value])}
+                          value={field.value[0] ?? "alert.*"}
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectGroup>
+                              {alertRuleOptions.map((option) => (
+                                <SelectItem
+                                  key={option.id}
+                                  value={option.routingKey}
+                                >
+                                  {option.title}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+
+                      <FormMessage />
+
+                      {selectedAlertRule?.description && (
+                        <FormDescription>
+                          {selectedAlertRule.description}
+                        </FormDescription>
+                      )}
+                    </FormItem>
+                  )}
+                />
+
+                {/* Notification Type */}
+                <FormField
+                  control={form.control}
+                  name="type"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Notification Type</FormLabel>
+                      <FormControl>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger className="mt-1">
+                            <SelectValue placeholder="Select Notification Type" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectGroup>
+                              {Object.entries(
+                                EngineNotificationChannelTypeConfig,
+                              ).map(([type, config]) => (
+                                <SelectItem key={type} value={type}>
+                                  {config.display}
+                                </SelectItem>
+                              ))}
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* Value (webhook URL, Slack URL, email address, etc.) */}
+                <FormField
+                  control={form.control}
+                  name="value"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {EngineNotificationChannelTypeConfig[
+                          form.getValues("type")
+                        ].valueDisplay ?? "Value"}
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          type={
+                            form.getValues("type") === "email"
+                              ? "email"
+                              : "text"
+                          }
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2 ">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  props.onOpenChange(false);
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="min-w-28 gap-2"
+                disabled={props.submitButton.isLoading}
+              >
+                {props.submitButton.isLoading && <Spinner className="size-4" />}
+                {props.submitButton.label}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx
new file mode 100644
index 00000000000..b3f15d3f669
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import {
+  type EngineInstance,
+  useEngineAlertRules,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { ManageEngineAlertsSection } from "./ManageEngineAlerts";
+import { RecentEngineAlertsSection } from "./RecentEngineAlerts";
+
+export function EngineAlertsPage(props: {
+  instance: EngineInstance;
+  teamIdOrSlug: string;
+}) {
+  const alertRulesQuery = useEngineAlertRules(
+    props.instance.id,
+    props.teamIdOrSlug,
+  );
+  const alertRules = alertRulesQuery.data ?? [];
+
+  return (
+    <div>
+      <ManageEngineAlertsSection
+        alertRules={alertRules}
+        engineId={props.instance.id}
+        alertRulesIsLoading={alertRulesQuery.isLoading}
+        teamIdOrSlug={props.teamIdOrSlug}
+      />
+      <div className="h-8" />
+      <RecentEngineAlertsSection
+        alertRules={alertRules}
+        engineId={props.instance.id}
+        alertRulesIsLoading={alertRulesQuery.isLoading}
+        teamIdOrSlug={props.teamIdOrSlug}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
new file mode 100644
index 00000000000..3d44b4baa37
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
@@ -0,0 +1,52 @@
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { DialogDescription } from "@radix-ui/react-dialog";
+
+export function EngineDeleteAlertModal(props: {
+  onConfirm: () => void;
+  isPending: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent className="p-0">
+        <DialogHeader className="mb-4 p-6">
+          <DialogTitle className="font-semibold text-2xl tracking-tight">
+            Delete Alert
+          </DialogTitle>
+
+          <DialogDescription>
+            You will no longer receive notifications from this webhook.
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter className="gap-4 border-border border-t bg-card p-6 lg:gap-2">
+          <Button
+            variant="outline"
+            onClick={() => {
+              props.onOpenChange(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            className="min-w-28 gap-2"
+            variant="destructive"
+            onClick={props.onConfirm}
+          >
+            {props.isPending && <Spinner className="size-4" />}
+            Delete Webhook
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx
new file mode 100644
index 00000000000..f3b1e614766
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx
@@ -0,0 +1,122 @@
+import type {
+  CreateNotificationChannelInput,
+  EngineNotificationChannel,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useMutation } from "@tanstack/react-query";
+import {
+  createEngineAlertRuleStub,
+  createEngineNotificationChannelStub,
+} from "stories/stubs";
+import { BadgeContainer } from "stories/utils";
+import { ManageEngineAlertsSectionUI } from "./ManageEngineAlerts";
+
+const meta = {
+  title: "Engine/Alerts/ManageAlerts",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function Story() {
+  const createEngineAlertMutation = useMutation({
+    mutationFn: async (values: CreateNotificationChannelInput) => {
+      console.log("creating alert using input:", values);
+
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const channelStub: EngineNotificationChannel = {
+        createdAt: new Date(),
+        id: "new-channel",
+        pausedAt: null,
+        subscriptionRoutes: values.subscriptionRoutes,
+        value: values.value,
+        type: values.type,
+      };
+
+      console.log("created channel:", channelStub);
+      return channelStub;
+    },
+  });
+
+  async function deleteAlert(alertId: string) {
+    console.log("deleting alert:", alertId);
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  }
+
+  return (
+    <div className="container flex max-w-6xl flex-col gap-14 py-6">
+      <BadgeContainer label="2 Alerts">
+        <ManageEngineAlertsSectionUI
+          isLoading={false}
+          onAlertsUpdated={() => {}}
+          engineId="test-engine-id"
+          createAlertMutation={createEngineAlertMutation}
+          deleteAlert={deleteAlert}
+          alertRules={[
+            createEngineAlertRuleStub("foo"),
+            createEngineAlertRuleStub("bar"),
+          ]}
+          notificationChannels={[
+            createEngineNotificationChannelStub("foo"),
+            createEngineNotificationChannelStub("foo", {
+              pausedAt: null,
+            }),
+          ]}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="No Alerts">
+        <ManageEngineAlertsSectionUI
+          alertRules={[
+            createEngineAlertRuleStub("foo"),
+            createEngineAlertRuleStub("bar"),
+          ]}
+          engineId="test-engine-id"
+          notificationChannels={[]}
+          isLoading={false}
+          onAlertsUpdated={() => {}}
+          createAlertMutation={createEngineAlertMutation}
+          deleteAlert={deleteAlert}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Loading">
+        <ManageEngineAlertsSectionUI
+          alertRules={[
+            createEngineAlertRuleStub("foo"),
+            createEngineAlertRuleStub("bar"),
+          ]}
+          engineId="test-engine-id"
+          notificationChannels={[]}
+          isLoading={true}
+          onAlertsUpdated={() => {}}
+          createAlertMutation={createEngineAlertMutation}
+          deleteAlert={deleteAlert}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="No Alert Rules">
+        <ManageEngineAlertsSectionUI
+          alertRules={[]}
+          engineId="test-engine-id"
+          notificationChannels={[]}
+          isLoading={false}
+          onAlertsUpdated={() => {}}
+          createAlertMutation={createEngineAlertMutation}
+          deleteAlert={deleteAlert}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
new file mode 100644
index 00000000000..413dd0eb7c2
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
@@ -0,0 +1,387 @@
+"use client";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import {
+  type CreateNotificationChannelInput,
+  type EngineAlertRule,
+  type EngineNotificationChannel,
+  useEngineCreateNotificationChannel,
+  useEngineDeleteNotificationChannel,
+  useEngineNotificationChannels,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import { formatDate } from "date-fns";
+import { EllipsisVerticalIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { EngineAlertDialogForm } from "./EngineAlertDialogForm";
+import { EngineDeleteAlertModal } from "./EngineDeleteAlertModal";
+
+type CreateAlertMutation = UseMutationResult<
+  EngineNotificationChannel,
+  unknown,
+  CreateNotificationChannelInput,
+  unknown
+>;
+
+export function ManageEngineAlertsSection(props: {
+  teamIdOrSlug: string;
+  alertRules: EngineAlertRule[];
+  alertRulesIsLoading: boolean;
+  engineId: string;
+}) {
+  const notificationChannelsQuery = useEngineNotificationChannels(
+    props.engineId,
+    props.teamIdOrSlug,
+  );
+  const deleteAlertMutation = useEngineDeleteNotificationChannel(
+    props.engineId,
+    props.teamIdOrSlug,
+  );
+
+  const createAlertMutation = useEngineCreateNotificationChannel(
+    props.engineId,
+    props.teamIdOrSlug,
+  );
+
+  // not passing the mutation to avoid multiple rows sharing the same mutation state, we create the new mutation for each row instead in each component instead
+  async function deleteAlert(notificationChannelId: string) {
+    return deleteAlertMutation.mutate(notificationChannelId);
+  }
+
+  return (
+    <ManageEngineAlertsSectionUI
+      alertRules={props.alertRules}
+      engineId={props.engineId}
+      notificationChannels={notificationChannelsQuery.data ?? []}
+      isLoading={
+        notificationChannelsQuery.isLoading || props.alertRulesIsLoading
+      }
+      onAlertsUpdated={() => {
+        notificationChannelsQuery.refetch();
+      }}
+      createAlertMutation={createAlertMutation}
+      deleteAlert={deleteAlert}
+    />
+  );
+}
+
+export function ManageEngineAlertsSectionUI(props: {
+  alertRules: EngineAlertRule[];
+  engineId: string;
+  notificationChannels: EngineNotificationChannel[];
+  isLoading: boolean;
+  onAlertsUpdated: () => void;
+  createAlertMutation: CreateAlertMutation;
+  deleteAlert: (notificationChannelId: string) => Promise<void>;
+}) {
+  const {
+    engineId,
+    notificationChannels,
+    isLoading,
+    onAlertsUpdated,
+    createAlertMutation,
+    deleteAlert,
+  } = props;
+
+  return (
+    <section>
+      <div className="flex flex-col justify-between gap-4 lg:flex-row lg:gap-6">
+        <div>
+          <h2 className="mb-1 font-semibold text-2xl tracking-tight">
+            Manage Alerts
+          </h2>
+          <p className="text-muted-foreground">
+            Get notified when alerts are triggered on your Engine instance.
+          </p>
+        </div>
+
+        <CreateAlertButton
+          engineId={engineId}
+          alertRules={props.alertRules}
+          onSuccess={onAlertsUpdated}
+          createAlertMutation={createAlertMutation}
+        />
+      </div>
+
+      <div className="h-5" />
+
+      {notificationChannels.length === 0 || isLoading ? (
+        <div className="flex min-h-[200px] w-full items-center justify-center rounded-lg border border-border">
+          {isLoading ? <Spinner className="size-8" /> : "No alerts set up yet."}
+        </div>
+      ) : (
+        <EngineAlertsTableUI
+          engineId={engineId}
+          alertRules={props.alertRules}
+          notificationChannels={notificationChannels}
+          onAlertsUpdated={props.onAlertsUpdated}
+          deleteAlert={deleteAlert}
+        />
+      )}
+    </section>
+  );
+}
+
+function EngineAlertsTableUI(props: {
+  engineId: string;
+  alertRules: EngineAlertRule[];
+  notificationChannels: EngineNotificationChannel[];
+  onAlertsUpdated: () => void;
+  deleteAlert: (notificationChannelId: string) => Promise<void>;
+}) {
+  return (
+    <TableContainer>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Status</TableHead>
+            <TableHead>Alert Rule</TableHead>
+            <TableHead>Notification Type</TableHead>
+            <TableHead>Created At</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {props.notificationChannels.map((notificationChannel) => {
+            const isPaused = notificationChannel.pausedAt !== null;
+
+            return (
+              <TableRow key={notificationChannel.id}>
+                <TableCell>
+                  <Badge
+                    variant={isPaused ? "warning" : "default"}
+                    className="text-sm"
+                  >
+                    {isPaused ? "Paused" : "Active"}
+                  </Badge>
+                </TableCell>
+
+                <TableCell>
+                  {getMatchingAlertRules(
+                    notificationChannel.subscriptionRoutes,
+                    props.alertRules,
+                  ).map((alertRule) => (
+                    <p key={alertRule.routingKey}>{alertRule.title}</p>
+                  ))}
+                </TableCell>
+
+                <TableCell>
+                  <Badge variant="outline" className="text-sm capitalize">
+                    {notificationChannel.type}
+                  </Badge>
+
+                  <CopyTextButton
+                    textToCopy={notificationChannel.value}
+                    textToShow={truncateValue(notificationChannel.value)}
+                    copyIconPosition="left"
+                    tooltip="Copy"
+                    variant="ghost"
+                    iconClassName="size-3"
+                    className="-translate-x-2 max-w-[250px] text-muted-foreground"
+                  />
+                </TableCell>
+
+                <TableCell className="text-muted-foreground">
+                  {formatDate(
+                    new Date(notificationChannel.createdAt),
+                    "MMM dd, yyyy",
+                  )}
+                </TableCell>
+
+                <TableCell className="text-muted-foreground">
+                  <AlertOptionsButton
+                    alertRules={props.alertRules}
+                    engineId={props.engineId}
+                    notificationChannel={notificationChannel}
+                    onDeleteSuccess={props.onAlertsUpdated}
+                    deleteAlert={props.deleteAlert}
+                  />
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+function CreateAlertButton(props: {
+  engineId: string;
+  alertRules: EngineAlertRule[];
+  onSuccess: () => void;
+  createAlertMutation: CreateAlertMutation;
+}) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { createAlertMutation } = props;
+
+  return (
+    <>
+      <ToolTipLabel
+        label={
+          props.alertRules.length === 0
+            ? "This feature is only available for managed Engines running v2.0.10 or later."
+            : undefined
+        }
+      >
+        <Button
+          onClick={() => {
+            setIsModalOpen(true);
+          }}
+          className="gap-2"
+          disabled={props.alertRules.length === 0}
+        >
+          <PlusIcon className="size-4" />
+          Add Alert
+        </Button>
+      </ToolTipLabel>
+
+      <EngineAlertDialogForm
+        alertRules={props.alertRules}
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        title="Add Alert"
+        submitButton={{
+          label: "Add Alert",
+          isLoading: createAlertMutation.isPending,
+          onSubmit: (values) => {
+            const addPromise = createAlertMutation.mutateAsync(values);
+
+            toast.promise(addPromise, {
+              success: "Alert added successfully",
+              error: "Failed to add alert",
+            });
+
+            addPromise.then(() => {
+              setIsModalOpen(false);
+              props.onSuccess();
+            });
+          },
+        }}
+        values={null}
+      />
+    </>
+  );
+}
+
+function AlertOptionsButton(props: {
+  alertRules: EngineAlertRule[];
+  engineId: string;
+  notificationChannel: EngineNotificationChannel;
+  onDeleteSuccess: () => void;
+  deleteAlert: (notificationChannelId: string) => Promise<void>;
+}) {
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const deleteMutation = useMutation({
+    mutationFn: props.deleteAlert,
+  });
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button size="icon" variant="ghost">
+            <EllipsisVerticalIcon className="size-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="min-w-36">
+          <DropdownMenuItem
+            className="hover:!bg-destructive text-destructive-text"
+            onClick={() => {
+              setIsDeleteModalOpen(true);
+            }}
+          >
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <EngineDeleteAlertModal
+        isPending={deleteMutation.isPending}
+        onConfirm={() => {
+          const deletePromise = deleteMutation.mutateAsync(
+            props.notificationChannel.id,
+          );
+
+          toast.promise(deletePromise, {
+            success: "Alert Deleted Successfully",
+            error: "Failed To Delete Alert",
+          });
+          deletePromise.then(() => {
+            setIsDeleteModalOpen(false);
+            props.onDeleteSuccess();
+          });
+        }}
+        open={isDeleteModalOpen}
+        onOpenChange={setIsDeleteModalOpen}
+      />
+    </>
+  );
+}
+
+const getMatchingAlertRules = (
+  subscriptionRoutes: string[],
+  alertRules: EngineAlertRule[],
+): EngineAlertRule[] => {
+  const results: EngineAlertRule[] = [];
+
+  for (const alertRule of alertRules) {
+    for (const subscriptionRoute of subscriptionRoutes) {
+      if (isRoutingKeyMatch(subscriptionRoute, alertRule.routingKey)) {
+        results.push(alertRule);
+        break;
+      }
+    }
+  }
+
+  return results;
+};
+
+/**
+ * Check if routingKey matches subscriptionRoute.
+ *
+ * Example: exact match
+ *  `alert.stuck-nonce` matches `alert.stuck-nonce`
+ *
+ * Example: wildcard
+ *  `alert.*` matches `alert.stuck-nonce`
+ */
+const isRoutingKeyMatch = (
+  subscriptionRoute: string,
+  alertRoutingKey: string,
+): boolean => {
+  if (!subscriptionRoute.includes("*")) {
+    // Check exact match if no wildcard.
+    return subscriptionRoute === alertRoutingKey;
+  }
+
+  const [prefix, suffix] = subscriptionRoute.split("*");
+  if (prefix && !subscriptionRoute.startsWith(prefix)) return false;
+  if (suffix && !subscriptionRoute.endsWith(suffix)) return false;
+
+  return true;
+};
+
+const truncateValue = (str: string): string => {
+  if (str.length <= 16) return str;
+  return `${str.slice(0, 12)}...${str.slice(-4)}`;
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx
new file mode 100644
index 00000000000..ef81dfac92c
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  createEngineAlertRuleStub,
+  createEngineAlertStub,
+} from "stories/stubs";
+import { BadgeContainer } from "stories/utils";
+import { RecentEngineAlertsSectionUI } from "./RecentEngineAlerts";
+
+const meta = {
+  title: "Engine/Alerts/Recent Alerts",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-6xl flex-col gap-14 py-10">
+      <BadgeContainer label="3 Alerts">
+        <RecentEngineAlertsSectionUI
+          isLoading={false}
+          onAlertsUpdated={() => {}}
+          alertRules={[createEngineAlertRuleStub("foo")]}
+          alerts={[
+            createEngineAlertStub("foo"),
+            createEngineAlertStub("foo", {
+              status: "firing",
+            }),
+            createEngineAlertStub("foo", {
+              status: "resolved",
+            }),
+          ]}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="No Alerts">
+        <RecentEngineAlertsSectionUI
+          isLoading={false}
+          alertRules={[]}
+          alerts={[]}
+          onAlertsUpdated={() => {}}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Loading">
+        <RecentEngineAlertsSectionUI
+          isLoading={true}
+          alertRules={[]}
+          alerts={[]}
+          onAlertsUpdated={() => {}}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
new file mode 100644
index 00000000000..30a9d0495c1
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge, type BadgeProps } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  type EngineAlert,
+  type EngineAlertRule,
+  useEngineAlerts,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { formatDistance } from "date-fns";
+import { useMemo } from "react";
+
+export function RecentEngineAlertsSection(props: {
+  alertRules: EngineAlertRule[];
+  alertRulesIsLoading: boolean;
+  engineId: string;
+  teamIdOrSlug: string;
+}) {
+  // TODO - pagination
+  // required : return the total number of alerts in response from API
+  const alertsQuery = useEngineAlerts(
+    props.engineId,
+    props.teamIdOrSlug,
+    100,
+    0,
+  );
+  const alerts = alertsQuery.data ?? [];
+
+  return (
+    <RecentEngineAlertsSectionUI
+      alertRules={props.alertRules}
+      alerts={alerts}
+      isLoading={alertsQuery.isLoading || props.alertRulesIsLoading}
+      onAlertsUpdated={() => {
+        alertsQuery.refetch();
+      }}
+    />
+  );
+}
+
+export function RecentEngineAlertsSectionUI(props: {
+  alertRules: EngineAlertRule[];
+  alerts: EngineAlert[];
+  isLoading: boolean;
+  onAlertsUpdated: () => void;
+}) {
+  const { alerts, isLoading } = props;
+  return (
+    <section>
+      <h2 className="mb-1 font-semibold text-2xl tracking-tight">
+        Recent Alerts
+      </h2>
+
+      <div className="h-2" />
+
+      {alerts.length === 0 || isLoading ? (
+        <div className="flex min-h-[200px] w-full items-center justify-center rounded-lg border border-border">
+          {isLoading ? <Spinner className="size-8" /> : "No alerts triggered."}
+        </div>
+      ) : (
+        <RecentEngineAlertsTableUI
+          alertRules={props.alertRules}
+          alerts={alerts}
+          onAlertsUpdated={props.onAlertsUpdated}
+        />
+      )}
+    </section>
+  );
+}
+
+function RecentEngineAlertsTableUI(props: {
+  alertRules: EngineAlertRule[];
+  alerts: EngineAlert[];
+  onAlertsUpdated: () => void;
+}) {
+  const alertRulesMap = useMemo(() => {
+    const map: Record<string, EngineAlertRule> = {};
+    for (const alertRule of props.alertRules) {
+      map[alertRule.id] = alertRule;
+    }
+    return map;
+  }, [props.alertRules]);
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Alert Trigger</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Timestamp</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {props.alerts.map((alert) => {
+            let variant: BadgeProps["variant"];
+            let status: string;
+            if (alert.status === "pending") {
+              variant = "warning";
+              status = "Pending";
+            } else if (alert.status === "firing") {
+              variant = "destructive";
+              status = "Triggered";
+            } else if (alert.status === "resolved") {
+              variant = "success";
+              status = "Resolved";
+            } else {
+              return null;
+            }
+
+            return (
+              <TableRow key={alert.id}>
+                <TableCell>{alertRulesMap[alert.alertRuleId]?.title}</TableCell>
+
+                <TableCell>
+                  <Badge variant={variant} className="text-sm">
+                    {status}
+                  </Badge>
+                </TableCell>
+
+                <TableCell className="text-muted-foreground">
+                  {formatDistance(
+                    new Date(alert.endsAt ?? alert.startsAt),
+                    new Date(),
+                    { addSuffix: true },
+                  )}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/page.tsx
new file mode 100644
index 00000000000..0a0329ac19a
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/page.tsx
@@ -0,0 +1,15 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { EngineAlertsPage } from "./components/EngineAlertsPage";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return (
+    <EngineAlertsPage instance={instance} teamIdOrSlug={params.team_slug} />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/circle-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/circle-config.tsx
new file mode 100644
index 00000000000..5e5b4f7df2d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/circle-config.tsx
@@ -0,0 +1,129 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { Form } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import {
+  type EngineInstance,
+  type SetWalletConfigInput,
+  useEngineSetWalletConfig,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+interface CircleConfigProps {
+  instance: EngineInstance;
+  authToken: string;
+}
+
+export const CircleConfig: React.FC<CircleConfigProps> = ({
+  instance,
+  authToken,
+}) => {
+  const { mutate: setCircleConfig, isPending } = useEngineSetWalletConfig({
+    instanceUrl: instance.url,
+    authToken,
+  });
+  const trackEvent = useTrack();
+
+  const defaultValues: SetWalletConfigInput = {
+    type: "circle" as const,
+    circleApiKey: "",
+  };
+
+  const form = useForm<SetWalletConfigInput>({
+    defaultValues,
+    values: defaultValues,
+    resetOptions: {
+      keepDirty: true,
+      keepDirtyValues: true,
+    },
+  });
+
+  const onSubmit = (data: SetWalletConfigInput) => {
+    setCircleConfig(data, {
+      onSuccess: () => {
+        toast.success("Configuration set successfully");
+        trackEvent({
+          category: "engine",
+          action: "set-wallet-config",
+          type: "circle",
+          label: "success",
+        });
+      },
+      onError: (error) => {
+        toast.error("Failed to set configuration", {
+          description: error.message,
+        });
+        trackEvent({
+          category: "engine",
+          action: "set-wallet-config",
+          type: "circle",
+          label: "error",
+          error,
+        });
+      },
+    });
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <p className="text-muted-foreground">
+          Circle wallets require an API Key from your Circle account with
+          sufficient permissions. Created wallets are stored in your AWS
+          account. Configure your Circle API Key to use Circle wallets. Learn
+          more about{" "}
+          <TrackedLinkTW
+            href="https://portal.thirdweb.com/engine/features/backend-wallets#circle-wallet"
+            target="_blank"
+            label="learn-more"
+            category="engine"
+            className="text-link-foreground hover:text-foreground"
+          >
+            how to get an API Key
+          </TrackedLinkTW>
+          .
+        </p>
+      </div>
+
+      <Form {...form}>
+        <form
+          className="flex flex-col gap-4"
+          onSubmit={form.handleSubmit(onSubmit)}
+        >
+          <FormFieldSetup
+            label="Circle API Key"
+            errorMessage={
+              form.getFieldState("circleApiKey", form.formState).error?.message
+            }
+            htmlFor="circle-api-key"
+            isRequired
+            tooltip={null}
+          >
+            <Input
+              id="circle-api-key"
+              placeholder="TEST_API_KEY:..."
+              autoComplete="off"
+              type="password"
+              {...form.register("circleApiKey")}
+            />
+          </FormFieldSetup>
+
+          <div className="flex items-center justify-end gap-4">
+            <Button
+              type="submit"
+              className="min-w-28 gap-2"
+              disabled={isPending}
+            >
+              {isPending && <Spinner className="size-4" />}
+              Save
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/cors.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/cors.tsx
new file mode 100644
index 00000000000..8aa3e324240
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/cors.tsx
@@ -0,0 +1,105 @@
+import { InlineCode } from "@/components/ui/inline-code";
+import {
+  useEngineCorsConfiguration,
+  useEngineSetCorsConfiguration,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { Flex, Textarea } from "@chakra-ui/react";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { useForm } from "react-hook-form";
+import { Button, Heading, Text } from "tw-components";
+
+interface EngineCorsConfigProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+interface CorsForm {
+  raw: string;
+}
+
+export const EngineCorsConfig: React.FC<EngineCorsConfigProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const { data: existingUrls } = useEngineCorsConfiguration({
+    instanceUrl,
+    authToken,
+  });
+  const { mutateAsync: setCorsConfig } = useEngineSetCorsConfiguration({
+    instanceUrl,
+    authToken,
+  });
+
+  const { onSuccess, onError } = useTxNotifications(
+    "CORS URLs updated successfully.",
+    "Failed to update CORS URLs.",
+  );
+
+  const form = useForm<CorsForm>({
+    values: { raw: existingUrls?.join("\n") ?? "" },
+  });
+
+  const onSubmit = async (data: CorsForm) => {
+    try {
+      const urls = data.raw.split(/[\n,]/).filter((url) => !!url);
+      // Assert all URLs are well formed and strip the path.
+      const sanitized = urls.map(parseOriginFromUrl);
+
+      await setCorsConfig({ urls: sanitized });
+      onSuccess();
+    } catch (error) {
+      onError(error);
+    }
+  };
+
+  return (
+    <Flex
+      as="form"
+      flexDir="column"
+      gap={4}
+      onSubmit={form.handleSubmit(onSubmit)}
+    >
+      <Flex flexDir="column" gap={2}>
+        <Heading size="title.md">Allowlisted Domains</Heading>
+        <Text>
+          Specify the origins that can call Engine (
+          <InlineCode code="https://example.com" />
+          ).
+          <br />
+          Enter one origin per line, or leave this list empty to disallow calls
+          from web clients.
+        </Text>
+      </Flex>
+
+      <Textarea
+        placeholder={"https://example.com\nhttp://localhost:3000"}
+        rows={4}
+        {...form.register("raw")}
+      />
+
+      <Flex justifyContent="end" gap={4} alignItems="center">
+        <Button
+          isDisabled={!form.formState.isDirty}
+          colorScheme="primary"
+          w={{ base: "full", md: "inherit" }}
+          px={12}
+          type="submit"
+        >
+          {form.formState.isSubmitting ? "Saving..." : "Save"}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
+
+const parseOriginFromUrl = (url: string) => {
+  try {
+    const { protocol, origin } = new URL(url);
+    if (!(protocol === "http:" || protocol === "https:")) {
+      throw new Error("Missing or invalid protocol");
+    }
+    return origin;
+  } catch {
+    throw new Error(`Invalid URL: "${url}"`);
+  }
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-configuration.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-configuration.tsx
new file mode 100644
index 00000000000..8c64552a3be
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-configuration.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
+import { EngineCorsConfig } from "./cors";
+import { EngineWalletConfig } from "./engine-wallet-config";
+import { EngineIpAllowlistConfig } from "./ip-allowlist";
+import { EngineSystem } from "./system";
+
+interface EngineConfigurationProps {
+  instance: EngineInstance;
+  teamSlug: string;
+  authToken: string;
+}
+
+export const EngineConfiguration: React.FC<EngineConfigurationProps> = ({
+  instance,
+  teamSlug,
+  authToken,
+}) => {
+  return (
+    <div className="flex flex-col gap-12">
+      <EngineWalletConfig
+        instance={instance}
+        teamSlug={teamSlug}
+        authToken={authToken}
+      />
+      <EngineCorsConfig instanceUrl={instance.url} authToken={authToken} />
+      <EngineIpAllowlistConfig
+        instanceUrl={instance.url}
+        authToken={authToken}
+      />
+      <EngineSystem instance={instance} teamIdOrSlug={teamSlug} />
+    </div>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
new file mode 100644
index 00000000000..8bb3431cf02
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
@@ -0,0 +1,117 @@
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { TabButtons } from "@/components/ui/tabs";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import {
+  type EngineInstance,
+  useEngineWalletConfig,
+  useHasEngineFeature,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  EngineBackendWalletOptions,
+  type EngineBackendWalletType,
+} from "lib/engine";
+import { CircleAlertIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { Heading } from "tw-components";
+import { CircleConfig } from "./circle-config";
+import { KmsAwsConfig } from "./kms-aws-config";
+import { KmsGcpConfig } from "./kms-gcp-config";
+import { LocalConfig } from "./local-config";
+
+interface EngineWalletConfigProps {
+  instance: EngineInstance;
+  teamSlug: string;
+  authToken: string;
+}
+
+export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
+  instance,
+  teamSlug,
+  authToken,
+}) => {
+  const { data: walletConfig } = useEngineWalletConfig({
+    instanceUrl: instance.url,
+    authToken,
+  });
+
+  const { isSupported: isWalletCredentialsSupported } = useHasEngineFeature(
+    instance.url,
+    "WALLET_CREDENTIALS",
+  );
+
+  const filteredWalletOptions = EngineBackendWalletOptions.filter(
+    ({ key }) =>
+      // circle wallets were only added with the WALLET_CREDENTIALS feature flag
+      (key !== "circle" || isWalletCredentialsSupported) &&
+      // smart wallets don't need separate configuration
+      !key.startsWith("smart:"),
+  );
+
+  const tabContent: Partial<Record<EngineBackendWalletType, React.ReactNode>> =
+    {
+      local: <LocalConfig />,
+      "aws-kms": <KmsAwsConfig instance={instance} authToken={authToken} />,
+      "gcp-kms": <KmsGcpConfig instance={instance} authToken={authToken} />,
+      // circle wallets were only added with the WALLET_CREDENTIALS feature flag
+      ...(isWalletCredentialsSupported && {
+        circle: <CircleConfig instance={instance} authToken={authToken} />,
+      }),
+    } as const;
+
+  const [activeTab, setActiveTab] = useState<EngineBackendWalletType>("local");
+
+  const isAwsKmsConfigured = !!walletConfig?.awsAccessKeyId;
+  const isGcpKmsConfigured = !!walletConfig?.gcpKmsKeyRingId;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Heading size="title.md">Backend Wallets</Heading>
+        <p className="text-muted-foreground">
+          Create backend wallets on the{" "}
+          <Link
+            href={`/team/${teamSlug}/~/engine/${instance.id}`}
+            className="text-link-foreground hover:text-foreground"
+          >
+            Overview
+          </Link>{" "}
+          tab. To use other wallet types, configure them below.
+        </p>
+      </div>
+
+      <TabButtons
+        tabs={filteredWalletOptions.map(({ key, name }) => ({
+          key,
+          name,
+          isActive: activeTab === key,
+          onClick: () => setActiveTab(key),
+          icon:
+            (key === "aws-kms" && !isAwsKmsConfigured) ||
+            (key === "gcp-kms" && !isGcpKmsConfigured)
+              ? ({ className }) => (
+                  <ToolTipLabel label="Not configured">
+                    <CircleAlertIcon className={cn(className, "size-4")} />
+                  </ToolTipLabel>
+                )
+              : undefined,
+        }))}
+        tabClassName="font-medium !text-sm"
+      />
+
+      {!isWalletCredentialsSupported && activeTab === "circle" && (
+        <Alert variant="warning" className="mt-4">
+          <CircleAlertIcon className="size-4" />
+          <AlertTitle>Update Required</AlertTitle>
+          <AlertDescription>
+            Circle wallet support requires a newer version of Engine. Please
+            update your Engine instance to use this feature.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {tabContent[activeTab]}
+    </div>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/ip-allowlist.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
new file mode 100644
index 00000000000..33b6086ea54
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
@@ -0,0 +1,112 @@
+import { InlineCode } from "@/components/ui/inline-code";
+import {
+  useEngineIpAllowlistConfiguration,
+  useEngineSetIpAllowlistConfiguration,
+  useHasEngineFeature,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { Flex, Textarea } from "@chakra-ui/react";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { isValid } from "ipaddr.js";
+import { useForm } from "react-hook-form";
+import { Button, Heading, Text } from "tw-components";
+
+interface EngineIpAllowlistConfigProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+interface IpForm {
+  raw: string;
+}
+
+export const EngineIpAllowlistConfig: React.FC<
+  EngineIpAllowlistConfigProps
+> = ({ instanceUrl, authToken }) => {
+  const { data: existingIpAllowlist } = useEngineIpAllowlistConfiguration({
+    instanceUrl,
+    authToken,
+  });
+  const { mutateAsync: setIpAllowlist } = useEngineSetIpAllowlistConfiguration({
+    instanceUrl,
+    authToken,
+  });
+
+  const { onSuccess, onError } = useTxNotifications(
+    "IP Allowlist updated successfully.",
+    "Failed to update IP Allowlist",
+  );
+  const { isSupported } = useHasEngineFeature(instanceUrl, "IP_ALLOWLIST");
+
+  const form = useForm<IpForm>({
+    values: { raw: existingIpAllowlist?.join("\n") ?? "" },
+  });
+
+  const onSubmit = async (data: IpForm) => {
+    try {
+      const ips = data.raw
+        .split(/[\n,]/)
+        .filter((url) => !!url)
+        .map((ip) => ip.trim());
+
+      // Check if all IPs are well formed.
+      const incorrectIp = ips.find((ip) => !isValid(ip));
+
+      if (incorrectIp) {
+        throw new Error(`Invalid IP Address: ${incorrectIp}`);
+      }
+
+      await setIpAllowlist({ ips });
+      form.reset({
+        raw: ips.join("\n"),
+      });
+      onSuccess();
+    } catch (error) {
+      onError(error);
+    }
+  };
+
+  if (!isSupported) {
+    return null;
+  }
+
+  return (
+    <Flex
+      as="form"
+      flexDir="column"
+      gap={4}
+      onSubmit={form.handleSubmit(onSubmit)}
+    >
+      <Flex flexDir="column" gap={2}>
+        <Heading size="title.md">Allowlist IPs</Heading>
+        <Text>
+          Specify the IP Addresses that can call Engine (
+          <InlineCode code="8.8.8.8" />
+          ).
+          <br />
+          Enter a comma separated list of IPs, or one IP per line, or leave this
+          list empty to allow all IPs.
+          <br />
+          This does not affect Dashboard calls to Engine.
+        </Text>
+      </Flex>
+
+      <Textarea
+        placeholder={"8.8.8.8\nff06:0:0:0:0:0:0:c3"}
+        rows={4}
+        {...form.register("raw")}
+      />
+
+      <Flex justifyContent="end" gap={4} alignItems="center">
+        <Button
+          isDisabled={!form.formState.isDirty}
+          colorScheme="primary"
+          w={{ base: "full", md: "inherit" }}
+          px={12}
+          type="submit"
+        >
+          {form.formState.isSubmitting ? "Saving..." : "Save"}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-aws-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
new file mode 100644
index 00000000000..3c13c819752
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
@@ -0,0 +1,185 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { Form, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import {
+  type EngineInstance,
+  type SetWalletConfigInput,
+  useEngineSetWalletConfig,
+  useEngineWalletConfig,
+  useHasEngineFeature,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { useForm } from "react-hook-form";
+
+interface KmsAwsConfigProps {
+  instance: EngineInstance;
+  authToken: string;
+}
+
+export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({
+  instance,
+  authToken,
+}) => {
+  const { mutate: setAwsKmsConfig, isPending } = useEngineSetWalletConfig({
+    instanceUrl: instance.url,
+    authToken,
+  });
+  const { data: awsConfig } = useEngineWalletConfig({
+    instanceUrl: instance.url,
+    authToken,
+  });
+  const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
+    instance.url,
+    "HETEROGENEOUS_WALLET_TYPES",
+  );
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Configuration set successfully.",
+    "Failed to set configuration.",
+  );
+
+  const defaultValues: SetWalletConfigInput = {
+    type: "aws-kms" as const,
+    awsAccessKeyId: awsConfig?.awsAccessKeyId ?? "",
+    awsSecretAccessKey: "",
+    awsRegion: awsConfig?.awsRegion ?? "",
+  };
+
+  const form = useForm<SetWalletConfigInput>({
+    defaultValues,
+    values: defaultValues,
+    resetOptions: {
+      keepDirty: true,
+      keepDirtyValues: true,
+    },
+  });
+
+  const onSubmit = (data: SetWalletConfigInput) => {
+    setAwsKmsConfig(data, {
+      onSuccess: () => {
+        onSuccess();
+        trackEvent({
+          category: "engine",
+          action: "set-wallet-config",
+          type: "aws-kms",
+          label: "success",
+        });
+      },
+      onError: (error) => {
+        onError(error);
+        trackEvent({
+          category: "engine",
+          action: "set-wallet-config",
+          type: "aws-kms",
+          label: "error",
+          error,
+        });
+      },
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <p className="text-muted-foreground">
+          AWS KMS wallets require credentials from your Amazon Web Services
+          account with sufficient permissions to manage KMS keys. Wallets are
+          stored in KMS keys on your AWS account.
+        </p>
+        <p className="text-muted-foreground">
+          For help and more advanced use cases,{" "}
+          <TrackedLinkTW
+            target="_blank"
+            href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
+            label="learn-more"
+            category="engine"
+            className="text-link-foreground hover:text-foreground"
+          >
+            learn more about using AWS KMS wallets
+          </TrackedLinkTW>
+          .
+        </p>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <FormFieldSetup
+            label="Region"
+            errorMessage={
+              form.getFieldState("awsRegion", form.formState).error?.message
+            }
+            htmlFor="aws-region"
+            isRequired
+            tooltip={null}
+          >
+            <Input
+              id="aws-region"
+              placeholder="us-west-2"
+              autoComplete="off"
+              type="text"
+              {...form.register("awsRegion")}
+            />
+          </FormFieldSetup>
+
+          <FormFieldSetup
+            label="Access Key"
+            errorMessage={
+              form.getFieldState("awsAccessKeyId", form.formState).error
+                ?.message
+            }
+            htmlFor="aws-access-key"
+            isRequired
+            tooltip={null}
+          >
+            <Input
+              id="aws-access-key"
+              placeholder="AKIA..."
+              autoComplete="off"
+              type="text"
+              {...form.register("awsAccessKeyId")}
+            />
+          </FormFieldSetup>
+
+          <FormFieldSetup
+            label="Secret Key"
+            errorMessage={
+              form.getFieldState("awsSecretAccessKey", form.formState).error
+                ?.message
+            }
+            htmlFor="aws-secret-key"
+            isRequired
+            tooltip={null}
+          >
+            <Input
+              id="aws-secret-key"
+              placeholder="UW7A..."
+              autoComplete="off"
+              type="text"
+              {...form.register("awsSecretAccessKey")}
+            />
+            <FormDescription className="pt-2">
+              This will not be shown again.
+            </FormDescription>
+          </FormFieldSetup>
+        </div>
+
+        <div className="flex items-center justify-end gap-4">
+          {!supportsMultipleWalletTypes && (
+            <p className="text-destructive-text text-sm">
+              This will clear other credentials.
+            </p>
+          )}
+          <Button type="submit" className="min-w-28 gap-2" disabled={isPending}>
+            {isPending && <Spinner className="size-4" />}
+            Save
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
new file mode 100644
index 00000000000..a4411320217
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
@@ -0,0 +1,232 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { Form, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import {
+  type EngineInstance,
+  type SetWalletConfigInput,
+  useEngineSetWalletConfig,
+  useEngineWalletConfig,
+  useHasEngineFeature,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { useForm } from "react-hook-form";
+
+interface KmsGcpConfigProps {
+  instance: EngineInstance;
+  authToken: string;
+}
+
+export const KmsGcpConfig: React.FC<KmsGcpConfigProps> = ({
+  instance,
+  authToken,
+}) => {
+  const { mutate: setGcpKmsConfig, isPending } = useEngineSetWalletConfig({
+    instanceUrl: instance.url,
+    authToken,
+  });
+  const { data: gcpConfig } = useEngineWalletConfig({
+    instanceUrl: instance.url,
+    authToken,
+  });
+  const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
+    instance.url,
+    "HETEROGENEOUS_WALLET_TYPES",
+  );
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Configuration set successfully.",
+    "Failed to set configuration.",
+  );
+
+  const defaultValues: SetWalletConfigInput = {
+    type: "gcp-kms" as const,
+    gcpApplicationProjectId: gcpConfig?.gcpApplicationProjectId ?? "",
+    gcpKmsLocationId: gcpConfig?.gcpKmsLocationId ?? "",
+    gcpKmsKeyRingId: gcpConfig?.gcpKmsKeyRingId ?? "",
+    gcpApplicationCredentialEmail:
+      gcpConfig?.gcpApplicationCredentialEmail ?? "",
+    gcpApplicationCredentialPrivateKey: "",
+  };
+
+  const form = useForm<SetWalletConfigInput>({
+    defaultValues,
+    values: defaultValues,
+    resetOptions: {
+      keepDirty: true,
+      keepDirtyValues: true,
+    },
+  });
+
+  const onSubmit = (data: SetWalletConfigInput) => {
+    setGcpKmsConfig(data, {
+      onSuccess: () => {
+        onSuccess();
+        trackEvent({
+          category: "engine",
+          action: "set-wallet-config",
+          type: "gcp-kms",
+          label: "success",
+        });
+      },
+      onError: (error) => {
+        onError(error);
+        trackEvent({
+          category: "engine",
+          action: "set-wallet-config",
+          type: "gcp-kms",
+          label: "error",
+          error,
+        });
+      },
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <p className="text-muted-foreground">
+          GCP KMS wallets require credentials from your Google Cloud Platform
+          account with sufficient permissions to manage KMS keys. Wallets are
+          stored in KMS keys on your GCP account.
+        </p>
+        <p className="text-muted-foreground">
+          For help and more advanced use cases,{" "}
+          <TrackedLinkTW
+            target="_blank"
+            href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
+            label="learn-more"
+            category="engine"
+            className="text-link-foreground hover:text-foreground"
+          >
+            learn more about using Google Cloud KMS wallets
+          </TrackedLinkTW>
+          .
+        </p>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <FormFieldSetup
+            label="Location ID"
+            errorMessage={
+              form.getFieldState("gcpKmsLocationId", form.formState).error
+                ?.message
+            }
+            htmlFor="gcp-location-id"
+            isRequired
+            tooltip={null}
+          >
+            <Input
+              id="gcp-location-id"
+              placeholder="us-west2"
+              type="text"
+              {...form.register("gcpKmsLocationId")}
+            />
+          </FormFieldSetup>
+
+          <FormFieldSetup
+            label="Key Ring ID"
+            errorMessage={
+              form.getFieldState("gcpKmsKeyRingId", form.formState).error
+                ?.message
+            }
+            htmlFor="gcp-key-ring-id"
+            isRequired
+            tooltip={null}
+          >
+            <Input
+              id="gcp-key-ring-id"
+              placeholder="my-key-ring"
+              autoComplete="off"
+              type="text"
+              {...form.register("gcpKmsKeyRingId")}
+            />
+          </FormFieldSetup>
+
+          <FormFieldSetup
+            label="Project ID"
+            errorMessage={
+              form.getFieldState("gcpApplicationProjectId", form.formState)
+                .error?.message
+            }
+            htmlFor="gcp-project-id"
+            isRequired
+            tooltip={null}
+          >
+            <Input
+              id="gcp-project-id"
+              type="text"
+              placeholder="my-gcp-project-id-123"
+              autoComplete="off"
+              {...form.register("gcpApplicationProjectId")}
+            />
+          </FormFieldSetup>
+
+          <FormFieldSetup
+            label="Credential Email"
+            errorMessage={
+              form.getFieldState(
+                "gcpApplicationCredentialEmail",
+                form.formState,
+              ).error?.message
+            }
+            htmlFor="gcp-credential-email"
+            isRequired
+            tooltip={null}
+          >
+            <Input
+              id="gcp-credential-email"
+              type="text"
+              placeholder="service-account@my-gcp-project.iam.gserviceaccount.com"
+              autoComplete="off"
+              {...form.register("gcpApplicationCredentialEmail")}
+            />
+          </FormFieldSetup>
+        </div>
+
+        <FormFieldSetup
+          label="Private Key"
+          errorMessage={
+            form.getFieldState(
+              "gcpApplicationCredentialPrivateKey",
+              form.formState,
+            ).error?.message
+          }
+          htmlFor="gcp-private-key"
+          isRequired
+          tooltip={null}
+        >
+          <Textarea
+            id="gcp-private-key"
+            placeholder={
+              "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----"
+            }
+            autoComplete="off"
+            {...form.register("gcpApplicationCredentialPrivateKey")}
+          />
+          <FormDescription className="pt-2">
+            This will not be shown again.
+          </FormDescription>
+        </FormFieldSetup>
+
+        <div className="flex items-center justify-end gap-4">
+          {!supportsMultipleWalletTypes && (
+            <p className="text-destructive-text text-sm">
+              This will clear other credentials.
+            </p>
+          )}
+          <Button type="submit" className="min-w-28 gap-2" disabled={isPending}>
+            {isPending && <Spinner className="size-4" />}
+            Save
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/local-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/local-config.tsx
new file mode 100644
index 00000000000..2102e019e2d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/local-config.tsx
@@ -0,0 +1,10 @@
+export const LocalConfig: React.FC = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-muted-foreground">
+        Local wallets are natively supported with no configuration required.
+        Wallets are stored encrypted in Engine's database.
+      </p>
+    </div>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/system.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/system.tsx
new file mode 100644
index 00000000000..b348ce335ac
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/system.tsx
@@ -0,0 +1,33 @@
+import {
+  type EngineInstance,
+  useEngineSystemHealth,
+  useEngineSystemMetrics,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+
+interface EngineSystemProps {
+  instance: EngineInstance;
+  teamIdOrSlug: string;
+}
+
+export const EngineSystem: React.FC<EngineSystemProps> = ({
+  instance,
+  teamIdOrSlug,
+}) => {
+  const healthQuery = useEngineSystemHealth(instance.url);
+  const metricsQuery = useEngineSystemMetrics(instance.id, teamIdOrSlug);
+  if (!healthQuery.data) {
+    return null;
+  }
+
+  return (
+    <p className="gap-0 font-mono text-xs opacity-50">
+      Version: {healthQuery.data.engineVersion ?? "..."}
+      <br />
+      Enabled: {healthQuery.data.features?.join(", ")}
+      <br />
+      CPU: {metricsQuery.data?.result?.cpu?.toFixed(2) ?? "..."}%
+      <br />
+      Memory: {metricsQuery.data?.result?.memory?.toFixed(0) ?? "..."}MB
+    </p>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/page.tsx
new file mode 100644
index 00000000000..4480cb06e27
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/page.tsx
@@ -0,0 +1,19 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { EngineConfiguration } from "./components/engine-configuration";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return (
+    <EngineConfiguration
+      instance={instance}
+      teamSlug={params.team_slug}
+      authToken={authToken}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
new file mode 100644
index 00000000000..690affcdb62
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
@@ -0,0 +1,566 @@
+"use client";
+
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import {
+  type AddContractSubscriptionInput,
+  useEngineAddContractSubscription,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContractAbi";
+import {
+  Collapse,
+  Flex,
+  FormControl,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Radio,
+  RadioGroup,
+  Spinner,
+  type UseDisclosureReturn,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { useV5DashboardChain } from "lib/v5-adapter";
+import { CirclePlusIcon } from "lucide-react";
+import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
+import { type UseFormReturn, useForm } from "react-hook-form";
+import { getContract, isAddress } from "thirdweb";
+import {
+  Button,
+  Card,
+  FormErrorMessage,
+  FormHelperText,
+  FormLabel,
+  Text,
+} from "tw-components";
+
+interface AddContractSubscriptionButtonProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const AddContractSubscriptionButton: React.FC<
+  AddContractSubscriptionButtonProps
+> = ({ instanceUrl, authToken }) => {
+  const disclosure = useDisclosure();
+
+  return (
+    <>
+      <Button
+        onClick={disclosure.onOpen}
+        variant="ghost"
+        size="sm"
+        leftIcon={<CirclePlusIcon className="size-6" />}
+        colorScheme="primary"
+        w="fit-content"
+      >
+        Add Contract Subscription
+      </Button>
+
+      {disclosure.isOpen && (
+        <AddModal
+          instanceUrl={instanceUrl}
+          disclosure={disclosure}
+          authToken={authToken}
+        />
+      )}
+    </>
+  );
+};
+
+interface AddContractSubscriptionForm {
+  chainId: number;
+  contractAddress: string;
+  webhookUrl: string;
+  processEventLogs: boolean;
+  filterEvents: string[];
+  processTransactionReceipts: boolean;
+  filterFunctions: string[];
+}
+
+const AddModal = ({
+  instanceUrl,
+  disclosure,
+  authToken,
+}: {
+  instanceUrl: string;
+  disclosure: UseDisclosureReturn;
+  authToken: string;
+}) => {
+  const { mutate: addContractSubscription } = useEngineAddContractSubscription({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Created Contract Subscription.",
+    "Failed to create Contract Subscription.",
+  );
+  const [modalState, setModalState] = useState<"inputContract" | "inputData">(
+    "inputContract",
+  );
+
+  const form = useForm<AddContractSubscriptionForm>({
+    defaultValues: {
+      chainId: 84532,
+      processEventLogs: true,
+      filterEvents: [],
+      processTransactionReceipts: false,
+      filterFunctions: [],
+    },
+    mode: "onChange",
+  });
+
+  const onSubmit = (data: AddContractSubscriptionForm) => {
+    const input: AddContractSubscriptionInput = {
+      chain: data.chainId.toString(),
+      contractAddress: data.contractAddress,
+      webhookUrl: data.webhookUrl.trim(),
+      processEventLogs: data.processEventLogs,
+      filterEvents: data.filterEvents,
+      processTransactionReceipts: data.processTransactionReceipts,
+      filterFunctions: data.filterFunctions,
+    };
+
+    addContractSubscription(input, {
+      onSuccess: () => {
+        onSuccess();
+        disclosure.onClose();
+        trackEvent({
+          category: "engine",
+          action: "add-contract-subscription",
+          label: "success",
+          instance: instanceUrl,
+        });
+      },
+      onError: (error) => {
+        onError(error);
+        trackEvent({
+          category: "engine",
+          action: "add-contract-subscription",
+          label: "error",
+          instance: instanceUrl,
+          error,
+        });
+      },
+    });
+  };
+
+  return (
+    <Modal
+      isOpen={disclosure.isOpen}
+      onClose={disclosure.onClose}
+      isCentered
+      size="lg"
+    >
+      <ModalOverlay />
+      <ModalContent
+        className="!bg-background rounded-lg border border-border"
+        as="form"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <ModalHeader>Add Contract Subscription</ModalHeader>
+        <ModalCloseButton />
+
+        {modalState === "inputContract" ? (
+          <ModalBodyInputContract form={form} setModalState={setModalState} />
+        ) : modalState === "inputData" ? (
+          <ModalBodyInputData form={form} setModalState={setModalState} />
+        ) : null}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const ModalBodyInputContract = ({
+  form,
+  setModalState,
+}: {
+  form: UseFormReturn<AddContractSubscriptionForm>;
+  setModalState: Dispatch<SetStateAction<"inputContract" | "inputData">>;
+}) => {
+  const client = useThirdwebClient();
+  return (
+    <>
+      <ModalBody>
+        <div className="flex flex-col gap-4">
+          <Text>
+            Add a contract subscription to process real-time onchain data.
+          </Text>
+
+          <FormControl isRequired>
+            <FormLabel>Chain</FormLabel>
+            <SingleNetworkSelector
+              chainId={form.watch("chainId")}
+              onChange={(val) => form.setValue("chainId", val)}
+              client={client}
+            />
+          </FormControl>
+
+          <FormControl
+            isRequired
+            isInvalid={
+              !!form.getFieldState("contractAddress", form.formState).error
+            }
+          >
+            <FormLabel>Contract Address</FormLabel>
+            <Input
+              type="text"
+              placeholder="0x..."
+              {...form.register("contractAddress", {
+                required: true,
+                validate: (v) => {
+                  const isValid = isAddress(v);
+                  return !isValid ? "Invalid address" : true;
+                },
+              })}
+            />
+            <FormErrorMessage>
+              {
+                form.getFieldState("contractAddress", form.formState).error
+                  ?.message
+              }
+            </FormErrorMessage>
+          </FormControl>
+
+          <FormControl
+            isRequired
+            isInvalid={!!form.getFieldState("webhookUrl", form.formState).error}
+          >
+            <FormLabel>Webhook URL</FormLabel>
+            <Input
+              type="url"
+              placeholder="https://"
+              {...form.register("webhookUrl", {
+                required: true,
+                validate: (v) => {
+                  try {
+                    new URL(v);
+                    return true;
+                  } catch {
+                    return "Invalid URL";
+                  }
+                },
+              })}
+            />
+            <FormHelperText>
+              Engine sends an HTTP request to your backend when new onchain data
+              for this contract is detected.
+            </FormHelperText>
+            <FormErrorMessage>
+              {form.getFieldState("webhookUrl", form.formState).error?.message}
+            </FormErrorMessage>
+          </FormControl>
+        </div>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button
+          onClick={() => setModalState("inputData")}
+          colorScheme="primary"
+          isDisabled={!form.formState.isValid}
+        >
+          Next
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+const ModalBodyInputData = ({
+  form,
+  setModalState,
+}: {
+  form: UseFormReturn<AddContractSubscriptionForm>;
+  setModalState: Dispatch<SetStateAction<"inputContract" | "inputData">>;
+}) => {
+  const processEventLogsDisclosure = useDisclosure({
+    defaultIsOpen: form.getValues("processEventLogs"),
+  });
+  const processTransactionReceiptsDisclosure = useDisclosure({
+    defaultIsOpen: form.getValues("processTransactionReceipts"),
+  });
+  const [shouldFilterEvents, setShouldFilterEvents] = useState(false);
+  const [shouldFilterFunctions, setShouldFilterFunctions] = useState(false);
+
+  const processEventLogs = form.watch("processEventLogs");
+  const filterEvents = form.watch("filterEvents");
+  const processTransactionReceipts = form.watch("processTransactionReceipts");
+  const filterFunctions = form.watch("filterFunctions");
+
+  // Invalid states:
+  // - Neither logs nor receipts are selected.
+  // - Logs are selected but filtering on 0 event names.
+  // - Receipts are selected but filtering on 0 function names.
+  const isInputDataFormInvalid =
+    (!processEventLogs && !processTransactionReceipts) ||
+    (processEventLogs && shouldFilterEvents && filterEvents.length === 0) ||
+    (processTransactionReceipts &&
+      shouldFilterFunctions &&
+      filterFunctions.length === 0);
+
+  return (
+    <>
+      <ModalBody>
+        <div className="flex flex-col gap-4">
+          <Text>
+            Select the data type to process.
+            <br />
+            Events logs are arbitrary data triggered by a smart contract call.
+            <br />
+            Transaction receipts contain details about the blockchain execution.
+          </Text>
+
+          <FormControl>
+            <FormLabel>Processed Data</FormLabel>
+
+            <div className="flex flex-col gap-2">
+              <CheckboxWithLabel>
+                <Checkbox
+                  checked={form.watch("processEventLogs")}
+                  onCheckedChange={(val) => {
+                    const checked = !!val;
+                    form.setValue("processEventLogs", checked);
+                    if (checked) {
+                      processEventLogsDisclosure.onOpen();
+                    } else {
+                      processEventLogsDisclosure.onClose();
+                    }
+                  }}
+                />
+                <span>Event Logs</span>
+              </CheckboxWithLabel>
+              {/* Shows all/specific events if processing event logs */}
+              <Collapse in={processEventLogsDisclosure.isOpen}>
+                <div className="flex flex-col gap-2 px-4">
+                  <RadioGroup
+                    defaultValue="false"
+                    onChange={(val: "false" | "true") => {
+                      if (val === "true") {
+                        setShouldFilterEvents(true);
+                      } else {
+                        setShouldFilterEvents(false);
+                        form.setValue("filterEvents", []);
+                      }
+                    }}
+                  >
+                    <div className="flex flex-col gap-2">
+                      <Radio value="false">
+                        <Text>All events</Text>
+                      </Radio>
+                      <Radio value="true">
+                        <Text>
+                          Specific events{" "}
+                          {!!filterEvents.length &&
+                            `(${filterEvents.length} selected)`}
+                        </Text>
+                      </Radio>
+                      {/* List event names to select */}
+                      <Collapse in={shouldFilterEvents}>
+                        <FilterSelector
+                          abiItemType="event"
+                          form={form}
+                          filter={filterEvents}
+                          setFilter={(value) =>
+                            form.setValue("filterEvents", value)
+                          }
+                        />
+                      </Collapse>
+                    </div>
+                  </RadioGroup>
+                </div>
+              </Collapse>
+
+              <CheckboxWithLabel>
+                <Checkbox
+                  checked={form.watch("processTransactionReceipts")}
+                  onCheckedChange={(val) => {
+                    const checked = !!val;
+                    form.setValue("processTransactionReceipts", checked);
+                    if (checked) {
+                      processTransactionReceiptsDisclosure.onOpen();
+                    } else {
+                      processTransactionReceiptsDisclosure.onClose();
+                    }
+                  }}
+                />
+                <span>Transaction Receipts</span>
+              </CheckboxWithLabel>
+              {/* Shows all/specific functions if processing transaction receipts */}
+              <Collapse in={processTransactionReceiptsDisclosure.isOpen}>
+                <div className="flex flex-col gap-2 px-4">
+                  <RadioGroup
+                    defaultValue="false"
+                    onChange={(val: "false" | "true") => {
+                      if (val === "true") {
+                        setShouldFilterFunctions(true);
+                      } else {
+                        setShouldFilterFunctions(false);
+                        form.setValue("filterFunctions", []);
+                      }
+                    }}
+                  >
+                    <div className="flex flex-col gap-2">
+                      <Radio value="false">
+                        <Text>All functions</Text>
+                      </Radio>
+                      <Radio value="true">
+                        <Text>
+                          Specific functions{" "}
+                          {!!filterFunctions.length &&
+                            `(${filterFunctions.length} selected)`}
+                        </Text>
+                      </Radio>
+                      {/* List function names to select */}
+                      <Collapse in={shouldFilterFunctions}>
+                        <FilterSelector
+                          abiItemType="function"
+                          form={form}
+                          filter={filterFunctions}
+                          setFilter={(value) =>
+                            form.setValue("filterFunctions", value)
+                          }
+                        />
+                      </Collapse>
+                    </div>
+                  </RadioGroup>
+                </div>
+              </Collapse>
+            </div>
+          </FormControl>
+        </div>
+      </ModalBody>
+
+      <ModalFooter as={Flex} gap={3}>
+        <Button
+          type="button"
+          onClick={() => setModalState("inputContract")}
+          variant="ghost"
+        >
+          Back
+        </Button>
+        <Button
+          type="submit"
+          colorScheme="primary"
+          isDisabled={isInputDataFormInvalid}
+        >
+          Add
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+const FilterSelector = ({
+  abiItemType,
+  form,
+  filter,
+  setFilter,
+}: {
+  abiItemType: "function" | "event";
+
+  form: UseFormReturn<AddContractSubscriptionForm>;
+  filter: string[];
+  setFilter: (value: string[]) => void;
+}) => {
+  const client = useThirdwebClient();
+  const chain = useV5DashboardChain(form.getValues("chainId"));
+  const address = form.getValues("contractAddress");
+  const contract = useMemo(
+    () =>
+      chain
+        ? getContract({
+            address,
+            chain,
+            client,
+          })
+        : undefined,
+    [chain, client, address],
+  );
+
+  const abiQuery = useResolveContractAbi(contract);
+
+  const abiItems = useMemo(() => {
+    if (!abiQuery.data) {
+      return {
+        readFunctions: [],
+        writeFunctions: [],
+        events: [],
+      };
+    }
+    const readFunctions: string[] = [];
+    const writeFunctions: string[] = [];
+    const events: string[] = [];
+    for (const abiItem of abiQuery.data) {
+      if (abiItem.type === "function") {
+        if (
+          abiItem.stateMutability === "pure" ||
+          abiItem.stateMutability === "view"
+        ) {
+          readFunctions.push(abiItem.name);
+        } else {
+          writeFunctions.push(abiItem.name);
+        }
+      } else if (abiItem.type === "event") {
+        events.push(abiItem.name);
+      }
+    }
+    return {
+      readFunctions: [...new Set(readFunctions)].sort(),
+      writeFunctions: [...new Set(writeFunctions)].sort(),
+      events: [...new Set(events)].sort(),
+    };
+  }, [abiQuery.data]);
+
+  const filterNames = useMemo(() => {
+    switch (abiItemType) {
+      case "function": {
+        return abiItems.writeFunctions;
+      }
+      case "event": {
+        return abiItems.events;
+      }
+      default: {
+        return [];
+      }
+    }
+  }, [abiItemType, abiItems.events, abiItems.writeFunctions]);
+
+  return (
+    <Card>
+      {abiQuery.isPending ? (
+        <Spinner size="sm" />
+      ) : filterNames.length === 0 ? (
+        <Text>
+          Cannot resolve the contract definition. Filters are unavailable.
+        </Text>
+      ) : (
+        <div className="flex max-h-[300px] flex-col gap-2 overflow-y-auto">
+          {filterNames.map((name) => (
+            <CheckboxWithLabel key={name}>
+              <Checkbox
+                checked={filter.includes(name)}
+                onCheckedChange={(val) => {
+                  if (val) {
+                    setFilter([...filter, name]);
+                  } else {
+                    setFilter(filter.filter((item) => item !== name));
+                  }
+                }}
+              />
+              <span>{name}</span>
+            </CheckboxWithLabel>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
new file mode 100644
index 00000000000..8afde003a7b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
@@ -0,0 +1,470 @@
+"use client";
+
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import {
+  type EngineContractSubscription,
+  useEngineRemoveContractSubscription,
+  useEngineSubscriptionsLastBlock,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Tooltip,
+  type UseDisclosureReturn,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { createColumnHelper } from "@tanstack/react-table";
+import { ChainIconClient } from "components/icons/ChainIcon";
+import { TWTable } from "components/shared/TWTable";
+import { format } from "date-fns";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useAllChainsData } from "hooks/chains/allChains";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { useV5DashboardChain } from "lib/v5-adapter";
+import { InfoIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { eth_getBlockByNumber, getRpcClient } from "thirdweb";
+import { shortenAddress as shortenAddressThrows } from "thirdweb/utils";
+import { Button, Card, FormLabel, LinkButton, Text } from "tw-components";
+
+function shortenAddress(address: string) {
+  if (!address) {
+    return "";
+  }
+
+  try {
+    return shortenAddressThrows(address);
+  } catch {
+    return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+  }
+}
+
+interface ContractSubscriptionTableProps {
+  instanceUrl: string;
+  contractSubscriptions: EngineContractSubscription[];
+  isPending: boolean;
+  isFetched: boolean;
+  autoUpdate: boolean;
+  authToken: string;
+  client: ThirdwebClient;
+}
+
+const columnHelper = createColumnHelper<EngineContractSubscription>();
+
+export const ContractSubscriptionTable: React.FC<
+  ContractSubscriptionTableProps
+> = ({
+  instanceUrl,
+  contractSubscriptions,
+  isPending,
+  isFetched,
+  autoUpdate,
+  authToken,
+  client,
+}) => {
+  const removeDisclosure = useDisclosure();
+  const [selectedContractSub, setSelectedContractSub] =
+    useState<EngineContractSubscription>();
+  const { idToChain } = useAllChainsData();
+
+  const columns = [
+    columnHelper.accessor("chainId", {
+      header: "Chain",
+      cell: (cell) => {
+        const chain = idToChain.get(cell.getValue());
+        return (
+          <Flex align="center" gap={2}>
+            <ChainIconClient
+              className="size-3"
+              src={chain?.icon?.url}
+              client={client}
+            />
+            <Text>{chain?.name ?? "N/A"}</Text>
+          </Flex>
+        );
+      },
+    }),
+    columnHelper.accessor("contractAddress", {
+      header: "Contract Address",
+      cell: (cell) => {
+        const { chainId } = cell.row.original;
+        const chain = idToChain.get(chainId);
+        const explorer = chain?.explorers?.[0];
+        if (!explorer) {
+          return (
+            <CopyAddressButton
+              address={cell.getValue()}
+              copyIconPosition="right"
+            />
+          );
+        }
+        return (
+          <LinkButton
+            variant="ghost"
+            isExternal
+            size="xs"
+            href={explorer ? `${explorer.url}/address/${cell.getValue()}` : "#"}
+            fontFamily="mono"
+          >
+            {shortenAddress(cell.getValue())}
+          </LinkButton>
+        );
+      },
+    }),
+    columnHelper.accessor("webhook", {
+      header: "Webhook URL",
+      cell: (cell) => {
+        const webhook = cell.getValue();
+        const url = webhook?.url ?? "";
+
+        return (
+          <Text maxW={200} whiteSpace="normal" noOfLines={3}>
+            {url}
+          </Text>
+        );
+      },
+    }),
+    columnHelper.accessor("processEventLogs", {
+      header: "Filters",
+      cell: (cell) => {
+        const {
+          processEventLogs,
+          filterEvents,
+          processTransactionReceipts,
+          filterFunctions,
+        } = cell.row.original;
+
+        return (
+          <Flex flexDirection="column">
+            {/* Show logs + events */}
+            {processEventLogs && (
+              <Flex gap={1}>
+                <Text>Logs:</Text>
+                {filterEvents.length === 0 ? (
+                  <Text>All</Text>
+                ) : (
+                  <Tooltip
+                    p={0}
+                    label={
+                      <div className="flex flex-col gap-2 p-2 text-sm">
+                        {filterEvents.map((name) => (
+                          <Text key={name}>{name}</Text>
+                        ))}
+                      </div>
+                    }
+                    bgColor="backgroundCardHighlight"
+                    borderRadius="lg"
+                    shouldWrapChildren
+                  >
+                    <Text textDecoration="underline dotted">
+                      {filterEvents.length} events
+                    </Text>
+                  </Tooltip>
+                )}
+              </Flex>
+            )}
+
+            {/* Show receipts + functions */}
+            {processTransactionReceipts && (
+              <Flex gap={1}>
+                <Text>Receipts:</Text>
+                {filterFunctions.length === 0 ? (
+                  <Text>All</Text>
+                ) : (
+                  <Tooltip
+                    p={0}
+                    label={
+                      <div className="flex flex-col gap-2 p-2 text-sm">
+                        {filterFunctions.map((name) => (
+                          <Text key={name}>{name}</Text>
+                        ))}
+                      </div>
+                    }
+                    bgColor="backgroundCardHighlight"
+                    borderRadius="lg"
+                    shouldWrapChildren
+                  >
+                    <Text textDecoration="underline dotted">
+                      {filterFunctions.length} functions
+                    </Text>
+                  </Tooltip>
+                )}
+              </Flex>
+            )}
+          </Flex>
+        );
+      },
+    }),
+    columnHelper.accessor("lastIndexedBlock", {
+      header: "Latest Block",
+      cell: (cell) => {
+        const { chainId } = cell.row.original;
+        return (
+          <ChainLastBlock
+            instanceUrl={instanceUrl}
+            chainId={chainId}
+            autoUpdate={autoUpdate}
+            authToken={authToken}
+          />
+        );
+      },
+    }),
+  ];
+
+  return (
+    <>
+      <TWTable
+        title="contract subscriptions"
+        data={contractSubscriptions}
+        columns={columns}
+        isPending={isPending}
+        isFetched={isFetched}
+        onMenuClick={[
+          {
+            icon: <Trash2Icon className="size-4" />,
+            text: "Remove",
+            onClick: (contractSub) => {
+              setSelectedContractSub(contractSub);
+              removeDisclosure.onOpen();
+            },
+            isDestructive: true,
+          },
+        ]}
+      />
+
+      {selectedContractSub && removeDisclosure.isOpen && (
+        <RemoveModal
+          contractSubscription={selectedContractSub}
+          disclosure={removeDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+          client={client}
+        />
+      )}
+    </>
+  );
+};
+
+const ChainLastBlockTimestamp = ({
+  chainId,
+  blockNumber,
+}: {
+  chainId: number;
+  blockNumber: bigint;
+}) => {
+  const client = useThirdwebClient();
+  const chain = useV5DashboardChain(chainId);
+  // Get the block timestamp to display how delayed the last processed block is.
+  const ethBlockQuery = useQuery({
+    queryKey: ["block_timestamp", chainId, Number(blockNumber)],
+    // keep the previous data while fetching new data
+    placeholderData: keepPreviousData,
+    queryFn: async () => {
+      const rpcRequest = getRpcClient({
+        client,
+        chain,
+      });
+      const block = await eth_getBlockByNumber(rpcRequest, {
+        blockNumber,
+        includeTransactions: false,
+      });
+      return new Date(Number(block.timestamp) * 1000);
+    },
+  });
+
+  if (!ethBlockQuery.data) {
+    return null;
+  }
+
+  return (
+    <Card bgColor="backgroundHighlight">
+      <Text>{format(ethBlockQuery.data, "PP pp z")}</Text>
+    </Card>
+  );
+};
+
+const ChainLastBlock = ({
+  instanceUrl,
+  chainId,
+  autoUpdate,
+  authToken,
+}: {
+  instanceUrl: string;
+  chainId: number;
+  autoUpdate: boolean;
+  authToken: string;
+}) => {
+  const lastBlockQuery = useEngineSubscriptionsLastBlock({
+    instanceUrl,
+    chainId,
+    autoUpdate,
+    authToken,
+  });
+  if (!lastBlockQuery.data) {
+    return null;
+  }
+
+  return (
+    <Flex gap={2} align="center">
+      <Text>{lastBlockQuery.data}</Text>
+      <Tooltip
+        borderRadius="md"
+        bg="transparent"
+        boxShadow="none"
+        label={
+          <ChainLastBlockTimestamp
+            chainId={chainId}
+            blockNumber={BigInt(lastBlockQuery.data)}
+          />
+        }
+        shouldWrapChildren
+        placement="auto"
+      >
+        <InfoIcon className="size-4" />
+      </Tooltip>
+    </Flex>
+  );
+};
+
+const RemoveModal = ({
+  contractSubscription,
+  disclosure,
+  instanceUrl,
+  authToken,
+  client,
+}: {
+  contractSubscription: EngineContractSubscription;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+  client: ThirdwebClient;
+}) => {
+  const { mutate: removeContractSubscription } =
+    useEngineRemoveContractSubscription({
+      instanceUrl,
+      authToken,
+    });
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Successfully removed contract subscription.",
+    "Failed to remove contract subscription.",
+  );
+  const { idToChain } = useAllChainsData();
+  const chain = idToChain.get(contractSubscription.chainId);
+
+  const onClick = () => {
+    removeContractSubscription(
+      {
+        contractSubscriptionId: contractSubscription.id,
+      },
+      {
+        onSuccess: () => {
+          onSuccess();
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "remove-contract-subscription",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          onError(error);
+          trackEvent({
+            category: "engine",
+            action: "remove-contract-subscription",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Remove Contract Subscription</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <Text>
+              This action will delete all stored data for this contract
+              subscription.
+            </Text>
+
+            <Card as={Flex} flexDir="column" gap={4}>
+              <FormControl>
+                <FormLabel>Chain</FormLabel>
+                <Flex align="center" gap={2}>
+                  <ChainIconClient
+                    className="size-3"
+                    src={chain?.icon?.url}
+                    client={client}
+                  />
+                  <Text>{chain?.name ?? "N/A"}</Text>
+                </Flex>
+              </FormControl>
+
+              <FormControl>
+                <FormLabel>Contract Address</FormLabel>
+                <Text fontFamily="mono">
+                  {contractSubscription.contractAddress}
+                </Text>
+              </FormControl>
+
+              <FormControl>
+                <FormLabel>Webhook</FormLabel>
+                {contractSubscription.webhook ? (
+                  <Text>{contractSubscription.webhook.url}</Text>
+                ) : (
+                  <Text fontStyle="italic">N/A</Text>
+                )}
+              </FormControl>
+
+              <FormControl>
+                <FormLabel>Filters</FormLabel>
+                {contractSubscription.processEventLogs && (
+                  <Text>
+                    Logs:{" "}
+                    {contractSubscription.filterEvents.length === 0
+                      ? "All"
+                      : contractSubscription.filterEvents.join(", ")}
+                  </Text>
+                )}
+                {contractSubscription.processTransactionReceipts && (
+                  <Text>
+                    Receipts:{" "}
+                    {contractSubscription.filterFunctions.length === 0
+                      ? "All"
+                      : contractSubscription.filterFunctions.join(", ")}
+                  </Text>
+                )}
+              </FormControl>
+            </Card>
+          </div>
+        </ModalBody>
+        <ModalFooter as={Flex} gap={3}>
+          <Button type="button" onClick={disclosure.onClose} variant="ghost">
+            Cancel
+          </Button>
+          <Button type="submit" colorScheme="red" onClick={onClick}>
+            Remove
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
new file mode 100644
index 00000000000..bc726d53f97
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { useEngineContractSubscription } from "@3rdweb-sdk/react/hooks/useEngine";
+import { Flex, FormControl, Switch } from "@chakra-ui/react";
+import { useState } from "react";
+import { FormLabel, Heading, Text, TrackedLink } from "tw-components";
+import { AddContractSubscriptionButton } from "./add-contract-subscription-button";
+import { ContractSubscriptionTable } from "./contract-subscriptions-table";
+
+interface EngineContractSubscriptionsProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const EngineContractSubscriptions: React.FC<
+  EngineContractSubscriptionsProps
+> = ({ instanceUrl, authToken }) => {
+  const [autoUpdate, setAutoUpdate] = useState<boolean>(true);
+  const client = useThirdwebClient();
+  const contractSubscriptionsQuery = useEngineContractSubscription({
+    instanceUrl,
+    authToken,
+  });
+
+  return (
+    <Flex flexDir="column" gap={4}>
+      <Flex flexDir="row" gap={2} justify="space-between">
+        <Flex flexDir="column" gap={2}>
+          <Heading size="title.md">Contract Subscriptions</Heading>
+          <Text>
+            Subscribe to event logs and transaction receipts on any contract.{" "}
+            <TrackedLink
+              href="https://portal.thirdweb.com/engine/features/contract-subscriptions"
+              color="primary.500"
+              isExternal
+              category="engine"
+              label="learn-more-contract-subscriptions"
+            >
+              Learn more about contract subscriptions
+            </TrackedLink>
+            .
+          </Text>
+        </Flex>
+        <div className="flex flex-row">
+          <FormControl display="flex" alignItems="center">
+            <FormLabel htmlFor="auto-update" mb="0">
+              Auto-Update
+            </FormLabel>
+            <Switch
+              isChecked={autoUpdate}
+              onChange={() => setAutoUpdate((val) => !val)}
+              id="auto-update"
+            />
+          </FormControl>
+        </div>
+      </Flex>
+      <ContractSubscriptionTable
+        instanceUrl={instanceUrl}
+        contractSubscriptions={contractSubscriptionsQuery.data ?? []}
+        isPending={contractSubscriptionsQuery.isPending}
+        isFetched={contractSubscriptionsQuery.isFetched}
+        autoUpdate={autoUpdate}
+        authToken={authToken}
+        client={client}
+      />
+      <AddContractSubscriptionButton
+        instanceUrl={instanceUrl}
+        authToken={authToken}
+      />
+    </Flex>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/page.tsx
new file mode 100644
index 00000000000..0e41b54826c
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/page.tsx
@@ -0,0 +1,18 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { EngineContractSubscriptions } from "./components/engine-contract-subscription";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return (
+    <EngineContractSubscriptions
+      instanceUrl={instance.url}
+      authToken={authToken}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/engine-explorer.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/engine-explorer.tsx
new file mode 100644
index 00000000000..8aedece201b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/engine-explorer.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { ClientOnly } from "components/ClientOnly/ClientOnly";
+import "./swagger-ui.css";
+import "swagger-ui-react/swagger-ui.css";
+import dynamic from "next/dynamic";
+
+const SwaggerUI = dynamic(() => import("swagger-ui-react"), { ssr: false });
+
+interface EngineExplorerProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const EngineExplorer: React.FC<EngineExplorerProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  return (
+    <ClientOnly ssr={null}>
+      <div className="dark rounded-lg border border-border bg-background py-10 pt-4">
+        <SwaggerUI
+          url={`${instanceUrl}${instanceUrl.endsWith("/") ? "" : "/"}json`}
+          docExpansion="none"
+          persistAuthorization={true}
+          requestInterceptor={(req) => {
+            req.headers.Authorization = `Bearer ${authToken}`;
+            // This is required to skip the browser warning when using ngrok
+            // else, Engine -> Explorer doesn't work
+            // more info: https://ngrok.com/abuse
+            req.headers["ngrok-skip-browser-warning"] = "true";
+            return req;
+          }}
+        />
+      </div>
+    </ClientOnly>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/swagger-ui.css b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/swagger-ui.css
new file mode 100644
index 00000000000..7056aa50e6b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/swagger-ui.css
@@ -0,0 +1,1759 @@
+.swagger-ui html {
+  box-sizing: border-box !important;
+}
+
+.swagger-ui *,
+.swagger-ui :after,
+.swagger-ui :before {
+  box-sizing: inherit !important;
+}
+
+.swagger-ui {
+  color: #fff !important;
+}
+
+.swagger-ui body {
+  margin: 0 !important;
+  background: #0e0e10 !important;
+}
+
+.swagger-ui .wrapper {
+  width: 100% !important;
+  max-width: 1460px !important;
+  margin: 0 auto !important;
+  padding: 0 20px !important;
+}
+
+.swagger-ui .opblock-tag-section {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-box-direction: normal !important;
+  -ms-flex-direction: column !important;
+  flex-direction: column !important;
+}
+
+.swagger-ui .opblock-tag {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  padding: 10px 10px 10px 10px !important;
+  cursor: pointer !important;
+  -webkit-transition: all 0.2s !important;
+  transition: all 0.2s !important;
+  border-bottom: 1px solid #272b30 !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+}
+
+.swagger-ui .opblock-tag:hover {
+  background: rgba(0, 0, 0, 0.02) !important;
+}
+
+.swagger-ui .opblock-tag {
+  font-size: 24px !important;
+  margin: 0 0 5px !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #5189f8 !important;
+}
+
+.swagger-ui .opblock-tag.no-desc span {
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+}
+
+.swagger-ui .opblock-tag svg {
+  -webkit-transition: all 0.4s !important;
+  transition: all 0.4s !important;
+}
+
+.swagger-ui .opblock-tag small {
+  font-size: 14px !important;
+  font-weight: 400 !important;
+  padding: 0 10px !important;
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .parаmeter__type {
+  font-size: 12px !important;
+  padding: 5px 0 !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui .view-line-link {
+  position: relative !important;
+  top: 3px !important;
+  width: 20px !important;
+  margin: 0 5px !important;
+  cursor: pointer !important;
+  -webkit-transition: all 0.5s !important;
+  transition: all 0.5s !important;
+}
+
+.swagger-ui .opblock {
+  margin: 0 0 15px !important;
+  border: 1px solid #0e0e10 !important;
+  border-radius: 4px !important;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.19) !important;
+}
+
+.swagger-ui .opblock.is-open .opblock-summary {
+  border-bottom: 1px solid #0e0e10 !important;
+}
+
+.swagger-ui .opblock .opblock-section-header {
+  padding: 8px 20px !important;
+  background: hsla(0, 0%, 100%, 0.8) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+}
+
+.swagger-ui .opblock .opblock-section-header,
+.swagger-ui .opblock .opblock-section-header label {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+  background: #0e0e10 !important;
+}
+
+.swagger-ui .opblock .opblock-section-header label {
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  margin: 0 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .opblock .opblock-section-header label span {
+  padding: 0 10px 0 0 !important;
+}
+
+.swagger-ui .opblock .opblock-section-header h4 {
+  font-size: 14px !important;
+  margin: 0 !important;
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .opblock .opblock-summary-method {
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  min-width: 80px !important;
+  padding: 6px 15px !important;
+  text-align: center !important;
+  border-radius: 3px !important;
+  background: #0e0e10 !important;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .opblock .opblock-summary-path,
+.swagger-ui .opblock .opblock-summary-path__deprecated {
+  font-size: 16px !important;
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  padding: 0 10px !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fafbfc !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+}
+
+.swagger-ui .opblock .opblock-summary-path .view-line-link,
+.swagger-ui .opblock .opblock-summary-path__deprecated .view-line-link {
+  position: relative !important;
+  top: 2px !important;
+  width: 0 !important;
+  margin: 0 !important;
+  cursor: pointer !important;
+  -webkit-transition: all 0.5s !important;
+  transition: all 0.5s !important;
+}
+
+.swagger-ui .opblock .opblock-summary-path:hover .view-line-link,
+.swagger-ui .opblock .opblock-summary-path__deprecated:hover .view-line-link {
+  width: 18px !important;
+  margin: 0 5px !important;
+}
+
+.swagger-ui .opblock .opblock-summary-path__deprecated {
+  text-decoration: line-through !important;
+}
+
+.swagger-ui .opblock .opblock-summary-description {
+  font-size: 13px !important;
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .opblock .opblock-summary {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  padding: 5px !important;
+  cursor: pointer !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+}
+
+.swagger-ui .opblock.opblock-post {
+  border-color: #49cc90 !important;
+  background: #fff !important;
+}
+
+.swagger-ui .opblock.opblock-post .opblock-summary-method {
+  background: #49cc90 !important;
+}
+
+.swagger-ui .opblock.opblock-post .opblock-summary {
+  border-color: #49cc90 !important;
+}
+
+.swagger-ui .opblock.opblock-put {
+  border-color: #fca130 !important;
+  background: #fff !important;
+}
+
+.swagger-ui .opblock.opblock-put .opblock-summary-method {
+  background: #fca130 !important;
+}
+
+.swagger-ui .opblock.opblock-put .opblock-summary {
+  border-color: #fca130 !important;
+}
+
+.swagger-ui .opblock.opblock-delete {
+  border-color: #f93e3e !important;
+  background: #fff !important;
+}
+
+.swagger-ui .opblock.opblock-delete .opblock-summary-method {
+  background: #f93e3e !important;
+}
+
+.swagger-ui .opblock.opblock-delete .opblock-summary {
+  border-color: #f93e3e !important;
+}
+
+.swagger-ui .opblock.opblock-get {
+  border-color: #61affe !important;
+  background: rgba(97, 175, 254, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-get .opblock-summary-method {
+  background: #61affe !important;
+}
+
+.swagger-ui .opblock.opblock-get .opblock-summary {
+  border-color: #61affe !important;
+}
+
+.swagger-ui .opblock.opblock-patch {
+  border-color: #50e3c2 !important;
+  background: #fff !important;
+}
+
+.swagger-ui .opblock.opblock-patch .opblock-summary-method {
+  background: #50e3c2 !important;
+}
+
+.swagger-ui .opblock.opblock-patch .opblock-summary {
+  border-color: #50e3c2 !important;
+}
+
+.swagger-ui .opblock.opblock-head {
+  border-color: #9012fe !important;
+  background: rgba(144, 18, 254, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-head .opblock-summary-method {
+  background: #9012fe !important;
+}
+
+.swagger-ui .opblock.opblock-head .opblock-summary {
+  border-color: #9012fe !important;
+}
+
+.swagger-ui .opblock.opblock-options {
+  border-color: #0d5aa7 !important;
+  background: rgba(13, 90, 167, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-options .opblock-summary-method {
+  background: #0d5aa7 !important;
+}
+
+.swagger-ui .opblock.opblock-options .opblock-summary {
+  border-color: #0d5aa7 !important;
+}
+
+.swagger-ui .opblock.opblock-deprecated {
+  opacity: 0.6 !important;
+  border-color: #ebebeb !important;
+  background: hsla(0, 0%, 92%, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-deprecated .opblock-summary-method {
+  background: #ebebeb !important;
+}
+
+.swagger-ui .opblock.opblock-deprecated .opblock-summary {
+  border-color: #ebebeb !important;
+}
+
+.swagger-ui .tab {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  margin: 20px 0 10px !important;
+  padding: 0 !important;
+  list-style: none !important;
+}
+
+.swagger-ui .tab li {
+  font-size: 12px !important;
+  min-width: 100px !important;
+  min-width: 90px !important;
+  padding: 0 !important;
+  cursor: pointer !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .tab li:first-of-type {
+  position: relative !important;
+  padding-left: 0 !important;
+}
+
+.swagger-ui .tab li:first-of-type:after {
+  position: absolute !important;
+  top: 0 !important;
+  right: 6px !important;
+  width: 1px !important;
+  height: 100% !important;
+  content: "" !important;
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+
+.swagger-ui .tab li.active {
+  font-weight: 700 !important;
+}
+
+.swagger-ui .opblock-description-wrapper,
+.swagger-ui .opblock-title_normal {
+  padding: 15px 20px !important;
+}
+
+.swagger-ui .opblock-description-wrapper,
+.swagger-ui .opblock-description-wrapper h4,
+.swagger-ui .opblock-title_normal,
+.swagger-ui .opblock-title_normal h4 {
+  font-size: 12px !important;
+  margin: 0 0 5px !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .opblock-description-wrapper p,
+.swagger-ui .opblock-title_normal p {
+  font-size: 14px !important;
+  margin: 0 !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .execute-wrapper {
+  padding: 20px !important;
+  text-align: right !important;
+}
+
+.swagger-ui .execute-wrapper .btn {
+  width: 100% !important;
+  padding: 8px 40px !important;
+}
+
+.swagger-ui .body-param-options {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-box-direction: normal !important;
+  -ms-flex-direction: column !important;
+  flex-direction: column !important;
+}
+
+.swagger-ui .body-param-options .body-param-edit {
+  padding: 10px 0 !important;
+}
+
+.swagger-ui .body-param-options label {
+  padding: 8px 0 !important;
+}
+
+.swagger-ui .body-param-options label select {
+  margin: 3px 0 0 !important;
+}
+
+.swagger-ui .responses-inner {
+  padding: 20px !important;
+}
+
+.swagger-ui .responses-inner h4,
+.swagger-ui .responses-inner h5 {
+  font-size: 12px !important;
+  margin: 10px 0 5px !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .response-col_status {
+  font-size: 14px !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .response-col_status .response-undocumented {
+  font-size: 11px !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #999 !important;
+}
+
+.swagger-ui .response-col_description__inner span {
+  font-size: 12px !important;
+  font-style: italic !important;
+  display: block !important;
+  margin: 10px 0 !important;
+  padding: 10px !important;
+  border-radius: 4px !important;
+  background: #41444e !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui .response-col_description__inner span p {
+  margin: 0 !important;
+}
+
+.swagger-ui .opblock-body pre {
+  font-size: 12px !important;
+  margin: 0 !important;
+  padding: 10px !important;
+  white-space: pre-wrap !important;
+  border-radius: 4px !important;
+  background: #41444e !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui .opblock-body pre span {
+  color: #fff !important;
+}
+
+.swagger-ui .scheme-container {
+  display: none !important;
+}
+
+.swagger-ui .loading-container {
+  padding: 40px 0 60px !important;
+  border-radius: 36px !important;
+  color: #fff !important;
+}
+
+.swagger-ui .loading-container .loading {
+  position: relative !important;
+}
+
+.swagger-ui .loading-container .loading:after {
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  content: "loading" !important;
+  -webkit-transform: translate(-50%, -50%) !important;
+  transform: translate(-50%, -50%) !important;
+  text-transform: uppercase !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .loading-container .loading:before {
+  position: absolute !important;
+  top: 50% !important;
+  left: 50% !important;
+  display: block !important;
+  width: 60px !important;
+  height: 60px !important;
+  margin: -30px !important;
+  content: "" !important;
+  -webkit-animation: rotation 1s infinite linear, opacity 0.5s !important;
+  animation: rotation 1s infinite linear, opacity 0.5s !important;
+  opacity: 1 !important;
+  border: 2px solid #fff !important;
+  border-top-color: rgba(0, 0, 0, 0.6) !important;
+  border-radius: 100% !important;
+  -webkit-backface-visibility: hidden !important;
+  backface-visibility: hidden !important;
+  fill: pink !important;
+  background-color: #333333 !important;
+}
+
+@-webkit-keyframes rotation {
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes rotation {
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+@-webkit-keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+
+.swagger-ui .btn {
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  padding: 5px 23px !important;
+  -webkit-transition: all 0.3s !important;
+  transition: all 0.3s !important;
+  border: 2px solid #888 !important;
+  border-radius: 4px !important;
+  background: transparent !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .btn[disabled] {
+  cursor: not-allowed !important;
+  opacity: 0.3 !important;
+}
+
+.swagger-ui .btn:hover {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
+}
+
+.swagger-ui .btn.cancel {
+  border-color: #ff6060 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #ff6060 !important;
+}
+
+.swagger-ui .btn.authorize {
+  line-height: 1 !important;
+  display: inline !important;
+  color: #49cc90 !important;
+  border-color: #49cc90 !important;
+}
+
+.swagger-ui .btn.authorize span {
+  float: left !important;
+  padding: 4px 20px 0 0 !important;
+}
+
+.swagger-ui .btn.authorize svg {
+  fill: #49cc90 !important;
+}
+
+.swagger-ui .btn.execute {
+  -webkit-animation: pulse 2s infinite !important;
+  animation: pulse 2s infinite !important;
+  color: #fff !important;
+  border-color: #4990e2 !important;
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    color: #fff;
+    background: #4990e2;
+    box-shadow: 0 0 0 0 rgba(73, 144, 226, 0.8);
+  }
+  70% {
+    box-shadow: 0 0 0 5px rgba(73, 144, 226, 0);
+  }
+  to {
+    color: #fff;
+    background: #4990e2;
+    box-shadow: 0 0 0 0 rgba(73, 144, 226, 0);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    color: #fff;
+    background: #4990e2;
+    box-shadow: 0 0 0 0 rgba(73, 144, 226, 0.8);
+  }
+  70% {
+    box-shadow: 0 0 0 5px rgba(73, 144, 226, 0);
+  }
+  to {
+    color: #fff;
+    background: #4990e2;
+    box-shadow: 0 0 0 0 rgba(73, 144, 226, 0);
+  }
+}
+
+.swagger-ui .btn-group {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  padding: 30px !important;
+}
+
+.swagger-ui .btn-group .btn {
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+}
+
+.swagger-ui .btn-group .btn:first-child {
+  border-radius: 4px 0 0 4px !important;
+}
+
+.swagger-ui .btn-group .btn:last-child {
+  border-radius: 0 4px 4px 0 !important;
+}
+
+.swagger-ui .authorization__btn {
+  padding: 0 5px 0 0 !important;
+}
+
+.swagger-ui .authorization__btn svg {
+  fill: #f4f4f4 !important;
+}
+
+.swagger-ui .authorization__btn.locked {
+  opacity: 1 !important;
+}
+
+.swagger-ui .authorization__btn.unlocked {
+  opacity: 0.4 !important;
+}
+
+.swagger-ui .expand-methods,
+.swagger-ui .expand-operation {
+  border: none !important;
+  background-color: transparent !important;
+  padding: 4px !important;
+  border-radius: 1000px !important;
+  overflow: hidden !important;
+}
+
+.swagger-ui .expand-methods svg,
+.swagger-ui .expand-operation svg {
+  width: 18px !important;
+  height: 18px !important;
+  background-color: transparent;
+  fill: #fff !important;
+}
+
+.swagger-ui .expand-methods {
+  padding: 0 10px !important;
+}
+
+.swagger-ui .expand-methods:hover svg {
+  fill: #fff !important;
+}
+
+.swagger-ui .expand-methods svg {
+  -webkit-transition: all 0.3s !important;
+  transition: all 0.3s !important;
+  fill: #777 !important;
+}
+
+.swagger-ui button {
+  cursor: pointer !important;
+  outline: none !important;
+}
+
+.swagger-ui select {
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  padding: 5px 40px 5px 10px !important;
+  border: 2px solid #41444e !important;
+  border-radius: 4px !important;
+  background: #f7f7f7
+    url(data:image/svg+xml!important;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+ICAgIDxwYXRoIGQ9Ik0xMy40MTggNy44NTljLjI3MS0uMjY4LjcwOS0uMjY4Ljk3OCAwIC4yNy4yNjguMjcyLjcwMSAwIC45NjlsLTMuOTA4IDMuODNjLS4yNy4yNjgtLjcwNy4yNjgtLjk3OSAwbC0zLjkwOC0zLjgzYy0uMjctLjI2Ny0uMjctLjcwMSAwLS45NjkuMjcxLS4yNjguNzA5LS4yNjguOTc4IDBMMTAgMTFsMy40MTgtMy4xNDF6Ii8+PC9zdmc+)
+    right 10px center no-repeat !important;
+  background-size: 20px !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25) !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #0e0e10 !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+}
+
+.swagger-ui select[multiple] {
+  margin: 5px 0 !important;
+  padding: 5px !important;
+  background: #f7f7f7 !important;
+}
+
+.swagger-ui .opblock-body select {
+  min-width: 230px !important;
+}
+
+.swagger-ui label {
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  margin: 0 0 5px !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui input[type="email"],
+.swagger-ui input[type="password"],
+.swagger-ui input[type="search"],
+.swagger-ui input[type="text"] {
+  min-width: 100px !important;
+  margin: 5px 0 !important;
+  padding: 8px 10px !important;
+  border-radius: 4px !important;
+  background: #333333 !important;
+}
+
+.swagger-ui input[type="email"].invalid,
+.swagger-ui input[type="password"].invalid,
+.swagger-ui input[type="search"].invalid,
+.swagger-ui input[type="text"].invalid {
+  -webkit-animation: shake 0.4s 1 !important;
+  animation: shake 0.4s 1 !important;
+  border-color: #f93e3e !important;
+  background: #333333 !important;
+}
+
+@-webkit-keyframes shake {
+  10%,
+  90% {
+    -webkit-transform: translate3d(-1px, 0, 0);
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%,
+  80% {
+    -webkit-transform: translate3d(2px, 0, 0);
+    transform: translate3d(2px, 0, 0);
+  }
+  30%,
+  50%,
+  70% {
+    -webkit-transform: translate3d(-4px, 0, 0);
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%,
+  60% {
+    -webkit-transform: translate3d(4px, 0, 0);
+    transform: translate3d(4px, 0, 0);
+  }
+}
+
+@keyframes shake {
+  10%,
+  90% {
+    -webkit-transform: translate3d(-1px, 0, 0);
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%,
+  80% {
+    -webkit-transform: translate3d(2px, 0, 0);
+    transform: translate3d(2px, 0, 0);
+  }
+  30%,
+  50%,
+  70% {
+    -webkit-transform: translate3d(-4px, 0, 0);
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%,
+  60% {
+    -webkit-transform: translate3d(4px, 0, 0);
+    transform: translate3d(4px, 0, 0);
+  }
+}
+
+.swagger-ui textarea {
+  font-size: 12px !important;
+  width: 100% !important;
+  min-height: 280px !important;
+  padding: 10px !important;
+  border: none !important;
+  border-radius: 4px !important;
+  outline: none !important;
+  background: hsla(220, 50%, 65%, 0.8) !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui textarea:focus {
+  border: 2px solid #61affe !important;
+}
+
+.swagger-ui textarea.curl {
+  font-size: 12px !important;
+  min-height: 100px !important;
+  margin: 0 !important;
+  padding: 10px !important;
+  resize: none !important;
+  border-radius: 4px !important;
+  background: #41444e !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui .checkbox {
+  padding: 5px 0 10px !important;
+  -webkit-transition: opacity 0.5s !important;
+  transition: opacity 0.5s !important;
+  color: #333 !important;
+}
+
+.swagger-ui .checkbox label {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+}
+
+.swagger-ui .checkbox p {
+  font-weight: 400 !important;
+  font-style: italic !important;
+  margin: 0 !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui .checkbox input[type="checkbox"] {
+  display: none !important;
+}
+
+.swagger-ui .checkbox input[type="checkbox"] + label > .item {
+  position: relative !important;
+  top: 3px !important;
+  display: inline-block !important;
+  width: 16px !important;
+  height: 16px !important;
+  margin: 0 8px 0 0 !important;
+  padding: 5px !important;
+  cursor: pointer !important;
+  border-radius: 1px !important;
+  background: #e8e8e8 !important;
+  box-shadow: 0 0 0 2px #e8e8e8 !important;
+  -webkit-box-flex: 0 !important;
+  -ms-flex: none !important;
+  flex: none !important;
+}
+
+.swagger-ui .checkbox input[type="checkbox"] + label > .item:active {
+  -webkit-transform: scale(0.9) !important;
+  transform: scale(0.9) !important;
+}
+
+.swagger-ui .checkbox input[type="checkbox"]:checked + label > .item {
+  background: #e8e8e8
+    url("data:image/svg+xml!important;charset=utf-8,%3Csvg width='10' height='8' viewBox='3 7 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2341474E' fill-rule='evenodd' d='M6.333 15L3 11.667l1.333-1.334 2 2L11.667 7 13 8.333z'/%3E%3C/svg%3E")
+    50% no-repeat !important;
+}
+
+.swagger-ui .dialog-ux {
+  position: fixed !important;
+  z-index: 9999 !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+}
+
+.swagger-ui .dialog-ux .backdrop-ux {
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  background: rgba(0, 0, 0, 0.8) !important;
+}
+
+.swagger-ui .dialog-ux .modal-ux {
+  position: absolute !important;
+  z-index: 9999 !important;
+  top: 50% !important;
+  left: 50% !important;
+  width: 100% !important;
+  min-width: 300px !important;
+  max-width: 650px !important;
+  -webkit-transform: translate(-50%, -50%) !important;
+  transform: translate(-50%, -50%) !important;
+  border: 1px solid #ebebeb !important;
+  border-radius: 4px !important;
+  background: #0e0e10 !important;
+  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2) !important;
+}
+
+.swagger-ui .dialog-ux .modal-ux-content {
+  overflow-y: auto !important;
+  max-height: 540px !important;
+  padding: 20px !important;
+}
+
+.swagger-ui .dialog-ux .modal-ux-content p {
+  font-size: 12px !important;
+  margin: 0 0 5px !important;
+  color: #41444e !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #0e0e10 !important;
+}
+
+.swagger-ui .dialog-ux .modal-ux-content h4 {
+  font-size: 18px !important;
+  font-weight: 600 !important;
+  margin: 15px 0 0 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #0e0e10 !important;
+}
+
+.swagger-ui .dialog-ux .modal-ux-header {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  padding: 12px 0 !important;
+  border-bottom: 1px solid #ebebeb !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+}
+
+.swagger-ui .dialog-ux .modal-ux-header .close-modal {
+  padding: 0 10px !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+}
+
+.swagger-ui .dialog-ux .modal-ux-header h3 {
+  font-size: 20px !important;
+  font-weight: 600 !important;
+  margin: 0 !important;
+  padding: 0 20px !important;
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .auth-container h4 {
+  color: #fff !important;
+}
+
+.swagger-ui .model {
+  font-size: 12px !important;
+  font-weight: 300 !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui .model-toggle {
+  font-size: 10px !important;
+  position: relative !important;
+  top: 6px !important;
+  display: inline-block !important;
+  margin: 1.5em !important;
+  cursor: pointer !important;
+  -webkit-transition: -webkit-transform 0.15s ease-in !important;
+  transition: -webkit-transform 0.15s ease-in !important;
+  transition: transform 0.15s ease-in !important;
+  transition: transform 0.15s ease-in, -webkit-transform 0.15s ease-in !important;
+  -webkit-transform: rotate(90deg) !important;
+  transform: rotate(90deg) !important;
+  -webkit-transform-origin: 50% 50% !important;
+  transform-origin: 50% 50% !important;
+  background: #fff !important;
+}
+
+.swagger-ui .model-toggle.collapsed {
+  -webkit-transform: rotate(0deg) !important;
+  transform: rotate(0deg) !important;
+}
+
+.swagger-ui .model-toggle:after {
+  display: block !important;
+  width: 20px !important;
+  height: 20px !important;
+  content: "" !important;
+  background: url("data:image/svg+xml!important;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E")
+    50% no-repeat !important;
+  background-size: 100% !important;
+}
+
+.swagger-ui .model-jump-to-path {
+  position: relative !important;
+  cursor: pointer !important;
+}
+
+.swagger-ui .model-jump-to-path .view-line-link {
+  position: absolute !important;
+  top: -0.4em !important;
+  cursor: pointer !important;
+}
+
+.swagger-ui .model-title {
+  position: relative !important;
+}
+
+.swagger-ui .model-title:hover .model-hint {
+  visibility: visible !important;
+}
+
+.swagger-ui .model-hint {
+  position: absolute !important;
+  top: -1.8em !important;
+  visibility: hidden !important;
+  padding: 0.1em 0.5em !important;
+  white-space: nowrap !important;
+  color: #ebebeb !important;
+  border-radius: 4px !important;
+  background: rgba(0, 0, 0, 0.7) !important;
+}
+
+.swagger-ui section.models {
+  margin: 30px 0 !important;
+  border: 1px solid rgba(59, 65, 81, 0.3) !important;
+  border-radius: 4px !important;
+}
+
+.swagger-ui section.models.is-open {
+  padding: 0 0 20px !important;
+}
+
+.swagger-ui section.models.is-open h4 {
+  margin: 0 0 5px !important;
+  border-bottom: 1px solid rgba(59, 65, 81, 0.3) !important;
+}
+
+.swagger-ui section.models.is-open h4 svg {
+  -webkit-transform: rotate(90deg) !important;
+  transform: rotate(90deg) !important;
+}
+
+.swagger-ui section.models h4 {
+  font-size: 16px !important;
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  margin: 0 !important;
+  padding: 10px 20px 10px 10px !important;
+  cursor: pointer !important;
+  -webkit-transition: all 0.2s !important;
+  transition: all 0.2s !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #777 !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+}
+
+.swagger-ui section.models h4 svg {
+  -webkit-transition: all 0.4s !important;
+  transition: all 0.4s !important;
+}
+
+.swagger-ui section.models h4 span {
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+}
+
+.swagger-ui section.models h4:hover {
+  background: rgba(0, 0, 0, 0.02) !important;
+}
+
+.swagger-ui section.models h5 {
+  font-size: 16px !important;
+  margin: 0 0 10px !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #777 !important;
+}
+
+.swagger-ui section.models .model-jump-to-path {
+  position: relative !important;
+  top: 5px !important;
+}
+
+.swagger-ui section.models .model-container {
+  margin: 0 20px 15px !important;
+  -webkit-transition: all 0.5s !important;
+  transition: all 0.5s !important;
+  border-radius: 4px !important;
+  background: rgba(0, 0, 0, 0.05) !important;
+}
+
+.swagger-ui section.models .model-container:hover {
+  background: rgba(0, 0, 0, 0.07) !important;
+}
+
+.swagger-ui section.models .model-container:first-of-type {
+  margin: 20px !important;
+}
+
+.swagger-ui section.models .model-container:last-of-type {
+  margin: 0 20px !important;
+}
+
+.swagger-ui section.models .model-box {
+  background: none !important;
+}
+
+.swagger-ui .model-box {
+  padding: 10px !important;
+  border-radius: 4px !important;
+  background: rgb(245 239 239 / 10%) !important;
+}
+
+.swagger-ui .model-box .model-jump-to-path {
+  position: relative !important;
+  top: 4px !important;
+}
+
+.swagger-ui .model-title {
+  font-size: 16px !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #555 !important;
+}
+
+.swagger-ui span > span.model,
+.swagger-ui span > span.model .brace-close {
+  padding: 0 0 0 10px !important;
+}
+
+.swagger-ui .prop-type {
+  color: #55a !important;
+}
+
+.swagger-ui .prop-enum {
+  display: block !important;
+}
+
+.swagger-ui .prop-format {
+  color: #999 !important;
+}
+
+.swagger-ui table {
+  width: 100% !important;
+  padding: 0 10px !important;
+  border-collapse: collapse !important;
+}
+
+.swagger-ui table.model tbody tr td {
+  padding: 0 !important;
+  vertical-align: top !important;
+}
+
+.swagger-ui table.model tbody tr td:first-of-type {
+  width: 100px !important;
+  padding: 0 !important;
+}
+
+.swagger-ui table.headers td {
+  font-size: 12px !important;
+  font-weight: 300 !important;
+  vertical-align: middle !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui table tbody tr td {
+  padding: 10px 0 0 !important;
+  vertical-align: top !important;
+}
+
+.swagger-ui table tbody tr td:first-of-type {
+  width: 20% !important;
+  padding: 10px 0 !important;
+}
+
+.swagger-ui table thead tr td,
+.swagger-ui table thead tr th {
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  padding: 12px 0 !important;
+  text-align: left !important;
+  border-bottom: 1px solid rgba(59, 65, 81, 0.2) !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .parameters-col_description p {
+  font-size: 14px !important;
+  margin: 0 !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .parameters-col_description input[type="text"] {
+  width: 100% !important;
+  max-width: 340px !important;
+}
+
+.swagger-ui .parameter__name {
+  font-size: 16px !important;
+  font-weight: 400 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .parameter__name.required {
+  font-weight: 700 !important;
+}
+
+.swagger-ui .parameter__name.required:after {
+  font-size: 10px !important;
+  position: relative !important;
+  top: -6px !important;
+  padding: 5px !important;
+  content: "required" !important;
+  color: rgba(255, 0, 0, 0.6) !important;
+}
+
+.swagger-ui .parameter__in {
+  font-size: 12px !important;
+  font-style: italic !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #888 !important;
+}
+
+.swagger-ui .table-container {
+  padding: 20px !important;
+}
+
+.swagger-ui .topbar {
+  padding: 8px 30px !important;
+  background-color: #89bf04 !important;
+}
+
+.swagger-ui .topbar .topbar-wrapper {
+  -ms-flex-align: center !important;
+}
+
+.swagger-ui .topbar .topbar-wrapper,
+.swagger-ui .topbar a {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-align: center !important;
+  align-items: center !important;
+}
+
+.swagger-ui .topbar a {
+  font-size: 1.5em !important;
+  font-weight: 700 !important;
+  text-decoration: none !important;
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+  -ms-flex-align: center !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .topbar a span {
+  margin: 0 !important;
+  padding: 0 10px !important;
+}
+
+.swagger-ui .topbar .download-url-wrapper {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+}
+
+.swagger-ui .topbar .download-url-wrapper input[type="text"] {
+  min-width: 350px !important;
+  margin: 0 !important;
+  border: 2px solid #547f00 !important;
+  border-radius: 4px 0 0 4px !important;
+  outline: none !important;
+}
+
+.swagger-ui .topbar .download-url-wrapper .download-url-button {
+  font-size: 16px !important;
+  font-weight: 700 !important;
+  padding: 4px 40px !important;
+  border: none !important;
+  border-radius: 0 4px 4px 0 !important;
+  background: #547f00 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .information-container.wrapper .info {
+  display: none !important;
+}
+
+.swagger-ui .info hgroup.main {
+  margin: 0 0 20px !important;
+}
+
+.swagger-ui .info hgroup.main a {
+  font-size: 12px !important;
+}
+
+.swagger-ui .info p {
+  font-size: 14px !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .info code {
+  padding: 3px 5px !important;
+  border-radius: 4px !important;
+  background: rgba(0, 0, 0, 0.05) !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #9012fe !important;
+}
+
+.swagger-ui .info a {
+  font-size: 14px !important;
+  -webkit-transition: all 0.4s !important;
+  transition: all 0.4s !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #4990e2 !important;
+}
+
+.swagger-ui .info a:hover {
+  color: #1f69c0 !important;
+}
+
+.swagger-ui .info > div {
+  margin: 0 0 5px !important;
+}
+
+.swagger-ui .info .base-url {
+  font-size: 12px !important;
+  font-weight: 300 !important;
+  margin: 0 !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui .info .title {
+  font-size: 36px !important;
+  margin: 0 !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .info .title small {
+  font-size: 10px !important;
+  position: relative !important;
+  top: -5px !important;
+  display: inline-block !important;
+  margin: 0 0 0 5px !important;
+  padding: 2px 4px !important;
+  vertical-align: super !important;
+  border-radius: 57px !important;
+  background: #7d8492 !important;
+}
+
+.swagger-ui .info .title small pre {
+  margin: 0 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .auth-btn-wrapper {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  padding: 10px 0 !important;
+  -webkit-box-pack: center !important;
+  -ms-flex-pack: center !important;
+  justify-content: center !important;
+}
+
+.swagger-ui .auth-wrapper {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+  -webkit-box-pack: end !important;
+  -ms-flex-pack: end !important;
+  justify-content: flex-end !important;
+}
+
+.swagger-ui .auth-wrapper .authorize {
+  padding-right: 20px !important;
+}
+
+.swagger-ui .auth-container {
+  margin: 0 0 10px !important;
+  padding: 10px 20px !important;
+  border-bottom: 1px solid #ebebeb !important;
+}
+
+.swagger-ui .auth-container:last-of-type {
+  margin: 0 !important;
+  padding: 10px 20px !important;
+  border: 0 !important;
+}
+
+.swagger-ui .auth-container h4 {
+  margin: 5px 0 15px !important;
+  color: #fff !important;
+}
+
+.swagger-ui .auth-container .wrapper {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.swagger-ui .auth-container input[type="password"],
+.swagger-ui .auth-container input[type="text"] {
+  min-width: 230px !important;
+}
+
+.swagger-ui .auth-container .errors {
+  font-size: 12px !important;
+  padding: 10px !important;
+  border-radius: 4px !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui .scopes h2 {
+  font-size: 14px !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .scope-def {
+  padding: 0 0 20px !important;
+}
+
+.swagger-ui .errors-wrapper {
+  margin: 20px !important;
+  padding: 10px 20px !important;
+  -webkit-animation: scaleUp 0.5s !important;
+  animation: scaleUp 0.5s !important;
+  border: 2px solid #f93e3e !important;
+  border-radius: 4px !important;
+  background: rgba(249, 62, 62, 0.1) !important;
+}
+
+.swagger-ui .errors-wrapper .error-wrapper {
+  margin: 0 0 10px !important;
+}
+
+.swagger-ui .errors-wrapper .errors h4 {
+  font-size: 14px !important;
+  margin: 0 !important;
+  font-family: Source Code Pro, monospace !important;
+  font-weight: 600 !important;
+  color: #fff !important;
+}
+
+.swagger-ui .errors-wrapper hgroup {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-align: center !important;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+}
+
+.swagger-ui .errors-wrapper hgroup h4 {
+  font-size: 20px !important;
+  margin: 0 !important;
+  -webkit-box-flex: 1 !important;
+  -ms-flex: 1 !important;
+  flex: 1 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+@-webkit-keyframes scaleUp {
+  0% {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleUp {
+  0% {
+    -webkit-transform: scale(0.8);
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.swagger-ui .Resizer.vertical.disabled {
+  display: none !important;
+}
+
+/*# sourceMappingURL=swagger-ui.css.map*/
+
+/**
+ * Swagger UI Theme Overrides
+ *
+ * Theme: Newspaper
+ * Author: Mark Ostrander
+ * Github: https://github.com/ostranme/swagger-ui-themes
+ */
+
+.swagger-ui .opblock.opblock-post {
+  border-color: #272b30 !important;
+  background: rgba(34, 34, 34, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-post .opblock-summary-method {
+  background: #30a46c !important;
+}
+
+.swagger-ui .opblock.opblock-post .opblock-summary {
+  border-color: #272b30 !important;
+}
+
+.swagger-ui .opblock.opblock-put {
+  border-color: #272b30 !important;
+  background: rgba(34, 34, 34, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-put .opblock-summary-method {
+  background: #222222 !important;
+}
+
+.swagger-ui .opblock.opblock-put .opblock-summary {
+  border-color: #272b30 !important;
+}
+
+.swagger-ui .opblock.opblock-delete {
+  border-color: #272b30 !important;
+  background: rgba(34, 34, 34, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-delete .opblock-summary-method {
+  background: #222222 !important;
+}
+
+.swagger-ui .opblock.opblock-delete .opblock-summary {
+  border-color: #272b30 !important;
+}
+
+.swagger-ui .opblock.opblock-get {
+  border-color: #272b30 !important;
+  background: rgba(34, 34, 34, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-get .opblock-summary-method {
+  background: #3385ff !important;
+}
+
+.swagger-ui .opblock.opblock-get .opblock-summary {
+  border-color: #272b30 !important;
+}
+
+.swagger-ui .opblock.opblock-patch {
+  border-color: #272b30 !important;
+  background: rgba(34, 34, 34, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-patch .opblock-summary-method {
+  background: #222222 !important;
+}
+
+.swagger-ui .opblock.opblock-patch .opblock-summary {
+  border-color: #272b30 !important;
+}
+
+.swagger-ui .opblock.opblock-head {
+  border-color: #272b30 !important;
+  background: rgba(34, 34, 34, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-head .opblock-summary-method {
+  background: #222222 !important;
+}
+
+.swagger-ui .opblock.opblock-head .opblock-summary {
+  border-color: #272b30 !important;
+}
+
+.swagger-ui .opblock.opblock-options {
+  border-color: #272b30 !important;
+  background: rgba(34, 34, 34, 0.1) !important;
+}
+
+.swagger-ui .opblock.opblock-options .opblock-summary-method {
+  background: #222222 !important;
+}
+
+.swagger-ui .opblock.opblock-options .opblock-summary {
+  border-color: #272b30 !important;
+}
+
+.swagger-ui .topbar {
+  padding: 8px 30px !important;
+  background-color: #222222 !important;
+}
+.swagger-ui .topbar .download-url-wrapper input[type="text"] {
+  min-width: 350px !important;
+  margin: 0 !important;
+  border: 2px solid #272b30 !important;
+  border-radius: 4px 0 0 4px !important;
+  outline: none !important;
+}
+
+.swagger-ui .topbar .download-url-wrapper .download-url-button {
+  font-size: 16px !important;
+  font-weight: 700 !important;
+  padding: 4px 40px !important;
+  border: none !important;
+  border-radius: 0 4px 4px 0 !important;
+  background: #272b30 !important;
+  font-family: Titillium Web, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .info a {
+  font-size: 14px !important;
+  -webkit-transition: all 0.4s !important;
+  transition: all 0.4s !important;
+  font-family: Open Sans, sans-serif !important;
+  color: #fff !important;
+}
+
+.swagger-ui .info a:hover {
+  color: #fff !important;
+}
+
+.swagger-ui .btn.authorize {
+  line-height: 1 !important;
+  display: inline !important;
+  /* color: #0E0E10!important;
+  border-color: #fff!important;
+  background: #fff!important; */
+}
+.swagger-ui .btn.authorize svg {
+  fill: #49cc90 !important;
+}
+
+.swagger-ui .parameter__type {
+  color: #5189f8 !important;
+}
+
+.swagger-ui .parameter__in {
+  color: orange !important;
+}
+
+.swager-ui .opblock .tab-header .tab-item.active {
+  color: #0e0e10 !important;
+}
+
+.swagger-ui .model .property,
+.swagger-ui .model .property.primitive {
+  color: #fff !important;
+}
+
+.swagger-ui .auth-btn-wrapper .btn-done {
+  color: #fff !important;
+}
+
+.swagger-ui .opblock-control-arrow {
+  background: none !important;
+  border: none !important;
+  text-align: center !important;
+  padding: 4px !important;
+  border-radius: 1000px !important;
+  overflow: hidden !important;
+}
+
+.swagger-ui .button {
+  margin-right: 5px !important;
+}
+
+.swagger-ui .renderedMarkdown {
+  color: #fff !important;
+}
+
+.swagger-ui textarea {
+  background-color: #333333 !important;
+}
+
+.swagger-ui .copy-to-clipboard {
+  display: none !important;
+}
+
+.swagger-ui .response-col_links i {
+  color: #fff !important;
+}
+
+.swagger-ui input {
+  border: none !important;
+}
+
+.swagger-ui .nostyle span {
+  font-size: 20px !important;
+}
+
+.swagger-ui .opblock-summary-path .nostyle span {
+  font-size: 14px !important;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/page.tsx
new file mode 100644
index 00000000000..691b755db0f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/page.tsx
@@ -0,0 +1,13 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { EngineExplorer } from "./components/engine-explorer";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return <EngineExplorer instanceUrl={instance.url} authToken={authToken} />;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/layout.tsx
new file mode 100644
index 00000000000..99850d1ad6d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/layout.tsx
@@ -0,0 +1,134 @@
+import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
+import { getValidAccount } from "../../../../../../../account/settings/getAccount";
+import { getAuthToken } from "../../../../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../../../../login/loginRedirect";
+import { getEngineInstance } from "../../_utils/getEngineInstance";
+import { EngineErrorPage } from "./_components/EngineErrorPage";
+import { EngineSidebarLayout } from "./_components/EnginePageLayout";
+import { EnsureEnginePermission } from "./_components/EnsureEnginePermission";
+import { EngineVersionBadge } from "./_components/version";
+
+export default async function Layout(props: {
+  params: Promise<{
+    team_slug: string;
+    engineId: string;
+  }>;
+  children: React.ReactNode;
+}) {
+  const params = await props.params;
+  const account = await getValidAccount();
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    loginRedirect(`/team/${params.team_slug}/~/engine/${params.engineId}`);
+  }
+
+  const instance = await getEngineInstance({
+    teamIdOrSlug: params.team_slug,
+    authToken,
+    engineId: params.engineId,
+    accountId: account.id,
+  });
+
+  const engineRootLayoutPath = `/team/${params.team_slug}/~/engine`;
+
+  if (!instance) {
+    return (
+      <EngineSidebarLayout
+        engineId={params.engineId}
+        teamSlug={params.team_slug}
+      >
+        <EngineErrorPage rootPath={engineRootLayoutPath}>
+          Engine Instance Not Found
+        </EngineErrorPage>
+      </EngineSidebarLayout>
+    );
+  }
+
+  return (
+    <ChakraProviderSetup>
+      <div className="flex grow flex-col">
+        <EngineInstanceHeader
+          instance={instance}
+          rootPath={engineRootLayoutPath}
+          teamSlug={params.team_slug}
+        />
+
+        <EngineSidebarLayout
+          engineId={params.engineId}
+          teamSlug={params.team_slug}
+        >
+          <EnsureEnginePermission
+            teamSlug={params.team_slug}
+            accountId={account.id}
+            authToken={authToken}
+            engineId={params.engineId}
+            instance={instance}
+          >
+            <div>{props.children}</div>
+          </EnsureEnginePermission>
+        </EngineSidebarLayout>
+      </div>
+    </ChakraProviderSetup>
+  );
+}
+
+function EngineInstanceHeader(props: {
+  instance: EngineInstance;
+  rootPath: string;
+  teamSlug: string;
+}) {
+  const { instance } = props;
+  const cleanEngineURL = instance.url.endsWith("/")
+    ? instance.url.slice(0, -1)
+    : instance.url;
+
+  return (
+    <div className="border-border border-b">
+      <div className="container py-6">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href={props.rootPath}>Engines</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+          </BreadcrumbList>
+        </Breadcrumb>
+
+        <div className="h-4" />
+
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          {/* left */}
+          <div>
+            <h1 className="font-semibold text-3xl tracking-tight">
+              {instance.name}
+            </h1>
+            {!instance.name.startsWith("https://") && (
+              <CopyTextButton
+                copyIconPosition="right"
+                iconClassName="size-2.5"
+                textToShow={cleanEngineURL}
+                textToCopy={cleanEngineURL}
+                tooltip="Copy Engine URL"
+                variant="ghost"
+                className="-translate-x-2 h-auto px-2 py-1 text-muted-foreground"
+              />
+            )}
+          </div>
+
+          {/* Right */}
+          <EngineVersionBadge instance={instance} teamSlug={props.teamSlug} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
new file mode 100644
index 00000000000..be1d5daefdf
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import {
+  type EngineInstance,
+  useEngineQueueMetrics,
+  useEngineSystemMetrics,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { ChartAreaIcon, InfoIcon } from "lucide-react";
+import { Card, Heading, Text, TrackedLink } from "tw-components";
+import { ErrorRate } from "./ErrorRate";
+import { Healthcheck } from "./Healthcheck";
+import { StatusCodes } from "./StatusCodes";
+
+interface EngineStatusProps {
+  instance: EngineInstance;
+  teamSlug: string;
+  authToken: string;
+}
+
+export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
+  instance,
+  teamSlug,
+  authToken,
+}) => {
+  const systemMetricsQuery = useEngineSystemMetrics(instance.id, teamSlug);
+  const queueMetricsQuery = useEngineQueueMetrics({
+    authToken,
+    instanceUrl: instance.url,
+    pollInterval: 10_000,
+  });
+
+  let systemMetricsPanel = <Spinner className="h-4 w-4" />;
+  if (!systemMetricsQuery.data || systemMetricsQuery.isError) {
+    systemMetricsPanel = (
+      <Card p={8}>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-row items-center gap-2">
+            <InfoIcon className="size-4" />
+            <Heading size="title.xs">
+              System metrics are unavailable for self-hosted Engine.
+            </Heading>
+          </div>
+          <Text>
+            Upgrade to a{" "}
+            <TrackedLink
+              href={`/team/${teamSlug}/~/engine/create`}
+              isExternal
+              color="blue.500"
+              category="engine"
+              label="metrics-cloud-hosted-upsell"
+            >
+              Engine instance managed by thirdweb
+            </TrackedLink>{" "}
+            to view these metrics.
+          </Text>
+        </div>
+      </Card>
+    );
+  } else {
+    systemMetricsPanel = (
+      <Card p={16}>
+        <div className="flex flex-col gap-4">
+          <div className="-mb-2 flex flex-row items-center gap-2">
+            <ChartAreaIcon className="size-4" />
+            <Heading size="title.md">System Metrics</Heading>
+          </div>
+
+          <div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <Healthcheck instance={instance} />
+          </div>
+          <StatusCodes
+            datapoints={systemMetricsQuery.data.result.statusCodes}
+          />
+          <ErrorRate datapoints={systemMetricsQuery.data.result.errorRate} />
+        </div>
+      </Card>
+    );
+  }
+
+  let queueMetricsPanel = (
+    <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-border">
+      <Spinner className="size-6" />
+    </div>
+  );
+
+  if (
+    !queueMetricsQuery.isPending &&
+    (!queueMetricsQuery.data || queueMetricsQuery.isError)
+  ) {
+    queueMetricsPanel = (
+      <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-border">
+        No Data Available
+      </div>
+    );
+  } else if (queueMetricsQuery.data) {
+    const numQueued = queueMetricsQuery.data.result.queued;
+    const numPending = queueMetricsQuery.data.result.pending;
+    const msToSend = queueMetricsQuery.data.result.latency?.msToSend;
+    const msToMine = queueMetricsQuery.data.result.latency?.msToMine;
+
+    queueMetricsPanel = (
+      <Card p={8}>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-row items-center gap-2">
+            <Heading size="title.md">Queue Metrics</Heading>
+          </div>
+
+          <div className="flex flex-col gap-6 lg:flex-row lg:gap-12">
+            <div className="flex-col gap-y-4">
+              <h2 className="font-semibold"> Queued</h2>
+              <p className="text-muted-foreground">{numQueued}</p>
+            </div>
+            <div className="flex-col gap-y-4">
+              <h2 className="font-semibold">Pending</h2>
+              <p className="text-muted-foreground">{numPending}</p>
+            </div>
+
+            {msToSend && (
+              <div className="flex-col gap-y-4">
+                <h2 className="font-semibold">Time to send</h2>
+                <p className="text-muted-foreground">
+                  p50 {(msToSend.p50 / 1000).toFixed(2)}s, p90{" "}
+                  {(msToSend.p90 / 1000).toFixed(2)}s
+                </p>
+              </div>
+            )}
+            {msToMine && (
+              <div className="flex-col gap-y-4">
+                <h2 className="font-semibold">Time to mine</h2>
+                <p className="text-muted-foreground">
+                  p50 {(msToMine.p50 / 1000).toFixed(2)}s, p90{" "}
+                  {(msToMine.p90 / 1000).toFixed(2)}s
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {systemMetricsPanel}
+      {queueMetricsPanel}
+    </div>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/ErrorRate.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/ErrorRate.tsx
new file mode 100644
index 00000000000..da8bbc42f8a
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/ErrorRate.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { type JSX, useMemo } from "react";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import type { ResultItem } from "./StatusCodes";
+
+function transformPrometheusData(timeseriesDatapoints: ResultItem[]) {
+  const results = [];
+  for (const datapoint of timeseriesDatapoints) {
+    for (const [timestamp, value] of datapoint.values) {
+      results.push({
+        time: new Date(timestamp * 1000).toISOString(),
+        value: value,
+      });
+    }
+  }
+
+  return {
+    data: results,
+    tags: ["value"],
+  };
+}
+
+export function ErrorRate({ datapoints }: { datapoints: ResultItem[] }) {
+  const monitorData = transformPrometheusData(datapoints);
+
+  const chartConfig: { [key: string]: { label: string; color: string } } = {
+    value: {
+      label: "Errors",
+      color: "hsl(var(--chart-5))",
+    },
+  } satisfies ChartConfig;
+
+  const areaCharts = useMemo(() => {
+    const charts: JSX.Element[] = [];
+    if (monitorData.tags === undefined) {
+      return <Spinner className="mx-auto size-8" />;
+    }
+    for (const tag of monitorData.tags) {
+      charts.push(
+        <Bar
+          key={tag}
+          dataKey={tag}
+          type="natural"
+          fill={`var(--color-${tag})`}
+          fillOpacity={0.3}
+          stroke={`var(--color-${tag})`}
+          stackId="a"
+        />,
+      );
+    }
+    return charts;
+  }, [monitorData]);
+
+  return (
+    <Card className="flex flex-col gap-4">
+      <CardHeader>
+        <CardTitle className="text-lg">Error Count</CardTitle>
+        <CardDescription>The total 5xx count (last 24 hours)</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart accessibilityLayer data={monitorData.data}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => {
+                const date = new Date(value);
+                return date.toLocaleTimeString("en-US", {
+                  hour: "numeric",
+                  minute: "numeric",
+                  second: undefined,
+                  localeMatcher: "lookup",
+                });
+              }}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickCount={3}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            {areaCharts}
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/Healthcheck.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/Healthcheck.tsx
new file mode 100644
index 00000000000..24e8b3ca65f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/Healthcheck.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import {
+  type EngineInstance,
+  useEngineSystemHealth,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { PrimaryInfoItem } from "app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/primary-info-item";
+
+export function Healthcheck({ instance }: { instance: EngineInstance }) {
+  const query = useEngineSystemHealth(instance.url, 5_000);
+
+  return (
+    <>
+      {/* Engine Reachability */}
+      <PrimaryInfoItem title="Engine" titleIcon={<PulseDot />}>
+        <div className="flex items-center gap-1">
+          {query.isSuccess ? (
+            <ToolTipLabel label="Working">
+              <div className="text-lg text-success-text">Reachable</div>
+            </ToolTipLabel>
+          ) : query.isError ? (
+            <ToolTipLabel label="Not Working">
+              <div className="text-destructive-text text-lg">Not Reachable</div>
+            </ToolTipLabel>
+          ) : (
+            <div className="flex h-[28px] w-[70px] py-1">
+              <Skeleton className="h-full w-full" />
+            </div>
+          )}
+        </div>
+      </PrimaryInfoItem>
+    </>
+  );
+}
+
+function PulseDot() {
+  return (
+    <ToolTipLabel label="Live Data">
+      <span className="relative flex size-3">
+        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" />
+        <span className="relative inline-flex size-3 rounded-full bg-primary" />
+      </span>
+    </ToolTipLabel>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/StatusCodes.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/StatusCodes.tsx
new file mode 100644
index 00000000000..676379ae624
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/StatusCodes.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { type JSX, useMemo } from "react";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+export interface ResultItem {
+  metric: {
+    code: string;
+  };
+  values: [number, number][];
+}
+
+function getReturnedCodes(result: ResultItem[]) {
+  const seriesCodes: { [key: string]: string | null } = {};
+  for (const item of result.reverse()) {
+    seriesCodes[item.metric.code] = null;
+  }
+  return seriesCodes;
+}
+
+function transformPrometheusData(timeseriesDatapoints: ResultItem[]) {
+  const codes = getReturnedCodes(timeseriesDatapoints);
+  const timeMap = new Map();
+
+  for (const datapoint of timeseriesDatapoints) {
+    const code = datapoint.metric.code;
+
+    for (const [timestamp, value] of datapoint.values) {
+      if (!timeMap.has(timestamp)) {
+        timeMap.set(timestamp, {
+          time: new Date(timestamp * 1000).toISOString(),
+          ...codes,
+        });
+      }
+
+      const timeItem = timeMap.get(timestamp);
+      timeItem[code] = value;
+    }
+  }
+
+  return {
+    data: Array.from(timeMap.values()),
+    tags: Object.keys(codes),
+  };
+}
+
+export function StatusCodes({ datapoints }: { datapoints: ResultItem[] }) {
+  const monitorData = transformPrometheusData(datapoints);
+
+  const chartConfig = useMemo(() => {
+    if (!monitorData || !monitorData.data || !monitorData.tags) {
+      return {};
+    }
+
+    const config: { [key: string]: { label: string; color: string } } = {};
+    for (const tag of monitorData.tags) {
+      config[tag] = {
+        label: tag,
+        color:
+          Number.parseInt(tag) < 400
+            ? "hsl(var(--chart-2))"
+            : Number.parseInt(tag) < 500
+              ? "hsl(var(--chart-3))"
+              : "hsl(var(--chart-5))",
+      };
+    }
+
+    return config;
+  }, [monitorData]);
+
+  const areaCharts = useMemo(() => {
+    const charts: JSX.Element[] = [];
+    if (!monitorData || !monitorData.data || !monitorData.tags) {
+      return <Spinner className="mx-auto size-8" />;
+    }
+
+    for (const tag of monitorData.tags) {
+      charts.push(
+        <Area
+          key={tag}
+          dataKey={tag}
+          type="step"
+          fill={`var(--color-${tag})`}
+          fillOpacity={0.3}
+          stroke={`var(--color-${tag})`}
+          stackId="a"
+        />,
+      );
+    }
+    return charts.reverse();
+  }, [monitorData]);
+
+  return (
+    <Card className="flex flex-col gap-4">
+      <CardHeader>
+        <CardTitle className="text-lg">Status Codes</CardTitle>
+        <CardDescription>
+          Total requests by HTTP status (last 24 hours)
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <AreaChart accessibilityLayer data={monitorData.data}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => {
+                const date = new Date(value);
+                return date.toLocaleTimeString("en-US", {
+                  hour: "numeric",
+                  minute: "numeric",
+                  second: undefined,
+                  localeMatcher: "lookup",
+                });
+              }}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickCount={3}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            {areaCharts}
+            <ChartLegend content={<ChartLegendContent />} />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/page.tsx
new file mode 100644
index 00000000000..f53b8877964
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/page.tsx
@@ -0,0 +1,19 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { EngineSystemMetrics } from "./components/EngineSystemMetrics";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return (
+    <EngineSystemMetrics
+      instance={instance}
+      teamSlug={params.team_slug}
+      authToken={authToken}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
new file mode 100644
index 00000000000..2237602b7a1
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
@@ -0,0 +1,732 @@
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import { FormItem } from "@/components/ui/form";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { engineKeys } from "@3rdweb-sdk/react";
+import {
+  type BackendWallet,
+  useEngineBackendWalletBalance,
+  useEngineDeleteBackendWallet,
+  useEngineSendTokens,
+  useEngineUpdateBackendWallet,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Input,
+  InputGroup,
+  InputRightAddon,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  type UseDisclosureReturn,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { type ColumnDef, createColumnHelper } from "@tanstack/react-table";
+import { ChainIconClient } from "components/icons/ChainIcon";
+import { TWTable } from "components/shared/TWTable";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useAllChainsData } from "hooks/chains/allChains";
+import { EngineBackendWalletOptions } from "lib/engine";
+import { useV5DashboardChain } from "lib/v5-adapter";
+import {
+  DownloadIcon,
+  ExternalLinkIcon,
+  PencilIcon,
+  RefreshCcwIcon,
+  TrashIcon,
+  TriangleAlertIcon,
+  UploadIcon,
+} from "lucide-react";
+import Link from "next/link";
+import QRCode from "qrcode";
+import { useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { type ThirdwebClient, getAddress } from "thirdweb";
+import { shortenAddress } from "thirdweb/utils";
+import { FormHelperText, FormLabel, Text } from "tw-components";
+import { prettyPrintCurrency } from "./utils";
+
+interface BackendWalletsTableProps {
+  wallets: BackendWallet[];
+  instanceUrl: string;
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+  chainId: number;
+  client: ThirdwebClient;
+}
+
+interface BackendWalletDashboard extends BackendWallet {
+  balance: string;
+  authToken: string;
+}
+
+const columnHelper = createColumnHelper<BackendWalletDashboard>();
+
+interface BackendWalletBalanceCellProps {
+  instanceUrl: string;
+  address: string;
+  authToken: string;
+  chainId: number;
+  client: ThirdwebClient;
+}
+
+const BackendWalletBalanceCell: React.FC<BackendWalletBalanceCellProps> = ({
+  instanceUrl,
+  address,
+  authToken,
+  chainId,
+}) => {
+  const { data: backendWalletBalance, isFetching } =
+    useEngineBackendWalletBalance({
+      instanceUrl: instanceUrl,
+      address,
+      authToken,
+      chainId,
+    });
+  const chain = useV5DashboardChain(chainId);
+
+  if (!backendWalletBalance || isFetching) {
+    return <Skeleton className="h-6 w-36 rounded-lg" />;
+  }
+
+  const balanceDisplay = prettyPrintCurrency({
+    amount: backendWalletBalance.displayValue,
+    symbol: backendWalletBalance.symbol || chain.nativeCurrency?.symbol,
+  });
+
+  const balanceComponent = <span>{balanceDisplay}</span>;
+
+  const explorer = chain.blockExplorers?.[0];
+  if (!explorer) {
+    return balanceComponent;
+  }
+
+  return (
+    <Link
+      target="_blank"
+      href={`${explorer.url}/address/${address}`}
+      className="inline-flex items-center gap-2.5 rounded-lg px-2 py-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+    >
+      {balanceComponent}
+      <ExternalLinkIcon className="size-4" />
+    </Link>
+  );
+};
+
+export const BackendWalletsTable: React.FC<BackendWalletsTableProps> = ({
+  wallets,
+  instanceUrl,
+  isPending,
+  isFetched,
+  authToken,
+  chainId,
+  client,
+}) => {
+  const editDisclosure = useDisclosure();
+  const receiveDisclosure = useDisclosure();
+  const sendDisclosure = useDisclosure();
+  const deleteDisclosure = useDisclosure();
+  const queryClient = useQueryClient();
+
+  const columns = useMemo(() => {
+    return [
+      columnHelper.accessor("address", {
+        header: "Address",
+        cell: (cell) => {
+          const address = cell.getValue();
+          return <WalletAddress address={getAddress(address)} />;
+        },
+      }),
+      columnHelper.accessor("label", {
+        header: "Label",
+        cell: (cell) => {
+          return (
+            <Text isTruncated maxW={300}>
+              {cell.getValue()}
+            </Text>
+          );
+        },
+      }),
+      columnHelper.accessor("type", {
+        header: "Type",
+        cell: (cell) => {
+          return <Badge variant="outline">{cell.getValue()}</Badge>;
+        },
+      }),
+      columnHelper.accessor("address", {
+        header: () => (
+          <div className="flex w-[180px] items-center gap-1.5">
+            Balance
+            <ToolTipLabel
+              label="Refresh Balance"
+              contentClassName="capitalize font-normal tracking-normal leading-normal"
+            >
+              <Button
+                className="z-20 h-auto p-1.5 [&[data-pending='true']_svg]:animate-spin"
+                variant="ghost"
+                size="sm"
+                onClick={async (e) => {
+                  const buttonEl = e.currentTarget;
+                  buttonEl.setAttribute("data-pending", "true");
+                  await queryClient.invalidateQueries({
+                    queryKey: engineKeys.backendWalletBalanceAll(),
+                  });
+                  buttonEl.setAttribute("data-pending", "false");
+                }}
+              >
+                <RefreshCcwIcon className="size-4" />
+              </Button>
+            </ToolTipLabel>
+          </div>
+        ),
+        cell: (cell) => {
+          const address = cell.getValue();
+          return (
+            <BackendWalletBalanceCell
+              instanceUrl={instanceUrl}
+              address={address}
+              authToken={authToken}
+              chainId={chainId}
+              client={client}
+            />
+          );
+        },
+        id: "balance",
+      }),
+    ];
+  }, [instanceUrl, authToken, chainId, queryClient, client]);
+
+  const [selectedBackendWallet, setSelectedBackendWallet] =
+    useState<BackendWallet>();
+
+  return (
+    <>
+      <TWTable
+        title="backend wallets"
+        data={wallets}
+        columns={columns as ColumnDef<BackendWallet, string>[]}
+        isPending={isPending}
+        isFetched={isFetched}
+        tableScrollableClassName="max-h-[1000px]"
+        tableContainerClassName="border-x-0 rounded-t-none border-b-0"
+        onMenuClick={[
+          {
+            icon: <PencilIcon className="size-4" />,
+            text: "Edit",
+            onClick: (wallet) => {
+              setSelectedBackendWallet(wallet);
+              editDisclosure.onOpen();
+            },
+          },
+          {
+            icon: <DownloadIcon className="size-4" />,
+            text: "Receive funds",
+            onClick: (wallet) => {
+              setSelectedBackendWallet(wallet);
+              receiveDisclosure.onOpen();
+            },
+          },
+          {
+            icon: <UploadIcon className="size-4" />,
+            text: "Send funds",
+            onClick: (wallet) => {
+              setSelectedBackendWallet(wallet);
+              sendDisclosure.onOpen();
+            },
+          },
+          {
+            icon: <TrashIcon className="size-4" />,
+            text: "Delete",
+            onClick: (wallet) => {
+              setSelectedBackendWallet(wallet);
+              deleteDisclosure.onOpen();
+            },
+            isDestructive: true,
+          },
+        ]}
+      />
+
+      {selectedBackendWallet && editDisclosure.isOpen && (
+        <EditModal
+          backendWallet={selectedBackendWallet}
+          disclosure={editDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+      {selectedBackendWallet && receiveDisclosure.isOpen && (
+        <ReceiveFundsModal
+          backendWallet={selectedBackendWallet}
+          disclosure={receiveDisclosure}
+        />
+      )}
+      {selectedBackendWallet && sendDisclosure.isOpen && (
+        <SendFundsModal
+          fromWallet={selectedBackendWallet}
+          backendWallets={wallets}
+          disclosure={sendDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+          chainId={chainId}
+          client={client}
+        />
+      )}
+      {selectedBackendWallet && deleteDisclosure.isOpen && (
+        <DeleteModal
+          backendWallet={selectedBackendWallet}
+          disclosure={deleteDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+    </>
+  );
+};
+
+const EditModal = ({
+  backendWallet,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: {
+  backendWallet: BackendWallet;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const updateBackendWallet = useEngineUpdateBackendWallet({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+
+  const [label, setLabel] = useState(backendWallet.label ?? "");
+
+  const onClick = async () => {
+    const promise = updateBackendWallet.mutateAsync(
+      {
+        walletAddress: backendWallet.address,
+        label,
+      },
+      {
+        onSuccess: () => {
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "update-backend-wallet",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          trackEvent({
+            category: "engine",
+            action: "update-backend-wallet",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+
+    toast.promise(promise, {
+      success: "Successfully updated backend wallet.",
+      error: "Failed to update backend wallet.",
+    });
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Update Backend Wallet</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <FormControl>
+              <FormLabel>Wallet Address</FormLabel>
+              <WalletAddress
+                address={backendWallet.address}
+                shortenAddress={false}
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Input
+                type="text"
+                value={label}
+                onChange={(e) => setLabel(e.target.value)}
+                placeholder="Enter a description for this backend wallet"
+              />
+            </FormControl>
+          </div>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button onClick={disclosure.onClose} variant="outline">
+            Cancel
+          </Button>
+          <Button type="submit" onClick={onClick}>
+            Save
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const ReceiveFundsModal = ({
+  backendWallet,
+  disclosure,
+}: {
+  backendWallet: BackendWallet;
+  disclosure: UseDisclosureReturn;
+}) => {
+  const qrCodeBase64Query = useQuery({
+    queryKey: ["engine", "receive-funds-qr-code", backendWallet.address],
+    // only run this if we have a backendWallet address
+    enabled: !!backendWallet.address,
+    // start out with empty string
+    placeholderData: "",
+    queryFn: async () => {
+      return new Promise<string>((resolve, reject) => {
+        QRCode.toDataURL(
+          backendWallet.address,
+          // biome-ignore lint/suspicious/noExplicitAny: FIXME
+          (error: any, dataUrl: string) => {
+            if (error) {
+              reject(error);
+            } else {
+              resolve(dataUrl);
+            }
+          },
+        );
+      });
+    },
+  });
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Receive Funds</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4 pb-8">
+            <Text w="full" textAlign="left">
+              Fund this address or QR code:
+            </Text>
+            <WalletAddress
+              address={backendWallet.address}
+              shortenAddress={false}
+            />
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={qrCodeBase64Query.data}
+              alt="QR code for receiving funds"
+              className="mx-auto flex w-[200px] rounded-lg"
+            />
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+interface SendFundsInput {
+  toAddress: string;
+  amount: number;
+}
+const SendFundsModal = ({
+  fromWallet,
+  backendWallets,
+  disclosure,
+  instanceUrl,
+  authToken,
+  chainId,
+  client,
+}: {
+  fromWallet: BackendWallet;
+  backendWallets: BackendWallet[];
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+  chainId: number;
+  client: ThirdwebClient;
+}) => {
+  const form = useForm<SendFundsInput>();
+  const sendTokens = useEngineSendTokens({
+    instanceUrl,
+    authToken,
+  });
+  const { idToChain } = useAllChainsData();
+  const { data: backendWalletBalance } = useEngineBackendWalletBalance({
+    instanceUrl,
+    address: fromWallet.address,
+    authToken,
+    chainId: chainId,
+  });
+  const chain = idToChain.get(chainId);
+  const toWalletDisclosure = useDisclosure();
+
+  if (!backendWalletBalance) {
+    return null;
+  }
+
+  const onSubmit = async (data: SendFundsInput) => {
+    const promise = sendTokens.mutateAsync(
+      {
+        chainId: chainId,
+        fromAddress: fromWallet.address,
+        toAddress: data.toAddress,
+        amount: data.amount,
+      },
+      {
+        onSuccess: () => {
+          disclosure.onClose();
+        },
+      },
+    );
+
+    toast.promise(promise, {
+      success: "Successfully sent a request to send funds.",
+      error: "Failed to send tokens.",
+    });
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent
+        as="form"
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="!bg-background rounded-lg border border-border"
+      >
+        <ModalHeader>Send Funds</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <FormControl>
+              <FormLabel>From</FormLabel>
+              <WalletAddress
+                address={fromWallet.address}
+                shortenAddress={false}
+              />
+            </FormControl>
+            <FormControl isRequired>
+              <FormLabel>To</FormLabel>
+              {toWalletDisclosure.isOpen ? (
+                <Input
+                  {...form.register("toAddress", { required: true })}
+                  placeholder="Enter a wallet address"
+                />
+              ) : (
+                <Select {...form.register("toAddress", { required: true })}>
+                  <option value="" disabled selected hidden>
+                    Select a backend wallet
+                  </option>
+                  {backendWallets
+                    .filter((wallet) => wallet.address !== fromWallet.address)
+                    .map((wallet) => (
+                      <option key={wallet.address} value={wallet.address}>
+                        {shortenAddress(wallet.address)}
+                        {wallet.label && ` (${wallet.label})`}
+                      </option>
+                    ))}
+                </Select>
+              )}
+              <FormHelperText textAlign="right">
+                <Button
+                  onClick={() => {
+                    form.resetField("toAddress");
+                    toWalletDisclosure.onToggle();
+                  }}
+                  variant="link"
+                >
+                  {toWalletDisclosure.isOpen
+                    ? "Or send to a backend wallet"
+                    : "Or send to a different wallet"}
+                </Button>
+              </FormHelperText>
+            </FormControl>
+            <FormControl isRequired>
+              <FormLabel>Amount</FormLabel>
+              <InputGroup>
+                <Input
+                  type="number"
+                  placeholder="Enter the amount to send"
+                  step="any"
+                  max={backendWalletBalance.displayValue}
+                  {...form.register("amount", { required: true })}
+                />
+                <InputRightAddon>
+                  {chain?.nativeCurrency.symbol}
+                </InputRightAddon>
+              </InputGroup>
+              <FormHelperText textAlign="right">
+                Current amount:{" "}
+                {prettyPrintCurrency({
+                  amount: backendWalletBalance.displayValue,
+                  symbol: backendWalletBalance.symbol,
+                })}
+              </FormHelperText>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Chain</FormLabel>
+              <Flex align="center" gap={2}>
+                <ChainIconClient
+                  className="size-3"
+                  src={chain?.icon?.url}
+                  client={client}
+                />
+                <Text>{chain?.name}</Text>
+              </Flex>
+            </FormControl>
+          </div>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button onClick={disclosure.onClose} variant="outline">
+            Cancel
+          </Button>
+          <Button type="submit" disabled={!form.formState.isValid}>
+            Send
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+function DeleteModal({
+  backendWallet,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: {
+  backendWallet: BackendWallet;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}) {
+  const deleteBackendWallet = useEngineDeleteBackendWallet({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+
+  const isLocalWallet =
+    backendWallet.type === "local" || backendWallet.type === "smart:local";
+  const [ackDeletion, setAckDeletion] = useState(false);
+
+  const onClick = () => {
+    const promise = deleteBackendWallet.mutateAsync(
+      { walletAddress: backendWallet.address },
+      {
+        onSuccess: () => {
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "delete-backend-wallet",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          trackEvent({
+            category: "engine",
+            action: "delete-backend-wallet",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+
+    toast.promise(promise, {
+      success: "Successfully deleted backend wallet.",
+      error: "Failed to delete backend wallet.",
+    });
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Delete Backend Wallet</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <FormItem>
+              <FormLabel>Wallet Type</FormLabel>
+              <div>
+                {
+                  EngineBackendWalletOptions.find(
+                    (opt) => opt.key === backendWallet.type,
+                  )?.name
+                }
+              </div>
+            </FormItem>
+            <FormItem>
+              <FormLabel>Wallet Address</FormLabel>
+              <WalletAddress
+                address={backendWallet.address}
+                shortenAddress={false}
+              />
+            </FormItem>
+          </div>
+
+          {isLocalWallet && (
+            <Alert variant="warning" className="mt-4">
+              <TriangleAlertIcon className="!text-warning-text size-4" />
+              <AlertTitle>This action is irreversible.</AlertTitle>
+
+              <AlertDescription className="!pl-0 pt-2">
+                <CheckboxWithLabel>
+                  <Checkbox
+                    checked={ackDeletion}
+                    onCheckedChange={(checked) => setAckDeletion(!!checked)}
+                  />
+                  I understand that access to this backend wallet and any
+                  remaining funds will be lost.
+                </CheckboxWithLabel>
+              </AlertDescription>
+            </Alert>
+          )}
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button onClick={disclosure.onClose} variant="outline">
+            Close
+          </Button>
+          <Button
+            type="submit"
+            variant="destructive"
+            onClick={onClick}
+            disabled={isLocalWallet && !ackDeletion}
+            className="gap-2"
+          >
+            {deleteBackendWallet.isPending && <Spinner className="size-4" />}
+            Delete
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
new file mode 100644
index 00000000000..5c5c19764dd
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
@@ -0,0 +1,333 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Form, FormDescription } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  type CreateBackendWalletInput,
+  type EngineInstance,
+  type WalletConfigResponse,
+  useEngineCreateBackendWallet,
+  useHasEngineFeature,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { Dialog } from "@radix-ui/react-dialog";
+import { useTrack } from "hooks/analytics/useTrack";
+import {
+  EngineBackendWalletOptions,
+  type EngineBackendWalletType,
+} from "lib/engine";
+import { CircleAlertIcon, PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import invariant from "tiny-invariant";
+
+interface CreateBackendWalletButtonProps {
+  instance: EngineInstance;
+  walletConfig: WalletConfigResponse;
+  teamSlug: string;
+  authToken: string;
+}
+
+export const CreateBackendWalletButton: React.FC<
+  CreateBackendWalletButtonProps
+> = ({ instance, walletConfig, teamSlug, authToken }) => {
+  const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
+    instance.url,
+    "HETEROGENEOUS_WALLET_TYPES",
+  );
+  const { isSupported: supportsSmartBackendWallets } = useHasEngineFeature(
+    instance.url,
+    "SMART_BACKEND_WALLETS",
+  );
+
+  const [isOpen, setIsOpen] = useState(false);
+  const createWallet = useEngineCreateBackendWallet({
+    instanceUrl: instance.url,
+    authToken,
+  });
+  const trackEvent = useTrack();
+
+  const form = useForm<CreateBackendWalletInput>({
+    defaultValues: { type: walletConfig.type },
+  });
+
+  const onSubmit = async (data: CreateBackendWalletInput) => {
+    const promise = createWallet.mutateAsync(data, {
+      onSuccess: () => {
+        setIsOpen(false);
+        trackEvent({
+          category: "engine",
+          action: "create-backend-wallet",
+          label: "success",
+          instance: instance.url,
+        });
+      },
+      onError: (error) => {
+        trackEvent({
+          category: "engine",
+          action: "create-backend-wallet",
+          label: "error",
+          instance: instance.url,
+          error,
+        });
+      },
+    });
+
+    toast.promise(promise, {
+      success: "Wallet created successfully",
+      error: "Failed to create wallet",
+    });
+  };
+
+  const walletType = form.watch("type");
+  const selectedOption = EngineBackendWalletOptions.find(
+    (opt) => opt.key === walletType,
+  );
+  invariant(selectedOption, "Selected a valid backend wallet type.");
+
+  const isCircleWallet =
+    walletType === "circle" || walletType === "smart:circle";
+
+  // List all wallet types only if Engine is updated to support it.
+  let walletTypeOptions = [selectedOption];
+  if (supportsSmartBackendWallets) {
+    walletTypeOptions = EngineBackendWalletOptions;
+  } else if (supportsMultipleWalletTypes) {
+    walletTypeOptions = EngineBackendWalletOptions.filter(
+      ({ key }) => !key.startsWith("smart:"),
+    );
+  }
+
+  const isNotConfigured =
+    (["aws-kms", "smart:aws-kms"].includes(walletType) &&
+      !walletConfig.awsAccessKeyId) ||
+    (["gcp-kms", "smart:gcp-kms"].includes(walletType) &&
+      !walletConfig.gcpKmsKeyRingId);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)} className="gap-2" size="sm">
+        <PlusIcon className="size-4" />
+        Create
+      </Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="overflow-hidden p-0">
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)}>
+              <div className="p-6">
+                <DialogHeader className="mb-4">
+                  <DialogTitle className="font-semibold text-2xl tracking-tight">
+                    Create Wallet
+                  </DialogTitle>
+                </DialogHeader>
+
+                <div className="flex flex-col gap-3">
+                  {/* Wallet type */}
+                  <FormFieldSetup
+                    label="Wallet Type"
+                    errorMessage={
+                      form.getFieldState("type", form.formState).error?.message
+                    }
+                    htmlFor="wallet-label"
+                    isRequired
+                    tooltip={null}
+                  >
+                    <Select
+                      onValueChange={(value) =>
+                        form.setValue("type", value as EngineBackendWalletType)
+                      }
+                      value={form.watch("type")}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {walletTypeOptions.map((option) => (
+                            <SelectItem key={option.key} value={option.key}>
+                              {option.name}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+
+                    <FormDescription className="py-2">
+                      Learn more about{" "}
+                      <Link
+                        href="https://portal.thirdweb.com/engine/features/backend-wallets"
+                        className="text-link-foreground hover:text-foreground"
+                      >
+                        backend wallet types
+                      </Link>
+                      .
+                    </FormDescription>
+                  </FormFieldSetup>
+
+                  {isNotConfigured ? (
+                    // Warning if not configured
+                    <Alert variant="warning">
+                      <CircleAlertIcon className="size-5" />
+                      <AlertTitle>
+                        {selectedOption?.name} is not yet configured
+                      </AlertTitle>
+                      <AlertDescription>
+                        Provide your credentials on the{" "}
+                        <Link
+                          href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
+                          className="text-link-foreground hover:text-foreground"
+                        >
+                          Configuration
+                        </Link>{" "}
+                        tab to enable backend wallets stored on{" "}
+                        {selectedOption?.name}.
+                      </AlertDescription>
+                    </Alert>
+                  ) : (
+                    <>
+                      {/* Label */}
+                      <FormFieldSetup
+                        key="label"
+                        label="Label"
+                        errorMessage={
+                          form.getFieldState("label", form.formState).error
+                            ?.message
+                        }
+                        htmlFor="wallet-label"
+                        isRequired
+                        tooltip={null}
+                      >
+                        <Input
+                          id="wallet-label"
+                          type="text"
+                          placeholder="A description to identify this backend wallet"
+                          {...form.register("label", { required: true })}
+                        />
+                      </FormFieldSetup>
+
+                      {/* Credential ID for Circle wallets */}
+                      {isCircleWallet && (
+                        <>
+                          <FormFieldSetup
+                            key="credentialId"
+                            label="Credential ID"
+                            errorMessage={
+                              form.getFieldState("credentialId", form.formState)
+                                .error?.message
+                            }
+                            htmlFor="credential-id"
+                            isRequired
+                            tooltip={null}
+                          >
+                            <Input
+                              id="credential-id"
+                              type="text"
+                              placeholder="Enter the Circle credential ID"
+                              {...form.register("credentialId", {
+                                required: isCircleWallet,
+                              })}
+                            />
+                            <FormDescription className="py-2">
+                              The ID of the Circle credential to use for this
+                              wallet. You can find this in the{" "}
+                              <Link
+                                href={`/team/${teamSlug}/~/engine/${instance.id}/wallet-credentials`}
+                                className="text-link-foreground hover:text-foreground"
+                              >
+                                Wallet Credentials
+                              </Link>{" "}
+                              section.
+                            </FormDescription>
+                          </FormFieldSetup>
+
+                          <FormFieldSetup
+                            key="isTestnet"
+                            label="Testnet"
+                            errorMessage={
+                              form.getFieldState("isTestnet", form.formState)
+                                .error?.message
+                            }
+                            htmlFor="is-testnet"
+                            tooltip={null}
+                            isRequired={false}
+                          >
+                            <div className="flex flex-col gap-2">
+                              <div className="flex items-center space-x-2">
+                                <Checkbox
+                                  id="is-testnet"
+                                  checked={form.watch("isTestnet")}
+                                  onCheckedChange={(checked) =>
+                                    form.setValue("isTestnet", !!checked)
+                                  }
+                                />
+                                <label
+                                  htmlFor="is-testnet"
+                                  className="text-sm leading-none opacity-70 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                >
+                                  Use testnet mode for creating backend wallet
+                                </label>
+                              </div>
+                              <FormDescription className="py-2">
+                                If your engine is configured with a testnet API
+                                Key for Circle, you can only create testnet
+                                wallets. A production API Key cannot be used for
+                                testnet transactions, and vice versa.{" "}
+                                <Link
+                                  href="https://developers.circle.com/w3s/sandbox-vs-production"
+                                  target="_blank"
+                                  className="text-link-foreground hover:text-foreground"
+                                >
+                                  Learn more
+                                </Link>
+                              </FormDescription>
+                            </div>
+                          </FormFieldSetup>
+                        </>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+
+              <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2 ">
+                <Button variant="outline" onClick={() => setIsOpen(false)}>
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  className="min-w-28 gap-2"
+                  disabled={
+                    !form.formState.isValid ||
+                    isNotConfigured ||
+                    createWallet.isPending
+                  }
+                >
+                  {createWallet.isPending && <Spinner className="size-4" />}
+                  Create
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/engine-overview.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/engine-overview.tsx
new file mode 100644
index 00000000000..5e53bdd1c20
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/engine-overview.tsx
@@ -0,0 +1,151 @@
+"use client";
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
+import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import {
+  type EngineInstance,
+  useEngineBackendWallets,
+  useEngineWalletConfig,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { useActiveWalletChain } from "thirdweb/react";
+import { BackendWalletsTable } from "./backend-wallets-table";
+import { CreateBackendWalletButton } from "./create-backend-wallet-button";
+import { ImportBackendWalletButton } from "./import-backend-wallet-button";
+import { TransactionCharts, TransactionsTable } from "./transactions-table";
+
+interface EngineOverviewProps {
+  instance: EngineInstance;
+  teamSlug: string;
+  authToken: string;
+}
+
+export const EngineOverview: React.FC<EngineOverviewProps> = ({
+  instance,
+  teamSlug,
+  authToken,
+}) => {
+  const client = useThirdwebClient();
+
+  return (
+    <div>
+      <BackendWalletsSection
+        instance={instance}
+        teamSlug={teamSlug}
+        authToken={authToken}
+        client={client}
+      />
+      <div className="h-10" />
+      <TransactionCharts instanceUrl={instance.url} authToken={authToken} />
+      <div className="h-10" />
+      <TransactionsTable
+        instanceUrl={instance.url}
+        authToken={authToken}
+        client={client}
+      />
+    </div>
+  );
+};
+
+function BackendWalletsSection(props: {
+  instance: EngineInstance;
+  teamSlug: string;
+  authToken: string;
+  client: ThirdwebClient;
+}) {
+  const { instance, teamSlug, authToken } = props;
+  const activeWalletChain = useActiveWalletChain();
+  const [_chainId, setChainId] = useState<number>();
+  const chainId = _chainId || activeWalletChain?.id || 1;
+
+  const backendWallets = useEngineBackendWallets({
+    instanceUrl: instance.url,
+    authToken,
+  });
+  const { data: walletConfig } = useEngineWalletConfig({
+    instanceUrl: instance.url,
+    authToken,
+  });
+
+  return (
+    <section className="rounded-lg border border-border bg-card">
+      <div className="flex flex-col gap-5 p-6 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <div className="flex items-center gap-3">
+            <h2 className="mb-1 font-semibold text-xl tracking-tight">
+              Backend Wallets
+            </h2>
+          </div>
+          <p className="text-muted-foreground text-sm leading-relaxed">
+            Engine sends blockchain transactions from backend wallets you own
+            and manage.
+          </p>
+          <p className="text-muted-foreground text-sm leading-relaxed">
+            Set up other wallet types from the{" "}
+            <UnderlineLink
+              href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
+            >
+              Configuration
+            </UnderlineLink>{" "}
+            tab, or{" "}
+            <TrackedUnderlineLink
+              href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
+              target="_blank"
+              label="learn-more"
+              category="engine"
+            >
+              learn more about backend wallets.
+            </TrackedUnderlineLink>
+          </p>
+        </div>
+
+        <div className="flex flex-col items-end gap-4 border-border max-md:w-full max-md:border-t max-md:pt-6">
+          {walletConfig && (
+            <div className="flex flex-row justify-end gap-3 max-md:w-full">
+              <ImportBackendWalletButton
+                instance={instance}
+                walletConfig={walletConfig}
+                teamSlug={teamSlug}
+                authToken={authToken}
+              />
+              <CreateBackendWalletButton
+                instance={instance}
+                walletConfig={walletConfig}
+                teamSlug={teamSlug}
+                authToken={authToken}
+              />
+            </div>
+          )}
+
+          <div className="flex justify-end">
+            <div className="flex items-center gap-2">
+              <span className="text-sm">Show balance for</span>
+              <div className="flex flex-row">
+                <SingleNetworkSelector
+                  chainId={chainId}
+                  onChange={setChainId}
+                  className="min-w-40 max-w-52 lg:max-w-60"
+                  popoverContentClassName="!w-[80vw] md:!w-[500px]"
+                  align="end"
+                  client={props.client}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <BackendWalletsTable
+        instanceUrl={instance.url}
+        wallets={backendWallets.data ?? []}
+        isPending={backendWallets.isPending}
+        isFetched={backendWallets.isFetched}
+        authToken={authToken}
+        chainId={chainId}
+        client={props.client}
+      />
+    </section>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
new file mode 100644
index 00000000000..cd6f8243187
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
@@ -0,0 +1,347 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { FormControl } from "@/components/ui/form";
+import { Form, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  type EngineInstance,
+  type ImportBackendWalletInput,
+  type WalletConfigResponse,
+  useEngineImportBackendWallet,
+  useHasEngineFeature,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import {
+  EngineBackendWalletOptions,
+  type EngineBackendWalletType,
+} from "lib/engine";
+import { CircleAlertIcon, CloudDownloadIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import invariant from "tiny-invariant";
+
+interface ImportBackendWalletButtonProps {
+  instance: EngineInstance;
+  walletConfig: WalletConfigResponse;
+  teamSlug: string;
+  authToken: string;
+}
+
+export const ImportBackendWalletButton: React.FC<
+  ImportBackendWalletButtonProps
+> = ({ instance, walletConfig, teamSlug, authToken }) => {
+  const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
+    instance.url,
+    "HETEROGENEOUS_WALLET_TYPES",
+  );
+  const { mutate: importBackendWallet, isPending } =
+    useEngineImportBackendWallet({
+      instanceUrl: instance.url,
+      authToken,
+    });
+
+  const { onSuccess, onError } = useTxNotifications(
+    "Wallet imported successfully.",
+    "Failed to import wallet.",
+  );
+  const trackEvent = useTrack();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [walletType, setWalletType] = useState<EngineBackendWalletType>(
+    walletConfig.type,
+  );
+  const form = useForm<ImportBackendWalletInput>();
+
+  const onSubmit = (raw: ImportBackendWalletInput) => {
+    // Submit only relevant fields.
+    const data: ImportBackendWalletInput = {
+      label: raw.label,
+    };
+    if (walletType === "local") {
+      data.privateKey = raw.privateKey;
+    } else if (walletType === "aws-kms") {
+      data.awsKmsArn = raw.awsKmsArn;
+    } else if (walletType === "gcp-kms") {
+      data.gcpKmsKeyId = raw.gcpKmsKeyId;
+      data.gcpKmsKeyVersionId = raw.gcpKmsKeyVersionId;
+    }
+
+    importBackendWallet(data, {
+      onSuccess: () => {
+        onSuccess();
+        setIsModalOpen(false);
+        form.reset();
+        trackEvent({
+          category: "engine",
+          action: "import-backend-wallet",
+          label: "success",
+          type: walletConfig?.type,
+          instance: instance.url,
+        });
+      },
+      onError: (error) => {
+        onError(error);
+        trackEvent({
+          category: "engine",
+          action: "import-backend-wallet",
+          label: "error",
+          type: walletConfig?.type,
+          instance: instance.url,
+          error,
+        });
+      },
+    });
+  };
+
+  const selectedOption = EngineBackendWalletOptions.find(
+    (opt) => opt.key === walletType,
+  );
+  invariant(selectedOption, "Selected a valid backend wallet type.");
+
+  // List all wallet types only if Engine is updated to support it.
+  // Disallow importing smart backend wallets.
+  const walletTypeOptions = supportsMultipleWalletTypes
+    ? EngineBackendWalletOptions.filter(({ key }) => !key.startsWith("smart:"))
+    : [selectedOption];
+
+  const isAwsKmsConfigured = !!walletConfig.awsAccessKeyId;
+  const isGcpKmsConfigured = !!walletConfig.gcpKmsKeyRingId;
+
+  // Custom validation logic because required fields depend on the wallet type.
+  const values = form.getValues();
+  const isFormValid =
+    (walletType === "local" && values.privateKey) ||
+    (walletType === "aws-kms" && values.awsKmsArn) ||
+    (walletType === "gcp-kms" &&
+      values.gcpKmsKeyId &&
+      values.gcpKmsKeyVersionId);
+
+  return (
+    <>
+      <Button
+        onClick={() => setIsModalOpen(true)}
+        variant="outline"
+        className="gap-2"
+        size="sm"
+      >
+        <CloudDownloadIcon className="size-4" />
+        Import
+      </Button>
+
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent className="p-0">
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)}>
+              <div className="p-6">
+                <DialogHeader className="mb-4">
+                  <DialogTitle className="font-semibold text-2xl tracking-tight">
+                    Import wallet
+                  </DialogTitle>
+                </DialogHeader>
+
+                <div className="flex flex-col gap-5">
+                  {/* Wallet type */}
+                  <FormItem>
+                    <FormLabel>Wallet Type</FormLabel>
+                    <FormControl>
+                      <Select
+                        onValueChange={(value) => {
+                          form.reset();
+                          setWalletType(value as EngineBackendWalletType);
+                        }}
+                        value={walletType}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            {walletTypeOptions.map((option) => (
+                              <SelectItem key={option.key} value={option.key}>
+                                {option.name}
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+
+                  {(walletType === "aws-kms" && !isAwsKmsConfigured) ||
+                  (walletType === "gcp-kms" && !isGcpKmsConfigured) ? (
+                    <Alert variant="warning">
+                      <CircleAlertIcon className="size-5" />
+                      <AlertTitle>
+                        {selectedOption?.name} is not yet configured
+                      </AlertTitle>
+                      <AlertDescription>
+                        Provide your credentials on the{" "}
+                        <Link
+                          href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
+                          className="text-link-foreground hover:text-foreground"
+                        >
+                          Configuration
+                        </Link>{" "}
+                        tab to enable backend wallets stored on{" "}
+                        {selectedOption?.name}.
+                      </AlertDescription>
+                    </Alert>
+                  ) : (
+                    <>
+                      {/* Label */}
+                      <FormFieldSetup
+                        key="label"
+                        label="Label"
+                        errorMessage={
+                          form.getFieldState("label", form.formState).error
+                            ?.message
+                        }
+                        htmlFor="wallet-label"
+                        isRequired={false}
+                        tooltip={null}
+                      >
+                        <Input
+                          id="wallet-label"
+                          type="text"
+                          placeholder="A description to identify this backend wallet"
+                          {...form.register("label")}
+                        />
+                      </FormFieldSetup>
+
+                      {/* Local */}
+                      {walletType === "local" ? (
+                        <FormFieldSetup
+                          key="privateKey"
+                          htmlFor="privateKey"
+                          label="Private key"
+                          errorMessage={
+                            form.getFieldState("privateKey", form.formState)
+                              .error?.message
+                          }
+                          isRequired
+                          tooltip={null}
+                        >
+                          <Input
+                            id="privateKey"
+                            placeholder="Your wallet private key"
+                            autoComplete="off"
+                            type="text"
+                            {...form.register("privateKey", {
+                              required: true,
+                              // TODO: add private key validation here
+                            })}
+                          />
+                        </FormFieldSetup>
+                      ) : walletType === "aws-kms" ? (
+                        <FormFieldSetup
+                          key="awsKmsArn"
+                          label="AWS KMS ARN"
+                          errorMessage={
+                            form.getFieldState("awsKmsArn", form.formState)
+                              .error?.message
+                          }
+                          htmlFor="awsKmsArn"
+                          isRequired
+                          tooltip={null}
+                        >
+                          <Input
+                            id="awsKmsArn"
+                            placeholder="arn:aws:kms:us-west-2:123456789012:key/2b7d8e0c-..."
+                            autoComplete="off"
+                            type="text"
+                            {...form.register("awsKmsArn", { required: true })}
+                          />
+                        </FormFieldSetup>
+                      ) : walletType === "gcp-kms" ? (
+                        <>
+                          <FormFieldSetup
+                            key="gcpKmsKeyId"
+                            htmlFor="gcpKmsKeyId"
+                            errorMessage={
+                              form.getFieldState("gcpKmsKeyId", form.formState)
+                                .error?.message
+                            }
+                            label="GCP KMS Key ID"
+                            isRequired
+                            tooltip={null}
+                          >
+                            <Input
+                              id="gcpKmsKeyId"
+                              placeholder="projects/my-project/locations/us-central1/keyRings/my-key-ring/cryptoKeys/my-key"
+                              autoComplete="off"
+                              type="text"
+                              {...form.register("gcpKmsKeyId", {
+                                required: true,
+                              })}
+                            />
+                          </FormFieldSetup>
+
+                          <FormFieldSetup
+                            key="gcpKmsKeyVersionId"
+                            label="GCP KMS Version ID"
+                            errorMessage={
+                              form.getFieldState(
+                                "gcpKmsKeyVersionId",
+                                form.formState,
+                              ).error?.message
+                            }
+                            htmlFor="gcpKmsKeyVersionId"
+                            isRequired
+                            tooltip={null}
+                          >
+                            <Input
+                              id="gcpKmsKeyVersionId"
+                              placeholder="1"
+                              autoComplete="off"
+                              type="text"
+                              {...form.register("gcpKmsKeyVersionId", {
+                                required: true,
+                              })}
+                            />
+                          </FormFieldSetup>
+                        </>
+                      ) : null}
+                    </>
+                  )}
+                </div>
+              </div>
+
+              <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2 ">
+                <Button variant="outline" onClick={() => setIsModalOpen(false)}>
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  className="min-w-28 gap-2"
+                  disabled={!isFormValid || isPending}
+                >
+                  {isPending && <Spinner className="size-4" />}
+                  Import
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transaction-timeline.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transaction-timeline.tsx
new file mode 100644
index 00000000000..3900ef08c7f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transaction-timeline.tsx
@@ -0,0 +1,295 @@
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import type { Transaction } from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Step,
+  StepIndicator,
+  StepSeparator,
+  StepStatus,
+  Stepper,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useMutation } from "@tanstack/react-query";
+import { format } from "date-fns";
+import { CheckIcon } from "lucide-react";
+import { useRef } from "react";
+import { toast } from "sonner";
+import { Button, FormLabel, Text } from "tw-components";
+
+interface TimelineStep {
+  step: string;
+  isLatest?: boolean;
+  date?: string | null;
+  // biome-ignore lint/suspicious/noExplicitAny: FIXME
+  cta?: any;
+}
+
+export const TransactionTimeline = ({
+  transaction,
+  instanceUrl,
+  authToken,
+}: {
+  transaction: Transaction;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  let timeline: TimelineStep[];
+  switch (transaction?.status) {
+    case "queued":
+      // Queued: [ queued, _sent, _mined ]
+      timeline = [
+        {
+          isLatest: true,
+          step: "Queued",
+          date: transaction.queuedAt,
+          cta: (
+            <CancelTransactionButton
+              transaction={transaction}
+              instanceUrl={instanceUrl}
+              authToken={authToken}
+            />
+          ),
+        },
+        { step: "Sent" },
+        { step: "Mined" },
+      ];
+      break;
+    case "sent":
+      // Sent: [ queued, sent, _mined ]
+      timeline = [
+        { step: "Queued", date: transaction.queuedAt },
+        {
+          isLatest: true,
+          step: "Sent",
+          date: transaction.sentAt,
+          cta: (
+            <CancelTransactionButton
+              transaction={transaction}
+              instanceUrl={instanceUrl}
+              authToken={authToken}
+            />
+          ),
+        },
+        { step: "Mined" },
+      ];
+      break;
+    case "mined":
+      // Mined: [ queued, sent, mined ]
+      timeline = [
+        { step: "Queued", date: transaction.queuedAt },
+        { step: "Sent", date: transaction.sentAt },
+        { isLatest: true, step: "Mined", date: transaction.minedAt },
+      ];
+      break;
+    case "cancelled":
+      // Mined: [ queued, sent, cancelled, _mined ]
+      timeline = [
+        { step: "Queued", date: transaction.queuedAt },
+        { step: "Sent", date: transaction.sentAt },
+        { isLatest: true, step: "Cancelled", date: transaction.cancelledAt },
+        { step: "Mined" },
+      ];
+      break;
+    case "errored":
+      if (transaction.sentAt) {
+        // Errored with sentAt: [ queued, sent, errored, _mined ]
+        timeline = [
+          { step: "Queued", date: transaction.queuedAt },
+          { step: "Sent", date: transaction.sentAt },
+          { isLatest: true, step: "Failed" },
+          { step: "Mined" },
+        ];
+      } else {
+        // Errored without sentAt: [ queued, errored, _sent, _mined ]
+        timeline = [
+          { step: "Queued", date: transaction.queuedAt },
+          { isLatest: true, step: "Failed" },
+          { step: "Sent" },
+          { step: "Mined" },
+        ];
+      }
+      break;
+    default:
+      return null;
+  }
+
+  const activeIdx = timeline.findIndex((s) => !!s.isLatest);
+
+  return (
+    <Stepper
+      index={activeIdx}
+      orientation="vertical"
+      height={12 * timeline.length}
+      gap="0"
+      size="xs"
+    >
+      {timeline.map((step, index) => {
+        const isFilled = index <= activeIdx;
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
+          <Step key={index} as={Flex} w="full">
+            <StepIndicator>
+              <StepStatus
+                complete={<CheckIcon className="size-4" />}
+                active={<CheckIcon className="size-4" />}
+              />
+            </StepIndicator>
+            <Flex justify="space-between" w="full" mt={-1}>
+              <div className="flex flex-col gap-2">
+                {isFilled ? (
+                  <Text>{step.step}</Text>
+                ) : (
+                  <Text color="gray.600">{step.step}</Text>
+                )}
+                {step.cta}
+              </div>
+              {step.date && (
+                <Text fontSize="small">
+                  {prettyPrintTimestamp(step.date, index === 0)}
+                </Text>
+              )}
+            </Flex>
+            <StepSeparator />
+          </Step>
+        );
+      })}
+    </Stepper>
+  );
+};
+
+const prettyPrintTimestamp = (
+  t: string | undefined,
+  showDate = false,
+): string | null => {
+  if (!t) {
+    return null;
+  }
+
+  const date = new Date(t);
+  return showDate
+    ? date.toLocaleString(undefined, { timeZoneName: "short" })
+    : date.toLocaleTimeString(undefined, { timeZoneName: "short" });
+};
+
+const CancelTransactionButton = ({
+  transaction,
+  instanceUrl,
+  authToken,
+}: {
+  transaction: Transaction;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const cancelTransactionMutation = useMutation({
+    mutationFn: async () => {
+      const resp = await fetch(`${instanceUrl}transaction/cancel`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${authToken}`,
+          "x-backend-wallet-address": transaction.fromAddress ?? "",
+        },
+        body: JSON.stringify({ queueId: transaction.queueId }),
+      });
+
+      if (!resp.ok) {
+        const json = await resp.json();
+        throw json.error?.message;
+      }
+    },
+  });
+
+  const cancelTransactions = async () => {
+    const promise = cancelTransactionMutation.mutateAsync();
+    toast.promise(promise, {
+      success: "Transaction cancelled successfully",
+      error: "Failed to cancel transaction",
+    });
+
+    promise.then(() => {
+      onClose();
+    });
+  };
+
+  return (
+    <>
+      {/* @ts-expect-error - this works fine */}
+      <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={closeButtonRef}>
+        <ModalOverlay />
+        <ModalContent className="!bg-background rounded-lg border border-border">
+          <ModalHeader>Cancel Transaction</ModalHeader>
+          <ModalBody>
+            <div className="flex flex-col gap-4">
+              <Text>Are you sure you want to cancel this transaction?</Text>
+              <FormControl>
+                <FormLabel>Queue ID</FormLabel>
+                <Text fontFamily="mono">{transaction.queueId}</Text>
+              </FormControl>
+              <FormControl>
+                <FormLabel>Submitted at</FormLabel>
+                <Text>
+                  {format(new Date(transaction.queuedAt ?? ""), "PP pp z")}
+                </Text>
+              </FormControl>
+              <FormControl>
+                <FormLabel>From</FormLabel>
+                <WalletAddress
+                  address={transaction.fromAddress ?? ""}
+                  shortenAddress={false}
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>To</FormLabel>
+                <CopyAddressButton
+                  address={transaction.toAddress ?? ""}
+                  copyIconPosition="right"
+                />
+              </FormControl>
+              <FormControl>
+                <FormLabel>Function</FormLabel>
+                <Text fontFamily="mono">{transaction.functionName}</Text>
+              </FormControl>
+
+              <Text>
+                If this transaction is already submitted, it may complete before
+                the cancellation is submitted.
+              </Text>
+            </div>
+          </ModalBody>
+
+          <ModalFooter as={Flex} gap={3}>
+            <Button
+              ref={closeButtonRef}
+              type="button"
+              onClick={onClose}
+              variant="ghost"
+            >
+              Close
+            </Button>
+            <Button
+              colorScheme="red"
+              onClick={cancelTransactions}
+              isLoading={cancelTransactionMutation.isPending}
+            >
+              Cancel transaction
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Button onClick={onOpen} variant="outline" size="xs" colorScheme="red">
+        Cancel transaction
+      </Button>
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transactions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transactions-table.tsx
new file mode 100644
index 00000000000..8a29343825f
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transactions-table.tsx
@@ -0,0 +1,878 @@
+import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
+import { WalletAddress } from "@/components/blocks/wallet-address";
+import { PaginationButtons } from "@/components/pagination-buttons";
+import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { ChartConfig } from "@/components/ui/chart";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { normalizeTime } from "@/lib/time";
+import {
+  type Transaction,
+  useEngineTransactions,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { Collapse, Divider, useDisclosure } from "@chakra-ui/react";
+import { ChainIconClient } from "components/icons/ChainIcon";
+import { formatDistanceToNowStrict } from "date-fns";
+import { format, formatDate } from "date-fns/format";
+import { useAllChainsData } from "hooks/chains/allChains";
+import {
+  ExternalLinkIcon,
+  InfoIcon,
+  MoveLeftIcon,
+  MoveRightIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
+import { type ThirdwebClient, toTokens } from "thirdweb";
+import { FormLabel, LinkButton, Text } from "tw-components";
+import { TransactionTimeline } from "./transaction-timeline";
+
+export type EngineStatus =
+  | "errored"
+  | "mined"
+  | "cancelled"
+  | "sent"
+  | "retried"
+  | "processed"
+  | "queued"
+  | "user-op-sent";
+
+const statusDetails: Record<
+  EngineStatus,
+  {
+    name: string;
+    type: "success" | "destructive" | "warning";
+  }
+> = {
+  mined: {
+    name: "Mined",
+    type: "success",
+  },
+  errored: {
+    name: "Failed",
+    type: "destructive",
+  },
+  cancelled: {
+    name: "Cancelled",
+    type: "destructive",
+  },
+  queued: {
+    name: "Queued",
+    type: "warning",
+  },
+  processed: {
+    name: "Processed",
+    type: "warning",
+  },
+  sent: {
+    name: "Sent",
+    type: "warning",
+  },
+  "user-op-sent": {
+    name: "User Op Sent",
+    type: "warning",
+  },
+  retried: {
+    name: "Retried",
+    type: "success",
+  },
+};
+
+// TODO - add Status selector dropdown here
+export function TransactionsTable(props: {
+  instanceUrl: string;
+  authToken: string;
+  client: ThirdwebClient;
+}) {
+  const transactionDisclosure = useDisclosure();
+  const [selectedTransaction, setSelectedTransaction] =
+    useState<Transaction | null>(null);
+  const [autoUpdate, setAutoUpdate] = useState(true);
+  const [page, setPage] = useState(1);
+  const [status, setStatus] = useState<EngineStatus | undefined>(undefined);
+
+  const pageSize = 10;
+  const transactionsQuery = useEngineTransactions({
+    instanceUrl: props.instanceUrl,
+    autoUpdate,
+    authToken: props.authToken,
+    queryParams: {
+      limit: pageSize,
+      page: page,
+      status,
+    },
+  });
+
+  const transactions = transactionsQuery.data?.transactions ?? [];
+
+  const idx = selectedTransaction
+    ? transactions.indexOf(selectedTransaction)
+    : 0;
+
+  const totalCount = transactionsQuery.data?.totalCount ?? 0;
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const showPagination = totalCount > pageSize;
+
+  const showSkeleton =
+    (transactionsQuery.isPlaceholderData && transactionsQuery.isFetching) ||
+    (transactionsQuery.isLoading && !transactionsQuery.isPlaceholderData);
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-card">
+      <div className="flex flex-col gap-4 rounded-lg rounded-b-none px-6 py-6 lg:flex-row lg:justify-between">
+        <div>
+          <h2 className="font-semibold text-xl tracking-tight">
+            Transaction History
+          </h2>
+          <p className="text-muted-foreground text-sm">
+            Transactions sent from your backend wallets
+          </p>
+        </div>
+
+        <div className="flex items-center justify-end gap-5 border-border border-t pt-4 lg:border-none lg:pt-0">
+          <div className="flex shrink-0 items-center gap-2">
+            <Label htmlFor="auto-update">Auto Update</Label>
+            <Switch
+              checked={autoUpdate}
+              onCheckedChange={(v) => setAutoUpdate(!!v)}
+              id="auto-update"
+            />
+          </div>
+          <StatusSelector
+            status={status}
+            setStatus={(v) => {
+              setStatus(v);
+              // reset page
+              setPage(1);
+            }}
+          />
+        </div>
+      </div>
+
+      <TableContainer className="rounded-none border-x-0">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Queue ID</TableHead>
+              <TableHead>Chain</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>From</TableHead>
+              <TableHead>Tx Hash</TableHead>
+              <TableHead>Queued</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {showSkeleton ? (
+              <>
+                {new Array(pageSize).fill(0).map((_, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  <SkeletonRow key={i} />
+                ))}
+              </>
+            ) : (
+              <>
+                {transactions.map((tx) => (
+                  <TableRow
+                    onClick={() => {
+                      setSelectedTransaction(tx);
+                      transactionDisclosure.onOpen();
+                    }}
+                    key={`${tx.queueId}${tx.chainId}${tx.blockNumber}`}
+                    className="cursor-pointer hover:bg-accent/50"
+                  >
+                    {/* Queue ID */}
+                    <TableCell className="font-medium">
+                      <CopyAddressButton
+                        address={tx.queueId ? tx.queueId : ""}
+                        copyIconPosition="left"
+                        variant="ghost"
+                        className="text-muted-foreground"
+                      />
+                    </TableCell>
+
+                    {/* Chain Id */}
+                    <TableCell>
+                      <TxChainCell
+                        chainId={tx.chainId || undefined}
+                        client={props.client}
+                      />
+                    </TableCell>
+
+                    {/* Status */}
+                    <TableCell>
+                      <TxStatusCell transaction={tx} />
+                    </TableCell>
+
+                    {/* From Address */}
+                    <TableCell>
+                      {tx.fromAddress ? (
+                        <WalletAddress address={tx.fromAddress} />
+                      ) : (
+                        "N/A"
+                      )}
+                    </TableCell>
+
+                    {/* Tx Hash */}
+                    <TableCell>
+                      <TxHashCell transaction={tx} />
+                    </TableCell>
+
+                    {/* Queued At */}
+                    <TableCell>
+                      <TxQueuedAtCell transaction={tx} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </>
+            )}
+          </TableBody>
+        </Table>
+
+        {!showSkeleton && transactions.length === 0 && (
+          <div className="flex min-h-[200px] items-center justify-center">
+            No transactions found
+          </div>
+        )}
+      </TableContainer>
+
+      {showPagination && (
+        <div className="py-6">
+          <PaginationButtons
+            activePage={page}
+            onPageClick={setPage}
+            totalPages={totalPages}
+          />
+        </div>
+      )}
+
+      {transactionDisclosure.isOpen && selectedTransaction && (
+        <TransactionDetailsDrawer
+          transaction={selectedTransaction}
+          instanceUrl={props.instanceUrl}
+          authToken={props.authToken}
+          onClickPrevious={
+            idx > 0
+              ? () => setSelectedTransaction(transactions[idx - 1] || null)
+              : undefined
+          }
+          onClickNext={
+            idx < transactions.length - 1
+              ? () => setSelectedTransaction(transactions[idx + 1] || null)
+              : undefined
+          }
+          setSelectedTransaction={setSelectedTransaction}
+          client={props.client}
+        />
+      )}
+    </div>
+  );
+}
+
+function StatusSelector(props: {
+  status: EngineStatus | undefined;
+  setStatus: (value: EngineStatus | undefined) => void;
+}) {
+  const statuses = Object.keys(statusDetails) as EngineStatus[];
+
+  return (
+    <Select
+      value={props.status || "all"}
+      onValueChange={(v) => {
+        if (v === "all") {
+          props.setStatus(undefined);
+        } else {
+          props.setStatus(v as EngineStatus);
+        }
+      }}
+    >
+      <SelectTrigger className="min-w-[160px]">
+        <SelectValue placeholder="All" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectItem value="all">All Transactions</SelectItem>
+          {statuses.map((item) => {
+            return (
+              <SelectItem key={item} value={item}>
+                {statusDetails[item].name}
+              </SelectItem>
+            );
+          })}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
+
+function SkeletonRow() {
+  return (
+    <TableRow className="h-[73px]">
+      <TableCell>
+        <Skeleton className="h-6 w-[152px]" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[155px]" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[58px] rounded-full" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[145px]" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[160px]" />
+      </TableCell>
+
+      <TableCell>
+        <Skeleton className="h-6 w-[108px]" />
+      </TableCell>
+    </TableRow>
+  );
+}
+
+function TxChainCell(props: {
+  chainId: string | undefined;
+  client: ThirdwebClient;
+}) {
+  const { chainId, client } = props;
+  const { idToChain } = useAllChainsData();
+
+  if (!chainId) {
+    return "N/A";
+  }
+
+  const chain = idToChain.get(Number.parseInt(chainId));
+
+  if (!chain) {
+    return `Chain ID: ${chainId}`;
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <ChainIconClient
+        className="size-5"
+        src={chain.icon?.url}
+        client={client}
+      />
+      <div className="max-w-[150px] truncate">
+        {chain.name ?? `Chain ID: ${chainId}`}
+      </div>
+    </div>
+  );
+}
+
+function TxStatusCell(props: {
+  transaction: Transaction;
+}) {
+  const { transaction } = props;
+  const { errorMessage, minedAt } = transaction;
+  const status = (transaction.status as EngineStatus) ?? null;
+  if (!status) {
+    return null;
+  }
+
+  const tooltip =
+    status === "errored"
+      ? errorMessage
+      : (status === "mined" || status === "retried") && minedAt
+        ? `Completed ${format(new Date(minedAt), "PP pp")}`
+        : undefined;
+
+  return (
+    <ToolTipLabel hoverable label={tooltip}>
+      <Badge variant={statusDetails[status].type} className="gap-2">
+        {statusDetails[status].name}
+        {errorMessage && <InfoIcon className="size-3" />}
+      </Badge>
+    </ToolTipLabel>
+  );
+}
+
+function TxHashCell(props: { transaction: Transaction }) {
+  const { idToChain } = useAllChainsData();
+  const { chainId, transactionHash } = props.transaction;
+  if (!transactionHash) {
+    return "N/A";
+  }
+
+  const chain = chainId ? idToChain.get(Number.parseInt(chainId)) : undefined;
+  const explorer = chain?.explorers?.[0];
+
+  const shortHash = `${transactionHash.slice(0, 6)}...${transactionHash.slice(-4)}`;
+  if (!explorer) {
+    return (
+      <CopyTextButton
+        textToCopy={transactionHash}
+        copyIconPosition="left"
+        textToShow={shortHash}
+        variant="ghost"
+        tooltip="Copy transaction hash"
+        className="font-mono text-muted-foreground text-sm"
+      />
+    );
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      asChild
+      className="-translate-x-2 gap-2 font-mono"
+      size="sm"
+    >
+      <Link
+        href={`${explorer.url}/tx/${transactionHash}`}
+        target="_blank"
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {shortHash}{" "}
+        <ExternalLinkIcon className="size-4 text-muted-foreground" />
+      </Link>
+    </Button>
+  );
+}
+
+function TxQueuedAtCell(props: { transaction: Transaction }) {
+  const value = props.transaction.queuedAt;
+  if (!value) {
+    return;
+  }
+
+  const date = new Date(value);
+  return (
+    <ToolTipLabel label={format(date, "PP pp z")}>
+      <p>{formatDistanceToNowStrict(date, { addSuffix: true })}</p>
+    </ToolTipLabel>
+  );
+}
+
+export function TransactionCharts(props: {
+  authToken: string;
+  instanceUrl: string;
+}) {
+  const transactionsQuery = useEngineTransactions({
+    instanceUrl: props.instanceUrl,
+    autoUpdate: false,
+    authToken: props.authToken,
+    queryParams: {
+      limit: 10000,
+      page: 1,
+    },
+  });
+
+  const transactions = transactionsQuery.data?.transactions ?? [];
+
+  const { analyticsData, chartConfig } = useMemo(() => {
+    if (!transactions.length) {
+      return {
+        analyticsData: [],
+        chartConfig: {},
+      };
+    }
+    const dayToTxCountMap: Map<number, Record<string, number>> = new Map();
+    const uniqueStatuses = new Set<string>();
+
+    for (const tx of transactions) {
+      if (!tx.queuedAt || !tx.status) {
+        continue;
+      }
+      const time = normalizeTime(new Date(tx.queuedAt)).getTime();
+      const entry = dayToTxCountMap.get(time) ?? {};
+      entry[tx.status] = (entry[tx.status] ?? 0) + 1;
+      uniqueStatuses.add(tx.status);
+      dayToTxCountMap.set(time, entry);
+    }
+
+    const analyticsData = Array.from(dayToTxCountMap.entries())
+      .map(([day, record]) => ({
+        time: new Date(day).getTime(),
+        ...record,
+      }))
+      .sort((a, b) => a.time - b.time);
+
+    const chartConfig: ChartConfig = {};
+    Array.from(uniqueStatuses).forEach((status, i) => {
+      chartConfig[status] = {
+        label: status.charAt(0).toUpperCase() + status.slice(1), // first letter uppercase
+        color:
+          status === "errored"
+            ? "hsl(var(--destructive-text))"
+            : status === "mined"
+              ? "hsl(var(--success-text))"
+              : `hsl(var(--chart-${(i % 15) + 3}))`,
+      };
+    });
+
+    return {
+      analyticsData,
+      chartConfig,
+    };
+  }, [transactions]);
+
+  return (
+    <ThirdwebBarChart
+      header={{
+        title: "Transactions Breakdown",
+        description: "Transactions sent from your backend wallets per day",
+        titleClassName: "text-xl mb-0",
+      }}
+      config={chartConfig}
+      data={analyticsData}
+      isPending={transactionsQuery.isPending}
+      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
+      hideLabel={false}
+      variant="stacked"
+      showLegend
+      toolTipLabelFormatter={(_v, item) => {
+        if (Array.isArray(item)) {
+          const time = item[0].payload.time as number;
+          return formatDate(new Date(time), "MMM d, yyyy");
+        }
+        return undefined;
+      }}
+    />
+  );
+}
+
+const TransactionDetailsDrawer = ({
+  transaction,
+  instanceUrl,
+  onClickPrevious,
+  onClickNext,
+  setSelectedTransaction,
+  authToken,
+  client,
+}: {
+  transaction: Transaction;
+  instanceUrl: string;
+  onClickPrevious?: () => void;
+  onClickNext?: () => void;
+  setSelectedTransaction: Dispatch<SetStateAction<Transaction | null>>;
+  authToken: string;
+  client: ThirdwebClient;
+}) => {
+  const { idToChain } = useAllChainsData();
+  const errorMessageDisclosure = useDisclosure();
+  const advancedTxDetailsDisclosure = useDisclosure();
+
+  if (!transaction.chainId || !transaction.status) {
+    return null;
+  }
+
+  const chain = idToChain.get(Number.parseInt(transaction.chainId));
+  const decimals = chain?.nativeCurrency.decimals || 18;
+  const symbol = chain?.nativeCurrency.symbol || "ETH";
+  const explorer = chain?.explorers?.[0];
+
+  const status = statusDetails[transaction.status as EngineStatus];
+  const functionCalled =
+    transaction.extension && transaction.extension !== "none"
+      ? `${transaction.extension} ${transaction.functionName}`
+      : (transaction.functionName ?? null);
+
+  let txFeeDisplay = "N/A";
+  if (transaction.gasLimit) {
+    const gasPrice =
+      transaction.effectiveGasPrice ||
+      transaction.gasPrice ||
+      transaction.maxFeePerGas;
+    if (gasPrice) {
+      const txFeeWei = BigInt(transaction.gasLimit) * BigInt(gasPrice);
+      txFeeDisplay = `${toTokens(txFeeWei, decimals)} ${symbol}`;
+    }
+  }
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setSelectedTransaction(isOpen ? transaction : null);
+  };
+
+  return (
+    <Sheet open={!!transaction} onOpenChange={handleOpenChange}>
+      <SheetContent className="w-full overflow-y-auto sm:min-w-[500px] lg:min-w-[500px]">
+        <SheetHeader>
+          <SheetTitle className="mb-3 flex flex-row items-center gap-3 border-border border-b pb-3 text-left">
+            Transaction Details <Badge variant="outline">{status.name}</Badge>
+          </SheetTitle>
+        </SheetHeader>
+        <div className="flex flex-col gap-4">
+          <div>
+            <FormLabel>Queue ID</FormLabel>
+            <Text>{transaction.queueId}</Text>
+          </div>
+
+          <div>
+            <FormLabel>Chain</FormLabel>
+            <div className="flex items-center gap-2">
+              <ChainIconClient
+                className="size-5"
+                src={chain?.icon?.url}
+                client={client}
+              />
+              <span>{chain?.name}</span>
+            </div>
+          </div>
+
+          {functionCalled && (
+            <div>
+              <FormLabel>Function</FormLabel>
+              <Text>{functionCalled}</Text>
+            </div>
+          )}
+
+          <div>
+            <FormLabel>
+              {transaction.accountAddress ? "Signer Address" : "From Address"}
+            </FormLabel>
+            <LinkButton
+              variant="ghost"
+              isExternal
+              size="xs"
+              href={
+                explorer
+                  ? `${explorer.url}/address/${transaction.fromAddress}`
+                  : "#"
+              }
+            >
+              <Text fontFamily="mono">{transaction.fromAddress}</Text>
+            </LinkButton>
+          </div>
+
+          {transaction.accountAddress && (
+            <div>
+              <FormLabel>Account Address</FormLabel>
+              <LinkButton
+                variant="ghost"
+                isExternal
+                size="xs"
+                href={
+                  explorer
+                    ? `${explorer.url}/address/${transaction.accountAddress}`
+                    : "#"
+                }
+              >
+                <Text fontFamily="mono">{transaction.accountAddress}</Text>
+              </LinkButton>
+            </div>
+          )}
+
+          <div>
+            {/* The "to" address is usually a contract except for native token transfers. */}
+            <FormLabel>
+              {functionCalled === "transfer"
+                ? "Recipient Address"
+                : "Contract Address"}
+            </FormLabel>
+            <LinkButton
+              variant="ghost"
+              isExternal
+              size="xs"
+              href={
+                explorer
+                  ? `${explorer.url}/address/${transaction.toAddress}`
+                  : "#"
+              }
+            >
+              <Text fontFamily="mono">{transaction.toAddress}</Text>
+            </LinkButton>
+          </div>
+
+          {transaction.errorMessage && (
+            <div>
+              <FormLabel>Error</FormLabel>
+              <Text noOfLines={errorMessageDisclosure.isOpen ? undefined : 3}>
+                {transaction.errorMessage}
+              </Text>
+              <Button onClick={errorMessageDisclosure.onToggle} variant="link">
+                {errorMessageDisclosure.isOpen ? "Show less" : "Show more"}
+              </Button>
+            </div>
+          )}
+
+          <Divider />
+
+          <TransactionTimeline
+            transaction={transaction}
+            instanceUrl={instanceUrl}
+            authToken={authToken}
+          />
+
+          <Divider />
+
+          {/* On-chain details */}
+
+          <div>
+            <div className="flex flex-row">
+              <FormLabel>Value</FormLabel>
+              <ToolTipLabel
+                label={`The amount of ${symbol} sent to the "To" .`}
+              >
+                <InfoIcon className="size-4" />
+              </ToolTipLabel>
+            </div>
+            <Text>
+              {transaction.value
+                ? toTokens(BigInt(transaction.value), decimals)
+                : 0}{" "}
+              {symbol}
+            </Text>
+          </div>
+
+          {transaction.transactionHash && (
+            <>
+              <div>
+                <FormLabel>Transaction Hash</FormLabel>
+                <LinkButton
+                  variant="ghost"
+                  isExternal
+                  size="xs"
+                  href={
+                    explorer
+                      ? `${explorer.url}/tx/${transaction.transactionHash}`
+                      : "#"
+                  }
+                  maxW="100%"
+                >
+                  <Text fontFamily="mono" isTruncated>
+                    {transaction.transactionHash}
+                  </Text>
+                </LinkButton>
+              </div>
+
+              <div>
+                <FormLabel>Transaction Fee</FormLabel>
+                <Text>{txFeeDisplay}</Text>
+              </div>
+
+              <Collapse in={advancedTxDetailsDisclosure.isOpen}>
+                <div className="flex flex-col gap-4">
+                  {transaction.nonce && (
+                    <div>
+                      <div className="flex flex-row">
+                        <FormLabel>Nonce</FormLabel>
+                        <ToolTipLabel label="The nonce value this transaction was submitted to mempool.">
+                          <InfoIcon className="size-4" />
+                        </ToolTipLabel>
+                      </div>
+                      <Text>{transaction.nonce ?? "N/A"}</Text>
+                    </div>
+                  )}
+
+                  {transaction.gasLimit && (
+                    <div>
+                      <div className="flex flex-row">
+                        <FormLabel>Gas Units</FormLabel>
+                        <ToolTipLabel label="The gas units spent for this transaction.">
+                          <InfoIcon className="size-4" />
+                        </ToolTipLabel>
+                      </div>
+                      <Text>
+                        {Number(transaction.gasLimit).toLocaleString()}
+                      </Text>
+                    </div>
+                  )}
+
+                  {transaction.gasPrice && (
+                    <div>
+                      <div className="flex flex-row">
+                        <FormLabel>Gas Price</FormLabel>
+                        <ToolTipLabel label="The price in wei spent for each gas unit.">
+                          <InfoIcon className="size-4" />
+                        </ToolTipLabel>
+                      </div>
+                      <Text>
+                        {Number(transaction.gasPrice).toLocaleString()}
+                      </Text>
+                    </div>
+                  )}
+
+                  {transaction.blockNumber && (
+                    <div>
+                      <FormLabel>Block</FormLabel>
+                      <LinkButton
+                        variant="ghost"
+                        isExternal
+                        size="xs"
+                        href={
+                          explorer
+                            ? `${explorer.url}/block/${transaction.blockNumber}`
+                            : "#"
+                        }
+                        maxW="100%"
+                      >
+                        <Text>{transaction.blockNumber}</Text>
+                      </LinkButton>
+                    </div>
+                  )}
+                </div>
+              </Collapse>
+
+              <Button
+                onClick={advancedTxDetailsDisclosure.onToggle}
+                variant="link"
+                size="sm"
+                className="w-fit"
+              >
+                {advancedTxDetailsDisclosure.isOpen
+                  ? "Hide transaction details"
+                  : "Show transaction details"}
+              </Button>
+            </>
+          )}
+        </div>
+        <div className="mt-4 flex flex-row justify-end gap-3 border-border border-t pt-4">
+          <Button
+            disabled={!onClickPrevious}
+            onClick={onClickPrevious}
+            variant="outline"
+            className="gap-2"
+          >
+            <MoveLeftIcon className="size-4" />
+            Previous
+          </Button>
+          <Button
+            disabled={!onClickNext}
+            onClick={onClickNext}
+            variant="outline"
+            className="gap-2"
+          >
+            Next
+            <MoveRightIcon className="size-4" />
+          </Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/utils.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/utils.ts
new file mode 100644
index 00000000000..75e6f6ca219
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/utils.ts
@@ -0,0 +1,11 @@
+export const prettyPrintCurrency = ({
+  amount,
+  symbol,
+}: {
+  amount?: string | number;
+  symbol?: string;
+}): string => {
+  const amountNumber =
+    typeof amount === "string" ? Number.parseFloat(amount) : (amount ?? 0);
+  return `${amountNumber.toFixed(6)} ${symbol || ""}`;
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/page.tsx
new file mode 100644
index 00000000000..bd6ec62012c
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/page.tsx
@@ -0,0 +1,19 @@
+import { engineInstancePageHandler } from "../../_utils/getEngineInstancePageMeta";
+import { EngineOverview } from "./overview/components/engine-overview";
+import type { EngineInstancePageProps } from "./types";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return (
+    <EngineOverview
+      instance={instance}
+      teamSlug={params.team_slug}
+      authToken={authToken}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/add-relayer-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
new file mode 100644
index 00000000000..25ac436ea03
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
@@ -0,0 +1,239 @@
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import {
+  type CreateRelayerInput,
+  useEngineBackendWallets,
+  useEngineCreateRelayer,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  Textarea,
+  type UseDisclosureReturn,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useAllChainsData } from "hooks/chains/allChains";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { isAddress, shortenAddress } from "thirdweb/utils";
+import { Button, FormHelperText, FormLabel } from "tw-components";
+
+interface AddRelayerButtonProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const AddRelayerButton: React.FC<AddRelayerButtonProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const disclosure = useDisclosure();
+
+  return (
+    <>
+      <Button
+        onClick={disclosure.onOpen}
+        variant="ghost"
+        size="sm"
+        leftIcon={<CirclePlusIcon className="size-6" />}
+        colorScheme="primary"
+        w="fit-content"
+      >
+        Add Relayer
+      </Button>
+
+      {disclosure.isOpen && (
+        <AddModal
+          instanceUrl={instanceUrl}
+          disclosure={disclosure}
+          authToken={authToken}
+        />
+      )}
+    </>
+  );
+};
+
+export interface AddModalInput {
+  chainId: number;
+  backendWalletAddress: string;
+  name?: string;
+  allowedContractsRaw: string;
+  allowedForwardersRaw: string;
+}
+
+const AddModal = ({
+  instanceUrl,
+  disclosure,
+  authToken,
+}: {
+  instanceUrl: string;
+  disclosure: UseDisclosureReturn;
+  authToken: string;
+}) => {
+  const client = useThirdwebClient();
+  const { mutate: createRelayer } = useEngineCreateRelayer({
+    instanceUrl,
+    authToken,
+  });
+  const { data: backendWallets } = useEngineBackendWallets({
+    instanceUrl,
+    authToken,
+  });
+  const { idToChain } = useAllChainsData();
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Relayer created successfully.",
+    "Failed to create relayer.",
+  );
+
+  const form = useForm<AddModalInput>({
+    defaultValues: {
+      chainId: 11155111, // sepolia chain id
+    },
+  });
+
+  const onSubmit = (data: AddModalInput) => {
+    const createRelayerData: CreateRelayerInput = {
+      chain: idToChain.get(data.chainId)?.slug ?? "unknown",
+      backendWalletAddress: data.backendWalletAddress,
+      name: data.name,
+      allowedContracts: parseAddressListRaw(data.allowedContractsRaw),
+      allowedForwarders: parseAddressListRaw(data.allowedForwardersRaw),
+    };
+
+    createRelayer(createRelayerData, {
+      onSuccess: () => {
+        onSuccess();
+        disclosure.onClose();
+        trackEvent({
+          category: "engine",
+          action: "create-relayer",
+          label: "success",
+          instance: instanceUrl,
+        });
+      },
+      onError: (error) => {
+        onError(error);
+        trackEvent({
+          category: "engine",
+          action: "create-relayer",
+          label: "error",
+          instance: instanceUrl,
+          error,
+        });
+      },
+    });
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent
+        className="!bg-background rounded-lg border border-border"
+        as="form"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <ModalHeader>Add Relayer</ModalHeader>
+        <ModalCloseButton />
+
+        <ModalBody>
+          <Flex flexDir="column" gap={4}>
+            <FormControl isRequired>
+              <FormLabel>Chain</FormLabel>
+              <SingleNetworkSelector
+                chainId={form.watch("chainId")}
+                onChange={(val) => form.setValue("chainId", val)}
+                client={client}
+              />
+            </FormControl>
+            <FormControl isRequired>
+              <FormLabel>Backend Wallet</FormLabel>
+              <Select
+                {...form.register("backendWalletAddress", { required: true })}
+              >
+                <option value="" disabled selected hidden>
+                  Select a backend wallet to use as a relayer
+                </option>
+                {backendWallets?.map((wallet) => (
+                  <option key={wallet.address} value={wallet.address}>
+                    {shortenAddress(wallet.address)}
+                    {wallet.label && ` (${wallet.label})`}
+                  </option>
+                ))}
+              </Select>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Input
+                type="text"
+                placeholder="Enter a description for this relayer"
+                {...form.register("name")}
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel>Allowed Contracts</FormLabel>
+              <Textarea
+                {...form.register("allowedContractsRaw")}
+                placeholder="Enter a comma or newline-separated list of contract addresses"
+                rows={4}
+              />
+              <FormHelperText>Allow all contracts if omitted.</FormHelperText>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Allowed Forwarders</FormLabel>
+              <Textarea
+                {...form.register("allowedForwardersRaw")}
+                placeholder="Enter a comma or newline-separated list of forwarder addresses"
+                rows={4}
+              />
+              <FormHelperText>Allow all forwarders if omitted.</FormHelperText>
+            </FormControl>
+          </Flex>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button type="button" onClick={disclosure.onClose} variant="ghost">
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            colorScheme="primary"
+            isDisabled={!form.formState.isValid}
+          >
+            Add
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+/**
+ * Returns a list of valid addresses from a comma or newline-separated string.
+ *
+ * Example:
+ *  input: 0xa5B8492D8223D255dB279C7c3ebdA34Be5eC9D85,0x4Ff9aa707AE1eAeb40E581DF2cf4e14AffcC553d
+ *  output:
+ *  [
+ *    0xa5B8492D8223D255dB279C7c3ebdA34Be5eC9D85,
+ *    0x4Ff9aa707AE1eAeb40E581DF2cf4e14AffcC553d,
+ *  ]
+ */
+export const parseAddressListRaw = (raw: string): string[] | undefined => {
+  const addresses = raw
+    .split(/[,\n]/)
+    .map((entry) => entry.trim())
+    .filter((entry) => isAddress(entry));
+  return addresses.length > 0 ? addresses : undefined;
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/engine-relayer.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/engine-relayer.tsx
new file mode 100644
index 00000000000..6529bb420a8
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/engine-relayer.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useEngineRelayer } from "@3rdweb-sdk/react/hooks/useEngine";
+import { Heading, Link, Text } from "tw-components";
+import { AddRelayerButton } from "./add-relayer-button";
+import { RelayersTable } from "./relayers-table";
+
+interface EngineRelayerProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const EngineRelayer: React.FC<EngineRelayerProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const relayers = useEngineRelayer({
+    instanceUrl,
+    authToken,
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Heading size="title.md">Relayers</Heading>
+        <Text>
+          Use relayers to submit transactions from your backend wallets on
+          behalf of your users.{" "}
+          <Link
+            href="https://portal.thirdweb.com/engine/features/relayers"
+            color="primary.500"
+            isExternal
+          >
+            Learn more about relayers
+          </Link>
+          .
+        </Text>
+      </div>
+
+      <RelayersTable
+        instanceUrl={instanceUrl}
+        relayers={relayers.data || []}
+        isPending={relayers.isPending}
+        isFetched={relayers.isFetched}
+        authToken={authToken}
+      />
+      <AddRelayerButton instanceUrl={instanceUrl} authToken={authToken} />
+    </div>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/relayers-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/relayers-table.tsx
new file mode 100644
index 00000000000..55f5b94bedc
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/relayers-table.tsx
@@ -0,0 +1,449 @@
+import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import {
+  type EngineRelayer,
+  type UpdateRelayerInput,
+  useEngineBackendWallets,
+  useEngineRevokeRelayer,
+  useEngineUpdateRelayer,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  Textarea,
+  type UseDisclosureReturn,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import { ChainIconClient } from "components/icons/ChainIcon";
+import { TWTable } from "components/shared/TWTable";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useAllChainsData } from "hooks/chains/allChains";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { PencilIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { shortenAddress } from "thirdweb/utils";
+import {
+  Button,
+  FormHelperText,
+  FormLabel,
+  LinkButton,
+  Text,
+  TrackedCopyButton,
+} from "tw-components";
+import { type AddModalInput, parseAddressListRaw } from "./add-relayer-button";
+
+interface RelayersTableProps {
+  instanceUrl: string;
+  relayers: EngineRelayer[];
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+}
+
+const columnHelper = createColumnHelper<EngineRelayer>();
+
+export const RelayersTable: React.FC<RelayersTableProps> = ({
+  instanceUrl,
+  relayers,
+  isPending,
+  isFetched,
+  authToken,
+}) => {
+  const editDisclosure = useDisclosure();
+  const removeDisclosure = useDisclosure();
+  const [selectedRelayer, setSelectedRelayer] = useState<EngineRelayer>();
+  const { idToChain } = useAllChainsData();
+  const client = useThirdwebClient();
+
+  const columns = [
+    columnHelper.accessor("chainId", {
+      header: "Chain",
+      cell: (cell) => {
+        const chain = idToChain.get(Number.parseInt(cell.getValue()));
+        return (
+          <Flex align="center" gap={2}>
+            <ChainIconClient
+              className="size-3"
+              src={chain?.icon?.url}
+              client={client}
+            />
+            <Text>{chain?.name ?? "N/A"}</Text>
+          </Flex>
+        );
+      },
+    }),
+    columnHelper.accessor("backendWalletAddress", {
+      header: "Backend Wallet",
+      cell: (cell) => {
+        const { chainId, backendWalletAddress } = cell.row.original;
+        const chain = idToChain.get(Number.parseInt(chainId));
+
+        const explorer = chain?.explorers?.[0];
+        if (!explorer) {
+          return backendWalletAddress;
+        }
+
+        return (
+          <LinkButton
+            key={explorer.name}
+            variant="ghost"
+            isExternal
+            size="xs"
+            href={`${explorer.url}/address/${backendWalletAddress}`}
+            fontFamily="mono"
+          >
+            {backendWalletAddress}
+          </LinkButton>
+        );
+      },
+    }),
+    columnHelper.accessor("name", {
+      header: "Label",
+      cell: (cell) => {
+        return <Text>{cell.getValue()}</Text>;
+      },
+    }),
+    columnHelper.accessor("allowedContracts", {
+      header: "Allowed Contracts",
+      cell: (cell) => {
+        const allowedContracts = cell.getValue() ?? [];
+        const value =
+          allowedContracts.length === 0
+            ? "*"
+            : allowedContracts.length === 1
+              ? `${allowedContracts.length} address`
+              : `${allowedContracts.length} addresses`;
+        return <Text>{value}</Text>;
+      },
+    }),
+    columnHelper.accessor("allowedForwarders", {
+      header: "Allowed Forwarders",
+      cell: (cell) => {
+        const allowedForwarders = cell.getValue() ?? [];
+        const value =
+          allowedForwarders.length === 0
+            ? "*"
+            : allowedForwarders.length === 1
+              ? `${allowedForwarders.length} address`
+              : `${allowedForwarders.length} addresses`;
+        return <Text>{value}</Text>;
+      },
+    }),
+    columnHelper.accessor("id", {
+      header: "URL",
+      cell: (cell) => {
+        const id = cell.getValue();
+        const url = `${instanceUrl}relayer/${id}`;
+        return (
+          <TrackedCopyButton
+            value={url}
+            category="engine"
+            aria-label="Copy to clipboard"
+          />
+        );
+      },
+    }),
+  ];
+
+  return (
+    <>
+      <TWTable
+        title="relayers"
+        data={relayers}
+        columns={columns}
+        isPending={isPending}
+        isFetched={isFetched}
+        onMenuClick={[
+          {
+            icon: <PencilIcon className="size-4" />,
+            text: "Edit",
+            onClick: (relayer) => {
+              setSelectedRelayer(relayer);
+              editDisclosure.onOpen();
+            },
+          },
+          {
+            icon: <Trash2Icon className="size-4" />,
+            text: "Remove",
+            onClick: (relayer) => {
+              setSelectedRelayer(relayer);
+              removeDisclosure.onOpen();
+            },
+            isDestructive: true,
+          },
+        ]}
+      />
+
+      {selectedRelayer && editDisclosure.isOpen && (
+        <EditModal
+          relayer={selectedRelayer}
+          disclosure={editDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+      {selectedRelayer && removeDisclosure.isOpen && (
+        <RemoveModal
+          relayer={selectedRelayer}
+          disclosure={removeDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+    </>
+  );
+};
+
+const EditModal = ({
+  relayer,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: {
+  relayer: EngineRelayer;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const client = useThirdwebClient();
+  const { mutate: updateRelayer } = useEngineUpdateRelayer({
+    instanceUrl,
+    authToken,
+  });
+  const { data: backendWallets } = useEngineBackendWallets({
+    instanceUrl,
+    authToken,
+  });
+  const { idToChain } = useAllChainsData();
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Successfully updated relayer",
+    "Failed to update relayer",
+  );
+
+  const form = useForm<AddModalInput>({
+    defaultValues: {
+      ...relayer,
+      chainId: Number.parseInt(relayer.chainId),
+      allowedContractsRaw: (relayer.allowedContracts ?? []).join("\n"),
+      allowedForwardersRaw: (relayer.allowedForwarders ?? []).join("\n"),
+    },
+  });
+
+  const onSubmit = (data: AddModalInput) => {
+    const updateRelayerData: UpdateRelayerInput = {
+      id: relayer.id,
+      chain: idToChain.get(data.chainId)?.slug ?? "unknown",
+      backendWalletAddress: data.backendWalletAddress,
+      name: data.name,
+      allowedContracts: parseAddressListRaw(data.allowedContractsRaw),
+      allowedForwarders: parseAddressListRaw(data.allowedForwardersRaw),
+    };
+
+    updateRelayer(updateRelayerData, {
+      onSuccess: () => {
+        onSuccess();
+        disclosure.onClose();
+        trackEvent({
+          category: "engine",
+          action: "update-relayer",
+          label: "success",
+          instance: instanceUrl,
+        });
+      },
+      onError: (error) => {
+        onError(error);
+        trackEvent({
+          category: "engine",
+          action: "update-relayer",
+          label: "error",
+          instance: instanceUrl,
+          error,
+        });
+      },
+    });
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent
+        className="!bg-background rounded-lg border border-border"
+        as="form"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <ModalHeader>Update Relayer</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <FormControl>
+              <FormLabel>Chain</FormLabel>
+              <SingleNetworkSelector
+                chainId={form.watch("chainId")}
+                onChange={(val) => form.setValue("chainId", val)}
+                client={client}
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel>Backend Wallet</FormLabel>
+              <Select
+                {...form.register("backendWalletAddress", { required: true })}
+              >
+                {backendWallets?.map((wallet) => (
+                  <option key={wallet.address} value={wallet.address}>
+                    {shortenAddress(wallet.address)}
+                    {wallet.label && ` (${wallet.label})`}
+                  </option>
+                ))}
+              </Select>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Input
+                type="text"
+                placeholder="Enter a description for this relayer"
+                {...form.register("name")}
+              />
+            </FormControl>
+            <FormControl>
+              <FormLabel>Allowed Contracts</FormLabel>
+              <Textarea
+                {...form.register("allowedContractsRaw")}
+                placeholder="Enter a comma or newline-separated list of contract addresses"
+                rows={4}
+              />
+              <FormHelperText>Allow all contracts if omitted.</FormHelperText>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Allowed Forwarders</FormLabel>
+              <Textarea
+                {...form.register("allowedForwardersRaw")}
+                placeholder="Enter a comma or newline-separated list of forwarder addresses"
+                rows={4}
+              />
+              <FormHelperText>Allow all forwarders if omitted.</FormHelperText>
+            </FormControl>
+          </div>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button type="button" onClick={disclosure.onClose} variant="ghost">
+            Cancel
+          </Button>
+          <Button type="submit" colorScheme="blue">
+            Save
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const RemoveModal = ({
+  relayer,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: {
+  relayer: EngineRelayer;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}) => {
+  const client = useThirdwebClient();
+  const { mutate: revokeRelayer } = useEngineRevokeRelayer({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const { onSuccess, onError } = useTxNotifications(
+    "Successfully removed relayer",
+    "Failed to remove relayer",
+  );
+  const { idToChain } = useAllChainsData();
+
+  const onClick = () => {
+    revokeRelayer(
+      { id: relayer.id },
+      {
+        onSuccess: () => {
+          onSuccess();
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "revoke-relayer",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          onError(error);
+          trackEvent({
+            category: "engine",
+            action: "revoke-relayer",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Remove Relayer</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <Text>Are you sure you want to remove this relayer?</Text>
+            <FormControl>
+              <FormLabel>Chain</FormLabel>
+              <Flex align="center" gap={2}>
+                <ChainIconClient
+                  className="size-3"
+                  src={
+                    idToChain.get(Number.parseInt(relayer.chainId))?.icon?.url
+                  }
+                  client={client}
+                />
+                <Text>
+                  {idToChain.get(Number.parseInt(relayer.chainId))?.name}
+                </Text>
+              </Flex>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Backend Wallet</FormLabel>
+              <Text>{relayer.backendWalletAddress}</Text>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Label</FormLabel>
+              <Text>{relayer.name ?? <em>N/A</em>}</Text>
+            </FormControl>
+          </div>
+        </ModalBody>
+        <ModalFooter as={Flex} gap={3}>
+          <Button type="button" onClick={disclosure.onClose} variant="ghost">
+            Cancel
+          </Button>
+          <Button type="submit" colorScheme="red" onClick={onClick}>
+            Remove
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/page.tsx
new file mode 100644
index 00000000000..3450919eb7e
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/page.tsx
@@ -0,0 +1,13 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { EngineRelayer } from "./components/engine-relayer";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return <EngineRelayer instanceUrl={instance.url} authToken={authToken} />;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/types.ts
new file mode 100644
index 00000000000..5f004e8d3f8
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/types.ts
@@ -0,0 +1,6 @@
+export type EngineInstancePageProps = {
+  params: Promise<{
+    team_slug: string;
+    engineId: string;
+  }>;
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx
new file mode 100644
index 00000000000..e2786aa4181
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx
@@ -0,0 +1,78 @@
+import { Button } from "@/components/ui/button";
+import { useEngineCreateWalletCredential } from "@3rdweb-sdk/react/hooks/useEngine";
+import { useTrack } from "hooks/analytics/useTrack";
+import { Plus } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { CredentialForm } from "./credential-form";
+import type { CredentialFormData } from "./types";
+
+interface CreateWalletCredentialButtonProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const CreateWalletCredentialButton: React.FC<
+  CreateWalletCredentialButtonProps
+> = ({ instanceUrl, authToken }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const trackEvent = useTrack();
+
+  const createCredential = useEngineCreateWalletCredential({
+    instanceUrl,
+    authToken,
+  });
+
+  const handleSubmit = async (data: CredentialFormData) => {
+    const promise = createCredential.mutateAsync(data);
+
+    toast.promise(promise, {
+      success: () => {
+        setIsOpen(false);
+        trackEvent({
+          category: "engine",
+          action: "create-wallet-credential",
+          label: "success",
+          type: data.type,
+        });
+        return "Wallet credential created successfully";
+      },
+      error: (error) => {
+        trackEvent({
+          category: "engine",
+          action: "create-wallet-credential",
+          label: "error",
+          type: data.type,
+          error,
+        });
+        return "Failed to create wallet credential";
+      },
+    });
+  };
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          trackEvent({
+            category: "engine",
+            action: "open-create-wallet-credential",
+          });
+          setIsOpen(true);
+        }}
+      >
+        <Plus className="mr-2 h-4 w-4" />
+        Create Wallet Credential
+      </Button>
+
+      <CredentialForm
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        onSubmit={async (data) => handleSubmit(data as CredentialFormData)}
+        title="Create Wallet Credential"
+        submitButtonText="Create"
+        isPending={createCredential.isPending}
+      />
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
new file mode 100644
index 00000000000..8de90292370
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
@@ -0,0 +1,171 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Form } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { Dialog } from "@radix-ui/react-dialog";
+import { useForm } from "react-hook-form";
+import { CircleCredentialFields } from "./credential-type-fields/circle";
+import {
+  CREDENTIAL_TYPE_OPTIONS,
+  type CredentialFormData,
+  type CredentialType,
+  type CredentialUpdateFormData,
+} from "./types";
+
+interface CredentialFormProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (
+    data: CredentialFormData | CredentialUpdateFormData,
+  ) => Promise<void>;
+  title: string;
+  submitButtonText: string;
+  isPending: boolean;
+  defaultValues?: Partial<CredentialFormData | CredentialUpdateFormData>;
+  hideTypeSelect?: boolean;
+  isUpdate?: boolean;
+}
+
+export const CredentialForm = ({
+  isOpen,
+  onOpenChange,
+  onSubmit,
+  title,
+  submitButtonText,
+  isPending,
+  defaultValues,
+  hideTypeSelect = false,
+  isUpdate = false,
+}: CredentialFormProps) => {
+  const form = useForm<CredentialFormData | CredentialUpdateFormData>({
+    defaultValues: {
+      type: "circle" as CredentialType,
+      label: "",
+      ...defaultValues,
+    },
+    mode: "onChange",
+  });
+
+  const selectedType = form.watch("type");
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="overflow-hidden p-0">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit((data) => {
+              return onSubmit(data);
+            })}
+          >
+            <div className="p-6">
+              <DialogHeader className="mb-4">
+                <DialogTitle>{title}</DialogTitle>
+                <DialogDescription>
+                  <TrackedLinkTW
+                    href="https://portal.thirdweb.com/engine/features/wallet-credentials"
+                    target="_blank"
+                    label="learn-more"
+                    category="engine"
+                    className="text-link-foreground hover:text-foreground"
+                  >
+                    Learn more about wallet credentials
+                  </TrackedLinkTW>
+                </DialogDescription>
+              </DialogHeader>
+
+              <div className="flex flex-col gap-5">
+                {/* Type */}
+                {!hideTypeSelect && (
+                  <FormFieldSetup
+                    label="Type"
+                    errorMessage={
+                      form.getFieldState("type", form.formState).error?.message
+                    }
+                    htmlFor="credential-type"
+                    isRequired
+                    tooltip={null}
+                  >
+                    <Select
+                      onValueChange={(value) =>
+                        form.setValue("type", value as CredentialType)
+                      }
+                      value={form.watch("type")}
+                    >
+                      <SelectTrigger className="bg-card">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {CREDENTIAL_TYPE_OPTIONS.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </FormFieldSetup>
+                )}
+
+                {/* Label */}
+                <FormFieldSetup
+                  label="Label"
+                  errorMessage={
+                    form.getFieldState("label", form.formState).error?.message
+                  }
+                  htmlFor="credential-label"
+                  isRequired
+                  tooltip={null}
+                >
+                  <Input
+                    id="credential-label"
+                    type="text"
+                    placeholder="A description to identify this credential"
+                    className="bg-card"
+                    {...form.register("label", { required: true })}
+                  />
+                </FormFieldSetup>
+
+                {/* Type-specific fields */}
+                {selectedType === "circle" && (
+                  <CircleCredentialFields form={form} isUpdate={isUpdate} />
+                )}
+              </div>
+            </div>
+
+            <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2">
+              <Button variant="outline" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="min-w-28 gap-2"
+                disabled={!form.formState.isValid || isPending}
+              >
+                {isPending && <Spinner className="size-4" />}
+                {submitButtonText}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx
new file mode 100644
index 00000000000..825b8ce1ae2
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx
@@ -0,0 +1,62 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Input } from "@/components/ui/input";
+import Link from "next/link";
+import type { UseFormReturn } from "react-hook-form";
+import type { CredentialFormData, CredentialUpdateFormData } from "../types";
+
+interface CircleCredentialFieldsProps {
+  form: UseFormReturn<CredentialFormData | CredentialUpdateFormData>;
+  isUpdate?: boolean;
+}
+
+export const CircleCredentialFields: React.FC<CircleCredentialFieldsProps> = ({
+  form,
+  isUpdate = false,
+}) => {
+  return (
+    <>
+      <FormFieldSetup
+        label="Entity Secret"
+        errorMessage={
+          form.getFieldState("entitySecret", form.formState).error?.message
+        }
+        htmlFor="entity-secret"
+        isRequired={!isUpdate}
+        tooltip={null}
+        helperText={
+          <>
+            Entity Secret is a 32-byte private key designed to secure your
+            Developer-Controlled wallets{" "}
+            <Link
+              href="https://developers.circle.com/w3s/entity-secret-management"
+              target="_blank"
+              className="text-link-foreground hover:text-foreground"
+            >
+              Learn more about entity secret management
+            </Link>
+          </>
+        }
+      >
+        <Input
+          id="entity-secret"
+          type="password"
+          className="bg-card"
+          placeholder={
+            isUpdate
+              ? "Leave empty to keep existing secret"
+              : "Your Circle entity secret"
+          }
+          {...form.register("entitySecret", {
+            required: !isUpdate,
+            pattern: {
+              value: /^([0-9a-fA-F]{64})?$/,
+              message:
+                "Entity secret must be a 32-byte hex string (64 characters)",
+            },
+            setValueAs: (value: string) => (value === "" ? undefined : value),
+          })}
+        />
+      </FormFieldSetup>
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx
new file mode 100644
index 00000000000..0ac3d1675c5
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx
@@ -0,0 +1,97 @@
+import { Button } from "@/components/ui/button";
+import {
+  type WalletCredential,
+  useEngineUpdateWalletCredential,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { useTrack } from "hooks/analytics/useTrack";
+import { PencilIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { CredentialForm } from "./credential-form";
+import type { CredentialUpdateFormData } from "./types";
+
+interface EditWalletCredentialButtonProps {
+  credential: WalletCredential;
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const EditWalletCredentialButton: React.FC<
+  EditWalletCredentialButtonProps
+> = ({ credential, instanceUrl, authToken }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const trackEvent = useTrack();
+  const updateCredential = useEngineUpdateWalletCredential({
+    instanceUrl,
+    authToken,
+  });
+
+  const handleSubmit = async (data: CredentialUpdateFormData) => {
+    const promise = updateCredential.mutateAsync({
+      id: credential.id,
+      ...data,
+    });
+
+    toast.promise(promise, {
+      success: () => {
+        setIsOpen(false);
+        trackEvent({
+          category: "engine",
+          action: "update-wallet-credential",
+          label: "success",
+          type: data.type,
+        });
+        return "Wallet credential updated successfully";
+      },
+      error: (error) => {
+        console.log(error);
+        trackEvent({
+          category: "engine",
+          action: "update-wallet-credential",
+          label: "error",
+          type: data.type,
+          error,
+        });
+        return "Failed to update wallet credential";
+      },
+    });
+  };
+
+  return (
+    <>
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => {
+          trackEvent({
+            category: "engine",
+            action: "open-edit-wallet-credential",
+          });
+          setIsOpen(true);
+        }}
+        className="size-8"
+      >
+        <PencilIcon className="size-4" />
+      </Button>
+
+      <CredentialForm
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        onSubmit={async (data) => {
+          return new Promise<void>((resolve) => {
+            handleSubmit(data as CredentialUpdateFormData).then(resolve);
+          });
+        }}
+        title="Edit Wallet Credential"
+        submitButtonText="Save Changes"
+        isPending={updateCredential.isPending}
+        defaultValues={{
+          type: credential.type as "circle",
+          label: credential.label || "",
+        }}
+        hideTypeSelect
+        isUpdate
+      />
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/types.ts
new file mode 100644
index 00000000000..f2fb624acd0
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/types.ts
@@ -0,0 +1,23 @@
+interface BaseCredentialFormData {
+  type: string;
+  label: string;
+}
+
+type CircleCredentialFormData = BaseCredentialFormData & {
+  type: "circle";
+  entitySecret: string;
+};
+
+type CircleCredentialUpdateFormData = BaseCredentialFormData & {
+  type: "circle";
+  entitySecret?: string;
+};
+
+export type CredentialFormData = CircleCredentialFormData;
+export type CredentialUpdateFormData = CircleCredentialUpdateFormData;
+
+export const CREDENTIAL_TYPE_OPTIONS = [
+  { value: "circle", label: "Circle" },
+] as const;
+
+export type CredentialType = (typeof CREDENTIAL_TYPE_OPTIONS)[number]["value"];
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
new file mode 100644
index 00000000000..1e140c0d71d
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
@@ -0,0 +1,105 @@
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { WalletCredential } from "@3rdweb-sdk/react/hooks/useEngine";
+import { format } from "date-fns";
+import { EditWalletCredentialButton } from "./edit-wallet-credential-button";
+
+interface WalletCredentialsTableProps {
+  credentials: WalletCredential[];
+  isPending: boolean;
+  isFetched: boolean;
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const WalletCredentialsTable: React.FC<WalletCredentialsTableProps> = ({
+  credentials,
+  isPending,
+  isFetched,
+  instanceUrl,
+  authToken,
+}) => {
+  if (isPending && !isFetched) {
+    return (
+      <div className="flex min-h-[300px] grow items-center justify-center">
+        <Spinner className="size-10" />
+      </div>
+    );
+  }
+
+  if (credentials.length === 0) {
+    return (
+      <div className="flex min-h-[300px] grow items-center justify-center">
+        <p className="text-muted-foreground text-sm">No credentials found</p>
+      </div>
+    );
+  }
+
+  return (
+    <TableContainer className="border-none">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>ID</TableHead>
+            <TableHead>Label</TableHead>
+            <TableHead>Type</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead>Updated</TableHead>
+            <TableHead>Default</TableHead>
+            <TableHead className="w-0" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {credentials.map((credential) => (
+            <TableRow key={credential.id}>
+              <TableCell>
+                <CopyTextButton
+                  textToCopy={credential.id}
+                  textToShow={`${credential.id.slice(0, 8)}...`}
+                  variant="secondary"
+                  className="font-mono text-xs"
+                  tooltip="Copy credential ID"
+                  copyIconPosition="right"
+                />
+              </TableCell>
+              <TableCell>{credential.label || "-"}</TableCell>
+              <TableCell>
+                <Badge variant="outline">{credential.type}</Badge>
+              </TableCell>
+              <TableCell>
+                {format(new Date(credential.createdAt), "MMM d, yyyy")}
+              </TableCell>
+              <TableCell>
+                {format(new Date(credential.updatedAt), "MMM d, yyyy")}
+              </TableCell>
+              <TableCell>
+                {credential.isDefault ? (
+                  <Badge variant="success">Yes</Badge>
+                ) : (
+                  <Badge variant="outline">No</Badge>
+                )}
+              </TableCell>
+              <TableCell>
+                <EditWalletCredentialButton
+                  credential={credential}
+                  instanceUrl={instanceUrl}
+                  authToken={authToken}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
new file mode 100644
index 00000000000..40cf4aee0a0
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+  useEngineWalletCredentials,
+  useHasEngineFeature,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import { CircleAlertIcon } from "lucide-react";
+import Link from "next/link";
+import { CreateWalletCredentialButton } from "./create-wallet-credential-button";
+import { WalletCredentialsTable } from "./wallet-credentials-table";
+
+interface WalletCredentialsProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const WalletCredentialsSection: React.FC<WalletCredentialsProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const {
+    data: credentials = [],
+    isPending,
+    isFetched,
+  } = useEngineWalletCredentials({
+    instanceUrl,
+    authToken,
+  });
+
+  const {
+    isSupported: supportsWalletCredentials,
+    query: { isPending: isFeatureLoading },
+  } = useHasEngineFeature(instanceUrl, "WALLET_CREDENTIALS");
+
+  if (isFeatureLoading) {
+    return (
+      <div className="flex min-h-[500px] grow items-center justify-center rounded-lg border border-border">
+        <Spinner className="size-10" />
+      </div>
+    );
+  }
+
+  if (!supportsWalletCredentials) {
+    return (
+      <Alert variant="warning">
+        <CircleAlertIcon className="size-4" />
+        <AlertTitle>Update Required</AlertTitle>
+        <AlertDescription>
+          Wallet credentials support requires a newer version of Engine. Please
+          update your Engine instance to use this feature.
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <section className="rounded-lg border border-border bg-card">
+      <div className="flex flex-col gap-5 border-border border-b p-6 lg:flex-row lg:items-center lg:justify-between">
+        <div>
+          <h2 className="mb-1 font-semibold text-xl tracking-tight">
+            Wallet Credentials
+          </h2>
+          <p className="text-muted-foreground text-sm leading-relaxed">
+            Manage your wallet credentials for different providers.{" "}
+            <Link
+              href="https://portal.thirdweb.com/engine/features/wallet-credentials"
+              target="_blank"
+            >
+              Learn more about wallet credentials.
+            </Link>
+          </p>
+        </div>
+
+        <div className="flex flex-col items-end gap-4 border-border max-md:w-full max-md:border-t max-md:pt-6">
+          <CreateWalletCredentialButton
+            instanceUrl={instanceUrl}
+            authToken={authToken}
+          />
+        </div>
+      </div>
+
+      <WalletCredentialsTable
+        credentials={credentials}
+        isPending={isPending}
+        isFetched={isFetched}
+        instanceUrl={instanceUrl}
+        authToken={authToken}
+      />
+    </section>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/page.tsx
new file mode 100644
index 00000000000..21470354729
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/page.tsx
@@ -0,0 +1,18 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { WalletCredentialsSection } from "./components/wallet-credentials";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return (
+    <WalletCredentialsSection
+      instanceUrl={instance.url}
+      authToken={authToken}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
new file mode 100644
index 00000000000..4f84ea589e4
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
@@ -0,0 +1,146 @@
+import {
+  type CreateWebhookInput,
+  useEngineCreateWebhook,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { useTrack } from "hooks/analytics/useTrack";
+import { useTxNotifications } from "hooks/useTxNotifications";
+import { CirclePlusIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { Button, FormLabel } from "tw-components";
+import { beautifyString } from "./webhooks-table";
+
+interface AddWebhookButtonProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+const WEBHOOK_EVENT_TYPES = [
+  "all_transactions",
+  "sent_transaction",
+  "mined_transaction",
+  "errored_transaction",
+  "cancelled_transaction",
+  "backend_wallet_balance",
+  "auth",
+];
+
+export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { mutate: createWebhook } = useEngineCreateWebhook({
+    instanceUrl,
+    authToken,
+  });
+  const trackEvent = useTrack();
+  const form = useForm<CreateWebhookInput>();
+
+  const { onSuccess, onError } = useTxNotifications(
+    "Webhook created successfully.",
+    "Failed to create webhook.",
+  );
+
+  return (
+    <>
+      <Button
+        onClick={onOpen}
+        variant="ghost"
+        size="sm"
+        leftIcon={<CirclePlusIcon className="size-6" />}
+        colorScheme="primary"
+        w="fit-content"
+      >
+        Create Webhook
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent
+          className="!bg-background rounded-lg border border-border"
+          as="form"
+          onSubmit={form.handleSubmit((data) => {
+            createWebhook(data, {
+              onSuccess: () => {
+                onSuccess();
+                onClose();
+                trackEvent({
+                  category: "engine",
+                  action: "create-webhook",
+                  label: "success",
+                  instance: instanceUrl,
+                });
+              },
+              onError: (error) => {
+                onError(error);
+                trackEvent({
+                  category: "engine",
+                  action: "create-webhook",
+                  label: "error",
+                  instance: instanceUrl,
+                  error,
+                });
+              },
+            });
+          })}
+        >
+          <ModalHeader>Create Webhook</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Flex flexDir="column" gap={4}>
+              <FormControl isRequired>
+                <FormLabel>Event Type</FormLabel>
+                <Select {...form.register("eventType", { required: true })}>
+                  {WEBHOOK_EVENT_TYPES.map((eventType) => (
+                    <option key={eventType} value={eventType}>
+                      {beautifyString(eventType)}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl isRequired>
+                <FormLabel>Name</FormLabel>
+                <Input
+                  type="text"
+                  placeholder="My webhook"
+                  {...form.register("name", { required: true })}
+                />
+              </FormControl>
+              <FormControl isRequired>
+                <FormLabel>URL</FormLabel>
+                <Input
+                  type="url"
+                  placeholder="https://"
+                  {...form.register("url", { required: true })}
+                />
+              </FormControl>
+            </Flex>
+          </ModalBody>
+
+          <ModalFooter as={Flex} gap={3}>
+            <Button type="button" onClick={onClose} variant="ghost">
+              Cancel
+            </Button>
+            <Button type="submit" colorScheme="primary">
+              Create
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
new file mode 100644
index 00000000000..26bc2c9176a
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useEngineWebhooks } from "@3rdweb-sdk/react/hooks/useEngine";
+import { Heading, Link, Text } from "tw-components";
+import { AddWebhookButton } from "./add-webhook-button";
+import { WebhooksTable } from "./webhooks-table";
+
+interface EngineWebhooksProps {
+  instanceUrl: string;
+  authToken: string;
+}
+
+export const EngineWebhooks: React.FC<EngineWebhooksProps> = ({
+  instanceUrl,
+  authToken,
+}) => {
+  const webhooks = useEngineWebhooks({
+    authToken,
+    instanceUrl,
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Heading size="title.md">Webhooks</Heading>
+        <Text>
+          Notify your app backend when transaction and backend wallet events
+          occur.{" "}
+          <Link
+            href="https://portal.thirdweb.com/infrastructure/engine/features/webhooks"
+            color="primary.500"
+            isExternal
+          >
+            Learn more about webhooks
+          </Link>
+          .
+        </Text>
+      </div>
+      <WebhooksTable
+        instanceUrl={instanceUrl}
+        webhooks={webhooks.data || []}
+        isPending={webhooks.isPending}
+        isFetched={webhooks.isFetched}
+        authToken={authToken}
+      />
+      <AddWebhookButton instanceUrl={instanceUrl} authToken={authToken} />
+    </div>
+  );
+};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/webhooks-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
new file mode 100644
index 00000000000..c8c4fbb43aa
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
@@ -0,0 +1,332 @@
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { FormItem } from "@/components/ui/form";
+import {
+  type EngineWebhook,
+  useEngineDeleteWebhook,
+  useEngineTestWebhook,
+} from "@3rdweb-sdk/react/hooks/useEngine";
+import {
+  Flex,
+  FormControl,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Tooltip,
+  type UseDisclosureReturn,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import { TWTable } from "components/shared/TWTable";
+import { format, formatDistanceToNowStrict } from "date-fns";
+import { useTrack } from "hooks/analytics/useTrack";
+import { MailQuestion, TrashIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Card, FormLabel, Text } from "tw-components";
+import { shortenString } from "utils/usedapp-external";
+
+export function beautifyString(str: string): string {
+  return str
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+interface WebhooksTableProps {
+  instanceUrl: string;
+  webhooks: EngineWebhook[];
+  isPending: boolean;
+  isFetched: boolean;
+  authToken: string;
+}
+
+const columnHelper = createColumnHelper<EngineWebhook>();
+
+const columns = [
+  columnHelper.accessor("name", {
+    header: "Name",
+    cell: (cell) => {
+      return <Text>{cell.getValue()}</Text>;
+    },
+  }),
+  columnHelper.accessor("eventType", {
+    header: "Event Type",
+    cell: (cell) => {
+      return <Text>{beautifyString(cell.getValue())}</Text>;
+    },
+  }),
+  columnHelper.accessor("secret", {
+    header: "Secret",
+    cell: (cell) => {
+      return (
+        <CopyTextButton
+          textToCopy={cell.getValue() || ""}
+          textToShow={shortenString(cell.getValue() || "")}
+          tooltip="Secret"
+          copyIconPosition="right"
+        />
+      );
+    },
+  }),
+  columnHelper.accessor("url", {
+    header: "URL",
+    cell: (cell) => {
+      const url = cell.getValue();
+      return (
+        <Text maxW={300} isTruncated>
+          {url}
+        </Text>
+      );
+    },
+  }),
+  columnHelper.accessor("createdAt", {
+    header: "Created At",
+    cell: (cell) => {
+      const value = cell.getValue();
+      if (!value) {
+        return;
+      }
+
+      const date = new Date(value);
+      return (
+        <Tooltip
+          borderRadius="md"
+          bg="transparent"
+          boxShadow="none"
+          label={
+            <Card bgColor="backgroundHighlight">
+              <Text>{format(date, "PP pp z")}</Text>
+            </Card>
+          }
+          shouldWrapChildren
+        >
+          <Text>{formatDistanceToNowStrict(date, { addSuffix: true })}</Text>
+        </Tooltip>
+      );
+    },
+  }),
+];
+
+export const WebhooksTable: React.FC<WebhooksTableProps> = ({
+  instanceUrl,
+  webhooks,
+  isPending,
+  isFetched,
+  authToken,
+}) => {
+  const [selectedWebhook, setSelectedWebhook] = useState<EngineWebhook>();
+  const deleteDisclosure = useDisclosure();
+  const testDisclosure = useDisclosure();
+
+  const activeWebhooks = webhooks.filter((webhook) => webhook.active);
+
+  return (
+    <>
+      <TWTable
+        title="webhooks"
+        data={activeWebhooks}
+        columns={columns}
+        isPending={isPending}
+        isFetched={isFetched}
+        onMenuClick={[
+          {
+            icon: <MailQuestion className="size-4" />,
+            text: "Test webhook",
+            onClick: (row) => {
+              setSelectedWebhook(row);
+              testDisclosure.onOpen();
+            },
+          },
+          {
+            icon: <TrashIcon className="size-4" />,
+            text: "Delete",
+            onClick: (row) => {
+              setSelectedWebhook(row);
+              deleteDisclosure.onOpen();
+            },
+            isDestructive: true,
+          },
+        ]}
+      />
+
+      {selectedWebhook && deleteDisclosure.isOpen && (
+        <DeleteWebhookModal
+          webhook={selectedWebhook}
+          disclosure={deleteDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+      {selectedWebhook && testDisclosure.isOpen && (
+        <TestWebhookModal
+          webhook={selectedWebhook}
+          disclosure={testDisclosure}
+          instanceUrl={instanceUrl}
+          authToken={authToken}
+        />
+      )}
+    </>
+  );
+};
+
+interface DeleteWebhookModalProps {
+  webhook: EngineWebhook;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}
+function DeleteWebhookModal({
+  webhook,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: DeleteWebhookModalProps) {
+  const deleteWebhook = useEngineDeleteWebhook({
+    authToken,
+    instanceUrl,
+  });
+  const trackEvent = useTrack();
+
+  const onDelete = () => {
+    const promise = deleteWebhook.mutateAsync(
+      { id: webhook.id },
+      {
+        onSuccess: () => {
+          disclosure.onClose();
+          trackEvent({
+            category: "engine",
+            action: "delete-webhook",
+            label: "success",
+            instance: instanceUrl,
+          });
+        },
+        onError: (error) => {
+          trackEvent({
+            category: "engine",
+            action: "delete-webhook",
+            label: "error",
+            instance: instanceUrl,
+            error,
+          });
+        },
+      },
+    );
+
+    toast.promise(promise, {
+      success: "Successfully deleted webhook.",
+      error: "Failed to delete webhook.",
+    });
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Delete Webhook</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <Text>Are you sure you want to delete this webhook?</Text>
+            <FormControl>
+              <FormLabel>Name</FormLabel>
+              <Text>{webhook.name}</Text>
+            </FormControl>
+            <FormControl>
+              <FormLabel>URL</FormLabel>
+              <Text>{webhook.url}</Text>
+            </FormControl>
+            <FormControl>
+              <FormLabel>Created at</FormLabel>
+              <Text>
+                {format(new Date(webhook.createdAt ?? ""), "PP pp z")}
+              </Text>
+            </FormControl>
+          </div>
+        </ModalBody>
+
+        <ModalFooter as={Flex} gap={3}>
+          <Button onClick={disclosure.onClose} variant="outline">
+            Cancel
+          </Button>
+          <Button type="submit" variant="destructive" onClick={onDelete}>
+            Delete
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+interface TestWebhookModalProps {
+  webhook: EngineWebhook;
+  disclosure: UseDisclosureReturn;
+  instanceUrl: string;
+  authToken: string;
+}
+function TestWebhookModal({
+  webhook,
+  disclosure,
+  instanceUrl,
+  authToken,
+}: TestWebhookModalProps) {
+  const { mutate: testWebhook, isPending } = useEngineTestWebhook({
+    instanceUrl,
+    authToken,
+  });
+
+  const [status, setStatus] = useState<number | undefined>();
+  const [body, setBody] = useState<string | undefined>();
+
+  const onTest = () => {
+    testWebhook(
+      { id: webhook.id },
+      {
+        onSuccess: (result) => {
+          setStatus(result.status);
+          setBody(result.body);
+        },
+      },
+    );
+  };
+
+  return (
+    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
+      <ModalOverlay />
+      <ModalContent className="!bg-background rounded-lg border border-border">
+        <ModalHeader>Test Webhook</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className="flex flex-col gap-4 pb-2">
+            <FormItem>
+              <FormLabel>URL</FormLabel>
+              <span className="font-mono">{webhook.url}</span>
+            </FormItem>
+
+            <Button type="submit" onClick={onTest} disabled={isPending}>
+              {isPending && <Spinner className="mr-2 size-4" />}
+              Send Request
+            </Button>
+
+            {status && (
+              <div>
+                <Badge variant={status <= 299 ? "success" : "destructive"}>
+                  {status}
+                </Badge>
+              </div>
+            )}
+            <div className="max-h-[12rem] overflow-y-auto font-mono text-sm">
+              {body ?? "Send a request to see the response."}
+            </div>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/page.tsx
new file mode 100644
index 00000000000..4f6faccb348
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/page.tsx
@@ -0,0 +1,13 @@
+import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
+import type { EngineInstancePageProps } from "../types";
+import { EngineWebhooks } from "./components/engine-webhooks";
+
+export default async function Page(props: EngineInstancePageProps) {
+  const params = await props.params;
+  const { instance, authToken } = await engineInstancePageHandler({
+    engineId: params.engineId,
+    teamSlug: params.team_slug,
+  });
+
+  return <EngineWebhooks instanceUrl={instance.url} authToken={authToken} />;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineAccessPermission.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineAccessPermission.ts
new file mode 100644
index 00000000000..2c88348fa30
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineAccessPermission.ts
@@ -0,0 +1,33 @@
+"use client";
+
+// can not fetch engine permission on server - instance url can be localhost url
+
+export async function getEngineAccessPermission(params: {
+  authToken: string;
+  instanceUrl: string;
+}) {
+  try {
+    const instanceUrl = params.instanceUrl.endsWith("/")
+      ? params.instanceUrl
+      : `${params.instanceUrl}/`;
+
+    const res = await fetch(`${instanceUrl}auth/permissions/get-all`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    });
+
+    return {
+      ok: res.ok, // has access if this is true
+      status: res.status,
+    };
+  } catch {
+    return {
+      ok: false,
+      status: 500,
+      fetchFailed: true,
+    };
+  }
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstance.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstance.ts
new file mode 100644
index 00000000000..999c3c1d8f4
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstance.ts
@@ -0,0 +1,46 @@
+import { API_SERVER_URL } from "@/constants/env";
+import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
+
+export async function getEngineInstance(params: {
+  teamIdOrSlug: string;
+  authToken: string;
+  engineId: string;
+  accountId: string;
+}) {
+  if (params.engineId === "sandbox") {
+    const sandboxEngine: EngineInstance = {
+      id: "sandbox",
+      url: process.env.NEXT_PUBLIC_DEMO_ENGINE_URL || "",
+      name: "Demo Engine",
+      status: "active",
+      lastAccessedAt: new Date().toISOString(),
+      accountId: params.accountId,
+      isCloudHosted: false,
+      isPlanEngine: false,
+    };
+
+    return sandboxEngine;
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${params.teamIdOrSlug}/engine/${params.engineId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const errorMessage = await res.text();
+    console.error("failed to fetch engine instances");
+    console.error(errorMessage);
+    return undefined;
+  }
+
+  const json = (await res.json()) as {
+    result: EngineInstance;
+  };
+
+  return json.result;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstancePageMeta.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstancePageMeta.ts
new file mode 100644
index 00000000000..5b3a787d2d2
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstancePageMeta.ts
@@ -0,0 +1,35 @@
+import { notFound } from "next/navigation";
+import { getValidAccount } from "../../../../../../account/settings/getAccount";
+import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../../../login/loginRedirect";
+import { getEngineInstance } from "./getEngineInstance";
+
+export async function engineInstancePageHandler(params: {
+  teamSlug: string;
+  engineId: string;
+}) {
+  const pagePath = `/team/${params.teamSlug}/~/engine/${params.engineId}/access-tokens`;
+
+  const [authToken, account] = await Promise.all([
+    getAuthToken(),
+    getValidAccount(pagePath),
+  ]);
+
+  if (!authToken) {
+    loginRedirect(pagePath);
+  }
+
+  const instance = await getEngineInstance({
+    teamIdOrSlug: params.teamSlug,
+    authToken,
+    engineId: params.engineId,
+    accountId: account.id,
+  });
+
+  if (!instance) {
+    // this case is already handled in layout
+    notFound();
+  }
+
+  return { instance, authToken, account };
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstances.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstances.ts
new file mode 100644
index 00000000000..75bac52531b
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstances.ts
@@ -0,0 +1,33 @@
+import { API_SERVER_URL } from "@/constants/env";
+import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
+
+export async function getEngineInstances(params: {
+  authToken: string;
+  teamIdOrSlug: string;
+}) {
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${params.teamIdOrSlug}/engine`,
+    {
+      headers: {
+        Authorization: `Bearer ${params.authToken}`,
+      },
+    },
+  );
+
+  if (!res.ok) {
+    const errorMessage = await res.text();
+    console.error("failed to fetch engine instances");
+    console.error(errorMessage);
+    return {
+      error: errorMessage,
+    };
+  }
+
+  const json = (await res.json()) as {
+    result: EngineInstance[];
+  };
+
+  return {
+    data: json.result,
+  };
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/create-server-wallet.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/create-server-wallet.client.tsx
index ce18a9712bc..408cdbcb031 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/create-server-wallet.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/create-server-wallet.client.tsx
@@ -15,7 +15,7 @@ import { createEoa } from "@thirdweb-dev/vault-sdk";
 import { Loader2, WalletIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
-import { initVaultClient } from "../../lib/vault.client";
+import { initVaultClient } from "../../(overview)/lib/vault.client";
 
 export default function CreateServerWallet(props: {
   project: Project;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/rotate-admin-key.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/rotate-admin-key.client.tsx
new file mode 100644
index 00000000000..01e87a6f1bb
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/rotate-admin-key.client.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import type { Project } from "@/api/projects";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
+import { useMutation } from "@tanstack/react-query";
+import { rotateServiceAccount } from "@thirdweb-dev/vault-sdk";
+import { Loader2, RefreshCcwIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  createManagementAccessToken,
+  createWalletAccessToken,
+  initVaultClient,
+  maskSecret,
+} from "../../(overview)/lib/vault.client";
+
+export default function RotateAdminKeyButton(props: { project: Project }) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [keysConfirmed, setKeysConfirmed] = useState(false);
+  const router = useDashboardRouter();
+
+  const rotateAdminKeyMutation = useMutation({
+    mutationFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const vaultClient = await initVaultClient();
+      const rotationCode = props.project.services.find(
+        (service) => service.name === "engineCloud",
+      )?.rotationCode;
+
+      console.log("DEBUG", rotationCode);
+
+      if (!rotationCode) {
+        throw new Error("Rotation code not found");
+      }
+
+      const rotateServiceAccountRes = await rotateServiceAccount({
+        client: vaultClient,
+        request: {
+          auth: {
+            rotationCode,
+          },
+        },
+      });
+
+      if (rotateServiceAccountRes.error) {
+        throw new Error(rotateServiceAccountRes.error.message);
+      }
+
+      // need to recreate the management access token with the new admin key
+      const managementAccessTokenPromise = createManagementAccessToken({
+        project: props.project,
+        adminKey: rotateServiceAccountRes.data.newAdminKey,
+        rotationCode: rotateServiceAccountRes.data.newRotationCode,
+        vaultClient,
+      });
+
+      const userAccesTokenPromise = createWalletAccessToken({
+        project: props.project,
+        adminKey: rotateServiceAccountRes.data.newAdminKey,
+        vaultClient,
+      });
+
+      const [userAccessTokenRes, managementAccessTokenRes] = await Promise.all([
+        userAccesTokenPromise,
+        managementAccessTokenPromise,
+      ]);
+
+      if (!managementAccessTokenRes.success || !userAccessTokenRes.success) {
+        throw new Error("Failed to create access token");
+      }
+
+      return {
+        success: true,
+        adminKey: rotateServiceAccountRes.data.newAdminKey,
+        userAccessToken: userAccessTokenRes.data,
+      };
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+
+  const handleCloseModal = () => {
+    if (!keysConfirmed) {
+      return;
+    }
+    setModalOpen(false);
+    setKeysConfirmed(false);
+    rotateAdminKeyMutation.reset();
+    // invalidate the page to force a reload of the project data
+    router.refresh();
+  };
+
+  const isLoading = rotateAdminKeyMutation.isPending;
+
+  return (
+    <>
+      <Button
+        variant="outline"
+        onClick={() => setModalOpen(true)}
+        disabled={isLoading}
+        className="h-auto gap-2 rounded-lg bg-background px-4 py-3"
+      >
+        {isLoading && <Loader2 className="animate-spin" />}
+        {!isLoading && <RefreshCcwIcon className="size-4" />}
+        Rotate Admin Key
+      </Button>
+
+      <Dialog open={modalOpen} onOpenChange={handleCloseModal} modal={true}>
+        <DialogContent
+          className="overflow-hidden p-0"
+          dialogCloseClassName={cn(!keysConfirmed && "hidden")}
+        >
+          {rotateAdminKeyMutation.isPending ? (
+            <>
+              <DialogHeader className="p-6">
+                <DialogTitle>Generating new keys...</DialogTitle>
+              </DialogHeader>
+              <div className="flex flex-col items-center justify-center gap-4 p-10">
+                <Spinner className="size-8" />
+                <p className="text-muted-foreground text-xs">
+                  This may take a few seconds.
+                </p>
+              </div>
+            </>
+          ) : rotateAdminKeyMutation.data ? (
+            <div>
+              <DialogHeader className="p-6">
+                <DialogTitle>New Vault Keys</DialogTitle>
+              </DialogHeader>
+
+              <div className="space-y-6 p-6 pt-0">
+                <div className="space-y-4">
+                  <div>
+                    <h3 className="mb-2 font-medium text-sm">
+                      New Vault Admin Key
+                    </h3>
+                    <div className="flex flex-col gap-2">
+                      <CopyTextButton
+                        textToCopy={rotateAdminKeyMutation.data.adminKey}
+                        className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
+                        textToShow={maskSecret(
+                          rotateAdminKeyMutation.data.adminKey,
+                        )}
+                        copyIconPosition="right"
+                        tooltip="Copy Admin Key"
+                      />
+                      <p className="text-muted-foreground text-xs">
+                        This key is used to create or revoke your access tokens.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <Alert variant="destructive">
+                  <AlertTitle>Secure your keys</AlertTitle>
+                  <AlertDescription>
+                    These keys will not be displayed again. Store them securely
+                    as they provide access to your server wallets.
+                  </AlertDescription>
+                  <div className="h-4" />
+                  <CheckboxWithLabel className="text-foreground">
+                    <Checkbox
+                      checked={keysConfirmed}
+                      onCheckedChange={(v) => setKeysConfirmed(!!v)}
+                    />
+                    I confirm that I've securely stored these keys
+                  </CheckboxWithLabel>
+                </Alert>
+              </div>
+
+              <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
+                <Button
+                  onClick={handleCloseModal}
+                  disabled={!keysConfirmed}
+                  variant="primary"
+                >
+                  Close
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <>
+              <DialogHeader className="px-6 pt-6">
+                <DialogTitle>Rotate your Vault admin key</DialogTitle>
+                <DialogDescription>
+                  This action will generate a new Vault admin key and rotation
+                  code.{" "}
+                </DialogDescription>
+              </DialogHeader>
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-col gap-4 px-6">
+                  <p className="text-destructive">
+                    This will invalidate your current admin key and all existing
+                    access tokens.
+                  </p>
+                </div>
+                <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setModalOpen(false);
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={() => rotateAdminKeyMutation.mutate()}
+                    disabled={rotateAdminKeyMutation.isPending}
+                  >
+                    {rotateAdminKeyMutation.isPending ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Rotating...
+                      </>
+                    ) : (
+                      "Rotate Admin Key"
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/try-it-out.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/try-it-out.tsx
index e4828b37967..455bbdd6270 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/try-it-out.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/try-it-out.tsx
@@ -2,9 +2,9 @@
 import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
 import Link from "next/link";
 import { useState } from "react";
-import { Button } from "../../../../../../../../@/components/ui/button";
-import { CodeClient } from "../../../../../../../../@/components/ui/code/code.client";
-import { TabButtons } from "../../../../../../../../@/components/ui/tabs";
+import { Button } from "../../../../../../../../../@/components/ui/button";
+import { CodeClient } from "../../../../../../../../../@/components/ui/code/code.client";
+import { TabButtons } from "../../../../../../../../../@/components/ui/tabs";
 import type { Wallet } from "../wallet-table/types";
 
 export function TryItOut(props: {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/rotate-admin-key.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/rotate-admin-key.client.tsx
index d1634fc02d5..a7f1cbfecd4 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/rotate-admin-key.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/rotate-admin-key.client.tsx
@@ -31,7 +31,7 @@ import {
   createWalletAccessToken,
   initVaultClient,
   maskSecret,
-} from "../../lib/vault.client";
+} from "../../(overview)/lib/vault.client";
 
 export default function RotateAdminKeyButton(props: { project: Project }) {
   const [modalOpen, setModalOpen] = useState(false);
diff --git a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamAndProjectSelectorPopoverButton.tsx b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamAndProjectSelectorPopoverButton.tsx
index 1ac05bd0397..d38b57f9821 100644
--- a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamAndProjectSelectorPopoverButton.tsx
+++ b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamAndProjectSelectorPopoverButton.tsx
@@ -38,10 +38,15 @@ export function TeamAndProjectSelectorPopoverButton(props: TeamSwitcherProps) {
     return null;
   }
 
-  const projectsToShow = teamsAndProjects.find(
+  const teamProjects = teamsAndProjects.find(
     (x) => x.team.slug === projectsToShowOfTeam.slug,
   )?.projects;
 
+  // @TODO: HACK hide Engine projects from the list.
+  const projectsToShow = teamProjects?.filter(
+    (project) => !project.name.startsWith("Cloud-hosted Engine ("),
+  );
+
   return (
     <Popover
       open={open}

From d4f9d67eef9ee6abad1af9d49cb1673ea1a30b88 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Wed, 30 Apr 2025 23:17:28 +1200
Subject: [PATCH 2/4] reorganization

---
 .../analytics/analytics-page.tsx              |   0
 .../analytics/filter.tsx                      |   0
 .../analytics/ftux.client.tsx                 |   0
 .../analytics/send-test-tx.client.tsx         |   0
 .../analytics/summary.tsx                     |   0
 .../analytics/tx-chart/tx-chart-ui.tsx        |   0
 .../analytics/tx-chart/tx-chart.tsx           |   0
 .../analytics/tx-table/tx-table-ui.tsx        |   0
 .../analytics/tx-table/tx-table.tsx           |   0
 .../analytics/tx-table/types.ts               |   0
 .../{(overview) => cloud}/explorer/page.tsx   |   0
 .../engine/{(overview) => cloud}/layout.tsx   |  14 +-
 .../{(overview) => cloud}/lib/analytics.ts    |   0
 .../engine/{(overview) => cloud}/lib/utils.ts |   0
 .../{(overview) => cloud}/lib/vault.client.ts |   0
 .../engine/{(overview) => cloud}/page.tsx     |   0
 .../create-server-wallet.client.tsx           |   0
 .../server-wallets/components/try-it-out.tsx  |  18 +-
 .../server-wallets/page.tsx                   |   0
 .../server-wallets/wallet-table/types.ts      |   0
 .../wallet-table/wallet-table-ui.client.tsx   |   0
 .../wallet-table/wallet-table.tsx             |   0
 .../{(overview) => cloud}/tx/[id]/layout.tsx  |   0
 .../{(overview) => cloud}/tx/[id]/page.tsx    |   0
 .../create-vault-account.client.tsx           |   0
 .../vault/components/key-management.tsx       |   0
 .../components/list-access-tokens.client.tsx  |   0
 .../components/rotate-admin-key.client.tsx    |   0
 .../{(overview) => cloud}/vault/page.tsx      |   0
 .../(general)/EngineFooterCard.stories.tsx    |   0
 .../(general)/_components.tsx                 |   0
 .../import/EngineImportPage.stories.tsx       |   0
 .../(general)/import/EngineImportPage.tsx     |   0
 .../(general)/import/page.tsx                 |   0
 .../(general)/layout.tsx                      |   4 +-
 .../engine-instances-table.stories.tsx        |   0
 .../overview/engine-instances-table.tsx       |   0
 .../(general)/overview/engine-list.tsx        |   0
 .../{legacy => dedicated}/(general)/page.tsx  |   7 +-
 .../_components/EngineErrorPage.tsx           |   0
 .../_components/EnginePageLayout.tsx          |   0
 .../_components/EnsureEnginePermission.tsx    |   0
 .../[engineId]/_components/version.tsx        |   0
 .../components/access-tokens-table.tsx        |   0
 .../components/add-access-token-button.tsx    |   0
 .../components/add-keypair-button.tsx         |   0
 .../components/engine-access-tokens.tsx       |   0
 .../components/keypairs-table.tsx             |   0
 .../[engineId]/access-tokens/page.tsx         |   0
 .../admins/components/add-admin-button.tsx    |   0
 .../admins/components/admins-table.tsx        |   0
 .../admins/components/engine-admins.tsx       |   0
 .../(instance)/[engineId]/admins/page.tsx     |   0
 .../components/EngineAlertDialogForm.tsx      |   0
 .../alerts/components/EngineAlertsPage.tsx    |   0
 .../components/EngineDeleteAlertModal.tsx     |   0
 .../components/ManageEngineAlerts.stories.tsx |   0
 .../alerts/components/ManageEngineAlerts.tsx  |   0
 .../components/RecentEngineAlerts.stories.tsx |   0
 .../alerts/components/RecentEngineAlerts.tsx  |   0
 .../(instance)/[engineId]/alerts/page.tsx     |   0
 .../components/circle-config.tsx              |   0
 .../configuration/components/cors.tsx         |   0
 .../components/engine-configuration.tsx       |   0
 .../components/engine-wallet-config.tsx       |   0
 .../configuration/components/ip-allowlist.tsx |   0
 .../components/kms-aws-config.tsx             |   0
 .../components/kms-gcp-config.tsx             |   0
 .../configuration/components/local-config.tsx |   0
 .../configuration/components/system.tsx       |   0
 .../[engineId]/configuration/page.tsx         |   0
 .../add-contract-subscription-button.tsx      |   0
 .../contract-subscriptions-table.tsx          |   0
 .../engine-contract-subscription.tsx          |   0
 .../contract-subscriptions/page.tsx           |   0
 .../explorer/components/engine-explorer.tsx   |   0
 .../explorer/components/swagger-ui.css        |   0
 .../(instance)/[engineId]/explorer/page.tsx   |   0
 .../(instance)/[engineId]/layout.tsx          |   0
 .../components/EngineSystemMetrics.tsx        |   0
 .../metrics/components/ErrorRate.tsx          |   0
 .../metrics/components/Healthcheck.tsx        |   0
 .../metrics/components/StatusCodes.tsx        |   0
 .../(instance)/[engineId]/metrics/page.tsx    |   0
 .../components/backend-wallets-table.tsx      |   0
 .../create-backend-wallet-button.tsx          |   0
 .../overview/components/engine-overview.tsx   |   0
 .../import-backend-wallet-button.tsx          |   0
 .../components/transaction-timeline.tsx       |   0
 .../components/transactions-table.tsx         |   0
 .../[engineId]/overview/components/utils.ts   |   0
 .../(instance)/[engineId]/page.tsx            |   0
 .../components/add-relayer-button.tsx         |   0
 .../relayers/components/engine-relayer.tsx    |   0
 .../relayers/components/relayers-table.tsx    |   0
 .../(instance)/[engineId]/relayers/page.tsx   |   0
 .../(instance)/[engineId]/types.ts            |   0
 .../create-wallet-credential-button.tsx       |   0
 .../components/credential-form.tsx            |   0
 .../credential-type-fields/circle.tsx         |   0
 .../edit-wallet-credential-button.tsx         |   0
 .../wallet-credentials/components/types.ts    |   0
 .../components/wallet-credentials-table.tsx   |   0
 .../components/wallet-credentials.tsx         |   0
 .../[engineId]/wallet-credentials/page.tsx    |   0
 .../components/add-webhook-button.tsx         |   0
 .../webhooks/components/engine-webhooks.tsx   |   0
 .../webhooks/components/webhooks-table.tsx    |   0
 .../(instance)/[engineId]/webhooks/page.tsx   |   0
 .../_utils/getEngineAccessPermission.ts       |   0
 .../_utils/getEngineInstance.ts               |   0
 .../_utils/getEngineInstancePageMeta.ts       |   0
 .../_utils/getEngineInstances.ts              |   0
 .../[project_slug]/engine/loading.tsx         |   5 +
 .../[project_slug]/engine/page.tsx            |  65 ++++
 .../create-server-wallet.client.tsx           | 150 --------
 .../components/rotate-admin-key.client.tsx    | 242 -------------
 .../server-wallets/components/try-it-out.tsx  | 303 ----------------
 .../components/rotate-admin-key.client.tsx    | 322 ------------------
 119 files changed, 85 insertions(+), 1045 deletions(-)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/analytics-page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/filter.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/ftux.client.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/send-test-tx.client.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/summary.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/tx-chart/tx-chart-ui.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/tx-chart/tx-chart.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/tx-table/tx-table-ui.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/tx-table/tx-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/analytics/tx-table/types.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/explorer/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/layout.tsx (85%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/lib/analytics.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/lib/utils.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/lib/vault.client.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/server-wallets/components/create-server-wallet.client.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/server-wallets/components/try-it-out.tsx (92%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/server-wallets/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/server-wallets/wallet-table/types.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/server-wallets/wallet-table/wallet-table-ui.client.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/server-wallets/wallet-table/wallet-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/tx/[id]/layout.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/tx/[id]/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/vault/components/create-vault-account.client.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/vault/components/key-management.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/vault/components/list-access-tokens.client.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/vault/components/rotate-admin-key.client.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{(overview) => cloud}/vault/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/EngineFooterCard.stories.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/_components.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/import/EngineImportPage.stories.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/import/EngineImportPage.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/import/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/layout.tsx (97%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/overview/engine-instances-table.stories.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/overview/engine-instances-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/overview/engine-list.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(general)/page.tsx (81%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/_components/EngineErrorPage.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/_components/EnginePageLayout.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/_components/EnsureEnginePermission.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/_components/version.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/access-tokens/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/admins/components/add-admin-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/admins/components/admins-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/admins/components/engine-admins.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/admins/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/alerts/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/components/circle-config.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/components/cors.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/components/engine-configuration.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/components/ip-allowlist.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/components/kms-aws-config.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/components/local-config.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/components/system.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/configuration/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/contract-subscriptions/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/explorer/components/engine-explorer.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/explorer/components/swagger-ui.css (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/explorer/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/layout.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/metrics/components/ErrorRate.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/metrics/components/Healthcheck.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/metrics/components/StatusCodes.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/metrics/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/overview/components/backend-wallets-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/overview/components/engine-overview.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/overview/components/transaction-timeline.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/overview/components/transactions-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/overview/components/utils.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/relayers/components/add-relayer-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/relayers/components/engine-relayer.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/relayers/components/relayers-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/relayers/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/types.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/wallet-credentials/components/types.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/wallet-credentials/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/webhooks/components/webhooks-table.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/(instance)/[engineId]/webhooks/page.tsx (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/_utils/getEngineAccessPermission.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/_utils/getEngineInstance.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/_utils/getEngineInstancePageMeta.ts (100%)
 rename apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/{legacy => dedicated}/_utils/getEngineInstances.ts (100%)
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/loading.tsx
 create mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/create-server-wallet.client.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/rotate-admin-key.client.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/try-it-out.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/rotate-admin-key.client.tsx

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/analytics-page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/analytics-page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/analytics-page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/analytics-page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/filter.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/filter.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/filter.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/filter.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/ftux.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/ftux.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/ftux.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/ftux.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/send-test-tx.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/send-test-tx.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/send-test-tx.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/send-test-tx.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/summary.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/summary.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/summary.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/summary.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-chart/tx-chart-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-chart/tx-chart-ui.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-chart/tx-chart-ui.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-chart/tx-chart-ui.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-chart/tx-chart.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-chart/tx-chart.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-chart/tx-chart.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-chart/tx-chart.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/tx-table-ui.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-table/tx-table-ui.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/tx-table-ui.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-table/tx-table-ui.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/tx-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-table/tx-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/tx-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-table/tx-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-table/types.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/analytics/tx-table/types.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/analytics/tx-table/types.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/explorer/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/explorer/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/explorer/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/explorer/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/layout.tsx
similarity index 85%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/layout.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/layout.tsx
index 35d14daf36f..4acf966b4af 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/layout.tsx
@@ -8,7 +8,6 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { EngineIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";
-import { getEngineInstances } from "../legacy/_utils/getEngineInstances";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -21,10 +20,9 @@ export default async function Page(props: {
     redirect("/team");
   }
 
-  const [team, project, engineInstances] = await Promise.all([
+  const [team, project] = await Promise.all([
     getTeamBySlug(team_slug),
     getProject(team_slug, project_slug),
-    getEngineInstances({ authToken, teamIdOrSlug: team_slug }),
   ]);
 
   if (!team) {
@@ -35,11 +33,6 @@ export default async function Page(props: {
     redirect(`/team/${team_slug}`);
   }
 
-  // if we have any legacy engine instances, redirect to the legacy engine layout
-  if (engineInstances.data?.length && engineInstances.data.length > 0) {
-    redirect(`/team/${team_slug}/${project_slug}/engine/legacy`);
-  }
-
   return (
     <TransactionsLayout
       projectSlug={project.slug}
@@ -57,7 +50,8 @@ function TransactionsLayout(props: {
   clientId: string;
   children: React.ReactNode;
 }) {
-  const engineLayoutSlug = `/team/${props.teamSlug}/${props.projectSlug}/engine`;
+  const engineBaseSlug = `/team/${props.teamSlug}/${props.projectSlug}/engine`;
+  const engineLayoutSlug = `${engineBaseSlug}/cloud`;
 
   return (
     <div className="flex grow flex-col">
@@ -86,7 +80,7 @@ function TransactionsLayout(props: {
                 </Link>
               </div>
             </div>
-            <Link href={`${engineLayoutSlug}/legacy`}>
+            <Link href={`${engineBaseSlug}/dedicated`}>
               <Button variant="outline">Switch to dedicated engines</Button>
             </Link>
           </div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/analytics.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/lib/analytics.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/analytics.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/lib/analytics.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/utils.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/lib/utils.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/utils.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/lib/utils.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/vault.client.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/lib/vault.client.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/lib/vault.client.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/lib/vault.client.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/create-server-wallet.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/components/create-server-wallet.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/create-server-wallet.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/components/create-server-wallet.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/try-it-out.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/components/try-it-out.tsx
similarity index 92%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/try-it-out.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/components/try-it-out.tsx
index 455bbdd6270..f855c6ed92b 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/components/try-it-out.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/components/try-it-out.tsx
@@ -1,10 +1,10 @@
 "use client";
+import { Button } from "@/components/ui/button";
+import { CodeClient } from "@/components/ui/code/code.client";
+import { TabButtons } from "@/components/ui/tabs";
 import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
 import Link from "next/link";
 import { useState } from "react";
-import { Button } from "../../../../../../../../../@/components/ui/button";
-import { CodeClient } from "../../../../../../../../../@/components/ui/code/code.client";
-import { TabButtons } from "../../../../../../../../../@/components/ui/tabs";
 import type { Wallet } from "../wallet-table/types";
 
 export function TryItOut(props: {
@@ -94,22 +94,12 @@ export function TryItOut(props: {
         <div className="flex flex-row justify-end gap-4">
           <Button variant={"secondary"} asChild>
             <Link
-              href={`/team/${props.team_slug}/${props.project_slug}/engine/explorer`}
+              href={`/team/${props.team_slug}/${props.project_slug}/engine/cloud/explorer`}
               rel="noreferrer"
             >
               View API reference
             </Link>
           </Button>
-          {props.wallet && (
-            <Button variant={"primary"} asChild>
-              <Link
-                href={`/team/${props.team_slug}/${props.project_slug}/engine?expand_test_tx=true`}
-                rel="noreferrer"
-              >
-                Send a test transaction
-              </Link>
-            </Button>
-          )}
         </div>
       </div>
     </div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/types.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/types.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/types.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/wallet-table-ui.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/wallet-table-ui.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/wallet-table-ui.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/wallet-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/wallet-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/server-wallets/wallet-table/wallet-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/server-wallets/wallet-table/wallet-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/tx/[id]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/tx/[id]/layout.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/tx/[id]/layout.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/tx/[id]/layout.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/tx/[id]/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/tx/[id]/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/tx/[id]/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/tx/[id]/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/create-vault-account.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/create-vault-account.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/create-vault-account.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/create-vault-account.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/key-management.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/key-management.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/key-management.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/key-management.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/list-access-tokens.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/list-access-tokens.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/list-access-tokens.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/list-access-tokens.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/rotate-admin-key.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/rotate-admin-key.client.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/components/rotate-admin-key.client.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/components/rotate-admin-key.client.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/(overview)/vault/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/vault/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/EngineFooterCard.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/EngineFooterCard.stories.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/EngineFooterCard.stories.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/EngineFooterCard.stories.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/_components.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/_components.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/_components.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/_components.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/EngineImportPage.stories.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.stories.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/EngineImportPage.stories.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/EngineImportPage.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/EngineImportPage.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/EngineImportPage.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/import/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/layout.tsx
similarity index 97%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/layout.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/layout.tsx
index c3105737adc..295bb352a3b 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/layout.tsx
@@ -16,7 +16,7 @@ export default async function Layout(props: {
   children: React.ReactNode;
 }) {
   const params = await props.params;
-  const linkPrefix = `/team/${params.team_slug}/${params.project_slug}/engine/legacy`;
+  const linkPrefix = `/team/${params.team_slug}/${params.project_slug}/engine/dedicated`;
   const sidebarLinks: SidebarLink[] = [
     {
       label: "Engine Instances",
@@ -45,7 +45,7 @@ export default async function Layout(props: {
               </Badge>
             </h1>
             <p className="flex flex-col text-muted-foreground text-sm">
-              Manage your deployed Engine instances.
+              Manage your deployed Engine instances
             </p>
           </div>
           <div className="flex items-center gap-3">
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-instances-table.stories.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.stories.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-instances-table.stories.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-instances-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-instances-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-instances-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-list.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-list.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/overview/engine-list.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-list.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/page.tsx
similarity index 81%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/page.tsx
index ee1946e0cd5..dd316db2997 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(general)/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/page.tsx
@@ -8,6 +8,7 @@ import { EngineInstancesList } from "./overview/engine-list";
 export default async function Page(props: {
   params: Promise<{
     team_slug: string;
+    project_slug: string;
   }>;
   searchParams: Promise<{
     importUrl?: string;
@@ -20,7 +21,7 @@ export default async function Page(props: {
 
   if (searchParams.importUrl) {
     redirect(
-      `/team/${params.team_slug}/~/engine/import?importUrl=${searchParams.importUrl}`,
+      `/team/${params.team_slug}/${params.project_slug}/engine/dedicated/import?importUrl=${searchParams.importUrl}`,
     );
   }
 
@@ -30,7 +31,9 @@ export default async function Page(props: {
   ]);
 
   if (!authToken) {
-    loginRedirect(`/team/${params.team_slug}/~/engine`);
+    loginRedirect(
+      `/team/${params.team_slug}/${params.project_slug}/engine/dedicated`,
+    );
   }
 
   if (!team) {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EngineErrorPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EngineErrorPage.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EngineErrorPage.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EngineErrorPage.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnginePageLayout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnginePageLayout.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnginePageLayout.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnginePageLayout.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnsureEnginePermission.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/version.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/version.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/_components/version.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/version.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/access-tokens/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/add-admin-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/components/add-admin-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/add-admin-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/components/add-admin-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/admins-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/admins-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/components/admins-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/engine-admins.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/components/engine-admins.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/components/engine-admins.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/components/engine-admins.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/admins/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/alerts/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/circle-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/circle-config.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/circle-config.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/circle-config.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/cors.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/cors.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/cors.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/cors.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-configuration.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-configuration.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/ip-allowlist.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-aws-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/local-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/local-config.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/local-config.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/local-config.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/system.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/components/system.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/configuration/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/contract-subscriptions/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/engine-explorer.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/components/engine-explorer.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/engine-explorer.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/components/engine-explorer.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/swagger-ui.css b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/components/swagger-ui.css
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/components/swagger-ui.css
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/components/swagger-ui.css
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/explorer/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/layout.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/layout.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/layout.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/ErrorRate.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/ErrorRate.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/ErrorRate.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/ErrorRate.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/Healthcheck.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/Healthcheck.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/Healthcheck.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/Healthcheck.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/StatusCodes.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/StatusCodes.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/components/StatusCodes.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/StatusCodes.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/metrics/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/engine-overview.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/engine-overview.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transaction-timeline.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transaction-timeline.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transactions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/transactions-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/utils.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/utils.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/overview/components/utils.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/utils.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/add-relayer-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/engine-relayer.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/engine-relayer.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/components/engine-relayer.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/relayers-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/components/relayers-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/components/relayers-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/components/relayers-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/relayers/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/types.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/types.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/types.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/types.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/types.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/types.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/wallet-credentials/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/webhooks-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/page.tsx
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/(instance)/[engineId]/webhooks/page.tsx
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/page.tsx
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineAccessPermission.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineAccessPermission.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineAccessPermission.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineAccessPermission.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstance.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstance.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstance.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstance.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstancePageMeta.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstancePageMeta.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstancePageMeta.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstancePageMeta.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstances.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstances.ts
similarity index 100%
rename from apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/legacy/_utils/getEngineInstances.ts
rename to apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstances.ts
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/loading.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/loading.tsx
new file mode 100644
index 00000000000..ddbf6bd8ca7
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/loading.tsx
@@ -0,0 +1,5 @@
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
+
+export default function Loading() {
+  return <GenericLoadingPage className="border-none" />;
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx
new file mode 100644
index 00000000000..ce99cb6a99e
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx
@@ -0,0 +1,65 @@
+import { getProject } from "@/api/projects";
+import { getTeamBySlug } from "@/api/team";
+import { THIRDWEB_VAULT_URL } from "@/constants/env";
+import { createVaultClient } from "@thirdweb-dev/vault-sdk";
+import { redirect } from "next/navigation";
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { getEngineInstances } from "./dedicated/_utils/getEngineInstances";
+
+export default async function TransactionsAnalyticsPage(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+  searchParams: Promise<{
+    from?: string | string[] | undefined;
+    to?: string | string[] | undefined;
+    interval?: string | string[] | undefined;
+  }>;
+}) {
+  const { team_slug, project_slug } = await props.params;
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    redirect("/team");
+  }
+
+  const [team, project, engineInstances] = await Promise.all([
+    getTeamBySlug(team_slug),
+    getProject(team_slug, project_slug),
+    getEngineInstances({ authToken, teamIdOrSlug: team_slug }),
+  ]);
+
+  if (!team) {
+    redirect("/team");
+  }
+
+  if (!project) {
+    redirect(`/team/${team_slug}`);
+  }
+
+  const projectEngineCloudService = project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+
+  const vaultClient = await createVaultClient({
+    baseUrl: THIRDWEB_VAULT_URL,
+  }).catch(() => undefined);
+
+  if (!vaultClient) {
+    return <div>Error: Failed to connect to Vault</div>;
+  }
+
+  const managementAccessToken =
+    projectEngineCloudService?.managementAccessToken;
+
+  // if we have a management access token, redirect to the engine cloud layout
+  if (managementAccessToken) {
+    redirect(`/team/${team_slug}/${project_slug}/engine/cloud`);
+  }
+
+  // if we have any legacy engine instances, redirect to the legacy engine layout
+  if (engineInstances.data?.length && engineInstances.data.length > 0) {
+    redirect(`/team/${team_slug}/${project_slug}/engine/dedicated`);
+  }
+
+  // otherwise, redirect to the engine cloud layout
+  redirect(`/team/${team_slug}/${project_slug}/engine/cloud`);
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/create-server-wallet.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/create-server-wallet.client.tsx
deleted file mode 100644
index 408cdbcb031..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/create-server-wallet.client.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client";
-import type { Project } from "@/api/projects";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { useMutation } from "@tanstack/react-query";
-import { createEoa } from "@thirdweb-dev/vault-sdk";
-import { Loader2, WalletIcon } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import { initVaultClient } from "../../(overview)/lib/vault.client";
-
-export default function CreateServerWallet(props: {
-  project: Project;
-  managementAccessToken: string | undefined;
-}) {
-  const router = useDashboardRouter();
-  const [label, setLabel] = useState("");
-  const [modalOpen, setModalOpen] = useState(false);
-
-  const createEoaMutation = useMutation({
-    mutationFn: async ({
-      managementAccessToken,
-      label,
-    }: {
-      managementAccessToken: string;
-      label: string;
-    }) => {
-      const vaultClient = await initVaultClient();
-
-      const eoa = await createEoa({
-        request: {
-          options: {
-            metadata: {
-              projectId: props.project.id,
-              teamId: props.project.teamId,
-              type: "server-wallet",
-              label,
-            },
-          },
-          auth: {
-            accessToken: managementAccessToken,
-          },
-        },
-        client: vaultClient,
-      });
-
-      if (!eoa.success) {
-        throw new Error("Failed to create eoa");
-      }
-
-      router.refresh();
-      setModalOpen(false);
-
-      return eoa;
-    },
-    onError: (error) => {
-      toast.error(error.message);
-    },
-  });
-
-  const handleCreateServerWallet = async () => {
-    if (!props.managementAccessToken) {
-      router.push("vault");
-    } else {
-      await createEoaMutation.mutateAsync({
-        managementAccessToken: props.managementAccessToken,
-        label,
-      });
-    }
-  };
-
-  const isLoading = createEoaMutation.isPending;
-
-  return (
-    <>
-      <Button
-        variant={"primary"}
-        onClick={() =>
-          props.managementAccessToken
-            ? setModalOpen(true)
-            : router.push("vault")
-        }
-        className="flex flex-row items-center gap-2"
-      >
-        {isLoading ? (
-          <Loader2 className="animate-spin" />
-        ) : (
-          <WalletIcon className="size-4" />
-        )}
-        {props.managementAccessToken
-          ? isLoading
-            ? "Creating..."
-            : "Create Server Wallet"
-          : "Get Started"}
-      </Button>
-
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="p-0">
-          <DialogHeader className="px-6 pt-6">
-            <DialogTitle>Create server wallet</DialogTitle>
-            <DialogDescription>
-              Enter a label for your server wallet.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex flex-col gap-4 px-6">
-            <div>
-              <Input
-                placeholder="Wallet label (optional)"
-                value={label}
-                onChange={(e) => setLabel(e.target.value)}
-                className="w-full"
-              />
-            </div>
-          </div>
-          <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
-            <Button
-              variant="outline"
-              onClick={() => setModalOpen(false)}
-              disabled={isLoading}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="primary"
-              onClick={handleCreateServerWallet}
-              disabled={isLoading}
-            >
-              {isLoading ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Creating...
-                </>
-              ) : (
-                "Create"
-              )}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/rotate-admin-key.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/rotate-admin-key.client.tsx
deleted file mode 100644
index 01e87a6f1bb..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/rotate-admin-key.client.tsx
+++ /dev/null
@@ -1,242 +0,0 @@
-"use client";
-
-import type { Project } from "@/api/projects";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { cn } from "@/lib/utils";
-import { useMutation } from "@tanstack/react-query";
-import { rotateServiceAccount } from "@thirdweb-dev/vault-sdk";
-import { Loader2, RefreshCcwIcon } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import {
-  createManagementAccessToken,
-  createWalletAccessToken,
-  initVaultClient,
-  maskSecret,
-} from "../../(overview)/lib/vault.client";
-
-export default function RotateAdminKeyButton(props: { project: Project }) {
-  const [modalOpen, setModalOpen] = useState(false);
-  const [keysConfirmed, setKeysConfirmed] = useState(false);
-  const router = useDashboardRouter();
-
-  const rotateAdminKeyMutation = useMutation({
-    mutationFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
-      const vaultClient = await initVaultClient();
-      const rotationCode = props.project.services.find(
-        (service) => service.name === "engineCloud",
-      )?.rotationCode;
-
-      console.log("DEBUG", rotationCode);
-
-      if (!rotationCode) {
-        throw new Error("Rotation code not found");
-      }
-
-      const rotateServiceAccountRes = await rotateServiceAccount({
-        client: vaultClient,
-        request: {
-          auth: {
-            rotationCode,
-          },
-        },
-      });
-
-      if (rotateServiceAccountRes.error) {
-        throw new Error(rotateServiceAccountRes.error.message);
-      }
-
-      // need to recreate the management access token with the new admin key
-      const managementAccessTokenPromise = createManagementAccessToken({
-        project: props.project,
-        adminKey: rotateServiceAccountRes.data.newAdminKey,
-        rotationCode: rotateServiceAccountRes.data.newRotationCode,
-        vaultClient,
-      });
-
-      const userAccesTokenPromise = createWalletAccessToken({
-        project: props.project,
-        adminKey: rotateServiceAccountRes.data.newAdminKey,
-        vaultClient,
-      });
-
-      const [userAccessTokenRes, managementAccessTokenRes] = await Promise.all([
-        userAccesTokenPromise,
-        managementAccessTokenPromise,
-      ]);
-
-      if (!managementAccessTokenRes.success || !userAccessTokenRes.success) {
-        throw new Error("Failed to create access token");
-      }
-
-      return {
-        success: true,
-        adminKey: rotateServiceAccountRes.data.newAdminKey,
-        userAccessToken: userAccessTokenRes.data,
-      };
-    },
-    onError: (error) => {
-      toast.error(error.message);
-    },
-  });
-
-  const handleCloseModal = () => {
-    if (!keysConfirmed) {
-      return;
-    }
-    setModalOpen(false);
-    setKeysConfirmed(false);
-    rotateAdminKeyMutation.reset();
-    // invalidate the page to force a reload of the project data
-    router.refresh();
-  };
-
-  const isLoading = rotateAdminKeyMutation.isPending;
-
-  return (
-    <>
-      <Button
-        variant="outline"
-        onClick={() => setModalOpen(true)}
-        disabled={isLoading}
-        className="h-auto gap-2 rounded-lg bg-background px-4 py-3"
-      >
-        {isLoading && <Loader2 className="animate-spin" />}
-        {!isLoading && <RefreshCcwIcon className="size-4" />}
-        Rotate Admin Key
-      </Button>
-
-      <Dialog open={modalOpen} onOpenChange={handleCloseModal} modal={true}>
-        <DialogContent
-          className="overflow-hidden p-0"
-          dialogCloseClassName={cn(!keysConfirmed && "hidden")}
-        >
-          {rotateAdminKeyMutation.isPending ? (
-            <>
-              <DialogHeader className="p-6">
-                <DialogTitle>Generating new keys...</DialogTitle>
-              </DialogHeader>
-              <div className="flex flex-col items-center justify-center gap-4 p-10">
-                <Spinner className="size-8" />
-                <p className="text-muted-foreground text-xs">
-                  This may take a few seconds.
-                </p>
-              </div>
-            </>
-          ) : rotateAdminKeyMutation.data ? (
-            <div>
-              <DialogHeader className="p-6">
-                <DialogTitle>New Vault Keys</DialogTitle>
-              </DialogHeader>
-
-              <div className="space-y-6 p-6 pt-0">
-                <div className="space-y-4">
-                  <div>
-                    <h3 className="mb-2 font-medium text-sm">
-                      New Vault Admin Key
-                    </h3>
-                    <div className="flex flex-col gap-2">
-                      <CopyTextButton
-                        textToCopy={rotateAdminKeyMutation.data.adminKey}
-                        className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
-                        textToShow={maskSecret(
-                          rotateAdminKeyMutation.data.adminKey,
-                        )}
-                        copyIconPosition="right"
-                        tooltip="Copy Admin Key"
-                      />
-                      <p className="text-muted-foreground text-xs">
-                        This key is used to create or revoke your access tokens.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <Alert variant="destructive">
-                  <AlertTitle>Secure your keys</AlertTitle>
-                  <AlertDescription>
-                    These keys will not be displayed again. Store them securely
-                    as they provide access to your server wallets.
-                  </AlertDescription>
-                  <div className="h-4" />
-                  <CheckboxWithLabel className="text-foreground">
-                    <Checkbox
-                      checked={keysConfirmed}
-                      onCheckedChange={(v) => setKeysConfirmed(!!v)}
-                    />
-                    I confirm that I've securely stored these keys
-                  </CheckboxWithLabel>
-                </Alert>
-              </div>
-
-              <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
-                <Button
-                  onClick={handleCloseModal}
-                  disabled={!keysConfirmed}
-                  variant="primary"
-                >
-                  Close
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <>
-              <DialogHeader className="px-6 pt-6">
-                <DialogTitle>Rotate your Vault admin key</DialogTitle>
-                <DialogDescription>
-                  This action will generate a new Vault admin key and rotation
-                  code.{" "}
-                </DialogDescription>
-              </DialogHeader>
-              <div className="flex flex-col gap-4">
-                <div className="flex flex-col gap-4 px-6">
-                  <p className="text-destructive">
-                    This will invalidate your current admin key and all existing
-                    access tokens.
-                  </p>
-                </div>
-                <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    onClick={() => rotateAdminKeyMutation.mutate()}
-                    disabled={rotateAdminKeyMutation.isPending}
-                  >
-                    {rotateAdminKeyMutation.isPending ? (
-                      <>
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        Rotating...
-                      </>
-                    ) : (
-                      "Rotate Admin Key"
-                    )}
-                  </Button>
-                </div>
-              </div>
-            </>
-          )}
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/try-it-out.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/try-it-out.tsx
deleted file mode 100644
index 455bbdd6270..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/server-wallets/components/try-it-out.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-"use client";
-import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
-import Link from "next/link";
-import { useState } from "react";
-import { Button } from "../../../../../../../../../@/components/ui/button";
-import { CodeClient } from "../../../../../../../../../@/components/ui/code/code.client";
-import { TabButtons } from "../../../../../../../../../@/components/ui/tabs";
-import type { Wallet } from "../wallet-table/types";
-
-export function TryItOut(props: {
-  authToken: string;
-  wallet?: Wallet;
-  team_slug: string;
-  project_slug: string;
-}) {
-  const [activeTab, setActiveTab] = useState<string>("curl");
-
-  return (
-    <div className="flex flex-col gap-6 overflow-hidden rounded-lg border border-border bg-card p-6">
-      <div className="flex flex-row items-center gap-4">
-        <div className="flex flex-1 flex-col gap-4 rounded-lg rounded-b-none lg:flex-row lg:justify-between">
-          <div>
-            <h2 className="font-semibold text-xl tracking-tight">
-              Usage from your backend
-            </h2>
-            <p className="text-muted-foreground text-sm">
-              Send transactions from your server wallets using a simple http API
-            </p>
-          </div>
-        </div>
-      </div>
-      <div>
-        <TabButtons
-          tabs={[
-            {
-              name: "curl",
-              onClick: () => setActiveTab("curl"),
-              isActive: activeTab === "curl",
-            },
-            {
-              name: "JavaScript",
-              onClick: () => setActiveTab("js"),
-              isActive: activeTab === "js",
-            },
-            {
-              name: "Python",
-              onClick: () => setActiveTab("python"),
-              isActive: activeTab === "python",
-            },
-            {
-              name: "Go",
-              onClick: () => setActiveTab("go"),
-              isActive: activeTab === "go",
-            },
-            {
-              name: "C#",
-              onClick: () => setActiveTab("csharp"),
-              isActive: activeTab === "csharp",
-            },
-          ]}
-        />
-
-        <div className="h-4" />
-
-        {activeTab === "curl" && (
-          <CodeClient
-            lang="bash"
-            code={curlExample()}
-            className="bg-background"
-          />
-        )}
-        {activeTab === "js" && (
-          <CodeClient lang="js" code={jsExample()} className="bg-background" />
-        )}
-        {activeTab === "python" && (
-          <CodeClient
-            lang="python"
-            code={pythonExample()}
-            className="bg-background"
-          />
-        )}
-        {activeTab === "go" && (
-          <CodeClient lang="go" code={goExample()} className="bg-background" />
-        )}
-        {activeTab === "csharp" && (
-          <CodeClient
-            lang="csharp"
-            code={csharpExample()}
-            className="bg-background"
-          />
-        )}
-
-        <div className="h-4" />
-        <div className="flex flex-row justify-end gap-4">
-          <Button variant={"secondary"} asChild>
-            <Link
-              href={`/team/${props.team_slug}/${props.project_slug}/engine/explorer`}
-              rel="noreferrer"
-            >
-              View API reference
-            </Link>
-          </Button>
-          {props.wallet && (
-            <Button variant={"primary"} asChild>
-              <Link
-                href={`/team/${props.team_slug}/${props.project_slug}/engine?expand_test_tx=true`}
-                rel="noreferrer"
-              >
-                Send a test transaction
-              </Link>
-            </Button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const curlExample = () => `\
-curl -X POST "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract" \\
-  -H "Content-Type: application/json" \\
-  -H "x-secret-key: <your-project-secret-key>" \\
-  -H "x-vault-access-token: <your-vault-access-token>" \\
-  -d '{
-    "executionOptions": {
-      "type": "AA",
-      "signerAddress": "<your-signer-address>",
-      "chainId": "84532"
-    },
-    "params": [
-      {
-        "contractAddress": "0x...",
-        "method": "function mintTo(address to, uint256 amount)",
-        "params": ["0x...", "100"]
-      }
-    ]
-  }'`;
-
-const jsExample = () => `\
-const response = await fetch(
-  "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract",
-  {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "x-secret-key": "<your-project-secret-key>",
-      "x-vault-access-token": "<your-vault-access-token>"
-    },
-    body: JSON.stringify({
-      "executionOptions": {
-        "type": "AA",
-        "signerAddress": "<your-signer-address>",
-        "chainId": "84532"
-      },
-      "params": [
-        {
-          "contractAddress": "0x...",
-          "method": "function mintTo(address to, uint256 amount)",
-          "params": ["0x...", "100"]
-        }
-      ]
-    })
-  }
-);`;
-
-const pythonExample = () => `\
-import requests
-import json
-
-url = "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract"
-headers = {
-    "Content-Type": "application/json",
-    "x-secret-key": "<your-project-secret-key>",
-    "x-vault-access-token": "<your-vault-access-token>"
-}
-payload = {
-    "executionOptions": {
-        "type": "AA",
-        "signerAddress": "<your-signer-address>",
-        "chainId": "84532"
-    },
-    "params": [
-        {
-            "contractAddress": "0x...",
-            "method": "function mintTo(address to, uint256 amount)",
-            "params": ["0x...", "100"]
-        }
-    ]
-}
-
-response = requests.post(url, headers=headers, json=payload)
-result = response.json()`;
-
-const goExample = () => `\
-package main
-
-import (
-	"bytes"
-	"encoding/json"
-	"fmt"
-	"net/http"
-)
-
-func main() {
-	url := "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract"
-	
-	// Create the request payload
-	type Param struct {
-		ContractAddress string   \`json:"contractAddress"\`
-		Method          string   \`json:"method"\`
-		Params          []string \`json:"params"\`
-	}
-	
-	type RequestBody struct {
-		ExecutionOptions struct {
-			Type          string \`json:"type"\`
-			SignerAddress string \`json:"signerAddress"\`
-			ChainId       string \`json:"chainId"\`
-		} \`json:"executionOptions"\`
-		Params []Param \`json:"params"\`
-	}
-	
-	requestBody := RequestBody{
-		Params: []Param{
-			{
-				ContractAddress: "0x...",
-				Method:          "function mintTo(address to, uint256 amount)",
-				Params:          []string{"0x...", "100"},
-			},
-		},
-	}
-	requestBody.ExecutionOptions.Type = "AA"
-	requestBody.ExecutionOptions.SignerAddress = "<your-signer-address>"
-	requestBody.ExecutionOptions.ChainId = "84532"
-	
-	jsonData, _ := json.Marshal(requestBody)
-	
-	// Create the HTTP request
-	req, _ := http.NewRequest("POST", url, bytes.NewBuffer(jsonData))
-	req.Header.Set("Content-Type", "application/json")
-	req.Header.Set("x-secret-key", "<your-project-secret-key>")
-	req.Header.Set("x-vault-access-token", "<your-vault-access-token>")
-	
-	// Send the request
-	client := &http.Client{}
-	resp, err := client.Do(req)
-	if err != nil {
-		fmt.Println("Error:", err)
-		return
-	}
-	defer resp.Body.Close()
-	
-	// Process the response
-	var result map[string]interface{}
-	json.NewDecoder(resp.Body).Decode(&result)
-	fmt.Println("Response:", result)
-}`;
-
-const csharpExample = () => `\
-using System;
-using System.Net.Http;
-using System.Text;
-using System.Text.Json;
-using System.Threading.Tasks;
-
-class Program
-{
-    static async Task Main()
-    {
-        var url = "${THIRDWEB_ENGINE_CLOUD_URL}/write/contract";
-        
-        var requestData = new
-        {
-            executionOptions = new
-            {
-                type = "AA",
-                signerAddress = "<your-signer-address>",
-                chainId = "84532"
-            },
-            @params = new[]
-            {
-                new
-                {
-                    contractAddress = "0x...",
-                    method = "function mintTo(address to, uint256 amount)",
-                    @params = new[] { "0x...", "100" }
-                }
-            }
-        };
-        
-        var json = JsonSerializer.Serialize(requestData);
-        var content = new StringContent(json, Encoding.UTF8, "application/json");
-        
-        using var httpClient = new HttpClient();
-        httpClient.DefaultRequestHeaders.Add("x-secret-key", "<your-project-secret-key>");
-        httpClient.DefaultRequestHeaders.Add("x-vault-access-token", "<your-vault-access-token>");
-        
-        var response = await httpClient.PostAsync(url, content);
-        var responseContent = await response.Content.ReadAsStringAsync();
-        
-        Console.WriteLine(responseContent);
-    }
-}`;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/rotate-admin-key.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/rotate-admin-key.client.tsx
deleted file mode 100644
index a7f1cbfecd4..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/vault/components/rotate-admin-key.client.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-"use client";
-
-import type { Project } from "@/api/projects";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { cn } from "@/lib/utils";
-import { useMutation } from "@tanstack/react-query";
-import { rotateServiceAccount } from "@thirdweb-dev/vault-sdk";
-import {
-  CheckIcon,
-  CircleAlertIcon,
-  DownloadIcon,
-  Loader2,
-  RefreshCcwIcon,
-} from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import {
-  createManagementAccessToken,
-  createWalletAccessToken,
-  initVaultClient,
-  maskSecret,
-} from "../../(overview)/lib/vault.client";
-
-export default function RotateAdminKeyButton(props: { project: Project }) {
-  const [modalOpen, setModalOpen] = useState(false);
-  const [keysConfirmed, setKeysConfirmed] = useState(false);
-  const [keysDownloaded, setKeysDownloaded] = useState(false);
-  const router = useDashboardRouter();
-
-  const rotateAdminKeyMutation = useMutation({
-    mutationFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
-      const vaultClient = await initVaultClient();
-      const rotationCode = props.project.services.find(
-        (service) => service.name === "engineCloud",
-      )?.rotationCode;
-
-      if (!rotationCode) {
-        throw new Error("Rotation code not found");
-      }
-
-      const rotateServiceAccountRes = await rotateServiceAccount({
-        client: vaultClient,
-        request: {
-          auth: {
-            rotationCode,
-          },
-        },
-      });
-
-      if (rotateServiceAccountRes.error) {
-        throw new Error(rotateServiceAccountRes.error.message);
-      }
-
-      // need to recreate the management access token with the new admin key
-      const managementAccessTokenPromise = createManagementAccessToken({
-        project: props.project,
-        adminKey: rotateServiceAccountRes.data.newAdminKey,
-        rotationCode: rotateServiceAccountRes.data.newRotationCode,
-        vaultClient,
-      });
-
-      const userAccesTokenPromise = createWalletAccessToken({
-        project: props.project,
-        adminKey: rotateServiceAccountRes.data.newAdminKey,
-        vaultClient,
-      });
-
-      const [userAccessTokenRes, managementAccessTokenRes] = await Promise.all([
-        userAccesTokenPromise,
-        managementAccessTokenPromise,
-      ]);
-
-      if (!managementAccessTokenRes.success || !userAccessTokenRes.success) {
-        throw new Error("Failed to create access token");
-      }
-
-      return {
-        success: true,
-        adminKey: rotateServiceAccountRes.data.newAdminKey,
-        userAccessToken: userAccessTokenRes.data,
-      };
-    },
-    onError: (error) => {
-      toast.error(error.message);
-    },
-  });
-
-  const handleDownloadKeys = () => {
-    if (!rotateAdminKeyMutation.data) {
-      return;
-    }
-
-    const fileContent = `Project:\n${props.project.name} (${props.project.publishableKey})\n\nVault Admin Key:\n${rotateAdminKeyMutation.data.adminKey}\n\nVault Access Token:\n${rotateAdminKeyMutation.data.userAccessToken.accessToken}\n`;
-    const blob = new Blob([fileContent], { type: "text/plain;charset=utf-8" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    const filename = `${props.project.name}-vault-keys-rotated.txt`;
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link); // Required for Firefox
-    link.click();
-
-    // Clean up
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-
-    toast.success(`Keys downloaded as ${filename}`);
-    setKeysDownloaded(true);
-  };
-
-  const handleCloseModal = () => {
-    if (!keysConfirmed) {
-      return;
-    }
-
-    setModalOpen(false);
-    setKeysConfirmed(false);
-    setKeysDownloaded(false);
-    // invalidate the page to force a reload
-    rotateAdminKeyMutation.reset();
-    router.refresh();
-  };
-
-  const isLoading = rotateAdminKeyMutation.isPending;
-
-  return (
-    <>
-      <Button
-        variant="outline"
-        onClick={() => setModalOpen(true)}
-        disabled={isLoading}
-        className="h-auto gap-2 rounded-lg bg-background px-4 py-3"
-      >
-        {isLoading && <Loader2 className="animate-spin" />}
-        {!isLoading && <RefreshCcwIcon className="size-4" />}
-        Rotate Admin Key
-      </Button>
-
-      <Dialog open={modalOpen} onOpenChange={handleCloseModal} modal={true}>
-        <DialogContent
-          className="overflow-hidden p-0"
-          dialogCloseClassName={cn(!keysConfirmed && "hidden")}
-        >
-          {rotateAdminKeyMutation.isPending ? (
-            <>
-              <DialogHeader className="p-6">
-                <DialogTitle>Generating new keys...</DialogTitle>
-              </DialogHeader>
-              <div className="flex flex-col items-center justify-center gap-4 p-10">
-                <Spinner className="size-8" />
-                <p className="text-muted-foreground text-xs">
-                  This may take a few seconds.
-                </p>
-              </div>
-            </>
-          ) : rotateAdminKeyMutation.data ? (
-            <div>
-              <DialogHeader className="p-6">
-                <DialogTitle>New Vault Keys</DialogTitle>
-              </DialogHeader>
-
-              <div className="space-y-6 p-6 pt-0">
-                <div className="space-y-4">
-                  <div>
-                    <h3 className="mb-2 font-medium text-sm">
-                      New Vault Admin Key
-                    </h3>
-                    <div className="flex flex-col gap-2">
-                      <CopyTextButton
-                        textToCopy={rotateAdminKeyMutation.data.adminKey}
-                        className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
-                        textToShow={maskSecret(
-                          rotateAdminKeyMutation.data.adminKey,
-                        )}
-                        copyIconPosition="right"
-                        tooltip="Copy Admin Key"
-                      />
-                      <p className="text-muted-foreground text-xs">
-                        This key is used to create or revoke your access tokens.
-                      </p>
-                    </div>
-                  </div>
-
-                  <div>
-                    <h3 className="mb-2 font-medium text-sm">
-                      New Vault Access Token
-                    </h3>
-                    <div className="flex flex-col gap-2 ">
-                      <CopyTextButton
-                        textToCopy={
-                          rotateAdminKeyMutation.data.userAccessToken
-                            .accessToken
-                        }
-                        className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
-                        textToShow={maskSecret(
-                          rotateAdminKeyMutation.data.userAccessToken
-                            .accessToken,
-                        )}
-                        copyIconPosition="right"
-                        tooltip="Copy Vault Access Token"
-                      />
-                      <p className="text-muted-foreground text-xs">
-                        This access token is used to sign transactions and
-                        messages from your backend. Can be revoked and recreated
-                        with your admin key.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <Alert variant="destructive">
-                  <AlertTitle>Secure your keys</AlertTitle>
-                  <AlertDescription>
-                    These keys will not be displayed again. Store them securely
-                    as they provide access to your server wallets.
-                  </AlertDescription>
-                  <div className="h-4" />
-                  <div className="flex items-center gap-2">
-                    <Button
-                      variant="link"
-                      onClick={handleDownloadKeys}
-                      className="flex h-auto items-center gap-2 p-0 text-sm text-success-text"
-                    >
-                      <DownloadIcon className="size-4" />
-                      {keysDownloaded ? "Keys Downloaded" : "Download Keys"}
-                    </Button>
-                    {keysDownloaded && (
-                      <span className="text-success-text text-xs">
-                        <CheckIcon className="size-4" />
-                      </span>
-                    )}
-                  </div>
-                  <div className="h-4" />
-                  <CheckboxWithLabel className="text-foreground">
-                    <Checkbox
-                      checked={keysConfirmed}
-                      onCheckedChange={(v) => setKeysConfirmed(!!v)}
-                    />
-                    I confirm that I've securely stored these keys
-                  </CheckboxWithLabel>
-                </Alert>
-              </div>
-
-              <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
-                <Button
-                  onClick={handleCloseModal}
-                  disabled={!keysConfirmed}
-                  variant="primary"
-                >
-                  Close
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <>
-              <DialogHeader className="px-6 pt-6">
-                <DialogTitle>Rotate your Vault admin key</DialogTitle>
-                <DialogDescription>
-                  This action will generate a new Vault admin key and rotation
-                  code.{" "}
-                </DialogDescription>
-              </DialogHeader>
-              <div className="flex flex-col gap-4">
-                <div className="flex flex-col gap-4 px-6">
-                  <p className="text-md text-primary-foreground">
-                    Revoke your current keys and generates new ones.
-                  </p>
-                  <Alert variant="destructive">
-                    <CircleAlertIcon className="size-5" />
-                    <AlertTitle>Important</AlertTitle>
-                    <AlertDescription>
-                      This action will invalidate your current admin key and all
-                      existing access tokens. You will need to update your
-                      backend to use these new access tokens.
-                    </AlertDescription>
-                  </Alert>
-                </div>
-                <div className="flex justify-end gap-3 border-t bg-card px-6 py-4">
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    onClick={() => rotateAdminKeyMutation.mutate()}
-                    disabled={rotateAdminKeyMutation.isPending}
-                  >
-                    {rotateAdminKeyMutation.isPending ? (
-                      <>
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        Rotating...
-                      </>
-                    ) : (
-                      "Rotate Admin Key"
-                    )}
-                  </Button>
-                </div>
-              </div>
-            </>
-          )}
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}

From fa6b1fec130b4a855566c2f21ff9311e089d76d2 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Wed, 30 Apr 2025 23:48:40 +1200
Subject: [PATCH 3/4] fix all links

---
 .../src/@3rdweb-sdk/react/hooks/useEngine.ts  |   12 +-
 .../(app)/team/[team_slug]/(team)/layout.tsx  |   10 -
 .../(general)/EngineFooterCard.stories.tsx    |   44 -
 .../(team)/~/engine/(general)/_components.tsx |  167 --
 .../import/EngineImportPage.stories.tsx       |   37 -
 .../(general)/import/EngineImportPage.tsx     |  193 --
 .../(team)/~/engine/(general)/import/page.tsx |   27 -
 .../(team)/~/engine/(general)/layout.tsx      |  101 -
 .../engine-instances-table.stories.tsx        |  166 --
 .../overview/engine-instances-table.tsx       |  934 ---------
 .../engine/(general)/overview/engine-list.tsx |   26 -
 .../(team)/~/engine/(general)/page.tsx        |   52 -
 .../_components/EngineErrorPage.tsx           |   28 -
 .../_components/EnginePageLayout.tsx          |   72 -
 .../_components/EnsureEnginePermission.tsx    |   87 -
 .../[engineId]/_components/version.tsx        |  289 ---
 .../components/access-tokens-table.tsx        |  312 ---
 .../components/add-access-token-button.tsx    |  123 --
 .../components/add-keypair-button.tsx         |  233 ---
 .../components/engine-access-tokens.tsx       |  205 --
 .../components/keypairs-table.tsx             |  218 --
 .../[engineId]/access-tokens/page.tsx         |   15 -
 .../admins/components/add-admin-button.tsx    |  131 --
 .../admins/components/admins-table.tsx        |  300 ---
 .../admins/components/engine-admins.tsx       |   48 -
 .../(instance)/[engineId]/admins/page.tsx     |   13 -
 .../components/EngineAlertDialogForm.tsx      |  231 ---
 .../alerts/components/EngineAlertsPage.tsx    |   37 -
 .../components/EngineDeleteAlertModal.tsx     |   52 -
 .../components/ManageEngineAlerts.stories.tsx |  122 --
 .../alerts/components/ManageEngineAlerts.tsx  |  387 ----
 .../components/RecentEngineAlerts.stories.tsx |   65 -
 .../alerts/components/RecentEngineAlerts.tsx  |  144 --
 .../(instance)/[engineId]/alerts/page.tsx     |   15 -
 .../components/circle-config.tsx              |  129 --
 .../configuration/components/cors.tsx         |  105 -
 .../components/engine-configuration.tsx       |   35 -
 .../components/engine-wallet-config.tsx       |  117 --
 .../configuration/components/ip-allowlist.tsx |  112 --
 .../components/kms-aws-config.tsx             |  185 --
 .../components/kms-gcp-config.tsx             |  232 ---
 .../configuration/components/local-config.tsx |   10 -
 .../configuration/components/system.tsx       |   33 -
 .../[engineId]/configuration/page.tsx         |   19 -
 .../add-contract-subscription-button.tsx      |  566 ------
 .../contract-subscriptions-table.tsx          |  470 -----
 .../engine-contract-subscription.tsx          |   73 -
 .../contract-subscriptions/page.tsx           |   18 -
 .../explorer/components/engine-explorer.tsx   |   38 -
 .../explorer/components/swagger-ui.css        | 1759 -----------------
 .../(instance)/[engineId]/explorer/page.tsx   |   13 -
 .../~/engine/(instance)/[engineId]/layout.tsx |  134 --
 .../components/EngineSystemMetrics.tsx        |  149 --
 .../metrics/components/ErrorRate.tsx          |  110 --
 .../metrics/components/Healthcheck.tsx        |   47 -
 .../metrics/components/StatusCodes.tsx        |  152 --
 .../(instance)/[engineId]/metrics/page.tsx    |   19 -
 .../components/backend-wallets-table.tsx      |  732 -------
 .../create-backend-wallet-button.tsx          |  333 ----
 .../overview/components/engine-overview.tsx   |  151 --
 .../import-backend-wallet-button.tsx          |  347 ----
 .../components/transaction-timeline.tsx       |  295 ---
 .../components/transactions-table.tsx         |  878 --------
 .../[engineId]/overview/components/utils.ts   |   11 -
 .../~/engine/(instance)/[engineId]/page.tsx   |   19 -
 .../components/add-relayer-button.tsx         |  239 ---
 .../relayers/components/engine-relayer.tsx    |   50 -
 .../relayers/components/relayers-table.tsx    |  449 -----
 .../(instance)/[engineId]/relayers/page.tsx   |   13 -
 .../~/engine/(instance)/[engineId]/types.ts   |    6 -
 .../create-wallet-credential-button.tsx       |   78 -
 .../components/credential-form.tsx            |  171 --
 .../credential-type-fields/circle.tsx         |   62 -
 .../edit-wallet-credential-button.tsx         |   97 -
 .../wallet-credentials/components/types.ts    |   23 -
 .../components/wallet-credentials-table.tsx   |  105 -
 .../components/wallet-credentials.tsx         |   93 -
 .../[engineId]/wallet-credentials/page.tsx    |   18 -
 .../components/add-webhook-button.tsx         |  146 --
 .../webhooks/components/engine-webhooks.tsx   |   49 -
 .../webhooks/components/webhooks-table.tsx    |  332 ----
 .../(instance)/[engineId]/webhooks/page.tsx   |   13 -
 .../_utils/getEngineAccessPermission.ts       |   33 -
 .../~/engine/_utils/getEngineInstance.ts      |   46 -
 .../_utils/getEngineInstancePageMeta.ts       |   35 -
 .../~/engine/_utils/getEngineInstances.ts     |   33 -
 .../components/ProjectSidebarLayout.tsx       |    7 +-
 .../[project_slug]/engine/cloud/layout.tsx    |   29 +-
 .../[project_slug]/engine/cloud/page.tsx      |   23 +-
 .../engine/cloud/tx/[id]/layout.tsx           |    2 +-
 .../(general)/EngineFooterCard.stories.tsx    |    1 +
 .../dedicated/(general)/_components.tsx       |   10 +-
 .../(general)/import/EngineImportPage.tsx     |    5 +-
 .../dedicated/(general)/import/page.tsx       |    3 +-
 .../engine/dedicated/(general)/layout.tsx     |    4 +-
 .../overview/engine-instances-table.tsx       |   14 +-
 .../(general)/overview/engine-list.tsx        |   10 +-
 .../engine/dedicated/(general)/page.tsx       |    1 +
 .../_components/EnginePageLayout.tsx          |    3 +-
 .../_components/EnsureEnginePermission.tsx    |    5 +-
 .../components/engine-configuration.tsx       |    9 +-
 .../components/engine-wallet-config.tsx       |    4 +-
 .../configuration/components/system.tsx       |    8 +-
 .../(instance)/[engineId]/layout.tsx          |   10 +-
 .../components/EngineSystemMetrics.tsx        |   10 +-
 .../create-backend-wallet-button.tsx          |    7 +-
 .../overview/components/engine-overview.tsx   |   10 +-
 .../import-backend-wallet-button.tsx          |    5 +-
 .../dedicated/(instance)/[engineId]/page.tsx  |    2 +
 .../dedicated/(instance)/[engineId]/types.ts  |    1 +
 .../_utils/getEngineInstancePageMeta.ts       |    3 +-
 .../[project_slug]/engine/page.tsx            |   18 +-
 112 files changed, 117 insertions(+), 14365 deletions(-)
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/EngineFooterCard.stories.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/_components.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.stories.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/layout.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.stories.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-list.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EngineErrorPage.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EnginePageLayout.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/version.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/add-admin-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/admins-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/engine-admins.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/circle-config.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/cors.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-configuration.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/local-config.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/system.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/components/engine-explorer.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/components/swagger-ui.css
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/layout.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/ErrorRate.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/Healthcheck.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transaction-timeline.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/utils.ts
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/engine-relayer.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/types.ts
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/types.ts
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/page.tsx
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineAccessPermission.ts
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstance.ts
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstancePageMeta.ts
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstances.ts

diff --git a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts
index 26e4986bb27..ee8a12678d6 100644
--- a/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts
+++ b/apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts
@@ -7,12 +7,12 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query";
-import type { ResultItem } from "app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes";
 import type { EngineBackendWalletType } from "lib/engine";
 import { useState } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import type { EngineStatus } from "../../../app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table";
+import type { ResultItem } from "../../../app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/StatusCodes";
+import type { EngineStatus } from "../../../app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/transactions-table";
 import { engineKeys } from "../cache-keys";
 
 // Engine instances
@@ -1641,7 +1641,11 @@ interface EngineResourceMetrics {
   };
 }
 
-export function useEngineSystemMetrics(engineId: string, teamIdOrSlug: string) {
+export function useEngineSystemMetrics(
+  engineId: string,
+  teamIdOrSlug: string,
+  projectSlug: string,
+) {
   const [enabled, setEnabled] = useState(true);
 
   return useQuery({
@@ -1649,7 +1653,7 @@ export function useEngineSystemMetrics(engineId: string, teamIdOrSlug: string) {
     queryFn: async () => {
       const res = await apiServerProxy({
         method: "GET",
-        pathname: `/v1/teams/${teamIdOrSlug}/engine/${engineId}/metrics`,
+        pathname: `/v1/teams/${teamIdOrSlug}/${projectSlug}/engine/dedicated/${engineId}/metrics`,
       });
 
       if (!res.ok) {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx
index 1c987ac047e..7487db6348e 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx
@@ -5,7 +5,6 @@ import { TabPathLinks } from "@/components/ui/tabs";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { AnnouncementBanner } from "components/notices/AnnouncementBanner";
 import { redirect } from "next/navigation";
-import { Badge } from "../../../../../@/components/ui/badge";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import {
   getAuthToken,
@@ -75,15 +74,6 @@ export default async function TeamLayout(props: {
               path: `/team/${params.team_slug}/~/analytics`,
               name: "Analytics",
             },
-            {
-              path: `/team/${params.team_slug}/~/engine`,
-              name: (
-                <span className="flex items-center gap-2">
-                  Engines
-                  <Badge variant="warning">Legacy</Badge>
-                </span>
-              ),
-            },
             {
               path: `/team/${params.team_slug}/~/ecosystem`,
               name: "Ecosystems",
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/EngineFooterCard.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/EngineFooterCard.stories.tsx
deleted file mode 100644
index 22a678e32f1..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/EngineFooterCard.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { EngineFooterCard } from "./_components";
-
-const meta = {
-  title: "Engine/EngineFooterCard",
-  component: EngineFooterCard,
-  args: {
-    team_slug: "demo-team",
-  },
-  decorators: [
-    (Story) => (
-      <div className="container max-w-6xl py-10">
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof EngineFooterCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Growth: Story = {
-  args: {
-    teamPlan: "growth",
-  },
-};
-
-export const Accelerate: Story = {
-  args: {
-    teamPlan: "accelerate",
-  },
-};
-
-export const Scale: Story = {
-  args: {
-    teamPlan: "scale",
-  },
-};
-
-export const Pro: Story = {
-  args: {
-    teamPlan: "pro",
-  },
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/_components.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/_components.tsx
deleted file mode 100644
index 8c6680521a8..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/_components.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import type { Team } from "@/api/team";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { PRO_CONTACT_US_URL } from "constants/pro";
-import { ArrowRightIcon, DownloadIcon, ExternalLinkIcon } from "lucide-react";
-import Link from "next/link";
-
-export function ImportEngineLink(props: {
-  label: string;
-  engineLinkPrefix: string;
-}) {
-  return (
-    <Button asChild variant="outline" size="sm" className="gap-2 bg-card">
-      <TrackedLinkTW
-        href={`${props.engineLinkPrefix}/import`}
-        category="engine"
-        trackingProps={{
-          action: "import",
-        }}
-      >
-        <DownloadIcon className="size-3" />
-        {props.label}
-      </TrackedLinkTW>
-    </Button>
-  );
-}
-
-function EngineInfoSection(props: { team_slug: string }) {
-  const engineLinkPrefix = `/team/${props.team_slug}/~/engine`;
-
-  return (
-    <div className="">
-      <h3 className="mb-1 font-semibold text-lg tracking-tight">
-        What is Engine?
-      </h3>
-
-      <ul className="list-disc space-y-2 pl-3 text-muted-foreground text-sm">
-        <li>Read, write, and deploy contracts at production scale</li>
-        <li>
-          Reliably parallelize and retry transactions with gas & nonce
-          management
-        </li>
-        <li>Securely manage backend wallets</li>
-        <li>Built-in support for account abstraction, relayers, and more</li>
-      </ul>
-
-      <div className="mt-4 flex justify-start gap-3">
-        <Button asChild variant="outline" size="sm">
-          <Link
-            href="https://portal.thirdweb.com/engine"
-            className="gap-2"
-            target="_blank"
-          >
-            Learn More
-            <ExternalLinkIcon className="size-3 text-muted-foreground" />
-          </Link>
-        </Button>
-
-        <Button size="sm" asChild variant="outline">
-          <TrackedLinkTW
-            href={`${engineLinkPrefix}/sandbox`}
-            className="gap-2"
-            category="engine"
-            label="click-try-demo"
-            trackingProps={{
-              action: "try-demo",
-            }}
-          >
-            Try Demo Engine
-            <ArrowRightIcon className="size-3 text-muted-foreground" />
-          </TrackedLinkTW>
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function CloudHostedEngineSection(props: {
-  teamPlan: Exclude<Team["billingPlan"], "accelerate" | "scale">;
-  teamSlug: string;
-}) {
-  return (
-    <div className="flex flex-col">
-      <h3 className="mb-0.5 font-semibold text-lg tracking-tight">
-        Get Managed Engine
-      </h3>
-
-      {props.teamPlan !== "pro" ? (
-        <div>
-          <p className="text-muted-foreground text-sm">
-            Upgrade your plan to{" "}
-            <UnderlineLink href="/pricing" target="_blank">
-              Accelerate
-            </UnderlineLink>{" "}
-            or{" "}
-            <UnderlineLink href="/pricing" target="_blank">
-              Scale
-            </UnderlineLink>{" "}
-            to get a managed Engine instance
-          </p>
-
-          <div className="h-5" />
-          <div className="flex justify-start gap-3">
-            <Button
-              variant="outline"
-              size="sm"
-              asChild
-              className="gap-2 bg-card"
-            >
-              <Link href={`/team/${props.teamSlug}/~/settings/billing`}>
-                Upgrade Plan
-                <ArrowRightIcon className="size-3 text-muted-foreground" />
-              </Link>
-            </Button>
-
-            <Button
-              variant="outline"
-              size="sm"
-              asChild
-              className="gap-2 bg-card"
-            >
-              <Link href="/pricing" target="_blank">
-                View Pricing
-                <ExternalLinkIcon className="size-3 text-muted-foreground" />
-              </Link>
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <div>
-          <p className="mb-4 text-muted-foreground text-sm">
-            Contact us to get a managed engine for your team
-          </p>
-          <Button variant="outline" size="sm" asChild className="gap-2">
-            <Link href={PRO_CONTACT_US_URL} target="_blank">
-              Contact Us
-              <ExternalLinkIcon className="size-3 text-muted-foreground" />
-            </Link>
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function EngineFooterCard(props: {
-  teamPlan: Team["billingPlan"];
-  team_slug: string;
-}) {
-  return (
-    <div className="relative rounded-lg border p-6">
-      {props.teamPlan === "accelerate" || props.teamPlan === "scale" ? null : (
-        <>
-          <CloudHostedEngineSection
-            teamPlan={props.teamPlan}
-            teamSlug={props.team_slug}
-          />
-          <Separator className="my-5" />
-        </>
-      )}
-
-      <EngineInfoSection team_slug={props.team_slug} />
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.stories.tsx
deleted file mode 100644
index 4e3307be5c4..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.stories.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { EngineImportCardUI } from "./EngineImportPage";
-
-const meta: Meta<typeof EngineImportCardUI> = {
-  title: "Engine/general/import",
-  component: EngineImportCardUI,
-  decorators: [
-    (Story) => (
-      <div className="py-10">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof EngineImportCardUI>;
-
-export const Default: Story = {
-  args: {
-    prefillImportUrl: undefined,
-    importEngine: async (params) => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      console.log("importEngine", params);
-    },
-  },
-};
-
-export const WithPrefillUrl: Story = {
-  args: {
-    prefillImportUrl: "https://engine.example.com",
-    importEngine: async (params) => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      console.log("importEngine", params);
-    },
-  },
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.tsx
deleted file mode 100644
index ea9f330bc2b..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/EngineImportPage.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-"use client";
-
-import { apiServerProxy } from "@/actions/proxies";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { FormControl } from "@chakra-ui/react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { CircleAlertIcon, DownloadIcon, ExternalLinkIcon } from "lucide-react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-const formSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  url: z.string().url("Please enter a valid URL").min(1, "URL is required"),
-});
-
-type ImportEngineParams = z.infer<typeof formSchema>;
-
-async function importEngine({
-  teamIdOrSlug,
-  ...data
-}: ImportEngineParams & { teamIdOrSlug: string }) {
-  // Instance URLs should end with a /.
-  const url = data.url.endsWith("/") ? data.url : `${data.url}/`;
-
-  const res = await apiServerProxy({
-    pathname: `/v1/teams/${teamIdOrSlug}/engine`,
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      name: data.name,
-      url,
-    }),
-  });
-
-  if (!res.ok) {
-    throw new Error(res.error);
-  }
-}
-
-export function EngineImportCard(props: {
-  prefillImportUrl: string | undefined;
-  teamSlug: string;
-}) {
-  const router = useDashboardRouter();
-
-  return (
-    <EngineImportCardUI
-      prefillImportUrl={props.prefillImportUrl}
-      importEngine={async (params) => {
-        await importEngine({ ...params, teamIdOrSlug: props.teamSlug });
-        router.push(`/team/${props.teamSlug}/~/engine`);
-      }}
-    />
-  );
-}
-
-export function EngineImportCardUI(props: {
-  prefillImportUrl: string | undefined;
-  importEngine: (params: ImportEngineParams) => Promise<void>;
-}) {
-  const form = useForm<ImportEngineParams>({
-    resolver: zodResolver(formSchema),
-    values: {
-      name: "",
-      url: props.prefillImportUrl || "",
-    },
-  });
-
-  const importMutation = useMutation({
-    mutationFn: props.importEngine,
-  });
-
-  const onSubmit = async (data: ImportEngineParams) => {
-    try {
-      await importMutation.mutateAsync(data);
-      toast.success("Engine imported successfully");
-    } catch (e) {
-      const message = e instanceof Error ? e.message : undefined;
-      toast.error(
-        "Error importing Engine. Please check if the details are correct.",
-        {
-          description: message,
-        },
-      );
-    }
-  };
-
-  return (
-    <div className="mx-auto w-full max-w-lg rounded-lg border border-border bg-card">
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          {/* Card */}
-          <div className="p-6">
-            <div>
-              <h1 className="mb-1 font-semibold text-xl tracking-tight">
-                Import Engine Instance
-              </h1>
-
-              <p className="text-muted-foreground text-sm">
-                Import an Engine instance hosted on your infrastructure
-              </p>
-
-              <div className="h-4" />
-
-              <TrackedLinkTW
-                className="flex items-center justify-between gap-2 rounded-lg border border-border bg-card p-3 text-sm hover:bg-accent"
-                href="https://portal.thirdweb.com/infrastructure/engine/get-started"
-                target="_blank"
-                category="engine"
-                label="clicked-self-host-instructions"
-              >
-                Get help setting up Engine for free
-                <ExternalLinkIcon className="size-4 text-muted-foreground" />
-              </TrackedLinkTW>
-            </div>
-
-            <div className="mt-6 flex flex-col gap-4">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="Enter a descriptive label"
-                        autoFocus
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="url"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>URL</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="url"
-                        placeholder="Enter your Engine URL"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                    <div className="mt-3 flex items-center gap-2">
-                      <CircleAlertIcon className="size-3 shrink-0 text-muted-foreground" />
-                      <p className="text-muted-foreground text-sm">
-                        Do not import a URL you do not recognize.
-                      </p>
-                    </div>
-                  </FormItem>
-                )}
-              />
-            </div>
-          </div>
-
-          <div className="h-8" />
-
-          <div className="flex justify-end border-border border-t p-6">
-            <Button type="submit" className="min-w-28 gap-2">
-              {importMutation.isPending ? (
-                <Spinner className="size-4" />
-              ) : (
-                <DownloadIcon className="size-4" />
-              )}
-              Import
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/page.tsx
deleted file mode 100644
index 89d16708101..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/import/page.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { EngineImportCard } from "./EngineImportPage";
-
-export default async function Page(props: {
-  params: Promise<{ team_slug: string }>;
-  searchParams: Promise<{
-    importUrl?: string | string[];
-  }>;
-}) {
-  const [params, searchParams] = await Promise.all([
-    props.params,
-    props.searchParams,
-  ]);
-
-  const importUrl =
-    typeof searchParams.importUrl === "string"
-      ? searchParams.importUrl
-      : undefined;
-
-  return (
-    <div className="flex grow flex-col justify-center pt-8 pb-20">
-      <EngineImportCard
-        prefillImportUrl={importUrl ? decodeURIComponent(importUrl) : undefined}
-        teamSlug={params.team_slug}
-      />
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/layout.tsx
deleted file mode 100644
index 18f0eebd25e..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/layout.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { SidebarLink } from "@/components/blocks/Sidebar";
-import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { CloudIcon } from "lucide-react";
-import Link from "next/link";
-import { ImportEngineLink } from "./_components";
-
-export default async function Layout(props: {
-  params: Promise<{
-    team_slug: string;
-  }>;
-  children: React.ReactNode;
-}) {
-  const params = await props.params;
-  const linkPrefix = `/team/${params.team_slug}/~/engine`;
-  const sidebarLinks: SidebarLink[] = [
-    {
-      label: "Engine Instances",
-      href: `${linkPrefix}`,
-      exactMatch: true,
-    },
-    {
-      label: "Import Engine",
-      href: `${linkPrefix}/import`,
-    },
-  ];
-
-  return (
-    <div className="flex grow flex-col">
-      {/* header */}
-      <header className="border-border border-b py-10">
-        <div className="container flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
-          <div className="flex flex-col gap-2">
-            <h1 className="flex items-center gap-2 font-semibold text-3xl tracking-tight">
-              Engines <Badge variant="warning">Legacy</Badge>
-            </h1>
-            <p className="flex flex-col text-muted-foreground text-sm">
-              {/* TODO (cloud): add link to Engine Cloud blog post */}
-              The latest version of Engine has moved inside projects. Your
-              legacy engines will remain available here.
-            </p>
-          </div>
-          <div className="flex items-center gap-3">
-            <ImportEngineLink
-              label="Import Engine"
-              engineLinkPrefix={linkPrefix}
-            />
-          </div>
-        </div>
-        <div className="h-6" />
-        <div className="container">
-          <EngineLegacyBannerUI teamSlug={params.team_slug} />
-        </div>
-      </header>
-
-      {/* sidebar layout */}
-      <SidebarLayout sidebarLinks={sidebarLinks}>
-        {props.children}
-      </SidebarLayout>
-    </div>
-  );
-}
-
-function EngineLegacyBannerUI(props: {
-  teamSlug: string;
-}) {
-  return (
-    <Alert variant="info">
-      <CloudIcon className="size-5" />
-      <AlertTitle>Engine Cloud (Beta)</AlertTitle>
-      <AlertDescription>
-        <div className="h-2" />
-        <p className="text-primary-foreground text-sm">
-          Try Engine Cloud (Beta) - now included for free in every thirdweb
-          project.
-        </p>
-        <div className="h-2" />
-        <ul className="list-disc pl-4 text-muted-foreground text-sm">
-          <li>No recurring monthly cost, pay-per-request model</li>
-          <li>Powered by Vault: our new TEE based key management system</li>
-          <li>Improved performance and simplified transaction API</li>
-        </ul>
-        <div className="h-4" />
-        <div className="flex justify-end gap-2">
-          {/* TODO (cloud): add link to Engine Cloud blog post */}
-          <Link
-            href={"https://portal.thirdweb.com/engine/cloud"}
-            target="_blank"
-          >
-            <Button variant="outline">Learn More</Button>
-          </Link>
-          <Link href={`/team/${props.teamSlug}`}>
-            <Button variant={"primary"}>Create a Project</Button>
-          </Link>
-        </div>
-      </AlertDescription>
-    </Alert>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.stories.tsx
deleted file mode 100644
index b5f703bcfa5..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.stories.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
-import type { Meta, StoryObj } from "@storybook/react";
-import { EngineInstancesTableUI } from "./engine-instances-table";
-
-const meta: Meta<typeof Story> = {
-  title: "Engine/general/instances",
-  component: Story,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-  decorators: [
-    (StoryInstance) => (
-      <div className="container max-w-[1154px] py-10">
-        <StoryInstance />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof Story>;
-
-function createEngineInstanceStub(
-  name: string,
-  status: EngineInstance["status"],
-  isCloudHosted: boolean,
-  isPlanEngine: boolean,
-): EngineInstance {
-  const engineId = `${name.toLowerCase().replace(/\s+/g, "-")}-engine`;
-  return {
-    id: engineId,
-    name,
-    url: `https://${engineId}.example.com`,
-    status,
-    deploymentId: status === "active" ? "dep-123" : undefined,
-    accountId: "acc-123",
-    lastAccessedAt: new Date().toISOString(),
-    isCloudHosted,
-    isPlanEngine,
-  };
-}
-
-const cloudHostedEngineInstance = createEngineInstanceStub(
-  "Cloud Hosted Engine",
-  "active",
-  true,
-  false,
-);
-
-const cloudHostedPlanActiveEngineInstance = createEngineInstanceStub(
-  "Cloud Hosted Plan Engine",
-  "active",
-  true,
-  true,
-);
-const selfHostedActiveEngineInstance = createEngineInstanceStub(
-  "Self Hosted Engine",
-  "active",
-  false,
-  false,
-);
-const pendingEngineInstance = createEngineInstanceStub(
-  "Pending Engine",
-  "requested",
-  false,
-  false,
-);
-const deployingEngineInstance = createEngineInstanceStub(
-  "Deploying Engine",
-  "deploying",
-  false,
-  false,
-);
-
-const paymentFailedEngineInstance = createEngineInstanceStub(
-  "Payment Failed Engine",
-  "paymentFailed",
-  false,
-  false,
-);
-
-const deploymentFailedEngineInstance = createEngineInstanceStub(
-  "Deployment Failed Engine",
-  "deploymentFailed",
-  false,
-  false,
-);
-
-export const MultipleInstances: Story = {
-  args: {
-    instances: [
-      // active
-      cloudHostedEngineInstance,
-      cloudHostedPlanActiveEngineInstance,
-      selfHostedActiveEngineInstance,
-      // others
-      pendingEngineInstance,
-      deployingEngineInstance,
-      paymentFailedEngineInstance,
-      deploymentFailedEngineInstance,
-    ],
-    engineLinkPrefix: "/team/test/engine",
-  },
-};
-
-export const NoInstancesProPlan: Story = {
-  args: {
-    instances: [],
-    engineLinkPrefix: "/team/test/engine",
-    teamPlan: "pro",
-  },
-};
-
-export const NoInstancesGrowthPlan: Story = {
-  args: {
-    instances: [],
-    engineLinkPrefix: "/team/test/engine",
-    teamPlan: "growth",
-  },
-};
-
-// this one can't technically happen because Accelerate plan always has one cloud hosted engine by default - but testing it anyway
-// the section that prompts user to either choose a cloud-hosted engine or import an engine is hidden in this case
-export const NoInstancesAcceleratePlan: Story = {
-  args: {
-    instances: [],
-    engineLinkPrefix: "/team/test/engine",
-    teamPlan: "accelerate",
-  },
-};
-
-export const OneInstance: Story = {
-  args: {
-    instances: [cloudHostedEngineInstance],
-    engineLinkPrefix: "/team/test/engine",
-  },
-};
-
-function Story(
-  props: Omit<
-    React.ComponentProps<typeof EngineInstancesTableUI>,
-    | "deleteCloudHostedEngine"
-    | "editEngineInstance"
-    | "removeEngineFromDashboard"
-  >,
-) {
-  return (
-    <EngineInstancesTableUI
-      deleteCloudHostedEngine={async (params) => {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        console.log("deleteCloudHostedEngine", params);
-      }}
-      editEngineInstance={async (params) => {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        console.log("editEngineInstance", params);
-      }}
-      removeEngineFromDashboard={async (params) => {
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-        console.log("removeEngineFromDashboard", params);
-      }}
-      {...props}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx
deleted file mode 100644
index 71da032abfa..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-instances-table.tsx
+++ /dev/null
@@ -1,934 +0,0 @@
-"use client";
-
-import type { Team } from "@/api/team";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge, type BadgeProps } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Textarea } from "@/components/ui/textarea";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { cn } from "@/lib/utils";
-import {
-  type DeleteCloudHostedEngineParams,
-  type EditEngineInstanceParams,
-  type EngineInstance,
-  type RemoveEngineFromDashboardIParams,
-  deleteCloudHostedEngine,
-  editEngineInstance,
-  removeEngineFromDashboard,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { PRO_CONTACT_US_URL } from "constants/pro";
-import { useTrack } from "hooks/analytics/useTrack";
-import {
-  CheckIcon,
-  CircleAlertIcon,
-  InfoIcon,
-  PencilIcon,
-  Trash2Icon,
-} from "lucide-react";
-import { MoreHorizontalIcon } from "lucide-react";
-import { ArrowRight } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-import { EngineIcon } from "../../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
-
-type DeletedCloudHostedEngine = (
-  params: DeleteCloudHostedEngineParams,
-) => Promise<void>;
-
-type EditedEngineInstance = (params: EditEngineInstanceParams) => Promise<void>;
-
-type RemovedEngineFromDashboard = (
-  params: RemoveEngineFromDashboardIParams,
-) => Promise<void>;
-
-export function EngineInstancesTable(props: {
-  teamSlug: string;
-  instances: EngineInstance[];
-  engineLinkPrefix: string;
-  teamPlan: Team["billingPlan"];
-}) {
-  const router = useDashboardRouter();
-
-  return (
-    <EngineInstancesTableUI
-      teamPlan={props.teamPlan}
-      instances={props.instances}
-      engineLinkPrefix={props.engineLinkPrefix}
-      teamSlug={props.teamSlug}
-      deleteCloudHostedEngine={async (params) => {
-        await deleteCloudHostedEngine(params);
-        router.refresh();
-      }}
-      editEngineInstance={async (params) => {
-        await editEngineInstance(params);
-        router.refresh();
-      }}
-      removeEngineFromDashboard={async (params) => {
-        await removeEngineFromDashboard(params);
-        router.refresh();
-      }}
-    />
-  );
-}
-
-export function EngineInstancesTableUI(props: {
-  instances: EngineInstance[];
-  engineLinkPrefix: string;
-  deleteCloudHostedEngine: DeletedCloudHostedEngine;
-  editEngineInstance: EditedEngineInstance;
-  removeEngineFromDashboard: RemovedEngineFromDashboard;
-  teamPlan: Team["billingPlan"];
-  teamSlug: string;
-}) {
-  return (
-    <div className="flex grow flex-col">
-      <h2 className="mb-4 font-semibold text-2xl tracking-tight">
-        Engine Instances
-      </h2>
-
-      {props.instances.length === 0 ? (
-        <EmptyEngineState teamPlan={props.teamPlan} teamSlug={props.teamSlug} />
-      ) : (
-        <TableContainer>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Engine Instance</TableHead>
-                <TableHead>Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {props.instances.map((instance) => (
-                <EngineInstanceRow
-                  key={instance.id}
-                  teamIdOrSlug={props.teamSlug}
-                  instance={instance}
-                  engineLinkPrefix={props.engineLinkPrefix}
-                  deleteCloudHostedEngine={props.deleteCloudHostedEngine}
-                  editEngineInstance={props.editEngineInstance}
-                  removeEngineFromDashboard={props.removeEngineFromDashboard}
-                />
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
-    </div>
-  );
-}
-
-function EngineInstanceRow(props: {
-  teamIdOrSlug: string;
-  instance: EngineInstance;
-  engineLinkPrefix: string;
-  deleteCloudHostedEngine: DeletedCloudHostedEngine;
-  editEngineInstance: EditedEngineInstance;
-  removeEngineFromDashboard: RemovedEngineFromDashboard;
-}) {
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false);
-  const { instance, engineLinkPrefix } = props;
-
-  return (
-    <>
-      <TableRow
-        className={instance.status === "active" ? "hover:bg-accent/50" : ""}
-        linkBox
-      >
-        <TableCell>
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <InstanceNameLink
-                instance={instance}
-                engineLinkPrefix={engineLinkPrefix}
-              />
-              <EngineURL url={instance.url} />
-            </div>
-            {instance.status !== "active" && (
-              <div>
-                <EngineStatusBadge status={instance.status} />
-              </div>
-            )}
-          </div>
-        </TableCell>
-        <TableCell className="relative z-10 w-[50px]">
-          <EngineActionsDropdown
-            instance={instance}
-            onEdit={() => setIsEditModalOpen(true)}
-            onRemove={() => setIsRemoveModalOpen(true)}
-          />
-        </TableCell>
-      </TableRow>
-
-      <EditModal
-        teamIdOrSlug={props.teamIdOrSlug}
-        instance={instance}
-        open={isEditModalOpen}
-        onOpenChange={setIsEditModalOpen}
-        editEngineInstance={props.editEngineInstance}
-      />
-
-      <RemoveModal
-        teamIdOrSlug={props.teamIdOrSlug}
-        instance={instance}
-        onOpenChange={setIsRemoveModalOpen}
-        open={isRemoveModalOpen}
-        deleteCloudHostedEngine={props.deleteCloudHostedEngine}
-        removeEngineFromDashboard={props.removeEngineFromDashboard}
-      />
-    </>
-  );
-}
-
-function InstanceNameLink(props: {
-  instance: EngineInstance;
-  engineLinkPrefix: string;
-}) {
-  const name = (
-    <span className="font-medium text-base tracking-tight">
-      {props.instance.name}
-    </span>
-  );
-  return (
-    <div className="flex flex-col gap-0.5">
-      {props.instance.status === "requested" ||
-      props.instance.status === "deploying" ||
-      props.instance.status === "deploymentFailed" ||
-      props.instance.status === "paymentFailed" ? (
-        <span>{name}</span>
-      ) : (
-        <Link
-          href={`${props.engineLinkPrefix}/${props.instance.id}`}
-          className="flex items-center text-foreground before:absolute before:inset-0 before:bg-transparent"
-        >
-          {name}
-        </Link>
-      )}
-    </div>
-  );
-}
-
-function EngineURL(props: { url: string }) {
-  const cleanedURL = props.url.endsWith("/")
-    ? props.url.slice(0, -1)
-    : props.url;
-
-  return <p className="text-muted-foreground text-xs">{cleanedURL}</p>;
-}
-
-const engineStatusMeta: Record<
-  EngineInstance["status"],
-  {
-    label: string;
-    variant: BadgeProps["variant"];
-    icon: React.FC<{ className?: string }>;
-  }
-> = {
-  requested: {
-    label: "Pending",
-    variant: "outline",
-    icon: Spinner,
-  },
-  deploying: {
-    label: "Deploying",
-    variant: "default",
-    icon: Spinner,
-  },
-  active: {
-    label: "Active",
-    variant: "default",
-    icon: CheckIcon,
-  },
-  pending: {
-    label: "Pending",
-    variant: "outline",
-    icon: Spinner,
-  },
-  paymentFailed: {
-    label: "Payment Failed",
-    variant: "destructive",
-    icon: CircleAlertIcon,
-  },
-  deploymentFailed: {
-    label: "Deployment Failed",
-    variant: "destructive",
-    icon: CircleAlertIcon,
-  },
-};
-
-function EngineStatusBadge(props: {
-  status: EngineInstance["status"];
-}) {
-  const statusMeta = engineStatusMeta[props.status];
-  return (
-    <Badge variant={statusMeta.variant} className="gap-2 px-3 py-2">
-      <statusMeta.icon className="size-3" />
-      {statusMeta.label}
-    </Badge>
-  );
-}
-
-function EngineActionsDropdown(props: {
-  instance: EngineInstance;
-  onEdit: (instance: EngineInstance) => void;
-  onRemove: (instance: EngineInstance) => void;
-}) {
-  const trackEvent = useTrack();
-  const canDelete =
-    props.instance.status === "paymentFailed" ||
-    props.instance.status === "deploymentFailed" ||
-    props.instance.status === "active" ||
-    !!props.instance.deploymentId;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="size-10 p-1">
-          <MoreHorizontalIcon className="size-5" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-40">
-        <DropdownMenuItem
-          className="gap-2"
-          onClick={() => {
-            trackEvent({
-              category: "engine",
-              action: "edit",
-              label: "open-modal",
-            });
-            props.onEdit(props.instance);
-          }}
-        >
-          <PencilIcon className="size-4" />
-          Edit
-        </DropdownMenuItem>
-
-        {/* plan engine is not removable */}
-        {!props.instance.isPlanEngine && (
-          <DropdownMenuItem
-            className="gap-2 text-destructive"
-            disabled={!canDelete}
-            onClick={() => {
-              trackEvent({
-                category: "engine",
-                action: "remove",
-                label: "open-modal",
-              });
-              props.onRemove(props.instance);
-            }}
-          >
-            <Trash2Icon className="size-4" />
-            Delete
-          </DropdownMenuItem>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-function EditModal(props: {
-  open: boolean;
-  teamIdOrSlug: string;
-  onOpenChange: (open: boolean) => void;
-  instance: EngineInstance;
-  editEngineInstance: EditedEngineInstance;
-}) {
-  return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <DialogContent className="overflow-hidden p-0">
-        <EditModalContent
-          teamIdOrSlug={props.teamIdOrSlug}
-          instance={props.instance}
-          editEngineInstance={props.editEngineInstance}
-          closeModal={() => props.onOpenChange(false)}
-        />
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-const editEngineFormSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  url: z.string().url("Invalid URL"),
-});
-
-function EditModalContent(props: {
-  teamIdOrSlug: string;
-  instance: EngineInstance;
-  editEngineInstance: EditedEngineInstance;
-  closeModal: () => void;
-}) {
-  const editInstance = useMutation({
-    mutationFn: props.editEngineInstance,
-  });
-  const { instance } = props;
-
-  const form = useForm<z.infer<typeof editEngineFormSchema>>({
-    resolver: zodResolver(editEngineFormSchema),
-    values: {
-      name: instance.name,
-      url: instance.url,
-    },
-    reValidateMode: "onChange",
-  });
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit((data) =>
-          editInstance.mutate(
-            {
-              teamIdOrSlug: props.teamIdOrSlug,
-              instanceId: props.instance.id,
-              name: data.name,
-              url: data.url,
-            },
-            {
-              onSuccess: () => {
-                toast.success("Engine updated successfully");
-                props.closeModal();
-              },
-              onError: () => {
-                toast.error("Failed to update Engine");
-              },
-            },
-          ),
-        )}
-      >
-        <div className="flex flex-col gap-4 p-6">
-          <DialogHeader>
-            <DialogTitle>Edit Engine Instance</DialogTitle>
-          </DialogHeader>
-
-          <FormField
-            control={form.control}
-            name="name"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Name</FormLabel>
-                <FormControl>
-                  <Input
-                    {...field}
-                    type="text"
-                    placeholder="Enter a descriptive label"
-                    className="bg-card"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* cloud hosted engine url is not editable */}
-          {!props.instance.isCloudHosted && (
-            <FormField
-              control={form.control}
-              name="url"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>URL</FormLabel>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      type="url"
-                      placeholder="Enter your Engine URL"
-                      className="bg-card"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          )}
-        </div>
-
-        <div className="mt-4 flex justify-end gap-3 border-t bg-card p-6">
-          <Button onClick={() => props.closeModal()} variant="outline">
-            Close
-          </Button>
-          <Button
-            type="submit"
-            className="gap-2"
-            disabled={!form.formState.isDirty}
-          >
-            {editInstance.isPending && <Spinner className="size-4" />}
-            Update
-          </Button>
-        </div>
-      </form>
-    </Form>
-  );
-}
-
-function RemoveModal(props: {
-  teamIdOrSlug: string;
-  instance: EngineInstance;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  deleteCloudHostedEngine: DeletedCloudHostedEngine;
-  removeEngineFromDashboard: RemovedEngineFromDashboard;
-}) {
-  const { instance, open, onOpenChange } = props;
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="overflow-hidden p-0">
-        {instance.status === "paymentFailed" ||
-        instance.status === "deploymentFailed" ||
-        (instance.status === "active" && !instance.deploymentId) ? (
-          <RemoveEngineFromDashboardModalContent
-            instance={instance}
-            teamIdOrSlug={props.teamIdOrSlug}
-            close={() => onOpenChange(false)}
-            removeEngineFromDashboard={props.removeEngineFromDashboard}
-          />
-        ) : instance.deploymentId ? (
-          <DeleteEngineSubscriptionModalContent
-            instance={instance}
-            close={() => onOpenChange(false)}
-            deleteCloudHostedEngine={props.deleteCloudHostedEngine}
-          />
-        ) : null}
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function RemoveEngineFromDashboardModalContent(props: {
-  teamIdOrSlug: string;
-  instance: EngineInstance;
-  close: () => void;
-  removeEngineFromDashboard: RemovedEngineFromDashboard;
-}) {
-  const { instance, close } = props;
-  const removeFromDashboard = useMutation({
-    mutationFn: props.removeEngineFromDashboard,
-  });
-
-  return (
-    <div>
-      <div className="p-6">
-        <DialogHeader>
-          <DialogTitle>Remove Engine from Dashboard</DialogTitle>
-          <DialogDescription className="text-muted-foreground">
-            <span className="mb-2 block">
-              Are you sure you want to remove{" "}
-              <em className="font-semibold not-italic">{instance.name}</em> from
-              your dashboard?
-            </span>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="h-2" />
-
-        <Alert variant="info">
-          <InfoIcon className="size-5" />
-          <AlertTitle className="text-sm">
-            This action does not modify your Engine infrastructure
-          </AlertTitle>
-          <AlertDescription className="mt-0.5 text-sm">
-            You can import engine to dashboard again later
-          </AlertDescription>
-        </Alert>
-      </div>
-
-      <div className="flex justify-end gap-3 border-t bg-card p-6">
-        <Button onClick={close} variant="outline">
-          Close
-        </Button>
-        <Button
-          onClick={() => {
-            removeFromDashboard.mutate(
-              {
-                instanceId: instance.id,
-                teamIdOrSlug: props.teamIdOrSlug,
-              },
-              {
-                onSuccess: () => {
-                  toast.success(
-                    "Removed an Engine instance from your dashboard",
-                  );
-                  close();
-                },
-                onError: () => {
-                  toast.error(
-                    "Error removing an Engine instance from your dashboard",
-                  );
-                },
-              },
-            );
-          }}
-          variant="destructive"
-          className="gap-2"
-        >
-          {removeFromDashboard.isPending ? (
-            <Spinner className="size-4" />
-          ) : (
-            <Trash2Icon className="size-4" />
-          )}
-          Remove
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-const deleteEngineReasons: Array<{
-  value: DeleteCloudHostedEngineParams["reason"];
-  label: string;
-}> = [
-  { value: "USING_SELF_HOSTED", label: "Migrating to self-hosted" },
-  { value: "TOO_EXPENSIVE", label: "Too expensive" },
-  { value: "MISSING_FEATURES", label: "Missing features" },
-  { value: "OTHER", label: "Other" },
-];
-
-const deleteEngineFormSchema = z.object({
-  reason: z.enum([
-    "USING_SELF_HOSTED",
-    "TOO_EXPENSIVE",
-    "MISSING_FEATURES",
-    "OTHER",
-  ]),
-  feedback: z.string(),
-  confirmDeletion: z.boolean(),
-});
-
-function DeleteEngineSubscriptionModalContent(props: {
-  instance: EngineInstance;
-  close: () => void;
-  deleteCloudHostedEngine: DeletedCloudHostedEngine;
-}) {
-  const { instance, close } = props;
-  const deleteCloudHostedEngine = useMutation({
-    mutationFn: props.deleteCloudHostedEngine,
-  });
-
-  const form = useForm<z.infer<typeof deleteEngineFormSchema>>({
-    resolver: zodResolver(deleteEngineFormSchema),
-    defaultValues: {
-      feedback: "",
-      confirmDeletion: false,
-    },
-    reValidateMode: "onChange",
-  });
-
-  const onSubmit = (data: z.infer<typeof deleteEngineFormSchema>) => {
-    // unexpected state
-    if (!instance.deploymentId) {
-      toast.error("Can not delete this Engine instance", {
-        description: "Engine instance is missing deployment id",
-      });
-      return;
-    }
-
-    deleteCloudHostedEngine.mutate(
-      {
-        deploymentId: instance.deploymentId,
-        reason: data.reason,
-        feedback: data.feedback,
-      },
-      {
-        onSuccess: () => {
-          toast.success(
-            "Deleting Engine. Please check again in a few minutes.",
-            {
-              dismissible: true,
-              duration: 10000,
-            },
-          );
-
-          close();
-        },
-        onError: () => {
-          toast.error(
-            "Error deleting Engine. Please visit https://thirdweb.com/support.",
-          );
-        },
-      },
-    );
-  };
-
-  return (
-    <div>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)}>
-          <div className="p-6">
-            <DialogHeader className="mb-2">
-              <DialogTitle>Permanently Delete Engine</DialogTitle>
-            </DialogHeader>
-
-            <p className="mb-3 text-muted-foreground text-sm">
-              This step will cancel your monthly subscription and immediately
-              delete all data and infrastructure for this Engine.
-            </p>
-
-            {/* Reason */}
-            <FormField
-              control={form.control}
-              name="reason"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    Please share your feedback to help us improve Engine.
-                  </FormLabel>
-                  <FormControl>
-                    <RadioGroup
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                      className="flex flex-col gap-1"
-                    >
-                      {deleteEngineReasons.map((reason) => (
-                        <FormItem
-                          key={reason.value}
-                          className="flex items-center space-x-3 space-y-0"
-                        >
-                          <FormControl>
-                            <RadioGroupItem value={reason.value} />
-                          </FormControl>
-                          <FormLabel className="!text-foreground font-normal text-sm">
-                            {reason.label}
-                          </FormLabel>
-                        </FormItem>
-                      ))}
-                    </RadioGroup>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="h-4" />
-
-            {/* Feedback */}
-            <FormField
-              control={form.control}
-              name="feedback"
-              render={({ field }) => (
-                <FormItem>
-                  <FormControl>
-                    <Textarea
-                      className="bg-card"
-                      placeholder="Provide additional feedback"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="h-4" />
-
-            <Alert variant="destructive">
-              <AlertTitle>This action is irreversible!</AlertTitle>
-
-              <AlertDescription className="!pl-0">
-                <CheckboxWithLabel>
-                  <Checkbox
-                    checked={form.watch("confirmDeletion")}
-                    onCheckedChange={(checked) =>
-                      form.setValue("confirmDeletion", !!checked)
-                    }
-                  />
-                  I understand that access to my local backend wallets and any
-                  remaining funds will be lost.
-                </CheckboxWithLabel>
-              </AlertDescription>
-            </Alert>
-          </div>
-
-          <div className="flex justify-end gap-3 border-t bg-card p-6">
-            <Button onClick={close} variant="outline">
-              Close
-            </Button>
-            <Button
-              type="submit"
-              variant="destructive"
-              disabled={
-                !form.watch("confirmDeletion") ||
-                deleteCloudHostedEngine.isPending
-              }
-              className="gap-2"
-            >
-              {deleteCloudHostedEngine.isPending && (
-                <Spinner className="size-4" />
-              )}
-              Permanently Delete Engine
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </div>
-  );
-}
-
-function EmptyEngineState(props: {
-  teamPlan: Team["billingPlan"];
-  teamSlug: string;
-}) {
-  const [selectedTab, setSelectedTab] = useState<
-    "self-hosted" | "cloud-hosted"
-  >("cloud-hosted");
-
-  return (
-    <div className="flex flex-col items-center justify-center rounded-lg border bg-card px-4 py-12 lg:px-6">
-      <div className="mb-4 rounded-full border bg-card p-2">
-        <EngineIcon className="size-6 text-muted-foreground" />
-      </div>
-
-      <h2 className="mb-1 font-semibold text-xl">No Engine instances found</h2>
-      <p className="mb-6 max-w-lg text-center text-muted-foreground text-sm">
-        Get started with one of the options below to add your first engine
-        instance.
-      </p>
-
-      {props.teamPlan !== "accelerate" && props.teamPlan !== "scale" && (
-        <>
-          <div className="w-full max-w-md">
-            <div className="mx-auto max-w-sm">
-              <div className="grid grid-cols-2 gap-1 rounded-lg border p-1">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className={cn(selectedTab === "cloud-hosted" && "bg-accent")}
-                  onClick={() => setSelectedTab("cloud-hosted")}
-                >
-                  Managed
-                </Button>
-
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className={cn(selectedTab === "self-hosted" && "bg-accent")}
-                  onClick={() => setSelectedTab("self-hosted")}
-                >
-                  Self-hosted
-                </Button>
-              </div>
-            </div>
-
-            <div className="h-5" />
-
-            {selectedTab === "self-hosted" && (
-              <div className="flex flex-col text-center">
-                <h3 className="mb-0.5 font-semibold text-base">
-                  Self-Hosted Engine
-                </h3>
-                <p className="text-muted-foreground text-sm">
-                  Add engine instance running on your own infrastructure.
-                </p>
-                <div className="h-4" />
-                <div className="mt-auto">
-                  <Button
-                    className="w-full gap-2"
-                    variant="default"
-                    size="sm"
-                    asChild
-                  >
-                    <Link href={`/team/${props.teamSlug}/~/engine/import`}>
-                      Import self-hosted Engine
-                      <ArrowRight size={16} />
-                    </Link>
-                  </Button>
-                </div>
-              </div>
-            )}
-
-            {selectedTab === "cloud-hosted" && (
-              <div className="flex flex-col text-center">
-                <h3 className="mb-0.5 font-semibold text-base">
-                  Managed Engine
-                </h3>
-                <p className="text-muted-foreground text-sm">
-                  {props.teamPlan !== "pro" ? (
-                    <>
-                      Upgrade your team plan to Accelerate or Scale to get a
-                      fully managed engine instance.{" "}
-                      <UnderlineLink href="/pricing" target="_blank">
-                        View pricing
-                      </UnderlineLink>
-                    </>
-                  ) : (
-                    <>
-                      Contact us to add a managed engine instance to your team
-                    </>
-                  )}
-                </p>
-                <div className="h-4" />
-                <div className="mt-auto">
-                  {props.teamPlan !== "pro" ? (
-                    <Button className="w-full gap-2" size="sm" asChild>
-                      <Link href={`/team/${props.teamSlug}/~/settings/billing`}>
-                        Upgrade Plan
-                        <ArrowRight size={16} />
-                      </Link>
-                    </Button>
-                  ) : (
-                    <Button className="w-full gap-2" size="sm" asChild>
-                      <Link href={PRO_CONTACT_US_URL} target="_blank">
-                        Contact Us
-                        <ArrowRight size={16} />
-                      </Link>
-                    </Button>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-
-          <div className="mt-4 text-center text-muted-foreground text-sm">
-            Need help getting started? <br className="lg:hidden" />
-            <Link
-              href="https://portal.thirdweb.com/engine"
-              target="_blank"
-              className="text-foreground hover:underline"
-            >
-              View documentation
-            </Link>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-list.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-list.tsx
deleted file mode 100644
index 0c0a394cffa..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/overview/engine-list.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Team } from "@/api/team";
-import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
-import { EngineFooterCard } from "../_components";
-import { EngineInstancesTable } from "./engine-instances-table";
-
-export const EngineInstancesList = (props: {
-  team_slug: string;
-  instances: EngineInstance[];
-  teamPlan: Team["billingPlan"];
-}) => {
-  const engineLinkPrefix = `/team/${props.team_slug}/~/engine`;
-
-  return (
-    <div className="flex grow flex-col">
-      <EngineInstancesTable
-        teamSlug={props.team_slug}
-        instances={props.instances}
-        engineLinkPrefix={engineLinkPrefix}
-        teamPlan={props.teamPlan}
-      />
-
-      <div className="h-40" />
-      <EngineFooterCard teamPlan={props.teamPlan} team_slug={props.team_slug} />
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/page.tsx
deleted file mode 100644
index ee1946e0cd5..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(general)/page.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { getTeamBySlug } from "@/api/team";
-import { redirect } from "next/navigation";
-import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
-import { loginRedirect } from "../../../../../../login/loginRedirect";
-import { getEngineInstances } from "../_utils/getEngineInstances";
-import { EngineInstancesList } from "./overview/engine-list";
-
-export default async function Page(props: {
-  params: Promise<{
-    team_slug: string;
-  }>;
-  searchParams: Promise<{
-    importUrl?: string;
-  }>;
-}) {
-  const [params, searchParams] = await Promise.all([
-    props.params,
-    props.searchParams,
-  ]);
-
-  if (searchParams.importUrl) {
-    redirect(
-      `/team/${params.team_slug}/~/engine/import?importUrl=${searchParams.importUrl}`,
-    );
-  }
-
-  const [authToken, team] = await Promise.all([
-    getAuthToken(),
-    getTeamBySlug(params.team_slug),
-  ]);
-
-  if (!authToken) {
-    loginRedirect(`/team/${params.team_slug}/~/engine`);
-  }
-
-  if (!team) {
-    redirect("/team");
-  }
-
-  const res = await getEngineInstances({
-    authToken,
-    teamIdOrSlug: params.team_slug,
-  });
-
-  return (
-    <EngineInstancesList
-      team_slug={params.team_slug}
-      instances={res.data || []}
-      teamPlan={team.billingPlan}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EngineErrorPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EngineErrorPage.tsx
deleted file mode 100644
index 6fccdb6982f..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EngineErrorPage.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ArrowLeftIcon, CircleAlertIcon } from "lucide-react";
-import Link from "next/link";
-
-export function EngineErrorPage(props: {
-  children: React.ReactNode;
-  rootPath: string;
-}) {
-  return (
-    <div className="flex grow flex-col">
-      <Link
-        href={props.rootPath}
-        className="flex items-center gap-2 text-muted-foreground hover:text-foreground"
-      >
-        <ArrowLeftIcon className="size-5" />
-        Back
-      </Link>
-
-      <div className="mt-5 flex min-h-[300px] grow flex-col items-center justify-center rounded-lg border border-border px-4 lg:min-h-[400px]">
-        <div className="flex flex-col items-center gap-4">
-          <CircleAlertIcon className="size-16 text-destructive-text" />
-          <div className="text-center text-muted-foreground">
-            {props.children}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EnginePageLayout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EnginePageLayout.tsx
deleted file mode 100644
index b8c7de2ef93..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EnginePageLayout.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { SidebarLink } from "@/components/blocks/Sidebar";
-import { SidebarLayout } from "@/components/blocks/SidebarLayout";
-
-const sidebarLinkMeta: Array<{ pathId: string; label: string }> = [
-  {
-    pathId: "",
-    label: "Overview",
-  },
-  {
-    pathId: "explorer",
-    label: "Explorer",
-  },
-  {
-    pathId: "relayers",
-    label: "Relayers",
-  },
-  {
-    pathId: "contract-subscriptions",
-    label: "Contract Subscriptions",
-  },
-  {
-    pathId: "admins",
-    label: "Admins",
-  },
-  {
-    pathId: "access-tokens",
-    label: "Access Tokens",
-  },
-  {
-    pathId: "webhooks",
-    label: "Webhooks",
-  },
-  {
-    pathId: "metrics",
-    label: "Metrics",
-  },
-  {
-    pathId: "alerts",
-    label: "Alerts",
-  },
-  {
-    pathId: "wallet-credentials",
-    label: "Wallet Credentials",
-  },
-  {
-    pathId: "configuration",
-    label: "Configuration",
-  },
-];
-
-export function EngineSidebarLayout(props: {
-  engineId: string;
-  teamSlug: string;
-  children: React.ReactNode;
-}) {
-  const rootPath = `/team/${props.teamSlug}/~/engine`;
-
-  const links: SidebarLink[] = sidebarLinkMeta.map((linkMeta) => {
-    return {
-      href: `${rootPath}/${props.engineId}${linkMeta.pathId === "" ? "" : `/${linkMeta.pathId}`}`,
-      label: linkMeta.label,
-      exactMatch: true,
-      tracking: {
-        category: "engine",
-        action: "navigate-tab",
-        label: linkMeta.label,
-      },
-    };
-  });
-
-  return <SidebarLayout sidebarLinks={links}>{props.children}</SidebarLayout>;
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EnsureEnginePermission.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
deleted file mode 100644
index 1e3bfc6bd63..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client";
-
-import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
-import { useQuery } from "@tanstack/react-query";
-import type React from "react";
-import GenericLoadingPage from "../../../../ecosystem/loading";
-import { getEngineAccessPermission } from "../../../_utils/getEngineAccessPermission";
-import { EngineErrorPage } from "./EngineErrorPage";
-
-export function EnsureEnginePermission(props: {
-  engineId: string;
-  accountId: string;
-  authToken: string;
-  children: React.ReactNode;
-  teamSlug: string;
-  instance: EngineInstance;
-}) {
-  const { instance } = props;
-  const rootPath = `/team/${props.teamSlug}/~/engine`;
-
-  const permissionQuery = useQuery({
-    queryKey: [
-      "engine-permission",
-      {
-        instanceUrl: instance.url,
-        authToken: props.authToken,
-      },
-    ],
-    queryFn: () => {
-      const url = instance.url;
-      if (!url) {
-        throw new Error();
-      }
-
-      return getEngineAccessPermission({
-        authToken: props.authToken,
-        instanceUrl: url,
-      });
-    },
-    retry: false,
-  });
-
-  if (permissionQuery.isPending) {
-    return <GenericLoadingPage />;
-  }
-
-  if (!permissionQuery.data) {
-    return (
-      <EngineErrorPage rootPath={rootPath}>
-        Failed to verify access to engine instance
-      </EngineErrorPage>
-    );
-  }
-
-  const permission = permissionQuery.data;
-
-  if (!permission.ok) {
-    if (permission.status === 404) {
-      return (
-        <EngineErrorPage rootPath={rootPath}>
-          <p> Engine instance not found </p>
-        </EngineErrorPage>
-      );
-    }
-
-    if (permission.fetchFailed) {
-      return (
-        <EngineErrorPage rootPath={rootPath}>
-          <p> Engine instance could not be reached </p>
-        </EngineErrorPage>
-      );
-    }
-
-    if (permission.status === 401 || permission.status === 500) {
-      return (
-        <EngineErrorPage rootPath={rootPath}>
-          <div>
-            <p>You are not an admin for this Engine instance. </p>
-            <p> Contact the owner to add your wallet as an admin</p>
-          </div>
-        </EngineErrorPage>
-      );
-    }
-  }
-
-  return <div>{props.children}</div>;
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/version.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/version.tsx
deleted file mode 100644
index 1cfb38d1cbc..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/_components/version.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-"use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import {
-  type EngineInstance,
-  useEngineGetDeploymentPublicConfiguration,
-  useEngineSystemHealth,
-  useEngineUpdateDeployment,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { formatDistanceToNow } from "date-fns";
-import { CircleArrowUpIcon, TriangleAlertIcon } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import invariant from "tiny-invariant";
-
-export const EngineVersionBadge = ({
-  instance,
-  teamSlug,
-}: {
-  instance: EngineInstance;
-  teamSlug: string;
-}) => {
-  const healthQuery = useEngineSystemHealth(instance.url);
-  const publicConfigurationQuery = useEngineGetDeploymentPublicConfiguration({
-    teamSlug,
-  });
-  const [isModalOpen, setModalOpen] = useState(false);
-
-  if (!healthQuery.data || !publicConfigurationQuery.data) {
-    return null;
-  }
-
-  const serverVersions = publicConfigurationQuery.data.serverVersions;
-  const latestVersion = serverVersions[0];
-  const currentVersion = healthQuery.data.engineVersion;
-  const hasNewerVersion = latestVersion?.name !== currentVersion;
-
-  if (!currentVersion) {
-    return null;
-  }
-
-  // Hide the change version modal unless owner.
-  if (!instance.deploymentId) {
-    return (
-      <Button variant="outline" asChild className="hover:bg-transparent">
-        <div>{currentVersion}</div>
-      </Button>
-    );
-  }
-
-  return (
-    <>
-      <ToolTipLabel
-        label={
-          hasNewerVersion
-            ? "An update is available"
-            : "Engine is on the latest update"
-        }
-        leftIcon={<CircleArrowUpIcon className="size-4 text-link-foreground" />}
-      >
-        <Button
-          variant="outline"
-          className="relative"
-          onClick={() => setModalOpen(true)}
-        >
-          {currentVersion}
-
-          {/* Notification dot if an update is available */}
-          {hasNewerVersion && (
-            <span className="-top-1 -right-1 absolute">
-              <PulseDot />
-            </span>
-          )}
-        </Button>
-      </ToolTipLabel>
-
-      <ChangeVersionModal
-        open={isModalOpen}
-        onOpenChange={setModalOpen}
-        instance={instance}
-        currentVersion={currentVersion}
-        serverVersions={serverVersions}
-        teamSlug={teamSlug}
-      />
-    </>
-  );
-};
-
-const ChangeVersionModal = (props: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  instance: EngineInstance;
-  currentVersion: string;
-  serverVersions: { name: string; createdAt: string }[];
-  teamSlug: string;
-}) => {
-  const {
-    open,
-    onOpenChange,
-    instance,
-    currentVersion,
-    serverVersions,
-    teamSlug,
-  } = props;
-  const [selectedVersion, setSelectedVersion] = useState(
-    serverVersions[0]?.name,
-  );
-  const updateDeploymentMutation = useEngineUpdateDeployment();
-
-  if (!instance.deploymentId) {
-    // Self-hosted modal: prompt to update manually.
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-[400px]">
-          <DialogHeader>
-            <DialogTitle className="mb-6 pr-4 font-semibold text-2xl tracking-tight">
-              Update your self-hosted Engine
-            </DialogTitle>
-            <DialogDescription>
-              View the{" "}
-              <TrackedLinkTW
-                href="https://github.com/thirdweb-dev/engine/releases"
-                category="engine"
-                label="clicked-engine-releases"
-                target="_blank"
-                className="text-link-foreground hover:text-foreground"
-              >
-                latest changelog
-              </TrackedLinkTW>
-              .
-            </DialogDescription>
-          </DialogHeader>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  const onClickUpdate = async () => {
-    invariant(selectedVersion, "No version selected.");
-    invariant(instance.deploymentId, "Engine is missing deploymentId.");
-
-    try {
-      const promise = updateDeploymentMutation.mutateAsync({
-        teamSlug,
-        deploymentId: instance.deploymentId,
-        serverVersion: selectedVersion,
-      });
-      toast.promise(promise, {
-        success: `Updating your Engine to ${selectedVersion}.`,
-        error: "Unexpected error updating Engine.",
-      });
-      await promise;
-    } finally {
-      onOpenChange(false);
-    }
-  };
-
-  // For cloud-hosted, prompt the user to select a version to update to.
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[400px]">
-        <DialogHeader>
-          <DialogTitle>Update Engine version</DialogTitle>
-        </DialogHeader>
-
-        <DialogDescription>
-          <Select
-            onValueChange={(value) => setSelectedVersion(value)}
-            value={selectedVersion}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                {serverVersions.map(({ name, createdAt }, idx) => {
-                  const isCurrentVersion = name === currentVersion;
-                  const isLatestVersion = idx === 0;
-                  return (
-                    <SelectItem
-                      key={name}
-                      value={name}
-                      id={name}
-                      disabled={isCurrentVersion}
-                    >
-                      <span>{name}</span>
-                      <span className="ml-4 text-muted-foreground">
-                        {formatDistanceToNow(new Date(createdAt), {
-                          addSuffix: true,
-                        })}
-                      </span>
-                      {isCurrentVersion ? (
-                        <Badge className="ml-2">current</Badge>
-                      ) : isLatestVersion ? (
-                        <Badge className="ml-2">latest</Badge>
-                      ) : null}
-                    </SelectItem>
-                  );
-                })}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-
-          <div className="h-4" />
-
-          {currentVersion.startsWith("v") && (
-            <div>
-              <TrackedLinkTW
-                href={`https://github.com/thirdweb-dev/engine/compare/${currentVersion}...${selectedVersion}`}
-                category="engine"
-                label="clicked-engine-releases"
-                target="_blank"
-                className="text-link-foreground hover:text-foreground"
-              >
-                View changes: {currentVersion} &rarr; {selectedVersion}
-              </TrackedLinkTW>
-            </div>
-          )}
-
-          <div className="h-4" />
-
-          <Alert variant="warning">
-            <TriangleAlertIcon className="!text-warning-text size-4" />
-            <AlertTitle>There may be up to 1 minute of downtime.</AlertTitle>
-
-            <AlertDescription className="!pl-0 pt-2">
-              We recommended pausing traffic to Engine before performing this
-              version update.
-            </AlertDescription>
-          </Alert>
-        </DialogDescription>
-
-        <DialogFooter className="mt-5">
-          <Button
-            type="button"
-            onClick={() => onOpenChange(false)}
-            variant="outline"
-          >
-            Close
-          </Button>
-          <Button
-            type="submit"
-            onClick={onClickUpdate}
-            variant="primary"
-            className="gap-2"
-            disabled={selectedVersion === currentVersion}
-          >
-            {updateDeploymentMutation.isPending ? (
-              <Spinner className="size-4" />
-            ) : (
-              <CircleArrowUpIcon className="size-4" />
-            )}
-            Update to {selectedVersion}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-function PulseDot() {
-  return (
-    <span className="relative flex size-2">
-      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" />
-      <span className="relative inline-flex size-2 rounded-full bg-primary" />
-    </span>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
deleted file mode 100644
index 82451fea4d1..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/access-tokens-table.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import { WalletAddress } from "@/components/blocks/wallet-address";
-import {
-  type AccessToken,
-  useEngineRevokeAccessToken,
-  useEngineUpdateAccessToken,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { createColumnHelper } from "@tanstack/react-table";
-import { TWTable } from "components/shared/TWTable";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { PencilIcon, Trash2Icon } from "lucide-react";
-import { useState } from "react";
-import { Button, FormLabel, Text } from "tw-components";
-import { toDateTimeLocal } from "utils/date-utils";
-
-interface AccessTokensTableProps {
-  instanceUrl: string;
-  accessTokens: AccessToken[];
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-}
-
-const columnHelper = createColumnHelper<AccessToken>();
-
-const columns = [
-  columnHelper.accessor("tokenMask", {
-    header: "Access Token",
-    cell: (cell) => {
-      return (
-        <p className="py-3 font-mono text-foreground">{cell.getValue()}</p>
-      );
-    },
-  }),
-  columnHelper.accessor("label", {
-    header: "Label",
-    cell: (cell) => {
-      return (
-        <Text isTruncated maxW={300}>
-          {cell.getValue()}
-        </Text>
-      );
-    },
-  }),
-  columnHelper.accessor("walletAddress", {
-    header: "Created By",
-    cell: (cell) => {
-      const address = cell.getValue();
-      return <WalletAddress address={address} />;
-    },
-  }),
-  columnHelper.accessor("createdAt", {
-    header: "Created At",
-    cell: (cell) => {
-      const value = cell.getValue();
-
-      if (!value) {
-        return;
-      }
-      return <Text>{toDateTimeLocal(value)}</Text>;
-    },
-  }),
-];
-
-export const AccessTokensTable: React.FC<AccessTokensTableProps> = ({
-  instanceUrl,
-  accessTokens,
-  isPending,
-  isFetched,
-  authToken,
-}) => {
-  const editDisclosure = useDisclosure();
-  const removeDisclosure = useDisclosure();
-  const [selectedAccessToken, setSelectedAccessToken] = useState<AccessToken>();
-
-  return (
-    <>
-      <TWTable
-        title="access tokens"
-        data={accessTokens}
-        columns={columns}
-        isPending={isPending}
-        isFetched={isFetched}
-        onMenuClick={[
-          {
-            icon: <PencilIcon className="size-4" />,
-            text: "Edit",
-            onClick: (accessToken) => {
-              setSelectedAccessToken(accessToken);
-              editDisclosure.onOpen();
-            },
-          },
-          {
-            icon: <Trash2Icon className="size-4" />,
-            text: "Delete",
-            onClick: (accessToken) => {
-              setSelectedAccessToken(accessToken);
-              removeDisclosure.onOpen();
-            },
-            isDestructive: true,
-          },
-        ]}
-      />
-
-      {selectedAccessToken && editDisclosure.isOpen && (
-        <EditModal
-          accessToken={selectedAccessToken}
-          disclosure={editDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-      {selectedAccessToken && removeDisclosure.isOpen && (
-        <RemoveModal
-          accessToken={selectedAccessToken}
-          disclosure={removeDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-    </>
-  );
-};
-
-const EditModal = ({
-  accessToken,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: {
-  accessToken: AccessToken;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const { mutate: updateAccessToken } = useEngineUpdateAccessToken({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully updated access token",
-    "Failed to update access token",
-  );
-
-  const [label, setLabel] = useState(accessToken.label ?? "");
-
-  const onClick = () => {
-    updateAccessToken(
-      {
-        id: accessToken.id,
-        label,
-      },
-      {
-        onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "update-access-token",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          onError(error);
-          trackEvent({
-            category: "engine",
-            action: "update-access-token",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Update Access Token</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <FormControl>
-              <FormLabel>Access Token</FormLabel>
-              <Text>{accessToken.tokenMask}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                type="text"
-                value={label}
-                onChange={(e) => setLabel(e.target.value)}
-                placeholder="Enter a description for this access token"
-              />
-            </FormControl>
-          </div>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button type="button" onClick={disclosure.onClose} variant="ghost">
-            Cancel
-          </Button>
-          <Button type="submit" colorScheme="blue" onClick={onClick}>
-            Save
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-const RemoveModal = ({
-  accessToken,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: {
-  accessToken: AccessToken;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const { mutate: deleteAccessToken } = useEngineRevokeAccessToken({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully deleted access token",
-    "Failed to delete access token",
-  );
-
-  const onClick = () => {
-    deleteAccessToken(
-      {
-        id: accessToken.id,
-      },
-      {
-        onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "revoke-access-token",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          onError(error);
-          trackEvent({
-            category: "engine",
-            action: "revoke-access-token",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Delete Access Token</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to delete this access token?</Text>
-            <FormControl>
-              <FormLabel>Access Token</FormLabel>
-              <Text>{accessToken.tokenMask}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Text>{accessToken.label ?? <em>N/A</em>}</Text>
-            </FormControl>
-          </div>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button type="button" onClick={disclosure.onClose} variant="ghost">
-            Cancel
-          </Button>
-          <Button type="submit" colorScheme="red" onClick={onClick}>
-            Delete
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
deleted file mode 100644
index daa5dd3c03a..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/add-access-token-button.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
-import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
-import { useEngineCreateAccessToken } from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { CirclePlusIcon } from "lucide-react";
-import { useState } from "react";
-import { Button, Text } from "tw-components";
-
-interface AddAccessTokenButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const AddAccessTokenButton: React.FC<AddAccessTokenButtonProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const [accessToken, setAccessToken] = useState<string>("");
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { mutate: createAccessToken } = useEngineCreateAccessToken({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const [hasStoredToken, setHasStoredToken] = useState<boolean>(false);
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Access token created successfully.",
-    "Failed to create Access Token.",
-  );
-
-  return (
-    <>
-      <Button
-        onClick={() => {
-          createAccessToken(undefined, {
-            onSuccess: (response) => {
-              onSuccess();
-              trackEvent({
-                category: "engine",
-                action: "create-access-token",
-                label: "success",
-                instance: instanceUrl,
-              });
-              setAccessToken(response.accessToken);
-              onOpen();
-            },
-            onError: (error) => {
-              onError(error);
-              trackEvent({
-                category: "engine",
-                action: "create-access-token",
-                label: "error",
-                instance: instanceUrl,
-                error,
-              });
-            },
-          });
-        }}
-        variant="ghost"
-        size="sm"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        colorScheme="primary"
-        w="fit-content"
-      >
-        Create Access Token
-      </Button>
-
-      <Modal
-        isOpen={isOpen}
-        onClose={onClose}
-        closeOnOverlayClick={false}
-        closeOnEsc={false}
-        isCentered
-      >
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
-          <ModalHeader>Access token</ModalHeader>
-          <ModalBody as={Flex} flexDir="column" gap={4}>
-            <div className="flex flex-col gap-4">
-              <PlainTextCodeBlock code={accessToken} />
-              <Text color="red.500">
-                This access token will not be shown again.
-              </Text>
-              <CheckboxWithLabel>
-                <Checkbox
-                  checked={hasStoredToken}
-                  onCheckedChange={(val) => setHasStoredToken(!!val)}
-                />
-                <span>I have securely stored this access token.</span>
-              </CheckboxWithLabel>
-            </div>
-          </ModalBody>
-
-          <ModalFooter as={Flex} gap={3}>
-            <Button
-              type="submit"
-              colorScheme="primary"
-              isDisabled={!hasStoredToken}
-              onClick={() => {
-                onClose();
-                setAccessToken("");
-              }}
-            >
-              Done
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
deleted file mode 100644
index d3da3bf5c4b..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/add-keypair-button.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
-import {
-  type KeypairAlgorithm,
-  useEngineAddKeypair,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Alert,
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-  Textarea,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { CirclePlusIcon } from "lucide-react";
-import { useState } from "react";
-import { Button, FormLabel, Text } from "tw-components";
-
-const KEYPAIR_ALGORITHM_DETAILS: Record<
-  KeypairAlgorithm,
-  {
-    name: string;
-    privateKeyInstructions: string;
-    publicKeyInstructions: string;
-  }
-> = {
-  ES256: {
-    name: "ECDSA",
-    privateKeyInstructions:
-      "openssl ecparam -name prime256v1 -genkey -noout -out private.key",
-    publicKeyInstructions: "openssl ec -in private.key -pubout -out public.key",
-  },
-  RS256: {
-    name: "RSASSA-PKCS1-v1_5",
-    privateKeyInstructions:
-      "openssl genpkey -algorithm RSA -out private.key -pkeyopt rsa_keygen_bits:2048",
-    publicKeyInstructions:
-      "openssl rsa -pubout -in private.key -out public.key",
-  },
-  PS256: {
-    name: "RSASSA-PSS",
-    privateKeyInstructions:
-      "openssl genpkey -algorithm RSA-PSS -out private.key -pkeyopt rsa_keygen_bits:2048 -pkeyopt rsa_pss_keygen_md:sha256",
-    publicKeyInstructions:
-      "openssl rsa -pubout -in private.key -out public.key",
-  },
-};
-
-interface AddKeypairButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const AddKeypairButton: React.FC<AddKeypairButtonProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const [publicKey, setPublicKey] = useState<string>("");
-  const [algorithm, setAlgorithm] = useState<KeypairAlgorithm>("ES256");
-  const [label, setLabel] = useState<string>("");
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { mutateAsync: importKeypair } = useEngineAddKeypair({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Public key added successfully.",
-    "Failed to add public key.",
-  );
-
-  const onClick = async () => {
-    try {
-      await importKeypair({
-        publicKey,
-        algorithm,
-        label,
-      });
-
-      onSuccess();
-      trackEvent({
-        category: "engine",
-        action: "add-keypair",
-        label: "success",
-        instance: instanceUrl,
-      });
-      setPublicKey("");
-      onClose();
-    } catch (error) {
-      onError(error);
-      trackEvent({
-        category: "engine",
-        action: "add-keypair",
-        label: "error",
-        instance: instanceUrl,
-        error,
-      });
-    }
-  };
-
-  return (
-    <>
-      <Button
-        onClick={onOpen}
-        variant="ghost"
-        size="sm"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        colorScheme="primary"
-        w="fit-content"
-      >
-        Add Public Key
-      </Button>
-
-      <Modal
-        isOpen={isOpen}
-        onClose={onClose}
-        closeOnOverlayClick={false}
-        closeOnEsc={false}
-        isCentered
-        size="2xl"
-      >
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
-          <ModalHeader>Add Public Key</ModalHeader>
-          <ModalBody as={Flex} flexDir="column" gap={8}>
-            <FormControl>
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-row gap-2">
-                  <Text>Create a private key using:</Text>
-                  <Select
-                    w="fit-content"
-                    value={algorithm}
-                    onChange={(e) =>
-                      setAlgorithm(e.target.value as KeypairAlgorithm)
-                    }
-                    fontSize="small"
-                    size="sm"
-                    variant="unstyled"
-                    // fontWeight="bold"
-                    fontFamily="mono"
-                    color="primary.500"
-                    mt="-1px"
-                  >
-                    {(
-                      Object.keys(
-                        KEYPAIR_ALGORITHM_DETAILS,
-                      ) as KeypairAlgorithm[]
-                    ).map((key) => (
-                      <option key={key} value={key}>
-                        {key} ({KEYPAIR_ALGORITHM_DETAILS[key].name})
-                      </option>
-                    ))}
-                  </Select>
-                </div>
-
-                <PlainTextCodeBlock
-                  code={
-                    KEYPAIR_ALGORITHM_DETAILS[algorithm].privateKeyInstructions
-                  }
-                />
-                <Text>Extract the public key.</Text>
-                <PlainTextCodeBlock
-                  code={
-                    KEYPAIR_ALGORITHM_DETAILS[algorithm].publicKeyInstructions
-                  }
-                />
-                <Text>Print the public key.</Text>
-                <PlainTextCodeBlock code="cat public.key" />
-              </div>
-            </FormControl>
-
-            <FormControl isRequired>
-              <FormLabel>
-                Public Key ({KEYPAIR_ALGORITHM_DETAILS[algorithm].name})
-              </FormLabel>
-              <Textarea
-                fontFamily="mono"
-                value={publicKey}
-                onChange={(e) => setPublicKey(e.target.value)}
-                placeholder="-----BEGIN PUBLIC KEY-----\n...\n...\n...\n...\n-----END PUBLIC KEY-----"
-                rows={6}
-                fontSize="small"
-              />
-            </FormControl>
-
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                value={label}
-                onChange={(e) => setLabel(e.target.value)}
-                placeholder="Enter a description for this keypair"
-              />
-            </FormControl>
-
-            <Alert variant="left-accent">
-              <div className="flex flex-col gap-2">
-                <Text>
-                  <strong>Keep your private key secure!</strong>
-                  <br />
-                  Your backend will sign access tokens with this private key
-                  which Engine verifies with this public key.
-                </Text>
-              </div>
-            </Alert>
-          </ModalBody>
-
-          <ModalFooter as={Flex} gap={3}>
-            <Button variant="ghost" onClick={onClose}>
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              colorScheme="primary"
-              onClick={onClick}
-              isDisabled={!publicKey}
-            >
-              Add Public Key
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
deleted file mode 100644
index 0a6ec16b40c..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/engine-access-tokens.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-"use client";
-
-import { CodeClient } from "@/components/ui/code/code.client";
-import { InlineCode } from "@/components/ui/inline-code";
-import {
-  useEngineAccessTokens,
-  useEngineKeypairs,
-  useHasEngineFeature,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { ButtonGroup, Flex } from "@chakra-ui/react";
-import { useState } from "react";
-import { Button, Heading, Link, Text } from "tw-components";
-import { AccessTokensTable } from "./access-tokens-table";
-import { AddAccessTokenButton } from "./add-access-token-button";
-import { AddKeypairButton } from "./add-keypair-button";
-import { KeypairsTable } from "./keypairs-table";
-
-interface EngineAccessTokensProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-type AccessTokenType = "standard" | "keypair";
-
-export const EngineAccessTokens: React.FC<EngineAccessTokensProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const [selected, setSelected] = useState<AccessTokenType>("standard");
-  const { isSupported: supportsKeyPairAuth } = useHasEngineFeature(
-    instanceUrl,
-    "KEYPAIR_AUTH",
-  );
-
-  return (
-    <Flex flexDir="column" gap={4}>
-      <Flex flexDir="column" gap={2}>
-        <Heading size="title.md">Access Tokens</Heading>
-      </Flex>
-
-      {supportsKeyPairAuth && (
-        <ButtonGroup size="sm" variant="ghost" spacing={2}>
-          <Button
-            type="button"
-            isActive={selected === "standard"}
-            _active={{
-              bg: "bgBlack",
-              color: "bgWhite",
-            }}
-            rounded="lg"
-            onClick={() => setSelected("standard")}
-          >
-            Standard
-          </Button>
-          <Button
-            type="button"
-            isActive={selected === "keypair"}
-            _active={{
-              bg: "bgBlack",
-              color: "bgWhite",
-            }}
-            rounded="lg"
-            onClick={() => setSelected("keypair")}
-          >
-            Keypair Authentication
-          </Button>
-        </ButtonGroup>
-      )}
-
-      {selected === "standard" ? (
-        <StandardAccessTokensPanel
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      ) : selected === "keypair" ? (
-        <KeypairAuthenticationPanel
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      ) : null}
-    </Flex>
-  );
-};
-
-const StandardAccessTokensPanel = ({
-  instanceUrl,
-  authToken,
-}: {
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const accessTokens = useEngineAccessTokens({
-    instanceUrl,
-    authToken,
-  });
-
-  return (
-    <>
-      <Text>
-        Access tokens allow API access to Engine.{" "}
-        <Link
-          href="https://portal.thirdweb.com/engine/features/access-tokens"
-          color="primary.500"
-          isExternal
-        >
-          Learn more about access tokens
-        </Link>
-        .
-      </Text>
-
-      <AccessTokensTable
-        instanceUrl={instanceUrl}
-        accessTokens={accessTokens.data ?? []}
-        isPending={accessTokens.isPending}
-        isFetched={accessTokens.isFetched}
-        authToken={authToken}
-      />
-      <AddAccessTokenButton instanceUrl={instanceUrl} authToken={authToken} />
-
-      <Flex direction="column" gap={2} mt={16}>
-        <Heading size="title.md">Authenticate with your access token</Heading>
-        <Text>
-          Set the <InlineCode code="authorization" /> header.
-        </Text>
-        <CodeClient
-          lang="ts"
-          code={`const resp = fetch("<engine_url>/backend-wallet/get-all", {
-  headers: {
-    authorization: "Bearer <access_token>",
-  },
-});`}
-        />
-      </Flex>
-    </>
-  );
-};
-
-const KeypairAuthenticationPanel = ({
-  instanceUrl,
-  authToken,
-}: {
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const keypairs = useEngineKeypairs({
-    instanceUrl,
-    authToken,
-  });
-
-  return (
-    <>
-      <Text>
-        Keypair authentication allows your app to generate short-lived access
-        tokens.
-        <br />
-        They are securely signed by your backend and verified with a public key.{" "}
-        <Link
-          href="https://portal.thirdweb.com/engine/features/keypair-authentication"
-          color="primary.500"
-          isExternal
-        >
-          Learn more about keypair authentication
-        </Link>
-        .
-      </Text>
-
-      <KeypairsTable
-        instanceUrl={instanceUrl}
-        keypairs={keypairs.data || []}
-        isPending={keypairs.isPending}
-        isFetched={keypairs.isFetched}
-        authToken={authToken}
-      />
-      <AddKeypairButton instanceUrl={instanceUrl} authToken={authToken} />
-
-      <Flex direction="column" gap={2} mt={16}>
-        <Heading size="title.md">Authenticate with your access token</Heading>
-
-        <Text>
-          Set the <InlineCode code="authorization" /> header.
-        </Text>
-        <CodeClient
-          lang="ts"
-          code={`import jsonwebtoken from "jsonwebtoken";
-
-// Generate an access token.
-const payload = {
-  iss: publicKey,
-};
-const accessToken = jsonwebtoken.sign(payload, privateKey, {
-  algorithm: "ES256",   // The keypair algorithm
-  expiresIn: "15s",     // Invalidate after 15 seconds
-});
-
-// Call Engine.
-const resp = fetch("<engine_url>/backend-wallet/get-all", {
-  headers: {
-    authorization: \`Bearer \${restrictedAccessToken}\`,
-  },
-});`}
-        />
-      </Flex>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
deleted file mode 100644
index 012b4071025..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/components/keypairs-table.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
-import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
-import {
-  type Keypair,
-  useEngineRemoveKeypair,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { createColumnHelper } from "@tanstack/react-table";
-import { TWTable } from "components/shared/TWTable";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { Trash2Icon } from "lucide-react";
-import { useState } from "react";
-import { Button, FormLabel, Text } from "tw-components";
-import { toDateTimeLocal } from "utils/date-utils";
-
-interface KeypairsTableProps {
-  instanceUrl: string;
-  keypairs: Keypair[];
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-}
-
-const columnHelper = createColumnHelper<Keypair>();
-
-const columns = [
-  columnHelper.accessor("label", {
-    header: "Label",
-    cell: (cell) => {
-      return <Text>{cell.getValue()}</Text>;
-    },
-  }),
-  columnHelper.accessor("hash", {
-    header: "Key ID",
-    cell: (cell) => {
-      return (
-        <CopyAddressButton address={cell.getValue()} copyIconPosition="right" />
-      );
-    },
-  }),
-  columnHelper.accessor("publicKey", {
-    header: "Public Key",
-    cell: (cell) => {
-      return (
-        <PlainTextCodeBlock
-          code={cell.getValue()}
-          className="max-w-[350px]"
-          codeClassName="text-xs"
-        />
-      );
-    },
-  }),
-  columnHelper.accessor("algorithm", {
-    header: "Type",
-    cell: (cell) => {
-      return <Text>{cell.getValue()}</Text>;
-    },
-  }),
-  columnHelper.accessor("createdAt", {
-    header: "Added At",
-    cell: (cell) => {
-      return <Text>{toDateTimeLocal(cell.getValue())}</Text>;
-    },
-  }),
-];
-
-export const KeypairsTable: React.FC<KeypairsTableProps> = ({
-  instanceUrl,
-  keypairs,
-  isPending,
-  isFetched,
-  authToken,
-}) => {
-  const removeDisclosure = useDisclosure();
-  const [selectedKeypair, setSelectedKeypair] = useState<Keypair>();
-
-  return (
-    <>
-      <TWTable
-        title="public keys"
-        data={keypairs}
-        columns={columns}
-        isPending={isPending}
-        isFetched={isFetched}
-        onMenuClick={[
-          {
-            icon: <Trash2Icon className="size-4" />,
-            text: "Remove",
-            onClick: (keypair) => {
-              setSelectedKeypair(keypair);
-              removeDisclosure.onOpen();
-            },
-            isDestructive: true,
-          },
-        ]}
-      />
-
-      {selectedKeypair && removeDisclosure.isOpen && (
-        <RemoveModal
-          keypair={selectedKeypair}
-          disclosure={removeDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-    </>
-  );
-};
-
-const RemoveModal = ({
-  keypair,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: {
-  keypair: Keypair;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const { mutate: revokeKeypair } = useEngineRemoveKeypair({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully removed public key",
-    "Failed to remove public key",
-  );
-
-  const onClick = () => {
-    revokeKeypair(
-      { hash: keypair.hash },
-      {
-        onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "remove-keypair",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          onError(error);
-          trackEvent({
-            category: "engine",
-            action: "remove-keypair",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Remove Keypair</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to remove this keypair?</Text>
-            <Text>
-              Access tokens signed by the private key for this keypair will no
-              longer be valid.
-            </Text>
-
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Text>{keypair.label}</Text>
-            </FormControl>
-
-            <FormControl>
-              <FormLabel>Type</FormLabel>
-              <Text>{keypair.algorithm}</Text>
-            </FormControl>
-
-            <FormControl>
-              <FormLabel>Public Key</FormLabel>
-              <Flex overflowX="scroll">
-                <Text fontFamily="mono" fontSize="small" whiteSpace="pre-line">
-                  {keypair.publicKey}
-                </Text>
-              </Flex>
-            </FormControl>
-          </div>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button type="button" onClick={disclosure.onClose} variant="ghost">
-            Cancel
-          </Button>
-          <Button type="submit" colorScheme="red" onClick={onClick}>
-            Remove
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/page.tsx
deleted file mode 100644
index f1dd2edd5d3..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/access-tokens/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { EngineAccessTokens } from "./components/engine-access-tokens";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return (
-    <EngineAccessTokens instanceUrl={instance.url} authToken={authToken} />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/add-admin-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/add-admin-button.tsx
deleted file mode 100644
index 0f1c70d2a35..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/add-admin-button.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import {
-  type EngineAdmin,
-  useEngineGrantPermissions,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { CirclePlusIcon } from "lucide-react";
-import { useForm } from "react-hook-form";
-import { isAddress } from "thirdweb";
-import { Button, FormLabel } from "tw-components";
-
-interface AddAdminButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const AddAdminButton: React.FC<AddAdminButtonProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { mutate: grantPermissions } = useEngineGrantPermissions({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const form = useForm<EngineAdmin>({
-    defaultValues: {
-      permissions: "ADMIN",
-    },
-  });
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully added admin.",
-    "Failed to add admin.",
-  );
-
-  return (
-    <>
-      <Button
-        onClick={onOpen}
-        variant="ghost"
-        size="sm"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        colorScheme="primary"
-        w="fit-content"
-      >
-        Add Admin
-      </Button>
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
-        <ModalOverlay />
-        <ModalContent
-          className="!bg-background rounded-lg border border-border"
-          as="form"
-          onSubmit={form.handleSubmit((data) => {
-            if (!isAddress(data.walletAddress)) {
-              onError(new Error("Invalid wallet address"));
-            }
-            grantPermissions(data, {
-              onSuccess: () => {
-                onSuccess();
-                onClose();
-                trackEvent({
-                  category: "engine",
-                  action: "add-admin",
-                  label: "success",
-                  instance: instanceUrl,
-                });
-              },
-              onError: (error) => {
-                onError(error);
-                trackEvent({
-                  category: "engine",
-                  action: "add-admin",
-                  label: "error",
-                  instance: instanceUrl,
-                  error,
-                });
-              },
-            });
-          })}
-        >
-          <ModalHeader>Add Admin</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <div className="flex flex-col gap-4">
-              <FormControl isRequired>
-                <FormLabel>Wallet Address</FormLabel>
-                <Input
-                  type="text"
-                  placeholder="The wallet address for this admin"
-                  {...form.register("walletAddress", { required: true })}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel>Label</FormLabel>
-                <Input
-                  type="text"
-                  placeholder="Enter a description for this admin"
-                  {...form.register("label")}
-                />
-              </FormControl>
-            </div>
-          </ModalBody>
-
-          <ModalFooter as={Flex} gap={3}>
-            <Button type="button" onClick={onClose} variant="ghost">
-              Cancel
-            </Button>
-            <Button type="submit" colorScheme="primary">
-              Add
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/admins-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/admins-table.tsx
deleted file mode 100644
index ef7fb39f964..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/admins-table.tsx
+++ /dev/null
@@ -1,300 +0,0 @@
-import { WalletAddress } from "@/components/blocks/wallet-address";
-import { Badge } from "@/components/ui/badge";
-import {
-  type EngineAdmin,
-  useEngineGrantPermissions,
-  useEngineRevokePermissions,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { createColumnHelper } from "@tanstack/react-table";
-import { TWTable } from "components/shared/TWTable";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { PencilIcon, Trash2Icon } from "lucide-react";
-import { useState } from "react";
-import { Button, FormLabel, Text } from "tw-components";
-
-interface AdminsTableProps {
-  instanceUrl: string;
-  admins: EngineAdmin[];
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-}
-
-const columnHelper = createColumnHelper<EngineAdmin>();
-
-const columns = [
-  columnHelper.accessor("walletAddress", {
-    header: "Address",
-    cell: (cell) => {
-      const address = cell.getValue();
-      return <WalletAddress address={address} />;
-    },
-  }),
-  columnHelper.accessor("label", {
-    header: "Label",
-    cell: (cell) => {
-      return (
-        <Text isTruncated maxW={300}>
-          {cell.getValue()}
-        </Text>
-      );
-    },
-  }),
-  columnHelper.accessor("permissions", {
-    header: "Role",
-    cell: (cell) => {
-      return <Badge variant="default">{cell.getValue()}</Badge>;
-    },
-  }),
-];
-
-export const AdminsTable: React.FC<AdminsTableProps> = ({
-  instanceUrl,
-  admins,
-  isPending,
-  isFetched,
-  authToken,
-}) => {
-  const editDisclosure = useDisclosure();
-  const removeDisclosure = useDisclosure();
-  const [selectedAdmin, setSelectedAdmin] = useState<EngineAdmin>();
-
-  return (
-    <>
-      <TWTable
-        title="admins"
-        data={admins}
-        columns={columns}
-        isPending={isPending}
-        isFetched={isFetched}
-        onMenuClick={[
-          {
-            icon: <PencilIcon className="size-4" />,
-            text: "Edit",
-            onClick: (admin) => {
-              setSelectedAdmin(admin);
-              editDisclosure.onOpen();
-            },
-          },
-          {
-            icon: <Trash2Icon className="size-4" />,
-            text: "Remove",
-            onClick: (admin) => {
-              setSelectedAdmin(admin);
-              removeDisclosure.onOpen();
-            },
-            isDestructive: true,
-          },
-        ]}
-      />
-
-      {selectedAdmin && editDisclosure.isOpen && (
-        <EditModal
-          admin={selectedAdmin}
-          disclosure={editDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-      {selectedAdmin && removeDisclosure.isOpen && (
-        <RemoveModal
-          admin={selectedAdmin}
-          disclosure={removeDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-    </>
-  );
-};
-
-const EditModal = ({
-  admin,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: {
-  admin: EngineAdmin;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const { mutate: updatePermissions } = useEngineGrantPermissions({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully updated admin",
-    "Failed to update admin",
-  );
-
-  const [label, setLabel] = useState(admin.label ?? "");
-
-  const onClick = () => {
-    updatePermissions(
-      {
-        walletAddress: admin.walletAddress,
-        permissions: admin.permissions,
-        label,
-      },
-      {
-        onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "update-admin",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          onError(error);
-          trackEvent({
-            category: "engine",
-            action: "update-admin",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Update Admin</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <FormControl>
-              <FormLabel>Wallet Address</FormLabel>
-              <Text>{admin.walletAddress}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                type="text"
-                value={label}
-                onChange={(e) => setLabel(e.target.value)}
-                placeholder="Enter a description for this admin"
-              />
-            </FormControl>
-          </div>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button type="button" onClick={disclosure.onClose} variant="ghost">
-            Cancel
-          </Button>
-          <Button type="submit" colorScheme="blue" onClick={onClick}>
-            Save
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-const RemoveModal = ({
-  admin,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: {
-  admin: EngineAdmin;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const { mutate: revokePermissions } = useEngineRevokePermissions({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully removed admin",
-    "Failed to remove admin",
-  );
-
-  const onClick = () => {
-    revokePermissions(
-      {
-        walletAddress: admin.walletAddress,
-      },
-      {
-        onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "revoke-admin",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          onError(error);
-          trackEvent({
-            category: "engine",
-            action: "revoke-admin",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Remove Admin</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to remove this admin?</Text>
-            <FormControl>
-              <FormLabel>Wallet Address</FormLabel>
-              <Text>{admin.walletAddress}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Text>{admin.label ?? <em>N/A</em>}</Text>
-            </FormControl>
-          </div>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button type="button" onClick={disclosure.onClose} variant="ghost">
-            Cancel
-          </Button>
-          <Button type="submit" colorScheme="red" onClick={onClick}>
-            Remove
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/engine-admins.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/engine-admins.tsx
deleted file mode 100644
index d1d1706995f..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/components/engine-admins.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client";
-
-import { useEnginePermissions } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Heading, Link, Text } from "tw-components";
-import { AddAdminButton } from "./add-admin-button";
-import { AdminsTable } from "./admins-table";
-
-interface EngineAdminsProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const EngineAdmins: React.FC<EngineAdminsProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const admins = useEnginePermissions({
-    instanceUrl,
-    authToken,
-  });
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Heading size="title.md">Admins</Heading>
-        <Text>
-          Admins are allowed to manage your Engine instance from the dashboard.{" "}
-          <Link
-            href="https://portal.thirdweb.com/engine/features/admins"
-            color="primary.500"
-            isExternal
-          >
-            Learn more about admins
-          </Link>
-          .
-        </Text>
-      </div>
-      <AdminsTable
-        instanceUrl={instanceUrl}
-        admins={admins.data || []}
-        isPending={admins.isPending}
-        isFetched={admins.isFetched}
-        authToken={authToken}
-      />
-      <AddAdminButton instanceUrl={instanceUrl} authToken={authToken} />
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/page.tsx
deleted file mode 100644
index e3d235d774b..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/admins/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { EngineAdmins } from "./components/engine-admins";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return <EngineAdmins instanceUrl={instance.url} authToken={authToken} />;
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
deleted file mode 100644
index f42acc39b62..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertDialogForm.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-"use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  type EngineAlertRule,
-  EngineNotificationChannelTypeConfig,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-const alertFormSchema = z.object({
-  subscriptionRoutes: z.array(z.string()),
-  type: z.enum(
-    Object.keys(EngineNotificationChannelTypeConfig) as [
-      keyof typeof EngineNotificationChannelTypeConfig,
-    ],
-  ),
-  value: z.string(),
-});
-
-type EngineAlertFormValues = z.infer<typeof alertFormSchema>;
-
-export function EngineAlertDialogForm(props: {
-  alertRules: EngineAlertRule[];
-  title: string;
-  values: EngineAlertFormValues | null;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  submitButton: {
-    isLoading: boolean;
-    label: string;
-    onSubmit: (value: EngineAlertFormValues) => void;
-  };
-}) {
-  const form = useForm<z.infer<typeof alertFormSchema>>({
-    resolver: zodResolver(alertFormSchema),
-    defaultValues: {
-      subscriptionRoutes: ["alert.*"],
-      type: "slack",
-    },
-    values: props.values ?? undefined,
-  });
-
-  function onSubmit(values: z.infer<typeof alertFormSchema>) {
-    props.submitButton.onSubmit(values);
-  }
-
-  const alertRuleOptions: EngineAlertRule[] = [
-    {
-      id: "_all_alerts",
-      routingKey: "alert.*",
-      title: "All alerts",
-      description: "Get notified of all alerts.",
-      createdAt: new Date(),
-      pausedAt: null,
-    },
-    ...props.alertRules,
-  ];
-
-  const selectedAlertRule = alertRuleOptions.find(
-    (alertRule) =>
-      alertRule.routingKey === form.getValues("subscriptionRoutes")[0],
-  );
-
-  return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <DialogContent className="p-0">
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <div className="p-6">
-              <DialogHeader className="mb-4">
-                <DialogTitle className="font-semibold text-2xl tracking-tight">
-                  {props.title}
-                </DialogTitle>
-              </DialogHeader>
-
-              <div className="flex flex-col gap-5">
-                {/* Alert Rule */}
-                <FormField
-                  control={form.control}
-                  name="subscriptionRoutes"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Alert Rule</FormLabel>
-                      <FormControl>
-                        <Select
-                          onValueChange={(value) => field.onChange([value])}
-                          value={field.value[0] ?? "alert.*"}
-                        >
-                          <SelectTrigger>
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectGroup>
-                              {alertRuleOptions.map((option) => (
-                                <SelectItem
-                                  key={option.id}
-                                  value={option.routingKey}
-                                >
-                                  {option.title}
-                                </SelectItem>
-                              ))}
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                      </FormControl>
-
-                      <FormMessage />
-
-                      {selectedAlertRule?.description && (
-                        <FormDescription>
-                          {selectedAlertRule.description}
-                        </FormDescription>
-                      )}
-                    </FormItem>
-                  )}
-                />
-
-                {/* Notification Type */}
-                <FormField
-                  control={form.control}
-                  name="type"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Notification Type</FormLabel>
-                      <FormControl>
-                        <Select
-                          onValueChange={field.onChange}
-                          value={field.value}
-                        >
-                          <SelectTrigger className="mt-1">
-                            <SelectValue placeholder="Select Notification Type" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectGroup>
-                              {Object.entries(
-                                EngineNotificationChannelTypeConfig,
-                              ).map(([type, config]) => (
-                                <SelectItem key={type} value={type}>
-                                  {config.display}
-                                </SelectItem>
-                              ))}
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                      </FormControl>
-
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                {/* Value (webhook URL, Slack URL, email address, etc.) */}
-                <FormField
-                  control={form.control}
-                  name="value"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>
-                        {EngineNotificationChannelTypeConfig[
-                          form.getValues("type")
-                        ].valueDisplay ?? "Value"}
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          type={
-                            form.getValues("type") === "email"
-                              ? "email"
-                              : "text"
-                          }
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-            </div>
-
-            <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2 ">
-              <Button
-                variant="outline"
-                onClick={() => {
-                  props.onOpenChange(false);
-                }}
-              >
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                className="min-w-28 gap-2"
-                disabled={props.submitButton.isLoading}
-              >
-                {props.submitButton.isLoading && <Spinner className="size-4" />}
-                {props.submitButton.label}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx
deleted file mode 100644
index b3f15d3f669..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineAlertsPage.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import {
-  type EngineInstance,
-  useEngineAlertRules,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { ManageEngineAlertsSection } from "./ManageEngineAlerts";
-import { RecentEngineAlertsSection } from "./RecentEngineAlerts";
-
-export function EngineAlertsPage(props: {
-  instance: EngineInstance;
-  teamIdOrSlug: string;
-}) {
-  const alertRulesQuery = useEngineAlertRules(
-    props.instance.id,
-    props.teamIdOrSlug,
-  );
-  const alertRules = alertRulesQuery.data ?? [];
-
-  return (
-    <div>
-      <ManageEngineAlertsSection
-        alertRules={alertRules}
-        engineId={props.instance.id}
-        alertRulesIsLoading={alertRulesQuery.isLoading}
-        teamIdOrSlug={props.teamIdOrSlug}
-      />
-      <div className="h-8" />
-      <RecentEngineAlertsSection
-        alertRules={alertRules}
-        engineId={props.instance.id}
-        alertRulesIsLoading={alertRulesQuery.isLoading}
-        teamIdOrSlug={props.teamIdOrSlug}
-      />
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
deleted file mode 100644
index 3d44b4baa37..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/EngineDeleteAlertModal.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { DialogDescription } from "@radix-ui/react-dialog";
-
-export function EngineDeleteAlertModal(props: {
-  onConfirm: () => void;
-  isPending: boolean;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}) {
-  return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <DialogContent className="p-0">
-        <DialogHeader className="mb-4 p-6">
-          <DialogTitle className="font-semibold text-2xl tracking-tight">
-            Delete Alert
-          </DialogTitle>
-
-          <DialogDescription>
-            You will no longer receive notifications from this webhook.
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter className="gap-4 border-border border-t bg-card p-6 lg:gap-2">
-          <Button
-            variant="outline"
-            onClick={() => {
-              props.onOpenChange(false);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button
-            className="min-w-28 gap-2"
-            variant="destructive"
-            onClick={props.onConfirm}
-          >
-            {props.isPending && <Spinner className="size-4" />}
-            Delete Webhook
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx
deleted file mode 100644
index f3b1e614766..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import type {
-  CreateNotificationChannelInput,
-  EngineNotificationChannel,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import type { Meta, StoryObj } from "@storybook/react";
-import { useMutation } from "@tanstack/react-query";
-import {
-  createEngineAlertRuleStub,
-  createEngineNotificationChannelStub,
-} from "stories/stubs";
-import { BadgeContainer } from "stories/utils";
-import { ManageEngineAlertsSectionUI } from "./ManageEngineAlerts";
-
-const meta = {
-  title: "Engine/Alerts/ManageAlerts",
-  component: Story,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-} satisfies Meta<typeof Story>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Variants: Story = {
-  args: {},
-};
-
-function Story() {
-  const createEngineAlertMutation = useMutation({
-    mutationFn: async (values: CreateNotificationChannelInput) => {
-      console.log("creating alert using input:", values);
-
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
-      const channelStub: EngineNotificationChannel = {
-        createdAt: new Date(),
-        id: "new-channel",
-        pausedAt: null,
-        subscriptionRoutes: values.subscriptionRoutes,
-        value: values.value,
-        type: values.type,
-      };
-
-      console.log("created channel:", channelStub);
-      return channelStub;
-    },
-  });
-
-  async function deleteAlert(alertId: string) {
-    console.log("deleting alert:", alertId);
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-  }
-
-  return (
-    <div className="container flex max-w-6xl flex-col gap-14 py-6">
-      <BadgeContainer label="2 Alerts">
-        <ManageEngineAlertsSectionUI
-          isLoading={false}
-          onAlertsUpdated={() => {}}
-          engineId="test-engine-id"
-          createAlertMutation={createEngineAlertMutation}
-          deleteAlert={deleteAlert}
-          alertRules={[
-            createEngineAlertRuleStub("foo"),
-            createEngineAlertRuleStub("bar"),
-          ]}
-          notificationChannels={[
-            createEngineNotificationChannelStub("foo"),
-            createEngineNotificationChannelStub("foo", {
-              pausedAt: null,
-            }),
-          ]}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="No Alerts">
-        <ManageEngineAlertsSectionUI
-          alertRules={[
-            createEngineAlertRuleStub("foo"),
-            createEngineAlertRuleStub("bar"),
-          ]}
-          engineId="test-engine-id"
-          notificationChannels={[]}
-          isLoading={false}
-          onAlertsUpdated={() => {}}
-          createAlertMutation={createEngineAlertMutation}
-          deleteAlert={deleteAlert}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="Loading">
-        <ManageEngineAlertsSectionUI
-          alertRules={[
-            createEngineAlertRuleStub("foo"),
-            createEngineAlertRuleStub("bar"),
-          ]}
-          engineId="test-engine-id"
-          notificationChannels={[]}
-          isLoading={true}
-          onAlertsUpdated={() => {}}
-          createAlertMutation={createEngineAlertMutation}
-          deleteAlert={deleteAlert}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="No Alert Rules">
-        <ManageEngineAlertsSectionUI
-          alertRules={[]}
-          engineId="test-engine-id"
-          notificationChannels={[]}
-          isLoading={false}
-          onAlertsUpdated={() => {}}
-          createAlertMutation={createEngineAlertMutation}
-          deleteAlert={deleteAlert}
-        />
-      </BadgeContainer>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
deleted file mode 100644
index 413dd0eb7c2..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.tsx
+++ /dev/null
@@ -1,387 +0,0 @@
-"use client";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import {
-  type CreateNotificationChannelInput,
-  type EngineAlertRule,
-  type EngineNotificationChannel,
-  useEngineCreateNotificationChannel,
-  useEngineDeleteNotificationChannel,
-  useEngineNotificationChannels,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { type UseMutationResult, useMutation } from "@tanstack/react-query";
-import { formatDate } from "date-fns";
-import { EllipsisVerticalIcon, PlusIcon } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import { EngineAlertDialogForm } from "./EngineAlertDialogForm";
-import { EngineDeleteAlertModal } from "./EngineDeleteAlertModal";
-
-type CreateAlertMutation = UseMutationResult<
-  EngineNotificationChannel,
-  unknown,
-  CreateNotificationChannelInput,
-  unknown
->;
-
-export function ManageEngineAlertsSection(props: {
-  teamIdOrSlug: string;
-  alertRules: EngineAlertRule[];
-  alertRulesIsLoading: boolean;
-  engineId: string;
-}) {
-  const notificationChannelsQuery = useEngineNotificationChannels(
-    props.engineId,
-    props.teamIdOrSlug,
-  );
-  const deleteAlertMutation = useEngineDeleteNotificationChannel(
-    props.engineId,
-    props.teamIdOrSlug,
-  );
-
-  const createAlertMutation = useEngineCreateNotificationChannel(
-    props.engineId,
-    props.teamIdOrSlug,
-  );
-
-  // not passing the mutation to avoid multiple rows sharing the same mutation state, we create the new mutation for each row instead in each component instead
-  async function deleteAlert(notificationChannelId: string) {
-    return deleteAlertMutation.mutate(notificationChannelId);
-  }
-
-  return (
-    <ManageEngineAlertsSectionUI
-      alertRules={props.alertRules}
-      engineId={props.engineId}
-      notificationChannels={notificationChannelsQuery.data ?? []}
-      isLoading={
-        notificationChannelsQuery.isLoading || props.alertRulesIsLoading
-      }
-      onAlertsUpdated={() => {
-        notificationChannelsQuery.refetch();
-      }}
-      createAlertMutation={createAlertMutation}
-      deleteAlert={deleteAlert}
-    />
-  );
-}
-
-export function ManageEngineAlertsSectionUI(props: {
-  alertRules: EngineAlertRule[];
-  engineId: string;
-  notificationChannels: EngineNotificationChannel[];
-  isLoading: boolean;
-  onAlertsUpdated: () => void;
-  createAlertMutation: CreateAlertMutation;
-  deleteAlert: (notificationChannelId: string) => Promise<void>;
-}) {
-  const {
-    engineId,
-    notificationChannels,
-    isLoading,
-    onAlertsUpdated,
-    createAlertMutation,
-    deleteAlert,
-  } = props;
-
-  return (
-    <section>
-      <div className="flex flex-col justify-between gap-4 lg:flex-row lg:gap-6">
-        <div>
-          <h2 className="mb-1 font-semibold text-2xl tracking-tight">
-            Manage Alerts
-          </h2>
-          <p className="text-muted-foreground">
-            Get notified when alerts are triggered on your Engine instance.
-          </p>
-        </div>
-
-        <CreateAlertButton
-          engineId={engineId}
-          alertRules={props.alertRules}
-          onSuccess={onAlertsUpdated}
-          createAlertMutation={createAlertMutation}
-        />
-      </div>
-
-      <div className="h-5" />
-
-      {notificationChannels.length === 0 || isLoading ? (
-        <div className="flex min-h-[200px] w-full items-center justify-center rounded-lg border border-border">
-          {isLoading ? <Spinner className="size-8" /> : "No alerts set up yet."}
-        </div>
-      ) : (
-        <EngineAlertsTableUI
-          engineId={engineId}
-          alertRules={props.alertRules}
-          notificationChannels={notificationChannels}
-          onAlertsUpdated={props.onAlertsUpdated}
-          deleteAlert={deleteAlert}
-        />
-      )}
-    </section>
-  );
-}
-
-function EngineAlertsTableUI(props: {
-  engineId: string;
-  alertRules: EngineAlertRule[];
-  notificationChannels: EngineNotificationChannel[];
-  onAlertsUpdated: () => void;
-  deleteAlert: (notificationChannelId: string) => Promise<void>;
-}) {
-  return (
-    <TableContainer>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Status</TableHead>
-            <TableHead>Alert Rule</TableHead>
-            <TableHead>Notification Type</TableHead>
-            <TableHead>Created At</TableHead>
-            <TableHead />
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {props.notificationChannels.map((notificationChannel) => {
-            const isPaused = notificationChannel.pausedAt !== null;
-
-            return (
-              <TableRow key={notificationChannel.id}>
-                <TableCell>
-                  <Badge
-                    variant={isPaused ? "warning" : "default"}
-                    className="text-sm"
-                  >
-                    {isPaused ? "Paused" : "Active"}
-                  </Badge>
-                </TableCell>
-
-                <TableCell>
-                  {getMatchingAlertRules(
-                    notificationChannel.subscriptionRoutes,
-                    props.alertRules,
-                  ).map((alertRule) => (
-                    <p key={alertRule.routingKey}>{alertRule.title}</p>
-                  ))}
-                </TableCell>
-
-                <TableCell>
-                  <Badge variant="outline" className="text-sm capitalize">
-                    {notificationChannel.type}
-                  </Badge>
-
-                  <CopyTextButton
-                    textToCopy={notificationChannel.value}
-                    textToShow={truncateValue(notificationChannel.value)}
-                    copyIconPosition="left"
-                    tooltip="Copy"
-                    variant="ghost"
-                    iconClassName="size-3"
-                    className="-translate-x-2 max-w-[250px] text-muted-foreground"
-                  />
-                </TableCell>
-
-                <TableCell className="text-muted-foreground">
-                  {formatDate(
-                    new Date(notificationChannel.createdAt),
-                    "MMM dd, yyyy",
-                  )}
-                </TableCell>
-
-                <TableCell className="text-muted-foreground">
-                  <AlertOptionsButton
-                    alertRules={props.alertRules}
-                    engineId={props.engineId}
-                    notificationChannel={notificationChannel}
-                    onDeleteSuccess={props.onAlertsUpdated}
-                    deleteAlert={props.deleteAlert}
-                  />
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-}
-
-function CreateAlertButton(props: {
-  engineId: string;
-  alertRules: EngineAlertRule[];
-  onSuccess: () => void;
-  createAlertMutation: CreateAlertMutation;
-}) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const { createAlertMutation } = props;
-
-  return (
-    <>
-      <ToolTipLabel
-        label={
-          props.alertRules.length === 0
-            ? "This feature is only available for managed Engines running v2.0.10 or later."
-            : undefined
-        }
-      >
-        <Button
-          onClick={() => {
-            setIsModalOpen(true);
-          }}
-          className="gap-2"
-          disabled={props.alertRules.length === 0}
-        >
-          <PlusIcon className="size-4" />
-          Add Alert
-        </Button>
-      </ToolTipLabel>
-
-      <EngineAlertDialogForm
-        alertRules={props.alertRules}
-        open={isModalOpen}
-        onOpenChange={setIsModalOpen}
-        title="Add Alert"
-        submitButton={{
-          label: "Add Alert",
-          isLoading: createAlertMutation.isPending,
-          onSubmit: (values) => {
-            const addPromise = createAlertMutation.mutateAsync(values);
-
-            toast.promise(addPromise, {
-              success: "Alert added successfully",
-              error: "Failed to add alert",
-            });
-
-            addPromise.then(() => {
-              setIsModalOpen(false);
-              props.onSuccess();
-            });
-          },
-        }}
-        values={null}
-      />
-    </>
-  );
-}
-
-function AlertOptionsButton(props: {
-  alertRules: EngineAlertRule[];
-  engineId: string;
-  notificationChannel: EngineNotificationChannel;
-  onDeleteSuccess: () => void;
-  deleteAlert: (notificationChannelId: string) => Promise<void>;
-}) {
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const deleteMutation = useMutation({
-    mutationFn: props.deleteAlert,
-  });
-
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button size="icon" variant="ghost">
-            <EllipsisVerticalIcon className="size-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="min-w-36">
-          <DropdownMenuItem
-            className="hover:!bg-destructive text-destructive-text"
-            onClick={() => {
-              setIsDeleteModalOpen(true);
-            }}
-          >
-            Delete
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <EngineDeleteAlertModal
-        isPending={deleteMutation.isPending}
-        onConfirm={() => {
-          const deletePromise = deleteMutation.mutateAsync(
-            props.notificationChannel.id,
-          );
-
-          toast.promise(deletePromise, {
-            success: "Alert Deleted Successfully",
-            error: "Failed To Delete Alert",
-          });
-          deletePromise.then(() => {
-            setIsDeleteModalOpen(false);
-            props.onDeleteSuccess();
-          });
-        }}
-        open={isDeleteModalOpen}
-        onOpenChange={setIsDeleteModalOpen}
-      />
-    </>
-  );
-}
-
-const getMatchingAlertRules = (
-  subscriptionRoutes: string[],
-  alertRules: EngineAlertRule[],
-): EngineAlertRule[] => {
-  const results: EngineAlertRule[] = [];
-
-  for (const alertRule of alertRules) {
-    for (const subscriptionRoute of subscriptionRoutes) {
-      if (isRoutingKeyMatch(subscriptionRoute, alertRule.routingKey)) {
-        results.push(alertRule);
-        break;
-      }
-    }
-  }
-
-  return results;
-};
-
-/**
- * Check if routingKey matches subscriptionRoute.
- *
- * Example: exact match
- *  `alert.stuck-nonce` matches `alert.stuck-nonce`
- *
- * Example: wildcard
- *  `alert.*` matches `alert.stuck-nonce`
- */
-const isRoutingKeyMatch = (
-  subscriptionRoute: string,
-  alertRoutingKey: string,
-): boolean => {
-  if (!subscriptionRoute.includes("*")) {
-    // Check exact match if no wildcard.
-    return subscriptionRoute === alertRoutingKey;
-  }
-
-  const [prefix, suffix] = subscriptionRoute.split("*");
-  if (prefix && !subscriptionRoute.startsWith(prefix)) return false;
-  if (suffix && !subscriptionRoute.endsWith(suffix)) return false;
-
-  return true;
-};
-
-const truncateValue = (str: string): string => {
-  if (str.length <= 16) return str;
-  return `${str.slice(0, 12)}...${str.slice(-4)}`;
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx
deleted file mode 100644
index ef81dfac92c..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  createEngineAlertRuleStub,
-  createEngineAlertStub,
-} from "stories/stubs";
-import { BadgeContainer } from "stories/utils";
-import { RecentEngineAlertsSectionUI } from "./RecentEngineAlerts";
-
-const meta = {
-  title: "Engine/Alerts/Recent Alerts",
-  component: Story,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-} satisfies Meta<typeof Story>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Variants: Story = {
-  args: {},
-};
-
-function Story() {
-  return (
-    <div className="container flex max-w-6xl flex-col gap-14 py-10">
-      <BadgeContainer label="3 Alerts">
-        <RecentEngineAlertsSectionUI
-          isLoading={false}
-          onAlertsUpdated={() => {}}
-          alertRules={[createEngineAlertRuleStub("foo")]}
-          alerts={[
-            createEngineAlertStub("foo"),
-            createEngineAlertStub("foo", {
-              status: "firing",
-            }),
-            createEngineAlertStub("foo", {
-              status: "resolved",
-            }),
-          ]}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="No Alerts">
-        <RecentEngineAlertsSectionUI
-          isLoading={false}
-          alertRules={[]}
-          alerts={[]}
-          onAlertsUpdated={() => {}}
-        />
-      </BadgeContainer>
-
-      <BadgeContainer label="Loading">
-        <RecentEngineAlertsSectionUI
-          isLoading={true}
-          alertRules={[]}
-          alerts={[]}
-          onAlertsUpdated={() => {}}
-        />
-      </BadgeContainer>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
deleted file mode 100644
index 30a9d0495c1..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-"use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Badge, type BadgeProps } from "@/components/ui/badge";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  type EngineAlert,
-  type EngineAlertRule,
-  useEngineAlerts,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { formatDistance } from "date-fns";
-import { useMemo } from "react";
-
-export function RecentEngineAlertsSection(props: {
-  alertRules: EngineAlertRule[];
-  alertRulesIsLoading: boolean;
-  engineId: string;
-  teamIdOrSlug: string;
-}) {
-  // TODO - pagination
-  // required : return the total number of alerts in response from API
-  const alertsQuery = useEngineAlerts(
-    props.engineId,
-    props.teamIdOrSlug,
-    100,
-    0,
-  );
-  const alerts = alertsQuery.data ?? [];
-
-  return (
-    <RecentEngineAlertsSectionUI
-      alertRules={props.alertRules}
-      alerts={alerts}
-      isLoading={alertsQuery.isLoading || props.alertRulesIsLoading}
-      onAlertsUpdated={() => {
-        alertsQuery.refetch();
-      }}
-    />
-  );
-}
-
-export function RecentEngineAlertsSectionUI(props: {
-  alertRules: EngineAlertRule[];
-  alerts: EngineAlert[];
-  isLoading: boolean;
-  onAlertsUpdated: () => void;
-}) {
-  const { alerts, isLoading } = props;
-  return (
-    <section>
-      <h2 className="mb-1 font-semibold text-2xl tracking-tight">
-        Recent Alerts
-      </h2>
-
-      <div className="h-2" />
-
-      {alerts.length === 0 || isLoading ? (
-        <div className="flex min-h-[200px] w-full items-center justify-center rounded-lg border border-border">
-          {isLoading ? <Spinner className="size-8" /> : "No alerts triggered."}
-        </div>
-      ) : (
-        <RecentEngineAlertsTableUI
-          alertRules={props.alertRules}
-          alerts={alerts}
-          onAlertsUpdated={props.onAlertsUpdated}
-        />
-      )}
-    </section>
-  );
-}
-
-function RecentEngineAlertsTableUI(props: {
-  alertRules: EngineAlertRule[];
-  alerts: EngineAlert[];
-  onAlertsUpdated: () => void;
-}) {
-  const alertRulesMap = useMemo(() => {
-    const map: Record<string, EngineAlertRule> = {};
-    for (const alertRule of props.alertRules) {
-      map[alertRule.id] = alertRule;
-    }
-    return map;
-  }, [props.alertRules]);
-
-  return (
-    <TableContainer>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Alert Trigger</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Timestamp</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {props.alerts.map((alert) => {
-            let variant: BadgeProps["variant"];
-            let status: string;
-            if (alert.status === "pending") {
-              variant = "warning";
-              status = "Pending";
-            } else if (alert.status === "firing") {
-              variant = "destructive";
-              status = "Triggered";
-            } else if (alert.status === "resolved") {
-              variant = "success";
-              status = "Resolved";
-            } else {
-              return null;
-            }
-
-            return (
-              <TableRow key={alert.id}>
-                <TableCell>{alertRulesMap[alert.alertRuleId]?.title}</TableCell>
-
-                <TableCell>
-                  <Badge variant={variant} className="text-sm">
-                    {status}
-                  </Badge>
-                </TableCell>
-
-                <TableCell className="text-muted-foreground">
-                  {formatDistance(
-                    new Date(alert.endsAt ?? alert.startsAt),
-                    new Date(),
-                    { addSuffix: true },
-                  )}
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/page.tsx
deleted file mode 100644
index 0a0329ac19a..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { EngineAlertsPage } from "./components/EngineAlertsPage";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return (
-    <EngineAlertsPage instance={instance} teamIdOrSlug={params.team_slug} />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/circle-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/circle-config.tsx
deleted file mode 100644
index 5e5b4f7df2d..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/circle-config.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import { Form } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import {
-  type EngineInstance,
-  type SetWalletConfigInput,
-  useEngineSetWalletConfig,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-
-interface CircleConfigProps {
-  instance: EngineInstance;
-  authToken: string;
-}
-
-export const CircleConfig: React.FC<CircleConfigProps> = ({
-  instance,
-  authToken,
-}) => {
-  const { mutate: setCircleConfig, isPending } = useEngineSetWalletConfig({
-    instanceUrl: instance.url,
-    authToken,
-  });
-  const trackEvent = useTrack();
-
-  const defaultValues: SetWalletConfigInput = {
-    type: "circle" as const,
-    circleApiKey: "",
-  };
-
-  const form = useForm<SetWalletConfigInput>({
-    defaultValues,
-    values: defaultValues,
-    resetOptions: {
-      keepDirty: true,
-      keepDirtyValues: true,
-    },
-  });
-
-  const onSubmit = (data: SetWalletConfigInput) => {
-    setCircleConfig(data, {
-      onSuccess: () => {
-        toast.success("Configuration set successfully");
-        trackEvent({
-          category: "engine",
-          action: "set-wallet-config",
-          type: "circle",
-          label: "success",
-        });
-      },
-      onError: (error) => {
-        toast.error("Failed to set configuration", {
-          description: error.message,
-        });
-        trackEvent({
-          category: "engine",
-          action: "set-wallet-config",
-          type: "circle",
-          label: "error",
-          error,
-        });
-      },
-    });
-  };
-
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-2">
-        <p className="text-muted-foreground">
-          Circle wallets require an API Key from your Circle account with
-          sufficient permissions. Created wallets are stored in your AWS
-          account. Configure your Circle API Key to use Circle wallets. Learn
-          more about{" "}
-          <TrackedLinkTW
-            href="https://portal.thirdweb.com/engine/features/backend-wallets#circle-wallet"
-            target="_blank"
-            label="learn-more"
-            category="engine"
-            className="text-link-foreground hover:text-foreground"
-          >
-            how to get an API Key
-          </TrackedLinkTW>
-          .
-        </p>
-      </div>
-
-      <Form {...form}>
-        <form
-          className="flex flex-col gap-4"
-          onSubmit={form.handleSubmit(onSubmit)}
-        >
-          <FormFieldSetup
-            label="Circle API Key"
-            errorMessage={
-              form.getFieldState("circleApiKey", form.formState).error?.message
-            }
-            htmlFor="circle-api-key"
-            isRequired
-            tooltip={null}
-          >
-            <Input
-              id="circle-api-key"
-              placeholder="TEST_API_KEY:..."
-              autoComplete="off"
-              type="password"
-              {...form.register("circleApiKey")}
-            />
-          </FormFieldSetup>
-
-          <div className="flex items-center justify-end gap-4">
-            <Button
-              type="submit"
-              className="min-w-28 gap-2"
-              disabled={isPending}
-            >
-              {isPending && <Spinner className="size-4" />}
-              Save
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/cors.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/cors.tsx
deleted file mode 100644
index 8aa3e324240..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/cors.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { InlineCode } from "@/components/ui/inline-code";
-import {
-  useEngineCorsConfiguration,
-  useEngineSetCorsConfiguration,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { Flex, Textarea } from "@chakra-ui/react";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { useForm } from "react-hook-form";
-import { Button, Heading, Text } from "tw-components";
-
-interface EngineCorsConfigProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-interface CorsForm {
-  raw: string;
-}
-
-export const EngineCorsConfig: React.FC<EngineCorsConfigProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const { data: existingUrls } = useEngineCorsConfiguration({
-    instanceUrl,
-    authToken,
-  });
-  const { mutateAsync: setCorsConfig } = useEngineSetCorsConfiguration({
-    instanceUrl,
-    authToken,
-  });
-
-  const { onSuccess, onError } = useTxNotifications(
-    "CORS URLs updated successfully.",
-    "Failed to update CORS URLs.",
-  );
-
-  const form = useForm<CorsForm>({
-    values: { raw: existingUrls?.join("\n") ?? "" },
-  });
-
-  const onSubmit = async (data: CorsForm) => {
-    try {
-      const urls = data.raw.split(/[\n,]/).filter((url) => !!url);
-      // Assert all URLs are well formed and strip the path.
-      const sanitized = urls.map(parseOriginFromUrl);
-
-      await setCorsConfig({ urls: sanitized });
-      onSuccess();
-    } catch (error) {
-      onError(error);
-    }
-  };
-
-  return (
-    <Flex
-      as="form"
-      flexDir="column"
-      gap={4}
-      onSubmit={form.handleSubmit(onSubmit)}
-    >
-      <Flex flexDir="column" gap={2}>
-        <Heading size="title.md">Allowlisted Domains</Heading>
-        <Text>
-          Specify the origins that can call Engine (
-          <InlineCode code="https://example.com" />
-          ).
-          <br />
-          Enter one origin per line, or leave this list empty to disallow calls
-          from web clients.
-        </Text>
-      </Flex>
-
-      <Textarea
-        placeholder={"https://example.com\nhttp://localhost:3000"}
-        rows={4}
-        {...form.register("raw")}
-      />
-
-      <Flex justifyContent="end" gap={4} alignItems="center">
-        <Button
-          isDisabled={!form.formState.isDirty}
-          colorScheme="primary"
-          w={{ base: "full", md: "inherit" }}
-          px={12}
-          type="submit"
-        >
-          {form.formState.isSubmitting ? "Saving..." : "Save"}
-        </Button>
-      </Flex>
-    </Flex>
-  );
-};
-
-const parseOriginFromUrl = (url: string) => {
-  try {
-    const { protocol, origin } = new URL(url);
-    if (!(protocol === "http:" || protocol === "https:")) {
-      throw new Error("Missing or invalid protocol");
-    }
-    return origin;
-  } catch {
-    throw new Error(`Invalid URL: "${url}"`);
-  }
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-configuration.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-configuration.tsx
deleted file mode 100644
index 8c64552a3be..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-configuration.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-"use client";
-
-import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
-import { EngineCorsConfig } from "./cors";
-import { EngineWalletConfig } from "./engine-wallet-config";
-import { EngineIpAllowlistConfig } from "./ip-allowlist";
-import { EngineSystem } from "./system";
-
-interface EngineConfigurationProps {
-  instance: EngineInstance;
-  teamSlug: string;
-  authToken: string;
-}
-
-export const EngineConfiguration: React.FC<EngineConfigurationProps> = ({
-  instance,
-  teamSlug,
-  authToken,
-}) => {
-  return (
-    <div className="flex flex-col gap-12">
-      <EngineWalletConfig
-        instance={instance}
-        teamSlug={teamSlug}
-        authToken={authToken}
-      />
-      <EngineCorsConfig instanceUrl={instance.url} authToken={authToken} />
-      <EngineIpAllowlistConfig
-        instanceUrl={instance.url}
-        authToken={authToken}
-      />
-      <EngineSystem instance={instance} teamIdOrSlug={teamSlug} />
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
deleted file mode 100644
index 8bb3431cf02..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { TabButtons } from "@/components/ui/tabs";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import {
-  type EngineInstance,
-  useEngineWalletConfig,
-  useHasEngineFeature,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  EngineBackendWalletOptions,
-  type EngineBackendWalletType,
-} from "lib/engine";
-import { CircleAlertIcon } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { Heading } from "tw-components";
-import { CircleConfig } from "./circle-config";
-import { KmsAwsConfig } from "./kms-aws-config";
-import { KmsGcpConfig } from "./kms-gcp-config";
-import { LocalConfig } from "./local-config";
-
-interface EngineWalletConfigProps {
-  instance: EngineInstance;
-  teamSlug: string;
-  authToken: string;
-}
-
-export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
-  instance,
-  teamSlug,
-  authToken,
-}) => {
-  const { data: walletConfig } = useEngineWalletConfig({
-    instanceUrl: instance.url,
-    authToken,
-  });
-
-  const { isSupported: isWalletCredentialsSupported } = useHasEngineFeature(
-    instance.url,
-    "WALLET_CREDENTIALS",
-  );
-
-  const filteredWalletOptions = EngineBackendWalletOptions.filter(
-    ({ key }) =>
-      // circle wallets were only added with the WALLET_CREDENTIALS feature flag
-      (key !== "circle" || isWalletCredentialsSupported) &&
-      // smart wallets don't need separate configuration
-      !key.startsWith("smart:"),
-  );
-
-  const tabContent: Partial<Record<EngineBackendWalletType, React.ReactNode>> =
-    {
-      local: <LocalConfig />,
-      "aws-kms": <KmsAwsConfig instance={instance} authToken={authToken} />,
-      "gcp-kms": <KmsGcpConfig instance={instance} authToken={authToken} />,
-      // circle wallets were only added with the WALLET_CREDENTIALS feature flag
-      ...(isWalletCredentialsSupported && {
-        circle: <CircleConfig instance={instance} authToken={authToken} />,
-      }),
-    } as const;
-
-  const [activeTab, setActiveTab] = useState<EngineBackendWalletType>("local");
-
-  const isAwsKmsConfigured = !!walletConfig?.awsAccessKeyId;
-  const isGcpKmsConfigured = !!walletConfig?.gcpKmsKeyRingId;
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Heading size="title.md">Backend Wallets</Heading>
-        <p className="text-muted-foreground">
-          Create backend wallets on the{" "}
-          <Link
-            href={`/team/${teamSlug}/~/engine/${instance.id}`}
-            className="text-link-foreground hover:text-foreground"
-          >
-            Overview
-          </Link>{" "}
-          tab. To use other wallet types, configure them below.
-        </p>
-      </div>
-
-      <TabButtons
-        tabs={filteredWalletOptions.map(({ key, name }) => ({
-          key,
-          name,
-          isActive: activeTab === key,
-          onClick: () => setActiveTab(key),
-          icon:
-            (key === "aws-kms" && !isAwsKmsConfigured) ||
-            (key === "gcp-kms" && !isGcpKmsConfigured)
-              ? ({ className }) => (
-                  <ToolTipLabel label="Not configured">
-                    <CircleAlertIcon className={cn(className, "size-4")} />
-                  </ToolTipLabel>
-                )
-              : undefined,
-        }))}
-        tabClassName="font-medium !text-sm"
-      />
-
-      {!isWalletCredentialsSupported && activeTab === "circle" && (
-        <Alert variant="warning" className="mt-4">
-          <CircleAlertIcon className="size-4" />
-          <AlertTitle>Update Required</AlertTitle>
-          <AlertDescription>
-            Circle wallet support requires a newer version of Engine. Please
-            update your Engine instance to use this feature.
-          </AlertDescription>
-        </Alert>
-      )}
-
-      {tabContent[activeTab]}
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/ip-allowlist.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
deleted file mode 100644
index 33b6086ea54..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { InlineCode } from "@/components/ui/inline-code";
-import {
-  useEngineIpAllowlistConfiguration,
-  useEngineSetIpAllowlistConfiguration,
-  useHasEngineFeature,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { Flex, Textarea } from "@chakra-ui/react";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { isValid } from "ipaddr.js";
-import { useForm } from "react-hook-form";
-import { Button, Heading, Text } from "tw-components";
-
-interface EngineIpAllowlistConfigProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-interface IpForm {
-  raw: string;
-}
-
-export const EngineIpAllowlistConfig: React.FC<
-  EngineIpAllowlistConfigProps
-> = ({ instanceUrl, authToken }) => {
-  const { data: existingIpAllowlist } = useEngineIpAllowlistConfiguration({
-    instanceUrl,
-    authToken,
-  });
-  const { mutateAsync: setIpAllowlist } = useEngineSetIpAllowlistConfiguration({
-    instanceUrl,
-    authToken,
-  });
-
-  const { onSuccess, onError } = useTxNotifications(
-    "IP Allowlist updated successfully.",
-    "Failed to update IP Allowlist",
-  );
-  const { isSupported } = useHasEngineFeature(instanceUrl, "IP_ALLOWLIST");
-
-  const form = useForm<IpForm>({
-    values: { raw: existingIpAllowlist?.join("\n") ?? "" },
-  });
-
-  const onSubmit = async (data: IpForm) => {
-    try {
-      const ips = data.raw
-        .split(/[\n,]/)
-        .filter((url) => !!url)
-        .map((ip) => ip.trim());
-
-      // Check if all IPs are well formed.
-      const incorrectIp = ips.find((ip) => !isValid(ip));
-
-      if (incorrectIp) {
-        throw new Error(`Invalid IP Address: ${incorrectIp}`);
-      }
-
-      await setIpAllowlist({ ips });
-      form.reset({
-        raw: ips.join("\n"),
-      });
-      onSuccess();
-    } catch (error) {
-      onError(error);
-    }
-  };
-
-  if (!isSupported) {
-    return null;
-  }
-
-  return (
-    <Flex
-      as="form"
-      flexDir="column"
-      gap={4}
-      onSubmit={form.handleSubmit(onSubmit)}
-    >
-      <Flex flexDir="column" gap={2}>
-        <Heading size="title.md">Allowlist IPs</Heading>
-        <Text>
-          Specify the IP Addresses that can call Engine (
-          <InlineCode code="8.8.8.8" />
-          ).
-          <br />
-          Enter a comma separated list of IPs, or one IP per line, or leave this
-          list empty to allow all IPs.
-          <br />
-          This does not affect Dashboard calls to Engine.
-        </Text>
-      </Flex>
-
-      <Textarea
-        placeholder={"8.8.8.8\nff06:0:0:0:0:0:0:c3"}
-        rows={4}
-        {...form.register("raw")}
-      />
-
-      <Flex justifyContent="end" gap={4} alignItems="center">
-        <Button
-          isDisabled={!form.formState.isDirty}
-          colorScheme="primary"
-          w={{ base: "full", md: "inherit" }}
-          px={12}
-          type="submit"
-        >
-          {form.formState.isSubmitting ? "Saving..." : "Save"}
-        </Button>
-      </Flex>
-    </Flex>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/kms-aws-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
deleted file mode 100644
index 3c13c819752..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import { Form, FormDescription } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import {
-  type EngineInstance,
-  type SetWalletConfigInput,
-  useEngineSetWalletConfig,
-  useEngineWalletConfig,
-  useHasEngineFeature,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { useForm } from "react-hook-form";
-
-interface KmsAwsConfigProps {
-  instance: EngineInstance;
-  authToken: string;
-}
-
-export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({
-  instance,
-  authToken,
-}) => {
-  const { mutate: setAwsKmsConfig, isPending } = useEngineSetWalletConfig({
-    instanceUrl: instance.url,
-    authToken,
-  });
-  const { data: awsConfig } = useEngineWalletConfig({
-    instanceUrl: instance.url,
-    authToken,
-  });
-  const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
-    instance.url,
-    "HETEROGENEOUS_WALLET_TYPES",
-  );
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Configuration set successfully.",
-    "Failed to set configuration.",
-  );
-
-  const defaultValues: SetWalletConfigInput = {
-    type: "aws-kms" as const,
-    awsAccessKeyId: awsConfig?.awsAccessKeyId ?? "",
-    awsSecretAccessKey: "",
-    awsRegion: awsConfig?.awsRegion ?? "",
-  };
-
-  const form = useForm<SetWalletConfigInput>({
-    defaultValues,
-    values: defaultValues,
-    resetOptions: {
-      keepDirty: true,
-      keepDirtyValues: true,
-    },
-  });
-
-  const onSubmit = (data: SetWalletConfigInput) => {
-    setAwsKmsConfig(data, {
-      onSuccess: () => {
-        onSuccess();
-        trackEvent({
-          category: "engine",
-          action: "set-wallet-config",
-          type: "aws-kms",
-          label: "success",
-        });
-      },
-      onError: (error) => {
-        onError(error);
-        trackEvent({
-          category: "engine",
-          action: "set-wallet-config",
-          type: "aws-kms",
-          label: "error",
-          error,
-        });
-      },
-    });
-  };
-
-  return (
-    <Form {...form}>
-      <form
-        className="flex flex-col gap-4"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <p className="text-muted-foreground">
-          AWS KMS wallets require credentials from your Amazon Web Services
-          account with sufficient permissions to manage KMS keys. Wallets are
-          stored in KMS keys on your AWS account.
-        </p>
-        <p className="text-muted-foreground">
-          For help and more advanced use cases,{" "}
-          <TrackedLinkTW
-            target="_blank"
-            href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
-            label="learn-more"
-            category="engine"
-            className="text-link-foreground hover:text-foreground"
-          >
-            learn more about using AWS KMS wallets
-          </TrackedLinkTW>
-          .
-        </p>
-
-        <div className="grid gap-4 md:grid-cols-2">
-          <FormFieldSetup
-            label="Region"
-            errorMessage={
-              form.getFieldState("awsRegion", form.formState).error?.message
-            }
-            htmlFor="aws-region"
-            isRequired
-            tooltip={null}
-          >
-            <Input
-              id="aws-region"
-              placeholder="us-west-2"
-              autoComplete="off"
-              type="text"
-              {...form.register("awsRegion")}
-            />
-          </FormFieldSetup>
-
-          <FormFieldSetup
-            label="Access Key"
-            errorMessage={
-              form.getFieldState("awsAccessKeyId", form.formState).error
-                ?.message
-            }
-            htmlFor="aws-access-key"
-            isRequired
-            tooltip={null}
-          >
-            <Input
-              id="aws-access-key"
-              placeholder="AKIA..."
-              autoComplete="off"
-              type="text"
-              {...form.register("awsAccessKeyId")}
-            />
-          </FormFieldSetup>
-
-          <FormFieldSetup
-            label="Secret Key"
-            errorMessage={
-              form.getFieldState("awsSecretAccessKey", form.formState).error
-                ?.message
-            }
-            htmlFor="aws-secret-key"
-            isRequired
-            tooltip={null}
-          >
-            <Input
-              id="aws-secret-key"
-              placeholder="UW7A..."
-              autoComplete="off"
-              type="text"
-              {...form.register("awsSecretAccessKey")}
-            />
-            <FormDescription className="pt-2">
-              This will not be shown again.
-            </FormDescription>
-          </FormFieldSetup>
-        </div>
-
-        <div className="flex items-center justify-end gap-4">
-          {!supportsMultipleWalletTypes && (
-            <p className="text-destructive-text text-sm">
-              This will clear other credentials.
-            </p>
-          )}
-          <Button type="submit" className="min-w-28 gap-2" disabled={isPending}>
-            {isPending && <Spinner className="size-4" />}
-            Save
-          </Button>
-        </div>
-      </form>
-    </Form>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
deleted file mode 100644
index a4411320217..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import { Form, FormDescription } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import {
-  type EngineInstance,
-  type SetWalletConfigInput,
-  useEngineSetWalletConfig,
-  useEngineWalletConfig,
-  useHasEngineFeature,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { useForm } from "react-hook-form";
-
-interface KmsGcpConfigProps {
-  instance: EngineInstance;
-  authToken: string;
-}
-
-export const KmsGcpConfig: React.FC<KmsGcpConfigProps> = ({
-  instance,
-  authToken,
-}) => {
-  const { mutate: setGcpKmsConfig, isPending } = useEngineSetWalletConfig({
-    instanceUrl: instance.url,
-    authToken,
-  });
-  const { data: gcpConfig } = useEngineWalletConfig({
-    instanceUrl: instance.url,
-    authToken,
-  });
-  const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
-    instance.url,
-    "HETEROGENEOUS_WALLET_TYPES",
-  );
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Configuration set successfully.",
-    "Failed to set configuration.",
-  );
-
-  const defaultValues: SetWalletConfigInput = {
-    type: "gcp-kms" as const,
-    gcpApplicationProjectId: gcpConfig?.gcpApplicationProjectId ?? "",
-    gcpKmsLocationId: gcpConfig?.gcpKmsLocationId ?? "",
-    gcpKmsKeyRingId: gcpConfig?.gcpKmsKeyRingId ?? "",
-    gcpApplicationCredentialEmail:
-      gcpConfig?.gcpApplicationCredentialEmail ?? "",
-    gcpApplicationCredentialPrivateKey: "",
-  };
-
-  const form = useForm<SetWalletConfigInput>({
-    defaultValues,
-    values: defaultValues,
-    resetOptions: {
-      keepDirty: true,
-      keepDirtyValues: true,
-    },
-  });
-
-  const onSubmit = (data: SetWalletConfigInput) => {
-    setGcpKmsConfig(data, {
-      onSuccess: () => {
-        onSuccess();
-        trackEvent({
-          category: "engine",
-          action: "set-wallet-config",
-          type: "gcp-kms",
-          label: "success",
-        });
-      },
-      onError: (error) => {
-        onError(error);
-        trackEvent({
-          category: "engine",
-          action: "set-wallet-config",
-          type: "gcp-kms",
-          label: "error",
-          error,
-        });
-      },
-    });
-  };
-
-  return (
-    <Form {...form}>
-      <form
-        className="flex flex-col gap-4"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <p className="text-muted-foreground">
-          GCP KMS wallets require credentials from your Google Cloud Platform
-          account with sufficient permissions to manage KMS keys. Wallets are
-          stored in KMS keys on your GCP account.
-        </p>
-        <p className="text-muted-foreground">
-          For help and more advanced use cases,{" "}
-          <TrackedLinkTW
-            target="_blank"
-            href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
-            label="learn-more"
-            category="engine"
-            className="text-link-foreground hover:text-foreground"
-          >
-            learn more about using Google Cloud KMS wallets
-          </TrackedLinkTW>
-          .
-        </p>
-
-        <div className="grid gap-4 md:grid-cols-2">
-          <FormFieldSetup
-            label="Location ID"
-            errorMessage={
-              form.getFieldState("gcpKmsLocationId", form.formState).error
-                ?.message
-            }
-            htmlFor="gcp-location-id"
-            isRequired
-            tooltip={null}
-          >
-            <Input
-              id="gcp-location-id"
-              placeholder="us-west2"
-              type="text"
-              {...form.register("gcpKmsLocationId")}
-            />
-          </FormFieldSetup>
-
-          <FormFieldSetup
-            label="Key Ring ID"
-            errorMessage={
-              form.getFieldState("gcpKmsKeyRingId", form.formState).error
-                ?.message
-            }
-            htmlFor="gcp-key-ring-id"
-            isRequired
-            tooltip={null}
-          >
-            <Input
-              id="gcp-key-ring-id"
-              placeholder="my-key-ring"
-              autoComplete="off"
-              type="text"
-              {...form.register("gcpKmsKeyRingId")}
-            />
-          </FormFieldSetup>
-
-          <FormFieldSetup
-            label="Project ID"
-            errorMessage={
-              form.getFieldState("gcpApplicationProjectId", form.formState)
-                .error?.message
-            }
-            htmlFor="gcp-project-id"
-            isRequired
-            tooltip={null}
-          >
-            <Input
-              id="gcp-project-id"
-              type="text"
-              placeholder="my-gcp-project-id-123"
-              autoComplete="off"
-              {...form.register("gcpApplicationProjectId")}
-            />
-          </FormFieldSetup>
-
-          <FormFieldSetup
-            label="Credential Email"
-            errorMessage={
-              form.getFieldState(
-                "gcpApplicationCredentialEmail",
-                form.formState,
-              ).error?.message
-            }
-            htmlFor="gcp-credential-email"
-            isRequired
-            tooltip={null}
-          >
-            <Input
-              id="gcp-credential-email"
-              type="text"
-              placeholder="service-account@my-gcp-project.iam.gserviceaccount.com"
-              autoComplete="off"
-              {...form.register("gcpApplicationCredentialEmail")}
-            />
-          </FormFieldSetup>
-        </div>
-
-        <FormFieldSetup
-          label="Private Key"
-          errorMessage={
-            form.getFieldState(
-              "gcpApplicationCredentialPrivateKey",
-              form.formState,
-            ).error?.message
-          }
-          htmlFor="gcp-private-key"
-          isRequired
-          tooltip={null}
-        >
-          <Textarea
-            id="gcp-private-key"
-            placeholder={
-              "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----"
-            }
-            autoComplete="off"
-            {...form.register("gcpApplicationCredentialPrivateKey")}
-          />
-          <FormDescription className="pt-2">
-            This will not be shown again.
-          </FormDescription>
-        </FormFieldSetup>
-
-        <div className="flex items-center justify-end gap-4">
-          {!supportsMultipleWalletTypes && (
-            <p className="text-destructive-text text-sm">
-              This will clear other credentials.
-            </p>
-          )}
-          <Button type="submit" className="min-w-28 gap-2" disabled={isPending}>
-            {isPending && <Spinner className="size-4" />}
-            Save
-          </Button>
-        </div>
-      </form>
-    </Form>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/local-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/local-config.tsx
deleted file mode 100644
index 2102e019e2d..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/local-config.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export const LocalConfig: React.FC = () => {
-  return (
-    <div className="flex flex-col gap-4">
-      <p className="text-muted-foreground">
-        Local wallets are natively supported with no configuration required.
-        Wallets are stored encrypted in Engine's database.
-      </p>
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/system.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/system.tsx
deleted file mode 100644
index b348ce335ac..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/system.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-  type EngineInstance,
-  useEngineSystemHealth,
-  useEngineSystemMetrics,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-
-interface EngineSystemProps {
-  instance: EngineInstance;
-  teamIdOrSlug: string;
-}
-
-export const EngineSystem: React.FC<EngineSystemProps> = ({
-  instance,
-  teamIdOrSlug,
-}) => {
-  const healthQuery = useEngineSystemHealth(instance.url);
-  const metricsQuery = useEngineSystemMetrics(instance.id, teamIdOrSlug);
-  if (!healthQuery.data) {
-    return null;
-  }
-
-  return (
-    <p className="gap-0 font-mono text-xs opacity-50">
-      Version: {healthQuery.data.engineVersion ?? "..."}
-      <br />
-      Enabled: {healthQuery.data.features?.join(", ")}
-      <br />
-      CPU: {metricsQuery.data?.result?.cpu?.toFixed(2) ?? "..."}%
-      <br />
-      Memory: {metricsQuery.data?.result?.memory?.toFixed(0) ?? "..."}MB
-    </p>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/page.tsx
deleted file mode 100644
index 4480cb06e27..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { EngineConfiguration } from "./components/engine-configuration";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return (
-    <EngineConfiguration
-      instance={instance}
-      teamSlug={params.team_slug}
-      authToken={authToken}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
deleted file mode 100644
index 690affcdb62..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/add-contract-subscription-button.tsx
+++ /dev/null
@@ -1,566 +0,0 @@
-"use client";
-
-import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
-import {
-  type AddContractSubscriptionInput,
-  useEngineAddContractSubscription,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContractAbi";
-import {
-  Collapse,
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Radio,
-  RadioGroup,
-  Spinner,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { useV5DashboardChain } from "lib/v5-adapter";
-import { CirclePlusIcon } from "lucide-react";
-import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
-import { type UseFormReturn, useForm } from "react-hook-form";
-import { getContract, isAddress } from "thirdweb";
-import {
-  Button,
-  Card,
-  FormErrorMessage,
-  FormHelperText,
-  FormLabel,
-  Text,
-} from "tw-components";
-
-interface AddContractSubscriptionButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const AddContractSubscriptionButton: React.FC<
-  AddContractSubscriptionButtonProps
-> = ({ instanceUrl, authToken }) => {
-  const disclosure = useDisclosure();
-
-  return (
-    <>
-      <Button
-        onClick={disclosure.onOpen}
-        variant="ghost"
-        size="sm"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        colorScheme="primary"
-        w="fit-content"
-      >
-        Add Contract Subscription
-      </Button>
-
-      {disclosure.isOpen && (
-        <AddModal
-          instanceUrl={instanceUrl}
-          disclosure={disclosure}
-          authToken={authToken}
-        />
-      )}
-    </>
-  );
-};
-
-interface AddContractSubscriptionForm {
-  chainId: number;
-  contractAddress: string;
-  webhookUrl: string;
-  processEventLogs: boolean;
-  filterEvents: string[];
-  processTransactionReceipts: boolean;
-  filterFunctions: string[];
-}
-
-const AddModal = ({
-  instanceUrl,
-  disclosure,
-  authToken,
-}: {
-  instanceUrl: string;
-  disclosure: UseDisclosureReturn;
-  authToken: string;
-}) => {
-  const { mutate: addContractSubscription } = useEngineAddContractSubscription({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Created Contract Subscription.",
-    "Failed to create Contract Subscription.",
-  );
-  const [modalState, setModalState] = useState<"inputContract" | "inputData">(
-    "inputContract",
-  );
-
-  const form = useForm<AddContractSubscriptionForm>({
-    defaultValues: {
-      chainId: 84532,
-      processEventLogs: true,
-      filterEvents: [],
-      processTransactionReceipts: false,
-      filterFunctions: [],
-    },
-    mode: "onChange",
-  });
-
-  const onSubmit = (data: AddContractSubscriptionForm) => {
-    const input: AddContractSubscriptionInput = {
-      chain: data.chainId.toString(),
-      contractAddress: data.contractAddress,
-      webhookUrl: data.webhookUrl.trim(),
-      processEventLogs: data.processEventLogs,
-      filterEvents: data.filterEvents,
-      processTransactionReceipts: data.processTransactionReceipts,
-      filterFunctions: data.filterFunctions,
-    };
-
-    addContractSubscription(input, {
-      onSuccess: () => {
-        onSuccess();
-        disclosure.onClose();
-        trackEvent({
-          category: "engine",
-          action: "add-contract-subscription",
-          label: "success",
-          instance: instanceUrl,
-        });
-      },
-      onError: (error) => {
-        onError(error);
-        trackEvent({
-          category: "engine",
-          action: "add-contract-subscription",
-          label: "error",
-          instance: instanceUrl,
-          error,
-        });
-      },
-    });
-  };
-
-  return (
-    <Modal
-      isOpen={disclosure.isOpen}
-      onClose={disclosure.onClose}
-      isCentered
-      size="lg"
-    >
-      <ModalOverlay />
-      <ModalContent
-        className="!bg-background rounded-lg border border-border"
-        as="form"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <ModalHeader>Add Contract Subscription</ModalHeader>
-        <ModalCloseButton />
-
-        {modalState === "inputContract" ? (
-          <ModalBodyInputContract form={form} setModalState={setModalState} />
-        ) : modalState === "inputData" ? (
-          <ModalBodyInputData form={form} setModalState={setModalState} />
-        ) : null}
-      </ModalContent>
-    </Modal>
-  );
-};
-
-const ModalBodyInputContract = ({
-  form,
-  setModalState,
-}: {
-  form: UseFormReturn<AddContractSubscriptionForm>;
-  setModalState: Dispatch<SetStateAction<"inputContract" | "inputData">>;
-}) => {
-  const client = useThirdwebClient();
-  return (
-    <>
-      <ModalBody>
-        <div className="flex flex-col gap-4">
-          <Text>
-            Add a contract subscription to process real-time onchain data.
-          </Text>
-
-          <FormControl isRequired>
-            <FormLabel>Chain</FormLabel>
-            <SingleNetworkSelector
-              chainId={form.watch("chainId")}
-              onChange={(val) => form.setValue("chainId", val)}
-              client={client}
-            />
-          </FormControl>
-
-          <FormControl
-            isRequired
-            isInvalid={
-              !!form.getFieldState("contractAddress", form.formState).error
-            }
-          >
-            <FormLabel>Contract Address</FormLabel>
-            <Input
-              type="text"
-              placeholder="0x..."
-              {...form.register("contractAddress", {
-                required: true,
-                validate: (v) => {
-                  const isValid = isAddress(v);
-                  return !isValid ? "Invalid address" : true;
-                },
-              })}
-            />
-            <FormErrorMessage>
-              {
-                form.getFieldState("contractAddress", form.formState).error
-                  ?.message
-              }
-            </FormErrorMessage>
-          </FormControl>
-
-          <FormControl
-            isRequired
-            isInvalid={!!form.getFieldState("webhookUrl", form.formState).error}
-          >
-            <FormLabel>Webhook URL</FormLabel>
-            <Input
-              type="url"
-              placeholder="https://"
-              {...form.register("webhookUrl", {
-                required: true,
-                validate: (v) => {
-                  try {
-                    new URL(v);
-                    return true;
-                  } catch {
-                    return "Invalid URL";
-                  }
-                },
-              })}
-            />
-            <FormHelperText>
-              Engine sends an HTTP request to your backend when new onchain data
-              for this contract is detected.
-            </FormHelperText>
-            <FormErrorMessage>
-              {form.getFieldState("webhookUrl", form.formState).error?.message}
-            </FormErrorMessage>
-          </FormControl>
-        </div>
-      </ModalBody>
-
-      <ModalFooter>
-        <Button
-          onClick={() => setModalState("inputData")}
-          colorScheme="primary"
-          isDisabled={!form.formState.isValid}
-        >
-          Next
-        </Button>
-      </ModalFooter>
-    </>
-  );
-};
-
-const ModalBodyInputData = ({
-  form,
-  setModalState,
-}: {
-  form: UseFormReturn<AddContractSubscriptionForm>;
-  setModalState: Dispatch<SetStateAction<"inputContract" | "inputData">>;
-}) => {
-  const processEventLogsDisclosure = useDisclosure({
-    defaultIsOpen: form.getValues("processEventLogs"),
-  });
-  const processTransactionReceiptsDisclosure = useDisclosure({
-    defaultIsOpen: form.getValues("processTransactionReceipts"),
-  });
-  const [shouldFilterEvents, setShouldFilterEvents] = useState(false);
-  const [shouldFilterFunctions, setShouldFilterFunctions] = useState(false);
-
-  const processEventLogs = form.watch("processEventLogs");
-  const filterEvents = form.watch("filterEvents");
-  const processTransactionReceipts = form.watch("processTransactionReceipts");
-  const filterFunctions = form.watch("filterFunctions");
-
-  // Invalid states:
-  // - Neither logs nor receipts are selected.
-  // - Logs are selected but filtering on 0 event names.
-  // - Receipts are selected but filtering on 0 function names.
-  const isInputDataFormInvalid =
-    (!processEventLogs && !processTransactionReceipts) ||
-    (processEventLogs && shouldFilterEvents && filterEvents.length === 0) ||
-    (processTransactionReceipts &&
-      shouldFilterFunctions &&
-      filterFunctions.length === 0);
-
-  return (
-    <>
-      <ModalBody>
-        <div className="flex flex-col gap-4">
-          <Text>
-            Select the data type to process.
-            <br />
-            Events logs are arbitrary data triggered by a smart contract call.
-            <br />
-            Transaction receipts contain details about the blockchain execution.
-          </Text>
-
-          <FormControl>
-            <FormLabel>Processed Data</FormLabel>
-
-            <div className="flex flex-col gap-2">
-              <CheckboxWithLabel>
-                <Checkbox
-                  checked={form.watch("processEventLogs")}
-                  onCheckedChange={(val) => {
-                    const checked = !!val;
-                    form.setValue("processEventLogs", checked);
-                    if (checked) {
-                      processEventLogsDisclosure.onOpen();
-                    } else {
-                      processEventLogsDisclosure.onClose();
-                    }
-                  }}
-                />
-                <span>Event Logs</span>
-              </CheckboxWithLabel>
-              {/* Shows all/specific events if processing event logs */}
-              <Collapse in={processEventLogsDisclosure.isOpen}>
-                <div className="flex flex-col gap-2 px-4">
-                  <RadioGroup
-                    defaultValue="false"
-                    onChange={(val: "false" | "true") => {
-                      if (val === "true") {
-                        setShouldFilterEvents(true);
-                      } else {
-                        setShouldFilterEvents(false);
-                        form.setValue("filterEvents", []);
-                      }
-                    }}
-                  >
-                    <div className="flex flex-col gap-2">
-                      <Radio value="false">
-                        <Text>All events</Text>
-                      </Radio>
-                      <Radio value="true">
-                        <Text>
-                          Specific events{" "}
-                          {!!filterEvents.length &&
-                            `(${filterEvents.length} selected)`}
-                        </Text>
-                      </Radio>
-                      {/* List event names to select */}
-                      <Collapse in={shouldFilterEvents}>
-                        <FilterSelector
-                          abiItemType="event"
-                          form={form}
-                          filter={filterEvents}
-                          setFilter={(value) =>
-                            form.setValue("filterEvents", value)
-                          }
-                        />
-                      </Collapse>
-                    </div>
-                  </RadioGroup>
-                </div>
-              </Collapse>
-
-              <CheckboxWithLabel>
-                <Checkbox
-                  checked={form.watch("processTransactionReceipts")}
-                  onCheckedChange={(val) => {
-                    const checked = !!val;
-                    form.setValue("processTransactionReceipts", checked);
-                    if (checked) {
-                      processTransactionReceiptsDisclosure.onOpen();
-                    } else {
-                      processTransactionReceiptsDisclosure.onClose();
-                    }
-                  }}
-                />
-                <span>Transaction Receipts</span>
-              </CheckboxWithLabel>
-              {/* Shows all/specific functions if processing transaction receipts */}
-              <Collapse in={processTransactionReceiptsDisclosure.isOpen}>
-                <div className="flex flex-col gap-2 px-4">
-                  <RadioGroup
-                    defaultValue="false"
-                    onChange={(val: "false" | "true") => {
-                      if (val === "true") {
-                        setShouldFilterFunctions(true);
-                      } else {
-                        setShouldFilterFunctions(false);
-                        form.setValue("filterFunctions", []);
-                      }
-                    }}
-                  >
-                    <div className="flex flex-col gap-2">
-                      <Radio value="false">
-                        <Text>All functions</Text>
-                      </Radio>
-                      <Radio value="true">
-                        <Text>
-                          Specific functions{" "}
-                          {!!filterFunctions.length &&
-                            `(${filterFunctions.length} selected)`}
-                        </Text>
-                      </Radio>
-                      {/* List function names to select */}
-                      <Collapse in={shouldFilterFunctions}>
-                        <FilterSelector
-                          abiItemType="function"
-                          form={form}
-                          filter={filterFunctions}
-                          setFilter={(value) =>
-                            form.setValue("filterFunctions", value)
-                          }
-                        />
-                      </Collapse>
-                    </div>
-                  </RadioGroup>
-                </div>
-              </Collapse>
-            </div>
-          </FormControl>
-        </div>
-      </ModalBody>
-
-      <ModalFooter as={Flex} gap={3}>
-        <Button
-          type="button"
-          onClick={() => setModalState("inputContract")}
-          variant="ghost"
-        >
-          Back
-        </Button>
-        <Button
-          type="submit"
-          colorScheme="primary"
-          isDisabled={isInputDataFormInvalid}
-        >
-          Add
-        </Button>
-      </ModalFooter>
-    </>
-  );
-};
-
-const FilterSelector = ({
-  abiItemType,
-  form,
-  filter,
-  setFilter,
-}: {
-  abiItemType: "function" | "event";
-
-  form: UseFormReturn<AddContractSubscriptionForm>;
-  filter: string[];
-  setFilter: (value: string[]) => void;
-}) => {
-  const client = useThirdwebClient();
-  const chain = useV5DashboardChain(form.getValues("chainId"));
-  const address = form.getValues("contractAddress");
-  const contract = useMemo(
-    () =>
-      chain
-        ? getContract({
-            address,
-            chain,
-            client,
-          })
-        : undefined,
-    [chain, client, address],
-  );
-
-  const abiQuery = useResolveContractAbi(contract);
-
-  const abiItems = useMemo(() => {
-    if (!abiQuery.data) {
-      return {
-        readFunctions: [],
-        writeFunctions: [],
-        events: [],
-      };
-    }
-    const readFunctions: string[] = [];
-    const writeFunctions: string[] = [];
-    const events: string[] = [];
-    for (const abiItem of abiQuery.data) {
-      if (abiItem.type === "function") {
-        if (
-          abiItem.stateMutability === "pure" ||
-          abiItem.stateMutability === "view"
-        ) {
-          readFunctions.push(abiItem.name);
-        } else {
-          writeFunctions.push(abiItem.name);
-        }
-      } else if (abiItem.type === "event") {
-        events.push(abiItem.name);
-      }
-    }
-    return {
-      readFunctions: [...new Set(readFunctions)].sort(),
-      writeFunctions: [...new Set(writeFunctions)].sort(),
-      events: [...new Set(events)].sort(),
-    };
-  }, [abiQuery.data]);
-
-  const filterNames = useMemo(() => {
-    switch (abiItemType) {
-      case "function": {
-        return abiItems.writeFunctions;
-      }
-      case "event": {
-        return abiItems.events;
-      }
-      default: {
-        return [];
-      }
-    }
-  }, [abiItemType, abiItems.events, abiItems.writeFunctions]);
-
-  return (
-    <Card>
-      {abiQuery.isPending ? (
-        <Spinner size="sm" />
-      ) : filterNames.length === 0 ? (
-        <Text>
-          Cannot resolve the contract definition. Filters are unavailable.
-        </Text>
-      ) : (
-        <div className="flex max-h-[300px] flex-col gap-2 overflow-y-auto">
-          {filterNames.map((name) => (
-            <CheckboxWithLabel key={name}>
-              <Checkbox
-                checked={filter.includes(name)}
-                onCheckedChange={(val) => {
-                  if (val) {
-                    setFilter([...filter, name]);
-                  } else {
-                    setFilter(filter.filter((item) => item !== name));
-                  }
-                }}
-              />
-              <span>{name}</span>
-            </CheckboxWithLabel>
-          ))}
-        </div>
-      )}
-    </Card>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
deleted file mode 100644
index 8afde003a7b..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/contract-subscriptions-table.tsx
+++ /dev/null
@@ -1,470 +0,0 @@
-"use client";
-
-import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
-import {
-  type EngineContractSubscription,
-  useEngineRemoveContractSubscription,
-  useEngineSubscriptionsLastBlock,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Tooltip,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { createColumnHelper } from "@tanstack/react-table";
-import { ChainIconClient } from "components/icons/ChainIcon";
-import { TWTable } from "components/shared/TWTable";
-import { format } from "date-fns";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useAllChainsData } from "hooks/chains/allChains";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { useV5DashboardChain } from "lib/v5-adapter";
-import { InfoIcon, Trash2Icon } from "lucide-react";
-import { useState } from "react";
-import type { ThirdwebClient } from "thirdweb";
-import { eth_getBlockByNumber, getRpcClient } from "thirdweb";
-import { shortenAddress as shortenAddressThrows } from "thirdweb/utils";
-import { Button, Card, FormLabel, LinkButton, Text } from "tw-components";
-
-function shortenAddress(address: string) {
-  if (!address) {
-    return "";
-  }
-
-  try {
-    return shortenAddressThrows(address);
-  } catch {
-    return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
-  }
-}
-
-interface ContractSubscriptionTableProps {
-  instanceUrl: string;
-  contractSubscriptions: EngineContractSubscription[];
-  isPending: boolean;
-  isFetched: boolean;
-  autoUpdate: boolean;
-  authToken: string;
-  client: ThirdwebClient;
-}
-
-const columnHelper = createColumnHelper<EngineContractSubscription>();
-
-export const ContractSubscriptionTable: React.FC<
-  ContractSubscriptionTableProps
-> = ({
-  instanceUrl,
-  contractSubscriptions,
-  isPending,
-  isFetched,
-  autoUpdate,
-  authToken,
-  client,
-}) => {
-  const removeDisclosure = useDisclosure();
-  const [selectedContractSub, setSelectedContractSub] =
-    useState<EngineContractSubscription>();
-  const { idToChain } = useAllChainsData();
-
-  const columns = [
-    columnHelper.accessor("chainId", {
-      header: "Chain",
-      cell: (cell) => {
-        const chain = idToChain.get(cell.getValue());
-        return (
-          <Flex align="center" gap={2}>
-            <ChainIconClient
-              className="size-3"
-              src={chain?.icon?.url}
-              client={client}
-            />
-            <Text>{chain?.name ?? "N/A"}</Text>
-          </Flex>
-        );
-      },
-    }),
-    columnHelper.accessor("contractAddress", {
-      header: "Contract Address",
-      cell: (cell) => {
-        const { chainId } = cell.row.original;
-        const chain = idToChain.get(chainId);
-        const explorer = chain?.explorers?.[0];
-        if (!explorer) {
-          return (
-            <CopyAddressButton
-              address={cell.getValue()}
-              copyIconPosition="right"
-            />
-          );
-        }
-        return (
-          <LinkButton
-            variant="ghost"
-            isExternal
-            size="xs"
-            href={explorer ? `${explorer.url}/address/${cell.getValue()}` : "#"}
-            fontFamily="mono"
-          >
-            {shortenAddress(cell.getValue())}
-          </LinkButton>
-        );
-      },
-    }),
-    columnHelper.accessor("webhook", {
-      header: "Webhook URL",
-      cell: (cell) => {
-        const webhook = cell.getValue();
-        const url = webhook?.url ?? "";
-
-        return (
-          <Text maxW={200} whiteSpace="normal" noOfLines={3}>
-            {url}
-          </Text>
-        );
-      },
-    }),
-    columnHelper.accessor("processEventLogs", {
-      header: "Filters",
-      cell: (cell) => {
-        const {
-          processEventLogs,
-          filterEvents,
-          processTransactionReceipts,
-          filterFunctions,
-        } = cell.row.original;
-
-        return (
-          <Flex flexDirection="column">
-            {/* Show logs + events */}
-            {processEventLogs && (
-              <Flex gap={1}>
-                <Text>Logs:</Text>
-                {filterEvents.length === 0 ? (
-                  <Text>All</Text>
-                ) : (
-                  <Tooltip
-                    p={0}
-                    label={
-                      <div className="flex flex-col gap-2 p-2 text-sm">
-                        {filterEvents.map((name) => (
-                          <Text key={name}>{name}</Text>
-                        ))}
-                      </div>
-                    }
-                    bgColor="backgroundCardHighlight"
-                    borderRadius="lg"
-                    shouldWrapChildren
-                  >
-                    <Text textDecoration="underline dotted">
-                      {filterEvents.length} events
-                    </Text>
-                  </Tooltip>
-                )}
-              </Flex>
-            )}
-
-            {/* Show receipts + functions */}
-            {processTransactionReceipts && (
-              <Flex gap={1}>
-                <Text>Receipts:</Text>
-                {filterFunctions.length === 0 ? (
-                  <Text>All</Text>
-                ) : (
-                  <Tooltip
-                    p={0}
-                    label={
-                      <div className="flex flex-col gap-2 p-2 text-sm">
-                        {filterFunctions.map((name) => (
-                          <Text key={name}>{name}</Text>
-                        ))}
-                      </div>
-                    }
-                    bgColor="backgroundCardHighlight"
-                    borderRadius="lg"
-                    shouldWrapChildren
-                  >
-                    <Text textDecoration="underline dotted">
-                      {filterFunctions.length} functions
-                    </Text>
-                  </Tooltip>
-                )}
-              </Flex>
-            )}
-          </Flex>
-        );
-      },
-    }),
-    columnHelper.accessor("lastIndexedBlock", {
-      header: "Latest Block",
-      cell: (cell) => {
-        const { chainId } = cell.row.original;
-        return (
-          <ChainLastBlock
-            instanceUrl={instanceUrl}
-            chainId={chainId}
-            autoUpdate={autoUpdate}
-            authToken={authToken}
-          />
-        );
-      },
-    }),
-  ];
-
-  return (
-    <>
-      <TWTable
-        title="contract subscriptions"
-        data={contractSubscriptions}
-        columns={columns}
-        isPending={isPending}
-        isFetched={isFetched}
-        onMenuClick={[
-          {
-            icon: <Trash2Icon className="size-4" />,
-            text: "Remove",
-            onClick: (contractSub) => {
-              setSelectedContractSub(contractSub);
-              removeDisclosure.onOpen();
-            },
-            isDestructive: true,
-          },
-        ]}
-      />
-
-      {selectedContractSub && removeDisclosure.isOpen && (
-        <RemoveModal
-          contractSubscription={selectedContractSub}
-          disclosure={removeDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-          client={client}
-        />
-      )}
-    </>
-  );
-};
-
-const ChainLastBlockTimestamp = ({
-  chainId,
-  blockNumber,
-}: {
-  chainId: number;
-  blockNumber: bigint;
-}) => {
-  const client = useThirdwebClient();
-  const chain = useV5DashboardChain(chainId);
-  // Get the block timestamp to display how delayed the last processed block is.
-  const ethBlockQuery = useQuery({
-    queryKey: ["block_timestamp", chainId, Number(blockNumber)],
-    // keep the previous data while fetching new data
-    placeholderData: keepPreviousData,
-    queryFn: async () => {
-      const rpcRequest = getRpcClient({
-        client,
-        chain,
-      });
-      const block = await eth_getBlockByNumber(rpcRequest, {
-        blockNumber,
-        includeTransactions: false,
-      });
-      return new Date(Number(block.timestamp) * 1000);
-    },
-  });
-
-  if (!ethBlockQuery.data) {
-    return null;
-  }
-
-  return (
-    <Card bgColor="backgroundHighlight">
-      <Text>{format(ethBlockQuery.data, "PP pp z")}</Text>
-    </Card>
-  );
-};
-
-const ChainLastBlock = ({
-  instanceUrl,
-  chainId,
-  autoUpdate,
-  authToken,
-}: {
-  instanceUrl: string;
-  chainId: number;
-  autoUpdate: boolean;
-  authToken: string;
-}) => {
-  const lastBlockQuery = useEngineSubscriptionsLastBlock({
-    instanceUrl,
-    chainId,
-    autoUpdate,
-    authToken,
-  });
-  if (!lastBlockQuery.data) {
-    return null;
-  }
-
-  return (
-    <Flex gap={2} align="center">
-      <Text>{lastBlockQuery.data}</Text>
-      <Tooltip
-        borderRadius="md"
-        bg="transparent"
-        boxShadow="none"
-        label={
-          <ChainLastBlockTimestamp
-            chainId={chainId}
-            blockNumber={BigInt(lastBlockQuery.data)}
-          />
-        }
-        shouldWrapChildren
-        placement="auto"
-      >
-        <InfoIcon className="size-4" />
-      </Tooltip>
-    </Flex>
-  );
-};
-
-const RemoveModal = ({
-  contractSubscription,
-  disclosure,
-  instanceUrl,
-  authToken,
-  client,
-}: {
-  contractSubscription: EngineContractSubscription;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-  client: ThirdwebClient;
-}) => {
-  const { mutate: removeContractSubscription } =
-    useEngineRemoveContractSubscription({
-      instanceUrl,
-      authToken,
-    });
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully removed contract subscription.",
-    "Failed to remove contract subscription.",
-  );
-  const { idToChain } = useAllChainsData();
-  const chain = idToChain.get(contractSubscription.chainId);
-
-  const onClick = () => {
-    removeContractSubscription(
-      {
-        contractSubscriptionId: contractSubscription.id,
-      },
-      {
-        onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "remove-contract-subscription",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          onError(error);
-          trackEvent({
-            category: "engine",
-            action: "remove-contract-subscription",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Remove Contract Subscription</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>
-              This action will delete all stored data for this contract
-              subscription.
-            </Text>
-
-            <Card as={Flex} flexDir="column" gap={4}>
-              <FormControl>
-                <FormLabel>Chain</FormLabel>
-                <Flex align="center" gap={2}>
-                  <ChainIconClient
-                    className="size-3"
-                    src={chain?.icon?.url}
-                    client={client}
-                  />
-                  <Text>{chain?.name ?? "N/A"}</Text>
-                </Flex>
-              </FormControl>
-
-              <FormControl>
-                <FormLabel>Contract Address</FormLabel>
-                <Text fontFamily="mono">
-                  {contractSubscription.contractAddress}
-                </Text>
-              </FormControl>
-
-              <FormControl>
-                <FormLabel>Webhook</FormLabel>
-                {contractSubscription.webhook ? (
-                  <Text>{contractSubscription.webhook.url}</Text>
-                ) : (
-                  <Text fontStyle="italic">N/A</Text>
-                )}
-              </FormControl>
-
-              <FormControl>
-                <FormLabel>Filters</FormLabel>
-                {contractSubscription.processEventLogs && (
-                  <Text>
-                    Logs:{" "}
-                    {contractSubscription.filterEvents.length === 0
-                      ? "All"
-                      : contractSubscription.filterEvents.join(", ")}
-                  </Text>
-                )}
-                {contractSubscription.processTransactionReceipts && (
-                  <Text>
-                    Receipts:{" "}
-                    {contractSubscription.filterFunctions.length === 0
-                      ? "All"
-                      : contractSubscription.filterFunctions.join(", ")}
-                  </Text>
-                )}
-              </FormControl>
-            </Card>
-          </div>
-        </ModalBody>
-        <ModalFooter as={Flex} gap={3}>
-          <Button type="button" onClick={disclosure.onClose} variant="ghost">
-            Cancel
-          </Button>
-          <Button type="submit" colorScheme="red" onClick={onClick}>
-            Remove
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
deleted file mode 100644
index bc726d53f97..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/components/engine-contract-subscription.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-"use client";
-
-import { useThirdwebClient } from "@/constants/thirdweb.client";
-import { useEngineContractSubscription } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Flex, FormControl, Switch } from "@chakra-ui/react";
-import { useState } from "react";
-import { FormLabel, Heading, Text, TrackedLink } from "tw-components";
-import { AddContractSubscriptionButton } from "./add-contract-subscription-button";
-import { ContractSubscriptionTable } from "./contract-subscriptions-table";
-
-interface EngineContractSubscriptionsProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const EngineContractSubscriptions: React.FC<
-  EngineContractSubscriptionsProps
-> = ({ instanceUrl, authToken }) => {
-  const [autoUpdate, setAutoUpdate] = useState<boolean>(true);
-  const client = useThirdwebClient();
-  const contractSubscriptionsQuery = useEngineContractSubscription({
-    instanceUrl,
-    authToken,
-  });
-
-  return (
-    <Flex flexDir="column" gap={4}>
-      <Flex flexDir="row" gap={2} justify="space-between">
-        <Flex flexDir="column" gap={2}>
-          <Heading size="title.md">Contract Subscriptions</Heading>
-          <Text>
-            Subscribe to event logs and transaction receipts on any contract.{" "}
-            <TrackedLink
-              href="https://portal.thirdweb.com/engine/features/contract-subscriptions"
-              color="primary.500"
-              isExternal
-              category="engine"
-              label="learn-more-contract-subscriptions"
-            >
-              Learn more about contract subscriptions
-            </TrackedLink>
-            .
-          </Text>
-        </Flex>
-        <div className="flex flex-row">
-          <FormControl display="flex" alignItems="center">
-            <FormLabel htmlFor="auto-update" mb="0">
-              Auto-Update
-            </FormLabel>
-            <Switch
-              isChecked={autoUpdate}
-              onChange={() => setAutoUpdate((val) => !val)}
-              id="auto-update"
-            />
-          </FormControl>
-        </div>
-      </Flex>
-      <ContractSubscriptionTable
-        instanceUrl={instanceUrl}
-        contractSubscriptions={contractSubscriptionsQuery.data ?? []}
-        isPending={contractSubscriptionsQuery.isPending}
-        isFetched={contractSubscriptionsQuery.isFetched}
-        autoUpdate={autoUpdate}
-        authToken={authToken}
-        client={client}
-      />
-      <AddContractSubscriptionButton
-        instanceUrl={instanceUrl}
-        authToken={authToken}
-      />
-    </Flex>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/page.tsx
deleted file mode 100644
index 0e41b54826c..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/contract-subscriptions/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { EngineContractSubscriptions } from "./components/engine-contract-subscription";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return (
-    <EngineContractSubscriptions
-      instanceUrl={instance.url}
-      authToken={authToken}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/components/engine-explorer.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/components/engine-explorer.tsx
deleted file mode 100644
index 8aedece201b..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/components/engine-explorer.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
-import "./swagger-ui.css";
-import "swagger-ui-react/swagger-ui.css";
-import dynamic from "next/dynamic";
-
-const SwaggerUI = dynamic(() => import("swagger-ui-react"), { ssr: false });
-
-interface EngineExplorerProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const EngineExplorer: React.FC<EngineExplorerProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  return (
-    <ClientOnly ssr={null}>
-      <div className="dark rounded-lg border border-border bg-background py-10 pt-4">
-        <SwaggerUI
-          url={`${instanceUrl}${instanceUrl.endsWith("/") ? "" : "/"}json`}
-          docExpansion="none"
-          persistAuthorization={true}
-          requestInterceptor={(req) => {
-            req.headers.Authorization = `Bearer ${authToken}`;
-            // This is required to skip the browser warning when using ngrok
-            // else, Engine -> Explorer doesn't work
-            // more info: https://ngrok.com/abuse
-            req.headers["ngrok-skip-browser-warning"] = "true";
-            return req;
-          }}
-        />
-      </div>
-    </ClientOnly>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/components/swagger-ui.css b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/components/swagger-ui.css
deleted file mode 100644
index 7056aa50e6b..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/components/swagger-ui.css
+++ /dev/null
@@ -1,1759 +0,0 @@
-.swagger-ui html {
-  box-sizing: border-box !important;
-}
-
-.swagger-ui *,
-.swagger-ui :after,
-.swagger-ui :before {
-  box-sizing: inherit !important;
-}
-
-.swagger-ui {
-  color: #fff !important;
-}
-
-.swagger-ui body {
-  margin: 0 !important;
-  background: #0e0e10 !important;
-}
-
-.swagger-ui .wrapper {
-  width: 100% !important;
-  max-width: 1460px !important;
-  margin: 0 auto !important;
-  padding: 0 20px !important;
-}
-
-.swagger-ui .opblock-tag-section {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-box-direction: normal !important;
-  -ms-flex-direction: column !important;
-  flex-direction: column !important;
-}
-
-.swagger-ui .opblock-tag {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  padding: 10px 10px 10px 10px !important;
-  cursor: pointer !important;
-  -webkit-transition: all 0.2s !important;
-  transition: all 0.2s !important;
-  border-bottom: 1px solid #272b30 !important;
-  -webkit-box-align: center !important;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-}
-
-.swagger-ui .opblock-tag:hover {
-  background: rgba(0, 0, 0, 0.02) !important;
-}
-
-.swagger-ui .opblock-tag {
-  font-size: 24px !important;
-  margin: 0 0 5px !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #5189f8 !important;
-}
-
-.swagger-ui .opblock-tag.no-desc span {
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-}
-
-.swagger-ui .opblock-tag svg {
-  -webkit-transition: all 0.4s !important;
-  transition: all 0.4s !important;
-}
-
-.swagger-ui .opblock-tag small {
-  font-size: 14px !important;
-  font-weight: 400 !important;
-  padding: 0 10px !important;
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .parаmeter__type {
-  font-size: 12px !important;
-  padding: 5px 0 !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui .view-line-link {
-  position: relative !important;
-  top: 3px !important;
-  width: 20px !important;
-  margin: 0 5px !important;
-  cursor: pointer !important;
-  -webkit-transition: all 0.5s !important;
-  transition: all 0.5s !important;
-}
-
-.swagger-ui .opblock {
-  margin: 0 0 15px !important;
-  border: 1px solid #0e0e10 !important;
-  border-radius: 4px !important;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.19) !important;
-}
-
-.swagger-ui .opblock.is-open .opblock-summary {
-  border-bottom: 1px solid #0e0e10 !important;
-}
-
-.swagger-ui .opblock .opblock-section-header {
-  padding: 8px 20px !important;
-  background: hsla(0, 0%, 100%, 0.8) !important;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
-}
-
-.swagger-ui .opblock .opblock-section-header,
-.swagger-ui .opblock .opblock-section-header label {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  -webkit-box-align: center !important;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-  background: #0e0e10 !important;
-}
-
-.swagger-ui .opblock .opblock-section-header label {
-  font-size: 12px !important;
-  font-weight: 700 !important;
-  margin: 0 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .opblock .opblock-section-header label span {
-  padding: 0 10px 0 0 !important;
-}
-
-.swagger-ui .opblock .opblock-section-header h4 {
-  font-size: 14px !important;
-  margin: 0 !important;
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .opblock .opblock-summary-method {
-  font-size: 14px !important;
-  font-weight: 700 !important;
-  min-width: 80px !important;
-  padding: 6px 15px !important;
-  text-align: center !important;
-  border-radius: 3px !important;
-  background: #0e0e10 !important;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .opblock .opblock-summary-path,
-.swagger-ui .opblock .opblock-summary-path__deprecated {
-  font-size: 16px !important;
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  padding: 0 10px !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fafbfc !important;
-  -webkit-box-align: center !important;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-}
-
-.swagger-ui .opblock .opblock-summary-path .view-line-link,
-.swagger-ui .opblock .opblock-summary-path__deprecated .view-line-link {
-  position: relative !important;
-  top: 2px !important;
-  width: 0 !important;
-  margin: 0 !important;
-  cursor: pointer !important;
-  -webkit-transition: all 0.5s !important;
-  transition: all 0.5s !important;
-}
-
-.swagger-ui .opblock .opblock-summary-path:hover .view-line-link,
-.swagger-ui .opblock .opblock-summary-path__deprecated:hover .view-line-link {
-  width: 18px !important;
-  margin: 0 5px !important;
-}
-
-.swagger-ui .opblock .opblock-summary-path__deprecated {
-  text-decoration: line-through !important;
-}
-
-.swagger-ui .opblock .opblock-summary-description {
-  font-size: 13px !important;
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .opblock .opblock-summary {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  padding: 5px !important;
-  cursor: pointer !important;
-  -webkit-box-align: center !important;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-}
-
-.swagger-ui .opblock.opblock-post {
-  border-color: #49cc90 !important;
-  background: #fff !important;
-}
-
-.swagger-ui .opblock.opblock-post .opblock-summary-method {
-  background: #49cc90 !important;
-}
-
-.swagger-ui .opblock.opblock-post .opblock-summary {
-  border-color: #49cc90 !important;
-}
-
-.swagger-ui .opblock.opblock-put {
-  border-color: #fca130 !important;
-  background: #fff !important;
-}
-
-.swagger-ui .opblock.opblock-put .opblock-summary-method {
-  background: #fca130 !important;
-}
-
-.swagger-ui .opblock.opblock-put .opblock-summary {
-  border-color: #fca130 !important;
-}
-
-.swagger-ui .opblock.opblock-delete {
-  border-color: #f93e3e !important;
-  background: #fff !important;
-}
-
-.swagger-ui .opblock.opblock-delete .opblock-summary-method {
-  background: #f93e3e !important;
-}
-
-.swagger-ui .opblock.opblock-delete .opblock-summary {
-  border-color: #f93e3e !important;
-}
-
-.swagger-ui .opblock.opblock-get {
-  border-color: #61affe !important;
-  background: rgba(97, 175, 254, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-get .opblock-summary-method {
-  background: #61affe !important;
-}
-
-.swagger-ui .opblock.opblock-get .opblock-summary {
-  border-color: #61affe !important;
-}
-
-.swagger-ui .opblock.opblock-patch {
-  border-color: #50e3c2 !important;
-  background: #fff !important;
-}
-
-.swagger-ui .opblock.opblock-patch .opblock-summary-method {
-  background: #50e3c2 !important;
-}
-
-.swagger-ui .opblock.opblock-patch .opblock-summary {
-  border-color: #50e3c2 !important;
-}
-
-.swagger-ui .opblock.opblock-head {
-  border-color: #9012fe !important;
-  background: rgba(144, 18, 254, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-head .opblock-summary-method {
-  background: #9012fe !important;
-}
-
-.swagger-ui .opblock.opblock-head .opblock-summary {
-  border-color: #9012fe !important;
-}
-
-.swagger-ui .opblock.opblock-options {
-  border-color: #0d5aa7 !important;
-  background: rgba(13, 90, 167, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-options .opblock-summary-method {
-  background: #0d5aa7 !important;
-}
-
-.swagger-ui .opblock.opblock-options .opblock-summary {
-  border-color: #0d5aa7 !important;
-}
-
-.swagger-ui .opblock.opblock-deprecated {
-  opacity: 0.6 !important;
-  border-color: #ebebeb !important;
-  background: hsla(0, 0%, 92%, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-deprecated .opblock-summary-method {
-  background: #ebebeb !important;
-}
-
-.swagger-ui .opblock.opblock-deprecated .opblock-summary {
-  border-color: #ebebeb !important;
-}
-
-.swagger-ui .tab {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  margin: 20px 0 10px !important;
-  padding: 0 !important;
-  list-style: none !important;
-}
-
-.swagger-ui .tab li {
-  font-size: 12px !important;
-  min-width: 100px !important;
-  min-width: 90px !important;
-  padding: 0 !important;
-  cursor: pointer !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .tab li:first-of-type {
-  position: relative !important;
-  padding-left: 0 !important;
-}
-
-.swagger-ui .tab li:first-of-type:after {
-  position: absolute !important;
-  top: 0 !important;
-  right: 6px !important;
-  width: 1px !important;
-  height: 100% !important;
-  content: "" !important;
-  background: rgba(0, 0, 0, 0.2) !important;
-}
-
-.swagger-ui .tab li.active {
-  font-weight: 700 !important;
-}
-
-.swagger-ui .opblock-description-wrapper,
-.swagger-ui .opblock-title_normal {
-  padding: 15px 20px !important;
-}
-
-.swagger-ui .opblock-description-wrapper,
-.swagger-ui .opblock-description-wrapper h4,
-.swagger-ui .opblock-title_normal,
-.swagger-ui .opblock-title_normal h4 {
-  font-size: 12px !important;
-  margin: 0 0 5px !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .opblock-description-wrapper p,
-.swagger-ui .opblock-title_normal p {
-  font-size: 14px !important;
-  margin: 0 !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .execute-wrapper {
-  padding: 20px !important;
-  text-align: right !important;
-}
-
-.swagger-ui .execute-wrapper .btn {
-  width: 100% !important;
-  padding: 8px 40px !important;
-}
-
-.swagger-ui .body-param-options {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  -webkit-box-orient: vertical !important;
-  -webkit-box-direction: normal !important;
-  -ms-flex-direction: column !important;
-  flex-direction: column !important;
-}
-
-.swagger-ui .body-param-options .body-param-edit {
-  padding: 10px 0 !important;
-}
-
-.swagger-ui .body-param-options label {
-  padding: 8px 0 !important;
-}
-
-.swagger-ui .body-param-options label select {
-  margin: 3px 0 0 !important;
-}
-
-.swagger-ui .responses-inner {
-  padding: 20px !important;
-}
-
-.swagger-ui .responses-inner h4,
-.swagger-ui .responses-inner h5 {
-  font-size: 12px !important;
-  margin: 10px 0 5px !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .response-col_status {
-  font-size: 14px !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .response-col_status .response-undocumented {
-  font-size: 11px !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #999 !important;
-}
-
-.swagger-ui .response-col_description__inner span {
-  font-size: 12px !important;
-  font-style: italic !important;
-  display: block !important;
-  margin: 10px 0 !important;
-  padding: 10px !important;
-  border-radius: 4px !important;
-  background: #41444e !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui .response-col_description__inner span p {
-  margin: 0 !important;
-}
-
-.swagger-ui .opblock-body pre {
-  font-size: 12px !important;
-  margin: 0 !important;
-  padding: 10px !important;
-  white-space: pre-wrap !important;
-  border-radius: 4px !important;
-  background: #41444e !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui .opblock-body pre span {
-  color: #fff !important;
-}
-
-.swagger-ui .scheme-container {
-  display: none !important;
-}
-
-.swagger-ui .loading-container {
-  padding: 40px 0 60px !important;
-  border-radius: 36px !important;
-  color: #fff !important;
-}
-
-.swagger-ui .loading-container .loading {
-  position: relative !important;
-}
-
-.swagger-ui .loading-container .loading:after {
-  font-size: 10px !important;
-  font-weight: 700 !important;
-  position: absolute !important;
-  top: 50% !important;
-  left: 50% !important;
-  content: "loading" !important;
-  -webkit-transform: translate(-50%, -50%) !important;
-  transform: translate(-50%, -50%) !important;
-  text-transform: uppercase !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .loading-container .loading:before {
-  position: absolute !important;
-  top: 50% !important;
-  left: 50% !important;
-  display: block !important;
-  width: 60px !important;
-  height: 60px !important;
-  margin: -30px !important;
-  content: "" !important;
-  -webkit-animation: rotation 1s infinite linear, opacity 0.5s !important;
-  animation: rotation 1s infinite linear, opacity 0.5s !important;
-  opacity: 1 !important;
-  border: 2px solid #fff !important;
-  border-top-color: rgba(0, 0, 0, 0.6) !important;
-  border-radius: 100% !important;
-  -webkit-backface-visibility: hidden !important;
-  backface-visibility: hidden !important;
-  fill: pink !important;
-  background-color: #333333 !important;
-}
-
-@-webkit-keyframes rotation {
-  to {
-    -webkit-transform: rotate(1turn);
-    transform: rotate(1turn);
-  }
-}
-
-@keyframes rotation {
-  to {
-    -webkit-transform: rotate(1turn);
-    transform: rotate(1turn);
-  }
-}
-
-@-webkit-keyframes blinker {
-  50% {
-    opacity: 0;
-  }
-}
-
-@keyframes blinker {
-  50% {
-    opacity: 0;
-  }
-}
-
-.swagger-ui .btn {
-  font-size: 14px !important;
-  font-weight: 700 !important;
-  padding: 5px 23px !important;
-  -webkit-transition: all 0.3s !important;
-  transition: all 0.3s !important;
-  border: 2px solid #888 !important;
-  border-radius: 4px !important;
-  background: transparent !important;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .btn[disabled] {
-  cursor: not-allowed !important;
-  opacity: 0.3 !important;
-}
-
-.swagger-ui .btn:hover {
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
-}
-
-.swagger-ui .btn.cancel {
-  border-color: #ff6060 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #ff6060 !important;
-}
-
-.swagger-ui .btn.authorize {
-  line-height: 1 !important;
-  display: inline !important;
-  color: #49cc90 !important;
-  border-color: #49cc90 !important;
-}
-
-.swagger-ui .btn.authorize span {
-  float: left !important;
-  padding: 4px 20px 0 0 !important;
-}
-
-.swagger-ui .btn.authorize svg {
-  fill: #49cc90 !important;
-}
-
-.swagger-ui .btn.execute {
-  -webkit-animation: pulse 2s infinite !important;
-  animation: pulse 2s infinite !important;
-  color: #fff !important;
-  border-color: #4990e2 !important;
-}
-
-@-webkit-keyframes pulse {
-  0% {
-    color: #fff;
-    background: #4990e2;
-    box-shadow: 0 0 0 0 rgba(73, 144, 226, 0.8);
-  }
-  70% {
-    box-shadow: 0 0 0 5px rgba(73, 144, 226, 0);
-  }
-  to {
-    color: #fff;
-    background: #4990e2;
-    box-shadow: 0 0 0 0 rgba(73, 144, 226, 0);
-  }
-}
-
-@keyframes pulse {
-  0% {
-    color: #fff;
-    background: #4990e2;
-    box-shadow: 0 0 0 0 rgba(73, 144, 226, 0.8);
-  }
-  70% {
-    box-shadow: 0 0 0 5px rgba(73, 144, 226, 0);
-  }
-  to {
-    color: #fff;
-    background: #4990e2;
-    box-shadow: 0 0 0 0 rgba(73, 144, 226, 0);
-  }
-}
-
-.swagger-ui .btn-group {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  padding: 30px !important;
-}
-
-.swagger-ui .btn-group .btn {
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-}
-
-.swagger-ui .btn-group .btn:first-child {
-  border-radius: 4px 0 0 4px !important;
-}
-
-.swagger-ui .btn-group .btn:last-child {
-  border-radius: 0 4px 4px 0 !important;
-}
-
-.swagger-ui .authorization__btn {
-  padding: 0 5px 0 0 !important;
-}
-
-.swagger-ui .authorization__btn svg {
-  fill: #f4f4f4 !important;
-}
-
-.swagger-ui .authorization__btn.locked {
-  opacity: 1 !important;
-}
-
-.swagger-ui .authorization__btn.unlocked {
-  opacity: 0.4 !important;
-}
-
-.swagger-ui .expand-methods,
-.swagger-ui .expand-operation {
-  border: none !important;
-  background-color: transparent !important;
-  padding: 4px !important;
-  border-radius: 1000px !important;
-  overflow: hidden !important;
-}
-
-.swagger-ui .expand-methods svg,
-.swagger-ui .expand-operation svg {
-  width: 18px !important;
-  height: 18px !important;
-  background-color: transparent;
-  fill: #fff !important;
-}
-
-.swagger-ui .expand-methods {
-  padding: 0 10px !important;
-}
-
-.swagger-ui .expand-methods:hover svg {
-  fill: #fff !important;
-}
-
-.swagger-ui .expand-methods svg {
-  -webkit-transition: all 0.3s !important;
-  transition: all 0.3s !important;
-  fill: #777 !important;
-}
-
-.swagger-ui button {
-  cursor: pointer !important;
-  outline: none !important;
-}
-
-.swagger-ui select {
-  font-size: 14px !important;
-  font-weight: 700 !important;
-  padding: 5px 40px 5px 10px !important;
-  border: 2px solid #41444e !important;
-  border-radius: 4px !important;
-  background: #f7f7f7
-    url(data:image/svg+xml!important;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+ICAgIDxwYXRoIGQ9Ik0xMy40MTggNy44NTljLjI3MS0uMjY4LjcwOS0uMjY4Ljk3OCAwIC4yNy4yNjguMjcyLjcwMSAwIC45NjlsLTMuOTA4IDMuODNjLS4yNy4yNjgtLjcwNy4yNjgtLjk3OSAwbC0zLjkwOC0zLjgzYy0uMjctLjI2Ny0uMjctLjcwMSAwLS45NjkuMjcxLS4yNjguNzA5LS4yNjguOTc4IDBMMTAgMTFsMy40MTgtMy4xNDF6Ii8+PC9zdmc+)
-    right 10px center no-repeat !important;
-  background-size: 20px !important;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25) !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #0e0e10 !important;
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  appearance: none !important;
-}
-
-.swagger-ui select[multiple] {
-  margin: 5px 0 !important;
-  padding: 5px !important;
-  background: #f7f7f7 !important;
-}
-
-.swagger-ui .opblock-body select {
-  min-width: 230px !important;
-}
-
-.swagger-ui label {
-  font-size: 12px !important;
-  font-weight: 700 !important;
-  margin: 0 0 5px !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui input[type="email"],
-.swagger-ui input[type="password"],
-.swagger-ui input[type="search"],
-.swagger-ui input[type="text"] {
-  min-width: 100px !important;
-  margin: 5px 0 !important;
-  padding: 8px 10px !important;
-  border-radius: 4px !important;
-  background: #333333 !important;
-}
-
-.swagger-ui input[type="email"].invalid,
-.swagger-ui input[type="password"].invalid,
-.swagger-ui input[type="search"].invalid,
-.swagger-ui input[type="text"].invalid {
-  -webkit-animation: shake 0.4s 1 !important;
-  animation: shake 0.4s 1 !important;
-  border-color: #f93e3e !important;
-  background: #333333 !important;
-}
-
-@-webkit-keyframes shake {
-  10%,
-  90% {
-    -webkit-transform: translate3d(-1px, 0, 0);
-    transform: translate3d(-1px, 0, 0);
-  }
-  20%,
-  80% {
-    -webkit-transform: translate3d(2px, 0, 0);
-    transform: translate3d(2px, 0, 0);
-  }
-  30%,
-  50%,
-  70% {
-    -webkit-transform: translate3d(-4px, 0, 0);
-    transform: translate3d(-4px, 0, 0);
-  }
-  40%,
-  60% {
-    -webkit-transform: translate3d(4px, 0, 0);
-    transform: translate3d(4px, 0, 0);
-  }
-}
-
-@keyframes shake {
-  10%,
-  90% {
-    -webkit-transform: translate3d(-1px, 0, 0);
-    transform: translate3d(-1px, 0, 0);
-  }
-  20%,
-  80% {
-    -webkit-transform: translate3d(2px, 0, 0);
-    transform: translate3d(2px, 0, 0);
-  }
-  30%,
-  50%,
-  70% {
-    -webkit-transform: translate3d(-4px, 0, 0);
-    transform: translate3d(-4px, 0, 0);
-  }
-  40%,
-  60% {
-    -webkit-transform: translate3d(4px, 0, 0);
-    transform: translate3d(4px, 0, 0);
-  }
-}
-
-.swagger-ui textarea {
-  font-size: 12px !important;
-  width: 100% !important;
-  min-height: 280px !important;
-  padding: 10px !important;
-  border: none !important;
-  border-radius: 4px !important;
-  outline: none !important;
-  background: hsla(220, 50%, 65%, 0.8) !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui textarea:focus {
-  border: 2px solid #61affe !important;
-}
-
-.swagger-ui textarea.curl {
-  font-size: 12px !important;
-  min-height: 100px !important;
-  margin: 0 !important;
-  padding: 10px !important;
-  resize: none !important;
-  border-radius: 4px !important;
-  background: #41444e !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui .checkbox {
-  padding: 5px 0 10px !important;
-  -webkit-transition: opacity 0.5s !important;
-  transition: opacity 0.5s !important;
-  color: #333 !important;
-}
-
-.swagger-ui .checkbox label {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-}
-
-.swagger-ui .checkbox p {
-  font-weight: 400 !important;
-  font-style: italic !important;
-  margin: 0 !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui .checkbox input[type="checkbox"] {
-  display: none !important;
-}
-
-.swagger-ui .checkbox input[type="checkbox"] + label > .item {
-  position: relative !important;
-  top: 3px !important;
-  display: inline-block !important;
-  width: 16px !important;
-  height: 16px !important;
-  margin: 0 8px 0 0 !important;
-  padding: 5px !important;
-  cursor: pointer !important;
-  border-radius: 1px !important;
-  background: #e8e8e8 !important;
-  box-shadow: 0 0 0 2px #e8e8e8 !important;
-  -webkit-box-flex: 0 !important;
-  -ms-flex: none !important;
-  flex: none !important;
-}
-
-.swagger-ui .checkbox input[type="checkbox"] + label > .item:active {
-  -webkit-transform: scale(0.9) !important;
-  transform: scale(0.9) !important;
-}
-
-.swagger-ui .checkbox input[type="checkbox"]:checked + label > .item {
-  background: #e8e8e8
-    url("data:image/svg+xml!important;charset=utf-8,%3Csvg width='10' height='8' viewBox='3 7 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2341474E' fill-rule='evenodd' d='M6.333 15L3 11.667l1.333-1.334 2 2L11.667 7 13 8.333z'/%3E%3C/svg%3E")
-    50% no-repeat !important;
-}
-
-.swagger-ui .dialog-ux {
-  position: fixed !important;
-  z-index: 9999 !important;
-  top: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-}
-
-.swagger-ui .dialog-ux .backdrop-ux {
-  position: fixed !important;
-  top: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  background: rgba(0, 0, 0, 0.8) !important;
-}
-
-.swagger-ui .dialog-ux .modal-ux {
-  position: absolute !important;
-  z-index: 9999 !important;
-  top: 50% !important;
-  left: 50% !important;
-  width: 100% !important;
-  min-width: 300px !important;
-  max-width: 650px !important;
-  -webkit-transform: translate(-50%, -50%) !important;
-  transform: translate(-50%, -50%) !important;
-  border: 1px solid #ebebeb !important;
-  border-radius: 4px !important;
-  background: #0e0e10 !important;
-  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2) !important;
-}
-
-.swagger-ui .dialog-ux .modal-ux-content {
-  overflow-y: auto !important;
-  max-height: 540px !important;
-  padding: 20px !important;
-}
-
-.swagger-ui .dialog-ux .modal-ux-content p {
-  font-size: 12px !important;
-  margin: 0 0 5px !important;
-  color: #41444e !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #0e0e10 !important;
-}
-
-.swagger-ui .dialog-ux .modal-ux-content h4 {
-  font-size: 18px !important;
-  font-weight: 600 !important;
-  margin: 15px 0 0 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #0e0e10 !important;
-}
-
-.swagger-ui .dialog-ux .modal-ux-header {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  padding: 12px 0 !important;
-  border-bottom: 1px solid #ebebeb !important;
-  -webkit-box-align: center !important;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-}
-
-.swagger-ui .dialog-ux .modal-ux-header .close-modal {
-  padding: 0 10px !important;
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  appearance: none !important;
-}
-
-.swagger-ui .dialog-ux .modal-ux-header h3 {
-  font-size: 20px !important;
-  font-weight: 600 !important;
-  margin: 0 !important;
-  padding: 0 20px !important;
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .auth-container h4 {
-  color: #fff !important;
-}
-
-.swagger-ui .model {
-  font-size: 12px !important;
-  font-weight: 300 !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui .model-toggle {
-  font-size: 10px !important;
-  position: relative !important;
-  top: 6px !important;
-  display: inline-block !important;
-  margin: 1.5em !important;
-  cursor: pointer !important;
-  -webkit-transition: -webkit-transform 0.15s ease-in !important;
-  transition: -webkit-transform 0.15s ease-in !important;
-  transition: transform 0.15s ease-in !important;
-  transition: transform 0.15s ease-in, -webkit-transform 0.15s ease-in !important;
-  -webkit-transform: rotate(90deg) !important;
-  transform: rotate(90deg) !important;
-  -webkit-transform-origin: 50% 50% !important;
-  transform-origin: 50% 50% !important;
-  background: #fff !important;
-}
-
-.swagger-ui .model-toggle.collapsed {
-  -webkit-transform: rotate(0deg) !important;
-  transform: rotate(0deg) !important;
-}
-
-.swagger-ui .model-toggle:after {
-  display: block !important;
-  width: 20px !important;
-  height: 20px !important;
-  content: "" !important;
-  background: url("data:image/svg+xml!important;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E")
-    50% no-repeat !important;
-  background-size: 100% !important;
-}
-
-.swagger-ui .model-jump-to-path {
-  position: relative !important;
-  cursor: pointer !important;
-}
-
-.swagger-ui .model-jump-to-path .view-line-link {
-  position: absolute !important;
-  top: -0.4em !important;
-  cursor: pointer !important;
-}
-
-.swagger-ui .model-title {
-  position: relative !important;
-}
-
-.swagger-ui .model-title:hover .model-hint {
-  visibility: visible !important;
-}
-
-.swagger-ui .model-hint {
-  position: absolute !important;
-  top: -1.8em !important;
-  visibility: hidden !important;
-  padding: 0.1em 0.5em !important;
-  white-space: nowrap !important;
-  color: #ebebeb !important;
-  border-radius: 4px !important;
-  background: rgba(0, 0, 0, 0.7) !important;
-}
-
-.swagger-ui section.models {
-  margin: 30px 0 !important;
-  border: 1px solid rgba(59, 65, 81, 0.3) !important;
-  border-radius: 4px !important;
-}
-
-.swagger-ui section.models.is-open {
-  padding: 0 0 20px !important;
-}
-
-.swagger-ui section.models.is-open h4 {
-  margin: 0 0 5px !important;
-  border-bottom: 1px solid rgba(59, 65, 81, 0.3) !important;
-}
-
-.swagger-ui section.models.is-open h4 svg {
-  -webkit-transform: rotate(90deg) !important;
-  transform: rotate(90deg) !important;
-}
-
-.swagger-ui section.models h4 {
-  font-size: 16px !important;
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  margin: 0 !important;
-  padding: 10px 20px 10px 10px !important;
-  cursor: pointer !important;
-  -webkit-transition: all 0.2s !important;
-  transition: all 0.2s !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #777 !important;
-  -webkit-box-align: center !important;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-}
-
-.swagger-ui section.models h4 svg {
-  -webkit-transition: all 0.4s !important;
-  transition: all 0.4s !important;
-}
-
-.swagger-ui section.models h4 span {
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-}
-
-.swagger-ui section.models h4:hover {
-  background: rgba(0, 0, 0, 0.02) !important;
-}
-
-.swagger-ui section.models h5 {
-  font-size: 16px !important;
-  margin: 0 0 10px !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #777 !important;
-}
-
-.swagger-ui section.models .model-jump-to-path {
-  position: relative !important;
-  top: 5px !important;
-}
-
-.swagger-ui section.models .model-container {
-  margin: 0 20px 15px !important;
-  -webkit-transition: all 0.5s !important;
-  transition: all 0.5s !important;
-  border-radius: 4px !important;
-  background: rgba(0, 0, 0, 0.05) !important;
-}
-
-.swagger-ui section.models .model-container:hover {
-  background: rgba(0, 0, 0, 0.07) !important;
-}
-
-.swagger-ui section.models .model-container:first-of-type {
-  margin: 20px !important;
-}
-
-.swagger-ui section.models .model-container:last-of-type {
-  margin: 0 20px !important;
-}
-
-.swagger-ui section.models .model-box {
-  background: none !important;
-}
-
-.swagger-ui .model-box {
-  padding: 10px !important;
-  border-radius: 4px !important;
-  background: rgb(245 239 239 / 10%) !important;
-}
-
-.swagger-ui .model-box .model-jump-to-path {
-  position: relative !important;
-  top: 4px !important;
-}
-
-.swagger-ui .model-title {
-  font-size: 16px !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #555 !important;
-}
-
-.swagger-ui span > span.model,
-.swagger-ui span > span.model .brace-close {
-  padding: 0 0 0 10px !important;
-}
-
-.swagger-ui .prop-type {
-  color: #55a !important;
-}
-
-.swagger-ui .prop-enum {
-  display: block !important;
-}
-
-.swagger-ui .prop-format {
-  color: #999 !important;
-}
-
-.swagger-ui table {
-  width: 100% !important;
-  padding: 0 10px !important;
-  border-collapse: collapse !important;
-}
-
-.swagger-ui table.model tbody tr td {
-  padding: 0 !important;
-  vertical-align: top !important;
-}
-
-.swagger-ui table.model tbody tr td:first-of-type {
-  width: 100px !important;
-  padding: 0 !important;
-}
-
-.swagger-ui table.headers td {
-  font-size: 12px !important;
-  font-weight: 300 !important;
-  vertical-align: middle !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui table tbody tr td {
-  padding: 10px 0 0 !important;
-  vertical-align: top !important;
-}
-
-.swagger-ui table tbody tr td:first-of-type {
-  width: 20% !important;
-  padding: 10px 0 !important;
-}
-
-.swagger-ui table thead tr td,
-.swagger-ui table thead tr th {
-  font-size: 12px !important;
-  font-weight: 700 !important;
-  padding: 12px 0 !important;
-  text-align: left !important;
-  border-bottom: 1px solid rgba(59, 65, 81, 0.2) !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .parameters-col_description p {
-  font-size: 14px !important;
-  margin: 0 !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .parameters-col_description input[type="text"] {
-  width: 100% !important;
-  max-width: 340px !important;
-}
-
-.swagger-ui .parameter__name {
-  font-size: 16px !important;
-  font-weight: 400 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .parameter__name.required {
-  font-weight: 700 !important;
-}
-
-.swagger-ui .parameter__name.required:after {
-  font-size: 10px !important;
-  position: relative !important;
-  top: -6px !important;
-  padding: 5px !important;
-  content: "required" !important;
-  color: rgba(255, 0, 0, 0.6) !important;
-}
-
-.swagger-ui .parameter__in {
-  font-size: 12px !important;
-  font-style: italic !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #888 !important;
-}
-
-.swagger-ui .table-container {
-  padding: 20px !important;
-}
-
-.swagger-ui .topbar {
-  padding: 8px 30px !important;
-  background-color: #89bf04 !important;
-}
-
-.swagger-ui .topbar .topbar-wrapper {
-  -ms-flex-align: center !important;
-}
-
-.swagger-ui .topbar .topbar-wrapper,
-.swagger-ui .topbar a {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  -webkit-box-align: center !important;
-  align-items: center !important;
-}
-
-.swagger-ui .topbar a {
-  font-size: 1.5em !important;
-  font-weight: 700 !important;
-  text-decoration: none !important;
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-  -ms-flex-align: center !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .topbar a span {
-  margin: 0 !important;
-  padding: 0 10px !important;
-}
-
-.swagger-ui .topbar .download-url-wrapper {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-}
-
-.swagger-ui .topbar .download-url-wrapper input[type="text"] {
-  min-width: 350px !important;
-  margin: 0 !important;
-  border: 2px solid #547f00 !important;
-  border-radius: 4px 0 0 4px !important;
-  outline: none !important;
-}
-
-.swagger-ui .topbar .download-url-wrapper .download-url-button {
-  font-size: 16px !important;
-  font-weight: 700 !important;
-  padding: 4px 40px !important;
-  border: none !important;
-  border-radius: 0 4px 4px 0 !important;
-  background: #547f00 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .information-container.wrapper .info {
-  display: none !important;
-}
-
-.swagger-ui .info hgroup.main {
-  margin: 0 0 20px !important;
-}
-
-.swagger-ui .info hgroup.main a {
-  font-size: 12px !important;
-}
-
-.swagger-ui .info p {
-  font-size: 14px !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .info code {
-  padding: 3px 5px !important;
-  border-radius: 4px !important;
-  background: rgba(0, 0, 0, 0.05) !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #9012fe !important;
-}
-
-.swagger-ui .info a {
-  font-size: 14px !important;
-  -webkit-transition: all 0.4s !important;
-  transition: all 0.4s !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #4990e2 !important;
-}
-
-.swagger-ui .info a:hover {
-  color: #1f69c0 !important;
-}
-
-.swagger-ui .info > div {
-  margin: 0 0 5px !important;
-}
-
-.swagger-ui .info .base-url {
-  font-size: 12px !important;
-  font-weight: 300 !important;
-  margin: 0 !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui .info .title {
-  font-size: 36px !important;
-  margin: 0 !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .info .title small {
-  font-size: 10px !important;
-  position: relative !important;
-  top: -5px !important;
-  display: inline-block !important;
-  margin: 0 0 0 5px !important;
-  padding: 2px 4px !important;
-  vertical-align: super !important;
-  border-radius: 57px !important;
-  background: #7d8492 !important;
-}
-
-.swagger-ui .info .title small pre {
-  margin: 0 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .auth-btn-wrapper {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  padding: 10px 0 !important;
-  -webkit-box-pack: center !important;
-  -ms-flex-pack: center !important;
-  justify-content: center !important;
-}
-
-.swagger-ui .auth-wrapper {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-  -webkit-box-pack: end !important;
-  -ms-flex-pack: end !important;
-  justify-content: flex-end !important;
-}
-
-.swagger-ui .auth-wrapper .authorize {
-  padding-right: 20px !important;
-}
-
-.swagger-ui .auth-container {
-  margin: 0 0 10px !important;
-  padding: 10px 20px !important;
-  border-bottom: 1px solid #ebebeb !important;
-}
-
-.swagger-ui .auth-container:last-of-type {
-  margin: 0 !important;
-  padding: 10px 20px !important;
-  border: 0 !important;
-}
-
-.swagger-ui .auth-container h4 {
-  margin: 5px 0 15px !important;
-  color: #fff !important;
-}
-
-.swagger-ui .auth-container .wrapper {
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.swagger-ui .auth-container input[type="password"],
-.swagger-ui .auth-container input[type="text"] {
-  min-width: 230px !important;
-}
-
-.swagger-ui .auth-container .errors {
-  font-size: 12px !important;
-  padding: 10px !important;
-  border-radius: 4px !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui .scopes h2 {
-  font-size: 14px !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .scope-def {
-  padding: 0 0 20px !important;
-}
-
-.swagger-ui .errors-wrapper {
-  margin: 20px !important;
-  padding: 10px 20px !important;
-  -webkit-animation: scaleUp 0.5s !important;
-  animation: scaleUp 0.5s !important;
-  border: 2px solid #f93e3e !important;
-  border-radius: 4px !important;
-  background: rgba(249, 62, 62, 0.1) !important;
-}
-
-.swagger-ui .errors-wrapper .error-wrapper {
-  margin: 0 0 10px !important;
-}
-
-.swagger-ui .errors-wrapper .errors h4 {
-  font-size: 14px !important;
-  margin: 0 !important;
-  font-family: Source Code Pro, monospace !important;
-  font-weight: 600 !important;
-  color: #fff !important;
-}
-
-.swagger-ui .errors-wrapper hgroup {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
-  display: flex !important;
-  -webkit-box-align: center !important;
-  -ms-flex-align: center !important;
-  align-items: center !important;
-}
-
-.swagger-ui .errors-wrapper hgroup h4 {
-  font-size: 20px !important;
-  margin: 0 !important;
-  -webkit-box-flex: 1 !important;
-  -ms-flex: 1 !important;
-  flex: 1 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-@-webkit-keyframes scaleUp {
-  0% {
-    -webkit-transform: scale(0.8);
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes scaleUp {
-  0% {
-    -webkit-transform: scale(0.8);
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  to {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.swagger-ui .Resizer.vertical.disabled {
-  display: none !important;
-}
-
-/*# sourceMappingURL=swagger-ui.css.map*/
-
-/**
- * Swagger UI Theme Overrides
- *
- * Theme: Newspaper
- * Author: Mark Ostrander
- * Github: https://github.com/ostranme/swagger-ui-themes
- */
-
-.swagger-ui .opblock.opblock-post {
-  border-color: #272b30 !important;
-  background: rgba(34, 34, 34, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-post .opblock-summary-method {
-  background: #30a46c !important;
-}
-
-.swagger-ui .opblock.opblock-post .opblock-summary {
-  border-color: #272b30 !important;
-}
-
-.swagger-ui .opblock.opblock-put {
-  border-color: #272b30 !important;
-  background: rgba(34, 34, 34, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-put .opblock-summary-method {
-  background: #222222 !important;
-}
-
-.swagger-ui .opblock.opblock-put .opblock-summary {
-  border-color: #272b30 !important;
-}
-
-.swagger-ui .opblock.opblock-delete {
-  border-color: #272b30 !important;
-  background: rgba(34, 34, 34, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-delete .opblock-summary-method {
-  background: #222222 !important;
-}
-
-.swagger-ui .opblock.opblock-delete .opblock-summary {
-  border-color: #272b30 !important;
-}
-
-.swagger-ui .opblock.opblock-get {
-  border-color: #272b30 !important;
-  background: rgba(34, 34, 34, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-get .opblock-summary-method {
-  background: #3385ff !important;
-}
-
-.swagger-ui .opblock.opblock-get .opblock-summary {
-  border-color: #272b30 !important;
-}
-
-.swagger-ui .opblock.opblock-patch {
-  border-color: #272b30 !important;
-  background: rgba(34, 34, 34, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-patch .opblock-summary-method {
-  background: #222222 !important;
-}
-
-.swagger-ui .opblock.opblock-patch .opblock-summary {
-  border-color: #272b30 !important;
-}
-
-.swagger-ui .opblock.opblock-head {
-  border-color: #272b30 !important;
-  background: rgba(34, 34, 34, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-head .opblock-summary-method {
-  background: #222222 !important;
-}
-
-.swagger-ui .opblock.opblock-head .opblock-summary {
-  border-color: #272b30 !important;
-}
-
-.swagger-ui .opblock.opblock-options {
-  border-color: #272b30 !important;
-  background: rgba(34, 34, 34, 0.1) !important;
-}
-
-.swagger-ui .opblock.opblock-options .opblock-summary-method {
-  background: #222222 !important;
-}
-
-.swagger-ui .opblock.opblock-options .opblock-summary {
-  border-color: #272b30 !important;
-}
-
-.swagger-ui .topbar {
-  padding: 8px 30px !important;
-  background-color: #222222 !important;
-}
-.swagger-ui .topbar .download-url-wrapper input[type="text"] {
-  min-width: 350px !important;
-  margin: 0 !important;
-  border: 2px solid #272b30 !important;
-  border-radius: 4px 0 0 4px !important;
-  outline: none !important;
-}
-
-.swagger-ui .topbar .download-url-wrapper .download-url-button {
-  font-size: 16px !important;
-  font-weight: 700 !important;
-  padding: 4px 40px !important;
-  border: none !important;
-  border-radius: 0 4px 4px 0 !important;
-  background: #272b30 !important;
-  font-family: Titillium Web, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .info a {
-  font-size: 14px !important;
-  -webkit-transition: all 0.4s !important;
-  transition: all 0.4s !important;
-  font-family: Open Sans, sans-serif !important;
-  color: #fff !important;
-}
-
-.swagger-ui .info a:hover {
-  color: #fff !important;
-}
-
-.swagger-ui .btn.authorize {
-  line-height: 1 !important;
-  display: inline !important;
-  /* color: #0E0E10!important;
-  border-color: #fff!important;
-  background: #fff!important; */
-}
-.swagger-ui .btn.authorize svg {
-  fill: #49cc90 !important;
-}
-
-.swagger-ui .parameter__type {
-  color: #5189f8 !important;
-}
-
-.swagger-ui .parameter__in {
-  color: orange !important;
-}
-
-.swager-ui .opblock .tab-header .tab-item.active {
-  color: #0e0e10 !important;
-}
-
-.swagger-ui .model .property,
-.swagger-ui .model .property.primitive {
-  color: #fff !important;
-}
-
-.swagger-ui .auth-btn-wrapper .btn-done {
-  color: #fff !important;
-}
-
-.swagger-ui .opblock-control-arrow {
-  background: none !important;
-  border: none !important;
-  text-align: center !important;
-  padding: 4px !important;
-  border-radius: 1000px !important;
-  overflow: hidden !important;
-}
-
-.swagger-ui .button {
-  margin-right: 5px !important;
-}
-
-.swagger-ui .renderedMarkdown {
-  color: #fff !important;
-}
-
-.swagger-ui textarea {
-  background-color: #333333 !important;
-}
-
-.swagger-ui .copy-to-clipboard {
-  display: none !important;
-}
-
-.swagger-ui .response-col_links i {
-  color: #fff !important;
-}
-
-.swagger-ui input {
-  border: none !important;
-}
-
-.swagger-ui .nostyle span {
-  font-size: 20px !important;
-}
-
-.swagger-ui .opblock-summary-path .nostyle span {
-  font-size: 14px !important;
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/page.tsx
deleted file mode 100644
index 691b755db0f..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/explorer/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { EngineExplorer } from "./components/engine-explorer";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return <EngineExplorer instanceUrl={instance.url} authToken={authToken} />;
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/layout.tsx
deleted file mode 100644
index 99850d1ad6d..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/layout.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
-import { getValidAccount } from "../../../../../../../account/settings/getAccount";
-import { getAuthToken } from "../../../../../../../api/lib/getAuthToken";
-import { loginRedirect } from "../../../../../../../login/loginRedirect";
-import { getEngineInstance } from "../../_utils/getEngineInstance";
-import { EngineErrorPage } from "./_components/EngineErrorPage";
-import { EngineSidebarLayout } from "./_components/EnginePageLayout";
-import { EnsureEnginePermission } from "./_components/EnsureEnginePermission";
-import { EngineVersionBadge } from "./_components/version";
-
-export default async function Layout(props: {
-  params: Promise<{
-    team_slug: string;
-    engineId: string;
-  }>;
-  children: React.ReactNode;
-}) {
-  const params = await props.params;
-  const account = await getValidAccount();
-  const authToken = await getAuthToken();
-
-  if (!authToken) {
-    loginRedirect(`/team/${params.team_slug}/~/engine/${params.engineId}`);
-  }
-
-  const instance = await getEngineInstance({
-    teamIdOrSlug: params.team_slug,
-    authToken,
-    engineId: params.engineId,
-    accountId: account.id,
-  });
-
-  const engineRootLayoutPath = `/team/${params.team_slug}/~/engine`;
-
-  if (!instance) {
-    return (
-      <EngineSidebarLayout
-        engineId={params.engineId}
-        teamSlug={params.team_slug}
-      >
-        <EngineErrorPage rootPath={engineRootLayoutPath}>
-          Engine Instance Not Found
-        </EngineErrorPage>
-      </EngineSidebarLayout>
-    );
-  }
-
-  return (
-    <ChakraProviderSetup>
-      <div className="flex grow flex-col">
-        <EngineInstanceHeader
-          instance={instance}
-          rootPath={engineRootLayoutPath}
-          teamSlug={params.team_slug}
-        />
-
-        <EngineSidebarLayout
-          engineId={params.engineId}
-          teamSlug={params.team_slug}
-        >
-          <EnsureEnginePermission
-            teamSlug={params.team_slug}
-            accountId={account.id}
-            authToken={authToken}
-            engineId={params.engineId}
-            instance={instance}
-          >
-            <div>{props.children}</div>
-          </EnsureEnginePermission>
-        </EngineSidebarLayout>
-      </div>
-    </ChakraProviderSetup>
-  );
-}
-
-function EngineInstanceHeader(props: {
-  instance: EngineInstance;
-  rootPath: string;
-  teamSlug: string;
-}) {
-  const { instance } = props;
-  const cleanEngineURL = instance.url.endsWith("/")
-    ? instance.url.slice(0, -1)
-    : instance.url;
-
-  return (
-    <div className="border-border border-b">
-      <div className="container py-6">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href={props.rootPath}>Engines</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-          </BreadcrumbList>
-        </Breadcrumb>
-
-        <div className="h-4" />
-
-        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          {/* left */}
-          <div>
-            <h1 className="font-semibold text-3xl tracking-tight">
-              {instance.name}
-            </h1>
-            {!instance.name.startsWith("https://") && (
-              <CopyTextButton
-                copyIconPosition="right"
-                iconClassName="size-2.5"
-                textToShow={cleanEngineURL}
-                textToCopy={cleanEngineURL}
-                tooltip="Copy Engine URL"
-                variant="ghost"
-                className="-translate-x-2 h-auto px-2 py-1 text-muted-foreground"
-              />
-            )}
-          </div>
-
-          {/* Right */}
-          <EngineVersionBadge instance={instance} teamSlug={props.teamSlug} />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
deleted file mode 100644
index be1d5daefdf..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-"use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import {
-  type EngineInstance,
-  useEngineQueueMetrics,
-  useEngineSystemMetrics,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { ChartAreaIcon, InfoIcon } from "lucide-react";
-import { Card, Heading, Text, TrackedLink } from "tw-components";
-import { ErrorRate } from "./ErrorRate";
-import { Healthcheck } from "./Healthcheck";
-import { StatusCodes } from "./StatusCodes";
-
-interface EngineStatusProps {
-  instance: EngineInstance;
-  teamSlug: string;
-  authToken: string;
-}
-
-export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
-  instance,
-  teamSlug,
-  authToken,
-}) => {
-  const systemMetricsQuery = useEngineSystemMetrics(instance.id, teamSlug);
-  const queueMetricsQuery = useEngineQueueMetrics({
-    authToken,
-    instanceUrl: instance.url,
-    pollInterval: 10_000,
-  });
-
-  let systemMetricsPanel = <Spinner className="h-4 w-4" />;
-  if (!systemMetricsQuery.data || systemMetricsQuery.isError) {
-    systemMetricsPanel = (
-      <Card p={8}>
-        <div className="flex flex-col gap-4">
-          <div className="flex flex-row items-center gap-2">
-            <InfoIcon className="size-4" />
-            <Heading size="title.xs">
-              System metrics are unavailable for self-hosted Engine.
-            </Heading>
-          </div>
-          <Text>
-            Upgrade to a{" "}
-            <TrackedLink
-              href={`/team/${teamSlug}/~/engine/create`}
-              isExternal
-              color="blue.500"
-              category="engine"
-              label="metrics-cloud-hosted-upsell"
-            >
-              Engine instance managed by thirdweb
-            </TrackedLink>{" "}
-            to view these metrics.
-          </Text>
-        </div>
-      </Card>
-    );
-  } else {
-    systemMetricsPanel = (
-      <Card p={16}>
-        <div className="flex flex-col gap-4">
-          <div className="-mb-2 flex flex-row items-center gap-2">
-            <ChartAreaIcon className="size-4" />
-            <Heading size="title.md">System Metrics</Heading>
-          </div>
-
-          <div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            <Healthcheck instance={instance} />
-          </div>
-          <StatusCodes
-            datapoints={systemMetricsQuery.data.result.statusCodes}
-          />
-          <ErrorRate datapoints={systemMetricsQuery.data.result.errorRate} />
-        </div>
-      </Card>
-    );
-  }
-
-  let queueMetricsPanel = (
-    <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-border">
-      <Spinner className="size-6" />
-    </div>
-  );
-
-  if (
-    !queueMetricsQuery.isPending &&
-    (!queueMetricsQuery.data || queueMetricsQuery.isError)
-  ) {
-    queueMetricsPanel = (
-      <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-border">
-        No Data Available
-      </div>
-    );
-  } else if (queueMetricsQuery.data) {
-    const numQueued = queueMetricsQuery.data.result.queued;
-    const numPending = queueMetricsQuery.data.result.pending;
-    const msToSend = queueMetricsQuery.data.result.latency?.msToSend;
-    const msToMine = queueMetricsQuery.data.result.latency?.msToMine;
-
-    queueMetricsPanel = (
-      <Card p={8}>
-        <div className="flex flex-col gap-6">
-          <div className="flex flex-row items-center gap-2">
-            <Heading size="title.md">Queue Metrics</Heading>
-          </div>
-
-          <div className="flex flex-col gap-6 lg:flex-row lg:gap-12">
-            <div className="flex-col gap-y-4">
-              <h2 className="font-semibold"> Queued</h2>
-              <p className="text-muted-foreground">{numQueued}</p>
-            </div>
-            <div className="flex-col gap-y-4">
-              <h2 className="font-semibold">Pending</h2>
-              <p className="text-muted-foreground">{numPending}</p>
-            </div>
-
-            {msToSend && (
-              <div className="flex-col gap-y-4">
-                <h2 className="font-semibold">Time to send</h2>
-                <p className="text-muted-foreground">
-                  p50 {(msToSend.p50 / 1000).toFixed(2)}s, p90{" "}
-                  {(msToSend.p90 / 1000).toFixed(2)}s
-                </p>
-              </div>
-            )}
-            {msToMine && (
-              <div className="flex-col gap-y-4">
-                <h2 className="font-semibold">Time to mine</h2>
-                <p className="text-muted-foreground">
-                  p50 {(msToMine.p50 / 1000).toFixed(2)}s, p90{" "}
-                  {(msToMine.p90 / 1000).toFixed(2)}s
-                </p>
-              </div>
-            )}
-          </div>
-        </div>
-      </Card>
-    );
-  }
-
-  return (
-    <div className="space-y-8">
-      {systemMetricsPanel}
-      {queueMetricsPanel}
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/ErrorRate.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/ErrorRate.tsx
deleted file mode 100644
index da8bbc42f8a..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/ErrorRate.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
-import { type JSX, useMemo } from "react";
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
-import type { ResultItem } from "./StatusCodes";
-
-function transformPrometheusData(timeseriesDatapoints: ResultItem[]) {
-  const results = [];
-  for (const datapoint of timeseriesDatapoints) {
-    for (const [timestamp, value] of datapoint.values) {
-      results.push({
-        time: new Date(timestamp * 1000).toISOString(),
-        value: value,
-      });
-    }
-  }
-
-  return {
-    data: results,
-    tags: ["value"],
-  };
-}
-
-export function ErrorRate({ datapoints }: { datapoints: ResultItem[] }) {
-  const monitorData = transformPrometheusData(datapoints);
-
-  const chartConfig: { [key: string]: { label: string; color: string } } = {
-    value: {
-      label: "Errors",
-      color: "hsl(var(--chart-5))",
-    },
-  } satisfies ChartConfig;
-
-  const areaCharts = useMemo(() => {
-    const charts: JSX.Element[] = [];
-    if (monitorData.tags === undefined) {
-      return <Spinner className="mx-auto size-8" />;
-    }
-    for (const tag of monitorData.tags) {
-      charts.push(
-        <Bar
-          key={tag}
-          dataKey={tag}
-          type="natural"
-          fill={`var(--color-${tag})`}
-          fillOpacity={0.3}
-          stroke={`var(--color-${tag})`}
-          stackId="a"
-        />,
-      );
-    }
-    return charts;
-  }, [monitorData]);
-
-  return (
-    <Card className="flex flex-col gap-4">
-      <CardHeader>
-        <CardTitle className="text-lg">Error Count</CardTitle>
-        <CardDescription>The total 5xx count (last 24 hours)</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer
-          config={chartConfig}
-          className="aspect-auto h-[250px] w-full"
-        >
-          <BarChart accessibilityLayer data={monitorData.data}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="time"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => {
-                const date = new Date(value);
-                return date.toLocaleTimeString("en-US", {
-                  hour: "numeric",
-                  minute: "numeric",
-                  second: undefined,
-                  localeMatcher: "lookup",
-                });
-              }}
-            />
-            <YAxis
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickCount={3}
-            />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-            {areaCharts}
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/Healthcheck.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/Healthcheck.tsx
deleted file mode 100644
index 24e8b3ca65f..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/Healthcheck.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client";
-
-import { Skeleton } from "@/components/ui/skeleton";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import {
-  type EngineInstance,
-  useEngineSystemHealth,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { PrimaryInfoItem } from "app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/primary-info-item";
-
-export function Healthcheck({ instance }: { instance: EngineInstance }) {
-  const query = useEngineSystemHealth(instance.url, 5_000);
-
-  return (
-    <>
-      {/* Engine Reachability */}
-      <PrimaryInfoItem title="Engine" titleIcon={<PulseDot />}>
-        <div className="flex items-center gap-1">
-          {query.isSuccess ? (
-            <ToolTipLabel label="Working">
-              <div className="text-lg text-success-text">Reachable</div>
-            </ToolTipLabel>
-          ) : query.isError ? (
-            <ToolTipLabel label="Not Working">
-              <div className="text-destructive-text text-lg">Not Reachable</div>
-            </ToolTipLabel>
-          ) : (
-            <div className="flex h-[28px] w-[70px] py-1">
-              <Skeleton className="h-full w-full" />
-            </div>
-          )}
-        </div>
-      </PrimaryInfoItem>
-    </>
-  );
-}
-
-function PulseDot() {
-  return (
-    <ToolTipLabel label="Live Data">
-      <span className="relative flex size-3">
-        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75" />
-        <span className="relative inline-flex size-3 rounded-full bg-primary" />
-      </span>
-    </ToolTipLabel>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes.tsx
deleted file mode 100644
index 676379ae624..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/StatusCodes.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-"use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
-import { type JSX, useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
-
-export interface ResultItem {
-  metric: {
-    code: string;
-  };
-  values: [number, number][];
-}
-
-function getReturnedCodes(result: ResultItem[]) {
-  const seriesCodes: { [key: string]: string | null } = {};
-  for (const item of result.reverse()) {
-    seriesCodes[item.metric.code] = null;
-  }
-  return seriesCodes;
-}
-
-function transformPrometheusData(timeseriesDatapoints: ResultItem[]) {
-  const codes = getReturnedCodes(timeseriesDatapoints);
-  const timeMap = new Map();
-
-  for (const datapoint of timeseriesDatapoints) {
-    const code = datapoint.metric.code;
-
-    for (const [timestamp, value] of datapoint.values) {
-      if (!timeMap.has(timestamp)) {
-        timeMap.set(timestamp, {
-          time: new Date(timestamp * 1000).toISOString(),
-          ...codes,
-        });
-      }
-
-      const timeItem = timeMap.get(timestamp);
-      timeItem[code] = value;
-    }
-  }
-
-  return {
-    data: Array.from(timeMap.values()),
-    tags: Object.keys(codes),
-  };
-}
-
-export function StatusCodes({ datapoints }: { datapoints: ResultItem[] }) {
-  const monitorData = transformPrometheusData(datapoints);
-
-  const chartConfig = useMemo(() => {
-    if (!monitorData || !monitorData.data || !monitorData.tags) {
-      return {};
-    }
-
-    const config: { [key: string]: { label: string; color: string } } = {};
-    for (const tag of monitorData.tags) {
-      config[tag] = {
-        label: tag,
-        color:
-          Number.parseInt(tag) < 400
-            ? "hsl(var(--chart-2))"
-            : Number.parseInt(tag) < 500
-              ? "hsl(var(--chart-3))"
-              : "hsl(var(--chart-5))",
-      };
-    }
-
-    return config;
-  }, [monitorData]);
-
-  const areaCharts = useMemo(() => {
-    const charts: JSX.Element[] = [];
-    if (!monitorData || !monitorData.data || !monitorData.tags) {
-      return <Spinner className="mx-auto size-8" />;
-    }
-
-    for (const tag of monitorData.tags) {
-      charts.push(
-        <Area
-          key={tag}
-          dataKey={tag}
-          type="step"
-          fill={`var(--color-${tag})`}
-          fillOpacity={0.3}
-          stroke={`var(--color-${tag})`}
-          stackId="a"
-        />,
-      );
-    }
-    return charts.reverse();
-  }, [monitorData]);
-
-  return (
-    <Card className="flex flex-col gap-4">
-      <CardHeader>
-        <CardTitle className="text-lg">Status Codes</CardTitle>
-        <CardDescription>
-          Total requests by HTTP status (last 24 hours)
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer
-          config={chartConfig}
-          className="aspect-auto h-[250px] w-full"
-        >
-          <AreaChart accessibilityLayer data={monitorData.data}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="time"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => {
-                const date = new Date(value);
-                return date.toLocaleTimeString("en-US", {
-                  hour: "numeric",
-                  minute: "numeric",
-                  second: undefined,
-                  localeMatcher: "lookup",
-                });
-              }}
-            />
-            <YAxis
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickCount={3}
-            />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-            {areaCharts}
-            <ChartLegend content={<ChartLegendContent />} />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/page.tsx
deleted file mode 100644
index f53b8877964..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { EngineSystemMetrics } from "./components/EngineSystemMetrics";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return (
-    <EngineSystemMetrics
-      instance={instance}
-      teamSlug={params.team_slug}
-      authToken={authToken}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
deleted file mode 100644
index 2237602b7a1..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/backend-wallets-table.tsx
+++ /dev/null
@@ -1,732 +0,0 @@
-import { WalletAddress } from "@/components/blocks/wallet-address";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
-import { FormItem } from "@/components/ui/form";
-import { Skeleton } from "@/components/ui/skeleton";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { engineKeys } from "@3rdweb-sdk/react";
-import {
-  type BackendWallet,
-  useEngineBackendWalletBalance,
-  useEngineDeleteBackendWallet,
-  useEngineSendTokens,
-  useEngineUpdateBackendWallet,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  InputGroup,
-  InputRightAddon,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { type ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { ChainIconClient } from "components/icons/ChainIcon";
-import { TWTable } from "components/shared/TWTable";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useAllChainsData } from "hooks/chains/allChains";
-import { EngineBackendWalletOptions } from "lib/engine";
-import { useV5DashboardChain } from "lib/v5-adapter";
-import {
-  DownloadIcon,
-  ExternalLinkIcon,
-  PencilIcon,
-  RefreshCcwIcon,
-  TrashIcon,
-  TriangleAlertIcon,
-  UploadIcon,
-} from "lucide-react";
-import Link from "next/link";
-import QRCode from "qrcode";
-import { useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { type ThirdwebClient, getAddress } from "thirdweb";
-import { shortenAddress } from "thirdweb/utils";
-import { FormHelperText, FormLabel, Text } from "tw-components";
-import { prettyPrintCurrency } from "./utils";
-
-interface BackendWalletsTableProps {
-  wallets: BackendWallet[];
-  instanceUrl: string;
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-  chainId: number;
-  client: ThirdwebClient;
-}
-
-interface BackendWalletDashboard extends BackendWallet {
-  balance: string;
-  authToken: string;
-}
-
-const columnHelper = createColumnHelper<BackendWalletDashboard>();
-
-interface BackendWalletBalanceCellProps {
-  instanceUrl: string;
-  address: string;
-  authToken: string;
-  chainId: number;
-  client: ThirdwebClient;
-}
-
-const BackendWalletBalanceCell: React.FC<BackendWalletBalanceCellProps> = ({
-  instanceUrl,
-  address,
-  authToken,
-  chainId,
-}) => {
-  const { data: backendWalletBalance, isFetching } =
-    useEngineBackendWalletBalance({
-      instanceUrl: instanceUrl,
-      address,
-      authToken,
-      chainId,
-    });
-  const chain = useV5DashboardChain(chainId);
-
-  if (!backendWalletBalance || isFetching) {
-    return <Skeleton className="h-6 w-36 rounded-lg" />;
-  }
-
-  const balanceDisplay = prettyPrintCurrency({
-    amount: backendWalletBalance.displayValue,
-    symbol: backendWalletBalance.symbol || chain.nativeCurrency?.symbol,
-  });
-
-  const balanceComponent = <span>{balanceDisplay}</span>;
-
-  const explorer = chain.blockExplorers?.[0];
-  if (!explorer) {
-    return balanceComponent;
-  }
-
-  return (
-    <Link
-      target="_blank"
-      href={`${explorer.url}/address/${address}`}
-      className="inline-flex items-center gap-2.5 rounded-lg px-2 py-1 text-muted-foreground hover:bg-muted hover:text-foreground"
-    >
-      {balanceComponent}
-      <ExternalLinkIcon className="size-4" />
-    </Link>
-  );
-};
-
-export const BackendWalletsTable: React.FC<BackendWalletsTableProps> = ({
-  wallets,
-  instanceUrl,
-  isPending,
-  isFetched,
-  authToken,
-  chainId,
-  client,
-}) => {
-  const editDisclosure = useDisclosure();
-  const receiveDisclosure = useDisclosure();
-  const sendDisclosure = useDisclosure();
-  const deleteDisclosure = useDisclosure();
-  const queryClient = useQueryClient();
-
-  const columns = useMemo(() => {
-    return [
-      columnHelper.accessor("address", {
-        header: "Address",
-        cell: (cell) => {
-          const address = cell.getValue();
-          return <WalletAddress address={getAddress(address)} />;
-        },
-      }),
-      columnHelper.accessor("label", {
-        header: "Label",
-        cell: (cell) => {
-          return (
-            <Text isTruncated maxW={300}>
-              {cell.getValue()}
-            </Text>
-          );
-        },
-      }),
-      columnHelper.accessor("type", {
-        header: "Type",
-        cell: (cell) => {
-          return <Badge variant="outline">{cell.getValue()}</Badge>;
-        },
-      }),
-      columnHelper.accessor("address", {
-        header: () => (
-          <div className="flex w-[180px] items-center gap-1.5">
-            Balance
-            <ToolTipLabel
-              label="Refresh Balance"
-              contentClassName="capitalize font-normal tracking-normal leading-normal"
-            >
-              <Button
-                className="z-20 h-auto p-1.5 [&[data-pending='true']_svg]:animate-spin"
-                variant="ghost"
-                size="sm"
-                onClick={async (e) => {
-                  const buttonEl = e.currentTarget;
-                  buttonEl.setAttribute("data-pending", "true");
-                  await queryClient.invalidateQueries({
-                    queryKey: engineKeys.backendWalletBalanceAll(),
-                  });
-                  buttonEl.setAttribute("data-pending", "false");
-                }}
-              >
-                <RefreshCcwIcon className="size-4" />
-              </Button>
-            </ToolTipLabel>
-          </div>
-        ),
-        cell: (cell) => {
-          const address = cell.getValue();
-          return (
-            <BackendWalletBalanceCell
-              instanceUrl={instanceUrl}
-              address={address}
-              authToken={authToken}
-              chainId={chainId}
-              client={client}
-            />
-          );
-        },
-        id: "balance",
-      }),
-    ];
-  }, [instanceUrl, authToken, chainId, queryClient, client]);
-
-  const [selectedBackendWallet, setSelectedBackendWallet] =
-    useState<BackendWallet>();
-
-  return (
-    <>
-      <TWTable
-        title="backend wallets"
-        data={wallets}
-        columns={columns as ColumnDef<BackendWallet, string>[]}
-        isPending={isPending}
-        isFetched={isFetched}
-        tableScrollableClassName="max-h-[1000px]"
-        tableContainerClassName="border-x-0 rounded-t-none border-b-0"
-        onMenuClick={[
-          {
-            icon: <PencilIcon className="size-4" />,
-            text: "Edit",
-            onClick: (wallet) => {
-              setSelectedBackendWallet(wallet);
-              editDisclosure.onOpen();
-            },
-          },
-          {
-            icon: <DownloadIcon className="size-4" />,
-            text: "Receive funds",
-            onClick: (wallet) => {
-              setSelectedBackendWallet(wallet);
-              receiveDisclosure.onOpen();
-            },
-          },
-          {
-            icon: <UploadIcon className="size-4" />,
-            text: "Send funds",
-            onClick: (wallet) => {
-              setSelectedBackendWallet(wallet);
-              sendDisclosure.onOpen();
-            },
-          },
-          {
-            icon: <TrashIcon className="size-4" />,
-            text: "Delete",
-            onClick: (wallet) => {
-              setSelectedBackendWallet(wallet);
-              deleteDisclosure.onOpen();
-            },
-            isDestructive: true,
-          },
-        ]}
-      />
-
-      {selectedBackendWallet && editDisclosure.isOpen && (
-        <EditModal
-          backendWallet={selectedBackendWallet}
-          disclosure={editDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-      {selectedBackendWallet && receiveDisclosure.isOpen && (
-        <ReceiveFundsModal
-          backendWallet={selectedBackendWallet}
-          disclosure={receiveDisclosure}
-        />
-      )}
-      {selectedBackendWallet && sendDisclosure.isOpen && (
-        <SendFundsModal
-          fromWallet={selectedBackendWallet}
-          backendWallets={wallets}
-          disclosure={sendDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-          chainId={chainId}
-          client={client}
-        />
-      )}
-      {selectedBackendWallet && deleteDisclosure.isOpen && (
-        <DeleteModal
-          backendWallet={selectedBackendWallet}
-          disclosure={deleteDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-    </>
-  );
-};
-
-const EditModal = ({
-  backendWallet,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: {
-  backendWallet: BackendWallet;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const updateBackendWallet = useEngineUpdateBackendWallet({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-
-  const [label, setLabel] = useState(backendWallet.label ?? "");
-
-  const onClick = async () => {
-    const promise = updateBackendWallet.mutateAsync(
-      {
-        walletAddress: backendWallet.address,
-        label,
-      },
-      {
-        onSuccess: () => {
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "update-backend-wallet",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          trackEvent({
-            category: "engine",
-            action: "update-backend-wallet",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-
-    toast.promise(promise, {
-      success: "Successfully updated backend wallet.",
-      error: "Failed to update backend wallet.",
-    });
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Update Backend Wallet</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <FormControl>
-              <FormLabel>Wallet Address</FormLabel>
-              <WalletAddress
-                address={backendWallet.address}
-                shortenAddress={false}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                type="text"
-                value={label}
-                onChange={(e) => setLabel(e.target.value)}
-                placeholder="Enter a description for this backend wallet"
-              />
-            </FormControl>
-          </div>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} variant="outline">
-            Cancel
-          </Button>
-          <Button type="submit" onClick={onClick}>
-            Save
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-const ReceiveFundsModal = ({
-  backendWallet,
-  disclosure,
-}: {
-  backendWallet: BackendWallet;
-  disclosure: UseDisclosureReturn;
-}) => {
-  const qrCodeBase64Query = useQuery({
-    queryKey: ["engine", "receive-funds-qr-code", backendWallet.address],
-    // only run this if we have a backendWallet address
-    enabled: !!backendWallet.address,
-    // start out with empty string
-    placeholderData: "",
-    queryFn: async () => {
-      return new Promise<string>((resolve, reject) => {
-        QRCode.toDataURL(
-          backendWallet.address,
-          // biome-ignore lint/suspicious/noExplicitAny: FIXME
-          (error: any, dataUrl: string) => {
-            if (error) {
-              reject(error);
-            } else {
-              resolve(dataUrl);
-            }
-          },
-        );
-      });
-    },
-  });
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Receive Funds</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4 pb-8">
-            <Text w="full" textAlign="left">
-              Fund this address or QR code:
-            </Text>
-            <WalletAddress
-              address={backendWallet.address}
-              shortenAddress={false}
-            />
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={qrCodeBase64Query.data}
-              alt="QR code for receiving funds"
-              className="mx-auto flex w-[200px] rounded-lg"
-            />
-          </div>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-interface SendFundsInput {
-  toAddress: string;
-  amount: number;
-}
-const SendFundsModal = ({
-  fromWallet,
-  backendWallets,
-  disclosure,
-  instanceUrl,
-  authToken,
-  chainId,
-  client,
-}: {
-  fromWallet: BackendWallet;
-  backendWallets: BackendWallet[];
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-  chainId: number;
-  client: ThirdwebClient;
-}) => {
-  const form = useForm<SendFundsInput>();
-  const sendTokens = useEngineSendTokens({
-    instanceUrl,
-    authToken,
-  });
-  const { idToChain } = useAllChainsData();
-  const { data: backendWalletBalance } = useEngineBackendWalletBalance({
-    instanceUrl,
-    address: fromWallet.address,
-    authToken,
-    chainId: chainId,
-  });
-  const chain = idToChain.get(chainId);
-  const toWalletDisclosure = useDisclosure();
-
-  if (!backendWalletBalance) {
-    return null;
-  }
-
-  const onSubmit = async (data: SendFundsInput) => {
-    const promise = sendTokens.mutateAsync(
-      {
-        chainId: chainId,
-        fromAddress: fromWallet.address,
-        toAddress: data.toAddress,
-        amount: data.amount,
-      },
-      {
-        onSuccess: () => {
-          disclosure.onClose();
-        },
-      },
-    );
-
-    toast.promise(promise, {
-      success: "Successfully sent a request to send funds.",
-      error: "Failed to send tokens.",
-    });
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent
-        as="form"
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="!bg-background rounded-lg border border-border"
-      >
-        <ModalHeader>Send Funds</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <FormControl>
-              <FormLabel>From</FormLabel>
-              <WalletAddress
-                address={fromWallet.address}
-                shortenAddress={false}
-              />
-            </FormControl>
-            <FormControl isRequired>
-              <FormLabel>To</FormLabel>
-              {toWalletDisclosure.isOpen ? (
-                <Input
-                  {...form.register("toAddress", { required: true })}
-                  placeholder="Enter a wallet address"
-                />
-              ) : (
-                <Select {...form.register("toAddress", { required: true })}>
-                  <option value="" disabled selected hidden>
-                    Select a backend wallet
-                  </option>
-                  {backendWallets
-                    .filter((wallet) => wallet.address !== fromWallet.address)
-                    .map((wallet) => (
-                      <option key={wallet.address} value={wallet.address}>
-                        {shortenAddress(wallet.address)}
-                        {wallet.label && ` (${wallet.label})`}
-                      </option>
-                    ))}
-                </Select>
-              )}
-              <FormHelperText textAlign="right">
-                <Button
-                  onClick={() => {
-                    form.resetField("toAddress");
-                    toWalletDisclosure.onToggle();
-                  }}
-                  variant="link"
-                >
-                  {toWalletDisclosure.isOpen
-                    ? "Or send to a backend wallet"
-                    : "Or send to a different wallet"}
-                </Button>
-              </FormHelperText>
-            </FormControl>
-            <FormControl isRequired>
-              <FormLabel>Amount</FormLabel>
-              <InputGroup>
-                <Input
-                  type="number"
-                  placeholder="Enter the amount to send"
-                  step="any"
-                  max={backendWalletBalance.displayValue}
-                  {...form.register("amount", { required: true })}
-                />
-                <InputRightAddon>
-                  {chain?.nativeCurrency.symbol}
-                </InputRightAddon>
-              </InputGroup>
-              <FormHelperText textAlign="right">
-                Current amount:{" "}
-                {prettyPrintCurrency({
-                  amount: backendWalletBalance.displayValue,
-                  symbol: backendWalletBalance.symbol,
-                })}
-              </FormHelperText>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Chain</FormLabel>
-              <Flex align="center" gap={2}>
-                <ChainIconClient
-                  className="size-3"
-                  src={chain?.icon?.url}
-                  client={client}
-                />
-                <Text>{chain?.name}</Text>
-              </Flex>
-            </FormControl>
-          </div>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} variant="outline">
-            Cancel
-          </Button>
-          <Button type="submit" disabled={!form.formState.isValid}>
-            Send
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-function DeleteModal({
-  backendWallet,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: {
-  backendWallet: BackendWallet;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}) {
-  const deleteBackendWallet = useEngineDeleteBackendWallet({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-
-  const isLocalWallet =
-    backendWallet.type === "local" || backendWallet.type === "smart:local";
-  const [ackDeletion, setAckDeletion] = useState(false);
-
-  const onClick = () => {
-    const promise = deleteBackendWallet.mutateAsync(
-      { walletAddress: backendWallet.address },
-      {
-        onSuccess: () => {
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "delete-backend-wallet",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          trackEvent({
-            category: "engine",
-            action: "delete-backend-wallet",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-
-    toast.promise(promise, {
-      success: "Successfully deleted backend wallet.",
-      error: "Failed to delete backend wallet.",
-    });
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Delete Backend Wallet</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <FormItem>
-              <FormLabel>Wallet Type</FormLabel>
-              <div>
-                {
-                  EngineBackendWalletOptions.find(
-                    (opt) => opt.key === backendWallet.type,
-                  )?.name
-                }
-              </div>
-            </FormItem>
-            <FormItem>
-              <FormLabel>Wallet Address</FormLabel>
-              <WalletAddress
-                address={backendWallet.address}
-                shortenAddress={false}
-              />
-            </FormItem>
-          </div>
-
-          {isLocalWallet && (
-            <Alert variant="warning" className="mt-4">
-              <TriangleAlertIcon className="!text-warning-text size-4" />
-              <AlertTitle>This action is irreversible.</AlertTitle>
-
-              <AlertDescription className="!pl-0 pt-2">
-                <CheckboxWithLabel>
-                  <Checkbox
-                    checked={ackDeletion}
-                    onCheckedChange={(checked) => setAckDeletion(!!checked)}
-                  />
-                  I understand that access to this backend wallet and any
-                  remaining funds will be lost.
-                </CheckboxWithLabel>
-              </AlertDescription>
-            </Alert>
-          )}
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} variant="outline">
-            Close
-          </Button>
-          <Button
-            type="submit"
-            variant="destructive"
-            onClick={onClick}
-            disabled={isLocalWallet && !ackDeletion}
-            className="gap-2"
-          >
-            {deleteBackendWallet.isPending && <Spinner className="size-4" />}
-            Delete
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
deleted file mode 100644
index 5c5c19764dd..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Form, FormDescription } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  type CreateBackendWalletInput,
-  type EngineInstance,
-  type WalletConfigResponse,
-  useEngineCreateBackendWallet,
-  useHasEngineFeature,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { Dialog } from "@radix-ui/react-dialog";
-import { useTrack } from "hooks/analytics/useTrack";
-import {
-  EngineBackendWalletOptions,
-  type EngineBackendWalletType,
-} from "lib/engine";
-import { CircleAlertIcon, PlusIcon } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import invariant from "tiny-invariant";
-
-interface CreateBackendWalletButtonProps {
-  instance: EngineInstance;
-  walletConfig: WalletConfigResponse;
-  teamSlug: string;
-  authToken: string;
-}
-
-export const CreateBackendWalletButton: React.FC<
-  CreateBackendWalletButtonProps
-> = ({ instance, walletConfig, teamSlug, authToken }) => {
-  const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
-    instance.url,
-    "HETEROGENEOUS_WALLET_TYPES",
-  );
-  const { isSupported: supportsSmartBackendWallets } = useHasEngineFeature(
-    instance.url,
-    "SMART_BACKEND_WALLETS",
-  );
-
-  const [isOpen, setIsOpen] = useState(false);
-  const createWallet = useEngineCreateBackendWallet({
-    instanceUrl: instance.url,
-    authToken,
-  });
-  const trackEvent = useTrack();
-
-  const form = useForm<CreateBackendWalletInput>({
-    defaultValues: { type: walletConfig.type },
-  });
-
-  const onSubmit = async (data: CreateBackendWalletInput) => {
-    const promise = createWallet.mutateAsync(data, {
-      onSuccess: () => {
-        setIsOpen(false);
-        trackEvent({
-          category: "engine",
-          action: "create-backend-wallet",
-          label: "success",
-          instance: instance.url,
-        });
-      },
-      onError: (error) => {
-        trackEvent({
-          category: "engine",
-          action: "create-backend-wallet",
-          label: "error",
-          instance: instance.url,
-          error,
-        });
-      },
-    });
-
-    toast.promise(promise, {
-      success: "Wallet created successfully",
-      error: "Failed to create wallet",
-    });
-  };
-
-  const walletType = form.watch("type");
-  const selectedOption = EngineBackendWalletOptions.find(
-    (opt) => opt.key === walletType,
-  );
-  invariant(selectedOption, "Selected a valid backend wallet type.");
-
-  const isCircleWallet =
-    walletType === "circle" || walletType === "smart:circle";
-
-  // List all wallet types only if Engine is updated to support it.
-  let walletTypeOptions = [selectedOption];
-  if (supportsSmartBackendWallets) {
-    walletTypeOptions = EngineBackendWalletOptions;
-  } else if (supportsMultipleWalletTypes) {
-    walletTypeOptions = EngineBackendWalletOptions.filter(
-      ({ key }) => !key.startsWith("smart:"),
-    );
-  }
-
-  const isNotConfigured =
-    (["aws-kms", "smart:aws-kms"].includes(walletType) &&
-      !walletConfig.awsAccessKeyId) ||
-    (["gcp-kms", "smart:gcp-kms"].includes(walletType) &&
-      !walletConfig.gcpKmsKeyRingId);
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)} className="gap-2" size="sm">
-        <PlusIcon className="size-4" />
-        Create
-      </Button>
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent className="overflow-hidden p-0">
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)}>
-              <div className="p-6">
-                <DialogHeader className="mb-4">
-                  <DialogTitle className="font-semibold text-2xl tracking-tight">
-                    Create Wallet
-                  </DialogTitle>
-                </DialogHeader>
-
-                <div className="flex flex-col gap-3">
-                  {/* Wallet type */}
-                  <FormFieldSetup
-                    label="Wallet Type"
-                    errorMessage={
-                      form.getFieldState("type", form.formState).error?.message
-                    }
-                    htmlFor="wallet-label"
-                    isRequired
-                    tooltip={null}
-                  >
-                    <Select
-                      onValueChange={(value) =>
-                        form.setValue("type", value as EngineBackendWalletType)
-                      }
-                      value={form.watch("type")}
-                    >
-                      <SelectTrigger>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          {walletTypeOptions.map((option) => (
-                            <SelectItem key={option.key} value={option.key}>
-                              {option.name}
-                            </SelectItem>
-                          ))}
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-
-                    <FormDescription className="py-2">
-                      Learn more about{" "}
-                      <Link
-                        href="https://portal.thirdweb.com/engine/features/backend-wallets"
-                        className="text-link-foreground hover:text-foreground"
-                      >
-                        backend wallet types
-                      </Link>
-                      .
-                    </FormDescription>
-                  </FormFieldSetup>
-
-                  {isNotConfigured ? (
-                    // Warning if not configured
-                    <Alert variant="warning">
-                      <CircleAlertIcon className="size-5" />
-                      <AlertTitle>
-                        {selectedOption?.name} is not yet configured
-                      </AlertTitle>
-                      <AlertDescription>
-                        Provide your credentials on the{" "}
-                        <Link
-                          href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
-                          className="text-link-foreground hover:text-foreground"
-                        >
-                          Configuration
-                        </Link>{" "}
-                        tab to enable backend wallets stored on{" "}
-                        {selectedOption?.name}.
-                      </AlertDescription>
-                    </Alert>
-                  ) : (
-                    <>
-                      {/* Label */}
-                      <FormFieldSetup
-                        key="label"
-                        label="Label"
-                        errorMessage={
-                          form.getFieldState("label", form.formState).error
-                            ?.message
-                        }
-                        htmlFor="wallet-label"
-                        isRequired
-                        tooltip={null}
-                      >
-                        <Input
-                          id="wallet-label"
-                          type="text"
-                          placeholder="A description to identify this backend wallet"
-                          {...form.register("label", { required: true })}
-                        />
-                      </FormFieldSetup>
-
-                      {/* Credential ID for Circle wallets */}
-                      {isCircleWallet && (
-                        <>
-                          <FormFieldSetup
-                            key="credentialId"
-                            label="Credential ID"
-                            errorMessage={
-                              form.getFieldState("credentialId", form.formState)
-                                .error?.message
-                            }
-                            htmlFor="credential-id"
-                            isRequired
-                            tooltip={null}
-                          >
-                            <Input
-                              id="credential-id"
-                              type="text"
-                              placeholder="Enter the Circle credential ID"
-                              {...form.register("credentialId", {
-                                required: isCircleWallet,
-                              })}
-                            />
-                            <FormDescription className="py-2">
-                              The ID of the Circle credential to use for this
-                              wallet. You can find this in the{" "}
-                              <Link
-                                href={`/team/${teamSlug}/~/engine/${instance.id}/wallet-credentials`}
-                                className="text-link-foreground hover:text-foreground"
-                              >
-                                Wallet Credentials
-                              </Link>{" "}
-                              section.
-                            </FormDescription>
-                          </FormFieldSetup>
-
-                          <FormFieldSetup
-                            key="isTestnet"
-                            label="Testnet"
-                            errorMessage={
-                              form.getFieldState("isTestnet", form.formState)
-                                .error?.message
-                            }
-                            htmlFor="is-testnet"
-                            tooltip={null}
-                            isRequired={false}
-                          >
-                            <div className="flex flex-col gap-2">
-                              <div className="flex items-center space-x-2">
-                                <Checkbox
-                                  id="is-testnet"
-                                  checked={form.watch("isTestnet")}
-                                  onCheckedChange={(checked) =>
-                                    form.setValue("isTestnet", !!checked)
-                                  }
-                                />
-                                <label
-                                  htmlFor="is-testnet"
-                                  className="text-sm leading-none opacity-70 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                >
-                                  Use testnet mode for creating backend wallet
-                                </label>
-                              </div>
-                              <FormDescription className="py-2">
-                                If your engine is configured with a testnet API
-                                Key for Circle, you can only create testnet
-                                wallets. A production API Key cannot be used for
-                                testnet transactions, and vice versa.{" "}
-                                <Link
-                                  href="https://developers.circle.com/w3s/sandbox-vs-production"
-                                  target="_blank"
-                                  className="text-link-foreground hover:text-foreground"
-                                >
-                                  Learn more
-                                </Link>
-                              </FormDescription>
-                            </div>
-                          </FormFieldSetup>
-                        </>
-                      )}
-                    </>
-                  )}
-                </div>
-              </div>
-
-              <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2 ">
-                <Button variant="outline" onClick={() => setIsOpen(false)}>
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  className="min-w-28 gap-2"
-                  disabled={
-                    !form.formState.isValid ||
-                    isNotConfigured ||
-                    createWallet.isPending
-                  }
-                >
-                  {createWallet.isPending && <Spinner className="size-4" />}
-                  Create
-                </Button>
-              </DialogFooter>
-            </form>
-          </Form>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx
deleted file mode 100644
index 5e53bdd1c20..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/engine-overview.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-"use client";
-import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
-import {
-  type EngineInstance,
-  useEngineBackendWallets,
-  useEngineWalletConfig,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { useState } from "react";
-import type { ThirdwebClient } from "thirdweb";
-import { useActiveWalletChain } from "thirdweb/react";
-import { BackendWalletsTable } from "./backend-wallets-table";
-import { CreateBackendWalletButton } from "./create-backend-wallet-button";
-import { ImportBackendWalletButton } from "./import-backend-wallet-button";
-import { TransactionCharts, TransactionsTable } from "./transactions-table";
-
-interface EngineOverviewProps {
-  instance: EngineInstance;
-  teamSlug: string;
-  authToken: string;
-}
-
-export const EngineOverview: React.FC<EngineOverviewProps> = ({
-  instance,
-  teamSlug,
-  authToken,
-}) => {
-  const client = useThirdwebClient();
-
-  return (
-    <div>
-      <BackendWalletsSection
-        instance={instance}
-        teamSlug={teamSlug}
-        authToken={authToken}
-        client={client}
-      />
-      <div className="h-10" />
-      <TransactionCharts instanceUrl={instance.url} authToken={authToken} />
-      <div className="h-10" />
-      <TransactionsTable
-        instanceUrl={instance.url}
-        authToken={authToken}
-        client={client}
-      />
-    </div>
-  );
-};
-
-function BackendWalletsSection(props: {
-  instance: EngineInstance;
-  teamSlug: string;
-  authToken: string;
-  client: ThirdwebClient;
-}) {
-  const { instance, teamSlug, authToken } = props;
-  const activeWalletChain = useActiveWalletChain();
-  const [_chainId, setChainId] = useState<number>();
-  const chainId = _chainId || activeWalletChain?.id || 1;
-
-  const backendWallets = useEngineBackendWallets({
-    instanceUrl: instance.url,
-    authToken,
-  });
-  const { data: walletConfig } = useEngineWalletConfig({
-    instanceUrl: instance.url,
-    authToken,
-  });
-
-  return (
-    <section className="rounded-lg border border-border bg-card">
-      <div className="flex flex-col gap-5 p-6 lg:flex-row lg:items-center lg:justify-between">
-        <div>
-          <div className="flex items-center gap-3">
-            <h2 className="mb-1 font-semibold text-xl tracking-tight">
-              Backend Wallets
-            </h2>
-          </div>
-          <p className="text-muted-foreground text-sm leading-relaxed">
-            Engine sends blockchain transactions from backend wallets you own
-            and manage.
-          </p>
-          <p className="text-muted-foreground text-sm leading-relaxed">
-            Set up other wallet types from the{" "}
-            <UnderlineLink
-              href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
-            >
-              Configuration
-            </UnderlineLink>{" "}
-            tab, or{" "}
-            <TrackedUnderlineLink
-              href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
-              target="_blank"
-              label="learn-more"
-              category="engine"
-            >
-              learn more about backend wallets.
-            </TrackedUnderlineLink>
-          </p>
-        </div>
-
-        <div className="flex flex-col items-end gap-4 border-border max-md:w-full max-md:border-t max-md:pt-6">
-          {walletConfig && (
-            <div className="flex flex-row justify-end gap-3 max-md:w-full">
-              <ImportBackendWalletButton
-                instance={instance}
-                walletConfig={walletConfig}
-                teamSlug={teamSlug}
-                authToken={authToken}
-              />
-              <CreateBackendWalletButton
-                instance={instance}
-                walletConfig={walletConfig}
-                teamSlug={teamSlug}
-                authToken={authToken}
-              />
-            </div>
-          )}
-
-          <div className="flex justify-end">
-            <div className="flex items-center gap-2">
-              <span className="text-sm">Show balance for</span>
-              <div className="flex flex-row">
-                <SingleNetworkSelector
-                  chainId={chainId}
-                  onChange={setChainId}
-                  className="min-w-40 max-w-52 lg:max-w-60"
-                  popoverContentClassName="!w-[80vw] md:!w-[500px]"
-                  align="end"
-                  client={props.client}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <BackendWalletsTable
-        instanceUrl={instance.url}
-        wallets={backendWallets.data ?? []}
-        isPending={backendWallets.isPending}
-        isFetched={backendWallets.isFetched}
-        authToken={authToken}
-        chainId={chainId}
-        client={props.client}
-      />
-    </section>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
deleted file mode 100644
index cd6f8243187..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
+++ /dev/null
@@ -1,347 +0,0 @@
-import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { FormControl } from "@/components/ui/form";
-import { Form, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  type EngineInstance,
-  type ImportBackendWalletInput,
-  type WalletConfigResponse,
-  useEngineImportBackendWallet,
-  useHasEngineFeature,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import {
-  EngineBackendWalletOptions,
-  type EngineBackendWalletType,
-} from "lib/engine";
-import { CircleAlertIcon, CloudDownloadIcon } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import invariant from "tiny-invariant";
-
-interface ImportBackendWalletButtonProps {
-  instance: EngineInstance;
-  walletConfig: WalletConfigResponse;
-  teamSlug: string;
-  authToken: string;
-}
-
-export const ImportBackendWalletButton: React.FC<
-  ImportBackendWalletButtonProps
-> = ({ instance, walletConfig, teamSlug, authToken }) => {
-  const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
-    instance.url,
-    "HETEROGENEOUS_WALLET_TYPES",
-  );
-  const { mutate: importBackendWallet, isPending } =
-    useEngineImportBackendWallet({
-      instanceUrl: instance.url,
-      authToken,
-    });
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Wallet imported successfully.",
-    "Failed to import wallet.",
-  );
-  const trackEvent = useTrack();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [walletType, setWalletType] = useState<EngineBackendWalletType>(
-    walletConfig.type,
-  );
-  const form = useForm<ImportBackendWalletInput>();
-
-  const onSubmit = (raw: ImportBackendWalletInput) => {
-    // Submit only relevant fields.
-    const data: ImportBackendWalletInput = {
-      label: raw.label,
-    };
-    if (walletType === "local") {
-      data.privateKey = raw.privateKey;
-    } else if (walletType === "aws-kms") {
-      data.awsKmsArn = raw.awsKmsArn;
-    } else if (walletType === "gcp-kms") {
-      data.gcpKmsKeyId = raw.gcpKmsKeyId;
-      data.gcpKmsKeyVersionId = raw.gcpKmsKeyVersionId;
-    }
-
-    importBackendWallet(data, {
-      onSuccess: () => {
-        onSuccess();
-        setIsModalOpen(false);
-        form.reset();
-        trackEvent({
-          category: "engine",
-          action: "import-backend-wallet",
-          label: "success",
-          type: walletConfig?.type,
-          instance: instance.url,
-        });
-      },
-      onError: (error) => {
-        onError(error);
-        trackEvent({
-          category: "engine",
-          action: "import-backend-wallet",
-          label: "error",
-          type: walletConfig?.type,
-          instance: instance.url,
-          error,
-        });
-      },
-    });
-  };
-
-  const selectedOption = EngineBackendWalletOptions.find(
-    (opt) => opt.key === walletType,
-  );
-  invariant(selectedOption, "Selected a valid backend wallet type.");
-
-  // List all wallet types only if Engine is updated to support it.
-  // Disallow importing smart backend wallets.
-  const walletTypeOptions = supportsMultipleWalletTypes
-    ? EngineBackendWalletOptions.filter(({ key }) => !key.startsWith("smart:"))
-    : [selectedOption];
-
-  const isAwsKmsConfigured = !!walletConfig.awsAccessKeyId;
-  const isGcpKmsConfigured = !!walletConfig.gcpKmsKeyRingId;
-
-  // Custom validation logic because required fields depend on the wallet type.
-  const values = form.getValues();
-  const isFormValid =
-    (walletType === "local" && values.privateKey) ||
-    (walletType === "aws-kms" && values.awsKmsArn) ||
-    (walletType === "gcp-kms" &&
-      values.gcpKmsKeyId &&
-      values.gcpKmsKeyVersionId);
-
-  return (
-    <>
-      <Button
-        onClick={() => setIsModalOpen(true)}
-        variant="outline"
-        className="gap-2"
-        size="sm"
-      >
-        <CloudDownloadIcon className="size-4" />
-        Import
-      </Button>
-
-      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-        <DialogContent className="p-0">
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)}>
-              <div className="p-6">
-                <DialogHeader className="mb-4">
-                  <DialogTitle className="font-semibold text-2xl tracking-tight">
-                    Import wallet
-                  </DialogTitle>
-                </DialogHeader>
-
-                <div className="flex flex-col gap-5">
-                  {/* Wallet type */}
-                  <FormItem>
-                    <FormLabel>Wallet Type</FormLabel>
-                    <FormControl>
-                      <Select
-                        onValueChange={(value) => {
-                          form.reset();
-                          setWalletType(value as EngineBackendWalletType);
-                        }}
-                        value={walletType}
-                      >
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            {walletTypeOptions.map((option) => (
-                              <SelectItem key={option.key} value={option.key}>
-                                {option.name}
-                              </SelectItem>
-                            ))}
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-
-                  {(walletType === "aws-kms" && !isAwsKmsConfigured) ||
-                  (walletType === "gcp-kms" && !isGcpKmsConfigured) ? (
-                    <Alert variant="warning">
-                      <CircleAlertIcon className="size-5" />
-                      <AlertTitle>
-                        {selectedOption?.name} is not yet configured
-                      </AlertTitle>
-                      <AlertDescription>
-                        Provide your credentials on the{" "}
-                        <Link
-                          href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
-                          className="text-link-foreground hover:text-foreground"
-                        >
-                          Configuration
-                        </Link>{" "}
-                        tab to enable backend wallets stored on{" "}
-                        {selectedOption?.name}.
-                      </AlertDescription>
-                    </Alert>
-                  ) : (
-                    <>
-                      {/* Label */}
-                      <FormFieldSetup
-                        key="label"
-                        label="Label"
-                        errorMessage={
-                          form.getFieldState("label", form.formState).error
-                            ?.message
-                        }
-                        htmlFor="wallet-label"
-                        isRequired={false}
-                        tooltip={null}
-                      >
-                        <Input
-                          id="wallet-label"
-                          type="text"
-                          placeholder="A description to identify this backend wallet"
-                          {...form.register("label")}
-                        />
-                      </FormFieldSetup>
-
-                      {/* Local */}
-                      {walletType === "local" ? (
-                        <FormFieldSetup
-                          key="privateKey"
-                          htmlFor="privateKey"
-                          label="Private key"
-                          errorMessage={
-                            form.getFieldState("privateKey", form.formState)
-                              .error?.message
-                          }
-                          isRequired
-                          tooltip={null}
-                        >
-                          <Input
-                            id="privateKey"
-                            placeholder="Your wallet private key"
-                            autoComplete="off"
-                            type="text"
-                            {...form.register("privateKey", {
-                              required: true,
-                              // TODO: add private key validation here
-                            })}
-                          />
-                        </FormFieldSetup>
-                      ) : walletType === "aws-kms" ? (
-                        <FormFieldSetup
-                          key="awsKmsArn"
-                          label="AWS KMS ARN"
-                          errorMessage={
-                            form.getFieldState("awsKmsArn", form.formState)
-                              .error?.message
-                          }
-                          htmlFor="awsKmsArn"
-                          isRequired
-                          tooltip={null}
-                        >
-                          <Input
-                            id="awsKmsArn"
-                            placeholder="arn:aws:kms:us-west-2:123456789012:key/2b7d8e0c-..."
-                            autoComplete="off"
-                            type="text"
-                            {...form.register("awsKmsArn", { required: true })}
-                          />
-                        </FormFieldSetup>
-                      ) : walletType === "gcp-kms" ? (
-                        <>
-                          <FormFieldSetup
-                            key="gcpKmsKeyId"
-                            htmlFor="gcpKmsKeyId"
-                            errorMessage={
-                              form.getFieldState("gcpKmsKeyId", form.formState)
-                                .error?.message
-                            }
-                            label="GCP KMS Key ID"
-                            isRequired
-                            tooltip={null}
-                          >
-                            <Input
-                              id="gcpKmsKeyId"
-                              placeholder="projects/my-project/locations/us-central1/keyRings/my-key-ring/cryptoKeys/my-key"
-                              autoComplete="off"
-                              type="text"
-                              {...form.register("gcpKmsKeyId", {
-                                required: true,
-                              })}
-                            />
-                          </FormFieldSetup>
-
-                          <FormFieldSetup
-                            key="gcpKmsKeyVersionId"
-                            label="GCP KMS Version ID"
-                            errorMessage={
-                              form.getFieldState(
-                                "gcpKmsKeyVersionId",
-                                form.formState,
-                              ).error?.message
-                            }
-                            htmlFor="gcpKmsKeyVersionId"
-                            isRequired
-                            tooltip={null}
-                          >
-                            <Input
-                              id="gcpKmsKeyVersionId"
-                              placeholder="1"
-                              autoComplete="off"
-                              type="text"
-                              {...form.register("gcpKmsKeyVersionId", {
-                                required: true,
-                              })}
-                            />
-                          </FormFieldSetup>
-                        </>
-                      ) : null}
-                    </>
-                  )}
-                </div>
-              </div>
-
-              <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2 ">
-                <Button variant="outline" onClick={() => setIsModalOpen(false)}>
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  className="min-w-28 gap-2"
-                  disabled={!isFormValid || isPending}
-                >
-                  {isPending && <Spinner className="size-4" />}
-                  Import
-                </Button>
-              </DialogFooter>
-            </form>
-          </Form>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transaction-timeline.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transaction-timeline.tsx
deleted file mode 100644
index 3900ef08c7f..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transaction-timeline.tsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import { WalletAddress } from "@/components/blocks/wallet-address";
-import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
-import type { Transaction } from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Step,
-  StepIndicator,
-  StepSeparator,
-  StepStatus,
-  Stepper,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { useMutation } from "@tanstack/react-query";
-import { format } from "date-fns";
-import { CheckIcon } from "lucide-react";
-import { useRef } from "react";
-import { toast } from "sonner";
-import { Button, FormLabel, Text } from "tw-components";
-
-interface TimelineStep {
-  step: string;
-  isLatest?: boolean;
-  date?: string | null;
-  // biome-ignore lint/suspicious/noExplicitAny: FIXME
-  cta?: any;
-}
-
-export const TransactionTimeline = ({
-  transaction,
-  instanceUrl,
-  authToken,
-}: {
-  transaction: Transaction;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  let timeline: TimelineStep[];
-  switch (transaction?.status) {
-    case "queued":
-      // Queued: [ queued, _sent, _mined ]
-      timeline = [
-        {
-          isLatest: true,
-          step: "Queued",
-          date: transaction.queuedAt,
-          cta: (
-            <CancelTransactionButton
-              transaction={transaction}
-              instanceUrl={instanceUrl}
-              authToken={authToken}
-            />
-          ),
-        },
-        { step: "Sent" },
-        { step: "Mined" },
-      ];
-      break;
-    case "sent":
-      // Sent: [ queued, sent, _mined ]
-      timeline = [
-        { step: "Queued", date: transaction.queuedAt },
-        {
-          isLatest: true,
-          step: "Sent",
-          date: transaction.sentAt,
-          cta: (
-            <CancelTransactionButton
-              transaction={transaction}
-              instanceUrl={instanceUrl}
-              authToken={authToken}
-            />
-          ),
-        },
-        { step: "Mined" },
-      ];
-      break;
-    case "mined":
-      // Mined: [ queued, sent, mined ]
-      timeline = [
-        { step: "Queued", date: transaction.queuedAt },
-        { step: "Sent", date: transaction.sentAt },
-        { isLatest: true, step: "Mined", date: transaction.minedAt },
-      ];
-      break;
-    case "cancelled":
-      // Mined: [ queued, sent, cancelled, _mined ]
-      timeline = [
-        { step: "Queued", date: transaction.queuedAt },
-        { step: "Sent", date: transaction.sentAt },
-        { isLatest: true, step: "Cancelled", date: transaction.cancelledAt },
-        { step: "Mined" },
-      ];
-      break;
-    case "errored":
-      if (transaction.sentAt) {
-        // Errored with sentAt: [ queued, sent, errored, _mined ]
-        timeline = [
-          { step: "Queued", date: transaction.queuedAt },
-          { step: "Sent", date: transaction.sentAt },
-          { isLatest: true, step: "Failed" },
-          { step: "Mined" },
-        ];
-      } else {
-        // Errored without sentAt: [ queued, errored, _sent, _mined ]
-        timeline = [
-          { step: "Queued", date: transaction.queuedAt },
-          { isLatest: true, step: "Failed" },
-          { step: "Sent" },
-          { step: "Mined" },
-        ];
-      }
-      break;
-    default:
-      return null;
-  }
-
-  const activeIdx = timeline.findIndex((s) => !!s.isLatest);
-
-  return (
-    <Stepper
-      index={activeIdx}
-      orientation="vertical"
-      height={12 * timeline.length}
-      gap="0"
-      size="xs"
-    >
-      {timeline.map((step, index) => {
-        const isFilled = index <= activeIdx;
-        return (
-          // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-          <Step key={index} as={Flex} w="full">
-            <StepIndicator>
-              <StepStatus
-                complete={<CheckIcon className="size-4" />}
-                active={<CheckIcon className="size-4" />}
-              />
-            </StepIndicator>
-            <Flex justify="space-between" w="full" mt={-1}>
-              <div className="flex flex-col gap-2">
-                {isFilled ? (
-                  <Text>{step.step}</Text>
-                ) : (
-                  <Text color="gray.600">{step.step}</Text>
-                )}
-                {step.cta}
-              </div>
-              {step.date && (
-                <Text fontSize="small">
-                  {prettyPrintTimestamp(step.date, index === 0)}
-                </Text>
-              )}
-            </Flex>
-            <StepSeparator />
-          </Step>
-        );
-      })}
-    </Stepper>
-  );
-};
-
-const prettyPrintTimestamp = (
-  t: string | undefined,
-  showDate = false,
-): string | null => {
-  if (!t) {
-    return null;
-  }
-
-  const date = new Date(t);
-  return showDate
-    ? date.toLocaleString(undefined, { timeZoneName: "short" })
-    : date.toLocaleTimeString(undefined, { timeZoneName: "short" });
-};
-
-const CancelTransactionButton = ({
-  transaction,
-  instanceUrl,
-  authToken,
-}: {
-  transaction: Transaction;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-  const cancelTransactionMutation = useMutation({
-    mutationFn: async () => {
-      const resp = await fetch(`${instanceUrl}transaction/cancel`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${authToken}`,
-          "x-backend-wallet-address": transaction.fromAddress ?? "",
-        },
-        body: JSON.stringify({ queueId: transaction.queueId }),
-      });
-
-      if (!resp.ok) {
-        const json = await resp.json();
-        throw json.error?.message;
-      }
-    },
-  });
-
-  const cancelTransactions = async () => {
-    const promise = cancelTransactionMutation.mutateAsync();
-    toast.promise(promise, {
-      success: "Transaction cancelled successfully",
-      error: "Failed to cancel transaction",
-    });
-
-    promise.then(() => {
-      onClose();
-    });
-  };
-
-  return (
-    <>
-      {/* @ts-expect-error - this works fine */}
-      <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={closeButtonRef}>
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
-          <ModalHeader>Cancel Transaction</ModalHeader>
-          <ModalBody>
-            <div className="flex flex-col gap-4">
-              <Text>Are you sure you want to cancel this transaction?</Text>
-              <FormControl>
-                <FormLabel>Queue ID</FormLabel>
-                <Text fontFamily="mono">{transaction.queueId}</Text>
-              </FormControl>
-              <FormControl>
-                <FormLabel>Submitted at</FormLabel>
-                <Text>
-                  {format(new Date(transaction.queuedAt ?? ""), "PP pp z")}
-                </Text>
-              </FormControl>
-              <FormControl>
-                <FormLabel>From</FormLabel>
-                <WalletAddress
-                  address={transaction.fromAddress ?? ""}
-                  shortenAddress={false}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel>To</FormLabel>
-                <CopyAddressButton
-                  address={transaction.toAddress ?? ""}
-                  copyIconPosition="right"
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel>Function</FormLabel>
-                <Text fontFamily="mono">{transaction.functionName}</Text>
-              </FormControl>
-
-              <Text>
-                If this transaction is already submitted, it may complete before
-                the cancellation is submitted.
-              </Text>
-            </div>
-          </ModalBody>
-
-          <ModalFooter as={Flex} gap={3}>
-            <Button
-              ref={closeButtonRef}
-              type="button"
-              onClick={onClose}
-              variant="ghost"
-            >
-              Close
-            </Button>
-            <Button
-              colorScheme="red"
-              onClick={cancelTransactions}
-              isLoading={cancelTransactionMutation.isPending}
-            >
-              Cancel transaction
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-
-      <Button onClick={onOpen} variant="outline" size="xs" colorScheme="red">
-        Cancel transaction
-      </Button>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
deleted file mode 100644
index 8a29343825f..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/transactions-table.tsx
+++ /dev/null
@@ -1,878 +0,0 @@
-import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
-import { WalletAddress } from "@/components/blocks/wallet-address";
-import { PaginationButtons } from "@/components/pagination-buttons";
-import { CopyAddressButton } from "@/components/ui/CopyAddressButton";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import type { ChartConfig } from "@/components/ui/chart";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Switch } from "@/components/ui/switch";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { normalizeTime } from "@/lib/time";
-import {
-  type Transaction,
-  useEngineTransactions,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { Collapse, Divider, useDisclosure } from "@chakra-ui/react";
-import { ChainIconClient } from "components/icons/ChainIcon";
-import { formatDistanceToNowStrict } from "date-fns";
-import { format, formatDate } from "date-fns/format";
-import { useAllChainsData } from "hooks/chains/allChains";
-import {
-  ExternalLinkIcon,
-  InfoIcon,
-  MoveLeftIcon,
-  MoveRightIcon,
-} from "lucide-react";
-import Link from "next/link";
-import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
-import { type ThirdwebClient, toTokens } from "thirdweb";
-import { FormLabel, LinkButton, Text } from "tw-components";
-import { TransactionTimeline } from "./transaction-timeline";
-
-export type EngineStatus =
-  | "errored"
-  | "mined"
-  | "cancelled"
-  | "sent"
-  | "retried"
-  | "processed"
-  | "queued"
-  | "user-op-sent";
-
-const statusDetails: Record<
-  EngineStatus,
-  {
-    name: string;
-    type: "success" | "destructive" | "warning";
-  }
-> = {
-  mined: {
-    name: "Mined",
-    type: "success",
-  },
-  errored: {
-    name: "Failed",
-    type: "destructive",
-  },
-  cancelled: {
-    name: "Cancelled",
-    type: "destructive",
-  },
-  queued: {
-    name: "Queued",
-    type: "warning",
-  },
-  processed: {
-    name: "Processed",
-    type: "warning",
-  },
-  sent: {
-    name: "Sent",
-    type: "warning",
-  },
-  "user-op-sent": {
-    name: "User Op Sent",
-    type: "warning",
-  },
-  retried: {
-    name: "Retried",
-    type: "success",
-  },
-};
-
-// TODO - add Status selector dropdown here
-export function TransactionsTable(props: {
-  instanceUrl: string;
-  authToken: string;
-  client: ThirdwebClient;
-}) {
-  const transactionDisclosure = useDisclosure();
-  const [selectedTransaction, setSelectedTransaction] =
-    useState<Transaction | null>(null);
-  const [autoUpdate, setAutoUpdate] = useState(true);
-  const [page, setPage] = useState(1);
-  const [status, setStatus] = useState<EngineStatus | undefined>(undefined);
-
-  const pageSize = 10;
-  const transactionsQuery = useEngineTransactions({
-    instanceUrl: props.instanceUrl,
-    autoUpdate,
-    authToken: props.authToken,
-    queryParams: {
-      limit: pageSize,
-      page: page,
-      status,
-    },
-  });
-
-  const transactions = transactionsQuery.data?.transactions ?? [];
-
-  const idx = selectedTransaction
-    ? transactions.indexOf(selectedTransaction)
-    : 0;
-
-  const totalCount = transactionsQuery.data?.totalCount ?? 0;
-  const totalPages = Math.ceil(totalCount / pageSize);
-  const showPagination = totalCount > pageSize;
-
-  const showSkeleton =
-    (transactionsQuery.isPlaceholderData && transactionsQuery.isFetching) ||
-    (transactionsQuery.isLoading && !transactionsQuery.isPlaceholderData);
-
-  return (
-    <div className="overflow-hidden rounded-lg border border-border bg-card">
-      <div className="flex flex-col gap-4 rounded-lg rounded-b-none px-6 py-6 lg:flex-row lg:justify-between">
-        <div>
-          <h2 className="font-semibold text-xl tracking-tight">
-            Transaction History
-          </h2>
-          <p className="text-muted-foreground text-sm">
-            Transactions sent from your backend wallets
-          </p>
-        </div>
-
-        <div className="flex items-center justify-end gap-5 border-border border-t pt-4 lg:border-none lg:pt-0">
-          <div className="flex shrink-0 items-center gap-2">
-            <Label htmlFor="auto-update">Auto Update</Label>
-            <Switch
-              checked={autoUpdate}
-              onCheckedChange={(v) => setAutoUpdate(!!v)}
-              id="auto-update"
-            />
-          </div>
-          <StatusSelector
-            status={status}
-            setStatus={(v) => {
-              setStatus(v);
-              // reset page
-              setPage(1);
-            }}
-          />
-        </div>
-      </div>
-
-      <TableContainer className="rounded-none border-x-0">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Queue ID</TableHead>
-              <TableHead>Chain</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>From</TableHead>
-              <TableHead>Tx Hash</TableHead>
-              <TableHead>Queued</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {showSkeleton ? (
-              <>
-                {new Array(pageSize).fill(0).map((_, i) => (
-                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                  <SkeletonRow key={i} />
-                ))}
-              </>
-            ) : (
-              <>
-                {transactions.map((tx) => (
-                  <TableRow
-                    onClick={() => {
-                      setSelectedTransaction(tx);
-                      transactionDisclosure.onOpen();
-                    }}
-                    key={`${tx.queueId}${tx.chainId}${tx.blockNumber}`}
-                    className="cursor-pointer hover:bg-accent/50"
-                  >
-                    {/* Queue ID */}
-                    <TableCell className="font-medium">
-                      <CopyAddressButton
-                        address={tx.queueId ? tx.queueId : ""}
-                        copyIconPosition="left"
-                        variant="ghost"
-                        className="text-muted-foreground"
-                      />
-                    </TableCell>
-
-                    {/* Chain Id */}
-                    <TableCell>
-                      <TxChainCell
-                        chainId={tx.chainId || undefined}
-                        client={props.client}
-                      />
-                    </TableCell>
-
-                    {/* Status */}
-                    <TableCell>
-                      <TxStatusCell transaction={tx} />
-                    </TableCell>
-
-                    {/* From Address */}
-                    <TableCell>
-                      {tx.fromAddress ? (
-                        <WalletAddress address={tx.fromAddress} />
-                      ) : (
-                        "N/A"
-                      )}
-                    </TableCell>
-
-                    {/* Tx Hash */}
-                    <TableCell>
-                      <TxHashCell transaction={tx} />
-                    </TableCell>
-
-                    {/* Queued At */}
-                    <TableCell>
-                      <TxQueuedAtCell transaction={tx} />
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </>
-            )}
-          </TableBody>
-        </Table>
-
-        {!showSkeleton && transactions.length === 0 && (
-          <div className="flex min-h-[200px] items-center justify-center">
-            No transactions found
-          </div>
-        )}
-      </TableContainer>
-
-      {showPagination && (
-        <div className="py-6">
-          <PaginationButtons
-            activePage={page}
-            onPageClick={setPage}
-            totalPages={totalPages}
-          />
-        </div>
-      )}
-
-      {transactionDisclosure.isOpen && selectedTransaction && (
-        <TransactionDetailsDrawer
-          transaction={selectedTransaction}
-          instanceUrl={props.instanceUrl}
-          authToken={props.authToken}
-          onClickPrevious={
-            idx > 0
-              ? () => setSelectedTransaction(transactions[idx - 1] || null)
-              : undefined
-          }
-          onClickNext={
-            idx < transactions.length - 1
-              ? () => setSelectedTransaction(transactions[idx + 1] || null)
-              : undefined
-          }
-          setSelectedTransaction={setSelectedTransaction}
-          client={props.client}
-        />
-      )}
-    </div>
-  );
-}
-
-function StatusSelector(props: {
-  status: EngineStatus | undefined;
-  setStatus: (value: EngineStatus | undefined) => void;
-}) {
-  const statuses = Object.keys(statusDetails) as EngineStatus[];
-
-  return (
-    <Select
-      value={props.status || "all"}
-      onValueChange={(v) => {
-        if (v === "all") {
-          props.setStatus(undefined);
-        } else {
-          props.setStatus(v as EngineStatus);
-        }
-      }}
-    >
-      <SelectTrigger className="min-w-[160px]">
-        <SelectValue placeholder="All" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          <SelectItem value="all">All Transactions</SelectItem>
-          {statuses.map((item) => {
-            return (
-              <SelectItem key={item} value={item}>
-                {statusDetails[item].name}
-              </SelectItem>
-            );
-          })}
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  );
-}
-
-function SkeletonRow() {
-  return (
-    <TableRow className="h-[73px]">
-      <TableCell>
-        <Skeleton className="h-6 w-[152px]" />
-      </TableCell>
-
-      <TableCell>
-        <Skeleton className="h-6 w-[155px]" />
-      </TableCell>
-
-      <TableCell>
-        <Skeleton className="h-6 w-[58px] rounded-full" />
-      </TableCell>
-
-      <TableCell>
-        <Skeleton className="h-6 w-[145px]" />
-      </TableCell>
-
-      <TableCell>
-        <Skeleton className="h-6 w-[160px]" />
-      </TableCell>
-
-      <TableCell>
-        <Skeleton className="h-6 w-[108px]" />
-      </TableCell>
-    </TableRow>
-  );
-}
-
-function TxChainCell(props: {
-  chainId: string | undefined;
-  client: ThirdwebClient;
-}) {
-  const { chainId, client } = props;
-  const { idToChain } = useAllChainsData();
-
-  if (!chainId) {
-    return "N/A";
-  }
-
-  const chain = idToChain.get(Number.parseInt(chainId));
-
-  if (!chain) {
-    return `Chain ID: ${chainId}`;
-  }
-
-  return (
-    <div className="flex items-center gap-2">
-      <ChainIconClient
-        className="size-5"
-        src={chain.icon?.url}
-        client={client}
-      />
-      <div className="max-w-[150px] truncate">
-        {chain.name ?? `Chain ID: ${chainId}`}
-      </div>
-    </div>
-  );
-}
-
-function TxStatusCell(props: {
-  transaction: Transaction;
-}) {
-  const { transaction } = props;
-  const { errorMessage, minedAt } = transaction;
-  const status = (transaction.status as EngineStatus) ?? null;
-  if (!status) {
-    return null;
-  }
-
-  const tooltip =
-    status === "errored"
-      ? errorMessage
-      : (status === "mined" || status === "retried") && minedAt
-        ? `Completed ${format(new Date(minedAt), "PP pp")}`
-        : undefined;
-
-  return (
-    <ToolTipLabel hoverable label={tooltip}>
-      <Badge variant={statusDetails[status].type} className="gap-2">
-        {statusDetails[status].name}
-        {errorMessage && <InfoIcon className="size-3" />}
-      </Badge>
-    </ToolTipLabel>
-  );
-}
-
-function TxHashCell(props: { transaction: Transaction }) {
-  const { idToChain } = useAllChainsData();
-  const { chainId, transactionHash } = props.transaction;
-  if (!transactionHash) {
-    return "N/A";
-  }
-
-  const chain = chainId ? idToChain.get(Number.parseInt(chainId)) : undefined;
-  const explorer = chain?.explorers?.[0];
-
-  const shortHash = `${transactionHash.slice(0, 6)}...${transactionHash.slice(-4)}`;
-  if (!explorer) {
-    return (
-      <CopyTextButton
-        textToCopy={transactionHash}
-        copyIconPosition="left"
-        textToShow={shortHash}
-        variant="ghost"
-        tooltip="Copy transaction hash"
-        className="font-mono text-muted-foreground text-sm"
-      />
-    );
-  }
-
-  return (
-    <Button
-      variant="ghost"
-      asChild
-      className="-translate-x-2 gap-2 font-mono"
-      size="sm"
-    >
-      <Link
-        href={`${explorer.url}/tx/${transactionHash}`}
-        target="_blank"
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        {shortHash}{" "}
-        <ExternalLinkIcon className="size-4 text-muted-foreground" />
-      </Link>
-    </Button>
-  );
-}
-
-function TxQueuedAtCell(props: { transaction: Transaction }) {
-  const value = props.transaction.queuedAt;
-  if (!value) {
-    return;
-  }
-
-  const date = new Date(value);
-  return (
-    <ToolTipLabel label={format(date, "PP pp z")}>
-      <p>{formatDistanceToNowStrict(date, { addSuffix: true })}</p>
-    </ToolTipLabel>
-  );
-}
-
-export function TransactionCharts(props: {
-  authToken: string;
-  instanceUrl: string;
-}) {
-  const transactionsQuery = useEngineTransactions({
-    instanceUrl: props.instanceUrl,
-    autoUpdate: false,
-    authToken: props.authToken,
-    queryParams: {
-      limit: 10000,
-      page: 1,
-    },
-  });
-
-  const transactions = transactionsQuery.data?.transactions ?? [];
-
-  const { analyticsData, chartConfig } = useMemo(() => {
-    if (!transactions.length) {
-      return {
-        analyticsData: [],
-        chartConfig: {},
-      };
-    }
-    const dayToTxCountMap: Map<number, Record<string, number>> = new Map();
-    const uniqueStatuses = new Set<string>();
-
-    for (const tx of transactions) {
-      if (!tx.queuedAt || !tx.status) {
-        continue;
-      }
-      const time = normalizeTime(new Date(tx.queuedAt)).getTime();
-      const entry = dayToTxCountMap.get(time) ?? {};
-      entry[tx.status] = (entry[tx.status] ?? 0) + 1;
-      uniqueStatuses.add(tx.status);
-      dayToTxCountMap.set(time, entry);
-    }
-
-    const analyticsData = Array.from(dayToTxCountMap.entries())
-      .map(([day, record]) => ({
-        time: new Date(day).getTime(),
-        ...record,
-      }))
-      .sort((a, b) => a.time - b.time);
-
-    const chartConfig: ChartConfig = {};
-    Array.from(uniqueStatuses).forEach((status, i) => {
-      chartConfig[status] = {
-        label: status.charAt(0).toUpperCase() + status.slice(1), // first letter uppercase
-        color:
-          status === "errored"
-            ? "hsl(var(--destructive-text))"
-            : status === "mined"
-              ? "hsl(var(--success-text))"
-              : `hsl(var(--chart-${(i % 15) + 3}))`,
-      };
-    });
-
-    return {
-      analyticsData,
-      chartConfig,
-    };
-  }, [transactions]);
-
-  return (
-    <ThirdwebBarChart
-      header={{
-        title: "Transactions Breakdown",
-        description: "Transactions sent from your backend wallets per day",
-        titleClassName: "text-xl mb-0",
-      }}
-      config={chartConfig}
-      data={analyticsData}
-      isPending={transactionsQuery.isPending}
-      chartClassName="aspect-[1.5] lg:aspect-[4.5]"
-      hideLabel={false}
-      variant="stacked"
-      showLegend
-      toolTipLabelFormatter={(_v, item) => {
-        if (Array.isArray(item)) {
-          const time = item[0].payload.time as number;
-          return formatDate(new Date(time), "MMM d, yyyy");
-        }
-        return undefined;
-      }}
-    />
-  );
-}
-
-const TransactionDetailsDrawer = ({
-  transaction,
-  instanceUrl,
-  onClickPrevious,
-  onClickNext,
-  setSelectedTransaction,
-  authToken,
-  client,
-}: {
-  transaction: Transaction;
-  instanceUrl: string;
-  onClickPrevious?: () => void;
-  onClickNext?: () => void;
-  setSelectedTransaction: Dispatch<SetStateAction<Transaction | null>>;
-  authToken: string;
-  client: ThirdwebClient;
-}) => {
-  const { idToChain } = useAllChainsData();
-  const errorMessageDisclosure = useDisclosure();
-  const advancedTxDetailsDisclosure = useDisclosure();
-
-  if (!transaction.chainId || !transaction.status) {
-    return null;
-  }
-
-  const chain = idToChain.get(Number.parseInt(transaction.chainId));
-  const decimals = chain?.nativeCurrency.decimals || 18;
-  const symbol = chain?.nativeCurrency.symbol || "ETH";
-  const explorer = chain?.explorers?.[0];
-
-  const status = statusDetails[transaction.status as EngineStatus];
-  const functionCalled =
-    transaction.extension && transaction.extension !== "none"
-      ? `${transaction.extension} ${transaction.functionName}`
-      : (transaction.functionName ?? null);
-
-  let txFeeDisplay = "N/A";
-  if (transaction.gasLimit) {
-    const gasPrice =
-      transaction.effectiveGasPrice ||
-      transaction.gasPrice ||
-      transaction.maxFeePerGas;
-    if (gasPrice) {
-      const txFeeWei = BigInt(transaction.gasLimit) * BigInt(gasPrice);
-      txFeeDisplay = `${toTokens(txFeeWei, decimals)} ${symbol}`;
-    }
-  }
-
-  const handleOpenChange = (isOpen: boolean) => {
-    setSelectedTransaction(isOpen ? transaction : null);
-  };
-
-  return (
-    <Sheet open={!!transaction} onOpenChange={handleOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:min-w-[500px] lg:min-w-[500px]">
-        <SheetHeader>
-          <SheetTitle className="mb-3 flex flex-row items-center gap-3 border-border border-b pb-3 text-left">
-            Transaction Details <Badge variant="outline">{status.name}</Badge>
-          </SheetTitle>
-        </SheetHeader>
-        <div className="flex flex-col gap-4">
-          <div>
-            <FormLabel>Queue ID</FormLabel>
-            <Text>{transaction.queueId}</Text>
-          </div>
-
-          <div>
-            <FormLabel>Chain</FormLabel>
-            <div className="flex items-center gap-2">
-              <ChainIconClient
-                className="size-5"
-                src={chain?.icon?.url}
-                client={client}
-              />
-              <span>{chain?.name}</span>
-            </div>
-          </div>
-
-          {functionCalled && (
-            <div>
-              <FormLabel>Function</FormLabel>
-              <Text>{functionCalled}</Text>
-            </div>
-          )}
-
-          <div>
-            <FormLabel>
-              {transaction.accountAddress ? "Signer Address" : "From Address"}
-            </FormLabel>
-            <LinkButton
-              variant="ghost"
-              isExternal
-              size="xs"
-              href={
-                explorer
-                  ? `${explorer.url}/address/${transaction.fromAddress}`
-                  : "#"
-              }
-            >
-              <Text fontFamily="mono">{transaction.fromAddress}</Text>
-            </LinkButton>
-          </div>
-
-          {transaction.accountAddress && (
-            <div>
-              <FormLabel>Account Address</FormLabel>
-              <LinkButton
-                variant="ghost"
-                isExternal
-                size="xs"
-                href={
-                  explorer
-                    ? `${explorer.url}/address/${transaction.accountAddress}`
-                    : "#"
-                }
-              >
-                <Text fontFamily="mono">{transaction.accountAddress}</Text>
-              </LinkButton>
-            </div>
-          )}
-
-          <div>
-            {/* The "to" address is usually a contract except for native token transfers. */}
-            <FormLabel>
-              {functionCalled === "transfer"
-                ? "Recipient Address"
-                : "Contract Address"}
-            </FormLabel>
-            <LinkButton
-              variant="ghost"
-              isExternal
-              size="xs"
-              href={
-                explorer
-                  ? `${explorer.url}/address/${transaction.toAddress}`
-                  : "#"
-              }
-            >
-              <Text fontFamily="mono">{transaction.toAddress}</Text>
-            </LinkButton>
-          </div>
-
-          {transaction.errorMessage && (
-            <div>
-              <FormLabel>Error</FormLabel>
-              <Text noOfLines={errorMessageDisclosure.isOpen ? undefined : 3}>
-                {transaction.errorMessage}
-              </Text>
-              <Button onClick={errorMessageDisclosure.onToggle} variant="link">
-                {errorMessageDisclosure.isOpen ? "Show less" : "Show more"}
-              </Button>
-            </div>
-          )}
-
-          <Divider />
-
-          <TransactionTimeline
-            transaction={transaction}
-            instanceUrl={instanceUrl}
-            authToken={authToken}
-          />
-
-          <Divider />
-
-          {/* On-chain details */}
-
-          <div>
-            <div className="flex flex-row">
-              <FormLabel>Value</FormLabel>
-              <ToolTipLabel
-                label={`The amount of ${symbol} sent to the "To" .`}
-              >
-                <InfoIcon className="size-4" />
-              </ToolTipLabel>
-            </div>
-            <Text>
-              {transaction.value
-                ? toTokens(BigInt(transaction.value), decimals)
-                : 0}{" "}
-              {symbol}
-            </Text>
-          </div>
-
-          {transaction.transactionHash && (
-            <>
-              <div>
-                <FormLabel>Transaction Hash</FormLabel>
-                <LinkButton
-                  variant="ghost"
-                  isExternal
-                  size="xs"
-                  href={
-                    explorer
-                      ? `${explorer.url}/tx/${transaction.transactionHash}`
-                      : "#"
-                  }
-                  maxW="100%"
-                >
-                  <Text fontFamily="mono" isTruncated>
-                    {transaction.transactionHash}
-                  </Text>
-                </LinkButton>
-              </div>
-
-              <div>
-                <FormLabel>Transaction Fee</FormLabel>
-                <Text>{txFeeDisplay}</Text>
-              </div>
-
-              <Collapse in={advancedTxDetailsDisclosure.isOpen}>
-                <div className="flex flex-col gap-4">
-                  {transaction.nonce && (
-                    <div>
-                      <div className="flex flex-row">
-                        <FormLabel>Nonce</FormLabel>
-                        <ToolTipLabel label="The nonce value this transaction was submitted to mempool.">
-                          <InfoIcon className="size-4" />
-                        </ToolTipLabel>
-                      </div>
-                      <Text>{transaction.nonce ?? "N/A"}</Text>
-                    </div>
-                  )}
-
-                  {transaction.gasLimit && (
-                    <div>
-                      <div className="flex flex-row">
-                        <FormLabel>Gas Units</FormLabel>
-                        <ToolTipLabel label="The gas units spent for this transaction.">
-                          <InfoIcon className="size-4" />
-                        </ToolTipLabel>
-                      </div>
-                      <Text>
-                        {Number(transaction.gasLimit).toLocaleString()}
-                      </Text>
-                    </div>
-                  )}
-
-                  {transaction.gasPrice && (
-                    <div>
-                      <div className="flex flex-row">
-                        <FormLabel>Gas Price</FormLabel>
-                        <ToolTipLabel label="The price in wei spent for each gas unit.">
-                          <InfoIcon className="size-4" />
-                        </ToolTipLabel>
-                      </div>
-                      <Text>
-                        {Number(transaction.gasPrice).toLocaleString()}
-                      </Text>
-                    </div>
-                  )}
-
-                  {transaction.blockNumber && (
-                    <div>
-                      <FormLabel>Block</FormLabel>
-                      <LinkButton
-                        variant="ghost"
-                        isExternal
-                        size="xs"
-                        href={
-                          explorer
-                            ? `${explorer.url}/block/${transaction.blockNumber}`
-                            : "#"
-                        }
-                        maxW="100%"
-                      >
-                        <Text>{transaction.blockNumber}</Text>
-                      </LinkButton>
-                    </div>
-                  )}
-                </div>
-              </Collapse>
-
-              <Button
-                onClick={advancedTxDetailsDisclosure.onToggle}
-                variant="link"
-                size="sm"
-                className="w-fit"
-              >
-                {advancedTxDetailsDisclosure.isOpen
-                  ? "Hide transaction details"
-                  : "Show transaction details"}
-              </Button>
-            </>
-          )}
-        </div>
-        <div className="mt-4 flex flex-row justify-end gap-3 border-border border-t pt-4">
-          <Button
-            disabled={!onClickPrevious}
-            onClick={onClickPrevious}
-            variant="outline"
-            className="gap-2"
-          >
-            <MoveLeftIcon className="size-4" />
-            Previous
-          </Button>
-          <Button
-            disabled={!onClickNext}
-            onClick={onClickNext}
-            variant="outline"
-            className="gap-2"
-          >
-            Next
-            <MoveRightIcon className="size-4" />
-          </Button>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/utils.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/utils.ts
deleted file mode 100644
index 75e6f6ca219..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/overview/components/utils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const prettyPrintCurrency = ({
-  amount,
-  symbol,
-}: {
-  amount?: string | number;
-  symbol?: string;
-}): string => {
-  const amountNumber =
-    typeof amount === "string" ? Number.parseFloat(amount) : (amount ?? 0);
-  return `${amountNumber.toFixed(6)} ${symbol || ""}`;
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/page.tsx
deleted file mode 100644
index bd6ec62012c..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { engineInstancePageHandler } from "../../_utils/getEngineInstancePageMeta";
-import { EngineOverview } from "./overview/components/engine-overview";
-import type { EngineInstancePageProps } from "./types";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return (
-    <EngineOverview
-      instance={instance}
-      teamSlug={params.team_slug}
-      authToken={authToken}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/add-relayer-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
deleted file mode 100644
index 25ac436ea03..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/add-relayer-button.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
-import {
-  type CreateRelayerInput,
-  useEngineBackendWallets,
-  useEngineCreateRelayer,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-  Textarea,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useAllChainsData } from "hooks/chains/allChains";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { CirclePlusIcon } from "lucide-react";
-import { useForm } from "react-hook-form";
-import { isAddress, shortenAddress } from "thirdweb/utils";
-import { Button, FormHelperText, FormLabel } from "tw-components";
-
-interface AddRelayerButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const AddRelayerButton: React.FC<AddRelayerButtonProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const disclosure = useDisclosure();
-
-  return (
-    <>
-      <Button
-        onClick={disclosure.onOpen}
-        variant="ghost"
-        size="sm"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        colorScheme="primary"
-        w="fit-content"
-      >
-        Add Relayer
-      </Button>
-
-      {disclosure.isOpen && (
-        <AddModal
-          instanceUrl={instanceUrl}
-          disclosure={disclosure}
-          authToken={authToken}
-        />
-      )}
-    </>
-  );
-};
-
-export interface AddModalInput {
-  chainId: number;
-  backendWalletAddress: string;
-  name?: string;
-  allowedContractsRaw: string;
-  allowedForwardersRaw: string;
-}
-
-const AddModal = ({
-  instanceUrl,
-  disclosure,
-  authToken,
-}: {
-  instanceUrl: string;
-  disclosure: UseDisclosureReturn;
-  authToken: string;
-}) => {
-  const client = useThirdwebClient();
-  const { mutate: createRelayer } = useEngineCreateRelayer({
-    instanceUrl,
-    authToken,
-  });
-  const { data: backendWallets } = useEngineBackendWallets({
-    instanceUrl,
-    authToken,
-  });
-  const { idToChain } = useAllChainsData();
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Relayer created successfully.",
-    "Failed to create relayer.",
-  );
-
-  const form = useForm<AddModalInput>({
-    defaultValues: {
-      chainId: 11155111, // sepolia chain id
-    },
-  });
-
-  const onSubmit = (data: AddModalInput) => {
-    const createRelayerData: CreateRelayerInput = {
-      chain: idToChain.get(data.chainId)?.slug ?? "unknown",
-      backendWalletAddress: data.backendWalletAddress,
-      name: data.name,
-      allowedContracts: parseAddressListRaw(data.allowedContractsRaw),
-      allowedForwarders: parseAddressListRaw(data.allowedForwardersRaw),
-    };
-
-    createRelayer(createRelayerData, {
-      onSuccess: () => {
-        onSuccess();
-        disclosure.onClose();
-        trackEvent({
-          category: "engine",
-          action: "create-relayer",
-          label: "success",
-          instance: instanceUrl,
-        });
-      },
-      onError: (error) => {
-        onError(error);
-        trackEvent({
-          category: "engine",
-          action: "create-relayer",
-          label: "error",
-          instance: instanceUrl,
-          error,
-        });
-      },
-    });
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent
-        className="!bg-background rounded-lg border border-border"
-        as="form"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <ModalHeader>Add Relayer</ModalHeader>
-        <ModalCloseButton />
-
-        <ModalBody>
-          <Flex flexDir="column" gap={4}>
-            <FormControl isRequired>
-              <FormLabel>Chain</FormLabel>
-              <SingleNetworkSelector
-                chainId={form.watch("chainId")}
-                onChange={(val) => form.setValue("chainId", val)}
-                client={client}
-              />
-            </FormControl>
-            <FormControl isRequired>
-              <FormLabel>Backend Wallet</FormLabel>
-              <Select
-                {...form.register("backendWalletAddress", { required: true })}
-              >
-                <option value="" disabled selected hidden>
-                  Select a backend wallet to use as a relayer
-                </option>
-                {backendWallets?.map((wallet) => (
-                  <option key={wallet.address} value={wallet.address}>
-                    {shortenAddress(wallet.address)}
-                    {wallet.label && ` (${wallet.label})`}
-                  </option>
-                ))}
-              </Select>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                type="text"
-                placeholder="Enter a description for this relayer"
-                {...form.register("name")}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>Allowed Contracts</FormLabel>
-              <Textarea
-                {...form.register("allowedContractsRaw")}
-                placeholder="Enter a comma or newline-separated list of contract addresses"
-                rows={4}
-              />
-              <FormHelperText>Allow all contracts if omitted.</FormHelperText>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Allowed Forwarders</FormLabel>
-              <Textarea
-                {...form.register("allowedForwardersRaw")}
-                placeholder="Enter a comma or newline-separated list of forwarder addresses"
-                rows={4}
-              />
-              <FormHelperText>Allow all forwarders if omitted.</FormHelperText>
-            </FormControl>
-          </Flex>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button type="button" onClick={disclosure.onClose} variant="ghost">
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            colorScheme="primary"
-            isDisabled={!form.formState.isValid}
-          >
-            Add
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-/**
- * Returns a list of valid addresses from a comma or newline-separated string.
- *
- * Example:
- *  input: 0xa5B8492D8223D255dB279C7c3ebdA34Be5eC9D85,0x4Ff9aa707AE1eAeb40E581DF2cf4e14AffcC553d
- *  output:
- *  [
- *    0xa5B8492D8223D255dB279C7c3ebdA34Be5eC9D85,
- *    0x4Ff9aa707AE1eAeb40E581DF2cf4e14AffcC553d,
- *  ]
- */
-export const parseAddressListRaw = (raw: string): string[] | undefined => {
-  const addresses = raw
-    .split(/[,\n]/)
-    .map((entry) => entry.trim())
-    .filter((entry) => isAddress(entry));
-  return addresses.length > 0 ? addresses : undefined;
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/engine-relayer.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/engine-relayer.tsx
deleted file mode 100644
index 6529bb420a8..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/engine-relayer.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { useEngineRelayer } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Heading, Link, Text } from "tw-components";
-import { AddRelayerButton } from "./add-relayer-button";
-import { RelayersTable } from "./relayers-table";
-
-interface EngineRelayerProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const EngineRelayer: React.FC<EngineRelayerProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const relayers = useEngineRelayer({
-    instanceUrl,
-    authToken,
-  });
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Heading size="title.md">Relayers</Heading>
-        <Text>
-          Use relayers to submit transactions from your backend wallets on
-          behalf of your users.{" "}
-          <Link
-            href="https://portal.thirdweb.com/engine/features/relayers"
-            color="primary.500"
-            isExternal
-          >
-            Learn more about relayers
-          </Link>
-          .
-        </Text>
-      </div>
-
-      <RelayersTable
-        instanceUrl={instanceUrl}
-        relayers={relayers.data || []}
-        isPending={relayers.isPending}
-        isFetched={relayers.isFetched}
-        authToken={authToken}
-      />
-      <AddRelayerButton instanceUrl={instanceUrl} authToken={authToken} />
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
deleted file mode 100644
index 55f5b94bedc..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/relayers-table.tsx
+++ /dev/null
@@ -1,449 +0,0 @@
-import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
-import {
-  type EngineRelayer,
-  type UpdateRelayerInput,
-  useEngineBackendWallets,
-  useEngineRevokeRelayer,
-  useEngineUpdateRelayer,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-  Textarea,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { createColumnHelper } from "@tanstack/react-table";
-import { ChainIconClient } from "components/icons/ChainIcon";
-import { TWTable } from "components/shared/TWTable";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useAllChainsData } from "hooks/chains/allChains";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { PencilIcon, Trash2Icon } from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { shortenAddress } from "thirdweb/utils";
-import {
-  Button,
-  FormHelperText,
-  FormLabel,
-  LinkButton,
-  Text,
-  TrackedCopyButton,
-} from "tw-components";
-import { type AddModalInput, parseAddressListRaw } from "./add-relayer-button";
-
-interface RelayersTableProps {
-  instanceUrl: string;
-  relayers: EngineRelayer[];
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-}
-
-const columnHelper = createColumnHelper<EngineRelayer>();
-
-export const RelayersTable: React.FC<RelayersTableProps> = ({
-  instanceUrl,
-  relayers,
-  isPending,
-  isFetched,
-  authToken,
-}) => {
-  const editDisclosure = useDisclosure();
-  const removeDisclosure = useDisclosure();
-  const [selectedRelayer, setSelectedRelayer] = useState<EngineRelayer>();
-  const { idToChain } = useAllChainsData();
-  const client = useThirdwebClient();
-
-  const columns = [
-    columnHelper.accessor("chainId", {
-      header: "Chain",
-      cell: (cell) => {
-        const chain = idToChain.get(Number.parseInt(cell.getValue()));
-        return (
-          <Flex align="center" gap={2}>
-            <ChainIconClient
-              className="size-3"
-              src={chain?.icon?.url}
-              client={client}
-            />
-            <Text>{chain?.name ?? "N/A"}</Text>
-          </Flex>
-        );
-      },
-    }),
-    columnHelper.accessor("backendWalletAddress", {
-      header: "Backend Wallet",
-      cell: (cell) => {
-        const { chainId, backendWalletAddress } = cell.row.original;
-        const chain = idToChain.get(Number.parseInt(chainId));
-
-        const explorer = chain?.explorers?.[0];
-        if (!explorer) {
-          return backendWalletAddress;
-        }
-
-        return (
-          <LinkButton
-            key={explorer.name}
-            variant="ghost"
-            isExternal
-            size="xs"
-            href={`${explorer.url}/address/${backendWalletAddress}`}
-            fontFamily="mono"
-          >
-            {backendWalletAddress}
-          </LinkButton>
-        );
-      },
-    }),
-    columnHelper.accessor("name", {
-      header: "Label",
-      cell: (cell) => {
-        return <Text>{cell.getValue()}</Text>;
-      },
-    }),
-    columnHelper.accessor("allowedContracts", {
-      header: "Allowed Contracts",
-      cell: (cell) => {
-        const allowedContracts = cell.getValue() ?? [];
-        const value =
-          allowedContracts.length === 0
-            ? "*"
-            : allowedContracts.length === 1
-              ? `${allowedContracts.length} address`
-              : `${allowedContracts.length} addresses`;
-        return <Text>{value}</Text>;
-      },
-    }),
-    columnHelper.accessor("allowedForwarders", {
-      header: "Allowed Forwarders",
-      cell: (cell) => {
-        const allowedForwarders = cell.getValue() ?? [];
-        const value =
-          allowedForwarders.length === 0
-            ? "*"
-            : allowedForwarders.length === 1
-              ? `${allowedForwarders.length} address`
-              : `${allowedForwarders.length} addresses`;
-        return <Text>{value}</Text>;
-      },
-    }),
-    columnHelper.accessor("id", {
-      header: "URL",
-      cell: (cell) => {
-        const id = cell.getValue();
-        const url = `${instanceUrl}relayer/${id}`;
-        return (
-          <TrackedCopyButton
-            value={url}
-            category="engine"
-            aria-label="Copy to clipboard"
-          />
-        );
-      },
-    }),
-  ];
-
-  return (
-    <>
-      <TWTable
-        title="relayers"
-        data={relayers}
-        columns={columns}
-        isPending={isPending}
-        isFetched={isFetched}
-        onMenuClick={[
-          {
-            icon: <PencilIcon className="size-4" />,
-            text: "Edit",
-            onClick: (relayer) => {
-              setSelectedRelayer(relayer);
-              editDisclosure.onOpen();
-            },
-          },
-          {
-            icon: <Trash2Icon className="size-4" />,
-            text: "Remove",
-            onClick: (relayer) => {
-              setSelectedRelayer(relayer);
-              removeDisclosure.onOpen();
-            },
-            isDestructive: true,
-          },
-        ]}
-      />
-
-      {selectedRelayer && editDisclosure.isOpen && (
-        <EditModal
-          relayer={selectedRelayer}
-          disclosure={editDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-      {selectedRelayer && removeDisclosure.isOpen && (
-        <RemoveModal
-          relayer={selectedRelayer}
-          disclosure={removeDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-    </>
-  );
-};
-
-const EditModal = ({
-  relayer,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: {
-  relayer: EngineRelayer;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const client = useThirdwebClient();
-  const { mutate: updateRelayer } = useEngineUpdateRelayer({
-    instanceUrl,
-    authToken,
-  });
-  const { data: backendWallets } = useEngineBackendWallets({
-    instanceUrl,
-    authToken,
-  });
-  const { idToChain } = useAllChainsData();
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully updated relayer",
-    "Failed to update relayer",
-  );
-
-  const form = useForm<AddModalInput>({
-    defaultValues: {
-      ...relayer,
-      chainId: Number.parseInt(relayer.chainId),
-      allowedContractsRaw: (relayer.allowedContracts ?? []).join("\n"),
-      allowedForwardersRaw: (relayer.allowedForwarders ?? []).join("\n"),
-    },
-  });
-
-  const onSubmit = (data: AddModalInput) => {
-    const updateRelayerData: UpdateRelayerInput = {
-      id: relayer.id,
-      chain: idToChain.get(data.chainId)?.slug ?? "unknown",
-      backendWalletAddress: data.backendWalletAddress,
-      name: data.name,
-      allowedContracts: parseAddressListRaw(data.allowedContractsRaw),
-      allowedForwarders: parseAddressListRaw(data.allowedForwardersRaw),
-    };
-
-    updateRelayer(updateRelayerData, {
-      onSuccess: () => {
-        onSuccess();
-        disclosure.onClose();
-        trackEvent({
-          category: "engine",
-          action: "update-relayer",
-          label: "success",
-          instance: instanceUrl,
-        });
-      },
-      onError: (error) => {
-        onError(error);
-        trackEvent({
-          category: "engine",
-          action: "update-relayer",
-          label: "error",
-          instance: instanceUrl,
-          error,
-        });
-      },
-    });
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent
-        className="!bg-background rounded-lg border border-border"
-        as="form"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <ModalHeader>Update Relayer</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <FormControl>
-              <FormLabel>Chain</FormLabel>
-              <SingleNetworkSelector
-                chainId={form.watch("chainId")}
-                onChange={(val) => form.setValue("chainId", val)}
-                client={client}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>Backend Wallet</FormLabel>
-              <Select
-                {...form.register("backendWalletAddress", { required: true })}
-              >
-                {backendWallets?.map((wallet) => (
-                  <option key={wallet.address} value={wallet.address}>
-                    {shortenAddress(wallet.address)}
-                    {wallet.label && ` (${wallet.label})`}
-                  </option>
-                ))}
-              </Select>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Input
-                type="text"
-                placeholder="Enter a description for this relayer"
-                {...form.register("name")}
-              />
-            </FormControl>
-            <FormControl>
-              <FormLabel>Allowed Contracts</FormLabel>
-              <Textarea
-                {...form.register("allowedContractsRaw")}
-                placeholder="Enter a comma or newline-separated list of contract addresses"
-                rows={4}
-              />
-              <FormHelperText>Allow all contracts if omitted.</FormHelperText>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Allowed Forwarders</FormLabel>
-              <Textarea
-                {...form.register("allowedForwardersRaw")}
-                placeholder="Enter a comma or newline-separated list of forwarder addresses"
-                rows={4}
-              />
-              <FormHelperText>Allow all forwarders if omitted.</FormHelperText>
-            </FormControl>
-          </div>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button type="button" onClick={disclosure.onClose} variant="ghost">
-            Cancel
-          </Button>
-          <Button type="submit" colorScheme="blue">
-            Save
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-const RemoveModal = ({
-  relayer,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: {
-  relayer: EngineRelayer;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}) => {
-  const client = useThirdwebClient();
-  const { mutate: revokeRelayer } = useEngineRevokeRelayer({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const { onSuccess, onError } = useTxNotifications(
-    "Successfully removed relayer",
-    "Failed to remove relayer",
-  );
-  const { idToChain } = useAllChainsData();
-
-  const onClick = () => {
-    revokeRelayer(
-      { id: relayer.id },
-      {
-        onSuccess: () => {
-          onSuccess();
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "revoke-relayer",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          onError(error);
-          trackEvent({
-            category: "engine",
-            action: "revoke-relayer",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Remove Relayer</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to remove this relayer?</Text>
-            <FormControl>
-              <FormLabel>Chain</FormLabel>
-              <Flex align="center" gap={2}>
-                <ChainIconClient
-                  className="size-3"
-                  src={
-                    idToChain.get(Number.parseInt(relayer.chainId))?.icon?.url
-                  }
-                  client={client}
-                />
-                <Text>
-                  {idToChain.get(Number.parseInt(relayer.chainId))?.name}
-                </Text>
-              </Flex>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Backend Wallet</FormLabel>
-              <Text>{relayer.backendWalletAddress}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Label</FormLabel>
-              <Text>{relayer.name ?? <em>N/A</em>}</Text>
-            </FormControl>
-          </div>
-        </ModalBody>
-        <ModalFooter as={Flex} gap={3}>
-          <Button type="button" onClick={disclosure.onClose} variant="ghost">
-            Cancel
-          </Button>
-          <Button type="submit" colorScheme="red" onClick={onClick}>
-            Remove
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/page.tsx
deleted file mode 100644
index 3450919eb7e..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { EngineRelayer } from "./components/engine-relayer";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return <EngineRelayer instanceUrl={instance.url} authToken={authToken} />;
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/types.ts
deleted file mode 100644
index 5f004e8d3f8..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type EngineInstancePageProps = {
-  params: Promise<{
-    team_slug: string;
-    engineId: string;
-  }>;
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx
deleted file mode 100644
index e2786aa4181..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/create-wallet-credential-button.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { useEngineCreateWalletCredential } from "@3rdweb-sdk/react/hooks/useEngine";
-import { useTrack } from "hooks/analytics/useTrack";
-import { Plus } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import { CredentialForm } from "./credential-form";
-import type { CredentialFormData } from "./types";
-
-interface CreateWalletCredentialButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const CreateWalletCredentialButton: React.FC<
-  CreateWalletCredentialButtonProps
-> = ({ instanceUrl, authToken }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const trackEvent = useTrack();
-
-  const createCredential = useEngineCreateWalletCredential({
-    instanceUrl,
-    authToken,
-  });
-
-  const handleSubmit = async (data: CredentialFormData) => {
-    const promise = createCredential.mutateAsync(data);
-
-    toast.promise(promise, {
-      success: () => {
-        setIsOpen(false);
-        trackEvent({
-          category: "engine",
-          action: "create-wallet-credential",
-          label: "success",
-          type: data.type,
-        });
-        return "Wallet credential created successfully";
-      },
-      error: (error) => {
-        trackEvent({
-          category: "engine",
-          action: "create-wallet-credential",
-          label: "error",
-          type: data.type,
-          error,
-        });
-        return "Failed to create wallet credential";
-      },
-    });
-  };
-
-  return (
-    <>
-      <Button
-        onClick={() => {
-          trackEvent({
-            category: "engine",
-            action: "open-create-wallet-credential",
-          });
-          setIsOpen(true);
-        }}
-      >
-        <Plus className="mr-2 h-4 w-4" />
-        Create Wallet Credential
-      </Button>
-
-      <CredentialForm
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-        onSubmit={async (data) => handleSubmit(data as CredentialFormData)}
-        title="Create Wallet Credential"
-        submitButtonText="Create"
-        isPending={createCredential.isPending}
-      />
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
deleted file mode 100644
index 8de90292370..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-form.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import {
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Form } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { Dialog } from "@radix-ui/react-dialog";
-import { useForm } from "react-hook-form";
-import { CircleCredentialFields } from "./credential-type-fields/circle";
-import {
-  CREDENTIAL_TYPE_OPTIONS,
-  type CredentialFormData,
-  type CredentialType,
-  type CredentialUpdateFormData,
-} from "./types";
-
-interface CredentialFormProps {
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSubmit: (
-    data: CredentialFormData | CredentialUpdateFormData,
-  ) => Promise<void>;
-  title: string;
-  submitButtonText: string;
-  isPending: boolean;
-  defaultValues?: Partial<CredentialFormData | CredentialUpdateFormData>;
-  hideTypeSelect?: boolean;
-  isUpdate?: boolean;
-}
-
-export const CredentialForm = ({
-  isOpen,
-  onOpenChange,
-  onSubmit,
-  title,
-  submitButtonText,
-  isPending,
-  defaultValues,
-  hideTypeSelect = false,
-  isUpdate = false,
-}: CredentialFormProps) => {
-  const form = useForm<CredentialFormData | CredentialUpdateFormData>({
-    defaultValues: {
-      type: "circle" as CredentialType,
-      label: "",
-      ...defaultValues,
-    },
-    mode: "onChange",
-  });
-
-  const selectedType = form.watch("type");
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent className="overflow-hidden p-0">
-        <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit((data) => {
-              return onSubmit(data);
-            })}
-          >
-            <div className="p-6">
-              <DialogHeader className="mb-4">
-                <DialogTitle>{title}</DialogTitle>
-                <DialogDescription>
-                  <TrackedLinkTW
-                    href="https://portal.thirdweb.com/engine/features/wallet-credentials"
-                    target="_blank"
-                    label="learn-more"
-                    category="engine"
-                    className="text-link-foreground hover:text-foreground"
-                  >
-                    Learn more about wallet credentials
-                  </TrackedLinkTW>
-                </DialogDescription>
-              </DialogHeader>
-
-              <div className="flex flex-col gap-5">
-                {/* Type */}
-                {!hideTypeSelect && (
-                  <FormFieldSetup
-                    label="Type"
-                    errorMessage={
-                      form.getFieldState("type", form.formState).error?.message
-                    }
-                    htmlFor="credential-type"
-                    isRequired
-                    tooltip={null}
-                  >
-                    <Select
-                      onValueChange={(value) =>
-                        form.setValue("type", value as CredentialType)
-                      }
-                      value={form.watch("type")}
-                    >
-                      <SelectTrigger className="bg-card">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectGroup>
-                          {CREDENTIAL_TYPE_OPTIONS.map((option) => (
-                            <SelectItem key={option.value} value={option.value}>
-                              {option.label}
-                            </SelectItem>
-                          ))}
-                        </SelectGroup>
-                      </SelectContent>
-                    </Select>
-                  </FormFieldSetup>
-                )}
-
-                {/* Label */}
-                <FormFieldSetup
-                  label="Label"
-                  errorMessage={
-                    form.getFieldState("label", form.formState).error?.message
-                  }
-                  htmlFor="credential-label"
-                  isRequired
-                  tooltip={null}
-                >
-                  <Input
-                    id="credential-label"
-                    type="text"
-                    placeholder="A description to identify this credential"
-                    className="bg-card"
-                    {...form.register("label", { required: true })}
-                  />
-                </FormFieldSetup>
-
-                {/* Type-specific fields */}
-                {selectedType === "circle" && (
-                  <CircleCredentialFields form={form} isUpdate={isUpdate} />
-                )}
-              </div>
-            </div>
-
-            <DialogFooter className="mt-4 gap-4 border-border border-t bg-card p-6 lg:gap-2">
-              <Button variant="outline" onClick={() => onOpenChange(false)}>
-                Cancel
-              </Button>
-              <Button
-                type="submit"
-                className="min-w-28 gap-2"
-                disabled={!form.formState.isValid || isPending}
-              >
-                {isPending && <Spinner className="size-4" />}
-                {submitButtonText}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx
deleted file mode 100644
index 825b8ce1ae2..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/credential-type-fields/circle.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
-import { Input } from "@/components/ui/input";
-import Link from "next/link";
-import type { UseFormReturn } from "react-hook-form";
-import type { CredentialFormData, CredentialUpdateFormData } from "../types";
-
-interface CircleCredentialFieldsProps {
-  form: UseFormReturn<CredentialFormData | CredentialUpdateFormData>;
-  isUpdate?: boolean;
-}
-
-export const CircleCredentialFields: React.FC<CircleCredentialFieldsProps> = ({
-  form,
-  isUpdate = false,
-}) => {
-  return (
-    <>
-      <FormFieldSetup
-        label="Entity Secret"
-        errorMessage={
-          form.getFieldState("entitySecret", form.formState).error?.message
-        }
-        htmlFor="entity-secret"
-        isRequired={!isUpdate}
-        tooltip={null}
-        helperText={
-          <>
-            Entity Secret is a 32-byte private key designed to secure your
-            Developer-Controlled wallets{" "}
-            <Link
-              href="https://developers.circle.com/w3s/entity-secret-management"
-              target="_blank"
-              className="text-link-foreground hover:text-foreground"
-            >
-              Learn more about entity secret management
-            </Link>
-          </>
-        }
-      >
-        <Input
-          id="entity-secret"
-          type="password"
-          className="bg-card"
-          placeholder={
-            isUpdate
-              ? "Leave empty to keep existing secret"
-              : "Your Circle entity secret"
-          }
-          {...form.register("entitySecret", {
-            required: !isUpdate,
-            pattern: {
-              value: /^([0-9a-fA-F]{64})?$/,
-              message:
-                "Entity secret must be a 32-byte hex string (64 characters)",
-            },
-            setValueAs: (value: string) => (value === "" ? undefined : value),
-          })}
-        />
-      </FormFieldSetup>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx
deleted file mode 100644
index 0ac3d1675c5..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/edit-wallet-credential-button.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-  type WalletCredential,
-  useEngineUpdateWalletCredential,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { useTrack } from "hooks/analytics/useTrack";
-import { PencilIcon } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import { CredentialForm } from "./credential-form";
-import type { CredentialUpdateFormData } from "./types";
-
-interface EditWalletCredentialButtonProps {
-  credential: WalletCredential;
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const EditWalletCredentialButton: React.FC<
-  EditWalletCredentialButtonProps
-> = ({ credential, instanceUrl, authToken }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const trackEvent = useTrack();
-  const updateCredential = useEngineUpdateWalletCredential({
-    instanceUrl,
-    authToken,
-  });
-
-  const handleSubmit = async (data: CredentialUpdateFormData) => {
-    const promise = updateCredential.mutateAsync({
-      id: credential.id,
-      ...data,
-    });
-
-    toast.promise(promise, {
-      success: () => {
-        setIsOpen(false);
-        trackEvent({
-          category: "engine",
-          action: "update-wallet-credential",
-          label: "success",
-          type: data.type,
-        });
-        return "Wallet credential updated successfully";
-      },
-      error: (error) => {
-        console.log(error);
-        trackEvent({
-          category: "engine",
-          action: "update-wallet-credential",
-          label: "error",
-          type: data.type,
-          error,
-        });
-        return "Failed to update wallet credential";
-      },
-    });
-  };
-
-  return (
-    <>
-      <Button
-        variant="ghost"
-        size="icon"
-        onClick={() => {
-          trackEvent({
-            category: "engine",
-            action: "open-edit-wallet-credential",
-          });
-          setIsOpen(true);
-        }}
-        className="size-8"
-      >
-        <PencilIcon className="size-4" />
-      </Button>
-
-      <CredentialForm
-        isOpen={isOpen}
-        onOpenChange={setIsOpen}
-        onSubmit={async (data) => {
-          return new Promise<void>((resolve) => {
-            handleSubmit(data as CredentialUpdateFormData).then(resolve);
-          });
-        }}
-        title="Edit Wallet Credential"
-        submitButtonText="Save Changes"
-        isPending={updateCredential.isPending}
-        defaultValues={{
-          type: credential.type as "circle",
-          label: credential.label || "",
-        }}
-        hideTypeSelect
-        isUpdate
-      />
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/types.ts
deleted file mode 100644
index f2fb624acd0..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/types.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-interface BaseCredentialFormData {
-  type: string;
-  label: string;
-}
-
-type CircleCredentialFormData = BaseCredentialFormData & {
-  type: "circle";
-  entitySecret: string;
-};
-
-type CircleCredentialUpdateFormData = BaseCredentialFormData & {
-  type: "circle";
-  entitySecret?: string;
-};
-
-export type CredentialFormData = CircleCredentialFormData;
-export type CredentialUpdateFormData = CircleCredentialUpdateFormData;
-
-export const CREDENTIAL_TYPE_OPTIONS = [
-  { value: "circle", label: "Circle" },
-] as const;
-
-export type CredentialType = (typeof CREDENTIAL_TYPE_OPTIONS)[number]["value"];
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
deleted file mode 100644
index 1e140c0d71d..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials-table.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Badge } from "@/components/ui/badge";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import type { WalletCredential } from "@3rdweb-sdk/react/hooks/useEngine";
-import { format } from "date-fns";
-import { EditWalletCredentialButton } from "./edit-wallet-credential-button";
-
-interface WalletCredentialsTableProps {
-  credentials: WalletCredential[];
-  isPending: boolean;
-  isFetched: boolean;
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const WalletCredentialsTable: React.FC<WalletCredentialsTableProps> = ({
-  credentials,
-  isPending,
-  isFetched,
-  instanceUrl,
-  authToken,
-}) => {
-  if (isPending && !isFetched) {
-    return (
-      <div className="flex min-h-[300px] grow items-center justify-center">
-        <Spinner className="size-10" />
-      </div>
-    );
-  }
-
-  if (credentials.length === 0) {
-    return (
-      <div className="flex min-h-[300px] grow items-center justify-center">
-        <p className="text-muted-foreground text-sm">No credentials found</p>
-      </div>
-    );
-  }
-
-  return (
-    <TableContainer className="border-none">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>ID</TableHead>
-            <TableHead>Label</TableHead>
-            <TableHead>Type</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead>Updated</TableHead>
-            <TableHead>Default</TableHead>
-            <TableHead className="w-0" />
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {credentials.map((credential) => (
-            <TableRow key={credential.id}>
-              <TableCell>
-                <CopyTextButton
-                  textToCopy={credential.id}
-                  textToShow={`${credential.id.slice(0, 8)}...`}
-                  variant="secondary"
-                  className="font-mono text-xs"
-                  tooltip="Copy credential ID"
-                  copyIconPosition="right"
-                />
-              </TableCell>
-              <TableCell>{credential.label || "-"}</TableCell>
-              <TableCell>
-                <Badge variant="outline">{credential.type}</Badge>
-              </TableCell>
-              <TableCell>
-                {format(new Date(credential.createdAt), "MMM d, yyyy")}
-              </TableCell>
-              <TableCell>
-                {format(new Date(credential.updatedAt), "MMM d, yyyy")}
-              </TableCell>
-              <TableCell>
-                {credential.isDefault ? (
-                  <Badge variant="success">Yes</Badge>
-                ) : (
-                  <Badge variant="outline">No</Badge>
-                )}
-              </TableCell>
-              <TableCell>
-                <EditWalletCredentialButton
-                  credential={credential}
-                  instanceUrl={instanceUrl}
-                  authToken={authToken}
-                />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
deleted file mode 100644
index 40cf4aee0a0..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/components/wallet-credentials.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import {
-  useEngineWalletCredentials,
-  useHasEngineFeature,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import { CircleAlertIcon } from "lucide-react";
-import Link from "next/link";
-import { CreateWalletCredentialButton } from "./create-wallet-credential-button";
-import { WalletCredentialsTable } from "./wallet-credentials-table";
-
-interface WalletCredentialsProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const WalletCredentialsSection: React.FC<WalletCredentialsProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const {
-    data: credentials = [],
-    isPending,
-    isFetched,
-  } = useEngineWalletCredentials({
-    instanceUrl,
-    authToken,
-  });
-
-  const {
-    isSupported: supportsWalletCredentials,
-    query: { isPending: isFeatureLoading },
-  } = useHasEngineFeature(instanceUrl, "WALLET_CREDENTIALS");
-
-  if (isFeatureLoading) {
-    return (
-      <div className="flex min-h-[500px] grow items-center justify-center rounded-lg border border-border">
-        <Spinner className="size-10" />
-      </div>
-    );
-  }
-
-  if (!supportsWalletCredentials) {
-    return (
-      <Alert variant="warning">
-        <CircleAlertIcon className="size-4" />
-        <AlertTitle>Update Required</AlertTitle>
-        <AlertDescription>
-          Wallet credentials support requires a newer version of Engine. Please
-          update your Engine instance to use this feature.
-        </AlertDescription>
-      </Alert>
-    );
-  }
-
-  return (
-    <section className="rounded-lg border border-border bg-card">
-      <div className="flex flex-col gap-5 border-border border-b p-6 lg:flex-row lg:items-center lg:justify-between">
-        <div>
-          <h2 className="mb-1 font-semibold text-xl tracking-tight">
-            Wallet Credentials
-          </h2>
-          <p className="text-muted-foreground text-sm leading-relaxed">
-            Manage your wallet credentials for different providers.{" "}
-            <Link
-              href="https://portal.thirdweb.com/engine/features/wallet-credentials"
-              target="_blank"
-            >
-              Learn more about wallet credentials.
-            </Link>
-          </p>
-        </div>
-
-        <div className="flex flex-col items-end gap-4 border-border max-md:w-full max-md:border-t max-md:pt-6">
-          <CreateWalletCredentialButton
-            instanceUrl={instanceUrl}
-            authToken={authToken}
-          />
-        </div>
-      </div>
-
-      <WalletCredentialsTable
-        credentials={credentials}
-        isPending={isPending}
-        isFetched={isFetched}
-        instanceUrl={instanceUrl}
-        authToken={authToken}
-      />
-    </section>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/page.tsx
deleted file mode 100644
index 21470354729..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/wallet-credentials/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { WalletCredentialsSection } from "./components/wallet-credentials";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return (
-    <WalletCredentialsSection
-      instanceUrl={instance.url}
-      authToken={authToken}
-    />
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
deleted file mode 100644
index 4f84ea589e4..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/add-webhook-button.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import {
-  type CreateWebhookInput,
-  useEngineCreateWebhook,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Select,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
-import { CirclePlusIcon } from "lucide-react";
-import { useForm } from "react-hook-form";
-import { Button, FormLabel } from "tw-components";
-import { beautifyString } from "./webhooks-table";
-
-interface AddWebhookButtonProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-const WEBHOOK_EVENT_TYPES = [
-  "all_transactions",
-  "sent_transaction",
-  "mined_transaction",
-  "errored_transaction",
-  "cancelled_transaction",
-  "backend_wallet_balance",
-  "auth",
-];
-
-export const AddWebhookButton: React.FC<AddWebhookButtonProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const { mutate: createWebhook } = useEngineCreateWebhook({
-    instanceUrl,
-    authToken,
-  });
-  const trackEvent = useTrack();
-  const form = useForm<CreateWebhookInput>();
-
-  const { onSuccess, onError } = useTxNotifications(
-    "Webhook created successfully.",
-    "Failed to create webhook.",
-  );
-
-  return (
-    <>
-      <Button
-        onClick={onOpen}
-        variant="ghost"
-        size="sm"
-        leftIcon={<CirclePlusIcon className="size-6" />}
-        colorScheme="primary"
-        w="fit-content"
-      >
-        Create Webhook
-      </Button>
-
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
-        <ModalOverlay />
-        <ModalContent
-          className="!bg-background rounded-lg border border-border"
-          as="form"
-          onSubmit={form.handleSubmit((data) => {
-            createWebhook(data, {
-              onSuccess: () => {
-                onSuccess();
-                onClose();
-                trackEvent({
-                  category: "engine",
-                  action: "create-webhook",
-                  label: "success",
-                  instance: instanceUrl,
-                });
-              },
-              onError: (error) => {
-                onError(error);
-                trackEvent({
-                  category: "engine",
-                  action: "create-webhook",
-                  label: "error",
-                  instance: instanceUrl,
-                  error,
-                });
-              },
-            });
-          })}
-        >
-          <ModalHeader>Create Webhook</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Flex flexDir="column" gap={4}>
-              <FormControl isRequired>
-                <FormLabel>Event Type</FormLabel>
-                <Select {...form.register("eventType", { required: true })}>
-                  {WEBHOOK_EVENT_TYPES.map((eventType) => (
-                    <option key={eventType} value={eventType}>
-                      {beautifyString(eventType)}
-                    </option>
-                  ))}
-                </Select>
-              </FormControl>
-              <FormControl isRequired>
-                <FormLabel>Name</FormLabel>
-                <Input
-                  type="text"
-                  placeholder="My webhook"
-                  {...form.register("name", { required: true })}
-                />
-              </FormControl>
-              <FormControl isRequired>
-                <FormLabel>URL</FormLabel>
-                <Input
-                  type="url"
-                  placeholder="https://"
-                  {...form.register("url", { required: true })}
-                />
-              </FormControl>
-            </Flex>
-          </ModalBody>
-
-          <ModalFooter as={Flex} gap={3}>
-            <Button type="button" onClick={onClose} variant="ghost">
-              Cancel
-            </Button>
-            <Button type="submit" colorScheme="primary">
-              Create
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
deleted file mode 100644
index 26bc2c9176a..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/engine-webhooks.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-
-import { useEngineWebhooks } from "@3rdweb-sdk/react/hooks/useEngine";
-import { Heading, Link, Text } from "tw-components";
-import { AddWebhookButton } from "./add-webhook-button";
-import { WebhooksTable } from "./webhooks-table";
-
-interface EngineWebhooksProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-export const EngineWebhooks: React.FC<EngineWebhooksProps> = ({
-  instanceUrl,
-  authToken,
-}) => {
-  const webhooks = useEngineWebhooks({
-    authToken,
-    instanceUrl,
-  });
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Heading size="title.md">Webhooks</Heading>
-        <Text>
-          Notify your app backend when transaction and backend wallet events
-          occur.{" "}
-          <Link
-            href="https://portal.thirdweb.com/infrastructure/engine/features/webhooks"
-            color="primary.500"
-            isExternal
-          >
-            Learn more about webhooks
-          </Link>
-          .
-        </Text>
-      </div>
-      <WebhooksTable
-        instanceUrl={instanceUrl}
-        webhooks={webhooks.data || []}
-        isPending={webhooks.isPending}
-        isFetched={webhooks.isFetched}
-        authToken={authToken}
-      />
-      <AddWebhookButton instanceUrl={instanceUrl} authToken={authToken} />
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
deleted file mode 100644
index c8c4fbb43aa..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/components/webhooks-table.tsx
+++ /dev/null
@@ -1,332 +0,0 @@
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { FormItem } from "@/components/ui/form";
-import {
-  type EngineWebhook,
-  useEngineDeleteWebhook,
-  useEngineTestWebhook,
-} from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Tooltip,
-  type UseDisclosureReturn,
-  useDisclosure,
-} from "@chakra-ui/react";
-import { createColumnHelper } from "@tanstack/react-table";
-import { TWTable } from "components/shared/TWTable";
-import { format, formatDistanceToNowStrict } from "date-fns";
-import { useTrack } from "hooks/analytics/useTrack";
-import { MailQuestion, TrashIcon } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import { Card, FormLabel, Text } from "tw-components";
-import { shortenString } from "utils/usedapp-external";
-
-export function beautifyString(str: string): string {
-  return str
-    .split("_")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" ");
-}
-
-interface WebhooksTableProps {
-  instanceUrl: string;
-  webhooks: EngineWebhook[];
-  isPending: boolean;
-  isFetched: boolean;
-  authToken: string;
-}
-
-const columnHelper = createColumnHelper<EngineWebhook>();
-
-const columns = [
-  columnHelper.accessor("name", {
-    header: "Name",
-    cell: (cell) => {
-      return <Text>{cell.getValue()}</Text>;
-    },
-  }),
-  columnHelper.accessor("eventType", {
-    header: "Event Type",
-    cell: (cell) => {
-      return <Text>{beautifyString(cell.getValue())}</Text>;
-    },
-  }),
-  columnHelper.accessor("secret", {
-    header: "Secret",
-    cell: (cell) => {
-      return (
-        <CopyTextButton
-          textToCopy={cell.getValue() || ""}
-          textToShow={shortenString(cell.getValue() || "")}
-          tooltip="Secret"
-          copyIconPosition="right"
-        />
-      );
-    },
-  }),
-  columnHelper.accessor("url", {
-    header: "URL",
-    cell: (cell) => {
-      const url = cell.getValue();
-      return (
-        <Text maxW={300} isTruncated>
-          {url}
-        </Text>
-      );
-    },
-  }),
-  columnHelper.accessor("createdAt", {
-    header: "Created At",
-    cell: (cell) => {
-      const value = cell.getValue();
-      if (!value) {
-        return;
-      }
-
-      const date = new Date(value);
-      return (
-        <Tooltip
-          borderRadius="md"
-          bg="transparent"
-          boxShadow="none"
-          label={
-            <Card bgColor="backgroundHighlight">
-              <Text>{format(date, "PP pp z")}</Text>
-            </Card>
-          }
-          shouldWrapChildren
-        >
-          <Text>{formatDistanceToNowStrict(date, { addSuffix: true })}</Text>
-        </Tooltip>
-      );
-    },
-  }),
-];
-
-export const WebhooksTable: React.FC<WebhooksTableProps> = ({
-  instanceUrl,
-  webhooks,
-  isPending,
-  isFetched,
-  authToken,
-}) => {
-  const [selectedWebhook, setSelectedWebhook] = useState<EngineWebhook>();
-  const deleteDisclosure = useDisclosure();
-  const testDisclosure = useDisclosure();
-
-  const activeWebhooks = webhooks.filter((webhook) => webhook.active);
-
-  return (
-    <>
-      <TWTable
-        title="webhooks"
-        data={activeWebhooks}
-        columns={columns}
-        isPending={isPending}
-        isFetched={isFetched}
-        onMenuClick={[
-          {
-            icon: <MailQuestion className="size-4" />,
-            text: "Test webhook",
-            onClick: (row) => {
-              setSelectedWebhook(row);
-              testDisclosure.onOpen();
-            },
-          },
-          {
-            icon: <TrashIcon className="size-4" />,
-            text: "Delete",
-            onClick: (row) => {
-              setSelectedWebhook(row);
-              deleteDisclosure.onOpen();
-            },
-            isDestructive: true,
-          },
-        ]}
-      />
-
-      {selectedWebhook && deleteDisclosure.isOpen && (
-        <DeleteWebhookModal
-          webhook={selectedWebhook}
-          disclosure={deleteDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-      {selectedWebhook && testDisclosure.isOpen && (
-        <TestWebhookModal
-          webhook={selectedWebhook}
-          disclosure={testDisclosure}
-          instanceUrl={instanceUrl}
-          authToken={authToken}
-        />
-      )}
-    </>
-  );
-};
-
-interface DeleteWebhookModalProps {
-  webhook: EngineWebhook;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}
-function DeleteWebhookModal({
-  webhook,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: DeleteWebhookModalProps) {
-  const deleteWebhook = useEngineDeleteWebhook({
-    authToken,
-    instanceUrl,
-  });
-  const trackEvent = useTrack();
-
-  const onDelete = () => {
-    const promise = deleteWebhook.mutateAsync(
-      { id: webhook.id },
-      {
-        onSuccess: () => {
-          disclosure.onClose();
-          trackEvent({
-            category: "engine",
-            action: "delete-webhook",
-            label: "success",
-            instance: instanceUrl,
-          });
-        },
-        onError: (error) => {
-          trackEvent({
-            category: "engine",
-            action: "delete-webhook",
-            label: "error",
-            instance: instanceUrl,
-            error,
-          });
-        },
-      },
-    );
-
-    toast.promise(promise, {
-      success: "Successfully deleted webhook.",
-      error: "Failed to delete webhook.",
-    });
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Delete Webhook</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4">
-            <Text>Are you sure you want to delete this webhook?</Text>
-            <FormControl>
-              <FormLabel>Name</FormLabel>
-              <Text>{webhook.name}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>URL</FormLabel>
-              <Text>{webhook.url}</Text>
-            </FormControl>
-            <FormControl>
-              <FormLabel>Created at</FormLabel>
-              <Text>
-                {format(new Date(webhook.createdAt ?? ""), "PP pp z")}
-              </Text>
-            </FormControl>
-          </div>
-        </ModalBody>
-
-        <ModalFooter as={Flex} gap={3}>
-          <Button onClick={disclosure.onClose} variant="outline">
-            Cancel
-          </Button>
-          <Button type="submit" variant="destructive" onClick={onDelete}>
-            Delete
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
-
-interface TestWebhookModalProps {
-  webhook: EngineWebhook;
-  disclosure: UseDisclosureReturn;
-  instanceUrl: string;
-  authToken: string;
-}
-function TestWebhookModal({
-  webhook,
-  disclosure,
-  instanceUrl,
-  authToken,
-}: TestWebhookModalProps) {
-  const { mutate: testWebhook, isPending } = useEngineTestWebhook({
-    instanceUrl,
-    authToken,
-  });
-
-  const [status, setStatus] = useState<number | undefined>();
-  const [body, setBody] = useState<string | undefined>();
-
-  const onTest = () => {
-    testWebhook(
-      { id: webhook.id },
-      {
-        onSuccess: (result) => {
-          setStatus(result.status);
-          setBody(result.body);
-        },
-      },
-    );
-  };
-
-  return (
-    <Modal isOpen={disclosure.isOpen} onClose={disclosure.onClose} isCentered>
-      <ModalOverlay />
-      <ModalContent className="!bg-background rounded-lg border border-border">
-        <ModalHeader>Test Webhook</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <div className="flex flex-col gap-4 pb-2">
-            <FormItem>
-              <FormLabel>URL</FormLabel>
-              <span className="font-mono">{webhook.url}</span>
-            </FormItem>
-
-            <Button type="submit" onClick={onTest} disabled={isPending}>
-              {isPending && <Spinner className="mr-2 size-4" />}
-              Send Request
-            </Button>
-
-            {status && (
-              <div>
-                <Badge variant={status <= 299 ? "success" : "destructive"}>
-                  {status}
-                </Badge>
-              </div>
-            )}
-            <div className="max-h-[12rem] overflow-y-auto font-mono text-sm">
-              {body ?? "Send a request to see the response."}
-            </div>
-          </div>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/page.tsx
deleted file mode 100644
index 4f6faccb348..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/webhooks/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { engineInstancePageHandler } from "../../../_utils/getEngineInstancePageMeta";
-import type { EngineInstancePageProps } from "../types";
-import { EngineWebhooks } from "./components/engine-webhooks";
-
-export default async function Page(props: EngineInstancePageProps) {
-  const params = await props.params;
-  const { instance, authToken } = await engineInstancePageHandler({
-    engineId: params.engineId,
-    teamSlug: params.team_slug,
-  });
-
-  return <EngineWebhooks instanceUrl={instance.url} authToken={authToken} />;
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineAccessPermission.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineAccessPermission.ts
deleted file mode 100644
index 2c88348fa30..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineAccessPermission.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-// can not fetch engine permission on server - instance url can be localhost url
-
-export async function getEngineAccessPermission(params: {
-  authToken: string;
-  instanceUrl: string;
-}) {
-  try {
-    const instanceUrl = params.instanceUrl.endsWith("/")
-      ? params.instanceUrl
-      : `${params.instanceUrl}/`;
-
-    const res = await fetch(`${instanceUrl}auth/permissions/get-all`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${params.authToken}`,
-      },
-    });
-
-    return {
-      ok: res.ok, // has access if this is true
-      status: res.status,
-    };
-  } catch {
-    return {
-      ok: false,
-      status: 500,
-      fetchFailed: true,
-    };
-  }
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstance.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstance.ts
deleted file mode 100644
index 999c3c1d8f4..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstance.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { API_SERVER_URL } from "@/constants/env";
-import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
-
-export async function getEngineInstance(params: {
-  teamIdOrSlug: string;
-  authToken: string;
-  engineId: string;
-  accountId: string;
-}) {
-  if (params.engineId === "sandbox") {
-    const sandboxEngine: EngineInstance = {
-      id: "sandbox",
-      url: process.env.NEXT_PUBLIC_DEMO_ENGINE_URL || "",
-      name: "Demo Engine",
-      status: "active",
-      lastAccessedAt: new Date().toISOString(),
-      accountId: params.accountId,
-      isCloudHosted: false,
-      isPlanEngine: false,
-    };
-
-    return sandboxEngine;
-  }
-
-  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${params.teamIdOrSlug}/engine/${params.engineId}`,
-    {
-      headers: {
-        Authorization: `Bearer ${params.authToken}`,
-      },
-    },
-  );
-
-  if (!res.ok) {
-    const errorMessage = await res.text();
-    console.error("failed to fetch engine instances");
-    console.error(errorMessage);
-    return undefined;
-  }
-
-  const json = (await res.json()) as {
-    result: EngineInstance;
-  };
-
-  return json.result;
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstancePageMeta.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstancePageMeta.ts
deleted file mode 100644
index 5b3a787d2d2..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstancePageMeta.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { notFound } from "next/navigation";
-import { getValidAccount } from "../../../../../../account/settings/getAccount";
-import { getAuthToken } from "../../../../../../api/lib/getAuthToken";
-import { loginRedirect } from "../../../../../../login/loginRedirect";
-import { getEngineInstance } from "./getEngineInstance";
-
-export async function engineInstancePageHandler(params: {
-  teamSlug: string;
-  engineId: string;
-}) {
-  const pagePath = `/team/${params.teamSlug}/~/engine/${params.engineId}/access-tokens`;
-
-  const [authToken, account] = await Promise.all([
-    getAuthToken(),
-    getValidAccount(pagePath),
-  ]);
-
-  if (!authToken) {
-    loginRedirect(pagePath);
-  }
-
-  const instance = await getEngineInstance({
-    teamIdOrSlug: params.teamSlug,
-    authToken,
-    engineId: params.engineId,
-    accountId: account.id,
-  });
-
-  if (!instance) {
-    // this case is already handled in layout
-    notFound();
-  }
-
-  return { instance, authToken, account };
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstances.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstances.ts
deleted file mode 100644
index 75bac52531b..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/engine/_utils/getEngineInstances.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { API_SERVER_URL } from "@/constants/env";
-import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
-
-export async function getEngineInstances(params: {
-  authToken: string;
-  teamIdOrSlug: string;
-}) {
-  const res = await fetch(
-    `${API_SERVER_URL}/v1/teams/${params.teamIdOrSlug}/engine`,
-    {
-      headers: {
-        Authorization: `Bearer ${params.authToken}`,
-      },
-    },
-  );
-
-  if (!res.ok) {
-    const errorMessage = await res.text();
-    console.error("failed to fetch engine instances");
-    console.error(errorMessage);
-    return {
-      error: errorMessage,
-    };
-  }
-
-  const json = (await res.json()) as {
-    result: EngineInstance[];
-  };
-
-  return {
-    data: json.result,
-  };
-}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
index 0ad46e07e26..7e4292d9b77 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx
@@ -12,7 +12,6 @@ import { EngineIcon } from "../../../../(dashboard)/(chain)/components/server/ic
 import { InsightIcon } from "../../../../(dashboard)/(chain)/components/server/icons/InsightIcon";
 import { PayIcon } from "../../../../(dashboard)/(chain)/components/server/icons/PayIcon";
 import { SmartAccountIcon } from "../../../../(dashboard)/(chain)/components/server/icons/SmartAccountIcon";
-import { Badge } from "../../../../../../@/components/ui/badge";
 import { NebulaIcon } from "../../../../../nebula-app/(app)/icons/NebulaIcon";
 
 export function ProjectSidebarLayout(props: {
@@ -63,11 +62,7 @@ export function ProjectSidebarLayout(props: {
         },
         {
           href: `${layoutPath}/engine`,
-          label: (
-            <span>
-              Engine <Badge>Beta</Badge>
-            </span>
-          ),
+          label: "Engine",
           icon: EngineIcon,
           tracking: tracking("engine"),
         },
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/layout.tsx
index 4acf966b4af..2d7e709bdeb 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/layout.tsx
@@ -1,44 +1,18 @@
-import { getProject } from "@/api/projects";
-import { getTeamBySlug } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { THIRDWEB_ENGINE_CLOUD_URL } from "@/constants/env";
 import Link from "next/link";
-import { redirect } from "next/navigation";
 import { EngineIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
-import { getAuthToken } from "../../../../../api/lib/getAuthToken";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
   children: React.ReactNode;
 }) {
   const { team_slug, project_slug } = await props.params;
-  const authToken = await getAuthToken();
-
-  if (!authToken) {
-    redirect("/team");
-  }
-
-  const [team, project] = await Promise.all([
-    getTeamBySlug(team_slug),
-    getProject(team_slug, project_slug),
-  ]);
-
-  if (!team) {
-    redirect("/team");
-  }
-
-  if (!project) {
-    redirect(`/team/${team_slug}`);
-  }
 
   return (
-    <TransactionsLayout
-      projectSlug={project.slug}
-      teamSlug={team_slug}
-      clientId={project.publishableKey}
-    >
+    <TransactionsLayout projectSlug={project_slug} teamSlug={team_slug}>
       {props.children}
     </TransactionsLayout>
   );
@@ -47,7 +21,6 @@ export default async function Page(props: {
 function TransactionsLayout(props: {
   projectSlug: string;
   teamSlug: string;
-  clientId: string;
   children: React.ReactNode;
 }) {
   const engineBaseSlug = `/team/${props.teamSlug}/${props.projectSlug}/engine`;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/page.tsx
index 86bd31a2d48..cce8142a363 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/page.tsx
@@ -1,5 +1,4 @@
 import { getProject } from "@/api/projects";
-import { getTeamBySlug } from "@/api/team";
 import { THIRDWEB_VAULT_URL } from "@/constants/env";
 import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";
 import { notFound, redirect } from "next/navigation";
@@ -31,31 +30,25 @@ export default async function TransactionsAnalyticsPage(props: {
     notFound();
   }
 
-  const [team, project] = await Promise.all([
-    getTeamBySlug(params.team_slug),
+  const [vaultClient, project] = await Promise.all([
+    createVaultClient({
+      baseUrl: THIRDWEB_VAULT_URL,
+    }).catch(() => undefined),
     getProject(params.team_slug, params.project_slug),
   ]);
 
-  if (!team) {
-    redirect("/team");
-  }
-
   if (!project) {
     redirect(`/team/${params.team_slug}`);
   }
 
-  const projectEngineCloudService = project.services.find(
-    (service) => service.name === "engineCloud",
-  );
-
-  const vaultClient = await createVaultClient({
-    baseUrl: THIRDWEB_VAULT_URL,
-  }).catch(() => undefined);
-
   if (!vaultClient) {
     return <div>Error: Failed to connect to Vault</div>;
   }
 
+  const projectEngineCloudService = project.services.find(
+    (service) => service.name === "engineCloud",
+  );
+
   const managementAccessToken =
     projectEngineCloudService?.managementAccessToken;
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/tx/[id]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/tx/[id]/layout.tsx
index f12a7f728bd..bfa7963dd88 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/tx/[id]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/cloud/tx/[id]/layout.tsx
@@ -12,7 +12,7 @@ export default function TransactionLayout({
     <div className="flex flex-col gap-4">
       <div className="flex items-center gap-2">
         <Link
-          href={`/team/${params.team_slug}/${params.project_slug}/engine`}
+          href={`/team/${params.team_slug}/${params.project_slug}/engine/cloud`}
           className="flex items-center gap-1 text-muted-foreground text-sm hover:text-foreground"
         >
           <ChevronLeft className="h-4 w-4" />
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/EngineFooterCard.stories.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/EngineFooterCard.stories.tsx
index 22a678e32f1..c4d3b3f55c2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/EngineFooterCard.stories.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/EngineFooterCard.stories.tsx
@@ -6,6 +6,7 @@ const meta = {
   component: EngineFooterCard,
   args: {
     team_slug: "demo-team",
+    project_slug: "demo-project",
   },
   decorators: [
     (Story) => (
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/_components.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/_components.tsx
index 8c6680521a8..0dc6e43b7a1 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/_components.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/_components.tsx
@@ -27,8 +27,8 @@ export function ImportEngineLink(props: {
   );
 }
 
-function EngineInfoSection(props: { team_slug: string }) {
-  const engineLinkPrefix = `/team/${props.team_slug}/~/engine`;
+function EngineInfoSection(props: { team_slug: string; project_slug: string }) {
+  const engineLinkPrefix = `/team/${props.team_slug}/${props.project_slug}/engine/dedicated`;
 
   return (
     <div className="">
@@ -148,6 +148,7 @@ function CloudHostedEngineSection(props: {
 export function EngineFooterCard(props: {
   teamPlan: Team["billingPlan"];
   team_slug: string;
+  project_slug: string;
 }) {
   return (
     <div className="relative rounded-lg border p-6">
@@ -161,7 +162,10 @@ export function EngineFooterCard(props: {
         </>
       )}
 
-      <EngineInfoSection team_slug={props.team_slug} />
+      <EngineInfoSection
+        team_slug={props.team_slug}
+        project_slug={props.project_slug}
+      />
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/EngineImportPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/EngineImportPage.tsx
index ea9f330bc2b..7854d32fc98 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/EngineImportPage.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/EngineImportPage.tsx
@@ -55,6 +55,7 @@ async function importEngine({
 export function EngineImportCard(props: {
   prefillImportUrl: string | undefined;
   teamSlug: string;
+  projectSlug: string;
 }) {
   const router = useDashboardRouter();
 
@@ -63,7 +64,9 @@ export function EngineImportCard(props: {
       prefillImportUrl={props.prefillImportUrl}
       importEngine={async (params) => {
         await importEngine({ ...params, teamIdOrSlug: props.teamSlug });
-        router.push(`/team/${props.teamSlug}/~/engine`);
+        router.push(
+          `/team/${props.teamSlug}/${props.projectSlug}/engine/dedicated`,
+        );
       }}
     />
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/page.tsx
index 89d16708101..bc9b371bdde 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/import/page.tsx
@@ -1,7 +1,7 @@
 import { EngineImportCard } from "./EngineImportPage";
 
 export default async function Page(props: {
-  params: Promise<{ team_slug: string }>;
+  params: Promise<{ team_slug: string; project_slug: string }>;
   searchParams: Promise<{
     importUrl?: string | string[];
   }>;
@@ -21,6 +21,7 @@ export default async function Page(props: {
       <EngineImportCard
         prefillImportUrl={importUrl ? decodeURIComponent(importUrl) : undefined}
         teamSlug={params.team_slug}
+        projectSlug={params.project_slug}
       />
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/layout.tsx
index 295bb352a3b..645756a5376 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/layout.tsx
@@ -101,7 +101,9 @@ function EngineLegacyBannerUI(props: {
           >
             <Button variant="outline">Learn More</Button>
           </Link>
-          <Link href={`/team/${props.teamSlug}/${props.projectSlug}/engine`}>
+          <Link
+            href={`/team/${props.teamSlug}/${props.projectSlug}/engine/cloud`}
+          >
             <Button variant={"primary"} className="flex items-center gap-2">
               <EngineIcon className="size-4" /> Try Engine Cloud
             </Button>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-instances-table.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-instances-table.tsx
index 92ee878b9ce..317b69fcfe3 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-instances-table.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-instances-table.tsx
@@ -83,6 +83,7 @@ type RemovedEngineFromDashboard = (
 
 export function EngineInstancesTable(props: {
   teamSlug: string;
+  projectSlug: string;
   instances: EngineInstance[];
   engineLinkPrefix: string;
   teamPlan: Team["billingPlan"];
@@ -95,6 +96,7 @@ export function EngineInstancesTable(props: {
       instances={props.instances}
       engineLinkPrefix={props.engineLinkPrefix}
       teamSlug={props.teamSlug}
+      projectSlug={props.projectSlug}
       deleteCloudHostedEngine={async (params) => {
         await deleteCloudHostedEngine(params);
         router.refresh();
@@ -119,6 +121,7 @@ export function EngineInstancesTableUI(props: {
   removeEngineFromDashboard: RemovedEngineFromDashboard;
   teamPlan: Team["billingPlan"];
   teamSlug: string;
+  projectSlug: string;
 }) {
   return (
     <div className="flex grow flex-col">
@@ -127,7 +130,11 @@ export function EngineInstancesTableUI(props: {
       </h2>
 
       {props.instances.length === 0 ? (
-        <EmptyEngineState teamPlan={props.teamPlan} teamSlug={props.teamSlug} />
+        <EmptyEngineState
+          teamPlan={props.teamPlan}
+          teamSlug={props.teamSlug}
+          projectSlug={props.projectSlug}
+        />
       ) : (
         <TableContainer>
           <Table>
@@ -810,6 +817,7 @@ function DeleteEngineSubscriptionModalContent(props: {
 function EmptyEngineState(props: {
   teamPlan: Team["billingPlan"];
   teamSlug: string;
+  projectSlug: string;
 }) {
   const [selectedTab, setSelectedTab] = useState<
     "self-hosted" | "cloud-hosted"
@@ -870,7 +878,9 @@ function EmptyEngineState(props: {
                     size="sm"
                     asChild
                   >
-                    <Link href={`/team/${props.teamSlug}/~/engine/import`}>
+                    <Link
+                      href={`/team/${props.teamSlug}/${props.projectSlug}/engine/dedicated/import`}
+                    >
                       Import self-hosted Engine
                       <ArrowRight size={16} />
                     </Link>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-list.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-list.tsx
index 0c0a394cffa..7460dfb51e2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-list.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/overview/engine-list.tsx
@@ -5,22 +5,28 @@ import { EngineInstancesTable } from "./engine-instances-table";
 
 export const EngineInstancesList = (props: {
   team_slug: string;
+  project_slug: string;
   instances: EngineInstance[];
   teamPlan: Team["billingPlan"];
 }) => {
-  const engineLinkPrefix = `/team/${props.team_slug}/~/engine`;
+  const engineLinkPrefix = `/team/${props.team_slug}/${props.project_slug}/engine/dedicated`;
 
   return (
     <div className="flex grow flex-col">
       <EngineInstancesTable
         teamSlug={props.team_slug}
+        projectSlug={props.project_slug}
         instances={props.instances}
         engineLinkPrefix={engineLinkPrefix}
         teamPlan={props.teamPlan}
       />
 
       <div className="h-40" />
-      <EngineFooterCard teamPlan={props.teamPlan} team_slug={props.team_slug} />
+      <EngineFooterCard
+        teamPlan={props.teamPlan}
+        team_slug={props.team_slug}
+        project_slug={props.project_slug}
+      />
     </div>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/page.tsx
index dd316db2997..02e221729f7 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(general)/page.tsx
@@ -48,6 +48,7 @@ export default async function Page(props: {
   return (
     <EngineInstancesList
       team_slug={params.team_slug}
+      project_slug={params.project_slug}
       instances={res.data || []}
       teamPlan={team.billingPlan}
     />
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnginePageLayout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnginePageLayout.tsx
index b8c7de2ef93..53c85d51209 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnginePageLayout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnginePageLayout.tsx
@@ -51,9 +51,10 @@ const sidebarLinkMeta: Array<{ pathId: string; label: string }> = [
 export function EngineSidebarLayout(props: {
   engineId: string;
   teamSlug: string;
+  projectSlug: string;
   children: React.ReactNode;
 }) {
-  const rootPath = `/team/${props.teamSlug}/~/engine`;
+  const rootPath = `/team/${props.teamSlug}/${props.projectSlug}/engine/dedicated`;
 
   const links: SidebarLink[] = sidebarLinkMeta.map((linkMeta) => {
     return {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnsureEnginePermission.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
index 1e3bfc6bd63..674f7afb817 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/_components/EnsureEnginePermission.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
 import type { EngineInstance } from "@3rdweb-sdk/react/hooks/useEngine";
 import { useQuery } from "@tanstack/react-query";
 import type React from "react";
-import GenericLoadingPage from "../../../../ecosystem/loading";
 import { getEngineAccessPermission } from "../../../_utils/getEngineAccessPermission";
 import { EngineErrorPage } from "./EngineErrorPage";
 
@@ -13,10 +13,11 @@ export function EnsureEnginePermission(props: {
   authToken: string;
   children: React.ReactNode;
   teamSlug: string;
+  projectSlug: string;
   instance: EngineInstance;
 }) {
   const { instance } = props;
-  const rootPath = `/team/${props.teamSlug}/~/engine`;
+  const rootPath = `/team/${props.teamSlug}/${props.projectSlug}/engine/dedicated`;
 
   const permissionQuery = useQuery({
     queryKey: [
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx
index 8c64552a3be..66c846fbc2e 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx
@@ -9,12 +9,14 @@ import { EngineSystem } from "./system";
 interface EngineConfigurationProps {
   instance: EngineInstance;
   teamSlug: string;
+  projectSlug: string;
   authToken: string;
 }
 
 export const EngineConfiguration: React.FC<EngineConfigurationProps> = ({
   instance,
   teamSlug,
+  projectSlug,
   authToken,
 }) => {
   return (
@@ -22,6 +24,7 @@ export const EngineConfiguration: React.FC<EngineConfigurationProps> = ({
       <EngineWalletConfig
         instance={instance}
         teamSlug={teamSlug}
+        projectSlug={projectSlug}
         authToken={authToken}
       />
       <EngineCorsConfig instanceUrl={instance.url} authToken={authToken} />
@@ -29,7 +32,11 @@ export const EngineConfiguration: React.FC<EngineConfigurationProps> = ({
         instanceUrl={instance.url}
         authToken={authToken}
       />
-      <EngineSystem instance={instance} teamIdOrSlug={teamSlug} />
+      <EngineSystem
+        instance={instance}
+        teamIdOrSlug={teamSlug}
+        projectSlug={projectSlug}
+      />
     </div>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
index 8bb3431cf02..3ec13885927 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
@@ -23,12 +23,14 @@ import { LocalConfig } from "./local-config";
 interface EngineWalletConfigProps {
   instance: EngineInstance;
   teamSlug: string;
+  projectSlug: string;
   authToken: string;
 }
 
 export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
   instance,
   teamSlug,
+  projectSlug,
   authToken,
 }) => {
   const { data: walletConfig } = useEngineWalletConfig({
@@ -72,7 +74,7 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
         <p className="text-muted-foreground">
           Create backend wallets on the{" "}
           <Link
-            href={`/team/${teamSlug}/~/engine/${instance.id}`}
+            href={`/team/${teamSlug}/${projectSlug}/engine/dedicated/${instance.id}`}
             className="text-link-foreground hover:text-foreground"
           >
             Overview
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx
index b348ce335ac..64705289f15 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx
@@ -7,14 +7,20 @@ import {
 interface EngineSystemProps {
   instance: EngineInstance;
   teamIdOrSlug: string;
+  projectSlug: string;
 }
 
 export const EngineSystem: React.FC<EngineSystemProps> = ({
   instance,
   teamIdOrSlug,
+  projectSlug,
 }) => {
   const healthQuery = useEngineSystemHealth(instance.url);
-  const metricsQuery = useEngineSystemMetrics(instance.id, teamIdOrSlug);
+  const metricsQuery = useEngineSystemMetrics(
+    instance.id,
+    teamIdOrSlug,
+    projectSlug,
+  );
   if (!healthQuery.data) {
     return null;
   }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/layout.tsx
index 99850d1ad6d..6ed59afe4ce 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/layout.tsx
@@ -20,6 +20,7 @@ import { EngineVersionBadge } from "./_components/version";
 export default async function Layout(props: {
   params: Promise<{
     team_slug: string;
+    project_slug: string;
     engineId: string;
   }>;
   children: React.ReactNode;
@@ -29,7 +30,9 @@ export default async function Layout(props: {
   const authToken = await getAuthToken();
 
   if (!authToken) {
-    loginRedirect(`/team/${params.team_slug}/~/engine/${params.engineId}`);
+    loginRedirect(
+      `/team/${params.team_slug}/${params.project_slug}/engine/dedicated/${params.engineId}`,
+    );
   }
 
   const instance = await getEngineInstance({
@@ -39,13 +42,14 @@ export default async function Layout(props: {
     accountId: account.id,
   });
 
-  const engineRootLayoutPath = `/team/${params.team_slug}/~/engine`;
+  const engineRootLayoutPath = `/team/${params.team_slug}/${params.project_slug}/engine/dedicated`;
 
   if (!instance) {
     return (
       <EngineSidebarLayout
         engineId={params.engineId}
         teamSlug={params.team_slug}
+        projectSlug={params.project_slug}
       >
         <EngineErrorPage rootPath={engineRootLayoutPath}>
           Engine Instance Not Found
@@ -66,9 +70,11 @@ export default async function Layout(props: {
         <EngineSidebarLayout
           engineId={params.engineId}
           teamSlug={params.team_slug}
+          projectSlug={params.project_slug}
         >
           <EnsureEnginePermission
             teamSlug={params.team_slug}
+            projectSlug={params.project_slug}
             accountId={account.id}
             authToken={authToken}
             engineId={params.engineId}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
index be1d5daefdf..5b06c4f7b31 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx
@@ -15,15 +15,21 @@ import { StatusCodes } from "./StatusCodes";
 interface EngineStatusProps {
   instance: EngineInstance;
   teamSlug: string;
+  projectSlug: string;
   authToken: string;
 }
 
 export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
   instance,
   teamSlug,
+  projectSlug,
   authToken,
 }) => {
-  const systemMetricsQuery = useEngineSystemMetrics(instance.id, teamSlug);
+  const systemMetricsQuery = useEngineSystemMetrics(
+    instance.id,
+    teamSlug,
+    projectSlug,
+  );
   const queueMetricsQuery = useEngineQueueMetrics({
     authToken,
     instanceUrl: instance.url,
@@ -44,7 +50,7 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
           <Text>
             Upgrade to a{" "}
             <TrackedLink
-              href={`/team/${teamSlug}/~/engine/create`}
+              href={`/team/${teamSlug}/${projectSlug}/engine/dedicated/create`}
               isExternal
               color="blue.500"
               category="engine"
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
index 5c5c19764dd..a9383b3a093 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/create-backend-wallet-button.tsx
@@ -43,12 +43,13 @@ interface CreateBackendWalletButtonProps {
   instance: EngineInstance;
   walletConfig: WalletConfigResponse;
   teamSlug: string;
+  projectSlug: string;
   authToken: string;
 }
 
 export const CreateBackendWalletButton: React.FC<
   CreateBackendWalletButtonProps
-> = ({ instance, walletConfig, teamSlug, authToken }) => {
+> = ({ instance, walletConfig, teamSlug, projectSlug, authToken }) => {
   const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
     instance.url,
     "HETEROGENEOUS_WALLET_TYPES",
@@ -192,7 +193,7 @@ export const CreateBackendWalletButton: React.FC<
                       <AlertDescription>
                         Provide your credentials on the{" "}
                         <Link
-                          href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
+                          href={`/team/${teamSlug}/${projectSlug}/engine/dedicated/${instance.id}/configuration`}
                           className="text-link-foreground hover:text-foreground"
                         >
                           Configuration
@@ -249,7 +250,7 @@ export const CreateBackendWalletButton: React.FC<
                               The ID of the Circle credential to use for this
                               wallet. You can find this in the{" "}
                               <Link
-                                href={`/team/${teamSlug}/~/engine/${instance.id}/wallet-credentials`}
+                                href={`/team/${teamSlug}/${projectSlug}/engine/dedicated/${instance.id}/wallet-credentials`}
                                 className="text-link-foreground hover:text-foreground"
                               >
                                 Wallet Credentials
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx
index 5e53bdd1c20..3a57117e23f 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx
@@ -19,12 +19,14 @@ import { TransactionCharts, TransactionsTable } from "./transactions-table";
 interface EngineOverviewProps {
   instance: EngineInstance;
   teamSlug: string;
+  projectSlug: string;
   authToken: string;
 }
 
 export const EngineOverview: React.FC<EngineOverviewProps> = ({
   instance,
   teamSlug,
+  projectSlug,
   authToken,
 }) => {
   const client = useThirdwebClient();
@@ -34,6 +36,7 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
       <BackendWalletsSection
         instance={instance}
         teamSlug={teamSlug}
+        projectSlug={projectSlug}
         authToken={authToken}
         client={client}
       />
@@ -52,10 +55,11 @@ export const EngineOverview: React.FC<EngineOverviewProps> = ({
 function BackendWalletsSection(props: {
   instance: EngineInstance;
   teamSlug: string;
+  projectSlug: string;
   authToken: string;
   client: ThirdwebClient;
 }) {
-  const { instance, teamSlug, authToken } = props;
+  const { instance, teamSlug, projectSlug, authToken } = props;
   const activeWalletChain = useActiveWalletChain();
   const [_chainId, setChainId] = useState<number>();
   const chainId = _chainId || activeWalletChain?.id || 1;
@@ -85,7 +89,7 @@ function BackendWalletsSection(props: {
           <p className="text-muted-foreground text-sm leading-relaxed">
             Set up other wallet types from the{" "}
             <UnderlineLink
-              href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
+              href={`/team/${teamSlug}/${projectSlug}/engine/dedicated/${instance.id}/configuration`}
             >
               Configuration
             </UnderlineLink>{" "}
@@ -108,12 +112,14 @@ function BackendWalletsSection(props: {
                 instance={instance}
                 walletConfig={walletConfig}
                 teamSlug={teamSlug}
+                projectSlug={projectSlug}
                 authToken={authToken}
               />
               <CreateBackendWalletButton
                 instance={instance}
                 walletConfig={walletConfig}
                 teamSlug={teamSlug}
+                projectSlug={projectSlug}
                 authToken={authToken}
               />
             </div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
index cd6f8243187..f1b0a62e3e6 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/overview/components/import-backend-wallet-button.tsx
@@ -43,12 +43,13 @@ interface ImportBackendWalletButtonProps {
   instance: EngineInstance;
   walletConfig: WalletConfigResponse;
   teamSlug: string;
+  projectSlug: string;
   authToken: string;
 }
 
 export const ImportBackendWalletButton: React.FC<
   ImportBackendWalletButtonProps
-> = ({ instance, walletConfig, teamSlug, authToken }) => {
+> = ({ instance, walletConfig, teamSlug, projectSlug, authToken }) => {
   const { isSupported: supportsMultipleWalletTypes } = useHasEngineFeature(
     instance.url,
     "HETEROGENEOUS_WALLET_TYPES",
@@ -196,7 +197,7 @@ export const ImportBackendWalletButton: React.FC<
                       <AlertDescription>
                         Provide your credentials on the{" "}
                         <Link
-                          href={`/team/${teamSlug}/~/engine/${instance.id}/configuration`}
+                          href={`/team/${teamSlug}/${projectSlug}/engine/dedicated/${instance.id}/configuration`}
                           className="text-link-foreground hover:text-foreground"
                         >
                           Configuration
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/page.tsx
index bd6ec62012c..b3bde12f86a 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/page.tsx
@@ -7,12 +7,14 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return (
     <EngineOverview
       instance={instance}
       teamSlug={params.team_slug}
+      projectSlug={params.project_slug}
       authToken={authToken}
     />
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/types.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/types.ts
index 5f004e8d3f8..40e7e65acc9 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/types.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/types.ts
@@ -1,6 +1,7 @@
 export type EngineInstancePageProps = {
   params: Promise<{
     team_slug: string;
+    project_slug: string;
     engineId: string;
   }>;
 };
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstancePageMeta.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstancePageMeta.ts
index 5b3a787d2d2..c5221e9bb24 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstancePageMeta.ts
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/_utils/getEngineInstancePageMeta.ts
@@ -6,9 +6,10 @@ import { getEngineInstance } from "./getEngineInstance";
 
 export async function engineInstancePageHandler(params: {
   teamSlug: string;
+  projectSlug: string;
   engineId: string;
 }) {
-  const pagePath = `/team/${params.teamSlug}/~/engine/${params.engineId}/access-tokens`;
+  const pagePath = `/team/${params.teamSlug}/${params.projectSlug}/engine/dedicated/${params.engineId}/access-tokens`;
 
   const [authToken, account] = await Promise.all([
     getAuthToken(),
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx
index ce99cb6a99e..3f64aa75892 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/page.tsx
@@ -1,7 +1,4 @@
 import { getProject } from "@/api/projects";
-import { getTeamBySlug } from "@/api/team";
-import { THIRDWEB_VAULT_URL } from "@/constants/env";
-import { createVaultClient } from "@thirdweb-dev/vault-sdk";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import { getEngineInstances } from "./dedicated/_utils/getEngineInstances";
@@ -21,16 +18,11 @@ export default async function TransactionsAnalyticsPage(props: {
     redirect("/team");
   }
 
-  const [team, project, engineInstances] = await Promise.all([
-    getTeamBySlug(team_slug),
+  const [project, engineInstances] = await Promise.all([
     getProject(team_slug, project_slug),
     getEngineInstances({ authToken, teamIdOrSlug: team_slug }),
   ]);
 
-  if (!team) {
-    redirect("/team");
-  }
-
   if (!project) {
     redirect(`/team/${team_slug}`);
   }
@@ -39,14 +31,6 @@ export default async function TransactionsAnalyticsPage(props: {
     (service) => service.name === "engineCloud",
   );
 
-  const vaultClient = await createVaultClient({
-    baseUrl: THIRDWEB_VAULT_URL,
-  }).catch(() => undefined);
-
-  if (!vaultClient) {
-    return <div>Error: Failed to connect to Vault</div>;
-  }
-
   const managementAccessToken =
     projectEngineCloudService?.managementAccessToken;
 

From 56251e26d21d6170051dbb41cde136dd2ea20984 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Thu, 1 May 2025 00:00:29 +1200
Subject: [PATCH 4/4] fix build

---
 .../dedicated/(instance)/[engineId]/access-tokens/page.tsx      | 1 +
 .../engine/dedicated/(instance)/[engineId]/admins/page.tsx      | 1 +
 .../engine/dedicated/(instance)/[engineId]/alerts/page.tsx      | 1 +
 .../dedicated/(instance)/[engineId]/configuration/page.tsx      | 2 ++
 .../(instance)/[engineId]/contract-subscriptions/page.tsx       | 1 +
 .../engine/dedicated/(instance)/[engineId]/explorer/page.tsx    | 1 +
 .../engine/dedicated/(instance)/[engineId]/metrics/page.tsx     | 2 ++
 .../engine/dedicated/(instance)/[engineId]/relayers/page.tsx    | 1 +
 .../dedicated/(instance)/[engineId]/wallet-credentials/page.tsx | 1 +
 .../engine/dedicated/(instance)/[engineId]/webhooks/page.tsx    | 1 +
 10 files changed, 12 insertions(+)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/page.tsx
index f1dd2edd5d3..5d584ca1846 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/access-tokens/page.tsx
@@ -7,6 +7,7 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return (
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/page.tsx
index e3d235d774b..b62cfee33f2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/admins/page.tsx
@@ -7,6 +7,7 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return <EngineAdmins instanceUrl={instance.url} authToken={authToken} />;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/page.tsx
index 0a0329ac19a..f5465a0614e 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/alerts/page.tsx
@@ -7,6 +7,7 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return (
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/page.tsx
index 4480cb06e27..5d36e68e08b 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/configuration/page.tsx
@@ -7,12 +7,14 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return (
     <EngineConfiguration
       instance={instance}
       teamSlug={params.team_slug}
+      projectSlug={params.project_slug}
       authToken={authToken}
     />
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/page.tsx
index 0e41b54826c..a7bbc8a3d67 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/contract-subscriptions/page.tsx
@@ -7,6 +7,7 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return (
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/page.tsx
index 691b755db0f..4f265324ab9 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/explorer/page.tsx
@@ -7,6 +7,7 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return <EngineExplorer instanceUrl={instance.url} authToken={authToken} />;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/page.tsx
index f53b8877964..d33f685df53 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/metrics/page.tsx
@@ -7,12 +7,14 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return (
     <EngineSystemMetrics
       instance={instance}
       teamSlug={params.team_slug}
+      projectSlug={params.project_slug}
       authToken={authToken}
     />
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/page.tsx
index 3450919eb7e..c619554fda7 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/relayers/page.tsx
@@ -7,6 +7,7 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return <EngineRelayer instanceUrl={instance.url} authToken={authToken} />;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/page.tsx
index 21470354729..6b27e92d629 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/wallet-credentials/page.tsx
@@ -7,6 +7,7 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return (
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/page.tsx
index 4f6faccb348..d7afe756224 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/engine/dedicated/(instance)/[engineId]/webhooks/page.tsx
@@ -7,6 +7,7 @@ export default async function Page(props: EngineInstancePageProps) {
   const { instance, authToken } = await engineInstancePageHandler({
     engineId: params.engineId,
     teamSlug: params.team_slug,
+    projectSlug: params.project_slug,
   });
 
   return <EngineWebhooks instanceUrl={instance.url} authToken={authToken} />;