From 31b60cc8c2cf8e2a02bb3231d5fdfcd11aad47fb Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Tue, 17 Jun 2025 20:45:08 +0530
Subject: [PATCH] [TOOL-4827] Move Nebula out of dashboard

---
 apps/dashboard/.env.example                   |  11 -
 apps/dashboard/package.json                   |   1 -
 .../dashboard/src/@/components/Responsive.tsx |   2 +-
 .../src/@/components/blocks/client-only.tsx   |  42 ++
 .../src/@/components/color-mode-toggle.tsx    |   2 +-
 .../components/ui/Spinner/Spinner.module.css  |   1 -
 apps/dashboard/src/@/components/ui/button.tsx |  13 +-
 .../src/@/components/ui/skeleton.tsx          |   3 +-
 apps/dashboard/src/@/constants/public-envs.ts |   5 -
 apps/dashboard/src/@/constants/server-envs.ts |  10 -
 .../(chain)/[chain_id]/(chainPage)/layout.tsx |  48 +-
 .../[contractAddress]/shared-layout.tsx       |  31 +-
 .../components/server}/icons/NebulaIcon.tsx   |   0
 .../(chain)/components/server/products.ts     |   2 +-
 .../app/(app)/(dashboard)/support/page.tsx    |   4 +-
 .../tools/unixtime-converter/page.tsx         |   2 +-
 .../_components/DeployedContractsPage.tsx     |   2 +-
 .../src/app/(app)/login/LoginPage.tsx         |   2 +-
 .../(app)/team/[team_slug]/(team)/layout.tsx  |   2 +-
 .../nft-collection-info-fieldset.tsx          |   2 +-
 .../token/token-info/token-info-fieldset.tsx  |   2 +-
 .../[project_slug]/(sidebar)/assets/page.tsx  |   2 +-
 .../components/ProjectFTUX/ProjectFTUX.tsx    |   2 +-
 .../components/ProjectSidebarLayout.tsx       |   2 +-
 .../account-abstraction/factories/page.tsx    |   2 +-
 .../explorer/components/engine-explorer.tsx   |   2 +-
 .../[project_slug]/(sidebar)/layout.tsx       |   2 +-
 .../components/FloatingChat/FloatingChat.tsx  | 279 ---------
 .../FloatingChat/FloatingChatContent.tsx      | 346 -----------
 .../(app)/components/FloatingChat/actions.ts  |  54 --
 apps/dashboard/src/app/nebula-app/layout.tsx  |  62 --
 .../src/app/nebula-app/nebula-global.css      |   4 -
 apps/dashboard/src/app/nebula-app/readme.md   |  10 -
 .../ClientOnly/ClientOnly.module.css          |  14 -
 .../src/components/CustomChat/ChatBar.tsx     | 136 +++++
 .../CustomChat/CustomChatButton.tsx           |   0
 .../CustomChat/CustomChatContent.tsx          |  15 +-
 .../components/CustomChat/CustomChats.tsx     |   2 +-
 .../CustomChat}/Reasoning.tsx                 |   0
 .../src/components/CustomChat/types.ts        |  36 ++
 .../explore/contract-card/index.tsx           |   2 +-
 apps/dashboard/src/middleware.ts              |  40 --
 apps/dashboard/src/stories/stubs.ts           |  29 -
 apps/nebula/.env.example                      |   2 +
 apps/nebula/.eslintignore                     |  13 +
 apps/nebula/.eslintrc.js                      | 114 ++++
 apps/nebula/.storybook/main.ts                |  28 +
 apps/nebula/.storybook/preview.tsx            | 109 ++++
 apps/nebula/LICENSE.md                        | 201 ++++++
 apps/nebula/README.md                         |   1 +
 apps/nebula/biome.json                        |  15 +
 apps/nebula/components.json                   |  17 +
 apps/nebula/knip.json                         |   8 +
 apps/nebula/lucide-react.d.ts                 |   3 +
 apps/nebula/next-sitemap.config.js            |  38 ++
 apps/nebula/next.config.ts                    |  70 +++
 apps/nebula/package.json                      |   3 +
 apps/nebula/postcss.config.js                 |   6 +
 .../src/@/components/blocks/ChainIcon.tsx     |  44 ++
 .../@/components/blocks/FormFieldSetup.tsx    |  44 ++
 .../src/@/components/blocks/Img.stories.tsx   | 112 ++++
 apps/nebula/src/@/components/blocks/Img.tsx   |  88 +++
 .../markdown-renderer.stories.tsx             | 164 +++++
 .../MarkdownRenderer/markdown-renderer.tsx    | 225 +++++++
 .../blocks/MultiNetworkSelector.stories.tsx   |  49 ++
 .../@/components/blocks/NetworkSelectors.tsx  | 256 ++++++++
 .../blocks/SingleNetworkSelector.stories.tsx  |  53 ++
 .../src/@/components/blocks/auto-connect.tsx  |  16 +
 .../blocks/buttons/MismatchButton.tsx         | 571 ++++++++++++++++++
 .../buttons/TransactionButton.stories.tsx     | 210 +++++++
 .../blocks/buttons/TransactionButton.tsx      | 175 ++++++
 .../src/@/components/blocks/client-only.tsx}  |  18 +-
 .../blocks/multi-select.stories.tsx           |  72 +++
 .../src/@/components/blocks/multi-select.tsx  | 375 ++++++++++++
 .../blocks/select-with-search.stories.tsx     |  62 ++
 .../components/blocks/select-with-search.tsx  | 221 +++++++
 .../blocks/skeletons/GenericLoadingPage.tsx   |  21 +
 .../@/components/blocks/wallet-address.tsx    | 212 +++++++
 .../src/@/components/color-mode-toggle.tsx    |  32 +
 .../src/@/components/ui/CopyTextButton.tsx    |  68 +++
 .../src/@/components/ui/DynamicHeight.tsx     |  59 ++
 apps/nebula/src/@/components/ui/NavLink.tsx   |  50 ++
 .../ui/ScrollShadow/ScrollShadow.module.css   |  36 ++
 .../ui/ScrollShadow/ScrollShadow.tsx          | 151 +++++
 .../components/ui/Spinner/Spinner.module.css  |  38 ++
 .../src/@/components/ui/Spinner/Spinner.tsx   |  21 +
 apps/nebula/src/@/components/ui/avatar.tsx    |  50 ++
 apps/nebula/src/@/components/ui/badge.tsx     |  39 ++
 .../src/@/components/ui/button.stories.tsx    |  64 ++
 apps/nebula/src/@/components/ui/button.tsx    |  84 +++
 .../components/ui/code/CodeBlockContainer.tsx |  61 ++
 .../src/@/components/ui/code/RenderCode.tsx   |  29 +
 .../src/@/components/ui/code/code.client.tsx  |  71 +++
 .../src/@/components/ui/code/code.stories.tsx | 108 ++++
 .../src/@/components/ui/code/getCodeHtml.tsx  |  52 ++
 .../ui/code/plaintext-code.stories.tsx        |  45 ++
 .../@/components/ui/code/plaintext-code.tsx   |  29 +
 .../src/@/components/ui/decimal-input.tsx     |  39 ++
 apps/nebula/src/@/components/ui/dialog.tsx    | 140 +++++
 apps/nebula/src/@/components/ui/form.tsx      | 203 +++++++
 .../nebula/src/@/components/ui/hover-card.tsx |  29 +
 .../@/components/ui/image-upload-button.tsx   |   0
 .../src/@/components/ui/inline-code.tsx       |  17 +
 apps/nebula/src/@/components/ui/input.tsx     |  25 +
 apps/nebula/src/@/components/ui/label.tsx     |  26 +
 apps/nebula/src/@/components/ui/popover.tsx   |  31 +
 .../src/@/components/ui/select.stories.tsx    |  79 +++
 apps/nebula/src/@/components/ui/select.tsx    | 162 +++++
 apps/nebula/src/@/components/ui/separator.tsx |  31 +
 apps/nebula/src/@/components/ui/sheet.tsx     | 143 +++++
 apps/nebula/src/@/components/ui/skeleton.tsx  |  50 ++
 apps/nebula/src/@/components/ui/sonner.tsx    |  31 +
 apps/nebula/src/@/components/ui/switch.tsx    |  29 +
 .../src/@/components/ui/table.stories.tsx     | 143 +++++
 apps/nebula/src/@/components/ui/table.tsx     | 156 +++++
 apps/nebula/src/@/components/ui/tabs.tsx      | 210 +++++++
 .../src/@/components/ui/text-shimmer.tsx      |  23 +
 apps/nebula/src/@/components/ui/textarea.tsx  |  48 ++
 apps/nebula/src/@/components/ui/tooltip.tsx   |  70 +++
 .../src/@/config/nebula-aa.ts}                |   0
 .../src/@/config/sdk-component-theme.ts       |  43 ++
 .../src/@/constants/cookies.ts}               |   0
 apps/nebula/src/@/constants/env-utils.ts      |   3 +
 apps/nebula/src/@/constants/local-node.ts     |   6 +
 .../src/@/constants/nebula-client.ts}         |   4 +-
 apps/nebula/src/@/constants/public-envs.ts    |  14 +
 apps/nebula/src/@/constants/server-envs.ts    |  29 +
 apps/nebula/src/@/constants/urls.ts           |  24 +
 .../src/@/data/eth-sanctioned-addresses.ts    | 150 +++++
 apps/nebula/src/@/hooks/chains.ts             | 119 ++++
 apps/nebula/src/@/hooks/use-clipboard.tsx     |  36 ++
 apps/nebula/src/@/icons/NebulaIcon.tsx        |  24 +
 apps/nebula/src/@/lib/DashboardRouter.tsx     | 119 ++++
 apps/nebula/src/@/lib/reactive.ts             |  55 ++
 .../@/lib/resolveSchemeWithErrorHandler.ts    |  21 +
 .../src/@/lib/useIsomorphicLayoutEffect.ts    |   4 +
 apps/nebula/src/@/lib/useShowMore.ts          |  37 ++
 apps/nebula/src/@/lib/utils.ts                |   6 +
 apps/nebula/src/@/storybook/stubs.ts          |  28 +
 apps/nebula/src/@/storybook/utils.tsx         |  37 ++
 apps/nebula/src/@/types/chain.ts              |  26 +
 .../src/@/utils}/authToken.ts                 |   4 +-
 apps/nebula/src/@/utils/fetchChain.ts         |  23 +
 .../src/@/utils}/isAuthTokenValid.ts          |   0
 .../src/@/utils}/isLoggedIntoNebula.ts        |   0
 apps/nebula/src/@/utils/loginRedirect.ts      |   9 +
 apps/nebula/src/@/utils/map-chains.ts         |  20 +
 apps/nebula/src/@/utils/nebula-chains.ts      |  32 +
 apps/nebula/src/@/utils/parse-error.tsx       | 111 ++++
 apps/nebula/src/@/utils/vercel-utils.ts       |  12 +
 .../src/@/utils/verifyTurnstileToken.ts       |  71 +++
 .../src/app}/(app)/api/chat.ts                |   4 +-
 .../src/app}/(app)/api/feedback.ts            |   2 +-
 .../src/app/(app)/api}/fetchWithAuthToken.ts  |   0
 .../src/app}/(app)/api/session.ts             |   2 +-
 .../src/app}/(app)/api/types.ts               |   7 +
 .../src/app}/(app)/chat/[session_id]/page.tsx |   8 +-
 .../chat/history/ChatHistoryPage.stories.tsx  |   2 +-
 .../(app)/chat/history/ChatHistoryPage.tsx    |   0
 .../src/app}/(app)/chat/history/page.tsx      |   4 +-
 .../src/app}/(app)/chat/page.tsx              |   6 +-
 .../AssetsSection/AssetsSection.stories.tsx   |   2 +-
 .../AssetsSection/AssetsSection.tsx           |   7 +-
 .../src/app}/(app)/components/ChatBar.tsx     |   4 +-
 .../app}/(app)/components/ChatPageContent.tsx |   4 +-
 .../components/ChatPageLayout.stories.tsx     |   2 +-
 .../app}/(app)/components/ChatPageLayout.tsx  |   6 +-
 .../src/app}/(app)/components/ChatSidebar.tsx |   6 +-
 .../app}/(app)/components/ChatSidebarLink.tsx |   0
 .../app}/(app)/components/Chatbar.stories.tsx |   2 +-
 .../app}/(app)/components/Chats.stories.tsx   |   4 +-
 .../src/app}/(app)/components/Chats.tsx       |  17 +-
 .../EmptyStateChatPageContent.stories.tsx     |   0
 .../components/EmptyStateChatPageContent.tsx  |   4 +-
 .../ExecuteTransactionCard.stories.tsx        |   6 +-
 .../components/ExecuteTransactionCard.tsx     |  10 +-
 .../app}/(app)/components/MessageActions.tsx  |   0
 .../(app)/components/NebulaConnectButton.tsx  |   6 +-
 .../src/app}/(app)/components/NebulaImage.tsx |   0
 .../app}/(app)/components/NebulaMobileNav.tsx |   0
 .../Reasoning/Reasoning.stories.tsx           |   2 +-
 .../(app)/components/Reasoning/Reasoning.tsx  |  65 ++
 .../components/Swap/SwapCards.stories.tsx     |   2 +-
 .../app}/(app)/components/Swap/SwapCards.tsx  |  12 +-
 .../src/app}/(app)/components/Swap/common.tsx |  45 +-
 .../TransactionsSection.stories.tsx           |   2 +-
 .../TransactionsSection.tsx                   |   6 +-
 .../src/app}/(app)/data/examplePrompts.ts     |   4 +-
 .../app}/(app)/hooks/useNewChatPageLink.ts    |   0
 .../hooks/useSessionsWithLocalOverrides.ts    |   0
 .../src/app}/(app)/layout.tsx                 |   4 +-
 .../src/app}/(app)/page.tsx                   |   6 +-
 .../src/app}/(app)/stores.ts                  |   0
 .../src/app}/(app)/utils/getChainIds.ts       |   2 +-
 apps/nebula/src/app/layout.tsx                |  43 +-
 .../app}/login/NebulaConnectEmbedLogin.tsx    |  10 +-
 .../src/app}/login/NebulaLoginPage.tsx        |   2 +-
 .../src/app}/login/auth-actions.ts            |  12 +-
 .../src/app}/login/page.tsx                   |   4 +-
 .../src/app}/move-funds/connect-button.tsx    |   8 +-
 .../src/app/move-funds/dashboard-client.ts    |  42 ++
 .../src/app}/move-funds/move-funds.tsx        |  16 +-
 .../src/app}/move-funds/page.tsx              |   2 +-
 .../page.tsx => nebula/src/app/not-found.tsx} |  11 +-
 .../src/app}/opengraph-image.png              | Bin
 apps/nebula/src/app/page.tsx                  |   3 -
 .../src/app}/providers.tsx                    |  13 +-
 apps/nebula/src/global.css                    | 214 +++++++
 apps/nebula/tailwind.config.js                | 124 ++++
 apps/nebula/tsconfig.json                     |  28 +-
 apps/nebula/vercel.json                       |   5 +
 .../components/ui/Spinner/Spinner.module.css  |   1 -
 .../components/ui/Spinner/Spinner.module.css  |   1 -
 pnpm-lock.yaml                                |   3 -
 214 files changed, 8324 insertions(+), 1166 deletions(-)
 create mode 100644 apps/dashboard/src/@/components/blocks/client-only.tsx
 rename apps/dashboard/src/app/{nebula-app/(app) => (app)/(dashboard)/(chain)/components/server}/icons/NebulaIcon.tsx (100%)
 delete mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.tsx
 delete mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
 delete mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/actions.ts
 delete mode 100644 apps/dashboard/src/app/nebula-app/layout.tsx
 delete mode 100644 apps/dashboard/src/app/nebula-app/nebula-global.css
 delete mode 100644 apps/dashboard/src/app/nebula-app/readme.md
 delete mode 100644 apps/dashboard/src/components/ClientOnly/ClientOnly.module.css
 create mode 100644 apps/dashboard/src/components/CustomChat/ChatBar.tsx
 rename apps/dashboard/src/{app/nebula-app/(app) => }/components/CustomChat/CustomChatButton.tsx (100%)
 rename apps/dashboard/src/{app/nebula-app/(app) => }/components/CustomChat/CustomChatContent.tsx (96%)
 rename apps/dashboard/src/{app/nebula-app/(app) => }/components/CustomChat/CustomChats.tsx (99%)
 rename apps/dashboard/src/{app/nebula-app/(app)/components/Reasoning => components/CustomChat}/Reasoning.tsx (100%)
 create mode 100644 apps/dashboard/src/components/CustomChat/types.ts
 create mode 100644 apps/nebula/.env.example
 create mode 100644 apps/nebula/.eslintignore
 create mode 100644 apps/nebula/.eslintrc.js
 create mode 100644 apps/nebula/.storybook/main.ts
 create mode 100644 apps/nebula/.storybook/preview.tsx
 create mode 100644 apps/nebula/LICENSE.md
 create mode 100644 apps/nebula/README.md
 create mode 100644 apps/nebula/biome.json
 create mode 100644 apps/nebula/components.json
 create mode 100644 apps/nebula/knip.json
 create mode 100644 apps/nebula/lucide-react.d.ts
 create mode 100644 apps/nebula/next-sitemap.config.js
 create mode 100644 apps/nebula/next.config.ts
 create mode 100644 apps/nebula/postcss.config.js
 create mode 100644 apps/nebula/src/@/components/blocks/ChainIcon.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/FormFieldSetup.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/Img.stories.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/Img.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/MarkdownRenderer/markdown-renderer.stories.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/MarkdownRenderer/markdown-renderer.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/MultiNetworkSelector.stories.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/NetworkSelectors.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/SingleNetworkSelector.stories.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/auto-connect.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/buttons/MismatchButton.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/buttons/TransactionButton.stories.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/buttons/TransactionButton.tsx
 rename apps/{dashboard/src/components/ClientOnly/ClientOnly.tsx => nebula/src/@/components/blocks/client-only.tsx} (58%)
 create mode 100644 apps/nebula/src/@/components/blocks/multi-select.stories.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/multi-select.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/select-with-search.stories.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/select-with-search.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/skeletons/GenericLoadingPage.tsx
 create mode 100644 apps/nebula/src/@/components/blocks/wallet-address.tsx
 create mode 100644 apps/nebula/src/@/components/color-mode-toggle.tsx
 create mode 100644 apps/nebula/src/@/components/ui/CopyTextButton.tsx
 create mode 100644 apps/nebula/src/@/components/ui/DynamicHeight.tsx
 create mode 100644 apps/nebula/src/@/components/ui/NavLink.tsx
 create mode 100644 apps/nebula/src/@/components/ui/ScrollShadow/ScrollShadow.module.css
 create mode 100644 apps/nebula/src/@/components/ui/ScrollShadow/ScrollShadow.tsx
 create mode 100644 apps/nebula/src/@/components/ui/Spinner/Spinner.module.css
 create mode 100644 apps/nebula/src/@/components/ui/Spinner/Spinner.tsx
 create mode 100644 apps/nebula/src/@/components/ui/avatar.tsx
 create mode 100644 apps/nebula/src/@/components/ui/badge.tsx
 create mode 100644 apps/nebula/src/@/components/ui/button.stories.tsx
 create mode 100644 apps/nebula/src/@/components/ui/button.tsx
 create mode 100644 apps/nebula/src/@/components/ui/code/CodeBlockContainer.tsx
 create mode 100644 apps/nebula/src/@/components/ui/code/RenderCode.tsx
 create mode 100644 apps/nebula/src/@/components/ui/code/code.client.tsx
 create mode 100644 apps/nebula/src/@/components/ui/code/code.stories.tsx
 create mode 100644 apps/nebula/src/@/components/ui/code/getCodeHtml.tsx
 create mode 100644 apps/nebula/src/@/components/ui/code/plaintext-code.stories.tsx
 create mode 100644 apps/nebula/src/@/components/ui/code/plaintext-code.tsx
 create mode 100644 apps/nebula/src/@/components/ui/decimal-input.tsx
 create mode 100644 apps/nebula/src/@/components/ui/dialog.tsx
 create mode 100644 apps/nebula/src/@/components/ui/form.tsx
 create mode 100644 apps/nebula/src/@/components/ui/hover-card.tsx
 rename apps/{dashboard => nebula}/src/@/components/ui/image-upload-button.tsx (100%)
 create mode 100644 apps/nebula/src/@/components/ui/inline-code.tsx
 create mode 100644 apps/nebula/src/@/components/ui/input.tsx
 create mode 100644 apps/nebula/src/@/components/ui/label.tsx
 create mode 100644 apps/nebula/src/@/components/ui/popover.tsx
 create mode 100644 apps/nebula/src/@/components/ui/select.stories.tsx
 create mode 100644 apps/nebula/src/@/components/ui/select.tsx
 create mode 100644 apps/nebula/src/@/components/ui/separator.tsx
 create mode 100644 apps/nebula/src/@/components/ui/sheet.tsx
 create mode 100644 apps/nebula/src/@/components/ui/skeleton.tsx
 create mode 100644 apps/nebula/src/@/components/ui/sonner.tsx
 create mode 100644 apps/nebula/src/@/components/ui/switch.tsx
 create mode 100644 apps/nebula/src/@/components/ui/table.stories.tsx
 create mode 100644 apps/nebula/src/@/components/ui/table.tsx
 create mode 100644 apps/nebula/src/@/components/ui/tabs.tsx
 create mode 100644 apps/nebula/src/@/components/ui/text-shimmer.tsx
 create mode 100644 apps/nebula/src/@/components/ui/textarea.tsx
 create mode 100644 apps/nebula/src/@/components/ui/tooltip.tsx
 rename apps/{dashboard/src/app/nebula-app/login/account-abstraction.ts => nebula/src/@/config/nebula-aa.ts} (100%)
 create mode 100644 apps/nebula/src/@/config/sdk-component-theme.ts
 rename apps/{dashboard/src/app/nebula-app/_utils/constants.ts => nebula/src/@/constants/cookies.ts} (100%)
 create mode 100644 apps/nebula/src/@/constants/env-utils.ts
 create mode 100644 apps/nebula/src/@/constants/local-node.ts
 rename apps/{dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts => nebula/src/@/constants/nebula-client.ts} (93%)
 create mode 100644 apps/nebula/src/@/constants/public-envs.ts
 create mode 100644 apps/nebula/src/@/constants/server-envs.ts
 create mode 100644 apps/nebula/src/@/constants/urls.ts
 create mode 100644 apps/nebula/src/@/data/eth-sanctioned-addresses.ts
 create mode 100644 apps/nebula/src/@/hooks/chains.ts
 create mode 100644 apps/nebula/src/@/hooks/use-clipboard.tsx
 create mode 100644 apps/nebula/src/@/icons/NebulaIcon.tsx
 create mode 100644 apps/nebula/src/@/lib/DashboardRouter.tsx
 create mode 100644 apps/nebula/src/@/lib/reactive.ts
 create mode 100644 apps/nebula/src/@/lib/resolveSchemeWithErrorHandler.ts
 create mode 100644 apps/nebula/src/@/lib/useIsomorphicLayoutEffect.ts
 create mode 100644 apps/nebula/src/@/lib/useShowMore.ts
 create mode 100644 apps/nebula/src/@/lib/utils.ts
 create mode 100644 apps/nebula/src/@/storybook/stubs.ts
 create mode 100644 apps/nebula/src/@/storybook/utils.tsx
 create mode 100644 apps/nebula/src/@/types/chain.ts
 rename apps/{dashboard/src/app/nebula-app/_utils => nebula/src/@/utils}/authToken.ts (96%)
 create mode 100644 apps/nebula/src/@/utils/fetchChain.ts
 rename apps/{dashboard/src/app/nebula-app/_utils => nebula/src/@/utils}/isAuthTokenValid.ts (100%)
 rename apps/{dashboard/src/app/nebula-app/_utils => nebula/src/@/utils}/isLoggedIntoNebula.ts (100%)
 create mode 100644 apps/nebula/src/@/utils/loginRedirect.ts
 create mode 100644 apps/nebula/src/@/utils/map-chains.ts
 create mode 100644 apps/nebula/src/@/utils/nebula-chains.ts
 create mode 100644 apps/nebula/src/@/utils/parse-error.tsx
 create mode 100644 apps/nebula/src/@/utils/vercel-utils.ts
 create mode 100644 apps/nebula/src/@/utils/verifyTurnstileToken.ts
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/api/chat.ts (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/api/feedback.ts (90%)
 rename apps/{dashboard/src/utils => nebula/src/app/(app)/api}/fetchWithAuthToken.ts (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/api/session.ts (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/api/types.ts (93%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/chat/[session_id]/page.tsx (84%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/chat/history/ChatHistoryPage.stories.tsx (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/chat/history/ChatHistoryPage.tsx (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/chat/history/page.tsx (73%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/chat/page.tsx (77%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/AssetsSection/AssetsSection.stories.tsx (96%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/AssetsSection/AssetsSection.tsx (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/ChatBar.tsx (99%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/ChatPageContent.tsx (99%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/ChatPageLayout.stories.tsx (96%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/ChatPageLayout.tsx (82%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/ChatSidebar.tsx (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/ChatSidebarLink.tsx (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/Chatbar.stories.tsx (98%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/Chats.stories.tsx (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/Chats.tsx (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/EmptyStateChatPageContent.stories.tsx (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/EmptyStateChatPageContent.tsx (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/ExecuteTransactionCard.stories.tsx (98%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/ExecuteTransactionCard.tsx (94%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/MessageActions.tsx (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/NebulaConnectButton.tsx (93%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/NebulaImage.tsx (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/NebulaMobileNav.tsx (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/Reasoning/Reasoning.stories.tsx (92%)
 create mode 100644 apps/nebula/src/app/(app)/components/Reasoning/Reasoning.tsx
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/Swap/SwapCards.stories.tsx (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/Swap/SwapCards.tsx (95%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/Swap/common.tsx (85%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/TransactionsSection/TransactionsSection.stories.tsx (98%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/components/TransactionsSection/TransactionsSection.tsx (96%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/data/examplePrompts.ts (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/hooks/useNewChatPageLink.ts (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/hooks/useSessionsWithLocalOverrides.ts (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/layout.tsx (82%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/page.tsx (85%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/stores.ts (100%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/(app)/utils/getChainIds.ts (94%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/login/NebulaConnectEmbedLogin.tsx (94%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/login/NebulaLoginPage.tsx (98%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/login/auth-actions.ts (97%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/login/page.tsx (84%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/move-funds/connect-button.tsx (80%)
 create mode 100644 apps/nebula/src/app/move-funds/dashboard-client.ts
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/move-funds/move-funds.tsx (98%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/move-funds/page.tsx (95%)
 rename apps/{dashboard/src/app/nebula-app/[...not-found]/page.tsx => nebula/src/app/not-found.tsx} (85%)
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/opengraph-image.png (100%)
 delete mode 100644 apps/nebula/src/app/page.tsx
 rename apps/{dashboard/src/app/nebula-app => nebula/src/app}/providers.tsx (81%)
 create mode 100644 apps/nebula/src/global.css
 create mode 100644 apps/nebula/tailwind.config.js
 create mode 100644 apps/nebula/vercel.json

diff --git a/apps/dashboard/.env.example b/apps/dashboard/.env.example
index 3f719125270..e6ec6b3b632 100644
--- a/apps/dashboard/.env.example
+++ b/apps/dashboard/.env.example
@@ -44,9 +44,6 @@ NEXT_PUBLIC_STRIPE_KEY=
 
 NEXT_PUBLIC_STRIPE_PAYMENT_METHOD_CFG_ID=
 
-# Needed for contract analytics / blockchain data information
-CHAINSAW_API_KEY=
-
 #
 # Private (server)
 #
@@ -65,17 +62,11 @@ MORALIS_API_KEY=
 # - not required to build (unless testing wallet NFTs)>
 SSR_ALCHEMY_KEY=
 
-# beehiiv.com API key (used for newsletter signups)
-# - not required to build (unless testing newsletter signups)>
-BEEHIIV_API_KEY=
 
 # Hubspot Access Token (used for contact us form)
 # - not required to build (unless testing contact us form)>
 HUBSPOT_ACCESS_TOKEN=
 
-# Github API Token (used for /open-source)
-GITHUB_API_TOKEN="ghp_..."
-
 # Upload server url
 NEXT_PUBLIC_DASHBOARD_UPLOAD_SERVER="https://storage.thirdweb-preview.com"
 
@@ -100,8 +91,6 @@ REDIS_URL=""
 
 ANALYTICS_SERVICE_URL=""
 
-# Required for Nebula Chat
-NEXT_PUBLIC_NEBULA_URL=""
 
 # required for billing parts of the dashboard (team -> settings -> billing / invoices)
 STRIPE_SECRET_KEY=""
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 57702d8e216..6cbd148d935 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -62,7 +62,6 @@
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
     "fast-xml-parser": "^5.2.5",
-    "fetch-event-stream": "0.1.5",
     "flat": "^6.0.1",
     "framer-motion": "12.17.0",
     "fuse.js": "7.1.0",
diff --git a/apps/dashboard/src/@/components/Responsive.tsx b/apps/dashboard/src/@/components/Responsive.tsx
index b5a6a88d198..6b78fc76779 100644
--- a/apps/dashboard/src/@/components/Responsive.tsx
+++ b/apps/dashboard/src/@/components/Responsive.tsx
@@ -1,6 +1,6 @@
 "use client";
+import { ClientOnly } from "@/components/blocks/client-only";
 import { Suspense } from "react";
-import { ClientOnly } from "../../components/ClientOnly/ClientOnly";
 import { useIsMobile } from "../hooks/use-mobile";
 
 export function ResponsiveLayout(props: {
diff --git a/apps/dashboard/src/@/components/blocks/client-only.tsx b/apps/dashboard/src/@/components/blocks/client-only.tsx
new file mode 100644
index 00000000000..a9640e46b85
--- /dev/null
+++ b/apps/dashboard/src/@/components/blocks/client-only.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { type ReactNode, useEffect, useState } from "react";
+
+interface ClientOnlyProps {
+  /**
+   * Use this to server render a skeleton or loading state
+   */
+  ssr: ReactNode;
+  className?: string;
+  children: ReactNode;
+}
+
+export const ClientOnly: React.FC<ClientOnlyProps> = ({
+  children,
+  ssr,
+  className,
+}) => {
+  const hasMounted = useIsClientMounted();
+
+  if (!hasMounted) {
+    return <> {ssr} </>;
+  }
+
+  return (
+    <div className={cn("fade-in-0 fill-mode-forwards ease-in", className)}>
+      {children}
+    </div>
+  );
+};
+
+function useIsClientMounted() {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  return hasMounted;
+}
diff --git a/apps/dashboard/src/@/components/color-mode-toggle.tsx b/apps/dashboard/src/@/components/color-mode-toggle.tsx
index 3b12f09de24..41dc2be94ba 100644
--- a/apps/dashboard/src/@/components/color-mode-toggle.tsx
+++ b/apps/dashboard/src/@/components/color-mode-toggle.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import { ClientOnly } from "@/components/blocks/client-only";
 import { Button } from "@/components/ui/button";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { Skeleton } from "./ui/skeleton";
diff --git a/apps/dashboard/src/@/components/ui/Spinner/Spinner.module.css b/apps/dashboard/src/@/components/ui/Spinner/Spinner.module.css
index 0adc57ba75e..622a43a8a79 100644
--- a/apps/dashboard/src/@/components/ui/Spinner/Spinner.module.css
+++ b/apps/dashboard/src/@/components/ui/Spinner/Spinner.module.css
@@ -12,7 +12,6 @@
   inset: 0px;
   border-radius: 50%;
   border: 4px solid #fff;
-  animation: prixClipFix 2s linear infinite;
   stroke-linecap: round;
   animation: dash 1.5s ease-in-out infinite;
 }
diff --git a/apps/dashboard/src/@/components/ui/button.tsx b/apps/dashboard/src/@/components/ui/button.tsx
index 81b78577aab..cb4966e89df 100644
--- a/apps/dashboard/src/@/components/ui/button.tsx
+++ b/apps/dashboard/src/@/components/ui/button.tsx
@@ -9,17 +9,16 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary:
-          "bg-primary hover:bg-primary/90 text-semibold text-primary-foreground ",
+        primary: "bg-primary hover:bg-primary/90 text-primary-foreground ",
         default: "bg-foreground text-background hover:bg-foreground/90",
         destructive:
-          "bg-destructive hover:bg-destructive/90 text-semibold text-destructive-foreground ",
+          "bg-destructive hover:bg-destructive/90 text-destructive-foreground ",
         outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground text-semibold",
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary hover:bg-secondary/80 text-semibold text-secondary-foreground ",
-        ghost: "hover:bg-accent text-semibold hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline text-semibold",
+          "bg-secondary hover:bg-secondary/80 text-secondary-foreground ",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline",
         pink: "border border-nebula-pink-foreground !text-nebula-pink-foreground bg-[hsl(var(--nebula-pink-foreground)/5%)] hover:bg-nebula-pink-foreground/10 dark:!text-foreground dark:bg-nebula-pink-foreground/10 dark:hover:bg-nebula-pink-foreground/20",
         upsell:
           "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
diff --git a/apps/dashboard/src/@/components/ui/skeleton.tsx b/apps/dashboard/src/@/components/ui/skeleton.tsx
index e4b94e893dd..17bd1f3ec02 100644
--- a/apps/dashboard/src/@/components/ui/skeleton.tsx
+++ b/apps/dashboard/src/@/components/ui/skeleton.tsx
@@ -16,7 +16,7 @@ function SkeletonContainer<T>(props: {
   loadedData?: T;
   skeletonData: T;
   className?: string;
-  render: (data: T, isSkeleton: boolean) => React.ReactNode;
+  render: (data: T) => React.ReactNode;
   style?: React.CSSProperties;
 }) {
   const isLoading = props.loadedData === undefined;
@@ -40,7 +40,6 @@ function SkeletonContainer<T>(props: {
             props.loadedData === undefined
               ? props.skeletonData
               : props.loadedData,
-            !isLoading,
           )}
         </div>
       </div>
diff --git a/apps/dashboard/src/@/constants/public-envs.ts b/apps/dashboard/src/@/constants/public-envs.ts
index 58bbe701ddf..f90758c0122 100644
--- a/apps/dashboard/src/@/constants/public-envs.ts
+++ b/apps/dashboard/src/@/constants/public-envs.ts
@@ -1,9 +1,6 @@
 export const NEXT_PUBLIC_DASHBOARD_CLIENT_ID =
   process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "";
 
-export const NEXT_PUBLIC_NEBULA_APP_CLIENT_ID =
-  process.env.NEXT_PUBLIC_NEBULA_APP_CLIENT_ID || "";
-
 export const NEXT_PUBLIC_THIRDWEB_VAULT_URL =
   process.env.NEXT_PUBLIC_THIRDWEB_VAULT_URL || "";
 
@@ -30,7 +27,5 @@ export const NEXT_PUBLIC_TURNSTILE_SITE_KEY =
 export const NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET =
   process.env.NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET || "";
 
-export const NEXT_PUBLIC_NEBULA_URL = process.env.NEXT_PUBLIC_NEBULA_URL || "";
-
 export const NEXT_PUBLIC_DEMO_ENGINE_URL =
   process.env.NEXT_PUBLIC_DEMO_ENGINE_URL || "";
diff --git a/apps/dashboard/src/@/constants/server-envs.ts b/apps/dashboard/src/@/constants/server-envs.ts
index 234c7b1c669..ee0e4e5f9fa 100644
--- a/apps/dashboard/src/@/constants/server-envs.ts
+++ b/apps/dashboard/src/@/constants/server-envs.ts
@@ -18,16 +18,6 @@ experimental_taintUniqueValue(
   DASHBOARD_THIRDWEB_SECRET_KEY,
 );
 
-export const NEBULA_APP_SECRET_KEY = process.env.NEBULA_APP_SECRET_KEY || "";
-
-if (NEBULA_APP_SECRET_KEY) {
-  experimental_taintUniqueValue(
-    "Do not pass NEBULA_APP_SECRET_KEY to the client",
-    process,
-    NEBULA_APP_SECRET_KEY,
-  );
-}
-
 export const API_SERVER_SECRET = process.env.API_SERVER_SECRET || "";
 
 if (API_SERVER_SECRET) {
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
index 21a7d2b0f43..4b6fa6e9aab 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx
@@ -14,16 +14,12 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
-import {
-  getAuthToken,
-  getAuthTokenWalletAddress,
-} from "@app/api/lib/getAuthToken";
+import { getAuthToken } from "@app/api/lib/getAuthToken";
 import { ChevronDownIcon, TicketCheckIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { mapV4ChainToV5Chain } from "../../../../../../contexts/map-chains";
-import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
 import { TeamHeader } from "../../../../team/components/TeamHeader/team-header";
 import { StarButton } from "../../components/client/star-button";
 import { getChain, getChainMetadata } from "../../utils";
@@ -61,10 +57,9 @@ export default async function ChainPageLayout(props: {
 }) {
   const params = await props.params;
   const { children } = props;
-  const [chain, authToken, accountAddress] = await Promise.all([
+  const [chain, authToken] = await Promise.all([
     getChain(params.chain_id),
     getAuthToken(),
-    getAuthTokenWalletAddress(),
   ]);
 
   if (params.chain_id !== chain.slug) {
@@ -74,49 +69,12 @@ export default async function ChainPageLayout(props: {
   const chainMetadata = await getChainMetadata(chain.chainId);
   const client = getClientThirdwebClient(undefined);
 
-  const chainPromptPrefix = `\
-You are assisting users exploring the chain ${chain.name} (Chain ID: ${chain.chainId}). Provide concise insights into the types of applications and activities prevalent on this chain, such as DeFi protocols, NFT marketplaces, or gaming platforms. Highlight notable projects or trends without delving into technical details like consensus mechanisms or gas fees.
-Users may seek comparisons between ${chain.name} and other chains. Provide objective, succinct comparisons focusing on performance, fees, and ecosystem support. Refrain from transaction-specific advice unless requested.
-Provide users with an understanding of the unique use cases and functionalities that ${chain.name} supports. Discuss how developers leverage this chain for specific applications, such as scalable dApps, low-cost transactions, or specialized token standards, focusing on practical implementations.
-Users may be interested in utilizing thirdweb tools on ${chain.name}. Offer clear guidance on how thirdweb's SDKs, smart contract templates, and deployment tools integrate with this chain. Emphasize the functionalities enabled by thirdweb without discussing transaction execution unless prompted.
-Avoid transaction-related actions to be executed by the user unless inquired about.
-
-The following is the user's message:
-  `;
-
-  const examplePrompts: string[] = [
-    "What are users doing on this chain?",
-    "What are the most active contracts?",
-    "Why would I use this chain over others?",
-    "Can I deploy thirdweb contracts to this chain?",
-  ];
-
-  if (chain.chainId !== 1) {
-    examplePrompts.push("Can I bridge assets from Ethereum to this chain?");
-  }
-
   return (
     <div className="flex grow flex-col">
       <div className="border-border border-b bg-card">
         <TeamHeader />
       </div>
-      <NebulaChatButton
-        isLoggedIn={!!authToken}
-        networks={chain.testnet ? "testnet" : "mainnet"}
-        isFloating={true}
-        pageType="chain"
-        label="Ask AI about this chain"
-        client={client}
-        nebulaParams={{
-          messagePrefix: chainPromptPrefix,
-          chainIds: [chain.chainId],
-          wallet: accountAddress ?? undefined,
-        }}
-        examplePrompts={examplePrompts.map((prompt) => ({
-          title: prompt,
-          message: prompt,
-        }))}
-      />
+
       <div className="flex h-14 border-border border-b pl-7">
         <Breadcrumb className="my-auto">
           <BreadcrumbList>
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx
index 7ac143c125a..8cdb83288d4 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/shared-layout.tsx
@@ -8,9 +8,6 @@ import { notFound } from "next/navigation";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { isAddress, isContractDeployed } from "thirdweb/utils";
 import { shortenIfAddress } from "utils/usedapp-external";
-import { NebulaChatButton } from "../../../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
-import { examplePrompts } from "../../../../../nebula-app/(app)/data/examplePrompts";
-import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
 import type { ProjectMeta } from "../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types";
 import { TeamHeader } from "../../../../team/components/TeamHeader/team-header";
 import { ConfigureCustomChain } from "./_layout/ConfigureCustomChain";
@@ -34,13 +31,12 @@ export async function SharedContractLayout(props: {
     return notFound();
   }
 
-  const [info, accountAddress, teamsAndProjects] = await Promise.all([
+  const [info, teamsAndProjects] = await Promise.all([
     getContractPageParamsInfo({
       contractAddress: props.contractAddress,
       chainIdOrSlug: props.chainIdOrSlug,
       teamId: props.projectMeta?.teamId,
     }),
-    getAuthTokenWalletAddress(),
     getTeamsAndProjectsIfLoggedIn(),
   ]);
 
@@ -109,17 +105,6 @@ export async function SharedContractLayout(props: {
     projectMeta: props.projectMeta,
   });
 
-  const contractAddress = serverContract.address;
-  const chainName = chainMetadata.name;
-  const chainId = chainMetadata.chainId;
-
-  const contractPromptPrefix = `A user is viewing the contract address ${contractAddress} on ${chainName} (Chain ID: ${chainId}). Provide a concise summary of this contract's functionalities, such as token minting, staking, or governance mechanisms. Focus on what the contract enables users to do, avoiding transaction execution details unless requested.
-Users may be interested in how to interact with the contract. Outline common interaction patterns, such as claiming rewards, participating in governance, or transferring assets. Emphasize the contract's capabilities without guiding through transaction processes unless asked.
-Provide insights into how the contract is being used. Share information on user engagement, transaction volumes, or integration with other dApps, focusing on the contract's role within the broader ecosystem.
-Users may be considering integrating the contract into their applications. Discuss how this contract's functionalities can be leveraged within different types of dApps, highlighting potential use cases and benefits.
-
-The following is the user's message:`;
-
   return (
     <ConditionalTeamHeaderLayout projectMeta={props.projectMeta}>
       <ContractPageLayout
@@ -131,20 +116,6 @@ The following is the user's message:`;
         teamsAndProjects={teamsAndProjects}
         projectMeta={props.projectMeta}
       >
-        <NebulaChatButton
-          isLoggedIn={!!accountAddress}
-          networks={info.chainMetadata.testnet ? "testnet" : "mainnet"}
-          isFloating={true}
-          pageType="contract"
-          label="Ask AI about this contract"
-          client={clientContract.client}
-          nebulaParams={{
-            messagePrefix: contractPromptPrefix,
-            chainIds: [chainId],
-            wallet: accountAddress ?? undefined,
-          }}
-          examplePrompts={examplePrompts}
-        />
         {props.children}
       </ContractPageLayout>
     </ConditionalTeamHeaderLayout>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/icons/NebulaIcon.tsx
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx
rename to apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/icons/NebulaIcon.tsx
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts
index bbdae72b44d..ed3b9bc72c4 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts
@@ -1,9 +1,9 @@
-import { NebulaIcon } from "../../../../../nebula-app/(app)/icons/NebulaIcon";
 import type { ChainSupportedService } from "../../types/chain";
 import { ConnectSDKIcon } from "./icons/ConnectSDKIcon";
 import { ContractIcon } from "./icons/ContractIcon";
 import { EngineIcon } from "./icons/EngineIcon";
 import { InsightIcon } from "./icons/InsightIcon";
+import { NebulaIcon } from "./icons/NebulaIcon";
 import { PayIcon } from "./icons/PayIcon";
 import { RPCIcon } from "./icons/RPCIcon";
 import { SmartAccountIcon } from "./icons/SmartAccountIcon";
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx
index 3e94eec24ee..b4545311141 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx
@@ -5,11 +5,11 @@ import { BookOpenIcon, ChevronRightIcon } from "lucide-react";
 import { HomeIcon, WalletIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
+import { NebulaIcon } from "../(chain)/components/server/icons/NebulaIcon";
 import { EngineIcon } from "../../(dashboard)/(chain)/components/server/icons/EngineIcon";
 import { InsightIcon } from "../../(dashboard)/(chain)/components/server/icons/InsightIcon";
 import { PayIcon } from "../../(dashboard)/(chain)/components/server/icons/PayIcon";
-import { CustomChatButton } from "../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
-import { NebulaIcon } from "../../../nebula-app/(app)/icons/NebulaIcon";
+import { CustomChatButton } from "../../../../components/CustomChat/CustomChatButton";
 import {
   getAuthToken,
   getAuthTokenWalletAddress,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/tools/unixtime-converter/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/tools/unixtime-converter/page.tsx
index d9568e16f4e..2c148b4d162 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/tools/unixtime-converter/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/tools/unixtime-converter/page.tsx
@@ -1,4 +1,4 @@
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
+import { ClientOnly } from "@/components/blocks/client-only";
 import type { Metadata } from "next";
 import { UnixTimeConverter } from "./components/UnixTimeConverter";
 
diff --git a/apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx b/apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx
index 140f0779ce5..8c344a524e3 100644
--- a/apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx
+++ b/apps/dashboard/src/app/(app)/account/contracts/_components/DeployedContractsPage.tsx
@@ -1,5 +1,5 @@
+import { ClientOnly } from "@/components/blocks/client-only";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { ContractTable } from "components/contract-components/tables/contract-table";
 import { Suspense } from "react";
 import type { ThirdwebClient } from "thirdweb";
diff --git a/apps/dashboard/src/app/(app)/login/LoginPage.tsx b/apps/dashboard/src/app/(app)/login/LoginPage.tsx
index 6e4c60fd4b5..bcae0f110ea 100644
--- a/apps/dashboard/src/app/(app)/login/LoginPage.tsx
+++ b/apps/dashboard/src/app/(app)/login/LoginPage.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { getRawAccountAction } from "@/actions/getAccount";
+import { ClientOnly } from "@/components/blocks/client-only";
 import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
 import { ToggleThemeButton } from "@/components/color-mode-toggle";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
@@ -8,7 +9,6 @@ import { NEXT_PUBLIC_TURNSTILE_SITE_KEY } from "@/constants/public-envs";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { Turnstile } from "@marsidev/react-turnstile";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { isVercel } from "lib/vercel-utils";
 import { useTheme } from "next-themes";
 import Link from "next/link";
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 5adc8561115..7ce661fa034 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
@@ -8,7 +8,7 @@ import { AnnouncementBanner } from "components/notices/AnnouncementBanner";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { siwaExamplePrompts } from "../../../(dashboard)/support/page";
-import { CustomChatButton } from "../../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
+import { CustomChatButton } from "../../../../../components/CustomChat/CustomChatButton";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import {
   getAuthToken,
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/collection-info/nft-collection-info-fieldset.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/collection-info/nft-collection-info-fieldset.tsx
index 99af8ef0047..47c63919f6d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/collection-info/nft-collection-info-fieldset.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/nft/collection-info/nft-collection-info-fieldset.tsx
@@ -2,10 +2,10 @@
 
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { ClientOnly } from "@/components/blocks/client-only";
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { FileInput } from "components/shared/FileInput";
 import type { UseFormReturn } from "react-hook-form";
 import type { ThirdwebClient } from "thirdweb";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/token-info/token-info-fieldset.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/token-info/token-info-fieldset.tsx
index 063e56d5511..c7860848239 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/token-info/token-info-fieldset.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/token/token-info/token-info-fieldset.tsx
@@ -2,10 +2,10 @@
 
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { ClientOnly } from "@/components/blocks/client-only";
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { FileInput } from "components/shared/FileInput";
 import type { ThirdwebClient } from "thirdweb";
 import { SocialUrlsFieldset } from "../../_common/SocialUrls";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/page.tsx
index 536c199d31d..f32490c1062 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/page.tsx
@@ -1,11 +1,11 @@
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
+import { ClientOnly } from "@/components/blocks/client-only";
 import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
 import type { ThirdwebClient } from "thirdweb";
-import { ClientOnly } from "../../../../../../../components/ClientOnly/ClientOnly";
 import { ContractTable } from "../../../../../../../components/contract-components/tables/contract-table";
 import { getSortedDeployedContracts } from "../../../../../account/contracts/_components/getSortedDeployedContracts";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
index 63fb3b35fe8..470ccf034cb 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
@@ -17,7 +17,7 @@ import {
 import { ContractIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/ContractIcon";
 import { EngineIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
 import { InsightIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/InsightIcon";
-import { NebulaIcon } from "../../../../../../../nebula-app/(app)/icons/NebulaIcon";
+import { NebulaIcon } from "../../../../../../(dashboard)/(chain)/components/server/icons/NebulaIcon";
 import { ClientIDSection } from "./ClientIDSection";
 import { IntegrateAPIKeyCodeTabs } from "./IntegrateAPIKeyCodeTabs";
 import { SecretKeySection } from "./SecretKeySection";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
index f0393114cf6..f6a68864927 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectSidebarLayout.tsx
@@ -13,9 +13,9 @@ import {
 import { ContractIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/ContractIcon";
 import { EngineIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/EngineIcon";
 import { InsightIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/InsightIcon";
+import { NebulaIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/NebulaIcon";
 import { PayIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/PayIcon";
 import { SmartAccountIcon } from "../../../../../(dashboard)/(chain)/components/server/icons/SmartAccountIcon";
-import { NebulaIcon } from "../../../../../../nebula-app/(app)/icons/NebulaIcon";
 
 export function ProjectSidebarLayout(props: {
   layoutPath: string;
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/factories/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/factories/page.tsx
index 0c9e68b11a2..a5ffe4bb929 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/factories/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/connect/account-abstraction/factories/page.tsx
@@ -1,12 +1,12 @@
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
+import { ClientOnly } from "@/components/blocks/client-only";
 import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
 import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { DefaultFactoriesSection } from "components/smart-wallets/AccountFactories";
 import { FactoryContracts } from "components/smart-wallets/AccountFactories/factory-contracts";
 import { PlusIcon } from "lucide-react";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/explorer/components/engine-explorer.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/explorer/components/engine-explorer.tsx
index 8aedece201b..699736498cf 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/explorer/components/engine-explorer.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/explorer/components/engine-explorer.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import "./swagger-ui.css";
 import "swagger-ui-react/swagger-ui.css";
+import { ClientOnly } from "@/components/blocks/client-only";
 import dynamic from "next/dynamic";
 
 const SwaggerUI = dynamic(() => import("swagger-ui-react"), { ssr: false });
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx
index b1870470da2..8846c40c3c3 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx
@@ -7,7 +7,7 @@ import { AnnouncementBanner } from "components/notices/AnnouncementBanner";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { siwaExamplePrompts } from "../../../../(dashboard)/support/page";
-import { CustomChatButton } from "../../../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
+import { CustomChatButton } from "../../../../../../components/CustomChat/CustomChatButton";
 import { getValidAccount } from "../../../../account/settings/getAccount";
 import {
   getAuthToken,
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.tsx
deleted file mode 100644
index 28595558596..00000000000
--- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChat.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-"use client";
-
-import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import { ToolTipLabel } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { useQuery } from "@tanstack/react-query";
-import { useTrack } from "hooks/analytics/useTrack";
-import { ExternalLinkIcon, RefreshCcwIcon, XIcon } from "lucide-react";
-import Link from "next/link";
-import {
-  Suspense,
-  lazy,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import type { ThirdwebClient } from "thirdweb";
-import type { NebulaContext } from "../../api/chat";
-import type { ExamplePrompt } from "../../data/examplePrompts";
-import { NebulaIcon } from "../../icons/NebulaIcon";
-import { getNebulaAuthToken } from "./actions";
-
-const LazyFloatingChatContent = lazy(() => import("./FloatingChatContent"));
-
-export function NebulaChatButton(props: {
-  pageType: "chain" | "contract" | "support";
-  examplePrompts: ExamplePrompt[];
-  networks: NebulaContext["networks"];
-  isLoggedIn: boolean;
-  label: string;
-  client: ThirdwebClient;
-  isFloating: boolean;
-  nebulaParams:
-    | {
-        messagePrefix: string;
-        chainIds: number[];
-        wallet: string | undefined;
-      }
-    | undefined;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [hasBeenOpened, setHasBeenOpened] = useState(false);
-  const closeModal = useCallback(() => setIsOpen(false), []);
-  const [isDismissed, setIsDismissed] = useState(false);
-  const trackEvent = useTrack();
-
-  if (isDismissed) {
-    return null;
-  }
-
-  return (
-    <>
-      <div
-        className={cn(
-          "flex items-center gap-1.5",
-          props.isFloating && "fixed right-6 bottom-6 z-50",
-        )}
-      >
-        <Button
-          onClick={() => {
-            setIsOpen(true);
-            setHasBeenOpened(true);
-            trackEvent({
-              category: "floating_nebula",
-              action: "click",
-              label: "open",
-              page: props.pageType,
-            });
-          }}
-          variant="default"
-          className="gap-2 rounded-full"
-        >
-          <NebulaIcon className="size-4" />
-          {props.label}
-        </Button>
-        {props.isFloating && (
-          <Button
-            variant="outline"
-            className="size-10 rounded-full bg-card p-0"
-            onClick={() => {
-              setIsDismissed(true);
-              trackEvent({
-                category: "floating_nebula",
-                action: "click",
-                label: "dismiss",
-                page: props.pageType,
-              });
-            }}
-          >
-            <XIcon className="size-4" />
-          </Button>
-        )}
-      </div>
-
-      <NebulaChatUIContainer
-        isLoggedIn={props.isLoggedIn}
-        networks={props.networks}
-        onClose={closeModal}
-        isOpen={isOpen}
-        hasBeenOpened={hasBeenOpened}
-        client={props.client}
-        nebulaParams={props.nebulaParams}
-        examplePrompts={props.examplePrompts}
-        pageType={props.pageType}
-      />
-    </>
-  );
-}
-
-function NebulaChatUIContainer(props: {
-  onClose: () => void;
-  isOpen: boolean;
-  hasBeenOpened: boolean;
-  examplePrompts: ExamplePrompt[];
-  pageType: "chain" | "contract" | "support";
-  client: ThirdwebClient;
-  isLoggedIn: boolean;
-  networks: NebulaContext["networks"];
-  nebulaParams:
-    | {
-        messagePrefix: string;
-        chainIds: number[];
-        wallet: string | undefined;
-      }
-    | undefined;
-}) {
-  const ref = useOutsideClick(props.onClose);
-  const shouldRenderChat = props.isOpen || props.hasBeenOpened;
-  const [nebulaSessionKey, setNebulaSessionKey] = useState(0);
-  const trackEvent = useTrack();
-
-  return (
-    <div
-      className={cn(
-        "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-xl",
-        !props.isOpen && "hidden",
-      )}
-      ref={ref}
-    >
-      <div className="flex items-center justify-between border-b p-4">
-        <Link
-          className="group flex items-center gap-2"
-          target="_blank"
-          href="https://thirdweb.com/nebula"
-          onClick={() => {
-            trackEvent({
-              category: "floating_nebula",
-              action: "click",
-              label: "nebula-landing",
-              page: props.pageType,
-            });
-          }}
-        >
-          <h2 className="font-semibold text-lg tracking-tight">Nebula</h2>
-          <ExternalLinkIcon className="size-4 text-muted-foreground/70 group-hover:text-foreground" />
-        </Link>
-
-        <div className="flex items-center gap-2">
-          <ToolTipLabel label="Reset chat">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setNebulaSessionKey((prev) => prev + 1)}
-              className="h-auto w-auto p-1 text-muted-foreground"
-            >
-              <RefreshCcwIcon className="size-5" />
-            </Button>
-          </ToolTipLabel>
-
-          <ToolTipLabel label="Close chat">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={props.onClose}
-              className="h-auto w-auto p-1 text-muted-foreground"
-            >
-              <XIcon className="size-5" />
-            </Button>
-          </ToolTipLabel>
-        </div>
-      </div>
-
-      {/* once opened keep the component mounted to preserve the states */}
-      <div className="relative flex grow flex-col overflow-hidden">
-        {shouldRenderChat && (
-          <ChatContent
-            isLoggedIn={props.isLoggedIn}
-            sessionKey={nebulaSessionKey}
-            networks={props.networks}
-            client={props.client}
-            nebulaParams={props.nebulaParams}
-            examplePrompts={props.examplePrompts}
-            pageType={props.pageType}
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-function ChatContent(
-  props: Omit<
-    React.ComponentProps<typeof LazyFloatingChatContent>,
-    "authToken"
-  > & {
-    sessionKey: number;
-    isLoggedIn: boolean;
-  },
-) {
-  const { sessionKey, isLoggedIn, ...restProps } = props;
-  const nebulaAuthTokenQuery = useNebulaAuthToken(isLoggedIn);
-
-  if (nebulaAuthTokenQuery.isFetching) {
-    return <LoadingScreen />;
-  }
-
-  return (
-    <Suspense fallback={<LoadingScreen />}>
-      <LazyFloatingChatContent
-        key={sessionKey}
-        {...restProps}
-        authToken={nebulaAuthTokenQuery.data ?? undefined}
-      />
-    </Suspense>
-  );
-}
-
-function LoadingScreen() {
-  return (
-    <div className="absolute inset-0 flex items-center justify-center">
-      <Spinner className="size-10" />
-    </div>
-  );
-}
-
-function useOutsideClick(onOutsideClick: () => void) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  // clicking outside the chat window should close it
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        // if clicked on a dialog or popover - ignore
-        if (
-          (event.target as HTMLElement).closest(
-            "[data-radix-popper-content-wrapper], [role='dialog'], [data-state='open']",
-          )
-        ) {
-          return;
-        }
-        onOutsideClick();
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [onOutsideClick]);
-
-  return ref;
-}
-
-function useNebulaAuthToken(isLoggedInToDashboard: boolean) {
-  return useQuery({
-    queryKey: ["nebula-auth-token", isLoggedInToDashboard],
-    queryFn: async () => {
-      const jwt = await getNebulaAuthToken();
-      return jwt || null;
-    },
-    retry: false,
-    refetchOnWindowFocus: false,
-    refetchOnMount: "always",
-    refetchOnReconnect: false,
-  });
-}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
deleted file mode 100644
index 63257bfb22c..00000000000
--- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
+++ /dev/null
@@ -1,346 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { useTrack } from "hooks/analytics/useTrack";
-import { ArrowRightIcon, ArrowUpRightIcon } from "lucide-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useCallback, useState } from "react";
-import type { ThirdwebClient } from "thirdweb";
-import {
-  useActiveWallet,
-  useActiveWalletConnectionStatus,
-} from "thirdweb/react";
-import type { NebulaContext } from "../../api/chat";
-import { createSession } from "../../api/session";
-import type { NebulaUserMessage } from "../../api/types";
-import type { ExamplePrompt } from "../../data/examplePrompts";
-import { NebulaIcon } from "../../icons/NebulaIcon";
-import { ChatBar } from "../ChatBar";
-import {
-  handleNebulaPrompt,
-  handleNebulaPromptError,
-} from "../ChatPageContent";
-import { Chats } from "../Chats";
-import type { ChatMessage } from "../Chats";
-
-export default function FloatingChatContent(props: {
-  authToken: string | undefined;
-  client: ThirdwebClient;
-  examplePrompts: ExamplePrompt[];
-  pageType: "chain" | "contract" | "support";
-  networks: NebulaContext["networks"];
-  nebulaParams:
-    | {
-        messagePrefix: string;
-        chainIds: number[];
-        wallet: string | undefined;
-      }
-    | undefined;
-}) {
-  if (!props.authToken) {
-    return <LoggedOutStateChatContent />;
-  }
-
-  return (
-    <FloatingChatContentLoggedIn
-      networks={props.networks}
-      authToken={props.authToken}
-      client={props.client}
-      nebulaParams={props.nebulaParams}
-      examplePrompts={props.examplePrompts}
-      pageType={props.pageType}
-    />
-  );
-}
-
-function FloatingChatContentLoggedIn(props: {
-  authToken: string;
-  client: ThirdwebClient;
-  pageType: "chain" | "contract" | "support";
-  examplePrompts: ExamplePrompt[];
-  networks: NebulaContext["networks"];
-  nebulaParams:
-    | {
-        messagePrefix: string;
-        chainIds: number[];
-        wallet: string | undefined;
-      }
-    | undefined;
-}) {
-  const [userHasSubmittedMessage, setUserHasSubmittedMessage] = useState(false);
-  const [messages, setMessages] = useState<Array<ChatMessage>>([]);
-  const [sessionId, setSessionId] = useState<string | undefined>(undefined);
-  const [chatAbortController, setChatAbortController] = useState<
-    AbortController | undefined
-  >();
-  const trackEvent = useTrack();
-  const [isChatStreaming, setIsChatStreaming] = useState(false);
-  const [enableAutoScroll, setEnableAutoScroll] = useState(false);
-  const connectionStatus = useActiveWalletConnectionStatus();
-  const activeWallet = useActiveWallet();
-
-  const [contextFilters, setContextFilters] = useState<
-    NebulaContext | undefined
-  >(() => {
-    return {
-      chainIds:
-        props.nebulaParams?.chainIds.map((chainId) => chainId.toString()) ||
-        null,
-      walletAddress: props.nebulaParams?.wallet || null,
-      networks: props.networks,
-    };
-  });
-
-  const initSession = useCallback(async () => {
-    const session = await createSession({
-      authToken: props.authToken,
-      context: contextFilters,
-    });
-    setSessionId(session.id);
-    return session;
-  }, [props.authToken, contextFilters]);
-
-  const handleSendMessage = useCallback(
-    async (userMessage: NebulaUserMessage) => {
-      const abortController = new AbortController();
-      setUserHasSubmittedMessage(true);
-      setIsChatStreaming(true);
-      setEnableAutoScroll(true);
-
-      const textMessage = userMessage.content.find((x) => x.type === "text");
-
-      trackEvent({
-        category: "floating_nebula",
-        action: "send",
-        label: "message",
-        message: textMessage?.text,
-        page: props.pageType,
-        sessionId: sessionId,
-      });
-
-      setMessages((prev) => [
-        ...prev,
-        {
-          type: "user",
-          content: userMessage.content,
-        },
-        // instant loading indicator feedback to user
-        {
-          type: "presence",
-          texts: [],
-        },
-      ]);
-
-      const messagePrefix = props.nebulaParams?.messagePrefix;
-
-      // if this is first message, set the message prefix
-      // deep clone `userMessage` to avoid mutating the original message, its a pretty small object so JSON.parse is fine
-      const messageToSend = JSON.parse(
-        JSON.stringify(userMessage),
-      ) as NebulaUserMessage;
-
-      // if this is first message, set the message prefix
-      if (messagePrefix && !userHasSubmittedMessage) {
-        const textMessage = messageToSend.content.find(
-          (x) => x.type === "text",
-        );
-        if (textMessage) {
-          textMessage.text = `${messagePrefix}\n\n${textMessage.text}`;
-        }
-      }
-
-      try {
-        // Ensure we have a session ID
-        let currentSessionId = sessionId;
-        if (!currentSessionId) {
-          const session = await initSession();
-          currentSessionId = session.id;
-        }
-
-        setChatAbortController(abortController);
-        await handleNebulaPrompt({
-          abortController,
-          message: messageToSend,
-          sessionId: currentSessionId,
-          authToken: props.authToken,
-          setMessages,
-          contextFilters: contextFilters,
-          setContextFilters: setContextFilters,
-        });
-      } catch (error) {
-        if (abortController.signal.aborted) {
-          return;
-        }
-
-        handleNebulaPromptError({
-          error,
-          setMessages,
-        });
-      } finally {
-        setIsChatStreaming(false);
-        setEnableAutoScroll(false);
-      }
-    },
-    [
-      props.authToken,
-      contextFilters,
-      initSession,
-      sessionId,
-      props.nebulaParams?.messagePrefix,
-      userHasSubmittedMessage,
-      trackEvent,
-      props.pageType,
-    ],
-  );
-
-  const showEmptyState = !userHasSubmittedMessage && messages.length === 0;
-  return (
-    <div className="flex grow flex-col overflow-hidden">
-      {showEmptyState ? (
-        <EmptyStateChatPageContent
-          sendMessage={handleSendMessage}
-          examplePrompts={props.examplePrompts}
-        />
-      ) : (
-        <Chats
-          messages={messages}
-          isChatStreaming={isChatStreaming}
-          authToken={props.authToken}
-          sessionId={sessionId}
-          className="min-w-0 pb-10"
-          client={props.client}
-          enableAutoScroll={enableAutoScroll}
-          setEnableAutoScroll={setEnableAutoScroll}
-          useSmallText
-          sendMessage={handleSendMessage}
-        />
-      )}
-      <ChatBar
-        placeholder={"Ask Nebula"}
-        onLoginClick={undefined}
-        client={props.client}
-        isConnectingWallet={connectionStatus === "connecting"}
-        context={contextFilters}
-        setContext={setContextFilters}
-        showContextSelector={false}
-        connectedWallets={
-          props.nebulaParams?.wallet && activeWallet
-            ? [
-                {
-                  address: props.nebulaParams.wallet,
-                  walletId: activeWallet.id,
-                },
-              ]
-            : []
-        }
-        setActiveWallet={() => {}}
-        abortChatStream={() => {
-          chatAbortController?.abort();
-          setChatAbortController(undefined);
-          setIsChatStreaming(false);
-          // if last message is presence, remove it
-          if (messages[messages.length - 1]?.type === "presence") {
-            setMessages((prev) => prev.slice(0, -1));
-          }
-        }}
-        isChatStreaming={isChatStreaming}
-        prefillMessage={undefined}
-        sendMessage={handleSendMessage}
-        className="rounded-none border-x-0 border-b-0"
-        allowImageUpload={true}
-      />
-    </div>
-  );
-}
-
-function LoggedOutStateChatContent() {
-  const pathname = usePathname();
-  return (
-    <div className="flex grow flex-col items-center justify-center p-4">
-      <div className="mb-4 flex justify-center">
-        <div className="rounded-full border p-1">
-          <div className="rounded-full border bg-card p-2">
-            <NebulaIcon className="size-7 text-muted-foreground" />
-          </div>
-        </div>
-      </div>
-
-      <h1 className="px-4 text-center font-semibold text-3xl tracking-tight md:text-4xl">
-        How can I help you <br className="max-sm:hidden" />
-        onchain today?
-      </h1>
-
-      <div className="h-3" />
-      <p className="text-base text-muted-foreground">
-        Sign in to use Nebula AI
-      </p>
-      <div className="h-5" />
-
-      <Button asChild>
-        <Link
-          href={`/login?next=${encodeURIComponent(pathname)}`}
-          className="w-full max-w-96 gap-2"
-        >
-          Sign in
-          <ArrowRightIcon className="size-4" />
-        </Link>
-      </Button>
-    </div>
-  );
-}
-
-function EmptyStateChatPageContent(props: {
-  sendMessage: (message: NebulaUserMessage) => void;
-  examplePrompts: ExamplePrompt[];
-}) {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center overflow-auto p-4 ">
-      <div className="mb-4 flex justify-center">
-        <div className="rounded-full border-[1.5px] border-nebula-pink-foreground/20 bg-[hsl(var(--nebula-pink-foreground)/5%)] p-1">
-          <div className="rounded-full border-[1.5px] border-nebula-pink-foreground/40 bg-[hsl(var(--nebula-pink-foreground)/5%)] p-2">
-            <NebulaIcon className="size-7 text-nebula-pink-foreground" />
-          </div>
-        </div>
-      </div>
-
-      <h1 className="px-4 text-center font-semibold text-3xl tracking-tight md:text-4xl">
-        How can I help you <br className="max-sm:hidden" />
-        onchain today?
-      </h1>
-
-      <div className="h-6" />
-      <div className="flex max-w-lg flex-col flex-wrap justify-center gap-2.5">
-        {props.examplePrompts.map((prompt) => {
-          return (
-            <ExamplePromptButton
-              key={prompt.title}
-              label={prompt.title}
-              onClick={() =>
-                props.sendMessage({
-                  role: "user",
-                  content: [
-                    {
-                      type: "text",
-                      text: prompt.message,
-                    },
-                  ],
-                })
-              }
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function ExamplePromptButton(props: { label: string; onClick: () => void }) {
-  return (
-    <Button
-      variant="outline"
-      className="h-auto gap-1.5 rounded-full bg-card px-3 py-2 text-muted-foreground text-xs"
-      onClick={props.onClick}
-    >
-      {props.label} <ArrowUpRightIcon className="size-3" />
-    </Button>
-  );
-}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/actions.ts b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/actions.ts
deleted file mode 100644
index a5cd4b69c43..00000000000
--- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/actions.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-"use server";
-
-import {
-  getAuthToken,
-  getAuthTokenWalletAddress,
-} from "../../../../(app)/api/lib/getAuthToken";
-import { getNebulaLoginStatus } from "../../../_utils/isLoggedIntoNebula";
-import {
-  doNebulaLogin,
-  getNebulaLoginPayload,
-} from "../../../login/auth-actions";
-
-export async function getNebulaAuthToken() {
-  const [dashboardAuthToken, dashboardAuthTokenAddress] = await Promise.all([
-    getAuthToken(),
-    getAuthTokenWalletAddress(),
-  ]);
-
-  // if not logged in to dashboard
-  if (!dashboardAuthToken || !dashboardAuthTokenAddress) {
-    return undefined;
-  }
-
-  const nebulaLoginStatus = await getNebulaLoginStatus();
-
-  // if already logged in to nebula
-  if (nebulaLoginStatus.isLoggedIn) {
-    return nebulaLoginStatus.authToken;
-  }
-
-  // automatically login to nebula with the dashboard auth token ---
-  const loginPayload = await getNebulaLoginPayload({
-    address: dashboardAuthTokenAddress,
-    chainId: 1,
-  });
-
-  if (!loginPayload) {
-    return undefined;
-  }
-
-  const result = await doNebulaLogin({
-    type: "floating-chat",
-    loginPayload: {
-      payload: loginPayload,
-      token: dashboardAuthToken,
-    },
-  });
-
-  if (result.success) {
-    return result.token;
-  }
-
-  return undefined;
-}
diff --git a/apps/dashboard/src/app/nebula-app/layout.tsx b/apps/dashboard/src/app/nebula-app/layout.tsx
deleted file mode 100644
index 927bbc8a5eb..00000000000
--- a/apps/dashboard/src/app/nebula-app/layout.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { Metadata } from "next";
-import "../../global.css";
-import "./nebula-global.css";
-import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
-import { cn } from "@/lib/utils";
-import { PHProvider } from "lib/posthog/Posthog";
-import { PosthogHeadSetup } from "lib/posthog/PosthogHeadSetup";
-import { PostHogPageView } from "lib/posthog/PosthogPageView";
-import { Inter } from "next/font/google";
-import NextTopLoader from "nextjs-toploader";
-import { NebulaProviders } from "./providers";
-
-const title =
-  "thirdweb Nebula: The Most powerful AI for interacting with the blockchain";
-const description =
-  "The most powerful AI for interacting with the blockchain, with real-time access to EVM chains and their data";
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    title,
-    description,
-  },
-};
-
-const fontSans = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-  display: "swap",
-});
-
-export default function Layout(props: {
-  children: React.ReactNode;
-}) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <link rel="icon" href="/assets/nebula/favicon.ico" />
-        <PosthogHeadSetup />
-      </head>
-      <PHProvider disable_session_recording={false}>
-        <PostHogPageView />
-        <body
-          className={cn(
-            "bg-background font-sans antialiased",
-            fontSans.variable,
-          )}
-        >
-          <NebulaProviders>{props.children}</NebulaProviders>
-          <DashboardRouterTopProgressBar />
-          <NextTopLoader
-            color="hsl(var(--foreground))"
-            height={3}
-            shadow={false}
-            showSpinner={false}
-          />
-        </body>
-      </PHProvider>
-    </html>
-  );
-}
diff --git a/apps/dashboard/src/app/nebula-app/nebula-global.css b/apps/dashboard/src/app/nebula-app/nebula-global.css
deleted file mode 100644
index 345dfcb1578..00000000000
--- a/apps/dashboard/src/app/nebula-app/nebula-global.css
+++ /dev/null
@@ -1,4 +0,0 @@
-::selection {
-  background-color: hsl(var(--inverted));
-  color: hsl(var(--inverted-foreground));
-}
diff --git a/apps/dashboard/src/app/nebula-app/readme.md b/apps/dashboard/src/app/nebula-app/readme.md
deleted file mode 100644
index 7b1f684db10..00000000000
--- a/apps/dashboard/src/app/nebula-app/readme.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Nebula App
-
-- This section of dashboard is only accessible via `nebula` subdomain and not from the `/nebula-app` route. This is done using `middleware.ts`
-- Treat this section of dashboard as a completely separate app from the rest of the dashboard.
-- For example: redirecting to `/login` inside this layout will render `nebula-app/(app)/login` page and not the global login page because this layout is only rendered at top level from `nebula` subdomain.
-
-## Development
-
-- Start dev server - `pnpm run dashboard`
-- Go to `http://nebula.localhost:3000` to test the nebula app.
diff --git a/apps/dashboard/src/components/ClientOnly/ClientOnly.module.css b/apps/dashboard/src/components/ClientOnly/ClientOnly.module.css
deleted file mode 100644
index 32cb7923ae0..00000000000
--- a/apps/dashboard/src/components/ClientOnly/ClientOnly.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.fadeIn {
-  animation-name: fadeIn;
-  animation-timing-function: ease;
-  animation-fill-mode: forwards;
-}
diff --git a/apps/dashboard/src/components/CustomChat/ChatBar.tsx b/apps/dashboard/src/components/CustomChat/ChatBar.tsx
new file mode 100644
index 00000000000..e41d6ff875c
--- /dev/null
+++ b/apps/dashboard/src/components/CustomChat/ChatBar.tsx
@@ -0,0 +1,136 @@
+"use client";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { AutoResizeTextarea } from "@/components/ui/textarea";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { ArrowUpIcon, CircleStopIcon, PaperclipIcon } from "lucide-react";
+import { useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import type { NebulaUserMessage } from "./types";
+
+export function ChatBar(props: {
+  sendMessage: (message: NebulaUserMessage) => void;
+  isChatStreaming: boolean;
+  abortChatStream: () => void;
+  prefillMessage: string | undefined;
+  className?: string;
+  client: ThirdwebClient;
+  isConnectingWallet: boolean;
+  onLoginClick: undefined | (() => void);
+  placeholder: string;
+}) {
+  const [message, setMessage] = useState(props.prefillMessage || "");
+
+  function handleSubmit(message: string) {
+    const userMessage: NebulaUserMessage = {
+      role: "user",
+      content: [{ type: "text", text: message }],
+    };
+
+    props.sendMessage(userMessage);
+    setMessage("");
+  }
+
+  return (
+    <DynamicHeight transition="height 200ms ease">
+      <div
+        className={cn(
+          "overflow-hidden rounded-2xl border border-border bg-card transition-colors",
+          props.className,
+        )}
+      >
+        <div className="p-2">
+          <div className="max-h-[200px] overflow-y-auto">
+            <AutoResizeTextarea
+              placeholder={props.placeholder}
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              onKeyDown={(e) => {
+                // ignore if shift key is pressed to allow entering new lines
+                if (e.shiftKey) {
+                  return;
+                }
+                if (e.key === "Enter" && !props.isChatStreaming) {
+                  e.preventDefault();
+                  handleSubmit(message);
+                }
+              }}
+              className="min-h-[60px] resize-none border-none bg-transparent pt-2 leading-relaxed focus-visible:ring-0 focus-visible:ring-offset-0"
+              disabled={props.isChatStreaming}
+            />
+          </div>
+
+          <div className="flex items-end justify-between gap-3 px-2 pb-2">
+            {/* left */}
+            <div className="grow" />
+
+            {/* right */}
+            <div className="flex items-center gap-2">
+              {props.onLoginClick ? (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      className="!h-auto w-auto shrink-0 gap-2 p-2"
+                    >
+                      <ToolTipLabel label="Attach Image">
+                        <PaperclipIcon className="size-4" />
+                      </ToolTipLabel>
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-72">
+                    <div>
+                      <p className="mb-3 text-muted-foreground text-sm">
+                        Get access to image uploads by signing in to Nebula
+                      </p>
+                      <Button
+                        variant="default"
+                        onClick={props.onLoginClick}
+                        className="w-full"
+                      >
+                        Sign in
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              ) : null}
+
+              {/* Send / Stop */}
+              {props.isChatStreaming ? (
+                <Button
+                  variant="default"
+                  className="!h-auto w-auto shrink-0 gap-2 p-2"
+                  onClick={() => {
+                    props.abortChatStream();
+                  }}
+                >
+                  <CircleStopIcon className="size-4" />
+                  Stop
+                </Button>
+              ) : (
+                <Button
+                  aria-label="Send"
+                  disabled={message.trim() === "" || props.isConnectingWallet}
+                  className="!h-auto w-auto border border-nebula-pink-foreground p-2 disabled:opacity-100"
+                  variant="pink"
+                  onClick={() => {
+                    if (message.trim() === "") return;
+                    handleSubmit(message);
+                  }}
+                >
+                  <ArrowUpIcon className="size-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </DynamicHeight>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatButton.tsx b/apps/dashboard/src/components/CustomChat/CustomChatButton.tsx
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatButton.tsx
rename to apps/dashboard/src/components/CustomChat/CustomChatButton.tsx
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx b/apps/dashboard/src/components/CustomChat/CustomChatContent.tsx
similarity index 96%
rename from apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx
rename to apps/dashboard/src/components/CustomChat/CustomChatContent.tsx
index bb294ed6793..16c341fdc08 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx
+++ b/apps/dashboard/src/components/CustomChat/CustomChatContent.tsx
@@ -7,12 +7,11 @@ import { usePathname } from "next/navigation";
 import { useCallback, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveWalletConnectionStatus } from "thirdweb/react";
-import type { NebulaContext } from "../../api/chat";
-import type { ExamplePrompt } from "../../data/examplePrompts";
-import { NebulaIcon } from "../../icons/NebulaIcon";
-import { ChatBar } from "../ChatBar";
+import { NebulaIcon } from "../../app/(app)/(dashboard)/(chain)/components/server/icons/NebulaIcon";
+import { ChatBar } from "./ChatBar";
 import { type CustomChatMessage, CustomChats } from "./CustomChats";
 import type { UserMessage, UserMessageContent } from "./CustomChats";
+import type { ExamplePrompt, NebulaContext } from "./types";
 
 export default function CustomChatContent(props: {
   authToken: string | undefined;
@@ -29,7 +28,6 @@ export default function CustomChatContent(props: {
 
   return (
     <CustomChatContentLoggedIn
-      networks={props.networks}
       teamId={props.teamId}
       clientId={props.clientId}
       authToken={props.authToken || ""}
@@ -45,7 +43,6 @@ function CustomChatContentLoggedIn(props: {
   clientId: string | undefined;
   client: ThirdwebClient;
   examplePrompts: ExamplePrompt[];
-  networks: NebulaContext["networks"];
 }) {
   const [userHasSubmittedMessage, setUserHasSubmittedMessage] = useState(false);
   const [messages, setMessages] = useState<Array<CustomChatMessage>>([]);
@@ -242,11 +239,6 @@ function CustomChatContentLoggedIn(props: {
         onLoginClick={undefined}
         client={props.client}
         isConnectingWallet={connectionStatus === "connecting"}
-        context={undefined}
-        setContext={() => {}}
-        showContextSelector={false}
-        connectedWallets={[]}
-        setActiveWallet={() => {}}
         abortChatStream={() => {
           chatAbortController?.abort();
           setChatAbortController(undefined);
@@ -268,7 +260,6 @@ function CustomChatContentLoggedIn(props: {
           handleSendMessage(userMessage);
         }}
         className="rounded-none border-x-0 border-b-0"
-        allowImageUpload={false}
       />
     </div>
   );
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChats.tsx b/apps/dashboard/src/components/CustomChat/CustomChats.tsx
similarity index 99%
rename from apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChats.tsx
rename to apps/dashboard/src/components/CustomChat/CustomChats.tsx
index 172c03d2d30..0d84b01e0ef 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChats.tsx
+++ b/apps/dashboard/src/components/CustomChat/CustomChats.tsx
@@ -9,7 +9,7 @@ import {
 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
-import { Reasoning } from "../Reasoning/Reasoning";
+import { Reasoning } from "./Reasoning";
 
 // Define local types
 export type UserMessageContent = { type: "text"; text: string };
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.tsx b/apps/dashboard/src/components/CustomChat/Reasoning.tsx
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.tsx
rename to apps/dashboard/src/components/CustomChat/Reasoning.tsx
diff --git a/apps/dashboard/src/components/CustomChat/types.ts b/apps/dashboard/src/components/CustomChat/types.ts
new file mode 100644
index 00000000000..ba1aaaa0d2b
--- /dev/null
+++ b/apps/dashboard/src/components/CustomChat/types.ts
@@ -0,0 +1,36 @@
+export type ExamplePrompt = {
+  title: string;
+  message: string;
+  interceptedReply?: string;
+};
+
+// TODO - remove "Nebula" wording and simplify types
+
+export type NebulaContext = {
+  chainIds: string[] | null;
+  walletAddress: string | null;
+  networks: "mainnet" | "testnet" | "all" | null;
+};
+
+type NebulaUserMessageContentItem =
+  | {
+      type: "image";
+      image_url: string | null;
+      b64: string | null;
+    }
+  | {
+      type: "text";
+      text: string;
+    }
+  | {
+      type: "transaction";
+      transaction_hash: string;
+      chain_id: number;
+    };
+
+type NebulaUserMessageContent = NebulaUserMessageContentItem[];
+
+export type NebulaUserMessage = {
+  role: "user";
+  content: NebulaUserMessageContent;
+};
diff --git a/apps/dashboard/src/components/explore/contract-card/index.tsx b/apps/dashboard/src/components/explore/contract-card/index.tsx
index 52283bd04be..1d09547672a 100644
--- a/apps/dashboard/src/components/explore/contract-card/index.tsx
+++ b/apps/dashboard/src/components/explore/contract-card/index.tsx
@@ -1,3 +1,4 @@
+import { ClientOnly } from "@/components/blocks/client-only";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -10,7 +11,6 @@ import { moduleToBase64 } from "app/(app)/(dashboard)/published-contract/utils/m
 import { replaceDeployerAddress } from "lib/publisher-utils";
 import { RocketIcon, ShieldCheckIcon } from "lucide-react";
 import Link from "next/link";
-import { ClientOnly } from "../../ClientOnly/ClientOnly";
 import { fetchPublishedContractVersion } from "../../contract-components/fetch-contracts-with-versions";
 import { ContractPublisher } from "../publisher";
 
diff --git a/apps/dashboard/src/middleware.ts b/apps/dashboard/src/middleware.ts
index c512b0f10ec..c2fa6cd94e4 100644
--- a/apps/dashboard/src/middleware.ts
+++ b/apps/dashboard/src/middleware.ts
@@ -5,10 +5,6 @@ import { getAddress } from "thirdweb";
 import { getChainMetadata } from "thirdweb/chains";
 import { isValidENSName } from "thirdweb/utils";
 import { LAST_VISITED_TEAM_PAGE_PATH } from "./app/(app)/team/components/last-visited-page/consts";
-import {
-  NEBULA_COOKIE_ACTIVE_ACCOUNT,
-  NEBULA_COOKIE_PREFIX_TOKEN,
-} from "./app/nebula-app/_utils/constants";
 import { defineDashboardChain } from "./lib/defineDashboardChain";
 
 // ignore assets, api - only intercept page routes
@@ -31,44 +27,8 @@ export async function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
   // nebula subdomain handling
-  const host = request.headers.get("host");
-  const subdomain = host?.split(".")[0];
   const paths = pathname.slice(1).split("/");
 
-  const nebulaActiveAccount = request.cookies.get(
-    NEBULA_COOKIE_ACTIVE_ACCOUNT,
-  )?.value;
-
-  const nebulaAuthCookie = nebulaActiveAccount
-    ? request.cookies.get(
-        NEBULA_COOKIE_PREFIX_TOKEN + getAddress(nebulaActiveAccount),
-      )
-    : null;
-
-  // nebula.thirdweb.com -> render page at app/nebula-app
-  // on vercel preview, the format is nebula---thirdweb-www-git-<branch-name>.thirdweb-preview.com
-  if (
-    subdomain &&
-    (subdomain === "nebula" || subdomain.startsWith("nebula---"))
-  ) {
-    // preserve search params when redirecting to /login page
-    if (
-      !nebulaAuthCookie &&
-      paths[0] !== "login" &&
-      paths[0] !== "move-funds"
-    ) {
-      return redirect(request, "/login", {
-        searchParams: request.nextUrl.searchParams.toString(),
-      });
-    }
-
-    const newPaths = ["nebula-app", ...paths];
-
-    return rewrite(request, `/${newPaths.join("/")}`, {
-      searchParams: request.nextUrl.searchParams.toString(),
-    });
-  }
-
   let cookiesToSet: Record<string, string> | undefined = undefined;
 
   const activeAccount = request.cookies.get(COOKIE_ACTIVE_ACCOUNT)?.value;
diff --git a/apps/dashboard/src/stories/stubs.ts b/apps/dashboard/src/stories/stubs.ts
index 37d29fc69e4..6a42f07be30 100644
--- a/apps/dashboard/src/stories/stubs.ts
+++ b/apps/dashboard/src/stories/stubs.ts
@@ -305,35 +305,6 @@ export function teamSubscriptionsStub(
   ];
 }
 
-export function randomLorem(length: number) {
-  const loremWords = [
-    "lorem",
-    "ipsum",
-    "dolor",
-    "sit",
-    "amet",
-    "consectetur",
-    "adipiscing",
-    "elit",
-    "sed",
-    "do",
-    "eiusmod",
-    "tempor",
-    "incididunt",
-    "ut",
-    "labore",
-    "et",
-    "dolore",
-    "magna",
-    "aliqua",
-  ];
-
-  return Array.from({ length }, () => {
-    const randomIndex = Math.floor(Math.random() * loremWords.length);
-    return loremWords[randomIndex];
-  }).join(" ");
-}
-
 export function newAccountStub(overrides?: Partial<Account>): Account {
   return {
     email: undefined,
diff --git a/apps/nebula/.env.example b/apps/nebula/.env.example
new file mode 100644
index 00000000000..09b24feff90
--- /dev/null
+++ b/apps/nebula/.env.example
@@ -0,0 +1,2 @@
+NEXT_PUBLIC_IPFS_GATEWAY_URL="https://{clientId}.thirdwebstorage-dev.com/ipfs/{cid}/{path}"
+NEXT_PUBLIC_NEBULA_URL="https://nebula-api.thirdweb-dev.com"
diff --git a/apps/nebula/.eslintignore b/apps/nebula/.eslintignore
new file mode 100644
index 00000000000..9d60596ddc2
--- /dev/null
+++ b/apps/nebula/.eslintignore
@@ -0,0 +1,13 @@
+# folders
+artifacts/
+build/
+cache/
+coverage/
+dist/
+node_modules/
+typechain/
+graphql/
+
+# files
+.solcover.js
+coverage.json
diff --git a/apps/nebula/.eslintrc.js b/apps/nebula/.eslintrc.js
new file mode 100644
index 00000000000..39095430532
--- /dev/null
+++ b/apps/nebula/.eslintrc.js
@@ -0,0 +1,114 @@
+module.exports = {
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@next/next/recommended",
+    "plugin:storybook/recommended",
+  ],
+  rules: {
+    "react-compiler/react-compiler": "error",
+    "no-restricted-syntax": [
+      "error",
+      {
+        selector: "CallExpression[callee.name='useEffect']",
+        message:
+          'Are you *sure* you need to use "useEffect" here? If you loading any async function prefer using "useQuery".',
+      },
+      {
+        selector: "CallExpression[callee.name='createContext']",
+        message:
+          'Are you *sure* you need to use a "Context"? In almost all cases you should prefer passing props directly.',
+      },
+      {
+        selector: "CallExpression[callee.name='resolveScheme']",
+        message:
+          "resolveScheme can throw error if resolution fails. Either catch the error and ignore the lint warning or Use `resolveSchemeWithErrorHandler` / `replaceIpfsUrl` utility in dashboard instead",
+      },
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          {
+            name: "next/navigation",
+            importNames: ["useRouter"],
+            message:
+              'Use `import { useDashboardRouter } from "@/lib/DashboardRouter";` instead',
+          },
+          {
+            name: "lucide-react",
+            importNames: ["Link", "Table", "Sidebar"],
+            message:
+              'This is likely a mistake. If you really want to import this - postfix the imported name with Icon. Example - "LinkIcon"',
+          },
+        ],
+      },
+    ],
+  },
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "react-compiler"],
+  parserOptions: {
+    ecmaVersion: 2019,
+    ecmaFeatures: {
+      impliedStrict: true,
+      jsx: true,
+    },
+    warnOnUnsupportedTypeScriptVersion: true,
+  },
+  settings: {
+    react: {
+      createClass: "createReactClass",
+      pragma: "React",
+      version: "detect",
+    },
+  },
+  overrides: [
+    // enable rule specifically for TypeScript files
+    {
+      files: ["*.ts", "*.tsx"],
+      rules: {
+        "@typescript-eslint/explicit-module-boundary-types": ["off"],
+      },
+    },
+
+    // in test files, allow null assertions and anys and eslint is sometimes weird about the react-scope thing
+    {
+      files: ["*test.ts?(x)"],
+      rules: {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+
+        "react/display-name": "off",
+      },
+    },
+    // allow requires in non-transpiled JS files and logical key ordering in config files
+    {
+      files: [
+        "babel-node.js",
+        "*babel.config.js",
+        "env.config.js",
+        "next.config.js",
+        "webpack.config.js",
+        "packages/mobile-web/package-builder/**",
+      ],
+      rules: {},
+    },
+
+    // setupTests can have separated imports for logical grouping
+    {
+      files: ["setupTests.ts"],
+      rules: {
+        "import/newline-after-import": "off",
+      },
+    },
+    // THIS NEEDS TO GO LAST!
+    {
+      files: ["*.ts", "*.js", "*.tsx", "*.jsx"],
+      extends: ["biome"],
+    },
+  ],
+  env: {
+    browser: true,
+    node: true,
+  },
+};
diff --git a/apps/nebula/.storybook/main.ts b/apps/nebula/.storybook/main.ts
new file mode 100644
index 00000000000..ca8b9ca3d78
--- /dev/null
+++ b/apps/nebula/.storybook/main.ts
@@ -0,0 +1,28 @@
+import { dirname, join } from "node:path";
+import type { StorybookConfig } from "@storybook/nextjs";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.tsx"],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-docs"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {},
+  },
+  staticDirs: ["../public"],
+  features: {
+    experimentalRSC: true,
+  },
+};
+export default config;
diff --git a/apps/nebula/.storybook/preview.tsx b/apps/nebula/.storybook/preview.tsx
new file mode 100644
index 00000000000..7b1658d6275
--- /dev/null
+++ b/apps/nebula/.storybook/preview.tsx
@@ -0,0 +1,109 @@
+import type { Preview } from "@storybook/nextjs";
+import "../src/global.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { ThemeProvider, useTheme } from "next-themes";
+import { Inter as interFont } from "next/font/google";
+// biome-ignore lint/style/useImportType: <explanation>
+import React from "react";
+import { useEffect } from "react";
+import { Toaster } from "sonner";
+import { Button } from "../src/@/components/ui/button";
+
+const queryClient = new QueryClient();
+
+const fontSans = interFont({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const customViewports = {
+  xs: {
+    // Regular sized phones (iphone 15 / 15 pro)
+    name: "iPhone",
+    styles: {
+      width: "390px",
+      height: "844px",
+    },
+  },
+  sm: {
+    // Larger phones (iphone 15 plus / 15 pro max)
+    name: "iPhone Plus",
+    styles: {
+      width: "430px",
+      height: "932px",
+    },
+  },
+};
+
+const preview: Preview = {
+  parameters: {
+    viewport: {
+      viewports: customViewports,
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  decorators: [
+    (Story) => {
+      return (
+        <ThemeProvider
+          attribute="class"
+          disableTransitionOnChange
+          enableSystem={false}
+          defaultTheme="dark"
+        >
+          <StoryLayout>
+            <Story />
+          </StoryLayout>
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;
+
+function StoryLayout(props: {
+  children: React.ReactNode;
+}) {
+  const { setTheme, theme } = useTheme();
+
+  useEffect(() => {
+    document.body.className = `font-sans antialiased ${fontSans.variable}`;
+  }, []);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="flex min-h-dvh min-w-0 flex-col bg-background text-foreground">
+        <div className="fixed right-0 bottom-0 z-50 flex justify-end gap-2 p-4">
+          <Button
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            size="sm"
+            variant="outline"
+            className="h-auto w-auto shrink-0 rounded-full p-2"
+          >
+            {theme === "dark" ? (
+              <MoonIcon className="size-4" />
+            ) : (
+              <SunIcon className="size-4" />
+            )}
+          </Button>
+        </div>
+
+        <div className="flex min-w-0 grow flex-col">{props.children}</div>
+        <ToasterSetup />
+      </div>
+    </QueryClientProvider>
+  );
+}
+
+function ToasterSetup() {
+  const { theme } = useTheme();
+  return <Toaster richColors theme={theme === "light" ? "light" : "dark"} />;
+}
diff --git a/apps/nebula/LICENSE.md b/apps/nebula/LICENSE.md
new file mode 100644
index 00000000000..88e8b41ee6d
--- /dev/null
+++ b/apps/nebula/LICENSE.md
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1.  Definitions.
+
+    "License" shall mean the terms and conditions for use, reproduction,
+    and distribution as defined by Sections 1 through 9 of this document.
+
+    "Licensor" shall mean the copyright owner or entity authorized by
+    the copyright owner that is granting the License.
+
+    "Legal Entity" shall mean the union of the acting entity and all
+    other entities that control, are controlled by, or are under common
+    control with that entity. For the purposes of this definition,
+    "control" means (i) the power, direct or indirect, to cause the
+    direction or management of such entity, whether by contract or
+    otherwise, or (ii) ownership of fifty percent (50%) or more of the
+    outstanding shares, or (iii) beneficial ownership of such entity.
+
+    "You" (or "Your") shall mean an individual or Legal Entity
+    exercising permissions granted by this License.
+
+    "Source" form shall mean the preferred form for making modifications,
+    including but not limited to software source code, documentation
+    source, and configuration files.
+
+    "Object" form shall mean any form resulting from mechanical
+    transformation or translation of a Source form, including but
+    not limited to compiled object code, generated documentation,
+    and conversions to other media types.
+
+    "Work" shall mean the work of authorship, whether in Source or
+    Object form, made available under the License, as indicated by a
+    copyright notice that is included in or attached to the work
+    (an example is provided in the Appendix below).
+
+    "Derivative Works" shall mean any work, whether in Source or Object
+    form, that is based on (or derived from) the Work and for which the
+    editorial revisions, annotations, elaborations, or other modifications
+    represent, as a whole, an original work of authorship. For the purposes
+    of this License, Derivative Works shall not include works that remain
+    separable from, or merely link (or bind by name) to the interfaces of,
+    the Work and Derivative Works thereof.
+
+    "Contribution" shall mean any work of authorship, including
+    the original version of the Work and any modifications or additions
+    to that Work or Derivative Works thereof, that is intentionally
+    submitted to Licensor for inclusion in the Work by the copyright owner
+    or by an individual or Legal Entity authorized to submit on behalf of
+    the copyright owner. For the purposes of this definition, "submitted"
+    means any form of electronic, verbal, or written communication sent
+    to the Licensor or its representatives, including but not limited to
+    communication on electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, the
+    Licensor for the purpose of discussing and improving the Work, but
+    excluding communication that is conspicuously marked or otherwise
+    designated in writing by the copyright owner as "Not a Contribution."
+
+    "Contributor" shall mean Licensor and any individual or Legal Entity
+    on behalf of whom a Contribution has been received by Licensor and
+    subsequently incorporated within the Work.
+
+2.  Grant of Copyright License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    copyright license to reproduce, prepare Derivative Works of,
+    publicly display, publicly perform, sublicense, and distribute the
+    Work and such Derivative Works in Source or Object form.
+
+3.  Grant of Patent License. Subject to the terms and conditions of
+    this License, each Contributor hereby grants to You a perpetual,
+    worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+    (except as stated in this section) patent license to make, have made,
+    use, offer to sell, sell, import, and otherwise transfer the Work,
+    where such license applies only to those patent claims licensable
+    by such Contributor that are necessarily infringed by their
+    Contribution(s) alone or by combination of their Contribution(s)
+    with the Work to which such Contribution(s) was submitted. If You
+    institute patent litigation against any entity (including a
+    cross-claim or counterclaim in a lawsuit) alleging that the Work
+    or a Contribution incorporated within the Work constitutes direct
+    or contributory patent infringement, then any patent licenses
+    granted to You under this License for that Work shall terminate
+    as of the date such litigation is filed.
+
+4.  Redistribution. You may reproduce and distribute copies of the
+    Work or Derivative Works thereof in any medium, with or without
+    modifications, and in Source or Object form, provided that You
+    meet the following conditions:
+
+    (a) You must give any other recipients of the Work or
+    Derivative Works a copy of this License; and
+
+    (b) You must cause any modified files to carry prominent notices
+    stating that You changed the files; and
+
+    (c) You must retain, in the Source form of any Derivative Works
+    that You distribute, all copyright, patent, trademark, and
+    attribution notices from the Source form of the Work,
+    excluding those notices that do not pertain to any part of
+    the Derivative Works; and
+
+    (d) If the Work includes a "NOTICE" text file as part of its
+    distribution, then any Derivative Works that You distribute must
+    include a readable copy of the attribution notices contained
+    within such NOTICE file, excluding those notices that do not
+    pertain to any part of the Derivative Works, in at least one
+    of the following places: within a NOTICE text file distributed
+    as part of the Derivative Works; within the Source form or
+    documentation, if provided along with the Derivative Works; or,
+    within a display generated by the Derivative Works, if and
+    wherever such third-party notices normally appear. The contents
+    of the NOTICE file are for informational purposes only and
+    do not modify the License. You may add Your own attribution
+    notices within Derivative Works that You distribute, alongside
+    or as an addendum to the NOTICE text from the Work, provided
+    that such additional attribution notices cannot be construed
+    as modifying the License.
+
+    You may add Your own copyright statement to Your modifications and
+    may provide additional or different license terms and conditions
+    for use, reproduction, or distribution of Your modifications, or
+    for any such Derivative Works as a whole, provided Your use,
+    reproduction, and distribution of the Work otherwise complies with
+    the conditions stated in this License.
+
+5.  Submission of Contributions. Unless You explicitly state otherwise,
+    any Contribution intentionally submitted for inclusion in the Work
+    by You to the Licensor shall be under the terms and conditions of
+    this License, without any additional terms or conditions.
+    Notwithstanding the above, nothing herein shall supersede or modify
+    the terms of any separate license agreement you may have executed
+    with Licensor regarding such Contributions.
+
+6.  Trademarks. This License does not grant permission to use the trade
+    names, trademarks, service marks, or product names of the Licensor,
+    except as required for reasonable and customary use in describing the
+    origin of the Work and reproducing the content of the NOTICE file.
+
+7.  Disclaimer of Warranty. Unless required by applicable law or
+    agreed to in writing, Licensor provides the Work (and each
+    Contributor provides its Contributions) on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+    implied, including, without limitation, any warranties or conditions
+    of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+    PARTICULAR PURPOSE. You are solely responsible for determining the
+    appropriateness of using or redistributing the Work and assume any
+    risks associated with Your exercise of permissions under this License.
+
+8.  Limitation of Liability. In no event and under no legal theory,
+    whether in tort (including negligence), contract, or otherwise,
+    unless required by applicable law (such as deliberate and grossly
+    negligent acts) or agreed to in writing, shall any Contributor be
+    liable to You for damages, including any direct, indirect, special,
+    incidental, or consequential damages of any character arising as a
+    result of this License or out of the use or inability to use the
+    Work (including but not limited to damages for loss of goodwill,
+    work stoppage, computer failure or malfunction, or any and all
+    other commercial damages or losses), even if such Contributor
+    has been advised of the possibility of such damages.
+
+9.  Accepting Warranty or Additional Liability. While redistributing
+    the Work or Derivative Works thereof, You may choose to offer,
+    and charge a fee for, acceptance of support, warranty, indemnity,
+    or other liability obligations and/or rights consistent with this
+    License. However, in accepting such obligations, You may act only
+    on Your own behalf and on Your sole responsibility, not on behalf
+    of any other Contributor, and only if You agree to indemnify,
+    defend, and hold each Contributor harmless for any liability
+    incurred by, or claims asserted against, such Contributor by reason
+    of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+Copyright 2021 Non-Fungible Labs, Inc
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/apps/nebula/README.md b/apps/nebula/README.md
new file mode 100644
index 00000000000..1b1bd7ce204
--- /dev/null
+++ b/apps/nebula/README.md
@@ -0,0 +1 @@
+# nebula.thirdweb.com
\ No newline at end of file
diff --git a/apps/nebula/biome.json b/apps/nebula/biome.json
new file mode 100644
index 00000000000..d879ec77ec7
--- /dev/null
+++ b/apps/nebula/biome.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
+  "extends": ["../../biome.json"],
+  "overrides": [
+    {
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noImportantInKeyframe": "off"
+          }
+        }
+      }
+    }
+  ]
+}
diff --git a/apps/nebula/components.json b/apps/nebula/components.json
new file mode 100644
index 00000000000..b1dc07eb643
--- /dev/null
+++ b/apps/nebula/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
\ No newline at end of file
diff --git a/apps/nebula/knip.json b/apps/nebula/knip.json
new file mode 100644
index 00000000000..c6e1afb1913
--- /dev/null
+++ b/apps/nebula/knip.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "next": true,
+  "ignore": ["src/@/components/ui/**"],
+  "project": ["src/**"],
+  "ignoreBinaries": ["only-allow", "biome"],
+  "ignoreDependencies": ["thirdweb"]
+}
diff --git a/apps/nebula/lucide-react.d.ts b/apps/nebula/lucide-react.d.ts
new file mode 100644
index 00000000000..93f9156d593
--- /dev/null
+++ b/apps/nebula/lucide-react.d.ts
@@ -0,0 +1,3 @@
+declare module "lucide-react" {
+  export * from "lucide-react/dist/lucide-react.suffixed";
+}
diff --git a/apps/nebula/next-sitemap.config.js b/apps/nebula/next-sitemap.config.js
new file mode 100644
index 00000000000..fd2986798da
--- /dev/null
+++ b/apps/nebula/next-sitemap.config.js
@@ -0,0 +1,38 @@
+// @ts-check
+
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: process.env.SITE_URL || "https://nebula.thirdweb.com",
+  generateRobotsTxt: true,
+  robotsTxtOptions: {
+    policies: [
+      {
+        userAgent: "*",
+        // allow all if production
+        allow: process.env.VERCEL_ENV === "production" ? ["/"] : [],
+        // disallow all if not production
+        disallow: ["/move-funds"],
+      },
+    ],
+  },
+  transform: async (config, path) => {
+    // ignore og image paths
+    if (path.includes("_og") || path.includes("opengraph-image")) {
+      return null;
+    }
+
+    // disallow /move-funds
+    if (path.includes("/move-funds")) {
+      return null;
+    }
+
+    return {
+      // => this will be exported as http(s)://<config.siteUrl>/<path>
+      loc: path,
+      changefreq: config.changefreq,
+      priority: config.priority,
+      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
+      alternateRefs: config.alternateRefs ?? [],
+    };
+  },
+};
diff --git a/apps/nebula/next.config.ts b/apps/nebula/next.config.ts
new file mode 100644
index 00000000000..320093bb080
--- /dev/null
+++ b/apps/nebula/next.config.ts
@@ -0,0 +1,70 @@
+import type { NextConfig } from "next";
+
+const ContentSecurityPolicy = `
+  default-src 'self';
+  img-src * data: blob:;
+  media-src * data: blob:;
+  object-src 'none';
+  style-src 'self' 'unsafe-inline' vercel.live;
+  font-src 'self' vercel.live assets.vercel.com fonts.gstatic.com;
+  frame-src * data:;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live challenges.cloudflare.com googletagmanager.com us-assets.i.posthog.com;
+  connect-src * data: blob:;
+  worker-src 'self' blob:;
+  block-all-mixed-content;
+`;
+
+const securityHeaders = [
+  {
+    key: "X-DNS-Prefetch-Control",
+    value: "on",
+  },
+  {
+    key: "X-XSS-Protection",
+    value: "1; mode=block",
+  },
+  {
+    key: "X-Frame-Options",
+    value: "SAMEORIGIN",
+  },
+  {
+    key: "Referrer-Policy",
+    value: "origin-when-cross-origin",
+  },
+  {
+    key: "Content-Security-Policy",
+    value: ContentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
+  },
+];
+
+const baseNextConfig: NextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  productionBrowserSourceMaps: false,
+  experimental: {
+    webpackBuildWorker: true,
+    webpackMemoryOptimizations: true,
+    serverSourceMaps: false,
+    taint: true,
+  },
+  serverExternalPackages: ["pino-pretty"],
+  async headers() {
+    return [
+      {
+        // Apply these headers to all routes in your application.
+        source: "/(.*)",
+        headers: [
+          ...securityHeaders,
+          {
+            key: "accept-ch",
+            value: "sec-ch-viewport-width",
+          },
+        ],
+      },
+    ];
+  },
+  reactStrictMode: true,
+};
+
+export default baseNextConfig;
diff --git a/apps/nebula/package.json b/apps/nebula/package.json
index c62e07e1a83..b42a51b561d 100644
--- a/apps/nebula/package.json
+++ b/apps/nebula/package.json
@@ -7,8 +7,11 @@
     "dev": "next dev --turbopack",
     "build": "NODE_OPTIONS=--max-old-space-size=6144 next build",
     "start": "next start",
+    "format": "biome format ./src --write",
+    "lint": "biome check ./src && knip && eslint ./src",
     "fix": "biome check ./src --fix && eslint ./src --fix",
     "typecheck": "tsc --noEmit",
+    "postbuild": "next-sitemap",
     "build:analyze": "ANALYZE=true pnpm run build",
     "knip": "knip",
     "storybook": "storybook dev -p 6006",
diff --git a/apps/nebula/postcss.config.js b/apps/nebula/postcss.config.js
new file mode 100644
index 00000000000..12a703d900d
--- /dev/null
+++ b/apps/nebula/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/nebula/src/@/components/blocks/ChainIcon.tsx b/apps/nebula/src/@/components/blocks/ChainIcon.tsx
new file mode 100644
index 00000000000..334e647e913
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/ChainIcon.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { Img } from "@/components/blocks/Img";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
+import { cn } from "@/lib/utils";
+import type { ThirdwebClient } from "thirdweb";
+
+type ImageProps = React.ComponentProps<"img">;
+
+type ChainIconProps = Omit<ImageProps, "src"> & {
+  client: ThirdwebClient;
+  src?: string;
+};
+
+const fallbackChainIcon =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIHZpZXdCb3g9IjAgMCA5NiA5NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTY4LjE1MTkgNzUuNzM3MkM2Mi4yOTQzIDc5Ljk5MyA1NS4yMzk3IDgyLjI4NTIgNDcuOTk5MyA4Mi4yODUyQzQwLjc1ODkgODIuMjg1MiAzMy43MDQzIDc5Ljk5MyAyNy44NDY2IDc1LjczNzJNNjMuMDI5MSAxNy4xODM3QzY5LjUzNjggMjAuMzU3NyA3NC44NzI2IDI1LjUxMDQgNzguMjcxOCAzMS45MDMzQzgxLjY3MDkgMzguMjk2MiA4Mi45NTkgNDUuNjAxMiA4MS45NTEzIDUyLjc3MTFNMTQuMDQ3NiA1Mi43NzA4QzEzLjAzOTkgNDUuNjAwOCAxNC4zMjggMzguMjk1OSAxNy43MjcxIDMxLjkwM0MyMS4xMjYzIDI1LjUxMDEgMjYuNDYyMSAyMC4zNTczIDMyLjk2OTggMTcuMTgzM000Ni4wNTk4IDI5LjM2NzVMMjkuMzY3MyA0Ni4wNkMyOC42ODg1IDQ2LjczODkgMjguMzQ5IDQ3LjA3ODMgMjguMjIxOCA0Ny40Njk3QzI4LjExIDQ3LjgxNCAyOC4xMSA0OC4xODQ5IDI4LjIyMTggNDguNTI5MkMyOC4zNDkgNDguOTIwNiAyOC42ODg1IDQ5LjI2MDEgMjkuMzY3MyA0OS45MzlMNDYuMDU5OCA2Ni42MzE0QzQ2LjczODcgNjcuMzEwMyA0Ny4wNzgxIDY3LjY0OTcgNDcuNDY5NSA2Ny43NzY5QzQ3LjgxMzggNjcuODg4OCA0OC4xODQ3IDY3Ljg4ODggNDguNTI5IDY3Ljc3NjlDNDguOTIwNCA2Ny42NDk3IDQ5LjI1OTkgNjcuMzEwMyA0OS45Mzg4IDY2LjYzMTRMNjYuNjMxMiA0OS45MzlDNjcuMzEwMSA0OS4yNjAxIDY3LjY0OTUgNDguOTIwNiA2Ny43NzY3IDQ4LjUyOTJDNjcuODg4NiA0OC4xODQ5IDY3Ljg4ODYgNDcuODE0IDY3Ljc3NjcgNDcuNDY5N0M2Ny42NDk1IDQ3LjA3ODMgNjcuMzEwMSA0Ni43Mzg5IDY2LjYzMTIgNDYuMDZMNDkuOTM4OCAyOS4zNjc1QzQ5LjI1OTkgMjguNjg4NyA0OC45MjA0IDI4LjM0OTIgNDguNTI5IDI4LjIyMkM0OC4xODQ3IDI4LjExMDIgNDcuODEzOCAyOC4xMTAyIDQ3LjQ2OTUgMjguMjIyQzQ3LjA3ODEgMjguMzQ5MiA0Ni43Mzg3IDI4LjY4ODcgNDYuMDU5OCAyOS4zNjc1WiIgc3Ryb2tlPSIjNDA0MDQwIiBzdHJva2Utd2lkdGg9IjYuODU3MTQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
+
+export const ChainIconClient = ({
+  client,
+  src,
+  ...restProps
+}: ChainIconProps) => {
+  const resolvedSrc = src
+    ? resolveSchemeWithErrorHandler({
+        client,
+        uri: src,
+      })
+    : fallbackChainIcon;
+
+  return (
+    <Img
+      {...restProps}
+      // render different image element if src changes to avoid showing old image while loading new one
+      key={resolvedSrc}
+      className={cn("object-contain", restProps.className)}
+      src={resolvedSrc}
+      loading={restProps.loading || "lazy"}
+      alt={restProps.alt}
+      // eslint-disable-next-line @next/next/no-img-element
+      fallback={<img src={fallbackChainIcon} alt="" />}
+      skeleton={<div className="animate-pulse rounded-full bg-border" />}
+    />
+  );
+};
diff --git a/apps/nebula/src/@/components/blocks/FormFieldSetup.tsx b/apps/nebula/src/@/components/blocks/FormFieldSetup.tsx
new file mode 100644
index 00000000000..346310925a9
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/FormFieldSetup.tsx
@@ -0,0 +1,44 @@
+import { Label } from "@/components/ui/label";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { AsteriskIcon, InfoIcon } from "lucide-react";
+import type React from "react";
+
+export function FormFieldSetup(props: {
+  htmlFor?: string;
+  label: React.ReactNode;
+  errorMessage: React.ReactNode | undefined;
+  children: React.ReactNode;
+  tooltip?: React.ReactNode;
+  isRequired: boolean;
+  helperText?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={props.className}>
+      <div className="mb-2 inline-flex items-center gap-1">
+        <Label htmlFor={props.htmlFor}>{props.label}</Label>
+
+        {props.isRequired && (
+          <AsteriskIcon className="size-3.5 text-destructive-text" />
+        )}
+
+        {props.tooltip && (
+          <ToolTipLabel label={props.tooltip}>
+            <InfoIcon className="size-3.5 text-muted-foreground" />
+          </ToolTipLabel>
+        )}
+      </div>
+      {props.children}
+
+      {props.helperText && (
+        <p className="mt-2 text-muted-foreground text-sm">{props.helperText}</p>
+      )}
+
+      {props.errorMessage && (
+        <p className="mt-2 text-destructive-text text-sm">
+          {props.errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/Img.stories.tsx b/apps/nebula/src/@/components/blocks/Img.stories.tsx
new file mode 100644
index 00000000000..8a074ca74a8
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/Img.stories.tsx
@@ -0,0 +1,112 @@
+import { BadgeContainer } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { ImageIcon } from "lucide-react";
+import { useState } from "react";
+import { Spinner } from "../ui/Spinner/Spinner";
+import { Button } from "../ui/button";
+import { Img } from "./Img";
+
+const meta = {
+  title: "blocks/Img",
+  component: Story,
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function Story() {
+  return (
+    <div className="flex flex-col gap-10 p-10">
+      <p> All images below are set with size-20 className </p>
+
+      <BadgeContainer label="No Src - pending">
+        <Img className="size-20" src={undefined} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Failed to load - fallback">
+        <Img className="size-20" src="invalid-src" />
+      </BadgeContainer>
+
+      <BadgeContainer label="No Src, pending - rounded-full">
+        <Img className="size-20 rounded-full" src={undefined} />
+      </BadgeContainer>
+
+      <BadgeContainer label="Failed to load - fallback - rounded-full">
+        <Img className="size-20 rounded-full" src="invalid-src" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Valid Src">
+        <Img className="size-20" src="https://picsum.photos/200" />
+      </BadgeContainer>
+
+      <BadgeContainer label="Valid Src, rounded">
+        <Img className="size-20 rounded-full" src="https://picsum.photos/200" />
+      </BadgeContainer>
+
+      <ToggleTest />
+
+      <BadgeContainer label="Custom Skeleton">
+        <Img
+          src={undefined}
+          skeleton={
+            <div className="flex items-center justify-center rounded-lg border">
+              <Spinner className="size-6" />
+            </div>
+          }
+          className="size-20"
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Custom Fallback">
+        <Img
+          fallback={
+            <div className="flex items-center justify-center rounded-lg border">
+              <ImageIcon className="size-10 text-muted-foreground" />
+            </div>
+          }
+          className="size-20"
+          src="invalid-src"
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
+
+function ToggleTest() {
+  const [src, setSrc] = useState<undefined | string>(undefined);
+
+  return (
+    <div className="relative flex flex-col gap-10 border p-6">
+      <Button
+        variant="outline"
+        onClick={() => {
+          if (src) {
+            setSrc(undefined);
+          } else {
+            setSrc("https://picsum.photos/400");
+          }
+        }}
+        className="absolute top-6 right-6 inline-flex"
+      >
+        Toggle Src
+      </Button>
+
+      <p> Src is {src ? "set" : "not set"} </p>
+
+      <BadgeContainer label="Valid Src">
+        <Img className="size-20" src={src} />
+      </BadgeContainer>
+
+      <BadgeContainer label="invalid Src">
+        <Img
+          className="size-20 rounded-full"
+          src={src ? "invalid-src" : undefined}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/Img.tsx b/apps/nebula/src/@/components/blocks/Img.tsx
new file mode 100644
index 00000000000..ac94e7c966e
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/Img.tsx
@@ -0,0 +1,88 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+import { useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { cn } from "../../lib/utils";
+
+type imgElementProps = React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> & {
+  skeleton?: React.ReactNode;
+  fallback?: React.ReactNode;
+  src: string | undefined;
+  containerClassName?: string;
+};
+
+export function Img(props: imgElementProps) {
+  const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
+    "pending",
+  );
+  const status =
+    props.src === undefined
+      ? "pending"
+      : props.src === ""
+        ? "fallback"
+        : _status;
+  const { className, fallback, skeleton, containerClassName, ...restProps } =
+    props;
+  const defaultSkeleton = <div className="animate-pulse bg-accent" />;
+  const defaultFallback = <div className="bg-accent" />;
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    const imgEl = imgRef.current;
+    if (!imgEl) {
+      return;
+    }
+    if (imgEl.complete) {
+      setStatus("loaded");
+    } else {
+      function handleLoad() {
+        setStatus("loaded");
+      }
+      imgEl.addEventListener("load", handleLoad);
+      return () => {
+        imgEl.removeEventListener("load", handleLoad);
+      };
+    }
+  }, []);
+
+  return (
+    <div className={cn("relative shrink-0", containerClassName)}>
+      <img
+        {...restProps}
+        // avoid setting empty src string to prevent request to the entire page
+        src={restProps.src || undefined}
+        ref={imgRef}
+        onError={(e) => {
+          restProps.onError?.(e);
+          setStatus("fallback");
+        }}
+        style={{
+          opacity: status === "loaded" ? 1 : 0,
+          ...restProps.style,
+        }}
+        alt={restProps.alt || ""}
+        className={cn(
+          "fade-in-0 object-cover transition-opacity duration-300",
+          className,
+        )}
+        decoding="async"
+      />
+
+      {status !== "loaded" && (
+        <div
+          style={restProps.style}
+          className={cn(
+            "fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
+            className,
+          )}
+        >
+          {status === "pending" && (skeleton || defaultSkeleton)}
+          {status === "fallback" && (fallback || defaultFallback)}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/MarkdownRenderer/markdown-renderer.stories.tsx b/apps/nebula/src/@/components/blocks/MarkdownRenderer/markdown-renderer.stories.tsx
new file mode 100644
index 00000000000..91eaa0d0061
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/MarkdownRenderer/markdown-renderer.stories.tsx
@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { MarkdownRenderer } from "./markdown-renderer";
+
+const meta = {
+  title: "blocks/MarkdownRenderer",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const DisableCodeHighlight: Story = {
+  args: {
+    disableCodeHighlight: true,
+  },
+};
+
+export const SkipHTML: Story = {
+  args: {
+    skipHtml: true,
+  },
+};
+
+const markdownExample = `\
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+
+This a paragraph
+
+This is another paragraph
+
+This a very long paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec pur us. Donec euismod, nunc nec vehicula.
+ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec pur us. Donec euismod, nunc nec vehicula.
+
+
+## Empasis
+
+*Italic text*
+_Also italic text_
+
+**Bold text**
+__Also bold text__
+
+***Bold and italic***
+___Also bold and italic___
+
+## Blockquote
+> This is a blockquote.
+
+## Lists
+
+### Unordered list
+- Item 1
+- Item 2
+  - Nested Item 1
+  - Nested Item 2
+
+### Ordered list
+1. First item
+2. Second item
+   1. Sub-item 1
+   2. Sub-item 2
+
+### Mixed Nested lists
+
+- Item 1
+- Item 2
+  1. Sub-item 1
+  2. Sub-item 2
+
+
+1. First item
+2. Second item
+   - Sub-item 1
+   - Sub-item 2
+
+### Code
+This a a paragraph with some \`inlineCode()\`
+
+This a \`const longerCodeSnippet = "Example. This should be able to handle line breaks as well, it should not be overflowing the page";\`
+
+\`\`\`javascript
+// Code block with syntax highlighting
+function example() {
+  console.log("Hello, world!");
+}
+\`\`\`
+
+### Links
+[thirdweb](https://www.thirdweb.com)
+
+### Images
+![Alt text](https://picsum.photos/2000/500)
+
+
+### Horizontal Rule
+
+
+
+---
+
+
+
+### Tables
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Row 1    | Data     | More Data|
+| Row 2    | Data     | More Data|
+
+
+| Column 1     | Column 2         | Column 3     | Column 4         | Column 5     |
+|--------------|------------------|--------------|------------------|--------------|
+| Row 1 Cell 1 | Row 1 Cell 2     | Row 1 Cell 3 | Row 1 Cell 4     | Row 1 Cell 5 |
+| Row 2 Cell 1 | Row 2 Cell 2     | Row 2 Cell 3 | Row 2 Cell 4     | Row 2 Cell 5 |
+| Row 3 Cell 1 | Row 3 Cell 2     | Row 3 Cell 3 | Row 3 Cell 4     | Row 3 Cell 5 |
+| Row 4 Cell 1 | Row 4 Cell 2     | Row 4 Cell 3 | Row 4 Cell 4     | Row 4 Cell 5 |
+| Row 5 Cell 1 | Row 5 Cell 2     | Row 5 Cell 3 | Row 5 Cell 4     | Row 5 Cell 5 |
+
+
+### Task List
+- [ ] Task 1
+- [x] Task 2 (completed)
+
+### Escaping special characters
+\\*This text is not italicized.\\*
+
+### Strikethrough
+~~This is strikethrough text.~~
+
+### HTML Elements
+
+<br />
+`;
+
+function Story(props: {
+  disableCodeHighlight?: boolean;
+  skipHtml?: boolean;
+}) {
+  return (
+    <div className="container max-w-[800px] py-10">
+      <MarkdownRenderer
+        markdownText={markdownExample}
+        code={{
+          disableCodeHighlight: props.disableCodeHighlight,
+        }}
+        skipHtml={props.skipHtml}
+      />
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/MarkdownRenderer/markdown-renderer.tsx b/apps/nebula/src/@/components/blocks/MarkdownRenderer/markdown-renderer.tsx
new file mode 100644
index 00000000000..13bf46701a2
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/MarkdownRenderer/markdown-renderer.tsx
@@ -0,0 +1,225 @@
+import { CodeClient } from "@/components/ui/code/code.client";
+import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
+import { InlineCode } from "@/components/ui/inline-code";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { onlyText } from "react-children-utilities";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export const MarkdownRenderer: React.FC<{
+  markdownText: string;
+  className?: string;
+  code?: {
+    disableCodeHighlight?: boolean;
+    ignoreFormattingErrors?: boolean;
+    className?: string;
+  };
+  inlineCode?: {
+    className?: string;
+  };
+  p?: {
+    className?: string;
+  };
+  li?: {
+    className?: string;
+  };
+  skipHtml?: boolean;
+}> = (markdownProps) => {
+  const { markdownText, className, code } = markdownProps;
+  const commonHeadingClassName = "mb-2 leading-5 font-semibold tracking-tight";
+
+  return (
+    <div className={className}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        skipHtml={markdownProps.skipHtml}
+        components={{
+          h1: (props) => (
+            <h2
+              className={cn(
+                commonHeadingClassName,
+                "mb-3 border-border border-b pb-2 text-xl md:text-2xl",
+              )}
+              {...cleanedProps(props)}
+            />
+          ),
+
+          h2: (props) => (
+            <h3
+              {...cleanedProps(props)}
+              className={cn(
+                commonHeadingClassName,
+                "mt-8 mb-3 border-border border-b pb-2 text-lg md:text-xl",
+              )}
+            />
+          ),
+
+          h3: (props) => (
+            <h4
+              {...cleanedProps(props)}
+              className={cn(
+                commonHeadingClassName,
+                "mt-4 text-base md:text-lg",
+              )}
+            />
+          ),
+
+          h4: (props) => (
+            <h5
+              {...cleanedProps(props)}
+              className={cn(commonHeadingClassName, "mt-4 text-lg")}
+            />
+          ),
+
+          h5: (props) => (
+            <h6
+              {...cleanedProps(props)}
+              className={cn(commonHeadingClassName, "mt-4 text-lg")}
+            />
+          ),
+
+          h6: (props) => (
+            <p
+              {...cleanedProps(props)}
+              className={cn(commonHeadingClassName, "mt-4 text-lg")}
+            />
+          ),
+
+          a: (props) => (
+            <Link
+              href={props.href ?? "#"}
+              target="_blank"
+              {...cleanedProps(props)}
+              className="mt-4 underline decoration-muted-foreground/50 decoration-dotted underline-offset-[5px] hover:text-foreground hover:decoration-foreground hover:decoration-solid"
+            />
+          ),
+
+          hr: (props) => (
+            <hr {...cleanedProps(props)} className="my-5 bg-border" />
+          ),
+
+          code: ({ ...props }) => {
+            const codeStr = onlyText(props.children);
+
+            if (props?.className || codeStr.length > 100) {
+              if (code?.disableCodeHighlight || !props.className) {
+                return (
+                  <div className="my-4">
+                    {/* @ts-expect-error - TODO: fix this */}
+                    <PlainTextCodeBlock
+                      {...cleanedProps(props)}
+                      code={onlyText(props.children).trim()}
+                      className={markdownProps.code?.className}
+                    />
+                  </div>
+                );
+              }
+              const language = props.className.replace("language-", "");
+              return (
+                <div className="my-4">
+                  <CodeClient
+                    // @ts-expect-error - TODO: fix this
+                    lang={language}
+                    {...cleanedProps(props)}
+                    code={onlyText(props.children).trim()}
+                    ignoreFormattingErrors={code?.ignoreFormattingErrors}
+                    className={markdownProps.code?.className}
+                  />
+                </div>
+              );
+            }
+
+            return (
+              <InlineCode
+                code={onlyText(props.children).trim()}
+                className={markdownProps.inlineCode?.className}
+              />
+            );
+          },
+
+          p: (props) => (
+            <p
+              className={cn(
+                "mb-4 text-muted-foreground leading-loose",
+                markdownProps.p?.className,
+              )}
+              {...cleanedProps(props)}
+            />
+          ),
+
+          table: (props) => (
+            <div className="mb-6">
+              <TableContainer>
+                <Table {...cleanedProps(props)} />
+              </TableContainer>
+            </div>
+          ),
+
+          th: ({ children: c, ...props }) => (
+            <TableHead
+              {...cleanedProps(props)}
+              className="text-left text-muted-foreground"
+            >
+              {c}
+            </TableHead>
+          ),
+
+          td: (props) => (
+            <TableCell {...cleanedProps(props)} className="text-left" />
+          ),
+          thead: (props) => <TableHeader {...cleanedProps(props)} />,
+          tbody: (props) => <TableBody {...cleanedProps(props)} />,
+          tr: (props) => <TableRow {...cleanedProps(props)} />,
+          ul: (props) => {
+            return (
+              <ul
+                className="mb-4 list-outside list-disc pl-5 [&_ol_li:first-of-type]:mt-1.5 [&_ul_li:first-of-type]:mt-1.5"
+                {...cleanedProps(props)}
+              />
+            );
+          },
+          ol: (props) => (
+            <ol
+              className="mb-4 list-outside list-decimal pl-5 [&_ol_li:first-of-type]:mt-1.5 [&_ul_li:first-of-type]:mt-1.5"
+              {...cleanedProps(props)}
+            />
+          ),
+          li: ({ children: c, ...props }) => (
+            <li
+              className={cn(
+                "mb-1.5 text-muted-foreground leading-loose [&>p]:m-0",
+                markdownProps.li?.className,
+              )}
+              {...cleanedProps(props)}
+            >
+              {c}
+            </li>
+          ),
+          strong(props) {
+            return <strong className="font-medium" {...cleanedProps(props)} />;
+          },
+        }}
+      >
+        {markdownText}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+function cleanedProps<T extends object & { node?: unknown }>(
+  props: T,
+): Omit<T, "node"> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { node, ...rest } = props;
+  return rest;
+}
diff --git a/apps/nebula/src/@/components/blocks/MultiNetworkSelector.stories.tsx b/apps/nebula/src/@/components/blocks/MultiNetworkSelector.stories.tsx
new file mode 100644
index 00000000000..3f76add6d5c
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/MultiNetworkSelector.stories.tsx
@@ -0,0 +1,49 @@
+import { BadgeContainer, storybookThirdwebClient } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { useState } from "react";
+import { MultiNetworkSelector } from "./NetworkSelectors";
+
+const meta = {
+  title: "blocks/MultiNetworkSelector",
+  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-8 py-10">
+      <Variant label="No Chains selected by default" selectedChainIds={[]} />
+      <Variant
+        label="Polygon, Ethereum selected by default"
+        selectedChainIds={[1, 137]}
+      />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  selectedChainIds: number[];
+}) {
+  const [chainIds, setChainIds] = useState<number[]>(props.selectedChainIds);
+  return (
+    <BadgeContainer label={props.label}>
+      <MultiNetworkSelector
+        selectedChainIds={chainIds}
+        client={storybookThirdwebClient}
+        onChange={setChainIds}
+      />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/NetworkSelectors.tsx b/apps/nebula/src/@/components/blocks/NetworkSelectors.tsx
new file mode 100644
index 00000000000..9fe85684cde
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/NetworkSelectors.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import { MultiSelect } from "@/components/blocks/multi-select";
+import { SelectWithSearch } from "@/components/blocks/select-with-search";
+import { Badge } from "@/components/ui/badge";
+import { useCallback, useMemo } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { useAllChainsData } from "../../hooks/chains";
+import { ChainIconClient } from "./ChainIcon";
+
+function cleanChainName(chainName: string) {
+  return chainName.replace("Mainnet", "");
+}
+
+type Option = { label: string; value: string };
+
+export function MultiNetworkSelector(props: {
+  selectedChainIds: number[];
+  onChange: (chainIds: number[]) => void;
+  disableChainId?: boolean;
+  className?: string;
+  priorityChains?: number[];
+  hideTestnets?: boolean;
+  popoverContentClassName?: string;
+  customTrigger?: React.ReactNode;
+  align?: "center" | "start" | "end";
+  side?: "left" | "right" | "top" | "bottom";
+  showSelectedValuesInModal?: boolean;
+  client: ThirdwebClient;
+  chainIds?: number[];
+}) {
+  let { allChains, idToChain } = useAllChainsData();
+
+  if (props.chainIds && props.chainIds.length > 0) {
+    allChains = allChains.filter((chain) =>
+      props.chainIds?.includes(chain.chainId),
+    );
+  }
+
+  const options = useMemo(() => {
+    let sortedChains = allChains;
+
+    if (props.priorityChains) {
+      const priorityChainsSet = new Set();
+      for (const chainId of props.priorityChains || []) {
+        priorityChainsSet.add(chainId);
+      }
+
+      const priorityChains = (props.priorityChains || [])
+        .map((chainId) => {
+          return idToChain.get(chainId);
+        })
+        .filter((v) => !!v);
+
+      const otherChains = allChains.filter(
+        (chain) => !priorityChainsSet.has(chain.chainId),
+      );
+
+      sortedChains = [...priorityChains, ...otherChains];
+    }
+
+    if (props.hideTestnets) {
+      sortedChains = sortedChains.filter((chain) => !chain.testnet);
+    }
+
+    return sortedChains.map((chain) => {
+      return {
+        label: cleanChainName(chain.name),
+        value: String(chain.chainId),
+      };
+    });
+  }, [allChains, props.priorityChains, idToChain, props.hideTestnets]);
+
+  const searchFn = useCallback(
+    (option: Option, searchValue: string) => {
+      const chain = idToChain.get(Number(option.value));
+      if (!chain) {
+        return false;
+      }
+
+      if (Number.isInteger(Number(searchValue))) {
+        return String(chain.chainId).startsWith(searchValue);
+      }
+      return chain.name.toLowerCase().includes(searchValue.toLowerCase());
+    },
+    [idToChain],
+  );
+
+  const renderOption = useCallback(
+    (option: Option) => {
+      const chain = idToChain.get(Number(option.value));
+      if (!chain) {
+        return option.label;
+      }
+
+      return (
+        <div className="flex justify-between gap-4">
+          <span className="flex grow gap-2 truncate text-left">
+            <ChainIconClient
+              className="size-5"
+              loading="lazy"
+              src={chain.icon?.url}
+              client={props.client}
+            />
+            {cleanChainName(chain.name)}
+          </span>
+
+          {!props.disableChainId && (
+            <Badge variant="outline" className="gap-2">
+              <span className="text-muted-foreground">Chain ID</span>
+              {chain.chainId}
+            </Badge>
+          )}
+        </div>
+      );
+    },
+    [idToChain, props.disableChainId, props.client],
+  );
+
+  return (
+    <MultiSelect
+      searchPlaceholder="Search by Name or Chain Id"
+      selectedValues={props.selectedChainIds.map(String)}
+      popoverContentClassName={props.popoverContentClassName}
+      customTrigger={props.customTrigger}
+      options={options}
+      align={props.align}
+      side={props.side}
+      showSelectedValuesInModal={props.showSelectedValuesInModal}
+      onSelectedValuesChange={(chainIds) => {
+        props.onChange(chainIds.map(Number));
+      }}
+      placeholder={
+        allChains.length === 0 ? "Loading Chains..." : "Select Chains"
+      }
+      disabled={allChains.length === 0}
+      overrideSearchFn={searchFn}
+      renderOption={renderOption}
+      className={props.className}
+    />
+  );
+}
+
+export function SingleNetworkSelector(props: {
+  chainId: number | undefined;
+  onChange: (chainId: number) => void;
+  className?: string;
+  popoverContentClassName?: string;
+  // if specified - only these chains will be shown
+  chainIds?: number[];
+  side?: "left" | "right" | "top" | "bottom";
+  disableChainId?: boolean;
+  align?: "center" | "start" | "end";
+  disableTestnets?: boolean;
+  placeholder?: string;
+  client: ThirdwebClient;
+}) {
+  const { allChains, idToChain } = useAllChainsData();
+
+  const chainsToShow = useMemo(() => {
+    let chains = allChains;
+
+    if (props.disableTestnets) {
+      chains = chains.filter((chain) => !chain.testnet);
+    }
+
+    if (props.chainIds) {
+      const chainIdSet = new Set(props.chainIds);
+      chains = chains.filter((chain) => chainIdSet.has(chain.chainId));
+    }
+
+    return chains;
+  }, [allChains, props.chainIds, props.disableTestnets]);
+
+  const options = useMemo(() => {
+    return chainsToShow.map((chain) => {
+      return {
+        label: chain.name,
+        value: String(chain.chainId),
+      };
+    });
+  }, [chainsToShow]);
+
+  const searchFn = useCallback(
+    (option: Option, searchValue: string) => {
+      const chain = idToChain.get(Number(option.value));
+      if (!chain) {
+        return false;
+      }
+
+      if (Number.isInteger(Number(searchValue))) {
+        return String(chain.chainId).startsWith(searchValue);
+      }
+      return chain.name.toLowerCase().includes(searchValue.toLowerCase());
+    },
+    [idToChain],
+  );
+
+  const renderOption = useCallback(
+    (option: Option) => {
+      const chain = idToChain.get(Number(option.value));
+      if (!chain) {
+        return option.label;
+      }
+
+      return (
+        <div className="flex justify-between gap-4">
+          <span className="flex grow gap-2 truncate text-left">
+            <ChainIconClient
+              className="size-5"
+              src={chain.icon?.url}
+              client={props.client}
+              loading="lazy"
+            />
+            {cleanChainName(chain.name)}
+          </span>
+
+          {!props.disableChainId && (
+            <Badge variant="outline" className="gap-2 max-sm:hidden">
+              <span className="text-muted-foreground">Chain ID</span>
+              {chain.chainId}
+            </Badge>
+          )}
+        </div>
+      );
+    },
+    [idToChain, props.disableChainId, props.client],
+  );
+
+  const isLoadingChains = allChains.length === 0;
+
+  return (
+    <SelectWithSearch
+      searchPlaceholder="Search by Name or Chain ID"
+      value={props.chainId?.toString()}
+      showCheck={false}
+      options={options}
+      onValueChange={(chainId) => {
+        props.onChange(Number(chainId));
+      }}
+      closeOnSelect={true}
+      placeholder={
+        isLoadingChains
+          ? "Loading Chains..."
+          : props.placeholder || "Select Chain"
+      }
+      overrideSearchFn={searchFn}
+      renderOption={renderOption}
+      className={props.className}
+      popoverContentClassName={props.popoverContentClassName}
+      disabled={isLoadingChains}
+      side={props.side}
+      align={props.align}
+    />
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/SingleNetworkSelector.stories.tsx b/apps/nebula/src/@/components/blocks/SingleNetworkSelector.stories.tsx
new file mode 100644
index 00000000000..2a2b87f5191
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/SingleNetworkSelector.stories.tsx
@@ -0,0 +1,53 @@
+import { BadgeContainer, storybookThirdwebClient } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { useState } from "react";
+import { SingleNetworkSelector } from "./NetworkSelectors";
+
+const meta = {
+  title: "blocks/SingleNetworkSelector",
+  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-8 py-10">
+      <Variant label="No Chain ID selected by default" chainId={undefined} />
+      <Variant label="Polygon selected by default" chainId={137} />
+      <Variant
+        label="Show certain chains only"
+        chainId={undefined}
+        chainIds={[1, 137, 10]}
+      />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  chainId: number | undefined;
+  chainIds?: number[];
+}) {
+  const [chainId, setChainId] = useState<number | undefined>(props.chainId);
+  return (
+    <BadgeContainer label={props.label}>
+      <SingleNetworkSelector
+        client={storybookThirdwebClient}
+        chainId={chainId}
+        onChange={setChainId}
+        chainIds={props.chainIds}
+      />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/auto-connect.tsx b/apps/nebula/src/@/components/blocks/auto-connect.tsx
new file mode 100644
index 00000000000..fa86400d5ed
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/auto-connect.tsx
@@ -0,0 +1,16 @@
+"use client";
+import type { ThirdwebClient } from "thirdweb";
+import { AutoConnect } from "thirdweb/react";
+import type { SmartWalletOptions } from "thirdweb/wallets";
+
+export function TWAutoConnect(props: {
+  accountAbstraction?: SmartWalletOptions;
+  client: ThirdwebClient;
+}) {
+  return (
+    <AutoConnect
+      client={props.client}
+      accountAbstraction={props.accountAbstraction}
+    />
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/buttons/MismatchButton.tsx b/apps/nebula/src/@/components/blocks/buttons/MismatchButton.tsx
new file mode 100644
index 00000000000..3dfa6911752
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/buttons/MismatchButton.tsx
@@ -0,0 +1,571 @@
+"use client";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { getSDKTheme } from "@/config/sdk-component-theme";
+import { LOCAL_NODE_PKEY } from "@/constants/local-node";
+import { useAllChainsData } from "@/hooks/chains";
+import { cn } from "@/lib/utils";
+import type { ChainMetadataWithServices, ChainServices } from "@/types/chain";
+import { useMutation, useQuery } from "@tanstack/react-query";
+// import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
+// import { useAllChainsData } from "hooks/chains/allChains";
+import { ExternalLinkIcon, UnplugIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type React from "react";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { toast } from "sonner";
+import {
+  type ThirdwebClient,
+  prepareTransaction,
+  sendTransaction,
+  toWei,
+} from "thirdweb";
+import {
+  type Chain,
+  type ChainMetadata,
+  defineChain,
+  localhost,
+} from "thirdweb/chains";
+import {
+  PayEmbed,
+  useActiveAccount,
+  useActiveWallet,
+  useActiveWalletChain,
+  useActiveWalletConnectionStatus,
+  useSwitchActiveWalletChain,
+  useWalletBalance,
+} from "thirdweb/react";
+import { type Wallet, privateKeyToAccount } from "thirdweb/wallets";
+
+const GAS_FREE_CHAINS = [
+  75513, // Geek verse testnet
+  75512, // Geek verse mainnet
+  531050104, // sophon testnet
+  50104, // sophon mainnet
+  37111, // lens sepolia
+  4457845, // zero testnet
+  978658, // treasure topaz
+  300, // zksync sepolia
+  7225878, // Saakuru Mainnet
+  247253, // Saakuru Testnet
+  19011, // Homeverse Mainnet
+  40875, // Homeverse Testnet
+  5464, // Saga Mainnet
+];
+
+function useIsNetworkMismatch(txChainId: number) {
+  const walletChainId = useActiveWalletChain()?.id;
+  if (!walletChainId) {
+    // simply not ready yet, assume false
+    return false;
+  }
+  // otherwise, compare the chain ids
+  return walletChainId !== txChainId;
+}
+
+type MistmatchButtonProps = React.ComponentProps<typeof Button> & {
+  txChainId: number;
+  isLoggedIn: boolean;
+  isPending: boolean;
+  checkBalance?: boolean;
+  client: ThirdwebClient;
+  disableNoFundsPopup: boolean;
+};
+
+export const MismatchButton = forwardRef<
+  HTMLButtonElement,
+  MistmatchButtonProps
+>((props, ref) => {
+  const {
+    txChainId,
+    isLoggedIn,
+    isPending,
+    checkBalance = true,
+    disableNoFundsPopup,
+    ...buttonProps
+  } = props;
+  const account = useActiveAccount();
+  const wallet = useActiveWallet();
+  const activeWalletChain = useActiveWalletChain();
+  const [dialog, setDialog] = useState<undefined | "no-funds" | "pay">();
+  const { theme } = useTheme();
+  const pathname = usePathname();
+
+  const connectionStatus = useActiveWalletConnectionStatus();
+  const txChain = defineChain(txChainId);
+
+  const txChainBalance = useWalletBalance({
+    address: account?.address,
+    chain: txChain,
+    client: props.client,
+  });
+
+  const networksMismatch = useIsNetworkMismatch(txChainId);
+  const switchNetwork = useSwitchActiveWalletChain();
+
+  const showSwitchChainPopover =
+    networksMismatch && wallet && !canSwitchNetworkWithoutConfirmation(wallet);
+
+  const [isMismatchPopoverOpen, setIsMismatchPopoverOpen] = useState(false);
+  // const trackEvent = useTrack();
+
+  const chainId = activeWalletChain?.id;
+
+  const switchNetworkMutation = useMutation({
+    mutationFn: switchNetwork,
+  });
+
+  const eventRef =
+    useRef<React.MouseEvent<HTMLButtonElement, MouseEvent>>(undefined);
+
+  if (connectionStatus === "connecting") {
+    return (
+      <Button
+        className={props.className}
+        size={props.size}
+        asChild
+        variant="outline"
+      >
+        <div>
+          <Spinner className="size-4 shrink-0" />
+          Connecting Wallet
+        </div>
+      </Button>
+    );
+  }
+
+  if (!wallet || !chainId || !isLoggedIn) {
+    return (
+      <Button className={props.className} size={props.size} asChild>
+        <Link
+          href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
+        >
+          Connect Wallet
+        </Link>
+      </Button>
+    );
+  }
+
+  const isBalanceRequired =
+    !disableNoFundsPopup &&
+    checkBalance &&
+    (wallet.id === "smart" ? false : !GAS_FREE_CHAINS.includes(txChainId));
+
+  const notEnoughBalance =
+    (txChainBalance.data?.value || 0n) === 0n && isBalanceRequired;
+
+  const disabled =
+    buttonProps.disabled ||
+    switchNetworkMutation.isPending ||
+    // if user is about to trigger a transaction on txChain, but txChainBalance is not yet loaded and is required before proceeding
+    (!showSwitchChainPopover && txChainBalance.isPending && isBalanceRequired);
+
+  const showSpinner = isPending || switchNetworkMutation.isPending;
+  const showNoFundsPopup = notEnoughBalance && !disableNoFundsPopup;
+
+  return (
+    <>
+      <Popover
+        open={isMismatchPopoverOpen}
+        onOpenChange={(v) => {
+          if (v) {
+            if (showSwitchChainPopover) {
+              setIsMismatchPopoverOpen(true);
+            }
+          } else {
+            setIsMismatchPopoverOpen(false);
+          }
+        }}
+      >
+        <PopoverTrigger asChild>
+          <Button
+            {...buttonProps}
+            className={cn("gap-2 disabled:opacity-100", buttonProps.className)}
+            disabled={disabled}
+            type={
+              showSwitchChainPopover || showNoFundsPopup
+                ? "button"
+                : buttonProps.type
+            }
+            onClick={async (e) => {
+              e.stopPropagation();
+
+              if (showSwitchChainPopover) {
+                eventRef.current = e;
+                return;
+              }
+
+              if (notEnoughBalance && !props.disableNoFundsPopup) {
+                // trackEvent({
+                //   category: "no-funds",
+                //   action: "popover",
+                //   label: "evm",
+                // });
+                setDialog("no-funds");
+                return;
+              }
+
+              // in case of in-app or smart wallet wallet, the user is not prompted to switch the network
+              // we have to do it programmatically
+              if (activeWalletChain?.id !== txChain?.id) {
+                await switchNetworkMutation.mutateAsync(txChain);
+              }
+
+              if (buttonProps.onClick) {
+                return buttonProps.onClick(e);
+              }
+            }}
+            ref={ref}
+          >
+            {buttonProps.children}
+            {showSpinner && <Spinner className="size-4 shrink-0" />}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="min-w-[350px]" side="top" sideOffset={10}>
+          <MismatchNotice
+            txChainId={txChainId}
+            onClose={(hasSwitched) => {
+              if (hasSwitched) {
+                setIsMismatchPopoverOpen(false);
+              }
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+
+      {/* Not Enough Funds */}
+      <Dialog
+        open={!!dialog}
+        onOpenChange={(v) => {
+          if (!v) {
+            setDialog(undefined);
+          }
+        }}
+      >
+        <DialogContent
+          className={cn(
+            "gap-0 p-0",
+            dialog === "no-funds" && "md:!max-w-[480px]",
+            dialog === "pay" && "md:!max-w-[360px] border-none bg-transparent",
+          )}
+          dialogCloseClassName="focus:ring-0"
+        >
+          <DynamicHeight>
+            {dialog === "no-funds" && (
+              <NoFundsDialogContent
+                chain={txChain}
+                openPayModal={() => {
+                  // trackEvent({
+                  //   category: "pay",
+                  //   action: "buy",
+                  //   label: "attempt",
+                  // });
+                  setDialog("pay");
+                }}
+                onCloseModal={() => setDialog(undefined)}
+                isLoggedIn={props.isLoggedIn}
+                client={props.client}
+              />
+            )}
+
+            {dialog === "pay" && (
+              <PayEmbed
+                client={props.client}
+                theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
+                className="!w-auto"
+                payOptions={{
+                  // onPurchaseSuccess(info) {
+                  //   if (
+                  //     info?.type === "crypto" &&
+                  //     info.status.status !== "NOT_FOUND"
+                  //   ) {
+                  //     trackEvent({
+                  //       category: "pay",
+                  //       action: "buy",
+                  //       label: "success",
+                  //       type: info.type,
+                  //       chainId: info.status.quote.toToken.chainId,
+                  //       tokenAddress: info.status.quote.toToken.tokenAddress,
+                  //       amount: info.status.quote.toAmount,
+                  //     });
+                  //   }
+
+                  //   if (
+                  //     info?.type === "fiat" &&
+                  //     info.status.status !== "NOT_FOUND"
+                  //   ) {
+                  //     trackEvent({
+                  //       category: "pay",
+                  //       action: "buy",
+                  //       label: "success",
+                  //       type: info.type,
+                  //       chainId: info.status.quote.toToken.chainId,
+                  //       tokenAddress: info.status.quote.toToken.tokenAddress,
+                  //       amount: info.status.quote.estimatedToTokenAmount,
+                  //     });
+                  //   }
+                  // },
+                  prefillBuy: {
+                    amount: "0.01",
+                    chain: txChain,
+                  },
+                }}
+              />
+            )}
+          </DynamicHeight>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+});
+
+MismatchButton.displayName = "MismatchButton";
+
+async function fetchChainMetadata(chainId: number) {
+  const res = await fetch(`https://api.thirdweb.com/v1/chains/${chainId}`);
+  if (!res.ok) {
+    throw new Error("Failed to fetch chain metadata");
+  }
+  const json = (await res.json()) as { data: ChainMetadata };
+
+  return json.data;
+}
+
+async function fetchChainServices(chainId: number) {
+  const res = await fetch(
+    `https://api.thirdweb.com/v1/chains/${chainId}/services`,
+  );
+  if (!res.ok) {
+    throw new Error("Failed to fetch chain services");
+  }
+  const json = (await res.json()) as { data: ChainServices };
+  return json.data;
+}
+
+function NoFundsDialogContent(props: {
+  chain: Chain;
+  openPayModal: () => void;
+  onCloseModal: () => void;
+  isLoggedIn: boolean;
+  client: ThirdwebClient;
+}) {
+  const chainWithServiceInfoQuery = useQuery({
+    queryKey: ["chain-with-services", props.chain.id],
+    queryFn: async () => {
+      const [chainRes, chainServicesRes] = await Promise.all([
+        fetchChainMetadata(props.chain.id).catch(() => undefined),
+        fetchChainServices(props.chain.id).catch(() => undefined),
+      ]);
+
+      if (!chainRes || !chainServicesRes) {
+        throw new Error("Failed to fetch chain with services");
+      }
+
+      return {
+        ...chainRes,
+        services: chainServicesRes.services,
+      } satisfies ChainMetadataWithServices;
+    },
+    enabled: !!props.chain.id,
+  });
+
+  return (
+    <div className="flex flex-col gap-0 p-0">
+      <div className="flex flex-col gap-6 p-6 ">
+        {/* Header */}
+        <DialogHeader>
+          <DialogTitle className="font-semibold text-2xl tracking-tight">
+            Not Enough Funds
+          </DialogTitle>
+
+          <DialogDescription className="text-muted-foreground">
+            You do not have enough funds to execute the transaction on this
+            chain. Get more funds to continue
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Get Funds content */}
+
+        {!chainWithServiceInfoQuery.data ? (
+          <div className="flex h-[300px] items-center justify-center">
+            <Spinner className="size-10" />
+          </div>
+        ) : (
+          <div>
+            {props.chain.id === localhost.id ? (
+              // localhost case
+              <GetLocalHostTestnetFunds client={props.client} />
+            ) : chainWithServiceInfoQuery.data.services.find(
+                (x) => x.enabled && x.service === "pay",
+              ) ? (
+              // pay case
+              <Button
+                variant="primary"
+                className="w-full"
+                onClick={props.openPayModal}
+              >
+                Buy Funds
+              </Button>
+            ) : // no funds options available
+            null}
+          </div>
+        )}
+      </div>
+      {/* Footer */}
+      <div className="flex justify-between gap-4 border-border border-t p-6">
+        <Button variant="outline" onClick={props.onCloseModal}>
+          Close
+        </Button>
+
+        <Button variant="outline" asChild>
+          <Link
+            href="https://portal.thirdweb.com/glossary/gas"
+            target="_blank"
+            className="gap-2"
+          >
+            Learn about Gas <ExternalLinkIcon className="size-4" />
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+const MismatchNotice: React.FC<{
+  onClose: (hasSwitched: boolean) => void;
+  txChainId: number;
+}> = ({ onClose, txChainId }) => {
+  const connectedChainId = useActiveWalletChain()?.id;
+  const switchNetwork = useSwitchActiveWalletChain();
+  const activeWallet = useActiveWallet();
+  const actuallyCanAttemptSwitch =
+    activeWallet && activeWallet.id !== "global.safe";
+  const { idToChain } = useAllChainsData();
+  const walletConnectedNetworkInfo = connectedChainId
+    ? idToChain.get(connectedChainId)
+    : undefined;
+
+  const txChain = txChainId ? defineChain(txChainId) : undefined;
+  const txChainMetadata = idToChain.get(txChainId);
+  const switchNetworkMutation = useMutation({
+    mutationFn: switchNetwork,
+  });
+
+  const onSwitchWallet = useCallback(async () => {
+    if (actuallyCanAttemptSwitch && txChain) {
+      try {
+        await switchNetworkMutation.mutateAsync(txChain);
+        onClose(true);
+      } catch {
+        //  failed to switch network
+        onClose(false);
+      }
+    }
+  }, [actuallyCanAttemptSwitch, txChain, onClose, switchNetworkMutation]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <h3 className="mb-1 font-semibold text-base tracking-tight">
+          Network Mismatch
+        </h3>
+
+        <p className="mb-1 text-muted-foreground text-sm">
+          Your wallet is connected to the{" "}
+          <span className="font-semibold capitalize">
+            {walletConnectedNetworkInfo?.name ||
+              `Chain ID #${connectedChainId}`}
+          </span>{" "}
+          network
+        </p>
+
+        <p className="text-muted-foreground text-sm">
+          This action requires you to connect to the{" "}
+          <span className="font-semibold capitalize">
+            {txChainMetadata?.name || `Chain ID #${txChainId}`}
+          </span>{" "}
+          network.
+        </p>
+      </div>
+
+      <Button
+        size="sm"
+        onClick={onSwitchWallet}
+        disabled={!actuallyCanAttemptSwitch || switchNetworkMutation.isPending}
+        variant="default"
+        className="gap-2 capitalize disabled:opacity-100"
+      >
+        {switchNetworkMutation.isPending ? (
+          <Spinner className="size-4 shrink-0" />
+        ) : (
+          <UnplugIcon className="size-4 shrink-0" />
+        )}
+        <span className="line-clamp-1 block truncate">
+          {switchNetworkMutation.isPending ? "Switching" : "Switch"}{" "}
+          {txChainMetadata ? `to ${txChainMetadata.name}` : "chain"}
+        </span>
+      </Button>
+
+      {!actuallyCanAttemptSwitch && (
+        <p className="text-muted-foreground">
+          Your connected wallet does not support programmatic switching.
+          <br />
+          Please manually switch the network in your wallet.
+        </p>
+      )}
+    </div>
+  );
+};
+
+const GetLocalHostTestnetFunds = (props: { client: ThirdwebClient }) => {
+  const address = useActiveAccount()?.address;
+  const requestFunds = async () => {
+    if (!address) {
+      return toast.error("No active account detected");
+    }
+    const faucet = privateKeyToAccount({
+      privateKey: LOCAL_NODE_PKEY,
+      client: props.client,
+    });
+    const transaction = prepareTransaction({
+      to: address,
+      chain: localhost,
+      client: props.client,
+      value: toWei("10"),
+    });
+    const promise = sendTransaction({
+      account: faucet,
+      transaction,
+    });
+    toast.promise(promise, {
+      error: "Failed to get funds from localhost",
+      success: "Successfully got funds from localhost",
+      loading: "Requesting funds",
+    });
+  };
+
+  return (
+    <Button variant="primary" onClick={requestFunds} className="w-full">
+      Get Funds from Localhost
+    </Button>
+  );
+};
+
+function canSwitchNetworkWithoutConfirmation(wallet: Wallet) {
+  return wallet.id === "inApp" || wallet.id === "smart";
+}
diff --git a/apps/nebula/src/@/components/blocks/buttons/TransactionButton.stories.tsx b/apps/nebula/src/@/components/blocks/buttons/TransactionButton.stories.tsx
new file mode 100644
index 00000000000..350e2ce409b
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/buttons/TransactionButton.stories.tsx
@@ -0,0 +1,210 @@
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { BadgeContainer, storybookThirdwebClient } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { useMutation } from "@tanstack/react-query";
+import { StarIcon } from "lucide-react";
+import { useState } from "react";
+import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
+import { TransactionButton } from "./TransactionButton";
+
+const meta = {
+  title: "blocks/TransactionButton",
+  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 [chainId, setChainId] = useState(137);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  return (
+    <ThirdwebProvider>
+      <div className="container flex max-w-6xl flex-col gap-10 py-10">
+        <FormFieldSetup
+          htmlFor="chain-id"
+          label="Transaction Chain Id"
+          isRequired={false}
+          errorMessage={undefined}
+        >
+          <Select
+            value={`${chainId}`}
+            onValueChange={(v) => {
+              setChainId(Number.parseInt(v));
+            }}
+          >
+            <SelectTrigger className="w-[180px]" id="chain-id">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                {[137, 1, 8453, 10].map((item) => {
+                  return (
+                    <SelectItem key={item} value={`${item}`}>
+                      {item}
+                    </SelectItem>
+                  );
+                })}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </FormFieldSetup>
+
+        <div className="flex items-center gap-2">
+          Is Logged In
+          <Switch
+            checked={isLoggedIn}
+            onCheckedChange={(v) => setIsLoggedIn(v)}
+          />
+        </div>
+
+        <div>
+          <ConnectButton client={storybookThirdwebClient} />
+        </div>
+
+        <Variant
+          label="No Transactions"
+          transactionCount={undefined}
+          chainId={chainId}
+          isLoggedIn={isLoggedIn}
+        />
+
+        <Variant
+          label="1 Transaction"
+          transactionCount={1}
+          chainId={chainId}
+          isLoggedIn={isLoggedIn}
+        />
+
+        <Variant
+          label="1 Transaction + children"
+          transactionCount={1}
+          chainId={chainId}
+          isLoggedIn={isLoggedIn}
+        >
+          <div className="flex items-center gap-2">
+            <StarIcon className="size-4" />
+            Execute Tx
+          </div>
+        </Variant>
+
+        <Variant
+          label="No Transaction count + children"
+          transactionCount={undefined}
+          chainId={chainId}
+          isLoggedIn={isLoggedIn}
+        >
+          <div className="flex items-center gap-2">
+            <StarIcon className="size-4" />
+            Execute Tx
+          </div>
+        </Variant>
+
+        <Variant
+          label="10 Transaction"
+          transactionCount={10}
+          chainId={chainId}
+          isLoggedIn={isLoggedIn}
+        />
+
+        <Variant
+          label="Destructive Variant"
+          transactionCount={1}
+          chainId={chainId}
+          variant="destructive"
+          isLoggedIn={isLoggedIn}
+        />
+
+        <Variant
+          label="Destructive Variant, No Tx count"
+          transactionCount={undefined}
+          chainId={chainId}
+          variant="destructive"
+          isLoggedIn={isLoggedIn}
+        />
+
+        <Variant
+          label="class applied"
+          transactionCount={undefined}
+          chainId={chainId}
+          className="min-w-[300px]"
+          isLoggedIn={isLoggedIn}
+        />
+
+        <Variant
+          label="size - sm"
+          transactionCount={undefined}
+          chainId={chainId}
+          size="sm"
+          isLoggedIn={isLoggedIn}
+        />
+
+        <Variant
+          label="disabled"
+          transactionCount={undefined}
+          chainId={chainId}
+          disabled
+          isLoggedIn={isLoggedIn}
+        />
+      </div>
+    </ThirdwebProvider>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  transactionCount: number | undefined;
+  chainId: number;
+  variant?: "primary" | "destructive";
+  className?: string;
+  size?: "sm";
+  disabled?: boolean;
+  children?: React.ReactNode;
+  isLoggedIn: boolean;
+}) {
+  const sendTx = useMutation({
+    mutationFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 4000));
+    },
+  });
+
+  return (
+    <BadgeContainer label={props.label}>
+      <TransactionButton
+        client={storybookThirdwebClient}
+        disabled={props.disabled}
+        className={props.className}
+        variant={props.variant}
+        isPending={sendTx.isPending}
+        onClick={() => {
+          sendTx.mutate();
+        }}
+        transactionCount={props.transactionCount}
+        txChainID={props.chainId}
+        size={props.size}
+        isLoggedIn={props.isLoggedIn}
+      >
+        {props.children || "Execute Tx"}
+      </TransactionButton>
+    </BadgeContainer>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/buttons/TransactionButton.tsx b/apps/nebula/src/@/components/blocks/buttons/TransactionButton.tsx
new file mode 100644
index 00000000000..8ae0e1e5bc1
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/buttons/TransactionButton.tsx
@@ -0,0 +1,175 @@
+"use client";
+import type { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useAllChainsData } from "@/hooks/chains";
+import { cn } from "@/lib/utils";
+import { ArrowLeftRightIcon } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import {
+  useActiveWallet,
+  useActiveWalletChain,
+  useConnectedWallets,
+} from "thirdweb/react";
+import type { Wallet } from "thirdweb/wallets";
+import { MismatchButton } from "./MismatchButton";
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+type TransactionButtonProps = Omit<ButtonProps, "variant"> & {
+  transactionCount: number | undefined; // support for unknown number of tx count
+  isPending: boolean;
+  txChainID: number;
+  variant?: "destructive" | "primary" | "default";
+  isLoggedIn: boolean;
+  checkBalance?: boolean;
+  client: ThirdwebClient;
+  disableNoFundsPopup?: boolean;
+};
+
+export const TransactionButton: React.FC<TransactionButtonProps> = ({
+  children,
+  transactionCount,
+  isPending,
+  txChainID,
+  variant,
+  isLoggedIn,
+  checkBalance,
+  client,
+  disableNoFundsPopup,
+  ...restButtonProps
+}) => {
+  const activeWallet = useActiveWallet();
+  const connectedWallets = useConnectedWallets();
+  // all wallets except inApp (aka - embedded) requires external confirmation - either from mobile app or extension
+  const walletRequiresExternalConfirmation =
+    activeWallet &&
+    !canSendTransactionWithoutConfirmation(activeWallet, connectedWallets);
+
+  const chain = useActiveWalletChain();
+
+  const { idToChain } = useAllChainsData();
+  const activeChainMeta = chain ? idToChain.get(chain.id) : undefined;
+
+  const isChainDeprecated = useMemo(
+    () => activeChainMeta?.status === "deprecated",
+    [activeChainMeta],
+  );
+
+  const txCountDivWidth = 60;
+  const disabled = isChainDeprecated || restButtonProps.disabled || isPending;
+
+  return (
+    <Popover open={walletRequiresExternalConfirmation && isPending}>
+      <PopoverTrigger asChild>
+        <MismatchButton
+          client={client}
+          disableNoFundsPopup={
+            disableNoFundsPopup === undefined ? false : disableNoFundsPopup
+          }
+          isPending={isPending}
+          variant={variant || "primary"}
+          isLoggedIn={isLoggedIn}
+          txChainId={txChainID}
+          {...restButtonProps}
+          disabled={disabled}
+          checkBalance={checkBalance}
+          className={cn("relative overflow-hidden", restButtonProps.className)}
+          style={{
+            paddingLeft: transactionCount
+              ? `${txCountDivWidth + 16}px`
+              : undefined,
+            ...restButtonProps.style,
+          }}
+        >
+          {transactionCount && (
+            <ToolTipLabel
+              label={
+                disabled
+                  ? undefined
+                  : isChainDeprecated
+                    ? "This chain is deprecated so you cannot execute transactions on it"
+                    : `This action will trigger ${transactionCount} ${transactionCount > 1 ? "transactions" : "transaction"}`
+              }
+            >
+              <div
+                className="absolute top-0 bottom-0 left-0 flex items-center justify-center gap-1 bg-black/30"
+                style={{
+                  width: `${txCountDivWidth}px`,
+                }}
+              >
+                <span className="font-medium font-mono">
+                  {transactionCount}
+                </span>
+                <ArrowLeftRightIcon className="size-3" />
+              </div>
+            </ToolTipLabel>
+          )}
+
+          <span className="flex grow items-center justify-center gap-2">
+            {children}
+          </span>
+        </MismatchButton>
+      </PopoverTrigger>
+
+      <PopoverContent className="min-w-[300px]" sideOffset={10} side="top">
+        <ExternalApprovalNotice />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const ExternalApprovalNotice: React.FC = () => {
+  const [showHint, setShowHint] = useState(false);
+
+  // legitimate usecase!
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setShowHint(true);
+    }, 15_000);
+    return () => clearTimeout(t);
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h4 className="text-foreground">Approve Transaction</h4>
+
+      <p className="text-muted-foreground text-sm">
+        Your connected wallet will prompt you to approve this transaction
+      </p>
+
+      {showHint && (
+        <p className="text-muted-foreground text-sm">
+          Once you have approved the transaction in your connected wallet this
+          action will continue automatically.
+        </p>
+      )}
+    </div>
+  );
+};
+
+function canSendTransactionWithoutConfirmation(
+  wallet: Wallet,
+  connectedWallets: Wallet[],
+) {
+  // inApp wallet
+  if (wallet.id === "inApp") {
+    return true;
+  }
+
+  // smart wallet + inApp admin wallet
+  if (wallet.id === "smart") {
+    const adminWallet = connectedWallets.find(
+      (w) => w.getAccount()?.address === wallet.getAdminAccount?.()?.address,
+    );
+    return adminWallet?.id === "inApp";
+  }
+
+  return false;
+}
diff --git a/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx b/apps/nebula/src/@/components/blocks/client-only.tsx
similarity index 58%
rename from apps/dashboard/src/components/ClientOnly/ClientOnly.tsx
rename to apps/nebula/src/@/components/blocks/client-only.tsx
index 9804bb57d8d..87d7ef5580e 100644
--- a/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx
+++ b/apps/nebula/src/@/components/blocks/client-only.tsx
@@ -2,24 +2,19 @@
 
 import { cn } from "@/lib/utils";
 import { type ReactNode, useEffect, useState } from "react";
-import type { ComponentWithChildren } from "types/component-with-children";
-import styles from "./ClientOnly.module.css";
 
 interface ClientOnlyProps {
   /**
    * Use this to server render a skeleton or loading state
    */
   ssr: ReactNode;
-  fadeInDuration?: number;
-  style?: React.CSSProperties;
   className?: string;
+  children: ReactNode;
 }
 
-export const ClientOnly: ComponentWithChildren<ClientOnlyProps> = ({
+export const ClientOnly: React.FC<ClientOnlyProps> = ({
   children,
-  fadeInDuration,
   ssr,
-  style,
   className,
 }) => {
   const hasMounted = useIsClientMounted();
@@ -29,14 +24,7 @@ export const ClientOnly: ComponentWithChildren<ClientOnlyProps> = ({
   }
 
   return (
-    <div
-      className={cn(styles.fadeIn, className)}
-      style={{
-        animationDuration: `${fadeInDuration}ms`,
-        opacity: fadeInDuration ? 0 : 1,
-        ...style,
-      }}
-    >
+    <div className={cn("fade-in-0 fill-mode-forwards ease-in", className)}>
       {children}
     </div>
   );
diff --git a/apps/nebula/src/@/components/blocks/multi-select.stories.tsx b/apps/nebula/src/@/components/blocks/multi-select.stories.tsx
new file mode 100644
index 00000000000..9fdc1e604dc
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/multi-select.stories.tsx
@@ -0,0 +1,72 @@
+import { BadgeContainer } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { useMemo, useState } from "react";
+import { MultiSelect } from "./multi-select";
+
+const meta = {
+  title: "blocks/MultiSelect",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function createList(len: number) {
+  return Array.from({ length: len }, (_, i) => ({
+    value: `${i}`,
+    label: `Item ${i}`,
+  }));
+}
+
+function Story() {
+  return (
+    <div className="container flex max-w-6xl flex-col gap-6 py-10">
+      <VariantTest defaultValues={[]} storyLabel="5 items" listLen={5} />
+      <VariantTest defaultValues={[]} storyLabel="5000 items" listLen={5000} />
+      <VariantTest
+        defaultValues={["1", "3", "5"]}
+        storyLabel="20 items, 3 selected by default"
+        listLen={20}
+      />
+      <VariantTest
+        defaultValues={["1", "2", "3", "4", "5", "6", "7"]}
+        storyLabel="20 items, 7 selected, show max 3"
+        listLen={20}
+        maxCount={3}
+      />
+    </div>
+  );
+}
+
+function VariantTest(props: {
+  defaultValues: string[];
+  maxCount?: number;
+  storyLabel: string;
+  listLen: number;
+}) {
+  const list = useMemo(() => createList(props.listLen), [props.listLen]);
+  const [values, setValues] = useState<string[]>(props.defaultValues);
+
+  return (
+    <BadgeContainer label={props.storyLabel}>
+      <MultiSelect
+        selectedValues={values}
+        options={list}
+        onSelectedValuesChange={(values) => {
+          setValues(values);
+        }}
+        placeholder="Select items"
+        maxCount={props.maxCount}
+      />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/multi-select.tsx b/apps/nebula/src/@/components/blocks/multi-select.tsx
new file mode 100644
index 00000000000..591a4bc5b9a
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/multi-select.tsx
@@ -0,0 +1,375 @@
+/* eslint-disable no-restricted-syntax */
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronDownIcon, SearchIcon, XIcon } from "lucide-react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useShowMore } from "../../lib/useShowMore";
+import { ScrollShadow } from "../ui/ScrollShadow/ScrollShadow";
+import { Input } from "../ui/input";
+
+interface MultiSelectProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  options: {
+    label: string;
+    value: string;
+  }[];
+
+  selectedValues: string[];
+  onSelectedValuesChange: (value: string[]) => void;
+  placeholder: string;
+  searchPlaceholder?: string;
+
+  /**
+   * Maximum number of items to display. Extra selected items will be summarized.
+   * Optional, defaults to 3.
+   */
+  maxCount?: number;
+
+  className?: string;
+
+  overrideSearchFn?: (
+    option: { value: string; label: string },
+    searchTerm: string,
+  ) => boolean;
+
+  popoverContentClassName?: string;
+  customTrigger?: React.ReactNode;
+  renderOption?: (option: { value: string; label: string }) => React.ReactNode;
+  align?: "center" | "start" | "end";
+  side?: "left" | "right" | "top" | "bottom";
+  showSelectedValuesInModal?: boolean;
+}
+
+export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
+  (
+    {
+      options,
+      onSelectedValuesChange,
+      placeholder,
+      maxCount = Number.POSITIVE_INFINITY,
+      className,
+      selectedValues,
+      overrideSearchFn,
+      renderOption,
+      searchPlaceholder,
+      popoverContentClassName,
+      showSelectedValuesInModal = false,
+      align,
+      side,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState("");
+
+    const handleInputKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+          setIsPopoverOpen(true);
+        } else if (event.key === "Backspace" && !event.currentTarget.value) {
+          const newSelectedValues = [...selectedValues];
+          newSelectedValues.pop();
+          onSelectedValuesChange(newSelectedValues);
+        }
+      },
+      [selectedValues, onSelectedValuesChange],
+    );
+
+    const toggleOption = useCallback(
+      (option: string) => {
+        const newSelectedValues = selectedValues.includes(option)
+          ? selectedValues.filter((value) => value !== option)
+          : [...selectedValues, option];
+        onSelectedValuesChange(newSelectedValues);
+      },
+      [selectedValues, onSelectedValuesChange],
+    );
+
+    const handleClear = useCallback(() => {
+      onSelectedValuesChange([]);
+    }, [onSelectedValuesChange]);
+
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev);
+    };
+
+    const clearExtraOptions = useCallback(() => {
+      const newSelectedValues = selectedValues.slice(0, maxCount);
+      onSelectedValuesChange(newSelectedValues);
+    }, [selectedValues, onSelectedValuesChange, maxCount]);
+
+    // show 50 initially and then 20 more when reaching the end
+    const { itemsToShow, lastItemRef } = useShowMore<HTMLButtonElement>(50, 20);
+
+    const optionsToShow = useMemo(() => {
+      const filteredOptions: {
+        label: string;
+        value: string;
+      }[] = [];
+
+      const searchValLowercase = searchValue.toLowerCase();
+
+      for (let i = 0; i <= options.length - 1; i++) {
+        if (filteredOptions.length >= itemsToShow) {
+          break;
+        }
+        const option = options[i];
+        if (!option) {
+          continue;
+        }
+
+        if (overrideSearchFn) {
+          if (overrideSearchFn(option, searchValLowercase)) {
+            filteredOptions.push(option);
+          }
+        } else {
+          if (option.label.toLowerCase().includes(searchValLowercase)) {
+            filteredOptions.push(option);
+          }
+        }
+      }
+
+      return filteredOptions;
+    }, [options, searchValue, itemsToShow, overrideSearchFn]);
+
+    // scroll to top when options change
+    const popoverElRef = useRef<HTMLDivElement>(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+      const scrollContainer =
+        popoverElRef.current?.querySelector("[data-scrollable]");
+      if (scrollContainer) {
+        scrollContainer.scrollTo({
+          top: 0,
+        });
+      }
+    }, [searchValue]);
+
+    return (
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal>
+        <PopoverTrigger asChild>
+          {props.customTrigger || (
+            <Button
+              ref={ref}
+              {...props}
+              onClick={handleTogglePopover}
+              className={cn(
+                "flex h-auto min-h-10 w-full items-center justify-between rounded-md border border-border bg-inherit p-3 hover:bg-inherit",
+                className,
+              )}
+            >
+              {selectedValues.length > 0 ? (
+                <div className="flex w-full items-center justify-between">
+                  <SelectedChainsBadges
+                    selectedValues={selectedValues}
+                    options={options}
+                    maxCount={maxCount}
+                    onClose={handleClear}
+                    toggleOption={toggleOption}
+                    clearExtraOptions={clearExtraOptions}
+                  />
+                  <div className="flex items-center justify-between gap-2">
+                    {/* Clear All */}
+                    {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+                    {/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
+                    <div
+                      role="button"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        handleClear();
+                      }}
+                      className="rounded p-1 hover:bg-accent"
+                    >
+                      <XIcon className="h-4 cursor-pointer text-muted-foreground" />
+                    </div>
+
+                    <Separator
+                      orientation="vertical"
+                      className="flex h-full min-h-6"
+                    />
+                    <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
+                  </div>
+                </div>
+              ) : (
+                <div className="flex w-full items-center justify-between">
+                  <span className="text-muted-foreground text-sm">
+                    {placeholder}
+                  </span>
+                  <ChevronDownIcon className="h-4 cursor-pointer text-muted-foreground" />
+                </div>
+              )}
+            </Button>
+          )}
+        </PopoverTrigger>
+        <PopoverContent
+          className={cn(
+            "flex max-h-[500px] flex-col p-0",
+            popoverContentClassName,
+          )}
+          align={align}
+          side={side}
+          sideOffset={10}
+          onEscapeKeyDown={() => setIsPopoverOpen(false)}
+          style={{
+            width: "var(--radix-popover-trigger-width)",
+            height:
+              "calc(var(--radix-popover-content-available-height) - 40px)",
+          }}
+          ref={popoverElRef}
+        >
+          {/* Search */}
+          <div className="relative">
+            <Input
+              placeholder={searchPlaceholder || "Search"}
+              value={searchValue}
+              // do not focus on the input when the popover opens to avoid opening the keyboard
+              tabIndex={-1}
+              onChange={(e) => setSearchValue(e.target.value)}
+              className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
+              onKeyDown={handleInputKeyDown}
+            />
+            <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+          </div>
+
+          {optionsToShow.length === 0 && (
+            <div className="flex flex-1 flex-col items-center justify-center py-10 text-sm">
+              No results found
+            </div>
+          )}
+
+          {optionsToShow.length > 0 && (
+            <ScrollShadow
+              scrollableClassName="p-1 h-full"
+              className="flex-1 rounded"
+            >
+              {/* List */}
+              <div>
+                {optionsToShow.map((option, i) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  return (
+                    <Button
+                      key={option.value}
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => toggleOption(option.value)}
+                      variant="ghost"
+                      className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2 text-left"
+                      ref={
+                        i === optionsToShow.length - 1 ? lastItemRef : undefined
+                      }
+                    >
+                      <div
+                        className={cn(
+                          "flex size-4 items-center justify-center rounded-sm border border-foreground",
+                          isSelected
+                            ? "bg-inverted text-inverted-foreground"
+                            : "opacity-50 [&_svg]:invisible",
+                        )}
+                      >
+                        <CheckIcon className="size-4" />
+                      </div>
+
+                      <div className="min-w-0 grow">
+                        {renderOption ? renderOption(option) : option.label}
+                      </div>
+                    </Button>
+                  );
+                })}
+              </div>
+            </ScrollShadow>
+          )}
+
+          {showSelectedValuesInModal && selectedValues.length > 0 && (
+            <div className="border-t px-3 py-3">
+              <SelectedChainsBadges
+                selectedValues={selectedValues}
+                options={options}
+                maxCount={maxCount}
+                onClose={handleClear}
+                toggleOption={toggleOption}
+                clearExtraOptions={clearExtraOptions}
+              />
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+function ClosableBadge(props: {
+  label: string;
+  onClose: () => void;
+}) {
+  return (
+    <span className="flex items-center gap-3 rounded-xl border border-border bg-muted px-2 py-1 text-foreground text-xs">
+      {props.label}
+      <XIcon
+        className="h-3 w-3 cursor-pointer text-muted-foreground"
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onClose();
+        }}
+      />
+    </span>
+  );
+}
+
+MultiSelect.displayName = "MultiSelect";
+
+function SelectedChainsBadges(props: {
+  selectedValues: string[];
+  options: {
+    label: string;
+    value: string;
+  }[];
+  maxCount: number;
+  onClose: () => void;
+  toggleOption: (value: string) => void;
+  clearExtraOptions: () => void;
+}) {
+  const { selectedValues, options, maxCount, toggleOption, clearExtraOptions } =
+    props;
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {selectedValues.slice(0, maxCount).map((value) => {
+        const option = options.find((o) => o.value === value);
+        if (!option) {
+          return null;
+        }
+
+        return (
+          <ClosableBadge
+            key={value}
+            label={option.label}
+            onClose={() => toggleOption(value)}
+          />
+        );
+      })}
+
+      {/* +X more */}
+      {selectedValues.length > maxCount && (
+        <ClosableBadge
+          label={`+ ${selectedValues.length - maxCount} more`}
+          onClose={clearExtraOptions}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/select-with-search.stories.tsx b/apps/nebula/src/@/components/blocks/select-with-search.stories.tsx
new file mode 100644
index 00000000000..20a3f740811
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/select-with-search.stories.tsx
@@ -0,0 +1,62 @@
+import { BadgeContainer } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { useMemo, useState } from "react";
+import { SelectWithSearch } from "./select-with-search";
+
+const meta = {
+  title: "blocks/SelectWithSearch",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function createList(len: number) {
+  return Array.from({ length: len }, (_, i) => ({
+    value: `${i}`,
+    label: `Item ${i}`,
+  }));
+}
+
+function Story() {
+  return (
+    <div className="container flex max-w-6xl flex-col gap-6 py-10">
+      <VariantTest storyLabel="5 items" listLen={5} />
+      <VariantTest storyLabel="5000 items" listLen={5000} />
+      <VariantTest
+        defaultValue={"3"}
+        storyLabel="20 items, 3 selected by default"
+        listLen={20}
+      />
+    </div>
+  );
+}
+
+function VariantTest(props: {
+  defaultValue?: string;
+  storyLabel: string;
+  listLen: number;
+}) {
+  const list = useMemo(() => createList(props.listLen), [props.listLen]);
+  const [value, setValue] = useState<string | undefined>(props.defaultValue);
+
+  return (
+    <BadgeContainer label={props.storyLabel}>
+      <SelectWithSearch
+        value={value}
+        options={list}
+        onValueChange={setValue}
+        placeholder="Select items"
+      />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/select-with-search.tsx b/apps/nebula/src/@/components/blocks/select-with-search.tsx
new file mode 100644
index 00000000000..13f18cbba24
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/select-with-search.tsx
@@ -0,0 +1,221 @@
+/* eslint-disable no-restricted-syntax */
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
+import React, { useRef, useMemo, useEffect } from "react";
+import { useShowMore } from "../../lib/useShowMore";
+import { ScrollShadow } from "../ui/ScrollShadow/ScrollShadow";
+import { Input } from "../ui/input";
+
+interface SelectWithSearchProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  options: {
+    label: string;
+    value: string;
+  }[];
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+  placeholder: string;
+  searchPlaceholder?: string;
+  className?: string;
+  overrideSearchFn?: (
+    option: { value: string; label: string },
+    searchTerm: string,
+  ) => boolean;
+  renderOption?: (option: { value: string; label: string }) => React.ReactNode;
+  popoverContentClassName?: string;
+  side?: "left" | "right" | "top" | "bottom";
+  align?: "center" | "start" | "end";
+  closeOnSelect?: boolean;
+  showCheck?: boolean;
+}
+
+export const SelectWithSearch = React.forwardRef<
+  HTMLButtonElement,
+  SelectWithSearchProps
+>(
+  (
+    {
+      options,
+      onValueChange,
+      placeholder,
+      className,
+      value,
+      renderOption,
+      overrideSearchFn,
+      popoverContentClassName,
+      searchPlaceholder,
+      closeOnSelect,
+      side,
+      align,
+      showCheck = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+    const selectedOption = useMemo(
+      () => options.find((option) => option.value === value),
+      [options, value],
+    );
+
+    // show 50 initially and then 20 more when reaching the end
+    const { itemsToShow, lastItemRef } = useShowMore<HTMLButtonElement>(50, 20);
+
+    const optionsToShow = useMemo(() => {
+      const filteredOptions: {
+        label: string;
+        value: string;
+      }[] = [];
+
+      const searchValLowercase = searchValue.toLowerCase();
+
+      for (let i = 0; i <= options.length - 1; i++) {
+        if (filteredOptions.length >= itemsToShow) {
+          break;
+        }
+        const option = options[i];
+        if (!option) {
+          continue;
+        }
+
+        if (overrideSearchFn) {
+          if (overrideSearchFn(option, searchValLowercase)) {
+            filteredOptions.push(option);
+          }
+        } else {
+          if (option.label.toLowerCase().includes(searchValLowercase)) {
+            filteredOptions.push(option);
+          }
+        }
+      }
+
+      return filteredOptions;
+    }, [options, searchValue, itemsToShow, overrideSearchFn]);
+
+    // scroll to top when options change
+    const popoverElRef = useRef<HTMLDivElement>(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+      const scrollContainer =
+        popoverElRef.current?.querySelector("[data-scrollable]");
+      if (scrollContainer) {
+        scrollContainer.scrollTo({
+          top: 0,
+        });
+      }
+    }, [searchValue]);
+
+    return (
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            {...props}
+            onClick={() => setIsPopoverOpen(true)}
+            className={cn(
+              "flex w-full items-center justify-between rounded-md border border-border bg-inherit p-3 hover:bg-inherit",
+              className,
+            )}
+          >
+            <div className="flex w-full items-center justify-between gap-2">
+              <span
+                className={cn(
+                  "truncate text-muted-foreground text-sm",
+                  selectedOption && "w-full text-foreground",
+                )}
+              >
+                {renderOption && selectedOption
+                  ? renderOption(selectedOption)
+                  : selectedOption?.label || placeholder}
+              </span>
+              <ChevronDownIcon className="size-4 cursor-pointer text-muted-foreground" />
+            </div>
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className={cn("p-0", popoverContentClassName)}
+          align={align || "center"}
+          side={side}
+          sideOffset={10}
+          onEscapeKeyDown={() => setIsPopoverOpen(false)}
+          style={{
+            width: "var(--radix-popover-trigger-width)",
+            maxHeight: "var(--radix-popover-content-available-height)",
+          }}
+          ref={popoverElRef}
+        >
+          <div>
+            {/* Search */}
+            <div className="relative">
+              <Input
+                placeholder={searchPlaceholder || "Search"}
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                className="!h-auto rounded-b-none border-0 border-border border-b py-3 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
+              />
+              <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
+            </div>
+
+            <ScrollShadow
+              scrollableClassName="max-h-[min(calc(var(--radix-popover-content-available-height)-60px),350px)] p-1"
+              className="rounded"
+            >
+              {/* List */}
+              <div>
+                {optionsToShow.length === 0 && (
+                  <div className="flex justify-center py-10">
+                    No results found
+                  </div>
+                )}
+
+                {optionsToShow.map((option, i) => {
+                  const isSelected = value === option.value;
+                  return (
+                    <Button
+                      key={option.value}
+                      role="option"
+                      aria-selected={isSelected}
+                      onClick={() => {
+                        onValueChange(option.value);
+                        if (closeOnSelect) {
+                          setIsPopoverOpen(false);
+                        }
+                      }}
+                      variant="ghost"
+                      className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2 text-left"
+                      ref={
+                        i === optionsToShow.length - 1 ? lastItemRef : undefined
+                      }
+                    >
+                      {showCheck && (
+                        <div className="flex size-4 items-center justify-center">
+                          {isSelected && <CheckIcon className="size-4" />}
+                        </div>
+                      )}
+
+                      <div className="min-w-0 grow">
+                        {renderOption ? renderOption(option) : option.label}
+                      </div>
+                    </Button>
+                  );
+                })}
+              </div>
+            </ScrollShadow>
+          </div>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+SelectWithSearch.displayName = "SelectWithSearch";
diff --git a/apps/nebula/src/@/components/blocks/skeletons/GenericLoadingPage.tsx b/apps/nebula/src/@/components/blocks/skeletons/GenericLoadingPage.tsx
new file mode 100644
index 00000000000..23a492985fd
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/skeletons/GenericLoadingPage.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { cn } from "../../../lib/utils";
+
+export function GenericLoadingPage({
+  className,
+}: {
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex min-h-[500px] grow items-center justify-center rounded-lg border border-border",
+        className,
+      )}
+    >
+      <Spinner className="size-10" />
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/blocks/wallet-address.tsx b/apps/nebula/src/@/components/blocks/wallet-address.tsx
new file mode 100644
index 00000000000..75a7ac6a8a0
--- /dev/null
+++ b/apps/nebula/src/@/components/blocks/wallet-address.tsx
@@ -0,0 +1,212 @@
+"use client";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { useClipboard } from "@/hooks/use-clipboard";
+import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
+import { CheckIcon, CopyIcon, XIcon } from "lucide-react";
+import { useMemo } from "react";
+import { type ThirdwebClient, isAddress } from "thirdweb";
+import { ZERO_ADDRESS } from "thirdweb";
+import { Blobbie, type SocialProfile, useSocialProfiles } from "thirdweb/react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { ToolTipLabel } from "../ui/tooltip";
+import { Img } from "./Img";
+
+export function WalletAddress(props: {
+  address: string | undefined;
+  shortenAddress?: boolean;
+  className?: string;
+  iconClassName?: string;
+  client: ThirdwebClient;
+  preventOpenOnFocus?: boolean;
+}) {
+  // default back to zero address if no address provided
+  const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
+
+  const [shortenedAddress, lessShortenedAddress] = useMemo(() => {
+    return [
+      props.shortenAddress !== false
+        ? `${address.slice(0, 6)}...${address.slice(-4)}`
+        : address,
+      `${address.slice(0, 14)}...${address.slice(-12)}`,
+    ];
+  }, [address, props.shortenAddress]);
+
+  const profiles = useSocialProfiles({
+    address: address,
+    client: props.client,
+  });
+
+  const { onCopy, hasCopied } = useClipboard(address, 2000);
+
+  if (!isAddress(address)) {
+    return (
+      <ToolTipLabel label={address} hoverable>
+        <span className="flex items-center gap-2 underline-offset-4 hover:underline">
+          <div className="flex size-6 items-center justify-center rounded-full border bg-background">
+            <XIcon className="size-4 text-muted-foreground" />
+          </div>
+          Invalid Address
+        </span>
+      </ToolTipLabel>
+    );
+  }
+
+  // special case for zero address
+  if (address === ZERO_ADDRESS) {
+    return <span className="cursor-pointer font-mono">{shortenedAddress}</span>;
+  }
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger
+        asChild
+        tabIndex={props.preventOpenOnFocus ? -1 : undefined}
+      >
+        <Button
+          onClick={(e) => e.stopPropagation()}
+          variant="link"
+          className={cn(
+            "flex flex-row items-center gap-2 px-0",
+            props.className,
+          )}
+        >
+          {address && (
+            <WalletAvatar
+              address={address}
+              profiles={profiles.data || []}
+              thirdwebClient={props.client}
+              iconClassName={props.iconClassName}
+            />
+          )}
+          <span className="cursor-pointer font-mono">
+            {profiles.data?.[0]?.name || shortenedAddress}
+          </span>
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent
+        className="w-80 border-border"
+        onClick={(e) => {
+          // do not close the hover card when clicking anywhere in the content
+          e.stopPropagation();
+        }}
+      >
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="font-semibold text-lg">Wallet Address</h3>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onCopy}
+              className="flex items-center gap-2"
+            >
+              {hasCopied ? (
+                <CheckIcon className="h-4 w-4" />
+              ) : (
+                <CopyIcon className="h-4 w-4" />
+              )}
+              {hasCopied ? "Copied!" : "Copy"}
+            </Button>
+          </div>
+          <p className="rounded bg-muted p-2 text-center font-mono text-sm">
+            {lessShortenedAddress}
+          </p>
+          <h3 className="font-semibold text-lg">Social Profiles</h3>
+          {profiles.isPending ? (
+            <p className="text-muted-foreground text-sm">Loading profiles...</p>
+          ) : !profiles.data?.length ? (
+            <p className="text-muted-foreground text-sm">No profiles found</p>
+          ) : (
+            profiles.data?.map((profile) => {
+              const walletAvatarLink = resolveSchemeWithErrorHandler({
+                client: props.client,
+                uri: profile.avatar,
+              });
+
+              return (
+                <div
+                  className="flex flex-row items-center gap-2"
+                  key={profile.type + profile.name}
+                >
+                  {walletAvatarLink && (
+                    <Avatar>
+                      <AvatarImage
+                        src={walletAvatarLink}
+                        alt={profile.name}
+                        className="object-cover"
+                      />
+                      {profile.name && (
+                        <AvatarFallback>
+                          {profile.name.slice(0, 2)}
+                        </AvatarFallback>
+                      )}
+                    </Avatar>
+                  )}
+                  <div className="flex w-full flex-col gap-1">
+                    <div className="flex w-full flex-row items-center justify-between gap-4">
+                      <h4 className="font-semibold text-md">{profile.name}</h4>
+                      <Badge variant="outline">{profile.type}</Badge>
+                    </div>
+                    {profile.bio && (
+                      <p className="line-clamp-1 whitespace-normal text-muted-foreground text-sm">
+                        {profile.bio}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
+
+function WalletAvatar(props: {
+  address: string;
+  profiles: SocialProfile[];
+  thirdwebClient: ThirdwebClient;
+  iconClassName?: string;
+}) {
+  const avatar = useMemo(() => {
+    return props.profiles.find(
+      (profile) =>
+        profile.avatar &&
+        (profile.avatar.startsWith("http") ||
+          profile.avatar.startsWith("ipfs")),
+    )?.avatar;
+  }, [props.profiles]);
+
+  const resolvedAvatarSrc = avatar
+    ? resolveSchemeWithErrorHandler({
+        client: props.thirdwebClient,
+        uri: avatar,
+      })
+    : undefined;
+
+  return (
+    <div
+      className={cn("size-6 overflow-hidden rounded-full", props.iconClassName)}
+    >
+      {resolvedAvatarSrc ? (
+        <Img
+          src={resolvedAvatarSrc}
+          className={cn("size-6 object-cover", props.iconClassName)}
+        />
+      ) : (
+        <Blobbie
+          address={props.address}
+          size={24}
+          className={props.iconClassName}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/color-mode-toggle.tsx b/apps/nebula/src/@/components/color-mode-toggle.tsx
new file mode 100644
index 00000000000..41dc2be94ba
--- /dev/null
+++ b/apps/nebula/src/@/components/color-mode-toggle.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { ClientOnly } from "@/components/blocks/client-only";
+import { Button } from "@/components/ui/button";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Skeleton } from "./ui/skeleton";
+
+export function ToggleThemeButton() {
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <ClientOnly
+      ssr={<Skeleton className="size-[34px] rounded-full border bg-accent" />}
+    >
+      <Button
+        variant="outline"
+        onClick={() => {
+          setTheme(theme === "dark" ? "light" : "dark");
+        }}
+        aria-label="Toggle theme"
+        className="h-auto w-auto rounded-full border border-border bg-background p-2"
+      >
+        {theme === "light" ? (
+          <SunIcon className="size-4" />
+        ) : (
+          <MoonIcon className="size-4" />
+        )}
+      </Button>
+    </ClientOnly>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/CopyTextButton.tsx b/apps/nebula/src/@/components/ui/CopyTextButton.tsx
new file mode 100644
index 00000000000..3d5993d9684
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/CopyTextButton.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { useClipboard } from "@/hooks/use-clipboard";
+import { cn } from "@/lib/utils";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { Button } from "./button";
+import { ToolTipLabel } from "./tooltip";
+
+export function CopyTextButton(props: {
+  textToShow: string;
+  textToCopy: string;
+  tooltip: string | undefined;
+  className?: string;
+  iconClassName?: string;
+  variant?:
+    | "primary"
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost";
+  copyIconPosition: "left" | "right";
+  onClick?: () => void;
+}) {
+  const { hasCopied, onCopy } = useClipboard(props.textToCopy, 1000);
+  const copyButton = hasCopied ? (
+    <CheckIcon
+      className={cn("size-3 shrink-0 text-green-500", props.iconClassName)}
+    />
+  ) : (
+    <CopyIcon
+      className={cn(
+        "size-3 shrink-0 text-muted-foreground",
+        props.iconClassName,
+      )}
+    />
+  );
+
+  return (
+    <ToolTipLabel label={props.tooltip}>
+      <Button
+        variant={props.variant || "outline"}
+        aria-label={props.tooltip}
+        className={cn(
+          "flex h-auto w-auto gap-2 rounded-lg px-1.5 py-0.5 font-normal text-foreground",
+          props.className,
+        )}
+        onClick={(e) => {
+          onCopy();
+          e.stopPropagation();
+          props.onClick?.();
+        }}
+      >
+        {props.copyIconPosition === "right" ? (
+          <>
+            <span className="min-w-0 truncate"> {props.textToShow} </span>
+            {copyButton}
+          </>
+        ) : (
+          <>
+            {copyButton}
+            <span className="min-w-0 truncate"> {props.textToShow} </span>
+          </>
+        )}
+      </Button>
+    </ToolTipLabel>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/DynamicHeight.tsx b/apps/nebula/src/@/components/ui/DynamicHeight.tsx
new file mode 100644
index 00000000000..144b592cf54
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/DynamicHeight.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
+import type React from "react";
+import { useRef, useState } from "react";
+
+export function DynamicHeight(props: {
+  children: React.ReactNode;
+  maxHeight?: string;
+  transition?: string;
+}) {
+  const { height, elementRef } = useHeightObserver();
+
+  return (
+    <div
+      style={{
+        height: height ? `${height}px` : "auto",
+        transition:
+          props.transition ||
+          "height 210ms cubic-bezier(0.175, 0.885, 0.32, 1.1)",
+        overflow: "hidden",
+        boxSizing: "border-box",
+      }}
+    >
+      <div
+        ref={elementRef}
+        style={{
+          maxHeight: props.maxHeight,
+        }}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+function useHeightObserver() {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | undefined>();
+
+  useIsomorphicLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      setHeight(element.scrollHeight);
+    });
+
+    resizeObserver.observe(element);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return { height, elementRef };
+}
diff --git a/apps/nebula/src/@/components/ui/NavLink.tsx b/apps/nebula/src/@/components/ui/NavLink.tsx
new file mode 100644
index 00000000000..2319a19d4c4
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/NavLink.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+// import { useTrack } from "hooks/analytics/useTrack";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export type NavButtonProps = {
+  className?: string;
+  activeClassName?: string;
+  href: string;
+  exactMatch?: boolean;
+  tracking?: {
+    category: string;
+    action: string;
+    label: string;
+  };
+  onClick?: () => void;
+};
+
+export function NavLink(props: React.PropsWithChildren<NavButtonProps>) {
+  // const track = useTrack();
+  const pathname = usePathname();
+  const isActive = pathname
+    ? props.exactMatch
+      ? pathname === props.href
+      : pathname.startsWith(props.href)
+    : false;
+  return (
+    <Link
+      href={props.href}
+      className={cn(props.className, isActive && props.activeClassName)}
+      target={props.href.startsWith("http") ? "_blank" : undefined}
+      prefetch={false}
+      onClick={() => {
+        props.onClick?.();
+        // if (props.tracking) {
+        //   track({
+        //     category: props.tracking.category,
+        //     action: props.tracking.action,
+        //     label: props.tracking.label,
+        //     url: props.href,
+        //   });
+        // }
+      }}
+    >
+      {props.children}
+    </Link>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/ScrollShadow/ScrollShadow.module.css b/apps/nebula/src/@/components/ui/ScrollShadow/ScrollShadow.module.css
new file mode 100644
index 00000000000..29638d30d84
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/ScrollShadow/ScrollShadow.module.css
@@ -0,0 +1,36 @@
+.scrollShadowY {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 32px;
+  pointer-events: none;
+}
+
+.scrollShadowX {
+  position: absolute;
+  top: 0;
+  width: 32px;
+  height: 100%;
+  pointer-events: none;
+}
+
+.scrollShadowTop {
+  top: 0;
+  background: linear-gradient(to bottom, var(--shadow), transparent);
+  opacity: 0;
+}
+
+.scrollShadowBottom {
+  bottom: 0;
+  background: linear-gradient(to top, var(--shadow), transparent);
+}
+
+.scrollShadowLeft {
+  left: 0;
+  background: linear-gradient(to right, var(--shadow), transparent);
+}
+
+.scrollShadowRight {
+  right: 0;
+  background: linear-gradient(to left, var(--shadow), transparent);
+}
diff --git a/apps/nebula/src/@/components/ui/ScrollShadow/ScrollShadow.tsx b/apps/nebula/src/@/components/ui/ScrollShadow/ScrollShadow.tsx
new file mode 100644
index 00000000000..85f605ce09a
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/ScrollShadow/ScrollShadow.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
+import { cn } from "@/lib/utils";
+import { useRef } from "react";
+import styles from "./ScrollShadow.module.css";
+
+export function ScrollShadow(props: {
+  children: React.ReactNode;
+  className?: string;
+  scrollableClassName?: string;
+  disableTopShadow?: boolean;
+  shadowColor?: string;
+  shadowClassName?: string;
+}) {
+  const scrollableEl = useRef<HTMLDivElement>(null);
+  const shadowTopEl = useRef<HTMLDivElement>(null);
+  const shadowBottomEl = useRef<HTMLDivElement>(null);
+  const shadowLeftEl = useRef<HTMLDivElement>(null);
+  const shadowRightEl = useRef<HTMLDivElement>(null);
+  const wrapperEl = useRef<HTMLDivElement>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    const content = scrollableEl.current;
+    const shadowTop = shadowTopEl.current;
+    const shadowBottom = shadowBottomEl.current;
+    const wrapper = wrapperEl.current;
+    const shadowLeft = shadowLeftEl.current;
+    const shadowRight = shadowRightEl.current;
+
+    if (!content || !shadowTop || !shadowBottom || !wrapper) {
+      return;
+    }
+
+    function handleScroll() {
+      if (
+        !content ||
+        !shadowTop ||
+        !shadowBottom ||
+        !shadowLeft ||
+        !shadowRight ||
+        !wrapper
+      ) {
+        return;
+      }
+
+      const contentScrollHeight = content.scrollHeight - wrapper.offsetHeight;
+      const contentScrollWidth = content.scrollWidth - wrapper.offsetWidth;
+
+      if (contentScrollHeight > 10) {
+        const currentScroll = content.scrollTop / contentScrollHeight;
+        shadowTop.style.opacity = `${currentScroll}`;
+        shadowBottom.style.opacity = `${1 - currentScroll}`;
+      } else {
+        shadowTop.style.opacity = "0";
+        shadowBottom.style.opacity = "0";
+      }
+
+      if (contentScrollWidth > 10) {
+        const currentScrollX = content.scrollLeft / contentScrollWidth;
+        shadowLeft.style.opacity = `${currentScrollX}`;
+        shadowRight.style.opacity = `${1 - currentScrollX}`;
+      } else {
+        shadowLeft.style.opacity = "0";
+        shadowRight.style.opacity = "0";
+      }
+    }
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        handleScroll();
+      });
+    });
+    content.addEventListener("scroll", handleScroll);
+
+    const resizeObserver = new ResizeObserver(() => {
+      handleScroll();
+    });
+
+    resizeObserver.observe(content);
+    return () => {
+      content.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  return (
+    <div
+      className={cn(props.className, "relative overflow-hidden")}
+      ref={wrapperEl}
+      style={
+        {
+          "--shadow": props.shadowColor || "hsl(var(--muted))",
+        } as React.CSSProperties
+      }
+    >
+      <div
+        className={cn(
+          styles.scrollShadowTop,
+          styles.scrollShadowY,
+          props.shadowClassName,
+        )}
+        ref={shadowTopEl}
+        style={{
+          opacity: "0",
+          display: props.disableTopShadow ? "none" : "block",
+        }}
+      />
+      <div
+        className={cn(
+          styles.scrollShadowBottom,
+          styles.scrollShadowY,
+          props.shadowClassName,
+        )}
+        ref={shadowBottomEl}
+        style={{
+          opacity: "0",
+        }}
+      />
+      <div
+        className={cn(
+          styles.scrollShadowLeft,
+          styles.scrollShadowX,
+          props.shadowClassName,
+        )}
+        ref={shadowLeftEl}
+        style={{
+          opacity: "0",
+        }}
+      />
+      <div
+        className={cn(
+          styles.scrollShadowRight,
+          styles.scrollShadowX,
+          props.shadowClassName,
+        )}
+        ref={shadowRightEl}
+        style={{
+          opacity: "0",
+        }}
+      />
+      <div
+        className={cn("no-scrollbar overflow-auto", props.scrollableClassName)}
+        ref={scrollableEl}
+        data-scrollable
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/Spinner/Spinner.module.css b/apps/nebula/src/@/components/ui/Spinner/Spinner.module.css
new file mode 100644
index 00000000000..622a43a8a79
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/Spinner/Spinner.module.css
@@ -0,0 +1,38 @@
+.loader {
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite;
+  animation: rotate 2s linear infinite;
+}
+
+.loader circle {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 4px solid #fff;
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
diff --git a/apps/nebula/src/@/components/ui/Spinner/Spinner.tsx b/apps/nebula/src/@/components/ui/Spinner/Spinner.tsx
new file mode 100644
index 00000000000..c1f7d59f39d
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/Spinner/Spinner.tsx
@@ -0,0 +1,21 @@
+import { cn } from "../../../lib/utils";
+import style from "./Spinner.module.css";
+
+export function Spinner(props: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 50 50"
+      className={cn(style.loader, props.className || "size-4")}
+    >
+      <title>loading</title>
+      <circle
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+    </svg>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/avatar.tsx b/apps/nebula/src/@/components/ui/avatar.tsx
new file mode 100644
index 00000000000..9b121d26b7a
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/nebula/src/@/components/ui/badge.tsx b/apps/nebula/src/@/components/ui/badge.tsx
new file mode 100644
index 00000000000..078708826de
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/badge.tsx
@@ -0,0 +1,39 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 leading-4",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary/20 text-primary",
+        secondary:
+          "border-transparent bg-accent text-accent-foreground hover:bg-accent/80",
+        destructive:
+          "border-transparent dark:bg-red-950 dark:text-red-400 bg-red-500/20 text-red-800",
+        warning:
+          "border-transparent dark:bg-yellow-600/20 dark:text-yellow-500 bg-yellow-500/20 text-yellow-900",
+        outline: "text-foreground",
+        success:
+          "border-transparent dark:bg-green-950/50 dark:text-green-400 bg-green-200 text-green-950",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/apps/nebula/src/@/components/ui/button.stories.tsx b/apps/nebula/src/@/components/ui/button.stories.tsx
new file mode 100644
index 00000000000..0ff7fd2149f
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/button.stories.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/components/ui/button";
+import { BadgeContainer } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { StarIcon } from "lucide-react";
+
+const meta = {
+  title: "Shadcn/Buttons",
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllVariants: Story = {
+  args: {},
+};
+
+function Component() {
+  return (
+    <div className="flex min-h-dvh flex-col gap-6 bg-background p-6 text-foreground">
+      <Variants size="default" />
+      <Variants size="sm" />
+      <Variants size="icon" />
+      <Variants size="lg" />
+    </div>
+  );
+}
+
+function Variants(props: {
+  size: "default" | "icon" | "sm" | "lg";
+}) {
+  return (
+    <BadgeContainer label={`Size: ${props.size}`}>
+      <div className="flex gap-6">
+        <Button size={props.size}>
+          {props.size === "icon" ? <StarIcon className="size-4" /> : "Default"}
+        </Button>
+        <Button variant="primary" size={props.size}>
+          {props.size === "icon" ? <StarIcon className="size-4" /> : "Primary"}
+        </Button>
+        <Button variant="secondary" size={props.size}>
+          {props.size === "icon" ? (
+            <StarIcon className="size-4" />
+          ) : (
+            "Secondary"
+          )}
+        </Button>
+        <Button variant="ghost" size={props.size}>
+          {props.size === "icon" ? <StarIcon className="size-4" /> : "Ghost"}
+        </Button>
+        <Button variant="outline" size={props.size}>
+          {props.size === "icon" ? <StarIcon className="size-4" /> : "Outline"}
+        </Button>
+        <Button variant="destructive" size={props.size}>
+          {props.size === "icon" ? (
+            <StarIcon className="size-4" />
+          ) : (
+            "Destructive"
+          )}
+        </Button>
+      </div>
+    </BadgeContainer>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/button.tsx b/apps/nebula/src/@/components/ui/button.tsx
new file mode 100644
index 00000000000..cb4966e89df
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/button.tsx
@@ -0,0 +1,84 @@
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary hover:bg-primary/90 text-primary-foreground ",
+        default: "bg-foreground text-background hover:bg-foreground/90",
+        destructive:
+          "bg-destructive hover:bg-destructive/90 text-destructive-foreground ",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary hover:bg-secondary/80 text-secondary-foreground ",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline",
+        pink: "border border-nebula-pink-foreground !text-nebula-pink-foreground bg-[hsl(var(--nebula-pink-foreground)/5%)] hover:bg-nebula-pink-foreground/10 dark:!text-foreground dark:bg-nebula-pink-foreground/10 dark:hover:bg-nebula-pink-foreground/20",
+        upsell:
+          "bg-green-600 text-white hover:bg-green-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    // "button" elements automatically handle the `disabled` attribute.
+    // For non-button elements rendered via `asChild` (e.g. <a>), we still want
+    // to visually convey the disabled state and prevent user interaction.
+    // We do that by conditionally adding the same utility classes that the
+    // `disabled:` pseudo-variant would normally apply and by setting
+    // `aria-disabled` for accessibility.
+    const disabledClass = disabled ? "pointer-events-none opacity-50" : "";
+
+    const btnOnlyProps =
+      Comp === "button"
+        ? {
+            type:
+              (props as React.ButtonHTMLAttributes<HTMLButtonElement>).type ||
+              ("button" as const),
+          }
+        : undefined;
+
+    return (
+      <Comp
+        className={cn(
+          buttonVariants({ variant, size, className }),
+          disabledClass,
+        )}
+        ref={ref}
+        aria-disabled={disabled ? true : undefined}
+        disabled={disabled}
+        {...props}
+        {...btnOnlyProps}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/apps/nebula/src/@/components/ui/code/CodeBlockContainer.tsx b/apps/nebula/src/@/components/ui/code/CodeBlockContainer.tsx
new file mode 100644
index 00000000000..6e3d35ab645
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/code/CodeBlockContainer.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useClipboard } from "@/hooks/use-clipboard";
+import { cn } from "@/lib/utils";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { ScrollShadow } from "../ScrollShadow/ScrollShadow";
+import { Button } from "../button";
+
+export function CodeBlockContainer(props: {
+  codeToCopy: string;
+  children: React.ReactNode;
+  className?: string;
+  scrollableClassName?: string;
+  scrollableContainerClassName?: string;
+  copyButtonClassName?: string;
+  shadowColor?: string;
+  onCopy?: (code: string) => void;
+}) {
+  const { hasCopied, onCopy } = useClipboard(props.codeToCopy);
+
+  return (
+    <div
+      className={cn(
+        "group relative max-w-full overflow-hidden rounded-lg border border-border bg-card",
+        props.className,
+      )}
+    >
+      <ScrollShadow
+        scrollableClassName={cn("p-4", props.scrollableClassName)}
+        className={cn(
+          "text-xs md:text-sm [&_*]:leading-relaxed",
+          props.scrollableContainerClassName,
+        )}
+        shadowColor={props.shadowColor || "hsl(var(--muted))"}
+      >
+        {props.children}
+      </ScrollShadow>
+
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={() => {
+          onCopy();
+          props.onCopy?.(props.codeToCopy);
+        }}
+        aria-label={hasCopied ? "Copied" : "Copy code to clipboard"}
+        title={hasCopied ? "Copied" : "Copy"}
+        className={cn(
+          "absolute top-3.5 right-3.5 h-auto bg-background p-2",
+          props.copyButtonClassName,
+        )}
+      >
+        {hasCopied ? (
+          <CheckIcon className="size-3 text-green-500" />
+        ) : (
+          <CopyIcon className="size-3 text-muted-foreground" />
+        )}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/code/RenderCode.tsx b/apps/nebula/src/@/components/ui/code/RenderCode.tsx
new file mode 100644
index 00000000000..29216115e3c
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/code/RenderCode.tsx
@@ -0,0 +1,29 @@
+import { CodeBlockContainer } from "./CodeBlockContainer";
+
+export function RenderCode(props: {
+  code: string;
+  html: string;
+  className?: string;
+  scrollableClassName?: string;
+  copyButtonClassName?: string;
+  scrollableContainerClassName?: string;
+  shadowColor?: string;
+  onCopy?: (code: string) => void;
+}) {
+  return (
+    <CodeBlockContainer
+      codeToCopy={props.code}
+      className={props.className}
+      copyButtonClassName={props.copyButtonClassName}
+      scrollableClassName={props.scrollableClassName}
+      scrollableContainerClassName={props.scrollableContainerClassName}
+      shadowColor={props.shadowColor}
+      onCopy={props.onCopy}
+    >
+      <div
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: we know what we're doing here
+        dangerouslySetInnerHTML={{ __html: props.html }}
+      />
+    </CodeBlockContainer>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/code/code.client.tsx b/apps/nebula/src/@/components/ui/code/code.client.tsx
new file mode 100644
index 00000000000..907d89b85c7
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/code/code.client.tsx
@@ -0,0 +1,71 @@
+"use client";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import type { BundledLanguage } from "shiki";
+import { RenderCode } from "./RenderCode";
+import { getCodeHtml } from "./getCodeHtml";
+import { PlainTextCodeBlock } from "./plaintext-code";
+
+export type CodeProps = {
+  code: string;
+  lang: BundledLanguage;
+  className?: string;
+  scrollableClassName?: string;
+  keepPreviousDataOnCodeChange?: boolean;
+  copyButtonClassName?: string;
+  scrollableContainerClassName?: string;
+  shadowColor?: string;
+  ignoreFormattingErrors?: boolean;
+  onCopy?: (code: string) => void;
+};
+
+export const CodeClient: React.FC<CodeProps> = ({
+  code,
+  lang,
+  className,
+  scrollableClassName,
+  keepPreviousDataOnCodeChange = false,
+  copyButtonClassName,
+  ignoreFormattingErrors,
+  scrollableContainerClassName,
+  shadowColor,
+  onCopy,
+}) => {
+  const codeQuery = useQuery({
+    queryKey: ["getCodeHtml", code, lang],
+    queryFn: () =>
+      getCodeHtml(code, lang, {
+        ignoreFormattingErrors: ignoreFormattingErrors,
+      }),
+    placeholderData: keepPreviousDataOnCodeChange
+      ? keepPreviousData
+      : undefined,
+    retry: false,
+  });
+
+  if (!codeQuery.data) {
+    return (
+      <PlainTextCodeBlock
+        code={code}
+        className={className}
+        scrollableClassName={scrollableClassName}
+        copyButtonClassName={copyButtonClassName}
+        scrollableContainerClassName={scrollableContainerClassName}
+        shadowColor={shadowColor}
+        onCopy={onCopy}
+      />
+    );
+  }
+
+  return (
+    <RenderCode
+      code={codeQuery.data.formattedCode}
+      html={codeQuery.data.html}
+      className={className}
+      scrollableClassName={scrollableClassName}
+      copyButtonClassName={copyButtonClassName}
+      scrollableContainerClassName={scrollableContainerClassName}
+      shadowColor={shadowColor}
+      onCopy={onCopy}
+    />
+  );
+};
diff --git a/apps/nebula/src/@/components/ui/code/code.stories.tsx b/apps/nebula/src/@/components/ui/code/code.stories.tsx
new file mode 100644
index 00000000000..4e23bdb3a14
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/code/code.stories.tsx
@@ -0,0 +1,108 @@
+import { BadgeContainer } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { CodeClient } from "./code.client";
+
+const meta = {
+  title: "code/lang",
+  component: Component,
+  parameters: {},
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+const tsCode = `\
+type User = {
+  name: string;
+  age: number;
+}
+
+function logUser(user: User) {
+  console.log(user)
+}
+`;
+
+const jsCode = `\
+import { getContract } from "thirdweb";
+import { sepolia } from "thirdweb/chains";
+import { getOwnedNFTs } from "thirdweb/extensions/erc1155";
+
+const contract = getContract({
+  client,
+  address: "0x1234...",
+  chain: sepolia,
+});
+`;
+
+const jsxCode = `\
+import { ThirdwebProvider } from "thirdweb/react";
+
+function Main() {
+  return (
+    <ThirdwebProvider>
+      <App />
+    </ThirdwebProvider>
+  );
+}`;
+
+const tsxCode = `\
+type User = {
+  name: string;
+  age: number;
+}
+
+function UserInfo(props: { user: User }) {
+  return <div> {props.user.name} </div>
+}
+`;
+
+const tsxCodeWithFormError = `\
+// This piece of code has invalid syntax and can't be formatted by prettier
+// this should not crash the page - and be rendered as is without formatting
+// the format error is logged in console
+
+type User = // missing { here
+  name: string;
+  age: number;
+}
+
+function UserInfo(props: { user: User }) {
+  return <div> {props.user.name} </div>
+}
+`;
+
+const bashCode = "pnpm i thirdweb";
+
+function Component() {
+  return (
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
+      <BadgeContainer label="ts">
+        <CodeClient code={tsCode} lang="ts" />
+      </BadgeContainer>
+
+      <BadgeContainer label="js">
+        <CodeClient code={jsCode} lang="js" />
+      </BadgeContainer>
+
+      <BadgeContainer label="bash">
+        <CodeClient code={bashCode} lang="bash" />
+      </BadgeContainer>
+
+      <BadgeContainer label="jsx">
+        <CodeClient code={jsxCode} lang="jsx" />
+      </BadgeContainer>
+
+      <BadgeContainer label="tsx">
+        <CodeClient code={tsxCode} lang="tsx" />
+      </BadgeContainer>
+
+      <BadgeContainer label="tsx">
+        <CodeClient code={tsxCodeWithFormError} lang="tsx" />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/code/getCodeHtml.tsx b/apps/nebula/src/@/components/ui/code/getCodeHtml.tsx
new file mode 100644
index 00000000000..8750ec2819d
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/code/getCodeHtml.tsx
@@ -0,0 +1,52 @@
+import * as parserBabel from "prettier/plugins/babel";
+import { format } from "prettier/standalone";
+import { type BundledLanguage, codeToHtml } from "shiki";
+
+function isPrettierSupportedLang(lang: BundledLanguage) {
+  return (
+    lang === "js" ||
+    lang === "jsx" ||
+    lang === "ts" ||
+    lang === "tsx" ||
+    lang === "javascript" ||
+    lang === "typescript"
+  );
+}
+
+export async function getCodeHtml(
+  code: string,
+  lang: BundledLanguage,
+  options?: {
+    ignoreFormattingErrors?: boolean;
+  },
+) {
+  const estreePlugin = await import("prettier/plugins/estree");
+  const formattedCode = isPrettierSupportedLang(lang)
+    ? await format(code, {
+        parser: "babel-ts",
+        plugins: [parserBabel, estreePlugin.default],
+        printWidth: 60,
+      }).catch((e) => {
+        if (!options?.ignoreFormattingErrors) {
+          console.error(e);
+          console.error("Failed to format code");
+          console.log({
+            code,
+            lang,
+          });
+        }
+
+        return code;
+      })
+    : code;
+
+  const html = await codeToHtml(formattedCode, {
+    lang: lang,
+    themes: {
+      light: "github-light",
+      dark: "github-dark-default",
+    },
+  });
+
+  return { html, formattedCode };
+}
diff --git a/apps/nebula/src/@/components/ui/code/plaintext-code.stories.tsx b/apps/nebula/src/@/components/ui/code/plaintext-code.stories.tsx
new file mode 100644
index 00000000000..6a80fe68439
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/code/plaintext-code.stories.tsx
@@ -0,0 +1,45 @@
+import { BadgeContainer } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { PlainTextCodeBlock } from "./plaintext-code";
+
+const meta = {
+  title: "code/plaintext",
+  component: Component,
+  parameters: {},
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+const jsCode = `\
+import { getContract } from "thirdweb";
+import { sepolia } from "thirdweb/chains";
+import { getOwnedNFTs } from "thirdweb/extensions/erc1155";
+
+const contract = getContract({
+  client,
+  address: "0x1234...",
+  chain: sepolia,
+});
+`;
+
+const overflowText =
+  "123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz";
+
+function Component() {
+  return (
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
+      <BadgeContainer label="large chunk of code">
+        <PlainTextCodeBlock code={jsCode} />
+      </BadgeContainer>
+
+      <BadgeContainer label="overflow test">
+        <PlainTextCodeBlock code={overflowText} />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/code/plaintext-code.tsx b/apps/nebula/src/@/components/ui/code/plaintext-code.tsx
new file mode 100644
index 00000000000..b1b05b0c22d
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/code/plaintext-code.tsx
@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+import { CodeBlockContainer } from "./CodeBlockContainer";
+
+export function PlainTextCodeBlock(props: {
+  code: string;
+  copyButtonClassName?: string;
+  className?: string;
+  scrollableClassName?: string;
+  codeClassName?: string;
+  scrollableContainerClassName?: string;
+  shadowColor?: string;
+  onCopy?: (code: string) => void;
+}) {
+  return (
+    <CodeBlockContainer
+      codeToCopy={props.code}
+      className={props.className}
+      copyButtonClassName={props.copyButtonClassName}
+      scrollableClassName={props.scrollableClassName}
+      scrollableContainerClassName={props.scrollableContainerClassName}
+      shadowColor={props.shadowColor}
+      onCopy={props.onCopy}
+    >
+      <code className={cn("block whitespace-pre", props.codeClassName)}>
+        {props.code}
+      </code>
+    </CodeBlockContainer>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/decimal-input.tsx b/apps/nebula/src/@/components/ui/decimal-input.tsx
new file mode 100644
index 00000000000..ed3b7be6591
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/decimal-input.tsx
@@ -0,0 +1,39 @@
+import { Input } from "./input";
+export function DecimalInput(props: {
+  value: string;
+  onChange: (value: string) => void;
+  maxValue?: number;
+  id?: string;
+  className?: string;
+  placeholder?: string;
+  disabled?: boolean;
+}) {
+  return (
+    <Input
+      id={props.id}
+      type="text"
+      value={props.value}
+      className={props.className}
+      inputMode="decimal"
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      onChange={(e) => {
+        const number = Number(e.target.value);
+        // ignore if string becomes invalid number
+        if (Number.isNaN(number)) {
+          return;
+        }
+        if (props.maxValue && number > props.maxValue) {
+          return;
+        }
+        // replace leading multiple zeros with single zero
+        let cleanedValue = e.target.value.replace(/^0+/, "0");
+        // replace leading zero before decimal point
+        if (!cleanedValue.includes(".")) {
+          cleanedValue = cleanedValue.replace(/^0+/, "");
+        }
+        props.onChange(cleanedValue || "0");
+      }}
+    />
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/dialog.tsx b/apps/nebula/src/@/components/ui/dialog.tsx
new file mode 100644
index 00000000000..df91afb5a27
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/dialog.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    dialogOverlayClassName?: string;
+    dialogCloseClassName?: string;
+  }
+>(({ className, children, ...props }, ref) => {
+  const { dialogOverlayClassName, dialogCloseClassName, ...restProps } = props;
+  return (
+    <DialogPortal>
+      <DialogOverlay className={dialogOverlayClassName} />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed z-50 grid w-full gap-4 rounded-t-xl border border-border bg-background p-6 shadow-lg duration-300 md:max-w-lg md:rounded-lg",
+          // on mobile - put the dialog at the bottom of the screen, animate - slide up and fade in
+          "right-0 bottom-0 left-0",
+          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          // on desktop - vertically and horizontally center the dialog, animate - zoom and fade in
+          "md:top-[50%] md:bottom-auto md:left-[50%] md:translate-x-[-50%] md:translate-y-[-50%] ",
+          "md:data-[state=closed]:zoom-out-95 md:data-[state=open]:zoom-in-95 ",
+          "md:data-[state=closed]:slide-out-to-left-1/2 md:data-[state=closed]:slide-out-to-top-[48%] ",
+          "md:data-[state=open]:slide-in-from-left-1/2 md:data-[state=open]:slide-in-from-top-[48%] ",
+          "data-[state=closed]:animate-out data-[state=open]:animate-in",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          className,
+        )}
+        {...restProps}
+      >
+        {children}
+        <DialogPrimitive.Close
+          className={cn(
+            "absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+            dialogCloseClassName,
+          )}
+        >
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-left", className)}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "font-semibold text-lg leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/apps/nebula/src/@/components/ui/form.tsx b/apps/nebula/src/@/components/ui/form.tsx
new file mode 100644
index 00000000000..23e760c1bb9
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/form.tsx
@@ -0,0 +1,203 @@
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import { ToolTipLabel } from "./tooltip";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive-text", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const RequiredFormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <ToolTipLabel label="Required">
+      <Label
+        ref={ref}
+        className={cn(error && "text-destructive-text", "relative", className)}
+        htmlFor={formItemId}
+        {...props}
+      >
+        {props.children}
+        <span className="-top-1.5 -right-2 absolute text-destructive-text">
+          •
+        </span>
+      </Label>
+    </ToolTipLabel>
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("font-medium text-destructive-text text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  RequiredFormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/apps/nebula/src/@/components/ui/hover-card.tsx b/apps/nebula/src/@/components/ui/hover-card.tsx
new file mode 100644
index 00000000000..c780522e55c
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className,
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/apps/dashboard/src/@/components/ui/image-upload-button.tsx b/apps/nebula/src/@/components/ui/image-upload-button.tsx
similarity index 100%
rename from apps/dashboard/src/@/components/ui/image-upload-button.tsx
rename to apps/nebula/src/@/components/ui/image-upload-button.tsx
diff --git a/apps/nebula/src/@/components/ui/inline-code.tsx b/apps/nebula/src/@/components/ui/inline-code.tsx
new file mode 100644
index 00000000000..e7e9765242e
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/inline-code.tsx
@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+
+export function InlineCode({
+  code,
+  className,
+}: { code: string; className?: string }) {
+  return (
+    <code
+      className={cn(
+        "mx-0.5 inline rounded-lg border border-border bg-muted px-[0.4em] py-[0.25em] font-mono text-[0.85em] text-foreground",
+        className,
+      )}
+    >
+      {code}
+    </code>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/input.tsx b/apps/nebula/src/@/components/ui/input.tsx
new file mode 100644
index 00000000000..37529a8f2df
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-foreground/10 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:selection:bg-foreground/20",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/apps/nebula/src/@/components/ui/label.tsx b/apps/nebula/src/@/components/ui/label.tsx
new file mode 100644
index 00000000000..663ca2319ef
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/apps/nebula/src/@/components/ui/popover.tsx b/apps/nebula/src/@/components/ui/popover.tsx
new file mode 100644
index 00000000000..b93e60dd6b5
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/apps/nebula/src/@/components/ui/select.stories.tsx b/apps/nebula/src/@/components/ui/select.stories.tsx
new file mode 100644
index 00000000000..fbd0dc2ccb7
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/select.stories.tsx
@@ -0,0 +1,79 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { BadgeContainer } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+
+const meta = {
+  title: "Shadcn/Select",
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllVariants: Story = {
+  args: {},
+};
+
+function randomName() {
+  return Math.random().toString(36).substring(7);
+}
+
+function Component() {
+  return (
+    <div className="flex min-h-dvh flex-col gap-10 bg-background p-6 text-foreground">
+      <BadgeContainer label="5 items, no placeholder, no label, value filled">
+        <SelectDemo listItems={5} selectFirst />
+      </BadgeContainer>
+
+      <BadgeContainer label="50 items, no placeholder, no label, value filled">
+        <SelectDemo listItems={50} selectFirst />
+      </BadgeContainer>
+
+      <BadgeContainer label="5 items, no placeholder, no label, no value">
+        <SelectDemo listItems={5} />
+      </BadgeContainer>
+
+      <BadgeContainer label="5 items, placeholder, no label, no value">
+        <SelectDemo listItems={5} placeholder="some placeholder" />
+      </BadgeContainer>
+    </div>
+  );
+}
+
+function SelectDemo(props: {
+  listItems: number;
+  placeholder?: string;
+  label?: string;
+  selectFirst?: boolean;
+}) {
+  const listItems = Array.from({ length: props.listItems }, () => randomName());
+
+  return (
+    <Select value={props.selectFirst ? listItems[0] : undefined}>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder={props.placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {props.label && <SelectLabel> {props.label}</SelectLabel>}
+
+          {listItems.map((item) => {
+            return (
+              <SelectItem key={item} value={item}>
+                {item}
+              </SelectItem>
+            );
+          })}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/select.tsx b/apps/nebula/src/@/components/ui/select.tsx
new file mode 100644
index 00000000000..5447dec4bc3
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/select.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    chevronClassName?: string;
+  }
+>(({ className, children, chevronClassName, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDownIcon className={cn("h-4 w-4 opacity-50", chevronClassName)} />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+// const SelectScrollUpButton = React.forwardRef<
+//   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+//   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+// >(({ className, ...props }, ref) => (
+//   <SelectPrimitive.ScrollUpButton
+//     ref={ref}
+//     className={cn(
+//       "flex cursor-default items-center justify-center py-1",
+//       className,
+//     )}
+//     {...props}
+//   >
+//     <ChevronUp className="h-4 w-4" />
+//   </SelectPrimitive.ScrollUpButton>
+// ));
+// SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+// const SelectScrollDownButton = React.forwardRef<
+//   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+//   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+// >(({ className, ...props }, ref) => (
+//   <SelectPrimitive.ScrollDownButton
+//     ref={ref}
+//     className={cn(
+//       "flex cursor-default items-center justify-center py-1",
+//       className,
+//     )}
+//     {...props}
+//   >
+//     <ChevronDown className="h-4 w-4" />
+//   </SelectPrimitive.ScrollDownButton>
+// ));
+// SelectScrollDownButton.displayName =
+//   SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
+        position === "popper" &&
+          "data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      {/* <SelectScrollUpButton /> */}
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      {/* <SelectScrollDownButton /> */}
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pr-2 pl-8 font-semibold text-sm", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  // SelectScrollUpButton,
+  // SelectScrollDownButton,
+};
diff --git a/apps/nebula/src/@/components/ui/separator.tsx b/apps/nebula/src/@/components/ui/separator.tsx
new file mode 100644
index 00000000000..3cc446d24c2
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/apps/nebula/src/@/components/ui/sheet.tsx b/apps/nebula/src/@/components/ui/sheet.tsx
new file mode 100644
index 00000000000..f861b3caadd
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/sheet.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps, cva } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm border-border opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <XIcon className="size-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 border-border text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse border-border sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn(
+      "border-border font-semibold text-foreground text-lg",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("border-border text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/apps/nebula/src/@/components/ui/skeleton.tsx b/apps/nebula/src/@/components/ui/skeleton.tsx
new file mode 100644
index 00000000000..17bd1f3ec02
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/skeleton.tsx
@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-skeleton rounded-md bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+function SkeletonContainer<T>(props: {
+  loadedData?: T;
+  skeletonData: T;
+  className?: string;
+  render: (data: T) => React.ReactNode;
+  style?: React.CSSProperties;
+}) {
+  const isLoading = props.loadedData === undefined;
+  return (
+    <div
+      style={props.style}
+      aria-hidden={isLoading ? "true" : "false"}
+      className={cn(
+        isLoading && "inline-block animate-pulse rounded-lg bg-muted",
+        props.className,
+      )}
+    >
+      <div className={cn(isLoading && "invisible")}>
+        <div
+          className={cn(
+            "transition-opacity duration-300",
+            isLoading ? "opacity-0" : "opacity-100",
+          )}
+        >
+          {props.render(
+            props.loadedData === undefined
+              ? props.skeletonData
+              : props.loadedData,
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { Skeleton, SkeletonContainer };
diff --git a/apps/nebula/src/@/components/ui/sonner.tsx b/apps/nebula/src/@/components/ui/sonner.tsx
new file mode 100644
index 00000000000..ff1623b3354
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg group-[.toaster]:border",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
diff --git a/apps/nebula/src/@/components/ui/switch.tsx b/apps/nebula/src/@/components/ui/switch.tsx
new file mode 100644
index 00000000000..071de9b0cbd
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-foreground data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/apps/nebula/src/@/components/ui/table.stories.tsx b/apps/nebula/src/@/components/ui/table.stories.tsx
new file mode 100644
index 00000000000..e0a216e9927
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/table.stories.tsx
@@ -0,0 +1,143 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import { BadgeContainer } from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import Link from "next/link";
+import { Badge } from "./badge";
+
+const meta = {
+  title: "Shadcn/Table",
+  component: Component,
+} satisfies Meta<typeof Component>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  args: {},
+};
+
+function Component() {
+  return (
+    <div className="container flex max-w-6xl flex-col gap-10 py-10">
+      <BadgeContainer label="Normal">
+        <TableDemo />
+      </BadgeContainer>
+
+      <BadgeContainer label="Clickable Row">
+        <TableDemo linkBox />
+      </BadgeContainer>
+
+      <BadgeContainer label="With Footer">
+        <TableDemo footer />
+      </BadgeContainer>
+    </div>
+  );
+}
+
+type Invoice = {
+  invoice: string;
+  paymentStatus: string;
+  totalAmount: string;
+  paymentMethod: string;
+};
+
+const invoices: Invoice[] = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+];
+
+function TableDemo(props: {
+  footer?: boolean;
+  linkBox?: boolean;
+}) {
+  return (
+    <TableContainer>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">Invoice</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Method</TableHead>
+            <TableHead className="text-right">Amount</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {invoices.map((invoice) => (
+            <TableRow
+              key={invoice.invoice}
+              linkBox={props.linkBox}
+              className={cn(
+                props.linkBox && "cursor-pointer hover:bg-accent/50",
+              )}
+            >
+              <TableCell className="font-medium">
+                <Link
+                  href={`/invoices/${invoice.invoice}`}
+                  className={cn(
+                    props.linkBox && "before:absolute before:inset-0",
+                  )}
+                >
+                  {invoice.invoice}
+                </Link>
+              </TableCell>
+              <TableCell>
+                <Badge>{invoice.paymentStatus}</Badge>
+              </TableCell>
+              <TableCell>{invoice.paymentMethod}</TableCell>
+              <TableCell className="text-right">
+                {invoice.totalAmount}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+
+        {props.footer && (
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={3}>Total</TableCell>
+              <TableCell className="text-right">$2,500.00</TableCell>
+            </TableRow>
+          </TableFooter>
+        )}
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/table.tsx b/apps/nebula/src/@/components/ui/table.tsx
new file mode 100644
index 00000000000..5c586685eaf
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/table.tsx
@@ -0,0 +1,156 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <table
+    ref={ref}
+    className={cn(
+      "w-full caption-bottom border-collapse align-top text-sm lining-nums tabular-nums",
+      className,
+    )}
+    {...props}
+  />
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={cn("relative border-b bg-background", className)}
+    {...props}
+  />
+));
+
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-border border-t bg-card font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement> & {
+    /**
+     * Contain the absolutely position elements inside the row with position:relative + transform:translate(0)
+     * transform:translate(0) is required because position:relative on tr element does not work on webkit
+     */
+    linkBox?: boolean;
+  }
+>(({ className, linkBox, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-border border-b last:border-0 data-[state=selected]:bg-muted",
+      linkBox && "relative translate-x-0 translate-y-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "px-6 py-4 text-left align-middle font-medium text-muted-foreground text-xs uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "px-6 py-4 text-start align-middle text-sm [&:has([role=checkbox])]:pr-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("py-4 text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
+
+function TableContainer(props: {
+  children: React.ReactNode;
+  className?: string;
+  scrollableContainerClassName?: string;
+}) {
+  return (
+    <ScrollShadow
+      shadowClassName="z-30"
+      disableTopShadow
+      className={cn(
+        "relative whitespace-nowrap rounded-lg border border-border bg-card",
+        props.className,
+      )}
+      scrollableClassName={props.scrollableContainerClassName}
+      shadowColor="hsl(var(--muted))"
+    >
+      {props.children}
+    </ScrollShadow>
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+  TableContainer,
+};
diff --git a/apps/nebula/src/@/components/ui/tabs.tsx b/apps/nebula/src/@/components/ui/tabs.tsx
new file mode 100644
index 00000000000..0fe8f90b0cd
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/tabs.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { useCallback, useRef, useState } from "react";
+import { ScrollShadow } from "./ScrollShadow/ScrollShadow";
+import { Button } from "./button";
+import { ToolTipLabel } from "./tooltip";
+
+export type TabLink = {
+  name: React.ReactNode;
+  href: string;
+  isActive: boolean;
+  isDisabled?: boolean;
+};
+
+export function TabLinks(props: {
+  links: TabLink[];
+  className?: string;
+  tabContainerClassName?: string;
+  shadowColor?: string;
+  scrollableClassName?: string;
+  bottomLineClassName?: string;
+}) {
+  const { containerRef, lineRef, activeTabRef } =
+    useUnderline<HTMLAnchorElement>();
+
+  return (
+    <div className={cn("relative", props.className)}>
+      {/* Bottom line */}
+      <div
+        className={cn(
+          "absolute right-0 bottom-0 left-0 h-[1px] bg-border",
+          props.bottomLineClassName,
+        )}
+      />
+
+      <ScrollShadow
+        scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
+        shadowColor={props.shadowColor}
+      >
+        <div
+          className={cn("flex", props.tabContainerClassName)}
+          ref={containerRef}
+        >
+          {props.links.map((tab) => {
+            return (
+              <Button
+                asChild
+                key={tab.href}
+                disabled={tab.isDisabled}
+                variant="ghost"
+              >
+                <Link
+                  data-active={tab.isActive}
+                  ref={tab.isActive ? activeTabRef : undefined}
+                  href={tab.href}
+                  aria-disabled={tab.isDisabled}
+                  className={cn(
+                    "relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm hover:bg-accent lg:text-sm",
+                    !tab.isActive && !tab.isDisabled && "hover:text-foreground",
+                    tab.isDisabled && "pointer-events-none",
+                    tab.isActive && "!text-foreground",
+                  )}
+                >
+                  {tab.name}
+                </Link>
+              </Button>
+            );
+          })}
+        </div>
+
+        {/* Active line */}
+        <div
+          ref={lineRef}
+          className="fade-in-0 absolute bottom-0 left-0 h-[2px] animate-in rounded-lg bg-foreground"
+        />
+      </ScrollShadow>
+    </div>
+  );
+}
+
+export function TabButtons(props: {
+  tabs: {
+    name: React.ReactNode;
+    onClick: () => void;
+    isActive: boolean;
+    isDisabled?: boolean;
+    icon?: React.FC<{ className?: string }>;
+    toolTip?: string;
+  }[];
+  tabClassName?: string;
+  activeTabClassName?: string;
+  tabContainerClassName?: string;
+  containerClassName?: string;
+  shadowColor?: string;
+  tabIconClassName?: string;
+  hideBottomLine?: boolean;
+}) {
+  const { containerRef, lineRef, activeTabRef } =
+    useUnderline<HTMLButtonElement>();
+
+  return (
+    <div className={cn("relative", props.containerClassName)}>
+      {/* Bottom line */}
+      {!props.hideBottomLine && (
+        <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
+      )}
+
+      <ScrollShadow
+        scrollableClassName="pb-[8px] relative"
+        shadowColor={props.shadowColor}
+      >
+        <div
+          className={cn("flex", props.tabContainerClassName)}
+          ref={containerRef}
+        >
+          {props.tabs.map((tab, index) => {
+            return (
+              <ToolTipLabel
+                key={typeof tab.name === "string" ? tab.name : index}
+                label={tab.toolTip}
+              >
+                <Button
+                  variant="ghost"
+                  ref={tab.isActive ? activeTabRef : undefined}
+                  className={cn(
+                    "relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
+                    !tab.isActive &&
+                      "text-muted-foreground hover:text-foreground",
+                    tab.isDisabled && "cursor-not-allowed opacity-50",
+                    props.tabClassName,
+                    tab.isActive && props.activeTabClassName,
+                  )}
+                  onClick={!tab.isDisabled ? tab.onClick : undefined}
+                >
+                  {tab.icon && (
+                    <tab.icon
+                      className={cn("size-6", props.tabIconClassName)}
+                    />
+                  )}
+                  {tab.name}
+                </Button>
+              </ToolTipLabel>
+            );
+          })}
+        </div>
+
+        {/* Active line */}
+        <div
+          ref={lineRef}
+          className="fade-in-0 absolute bottom-0 left-0 h-[2px] animate-in rounded-lg bg-foreground"
+        />
+      </ScrollShadow>
+    </div>
+  );
+}
+
+function useUnderline<El extends HTMLElement>() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const lineRef = useRef<HTMLDivElement>(null);
+  const [activeTabEl, setActiveTabEl] = useState<El | null>(null);
+
+  const activeTabRef = useCallback((el: El | null) => {
+    setActiveTabEl(el);
+  }, []);
+
+  useIsomorphicLayoutEffect(() => {
+    function update() {
+      if (activeTabEl && containerRef.current && lineRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const lineEl = lineRef.current;
+        const rect = activeTabEl.getBoundingClientRect();
+        const containerPaddingLeft =
+          containerRect.left - containerRef.current.offsetLeft;
+        lineEl.style.width = `${rect.width}px`;
+        lineEl.style.transform = `translateX(${
+          rect.left - containerPaddingLeft
+        }px)`;
+        setTimeout(() => {
+          lineEl.style.transition = "transform 0.3s, width 0.3s";
+        }, 0);
+      } else if (lineRef.current) {
+        lineRef.current.style.width = "0px";
+      }
+    }
+
+    update();
+    let resizeObserver: ResizeObserver | undefined = undefined;
+
+    if (containerRef.current) {
+      resizeObserver = new ResizeObserver(() => {
+        setTimeout(() => {
+          update();
+        }, 100);
+      });
+      resizeObserver.observe(containerRef.current);
+    }
+
+    // add event listener for resize
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      resizeObserver?.disconnect();
+    };
+  }, [activeTabEl]);
+
+  return { containerRef, lineRef, activeTabRef };
+}
diff --git a/apps/nebula/src/@/components/ui/text-shimmer.tsx b/apps/nebula/src/@/components/ui/text-shimmer.tsx
new file mode 100644
index 00000000000..7355cb8c18a
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/text-shimmer.tsx
@@ -0,0 +1,23 @@
+import { cn } from "../../lib/utils";
+
+export function TextShimmer(props: {
+  text: string;
+  className?: string;
+}) {
+  return (
+    <div className="flex">
+      <p
+        className={cn(
+          "animate-text-shimmer bg-[length:200%_50%] bg-clip-text text-transparent will-change-auto",
+          props.className,
+        )}
+        style={{
+          backgroundImage:
+            "linear-gradient(70deg, hsl(var(--muted-foreground)/50%) 50%, hsl(var(--foreground)) 70%, hsl(var(--muted-foreground)/50%) 100%)",
+        }}
+      >
+        {props.text}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/textarea.tsx b/apps/nebula/src/@/components/ui/textarea.tsx
new file mode 100644
index 00000000000..f0b1229f281
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/textarea.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+
+export function AutoResizeTextarea(props: TextareaProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: value is needed in deps array
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [props.value]);
+
+  return (
+    <Textarea
+      ref={textareaRef}
+      {...props}
+      style={{
+        ...props.style,
+        overflowY: "hidden",
+      }}
+    />
+  );
+}
diff --git a/apps/nebula/src/@/components/ui/tooltip.tsx b/apps/nebula/src/@/components/ui/tooltip.tsx
new file mode 100644
index 00000000000..cc07667ea2f
--- /dev/null
+++ b/apps/nebula/src/@/components/ui/tooltip.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 animate-in overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-popover-foreground text-sm shadow-md data-[state=closed]:animate-out",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+
+export function ToolTipLabel(props: {
+  children: React.ReactNode;
+  label: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  leftIcon?: React.ReactNode;
+  hoverable?: boolean;
+  contentClassName?: string;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "center" | "start" | "end";
+}) {
+  if (!props.label) {
+    return props.children;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={100} disableHoverableContent={!props.hoverable}>
+        <TooltipTrigger asChild className="!pointer-events-auto">
+          {props.children}
+        </TooltipTrigger>
+        <TooltipContent
+          side={props.side}
+          align={props.align}
+          sideOffset={10}
+          className={cn(
+            "max-w-[400px] whitespace-normal p-0 leading-relaxed",
+            props.contentClassName,
+          )}
+        >
+          <div className="flex items-center gap-1.5 p-4 text-sm">
+            {props.leftIcon}
+            {props.label}
+            {props.rightIcon}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/login/account-abstraction.ts b/apps/nebula/src/@/config/nebula-aa.ts
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/login/account-abstraction.ts
rename to apps/nebula/src/@/config/nebula-aa.ts
diff --git a/apps/nebula/src/@/config/sdk-component-theme.ts b/apps/nebula/src/@/config/sdk-component-theme.ts
new file mode 100644
index 00000000000..179c58dbab1
--- /dev/null
+++ b/apps/nebula/src/@/config/sdk-component-theme.ts
@@ -0,0 +1,43 @@
+import {
+  type Theme,
+  type ThemeOverrides,
+  darkTheme,
+  lightTheme,
+} from "thirdweb/react";
+
+export function getSDKTheme(theme: "light" | "dark"): Theme {
+  const overrides: ThemeOverrides = {
+    colors: {
+      modalBg: "hsl(var(--card))",
+      borderColor: "hsl(var(--border))",
+      connectedButtonBg: "hsl(var(--card))",
+      connectedButtonBgHover: "hsl(var(--accent))",
+      tertiaryBg: "hsl(var(--muted)/50%)",
+      secondaryButtonBg: "hsl(var(--secondary))",
+      secondaryButtonHoverBg: "hsl(var(--secondary)/80%)",
+      inputAutofillBg: "hsl(var(--muted))",
+      secondaryIconHoverBg: "hsl(var(--accent))",
+      separatorLine: "hsl(var(--border))",
+      skeletonBg: "hsl(var(--muted))",
+      scrollbarBg: "hsl(var(--muted))",
+      secondaryText: "hsl(var(--muted-foreground))",
+      primaryText: "hsl(var(--foreground))",
+      accentText: "hsl(var(--link-foreground))",
+      accentButtonBg: "hsl(var(--primary))",
+      accentButtonText: "hsl(var(--primary-foreground))",
+      primaryButtonBg: "hsl(var(--inverted))",
+      primaryButtonText: "hsl(var(--inverted-foreground))",
+      secondaryButtonText: "hsl(var(--secondary-foreground))",
+      tooltipBg: "hsl(var(--popover))",
+      tooltipText: "hsl(var(--popover-foreground))",
+      secondaryIconColor: "hsl(var(--secondary-foreground))",
+      secondaryIconHoverColor: "hsl(var(--foreground))",
+      selectedTextBg: "hsl(var(--inverted))",
+      selectedTextColor: "hsl(var(--inverted-foreground))",
+      danger: "hsl(var(--destructive-text))",
+      success: "hsl(var(--success-text))",
+    },
+  };
+
+  return theme === "light" ? lightTheme(overrides) : darkTheme(overrides);
+}
diff --git a/apps/dashboard/src/app/nebula-app/_utils/constants.ts b/apps/nebula/src/@/constants/cookies.ts
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/_utils/constants.ts
rename to apps/nebula/src/@/constants/cookies.ts
diff --git a/apps/nebula/src/@/constants/env-utils.ts b/apps/nebula/src/@/constants/env-utils.ts
new file mode 100644
index 00000000000..09f66ab1786
--- /dev/null
+++ b/apps/nebula/src/@/constants/env-utils.ts
@@ -0,0 +1,3 @@
+export const isProd =
+  (process.env.VERCEL_ENV || process.env.NEXT_PUBLIC_VERCEL_ENV) ===
+  "production";
diff --git a/apps/nebula/src/@/constants/local-node.ts b/apps/nebula/src/@/constants/local-node.ts
new file mode 100644
index 00000000000..a6d390f17d1
--- /dev/null
+++ b/apps/nebula/src/@/constants/local-node.ts
@@ -0,0 +1,6 @@
+/**
+ * publicly available wallet for local nodes
+ * extracted from SDK v4, used to request localhost testnet funds
+ */
+export const LOCAL_NODE_PKEY =
+  "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80";
diff --git a/apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts b/apps/nebula/src/@/constants/nebula-client.ts
similarity index 93%
rename from apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts
rename to apps/nebula/src/@/constants/nebula-client.ts
index 431a05f0636..d76a19a2354 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/utils/nebulaThirdwebClient.ts
+++ b/apps/nebula/src/@/constants/nebula-client.ts
@@ -11,10 +11,10 @@ import {
   THIRDWEB_RPC_DOMAIN,
   THIRDWEB_SOCIAL_API_DOMAIN,
   THIRDWEB_STORAGE_DOMAIN,
-} from "constants/urls";
+} from "@/constants/urls";
+import { getVercelEnv } from "@/utils/vercel-utils";
 import { createThirdwebClient } from "thirdweb";
 import { setThirdwebDomains } from "thirdweb/utils";
-import { getVercelEnv } from "../../../../lib/vercel-utils";
 
 // returns a thirdweb client with optional JWT passed in
 function getNebulaThirdwebClient() {
diff --git a/apps/nebula/src/@/constants/public-envs.ts b/apps/nebula/src/@/constants/public-envs.ts
new file mode 100644
index 00000000000..050529cc04d
--- /dev/null
+++ b/apps/nebula/src/@/constants/public-envs.ts
@@ -0,0 +1,14 @@
+export const NEXT_PUBLIC_DASHBOARD_CLIENT_ID =
+  process.env.NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "";
+
+export const NEXT_PUBLIC_NEBULA_APP_CLIENT_ID =
+  process.env.NEXT_PUBLIC_NEBULA_APP_CLIENT_ID || "";
+
+export const NEXT_PUBLIC_IPFS_GATEWAY_URL =
+  (process.env.NEXT_PUBLIC_IPFS_GATEWAY_URL as string) ||
+  "https://{clientId}.ipfscdn.io/ipfs/{cid}/{path}";
+
+export const NEXT_PUBLIC_TURNSTILE_SITE_KEY =
+  process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY || "";
+
+export const NEXT_PUBLIC_NEBULA_URL = process.env.NEXT_PUBLIC_NEBULA_URL || "";
diff --git a/apps/nebula/src/@/constants/server-envs.ts b/apps/nebula/src/@/constants/server-envs.ts
new file mode 100644
index 00000000000..c5fc0af6a8c
--- /dev/null
+++ b/apps/nebula/src/@/constants/server-envs.ts
@@ -0,0 +1,29 @@
+import "server-only";
+import { experimental_taintUniqueValue as _experimental_taintUniqueValue } from "react";
+
+// on storybook, experimental_taintUniqueValue is not available, because its not available in the react version we are using - its added by next.js
+const experimental_taintUniqueValue =
+  _experimental_taintUniqueValue || (() => {});
+
+// Make sure to taint the server only envs here with experimental_taintUniqueValue ONLY if they contain a UNIQUE sensitive value
+// if an env has a generic value that may appear naturally in client components - do not taint it
+
+export const NEBULA_APP_SECRET_KEY = process.env.NEBULA_APP_SECRET_KEY || "";
+
+if (NEBULA_APP_SECRET_KEY) {
+  experimental_taintUniqueValue(
+    "Do not pass NEBULA_APP_SECRET_KEY to the client",
+    process,
+    NEBULA_APP_SECRET_KEY,
+  );
+}
+
+export const TURNSTILE_SECRET_KEY = process.env.TURNSTILE_SECRET_KEY || "";
+
+if (TURNSTILE_SECRET_KEY) {
+  experimental_taintUniqueValue(
+    "Do not pass TURNSTILE_SECRET_KEY to the client",
+    process,
+    TURNSTILE_SECRET_KEY,
+  );
+}
diff --git a/apps/nebula/src/@/constants/urls.ts b/apps/nebula/src/@/constants/urls.ts
new file mode 100644
index 00000000000..6ac3dfb6508
--- /dev/null
+++ b/apps/nebula/src/@/constants/urls.ts
@@ -0,0 +1,24 @@
+export const THIRDWEB_PAY_DOMAIN =
+  process.env.NEXT_PUBLIC_PAY_URL || "pay.thirdweb-dev.com";
+
+export const THIRDWEB_INAPP_WALLET_DOMAIN =
+  process.env.NEXT_PUBLIC_IN_APP_WALLET_URL ||
+  "embedded-wallet.thirdweb-dev.com";
+
+export const THIRDWEB_RPC_DOMAIN =
+  process.env.NEXT_PUBLIC_RPC_URL || "rpc.thirdweb-dev.com";
+
+export const THIRDWEB_STORAGE_DOMAIN =
+  process.env.NEXT_PUBLIC_STORAGE_URL || "storage.thirdweb-dev.com";
+
+export const THIRDWEB_SOCIAL_API_DOMAIN =
+  process.env.NEXT_PUBLIC_SOCIAL_URL || "social.thirdweb-dev.com";
+
+export const THIRDWEB_BUNDLER_DOMAIN =
+  process.env.NEXT_PUBLIC_BUNDLER_URL || "bundler.thirdweb-dev.com";
+
+export const THIRDWEB_INSIGHT_API_DOMAIN =
+  process.env.NEXT_PUBLIC_INSIGHT_API_URL || "insight.thirdweb-dev.com";
+
+export const THIRDWEB_BRIDGE_URL =
+  process.env.NEXT_PUBLIC_BRIDGE_URL || "bridge.thirdweb-dev.com";
diff --git a/apps/nebula/src/@/data/eth-sanctioned-addresses.ts b/apps/nebula/src/@/data/eth-sanctioned-addresses.ts
new file mode 100644
index 00000000000..be75b526d98
--- /dev/null
+++ b/apps/nebula/src/@/data/eth-sanctioned-addresses.ts
@@ -0,0 +1,150 @@
+// source: https://github.com/0xB10C/ofac-sanctioned-digital-currency-addresses/blob/lists/sanctioned_addresses_ETH.json
+
+const ETH_SANCTIONED_ADDRESSES = [
+  "0x01e2919679362dFBC9ee1644Ba9C6da6D6245BB1",
+  "0x03893a7c7463AE47D46bc7f091665f1893656003",
+  "0x04DBA1194ee10112fE6C3207C0687DEf0e78baCf",
+  "0x05E0b5B40B7b66098C2161A5EE11C5740A3A7C45",
+  "0x07687e702b410Fa43f4cB4Af7FA097918ffD2730",
+  "0x0836222F2B2B24A3F36f98668Ed8F0B38D1a872f",
+  "0x08723392Ed15743cc38513C4925f5e6be5c17243",
+  "0x08b2eFdcdB8822EfE5ad0Eae55517cf5DC544251",
+  "0x09193888b3f38C82dEdfda55259A82C0E7De875E",
+  "0x098B716B8Aaf21512996dC57EB0615e2383E2f96",
+  "0x0E3A09dDA6B20aFbB34aC7cD4A6881493f3E7bf7",
+  "0x0Ee5067b06776A89CcC7dC8Ee369984AD7Db5e06",
+  "0x12D66f87A04A9E220743712cE6d9bB1B5616B8Fc",
+  "0x1356c899D8C9467C7f71C195612F8A395aBf2f0a",
+  "0x169AD27A470D064DEDE56a2D3ff727986b15D52B",
+  "0x178169B423a011fff22B9e3F3abeA13414dDD0F1",
+  "0x179f48c78f57a3a78f0608cc9197b8972921d1d2",
+  "0x1967d8af5bd86a497fb3dd7899a020e47560daaf",
+  "0x19aa5fe80d33a56d56c78e82ea5e50e5d80b4dff",
+  "0x1E34A77868E19A6647b1f2F47B51ed72dEDE95DD",
+  "0x1da5821544e25c636c1417ba96ade4cf6d2f9b5a",
+  "0x22aaA7720ddd5388A3c0A3333430953C68f1849b",
+  "0x23173fE8b96A4Ad8d2E17fB83EA5dcccdCa1Ae52",
+  "0x23773E65ed146A459791799d01336DB287f25334",
+  "0x242654336ca2205714071898f67E254EB49ACdCe",
+  "0x2573BAc39EBe2901B4389CD468F2872cF7767FAF",
+  "0x26903a5a198D571422b2b4EA08b56a37cbD68c89",
+  "0x2717c5e28cf931547B621a5dddb772Ab6A35B701",
+  "0x2FC93484614a34f26F7970CBB94615bA109BB4bf",
+  "0x2f389ce8bd8ff92de3402ffce4691d17fc4f6535",
+  "0x2f50508a8a3d323b91336fa3ea6ae50e55f32185",
+  "0x308ed4b7b49797e1a98d3818bff6fe5385410370",
+  "0x330bdFADE01eE9bF63C209Ee33102DD334618e0a",
+  "0x35fB6f6DB4fb05e6A4cE86f2C93691425626d4b1",
+  "0x39D908dac893CBCB53Cc86e0ECc369aA4DeF1A29",
+  "0x3AD9dB589d201A710Ed237c829c7860Ba86510Fc",
+  "0x3Cffd56B47B7b41c56258D9C7731ABaDc360E073",
+  "0x3aac1cC67c2ec5Db4eA850957b967Ba153aD6279",
+  "0x3cbded43efdaf0fc77b9c55f6fc9988fcc9b757d",
+  "0x3e37627dEAA754090fBFbb8bd226c1CE66D255e9",
+  "0x3efa30704d2b8bbac821307230376556cf8cc39e",
+  "0x407CcEeaA7c95d2FE2250Bf9F2c105aA7AAFB512",
+  "0x4736dCf1b7A3d580672CcE6E7c65cd5cc9cFBa9D",
+  "0x47CE0C6eD5B0Ce3d3A51fdb1C52DC66a7c3c2936",
+  "0x48549a34ae37b12f6a30566245176994e17c6b4a",
+  "0x4f47bc496083c727c5fbe3ce9cdf2b0f6496270c",
+  "0x502371699497d08D5339c870851898D6D72521Dd",
+  "0x527653eA119F3E6a1F5BD18fbF4714081D7B31ce",
+  "0x538Ab61E8A9fc1b2f93b3dd9011d662d89bE6FE6",
+  "0x53b6936513e738f44FB50d2b9476730C0Ab3Bfc1",
+  "0x5512d943ed1f7c8a43f3435c85f7ab68b30121b0",
+  "0x57b2B8c82F065de8Ef5573f9730fC1449B403C9f",
+  "0x58E8dCC13BE9780fC42E8723D8EaD4CF46943dF2",
+  "0x5A14E72060c11313E38738009254a90968F58f51",
+  "0x5cab7692D4E94096462119ab7bF57319726Eed2A",
+  "0x5efda50f22d34F262c29268506C5Fa42cB56A1Ce",
+  "0x5f6c97C6AD7bdd0AE7E0Dd4ca33A4ED3fDabD4D7",
+  "0x610B717796ad172B316836AC95a2ffad065CeaB4",
+  "0x653477c392c16b0765603074f157314Cc4f40c32",
+  "0x67d40EE1A85bf4a4Bb7Ffae16De985e8427B6b45",
+  "0x6Bf694a291DF3FeC1f7e69701E3ab6c592435Ae7",
+  "0x6acdfba02d390b97ac2b2d42a63e85293bcc160e",
+  "0x6f1ca141a28907f78ebaa64fb83a9088b02a8352",
+  "0x722122dF12D4e14e13Ac3b6895a86e84145b6967",
+  "0x723B78e67497E85279CB204544566F4dC5d2acA0",
+  "0x72a5843cc08275C8171E582972Aa4fDa8C397B2A",
+  "0x743494b60097A2230018079c02fe21a7B687EAA5",
+  "0x746aebc06d2ae31b71ac51429a19d54e797878e9",
+  "0x756C4628E57F7e7f8a459EC2752968360Cf4D1AA",
+  "0x76D85B4C0Fc497EeCc38902397aC608000A06607",
+  "0x776198CCF446DFa168347089d7338879273172cF",
+  "0x77777feddddffc19ff86db637967013e6c6a116c",
+  "0x7Db418b5D567A4e0E8c59Ad71BE1FcE48f3E6107",
+  "0x7F19720A857F834887FC9A7bC0a0fBe7Fc7f8102",
+  "0x7F367cC41522cE07553e823bf3be79A889DEbe1B",
+  "0x7FF9cFad3877F21d41Da833E2F775dB0569eE3D9",
+  "0x8281Aa6795aDE17C8973e1aedcA380258Bc124F9",
+  "0x833481186f16Cece3f1Eeea1a694c42034c3a0dB",
+  "0x83E5bC4Ffa856BB84Bb88581f5Dd62A433A25e0D",
+  "0x84443CFd09A48AF6eF360C6976C5392aC5023a1F",
+  "0x8576acc5c05d6ce88f4e49bf65bdf0c62f91353c",
+  "0x8589427373D6D84E98730D7795D8f6f8731FDA16",
+  "0x88fd245fEdeC4A936e700f9173454D1931B4C307",
+  "0x901bb9583b24d97e995513c6778dc6888ab6870e",
+  "0x910Cbd523D972eb0a6f4cAe4618aD62622b39DbF",
+  "0x94A1B5CdB22c43faab4AbEb5c74999895464Ddaf",
+  "0x94Be88213a387E992Dd87DE56950a9aef34b9448",
+  "0x94C92F096437ab9958fC0A37F09348f30389Ae79",
+  "0x9AD122c22B14202B4490eDAf288FDb3C7cb3ff5E",
+  "0x9f4cda013e354b8fc285bf4b9a60460cee7f7ea9",
+  "0xA160cdAB225685dA1d56aa342Ad8841c3b53f291",
+  "0xA60C772958a3eD56c1F15dD055bA37AC8e523a0D",
+  "0xB20c66C4DE72433F3cE747b58B86830c459CA911",
+  "0xBA214C1c1928a32Bffe790263E38B4Af9bFCD659",
+  "0xCC84179FFD19A1627E79F8648d09e095252Bc418",
+  "0xCEe71753C9820f063b38FDbE4cFDAf1d3D928A80",
+  "0xD21be7248e0197Ee08E0c20D4a96DEBdaC3D20Af",
+  "0xD4B88Df4D29F5CedD6857912842cff3b20C8Cfa3",
+  "0xD5d6f8D9e784d0e26222ad3834500801a68D027D",
+  "0xD691F27f38B395864Ea86CfC7253969B409c362d",
+  "0xD692Fd2D0b2Fbd2e52CFa5B5b9424bC981C30696",
+  "0xD82ed8786D7c69DC7e052F7A542AB047971E73d2",
+  "0xDD4c48C0B24039969fC16D1cdF626eaB821d3384",
+  "0xDF3A408c53E5078af6e8fb2A85088D46Ee09A61b",
+  "0xEFE301d259F525cA1ba74A7977b80D5b060B3ccA",
+  "0xF60dD140cFf0706bAE9Cd734Ac3ae76AD9eBC32A",
+  "0xF67721A2D8F736E75a49FdD7FAd2e31D8676542a",
+  "0xF7B31119c2682c88d88D455dBb9d5932c65Cf1bE",
+  "0xFD8610d20aA15b7B2E3Be39B396a1bC3516c7144",
+  "0xa0e1c89Ef1a489c9C7dE96311eD5Ce5D32c20E4B",
+  "0xa5C2254e4253490C54cef0a4347fddb8f75A4998",
+  "0xa7e5d5a720f06526557c513402f2e6b5fa20b008",
+  "0xaEaaC358560e11f52454D997AAFF2c5731B6f8a6",
+  "0xaf4c0B70B2Ea9FB7487C7CbB37aDa259579fe040",
+  "0xaf8d1839c3c67cf571aa74B5c12398d4901147B3",
+  "0xb04E030140b30C27bcdfaafFFA98C57d80eDa7B4",
+  "0xb1C8094B234DcE6e03f10a5b673c1d8C69739A00",
+  "0xb541fc07bC7619fD4062A54d96268525cBC6FfEF",
+  "0xbB93e510BbCD0B7beb5A853875f9eC60275CF498",
+  "0xc2a3829F459B3Edd87791c74cD45402BA0a20Be3",
+  "0xc455f7fd3e0e12afd51fba5c106909934d8a0e4a",
+  "0xca0840578f57fe71599d29375e16783424023357",
+  "0xd0975b32cea532eadddfc9c60481976e39db3472",
+  "0xd47438C816c9E7f2E2888E060936a499Af9582b3",
+  "0xd882cfc20f52f2599d84b8e8d58c7fb62cfe344b",
+  "0xd8D7DE3349ccaA0Fde6298fe6D7b7d0d34586193",
+  "0xd90e2f925DA726b50C4Ed8D0Fb90Ad053324F31b",
+  "0xd96f2B1c14Db8458374d9Aca76E26c3D18364307",
+  "0xdf231d99Ff8b6c6CBF4E9B9a945CBAcEF9339178",
+  "0xe7aa314c77f4233c18c6cc84384a9247c0cf367b",
+  "0xeDC5d01286f99A066559F60a585406f3878a033e",
+  "0xf4B067dD14e95Bab89Be928c07Cb22E3c94E0DAA",
+  "0xffbac21a641dcfe4552920138d90f3638b3c9fba",
+];
+
+// build map of sanctioned addresses
+const SANCTIONED_ADDRESSES_MAP = ETH_SANCTIONED_ADDRESSES.reduce(
+  (map, address) => {
+    map[address.toLowerCase()] = true;
+    return map;
+  },
+  {} as Record<string, boolean>,
+);
+
+export function isSanctionedAddress(address: string) {
+  return SANCTIONED_ADDRESSES_MAP[address.toLowerCase()] || false;
+}
diff --git a/apps/nebula/src/@/hooks/chains.ts b/apps/nebula/src/@/hooks/chains.ts
new file mode 100644
index 00000000000..36599b4fe85
--- /dev/null
+++ b/apps/nebula/src/@/hooks/chains.ts
@@ -0,0 +1,119 @@
+"use client";
+
+import { isProd } from "@/constants/env-utils";
+// import { isProd } from "@/constants/env-utils";
+import { createStore, useStore } from "@/lib/reactive";
+import { mapV4ChainToV5Chain } from "@/utils/map-chains";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+import type { Chain, ChainMetadata } from "thirdweb/chains";
+
+type AllChainsStore = {
+  allChains: ChainMetadata[];
+  allChainsV5: Chain[];
+  idToChain: Map<number, ChainMetadata | undefined>;
+  nameToChain: Map<string, ChainMetadata | undefined>;
+  slugToChain: Map<string, ChainMetadata | undefined>;
+};
+
+function updateAllChainsStore(chains: ChainMetadata[]) {
+  // if original chains are not loaded yet - ignore
+  if (chains.length === 0) {
+    return;
+  }
+
+  // but don't ignore if chainOverrides is empty!
+
+  const allChains: ChainMetadata[] = [];
+  const allChainsV5: Chain[] = [];
+  const idToChain: Map<number, ChainMetadata | undefined> = new Map();
+  const nameToChain: Map<string, ChainMetadata | undefined> = new Map();
+  const slugToChain: Map<string, ChainMetadata | undefined> = new Map();
+
+  for (let i = 0; i < chains.length; i++) {
+    let chain = chains[i];
+    if (!chain) {
+      continue;
+    }
+
+    // for dev env, replace the rpc urls to dev domain
+    if (!isProd) {
+      chain = {
+        ...chain,
+        rpc: chain.rpc.map((rpc) =>
+          rpc.replace("rpc.thirdweb.com", "rpc.thirdweb-dev.com"),
+        ),
+      };
+    }
+
+    allChains.push(chain);
+    // eslint-disable-next-line no-restricted-syntax
+    allChainsV5.push(mapV4ChainToV5Chain(chain));
+    idToChain.set(chain.chainId, chain);
+    nameToChain.set(chain.name, chain);
+    slugToChain.set(chain.slug, chain);
+  }
+
+  allChainsStore.setValue({
+    allChains,
+    allChainsV5,
+    idToChain: idToChain,
+    nameToChain: nameToChain,
+    slugToChain: slugToChain,
+  });
+}
+
+function createAllChainsStore() {
+  return createStore<AllChainsStore>({
+    allChains: [],
+    allChainsV5: [],
+    idToChain: new Map(),
+    nameToChain: new Map(),
+    slugToChain: new Map(),
+  });
+}
+
+const allChainsStore = /* @__PURE__ */ createAllChainsStore();
+
+async function fetchChainsFromApi() {
+  // always fetch from prod for chains for now
+  // TODO: re-visit this
+  const res = await fetch("https://api.thirdweb.com/v1/chains");
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch chains");
+  }
+
+  const json = await res.json();
+
+  if (json.error) {
+    throw new Error(json.error.message);
+  }
+
+  return json.data as ChainMetadata[];
+}
+
+export function useAllChainsData() {
+  // trigger fetching all chains if this hook is used instead of putting this on root
+  // so we can avoid fetching all chains if it's not required
+  const allChainsQuery = useQuery({
+    queryKey: ["all-chains"],
+    queryFn: () => fetchChainsFromApi(),
+  });
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    // already set
+    if (allChainsStore.getValue().allChains.length > 0) {
+      return;
+    }
+
+    if (!allChainsQuery.data) {
+      return;
+    }
+
+    updateAllChainsStore(allChainsQuery.data);
+  }, [allChainsQuery.data]);
+
+  return useStore(allChainsStore);
+}
diff --git a/apps/nebula/src/@/hooks/use-clipboard.tsx b/apps/nebula/src/@/hooks/use-clipboard.tsx
new file mode 100644
index 00000000000..909f3619635
--- /dev/null
+++ b/apps/nebula/src/@/hooks/use-clipboard.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * todo: this hook is copied from the SDK, so might as well expose it from the SDK
+ * and use it here?
+ */
+export function useClipboard(text: string, delay = 1500) {
+  const [hasCopied, setHasCopied] = useState(false);
+
+  const onCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(text);
+    setHasCopied(true);
+  }, [text]);
+
+  // legitimate usecase
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    let timeoutId: number | null = null;
+
+    if (hasCopied) {
+      timeoutId = window.setTimeout(() => {
+        setHasCopied(false);
+      }, delay);
+    }
+
+    return () => {
+      if (timeoutId) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [hasCopied, delay]);
+
+  return { onCopy, hasCopied };
+}
diff --git a/apps/nebula/src/@/icons/NebulaIcon.tsx b/apps/nebula/src/@/icons/NebulaIcon.tsx
new file mode 100644
index 00000000000..bfd2636bf1b
--- /dev/null
+++ b/apps/nebula/src/@/icons/NebulaIcon.tsx
@@ -0,0 +1,24 @@
+export function NebulaIcon(props: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 153 153"
+      className={props.className}
+      role="presentation"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M76.3162 90.8232C82.4613 90.8232 87.4429 85.8416 87.4429 79.6965C87.4429 73.5514 82.4613 68.5698 76.3162 68.5698C70.171 68.5698 65.1895 73.5514 65.1895 79.6965C65.1895 85.8416 70.171 90.8232 76.3162 90.8232Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M91.9481 29.4892C78.7023 32.4916 63.6745 40.7425 50.4663 53.9508C46.781 57.636 43.4817 61.4629 40.5746 65.3532C44.5585 68.8492 47.0735 73.9786 47.0735 79.6955C47.0735 90.2299 38.5336 98.7698 27.9992 98.7698C27.1107 98.7698 26.2364 98.7091 25.3803 98.5915C23.3955 110.414 25.9579 119.384 31.3537 124.78C37.2202 130.646 47.3123 133.164 60.701 130.129C73.9468 127.126 88.9745 118.875 102.183 105.667C105.888 101.962 109.204 98.1131 112.122 94.2007C108.103 90.7037 105.562 85.551 105.562 79.8048C105.562 69.2704 114.102 60.7305 124.636 60.7305C125.536 60.7305 126.421 60.7928 127.288 60.9133C129.237 49.147 126.674 40.2167 121.295 34.8381C115.429 28.9716 105.337 26.4545 91.9481 29.4892ZM16.3791 94.8229C13.4047 109.493 15.9004 122.818 24.608 131.526C42.6147 149.532 80.3662 140.975 108.928 112.413C113.381 107.96 117.348 103.284 120.803 98.494C122.042 98.7466 123.324 98.8792 124.636 98.8792C135.171 98.8792 143.711 90.3393 143.711 79.8048C143.711 73.6582 140.803 68.1906 136.289 64.7023C139.234 50.0687 136.73 36.7817 128.041 28.0925C110.034 10.0859 72.2829 18.6429 43.7206 47.2051C39.2988 51.627 35.3564 56.2691 31.9179 61.024C30.6531 60.7599 29.3423 60.6211 27.9992 60.6211C17.4647 60.6211 8.9248 69.161 8.9248 79.6955C8.9248 85.8567 11.8461 91.3357 16.3791 94.8229ZM124.636 70.2677C119.369 70.2677 115.099 74.5376 115.099 79.8048C115.099 85.0721 119.369 89.342 124.636 89.342C129.904 89.342 134.174 85.0721 134.174 79.8048C134.174 74.5376 129.904 70.2677 124.636 70.2677ZM18.462 79.6955C18.462 74.4282 22.7319 70.1583 27.9992 70.1583C33.2664 70.1583 37.5363 74.4282 37.5363 79.6955C37.5363 84.9627 33.2664 89.2326 27.9992 89.2326C22.7319 89.2326 18.462 84.9627 18.462 79.6955Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/apps/nebula/src/@/lib/DashboardRouter.tsx b/apps/nebula/src/@/lib/DashboardRouter.tsx
new file mode 100644
index 00000000000..13d24b32648
--- /dev/null
+++ b/apps/nebula/src/@/lib/DashboardRouter.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+// eslint-disable-next-line no-restricted-imports
+import { useRouter } from "next/navigation";
+import {
+  type TransitionStartFunction,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useTransition,
+} from "react";
+import { createStore } from "./reactive";
+
+// Using useDashboardRouter instead of useRouter gives us a nice progress bar on top of the page when navigating using router.push or router.replace
+
+const RouteStartTransitionFn = createStore<TransitionStartFunction>((fn) =>
+  fn(),
+);
+
+export function useDashboardRouter() {
+  const startTransition = useSyncExternalStore(
+    RouteStartTransitionFn.subscribe,
+    RouteStartTransitionFn.getValue,
+    RouteStartTransitionFn.getValue,
+  );
+
+  const router = useRouter();
+  return useMemo(() => {
+    return {
+      ...router,
+      replace(href: string, options?: { scroll?: boolean }) {
+        startTransition(() => {
+          router.replace(href, options);
+        });
+      },
+      push(href: string, options?: { scroll?: boolean }) {
+        startTransition(() => {
+          router.push(href, options);
+        });
+      },
+    };
+  }, [router, startTransition]);
+}
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export function DashboardRouterTopProgressBar() {
+  const [isRouteLoading, startTransition] = useTransition();
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    RouteStartTransitionFn.setValue(startTransition);
+  }, []);
+
+  const [progress, setProgress] = useState(0);
+  const progressStartedRef = useRef(false);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!isRouteLoading) {
+      setProgress(0);
+      progressStartedRef.current = false;
+      return;
+    }
+
+    if (progressStartedRef.current) {
+      return;
+    }
+
+    let isMounted = true;
+
+    progressStartedRef.current = true;
+
+    async function updateProgressBar(progress: number, delay: number) {
+      if (!isMounted) {
+        if (!isRouteLoading) {
+          setProgress(100);
+        }
+        return;
+      }
+
+      setProgress(progress);
+      await wait(delay);
+
+      // increase progress by 10% of the remaining progress
+      // increase the delay by 5% to slow down number of updates for slower progress
+      updateProgressBar(progress + (100 - progress) / 10, delay * 1.05);
+    }
+
+    async function startEffect() {
+      // if the loading state remains for at least 500ms start the progress bar
+      await wait(500);
+      if (isMounted) {
+        updateProgressBar(0, 100);
+      }
+    }
+
+    startEffect();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [isRouteLoading]);
+
+  const width = isRouteLoading ? progress : 100;
+  return (
+    <span
+      className="fixed top-0 block h-[3px] bg-foreground"
+      style={{
+        opacity: isRouteLoading ? "1" : "0",
+        width: `${width}%`,
+        transition: width === 0 ? "none" : "width 0.2s ease, opacity 0.3s ease",
+        zIndex: "100000000",
+        pointerEvents: "none",
+      }}
+    />
+  );
+}
diff --git a/apps/nebula/src/@/lib/reactive.ts b/apps/nebula/src/@/lib/reactive.ts
new file mode 100644
index 00000000000..011d1467e29
--- /dev/null
+++ b/apps/nebula/src/@/lib/reactive.ts
@@ -0,0 +1,55 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+type Store<T> = {
+  getValue(): T;
+  setValue(newValue: T): void;
+  subscribe(listener: () => void): () => void;
+};
+
+/**
+ * Create a reactive value store
+ * @param initialValue - The initial value to store
+ * @example
+ * ```ts
+ * const store = createStore(0);
+ * ```
+ * @returns A store object
+ * @internal
+ */
+export function createStore<T>(initialValue: T): Store<T> {
+  type Listener = () => void;
+  const listeners = new Set<Listener>();
+
+  let value = initialValue;
+
+  const notify = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+
+  return {
+    getValue() {
+      return value;
+    },
+    setValue(newValue: T) {
+      if (newValue === value) {
+        return;
+      }
+      value = newValue;
+      notify();
+    },
+    subscribe(listener: Listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+export function useStore<T>(store: Store<T>): T {
+  return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
+}
diff --git a/apps/nebula/src/@/lib/resolveSchemeWithErrorHandler.ts b/apps/nebula/src/@/lib/resolveSchemeWithErrorHandler.ts
new file mode 100644
index 00000000000..38a6a3946eb
--- /dev/null
+++ b/apps/nebula/src/@/lib/resolveSchemeWithErrorHandler.ts
@@ -0,0 +1,21 @@
+import type { ThirdwebClient } from "thirdweb";
+import { resolveScheme } from "thirdweb/storage";
+
+export function resolveSchemeWithErrorHandler(options: {
+  uri: string | undefined;
+  client: ThirdwebClient;
+}) {
+  if (!options.uri) {
+    return undefined;
+  }
+  try {
+    // eslint-disable-next-line no-restricted-syntax
+    return resolveScheme({
+      uri: options.uri,
+      client: options.client,
+    });
+  } catch (err) {
+    console.error("error resolving ipfs url", options.uri, err);
+    return undefined;
+  }
+}
diff --git a/apps/nebula/src/@/lib/useIsomorphicLayoutEffect.ts b/apps/nebula/src/@/lib/useIsomorphicLayoutEffect.ts
new file mode 100644
index 00000000000..ea6a0bc0166
--- /dev/null
+++ b/apps/nebula/src/@/lib/useIsomorphicLayoutEffect.ts
@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
diff --git a/apps/nebula/src/@/lib/useShowMore.ts b/apps/nebula/src/@/lib/useShowMore.ts
new file mode 100644
index 00000000000..052037fb172
--- /dev/null
+++ b/apps/nebula/src/@/lib/useShowMore.ts
@@ -0,0 +1,37 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+/**
+ *
+ * @internal
+ */
+export function useShowMore<T extends HTMLElement>(
+  initialItemsToShow: number,
+  itemsToAdd: number,
+) {
+  // start with showing first `initialItemsToShow` items, when the last item is in view, show `itemsToAdd` more
+  const [itemsToShow, setItemsToShow] = useState(initialItemsToShow);
+  const lastItemRef = useCallback(
+    (node: T) => {
+      if (!node) {
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]?.isIntersecting) {
+            setItemsToShow((prev) => prev + itemsToAdd); // show 10 more items
+          }
+        },
+        { threshold: 1 },
+      );
+
+      observer.observe(node);
+      // when the node is removed from the DOM, observer will be disconnected automatically by the browser
+    },
+    [itemsToAdd],
+  );
+
+  return { itemsToShow, lastItemRef };
+}
diff --git a/apps/nebula/src/@/lib/utils.ts b/apps/nebula/src/@/lib/utils.ts
new file mode 100644
index 00000000000..365058cebd7
--- /dev/null
+++ b/apps/nebula/src/@/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/apps/nebula/src/@/storybook/stubs.ts b/apps/nebula/src/@/storybook/stubs.ts
new file mode 100644
index 00000000000..84be0408fdf
--- /dev/null
+++ b/apps/nebula/src/@/storybook/stubs.ts
@@ -0,0 +1,28 @@
+export function randomLorem(length: number) {
+  const loremWords = [
+    "lorem",
+    "ipsum",
+    "dolor",
+    "sit",
+    "amet",
+    "consectetur",
+    "adipiscing",
+    "elit",
+    "sed",
+    "do",
+    "eiusmod",
+    "tempor",
+    "incididunt",
+    "ut",
+    "labore",
+    "et",
+    "dolore",
+    "magna",
+    "aliqua",
+  ];
+
+  return Array.from({ length }, () => {
+    const randomIndex = Math.floor(Math.random() * loremWords.length);
+    return loremWords[randomIndex];
+  }).join(" ");
+}
diff --git a/apps/nebula/src/@/storybook/utils.tsx b/apps/nebula/src/@/storybook/utils.tsx
new file mode 100644
index 00000000000..63a167f93eb
--- /dev/null
+++ b/apps/nebula/src/@/storybook/utils.tsx
@@ -0,0 +1,37 @@
+import { Badge } from "@/components/ui/badge";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
+
+function StoryBadge(props: {
+  label: string;
+}) {
+  return (
+    <Badge
+      className="mb-3 self-start border-none bg-muted px-3 py-1 font-normal text-muted-foreground text-xs"
+      variant="outline"
+    >
+      {props.label}
+    </Badge>
+  );
+}
+
+export function BadgeContainer(props: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="w-full">
+      <StoryBadge label={props.label} />
+      <div className="bg-background">{props.children}</div>
+    </div>
+  );
+}
+
+export function storybookLog(...mesages: unknown[]) {
+  console.debug(
+    "%cStorybook",
+    "color: white; background-color: black; padding: 2px 4px; border-radius: 4px;",
+    ...mesages,
+  );
+}
+
+export const storybookThirdwebClient = nebulaAppThirdwebClient;
diff --git a/apps/nebula/src/@/types/chain.ts b/apps/nebula/src/@/types/chain.ts
new file mode 100644
index 00000000000..177a1520155
--- /dev/null
+++ b/apps/nebula/src/@/types/chain.ts
@@ -0,0 +1,26 @@
+import type { ChainMetadata } from "thirdweb/chains";
+
+type ChainSupportedService =
+  | "contracts"
+  | "connect-sdk"
+  | "engine"
+  | "account-abstraction"
+  | "nebula"
+  | "pay"
+  | "rpc-edge"
+  | "insight";
+
+type ChainService = {
+  service: ChainSupportedService;
+  enabled: boolean;
+  status: "enabled" | "disabled";
+};
+
+export type ChainServices = {
+  chainId: number;
+  services: Array<ChainService>;
+};
+
+export type ChainMetadataWithServices = ChainMetadata & {
+  services: Array<ChainService>;
+};
diff --git a/apps/dashboard/src/app/nebula-app/_utils/authToken.ts b/apps/nebula/src/@/utils/authToken.ts
similarity index 96%
rename from apps/dashboard/src/app/nebula-app/_utils/authToken.ts
rename to apps/nebula/src/@/utils/authToken.ts
index 3805d0f0d8b..e81208541ea 100644
--- a/apps/dashboard/src/app/nebula-app/_utils/authToken.ts
+++ b/apps/nebula/src/@/utils/authToken.ts
@@ -1,8 +1,8 @@
-import { cookies } from "next/headers";
 import {
   NEBULA_COOKIE_ACTIVE_ACCOUNT,
   NEBULA_COOKIE_PREFIX_TOKEN,
-} from "./constants";
+} from "@/constants/cookies";
+import { cookies } from "next/headers";
 
 export async function getNebulaAuthToken() {
   const cookiesManager = await cookies();
diff --git a/apps/nebula/src/@/utils/fetchChain.ts b/apps/nebula/src/@/utils/fetchChain.ts
new file mode 100644
index 00000000000..01bd14614ae
--- /dev/null
+++ b/apps/nebula/src/@/utils/fetchChain.ts
@@ -0,0 +1,23 @@
+import type { ChainMetadata } from "thirdweb/chains";
+
+export async function fetchChain(
+  chainIdOrSlug: string | number,
+  headers?: HeadersInit,
+): Promise<ChainMetadata | null> {
+  // always fetch from prod for chains for now
+  // TODO: re-visit this
+  const res = await fetch(
+    `https://api.thirdweb.com/v1/chains/${chainIdOrSlug}`,
+    {
+      headers,
+    },
+  );
+  if (res.ok) {
+    try {
+      return (await res.json()).data as ChainMetadata;
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
diff --git a/apps/dashboard/src/app/nebula-app/_utils/isAuthTokenValid.ts b/apps/nebula/src/@/utils/isAuthTokenValid.ts
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/_utils/isAuthTokenValid.ts
rename to apps/nebula/src/@/utils/isAuthTokenValid.ts
diff --git a/apps/dashboard/src/app/nebula-app/_utils/isLoggedIntoNebula.ts b/apps/nebula/src/@/utils/isLoggedIntoNebula.ts
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/_utils/isLoggedIntoNebula.ts
rename to apps/nebula/src/@/utils/isLoggedIntoNebula.ts
diff --git a/apps/nebula/src/@/utils/loginRedirect.ts b/apps/nebula/src/@/utils/loginRedirect.ts
new file mode 100644
index 00000000000..829403ebb97
--- /dev/null
+++ b/apps/nebula/src/@/utils/loginRedirect.ts
@@ -0,0 +1,9 @@
+import { redirect } from "next/navigation";
+
+export function loginRedirect(path?: string): never {
+  if (!path) {
+    redirect("/login");
+  }
+
+  redirect(`/login?next=${encodeURIComponent(path)}`);
+}
diff --git a/apps/nebula/src/@/utils/map-chains.ts b/apps/nebula/src/@/utils/map-chains.ts
new file mode 100644
index 00000000000..b969f7f21ab
--- /dev/null
+++ b/apps/nebula/src/@/utils/map-chains.ts
@@ -0,0 +1,20 @@
+import { type Chain, defineChain } from "thirdweb";
+import type { ChainMetadata } from "thirdweb/chains";
+
+export function mapV4ChainToV5Chain(v4Chain: ChainMetadata) {
+  const chain: Chain = {
+    id: v4Chain.chainId,
+    // eslint-disable-next-line no-restricted-syntax
+    rpc: v4Chain.rpc[0] || defineChain(v4Chain.chainId).rpc,
+    // TypeScript shenanigans, just avoiding as string assertion here
+    blockExplorers: v4Chain.explorers?.map((x) => x),
+    // TypeScript shenanigans, just avoiding as string assertion here
+    faucets: v4Chain.faucets?.map((x) => x),
+    name: v4Chain.name,
+    icon: v4Chain.icon,
+    testnet: v4Chain.testnet === true ? true : undefined,
+    nativeCurrency: v4Chain.nativeCurrency,
+  };
+
+  return chain;
+}
diff --git a/apps/nebula/src/@/utils/nebula-chains.ts b/apps/nebula/src/@/utils/nebula-chains.ts
new file mode 100644
index 00000000000..8f24f6c8810
--- /dev/null
+++ b/apps/nebula/src/@/utils/nebula-chains.ts
@@ -0,0 +1,32 @@
+import { fetchChain } from "@/utils/fetchChain";
+import { unstable_cache } from "next/cache";
+import type { ChainMetadata } from "thirdweb/chains";
+
+export const getChainsForNebula = unstable_cache(
+  async (chainNamesOrIds: string[] | string | undefined) => {
+    if (!chainNamesOrIds) {
+      return [];
+    }
+
+    const chains: ChainMetadata[] = [];
+
+    const chainNames =
+      typeof chainNamesOrIds === "string" ? [chainNamesOrIds] : chainNamesOrIds;
+
+    const chainResults = await Promise.allSettled(
+      chainNames.map((x) => fetchChain(x)),
+    );
+
+    for (const chainResult of chainResults) {
+      if (chainResult.status === "fulfilled" && chainResult.value) {
+        chains.push(chainResult.value);
+      }
+    }
+
+    return chains;
+  },
+  ["getChainsForNebula"],
+  {
+    revalidate: 60 * 60 * 24, // 24 hours
+  },
+);
diff --git a/apps/nebula/src/@/utils/parse-error.tsx b/apps/nebula/src/@/utils/parse-error.tsx
new file mode 100644
index 00000000000..9b138f60e94
--- /dev/null
+++ b/apps/nebula/src/@/utils/parse-error.tsx
@@ -0,0 +1,111 @@
+import type { JSX } from "react";
+
+const UNKNOWN_ERROR_MESSAGE = "An unknown error occurred, please try again.";
+
+export function parseError(error: unknown): string | JSX.Element {
+  // if the error is a straight string just return it
+  if (typeof error === "string") {
+    return error;
+  }
+
+  // biome-ignore lint/suspicious/noExplicitAny: FIXME: remove any
+  if ((error as any)?.error?.message?.includes("execution reverted:")) {
+    // biome-ignore lint/suspicious/noExplicitAny: FIXME: remove any
+    return (error as any)?.error?.message;
+  }
+
+  // errors with code top level
+  if (isErrorWithCode(error)) {
+    const err = parseErrorCode(error);
+    if (err) {
+      return err;
+    }
+  }
+
+  // handle generic error instances
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  // handle rpc errors
+  if (
+    error &&
+    typeof error === "object" &&
+    "message" in error &&
+    typeof error.message === "string"
+  ) {
+    return error.message;
+  }
+
+  // everything that falls through here should be logged and sent to posthog
+  console.error("unknown error", error);
+  // posthog.capture("unknown_error", { error });
+  // worst case scenario send a generic error message back
+  return UNKNOWN_ERROR_MESSAGE;
+}
+
+interface ErrorWithCode extends Error {
+  code: number | string;
+  data: { code: number; message: string };
+  stack?: string;
+  reason?: string;
+}
+
+function isErrorWithCode(error: unknown): error is ErrorWithCode {
+  return (error as ErrorWithCode)?.code !== undefined;
+}
+
+function parseErrorCode(
+  error: ErrorWithCode,
+): string | JSX.Element | undefined {
+  switch (error.code) {
+    case "CALL_EXCEPTION": {
+      if (error.reason) {
+        return (
+          <>
+            The following error happened on the underlying Smart Contract:
+            <br />
+            <strong>{error.reason}</strong>
+          </>
+        );
+      }
+      return "An error occurred on the underlying Smart Contract.";
+    }
+    case -32602: {
+      return "You denied the transaction request.";
+    }
+    case -32603: {
+      if (error.message.includes("LEDGER_LOCKED")) {
+        return "This app does not currently work with ledger, please connect another way.";
+      }
+
+      if (error.message.includes("MetaMask Message Signature")) {
+        return `
+          There was an error with the metamask signature.
+          If you are using a Ledger wallet, make sure you go to settings
+          and enable the "Allow Contract Data" setting
+        `;
+      }
+
+      if (error.data?.message?.includes("max code size exceeded")) {
+        return `
+          This contract is bigger than the size limit (24,567 bytes).
+          You need to reduce the size of the contract before deploying.
+          We recommend enabling the optimizer in your compiler.
+        `;
+      }
+
+      return (
+        error?.data?.message ||
+        error?.message ||
+        "An internal error occurred with your transaction."
+      );
+    }
+    case -32002: {
+      return "There is already a pending request on your wallet to do that. Please check your wallet.";
+    }
+    case 4001: {
+      return "You denied the transaction request.";
+    }
+  }
+}
diff --git a/apps/nebula/src/@/utils/vercel-utils.ts b/apps/nebula/src/@/utils/vercel-utils.ts
new file mode 100644
index 00000000000..bd9a5e7a982
--- /dev/null
+++ b/apps/nebula/src/@/utils/vercel-utils.ts
@@ -0,0 +1,12 @@
+export function isVercel() {
+  return !!(process.env.vercel || process.env.NEXT_PUBLIC_VERCEL_ENV);
+}
+
+export function getVercelEnv() {
+  if (!isVercel()) {
+    return "development";
+  }
+  return (process.env.VERCEL_ENV ||
+    process.env.NEXT_PUBLIC_VERCEL_ENV ||
+    "production") as "production" | "preview" | "development";
+}
diff --git a/apps/nebula/src/@/utils/verifyTurnstileToken.ts b/apps/nebula/src/@/utils/verifyTurnstileToken.ts
new file mode 100644
index 00000000000..01f59fb31e5
--- /dev/null
+++ b/apps/nebula/src/@/utils/verifyTurnstileToken.ts
@@ -0,0 +1,71 @@
+import "server-only";
+import { TURNSTILE_SECRET_KEY } from "@/constants/server-envs";
+import { ipAddress } from "@vercel/functions";
+import { headers } from "next/headers";
+
+export async function verifyTurnstileToken(turnstileToken: string) {
+  // get the request headers
+  const requestHeaders = await headers();
+
+  // CF header, fallback to req.ip, then X-Forwarded-For
+  const [ip, errors] = (() => {
+    let ip: string | null = null;
+    const errors: string[] = [];
+    try {
+      ip = requestHeaders.get("CF-Connecting-IP") || null;
+    } catch (err) {
+      console.error("failed to get IP address from CF-Connecting-IP", err);
+      errors.push("failed to get IP address from CF-Connecting-IP");
+    }
+    if (!ip) {
+      try {
+        ip = ipAddress(requestHeaders) || null;
+      } catch (err) {
+        console.error(
+          "failed to get IP address from ipAddress() function",
+          err,
+        );
+        errors.push("failed to get IP address from ipAddress() function");
+      }
+    }
+    if (!ip) {
+      try {
+        ip = requestHeaders.get("X-Forwarded-For");
+      } catch (err) {
+        console.error("failed to get IP address from X-Forwarded-For", err);
+        errors.push("failed to get IP address from X-Forwarded-For");
+      }
+    }
+    return [ip, errors];
+  })();
+
+  if (!ip) {
+    return {
+      error: "Could not get IP address. Please try again.",
+      context: errors,
+    };
+  }
+
+  // https://developers.cloudflare.com/turnstile/get-started/server-side-validation/
+  // Validate the token by calling the "/siteverify" API endpoint.
+  const result = await fetch(
+    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
+    {
+      body: JSON.stringify({
+        secret: TURNSTILE_SECRET_KEY,
+        response: turnstileToken,
+        remoteip: ip,
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+
+  const outcome = await result.json();
+
+  return {
+    success: outcome.success as boolean,
+  };
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/api/chat.ts b/apps/nebula/src/app/(app)/api/chat.ts
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/api/chat.ts
rename to apps/nebula/src/app/(app)/api/chat.ts
index e30ef7591e3..28c162c3ac9 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/api/chat.ts
+++ b/apps/nebula/src/app/(app)/api/chat.ts
@@ -1,8 +1,6 @@
 import { NEXT_PUBLIC_NEBULA_URL } from "@/constants/public-envs";
-// TODO - copy the source of this library to dashboard
 import { stream } from "fetch-event-stream";
-import type { NebulaTxData } from "../components/Chats";
-import type { NebulaUserMessage } from "./types";
+import type { NebulaTxData, NebulaUserMessage } from "./types";
 
 export type NebulaContext = {
   chainIds: string[] | null;
diff --git a/apps/dashboard/src/app/nebula-app/(app)/api/feedback.ts b/apps/nebula/src/app/(app)/api/feedback.ts
similarity index 90%
rename from apps/dashboard/src/app/nebula-app/(app)/api/feedback.ts
rename to apps/nebula/src/app/(app)/api/feedback.ts
index aa4dda17468..4709f21884d 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/api/feedback.ts
+++ b/apps/nebula/src/app/(app)/api/feedback.ts
@@ -1,5 +1,5 @@
 import { NEXT_PUBLIC_NEBULA_URL } from "@/constants/public-envs";
-import { fetchWithAuthToken } from "utils/fetchWithAuthToken";
+import { fetchWithAuthToken } from "./fetchWithAuthToken";
 
 export async function submitFeedback(params: {
   authToken: string;
diff --git a/apps/dashboard/src/utils/fetchWithAuthToken.ts b/apps/nebula/src/app/(app)/api/fetchWithAuthToken.ts
similarity index 100%
rename from apps/dashboard/src/utils/fetchWithAuthToken.ts
rename to apps/nebula/src/app/(app)/api/fetchWithAuthToken.ts
diff --git a/apps/dashboard/src/app/nebula-app/(app)/api/session.ts b/apps/nebula/src/app/(app)/api/session.ts
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/api/session.ts
rename to apps/nebula/src/app/(app)/api/session.ts
index b0956b52def..338888f077c 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/api/session.ts
+++ b/apps/nebula/src/app/(app)/api/session.ts
@@ -1,6 +1,6 @@
 import { NEXT_PUBLIC_NEBULA_URL } from "@/constants/public-envs";
-import { fetchWithAuthToken } from "utils/fetchWithAuthToken";
 import type { NebulaContext } from "./chat";
+import { fetchWithAuthToken } from "./fetchWithAuthToken";
 import type {
   DeletedSessionInfo,
   SessionInfo,
diff --git a/apps/dashboard/src/app/nebula-app/(app)/api/types.ts b/apps/nebula/src/app/(app)/api/types.ts
similarity index 93%
rename from apps/dashboard/src/app/nebula-app/(app)/api/types.ts
rename to apps/nebula/src/app/(app)/api/types.ts
index fa4151957cd..a58d9cea23a 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/api/types.ts
+++ b/apps/nebula/src/app/(app)/api/types.ts
@@ -73,3 +73,10 @@ export type TruncatedSessionInfo = {
   updated_at: string;
   title: string | null;
 };
+
+export type NebulaTxData = {
+  chainId: number;
+  data: `0x${string}`;
+  to: string;
+  value?: string;
+};
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx b/apps/nebula/src/app/(app)/chat/[session_id]/page.tsx
similarity index 84%
rename from apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx
rename to apps/nebula/src/app/(app)/chat/[session_id]/page.tsx
index 36abb6f5c2e..a3b4df3c0fd 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx
+++ b/apps/nebula/src/app/(app)/chat/[session_id]/page.tsx
@@ -1,12 +1,12 @@
-import { redirect } from "next/navigation";
-import { loginRedirect } from "../../../../(app)/login/loginRedirect";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
 import {
   getNebulaAuthToken,
   getNebulaAuthTokenWalletAddress,
-} from "../../../_utils/authToken";
+} from "@/utils/authToken";
+import { loginRedirect } from "@/utils/loginRedirect";
+import { redirect } from "next/navigation";
 import { getSessionById } from "../../api/session";
 import { ChatPageContent } from "../../components/ChatPageContent";
-import { nebulaAppThirdwebClient } from "../../utils/nebulaThirdwebClient";
 
 export default async function Page(props: {
   params: Promise<{
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.stories.tsx b/apps/nebula/src/app/(app)/chat/history/ChatHistoryPage.stories.tsx
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.stories.tsx
rename to apps/nebula/src/app/(app)/chat/history/ChatHistoryPage.stories.tsx
index be82e096af3..005ab1b45a1 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.stories.tsx
+++ b/apps/nebula/src/app/(app)/chat/history/ChatHistoryPage.stories.tsx
@@ -1,6 +1,6 @@
+import { randomLorem } from "@/storybook/stubs";
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { subDays } from "date-fns";
-import { randomLorem } from "stories/stubs";
 import { ThirdwebProvider } from "thirdweb/react";
 import { ChatPageLayout } from "../../components/ChatPageLayout";
 import { ChatHistoryPageUI } from "./ChatHistoryPage";
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx b/apps/nebula/src/app/(app)/chat/history/ChatHistoryPage.tsx
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
rename to apps/nebula/src/app/(app)/chat/history/ChatHistoryPage.tsx
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/history/page.tsx b/apps/nebula/src/app/(app)/chat/history/page.tsx
similarity index 73%
rename from apps/dashboard/src/app/nebula-app/(app)/chat/history/page.tsx
rename to apps/nebula/src/app/(app)/chat/history/page.tsx
index db5a74ca263..59088c2d834 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/chat/history/page.tsx
+++ b/apps/nebula/src/app/(app)/chat/history/page.tsx
@@ -1,5 +1,5 @@
-import { loginRedirect } from "../../../../(app)/login/loginRedirect";
-import { getNebulaAuthToken } from "../../../_utils/authToken";
+import { getNebulaAuthToken } from "@/utils/authToken";
+import { loginRedirect } from "@/utils/loginRedirect";
 import { getSessions } from "../../api/session";
 import { ChatHistoryPage } from "./ChatHistoryPage";
 
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx b/apps/nebula/src/app/(app)/chat/page.tsx
similarity index 77%
rename from apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx
rename to apps/nebula/src/app/(app)/chat/page.tsx
index 19d0a4066f7..fb19eff12c4 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx
+++ b/apps/nebula/src/app/(app)/chat/page.tsx
@@ -1,10 +1,10 @@
-import { loginRedirect } from "../../../(app)/login/loginRedirect";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
 import {
   getNebulaAuthToken,
   getNebulaAuthTokenWalletAddress,
-} from "../../_utils/authToken";
+} from "@/utils/authToken";
+import { loginRedirect } from "@/utils/loginRedirect";
 import { ChatPageContent } from "../components/ChatPageContent";
-import { nebulaAppThirdwebClient } from "../utils/nebulaThirdwebClient";
 
 export default async function Page() {
   const [authToken, accountAddress] = await Promise.all([
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.stories.tsx b/apps/nebula/src/app/(app)/components/AssetsSection/AssetsSection.stories.tsx
similarity index 96%
rename from apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.stories.tsx
rename to apps/nebula/src/app/(app)/components/AssetsSection/AssetsSection.stories.tsx
index 0ce55683970..7d0f3b2fe2d 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.stories.tsx
+++ b/apps/nebula/src/app/(app)/components/AssetsSection/AssetsSection.stories.tsx
@@ -1,5 +1,5 @@
+import { storybookThirdwebClient } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { storybookThirdwebClient } from "../../../../../stories/utils";
 import { type AssetBalance, AssetsSectionUI } from "./AssetsSection";
 
 const meta = {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.tsx b/apps/nebula/src/app/(app)/components/AssetsSection/AssetsSection.tsx
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.tsx
rename to apps/nebula/src/app/(app)/components/AssetsSection/AssetsSection.tsx
index 34850ad15b1..9d3e5ba40ce 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/AssetsSection/AssetsSection.tsx
+++ b/apps/nebula/src/app/(app)/components/AssetsSection/AssetsSection.tsx
@@ -1,7 +1,10 @@
+"use client";
+import { ChainIconClient } from "@/components/blocks/ChainIcon";
 import { Skeleton } from "@/components/ui/skeleton";
 import { isProd } from "@/constants/env-utils";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
+import { useAllChainsData } from "@/hooks/chains";
 import { useQuery } from "@tanstack/react-query";
-import { useAllChainsData } from "hooks/chains/allChains";
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import {
@@ -19,8 +22,6 @@ import {
   useActiveWalletChain,
 } from "thirdweb/react";
 import { getWalletBalance } from "thirdweb/wallets";
-import { ChainIconClient } from "../../../../../components/icons/ChainIcon";
-import { nebulaAppThirdwebClient } from "../../utils/nebulaThirdwebClient";
 
 export type AssetBalance = {
   chain_id: number;
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/nebula/src/app/(app)/components/ChatBar.tsx
similarity index 99%
rename from apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
rename to apps/nebula/src/app/(app)/components/ChatBar.tsx
index bb056f78902..f4f5abb086a 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
+++ b/apps/nebula/src/app/(app)/components/ChatBar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { ChainIconClient } from "@/components/blocks/ChainIcon";
 import { Img } from "@/components/blocks/Img";
 import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
@@ -15,10 +16,9 @@ import {
 import { Skeleton } from "@/components/ui/skeleton";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { useAllChainsData } from "@/hooks/chains";
 import { cn } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
-import { ChainIconClient } from "components/icons/ChainIcon";
-import { useAllChainsData } from "hooks/chains/allChains";
 import {
   ArrowUpIcon,
   CheckIcon,
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/nebula/src/app/(app)/components/ChatPageContent.tsx
similarity index 99%
rename from apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
rename to apps/nebula/src/app/(app)/components/ChatPageContent.tsx
index d2eb06179a3..23f5bc9fbdf 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
+++ b/apps/nebula/src/app/(app)/components/ChatPageContent.tsx
@@ -448,7 +448,7 @@ function getLastUsedChainIds(): string[] | null {
   }
 }
 
-export async function handleNebulaPrompt(params: {
+async function handleNebulaPrompt(params: {
   abortController: AbortController;
   message: NebulaUserMessage;
   sessionId: string;
@@ -635,7 +635,7 @@ export async function handleNebulaPrompt(params: {
   }
 }
 
-export function handleNebulaPromptError(params: {
+function handleNebulaPromptError(params: {
   error: unknown;
   setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
 }) {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.stories.tsx b/apps/nebula/src/app/(app)/components/ChatPageLayout.stories.tsx
similarity index 96%
rename from apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.stories.tsx
rename to apps/nebula/src/app/(app)/components/ChatPageLayout.stories.tsx
index 7794895ab6a..e76654c1f07 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.stories.tsx
+++ b/apps/nebula/src/app/(app)/components/ChatPageLayout.stories.tsx
@@ -1,5 +1,5 @@
+import { randomLorem } from "@/storybook/stubs";
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { randomLorem } from "stories/stubs";
 import { ThirdwebProvider } from "thirdweb/react";
 import type { TruncatedSessionInfo } from "../api/types";
 import { ChatPageLayout } from "./ChatPageLayout";
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx b/apps/nebula/src/app/(app)/components/ChatPageLayout.tsx
similarity index 82%
rename from apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
rename to apps/nebula/src/app/(app)/components/ChatPageLayout.tsx
index 7c224c3712a..73bac5ae9b4 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
+++ b/apps/nebula/src/app/(app)/components/ChatPageLayout.tsx
@@ -1,8 +1,8 @@
+import { TWAutoConnect } from "@/components/blocks/auto-connect";
+import { nebulaAAOptions } from "@/config/nebula-aa";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
 import { cn } from "@/lib/utils";
-import { TWAutoConnect } from "../../../(app)/components/autoconnect";
-import { nebulaAAOptions } from "../../login/account-abstraction";
 import type { TruncatedSessionInfo } from "../api/types";
-import { nebulaAppThirdwebClient } from "../utils/nebulaThirdwebClient";
 import { ChatSidebar } from "./ChatSidebar";
 import { MobileNav } from "./NebulaMobileNav";
 
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx b/apps/nebula/src/app/(app)/components/ChatSidebar.tsx
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
rename to apps/nebula/src/app/(app)/components/ChatSidebar.tsx
index b9ea2e703c5..22acd26faca 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
+++ b/apps/nebula/src/app/(app)/components/ChatSidebar.tsx
@@ -1,10 +1,13 @@
 "use client";
+import { useIsClientMounted } from "@/components/blocks/client-only";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { TabButtons } from "@/components/ui/tabs";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
+import { NebulaIcon } from "@/icons/NebulaIcon";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
@@ -29,13 +32,10 @@ import {
 } from "thirdweb/react";
 import { WalletIcon, WalletName, WalletProvider } from "thirdweb/react";
 import { shortenAddress } from "thirdweb/utils";
-import { useIsClientMounted } from "../../../../components/ClientOnly/ClientOnly";
 import { doNebulaLogout } from "../../login/auth-actions";
 import type { TruncatedSessionInfo } from "../api/types";
 import { useNewChatPageLink } from "../hooks/useNewChatPageLink";
 import { useSessionsWithLocalOverrides } from "../hooks/useSessionsWithLocalOverrides";
-import { NebulaIcon } from "../icons/NebulaIcon";
-import { nebulaAppThirdwebClient } from "../utils/nebulaThirdwebClient";
 import { AssetsSection } from "./AssetsSection/AssetsSection";
 import { ChatSidebarLink } from "./ChatSidebarLink";
 import { NebulaConnectWallet } from "./NebulaConnectButton";
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx b/apps/nebula/src/app/(app)/components/ChatSidebarLink.tsx
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx
rename to apps/nebula/src/app/(app)/components/ChatSidebarLink.tsx
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx b/apps/nebula/src/app/(app)/components/Chatbar.stories.tsx
similarity index 98%
rename from apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx
rename to apps/nebula/src/app/(app)/components/Chatbar.stories.tsx
index efe95599e30..e3b26e0b53a 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx
+++ b/apps/nebula/src/app/(app)/components/Chatbar.stories.tsx
@@ -1,6 +1,6 @@
+import { BadgeContainer, storybookThirdwebClient } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
-import { BadgeContainer, storybookThirdwebClient } from "stories/utils";
 import { ThirdwebProvider } from "thirdweb/react";
 import type { NebulaContext } from "../api/chat";
 import { ChatBar, type WalletMeta } from "./ChatBar";
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx b/apps/nebula/src/app/(app)/components/Chats.stories.tsx
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
rename to apps/nebula/src/app/(app)/components/Chats.stories.tsx
index 725777ec355..f208cfda275 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
+++ b/apps/nebula/src/app/(app)/components/Chats.stories.tsx
@@ -1,6 +1,6 @@
+import { randomLorem } from "@/storybook/stubs";
+import { storybookThirdwebClient } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { randomLorem } from "stories/stubs";
-import { storybookThirdwebClient } from "stories/utils";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { type ChatMessage, Chats } from "./Chats";
 
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx b/apps/nebula/src/app/(app)/components/Chats.tsx
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
rename to apps/nebula/src/app/(app)/components/Chats.tsx
index 484c0e0c0d7..a26fb050c8f 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
+++ b/apps/nebula/src/app/(app)/components/Chats.tsx
@@ -1,25 +1,22 @@
+import { MarkdownRenderer } from "@/components/blocks/MarkdownRenderer/markdown-renderer";
 import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { NebulaIcon } from "@/icons/NebulaIcon";
 import { cn } from "@/lib/utils";
-import { MarkdownRenderer } from "components/contract-components/published-contract/markdown-renderer";
 import { AlertCircleIcon } from "lucide-react";
 import { useEffect, useRef } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import type { NebulaSwapData } from "../api/chat";
-import type { NebulaUserMessage, NebulaUserMessageContent } from "../api/types";
-import { NebulaIcon } from "../icons/NebulaIcon";
+import type {
+  NebulaTxData,
+  NebulaUserMessage,
+  NebulaUserMessageContent,
+} from "../api/types";
 import { ExecuteTransactionCard } from "./ExecuteTransactionCard";
 import { MessageActions } from "./MessageActions";
 import { NebulaImage } from "./NebulaImage";
 import { Reasoning } from "./Reasoning/Reasoning";
 import { ApproveTransactionCard, SwapTransactionCard } from "./Swap/SwapCards";
 
-export type NebulaTxData = {
-  chainId: number;
-  data: `0x${string}`;
-  to: string;
-  value?: string;
-};
-
 export type ChatMessage =
   | {
       type: "user";
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx b/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.stories.tsx
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
rename to apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.stories.tsx
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx b/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
rename to apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
index d23f9e02ba3..5ae493dae34 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
+++ b/apps/nebula/src/app/(app)/components/EmptyStateChatPageContent.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
+import { NebulaIcon } from "@/icons/NebulaIcon";
 import { cn } from "@/lib/utils";
 import { ArrowUpRightIcon } from "lucide-react";
 import type { NebulaContext } from "../api/chat";
 import type { NebulaUserMessage } from "../api/types";
 import { examplePrompts } from "../data/examplePrompts";
-import { NebulaIcon } from "../icons/NebulaIcon";
-import { nebulaAppThirdwebClient } from "../utils/nebulaThirdwebClient";
 import { ChatBar, type WalletMeta } from "./ChatBar";
 
 export function EmptyStateChatPageContent(props: {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx b/apps/nebula/src/app/(app)/components/ExecuteTransactionCard.stories.tsx
similarity index 98%
rename from apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx
rename to apps/nebula/src/app/(app)/components/ExecuteTransactionCard.stories.tsx
index 8809bd5b4f3..9bdc67343d3 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx
+++ b/apps/nebula/src/app/(app)/components/ExecuteTransactionCard.stories.tsx
@@ -1,10 +1,10 @@
-import type { Meta, StoryObj } from "@storybook/nextjs";
-import { useState } from "react";
 import {
   BadgeContainer,
   storybookLog,
   storybookThirdwebClient,
-} from "stories/utils";
+} from "@/storybook/utils";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { useState } from "react";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { ExecuteTransactionCardLayout } from "./ExecuteTransactionCard";
 import type { TxStatus } from "./Swap/common";
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx b/apps/nebula/src/app/(app)/components/ExecuteTransactionCard.tsx
similarity index 94%
rename from apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
rename to apps/nebula/src/app/(app)/components/ExecuteTransactionCard.tsx
index abb384b03fc..693d0611af8 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
+++ b/apps/nebula/src/app/(app)/components/ExecuteTransactionCard.tsx
@@ -1,16 +1,16 @@
+import { ChainIconClient } from "@/components/blocks/ChainIcon";
+import { TransactionButton } from "@/components/blocks/buttons/TransactionButton";
 import { WalletAddress } from "@/components/blocks/wallet-address";
-import { TransactionButton } from "components/buttons/TransactionButton";
-import { ChainIconClient } from "components/icons/ChainIcon";
-import { useV5DashboardChain } from "lib/v5-adapter";
 import { ArrowRightLeftIcon } from "lucide-react";
 import {
   type PreparedTransaction,
   type ThirdwebClient,
+  defineChain,
   prepareTransaction,
   toEther,
 } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
-import type { NebulaTxData } from "./Chats";
+import type { NebulaTxData } from "../api/types";
 import {
   TxHashRow,
   type TxStatus,
@@ -49,7 +49,7 @@ export function ExecuteTransactionCardLayout(props: {
   ) => Promise<void>;
 }) {
   const { txData } = props;
-  const chain = useV5DashboardChain(txData.chainId);
+  const chain = defineChain(txData.chainId);
   const account = useActiveAccount();
 
   return (
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/MessageActions.tsx b/apps/nebula/src/app/(app)/components/MessageActions.tsx
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/components/MessageActions.tsx
rename to apps/nebula/src/app/(app)/components/MessageActions.tsx
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaConnectButton.tsx b/apps/nebula/src/app/(app)/components/NebulaConnectButton.tsx
similarity index 93%
rename from apps/dashboard/src/app/nebula-app/(app)/components/NebulaConnectButton.tsx
rename to apps/nebula/src/app/(app)/components/NebulaConnectButton.tsx
index c7f6e860e10..12a9894e7b3 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaConnectButton.tsx
+++ b/apps/nebula/src/app/(app)/components/NebulaConnectButton.tsx
@@ -2,10 +2,11 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
+import { getSDKTheme } from "@/config/sdk-component-theme";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
+import { useAllChainsData } from "@/hooks/chains";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
-import { getSDKTheme } from "app/(app)/components/sdk-component-theme";
-import { useAllChainsData } from "hooks/chains/allChains";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -15,7 +16,6 @@ import {
   useActiveWalletConnectionStatus,
 } from "thirdweb/react";
 import { doNebulaLogout } from "../../login/auth-actions";
-import { nebulaAppThirdwebClient } from "../utils/nebulaThirdwebClient";
 
 export const NebulaConnectWallet = (props: {
   connectButtonClassName?: string;
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaImage.tsx b/apps/nebula/src/app/(app)/components/NebulaImage.tsx
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/components/NebulaImage.tsx
rename to apps/nebula/src/app/(app)/components/NebulaImage.tsx
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx b/apps/nebula/src/app/(app)/components/NebulaMobileNav.tsx
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
rename to apps/nebula/src/app/(app)/components/NebulaMobileNav.tsx
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.stories.tsx b/apps/nebula/src/app/(app)/components/Reasoning/Reasoning.stories.tsx
similarity index 92%
rename from apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.stories.tsx
rename to apps/nebula/src/app/(app)/components/Reasoning/Reasoning.stories.tsx
index a025dafafa9..db8c31a55d6 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.stories.tsx
+++ b/apps/nebula/src/app/(app)/components/Reasoning/Reasoning.stories.tsx
@@ -1,5 +1,5 @@
+import { randomLorem } from "@/storybook/stubs";
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { randomLorem } from "../../../../../stories/stubs";
 import { Reasoning } from "./Reasoning";
 
 const meta = {
diff --git a/apps/nebula/src/app/(app)/components/Reasoning/Reasoning.tsx b/apps/nebula/src/app/(app)/components/Reasoning/Reasoning.tsx
new file mode 100644
index 00000000000..2ce50e01590
--- /dev/null
+++ b/apps/nebula/src/app/(app)/components/Reasoning/Reasoning.tsx
@@ -0,0 +1,65 @@
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { Button } from "@/components/ui/button";
+import { TextShimmer } from "@/components/ui/text-shimmer";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+
+export function Reasoning(props: {
+  isPending: boolean;
+  texts: string[];
+}) {
+  const [_isOpen, setIsOpen] = useState(false);
+  const isOpen = props.isPending ? true : _isOpen;
+  const showAll = !props.isPending;
+  const lastText = props.texts[props.texts.length - 1];
+
+  return (
+    <DynamicHeight>
+      <Button
+        variant="link"
+        size="sm"
+        onClick={() => setIsOpen(!isOpen)}
+        className="h-auto w-auto items-center gap-1 px-0 py-1 pb-2 font-normal text-base text-muted-foreground hover:text-foreground hover:no-underline"
+      >
+        {props.isPending ? (
+          <TextShimmer text="Reasoning..." />
+        ) : (
+          <span className="text-foreground">Reasoning</span>
+        )}
+
+        {!props.isPending && (
+          <ChevronDownIcon
+            className={cn(
+              "size-4 transition-transform",
+              isOpen && "rotate-180",
+            )}
+          />
+        )}
+      </Button>
+
+      {isOpen && (
+        <>
+          {showAll && props.texts.length > 0 && (
+            <ul className="list-none space-y-1.5">
+              {props.texts.map((text) => (
+                <li
+                  key={text}
+                  className="fade-in-0 animate-in text-muted-foreground text-sm leading-relaxed duration-300"
+                >
+                  {text.trim()}
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {!showAll && lastText && (
+            <div className="text-muted-foreground text-sm leading-relaxed">
+              {lastText.trim()}
+            </div>
+          )}
+        </>
+      )}
+    </DynamicHeight>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Swap/SwapCards.stories.tsx b/apps/nebula/src/app/(app)/components/Swap/SwapCards.stories.tsx
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/components/Swap/SwapCards.stories.tsx
rename to apps/nebula/src/app/(app)/components/Swap/SwapCards.stories.tsx
index 4604d0d0331..49197accaba 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Swap/SwapCards.stories.tsx
+++ b/apps/nebula/src/app/(app)/components/Swap/SwapCards.stories.tsx
@@ -1,6 +1,6 @@
+import { BadgeContainer, storybookThirdwebClient } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
-import { BadgeContainer, storybookThirdwebClient } from "stories/utils";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import type { NebulaSwapData } from "../../api/chat";
 import {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Swap/SwapCards.tsx b/apps/nebula/src/app/(app)/components/Swap/SwapCards.tsx
similarity index 95%
rename from apps/dashboard/src/app/nebula-app/(app)/components/Swap/SwapCards.tsx
rename to apps/nebula/src/app/(app)/components/Swap/SwapCards.tsx
index ade5afba0c6..17b4d9ddc97 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Swap/SwapCards.tsx
+++ b/apps/nebula/src/app/(app)/components/Swap/SwapCards.tsx
@@ -1,15 +1,15 @@
-import { TransactionButton } from "components/buttons/TransactionButton";
-import { useV5DashboardChain } from "lib/v5-adapter";
+import { ChainIconClient } from "@/components/blocks/ChainIcon";
+import { TransactionButton } from "@/components/blocks/buttons/TransactionButton";
 import { ArrowRightLeftIcon, CheckIcon } from "lucide-react";
 import {
   NATIVE_TOKEN_ADDRESS,
   type PreparedTransaction,
   type ThirdwebClient,
+  defineChain,
   getAddress,
   prepareTransaction,
   toTokens,
 } from "thirdweb";
-import { ChainIconClient } from "../../../../../components/icons/ChainIcon";
 import type { NebulaSwapData } from "../../api/chat";
 import { TxHashRow, type TxStatus, TxStatusRow, useTxSetup } from "./common";
 
@@ -39,7 +39,7 @@ export function SwapTransactionCardLayout(props: {
   sendTx: (tx: PreparedTransaction) => Promise<void>;
 }) {
   const { swapData } = props;
-  const txChain = useV5DashboardChain(swapData.transaction.chainId);
+  const txChain = defineChain(swapData.transaction.chainId);
 
   const isSellingNativeToken =
     getAddress(swapData.from.address) === getAddress(NATIVE_TOKEN_ADDRESS);
@@ -156,7 +156,7 @@ export function ApproveTransactionCardLayout(props: {
   sendTx: (tx: PreparedTransaction) => Promise<void>;
 }) {
   const { swapData } = props;
-  const txChain = useV5DashboardChain(swapData.transaction.chainId);
+  const txChain = defineChain(swapData.transaction.chainId);
 
   const isTransactionPending =
     props.status.type === "sending" || props.status.type === "confirming";
@@ -250,7 +250,7 @@ function TokenRow(props: {
   title: string;
   decimals: number;
 }) {
-  const chain = useV5DashboardChain(props.chainId);
+  const chain = defineChain(props.chainId);
   const tokenDisplayValue = toTokens(BigInt(props.amount), props.decimals);
   return (
     <div className="flex items-start justify-between gap-2">
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Swap/common.tsx b/apps/nebula/src/app/(app)/components/Swap/common.tsx
similarity index 85%
rename from apps/dashboard/src/app/nebula-app/(app)/components/Swap/common.tsx
rename to apps/nebula/src/app/(app)/components/Swap/common.tsx
index 62d59dce2ee..4493792c231 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Swap/common.tsx
+++ b/apps/nebula/src/app/(app)/components/Swap/common.tsx
@@ -1,8 +1,10 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
+import { getSDKTheme } from "@/config/sdk-component-theme";
+import { useAllChainsData } from "@/hooks/chains";
 import { cn } from "@/lib/utils";
-import { useTrack } from "hooks/analytics/useTrack";
+// import { useTrack } from "hooks/analytics/useTrack";
 import { CircleCheckIcon, CircleXIcon } from "lucide-react";
 import { ExternalLinkIcon } from "lucide-react";
 import { useTheme } from "next-themes";
@@ -10,8 +12,6 @@ import Link from "next/link";
 import { useCallback, useState } from "react";
 import { type PreparedTransaction, waitForReceipt } from "thirdweb";
 import { useSendTransaction } from "thirdweb/react";
-import { getSDKTheme } from "../../../../(app)/components/sdk-component-theme";
-import { useV5DashboardChain } from "../../../../../lib/v5-adapter";
 
 export type TxStatus =
   | {
@@ -81,8 +81,9 @@ export function TxHashRow(props: {
   chainId: number;
   txHash: string;
 }) {
-  const chain = useV5DashboardChain(props.chainId);
-  const explorer = chain.blockExplorers?.[0]?.url;
+  const { idToChain } = useAllChainsData();
+  const chainMetadata = idToChain.get(props.chainId);
+  const explorer = chainMetadata?.explorers?.[0]?.url;
 
   return (
     <div className="flex items-center justify-between gap-1">
@@ -127,7 +128,7 @@ export function useTxSetup() {
     },
   });
 
-  const trackEvent = useTrack();
+  // const trackEvent = useTrack();
 
   const sendTx = useCallback(
     async (
@@ -136,11 +137,11 @@ export function useTxSetup() {
     ) => {
       let txHash: string | undefined;
 
-      trackEvent({
-        category: "nebula",
-        action: "execute_transaction",
-        label: "attempt",
-      });
+      // trackEvent({
+      //   category: "nebula",
+      //   action: "execute_transaction",
+      //   label: "attempt",
+      // });
 
       try {
         // submit transaction
@@ -148,11 +149,11 @@ export function useTxSetup() {
         const submittedReceipt = await sendTransaction.mutateAsync(tx);
         txHash = submittedReceipt.transactionHash;
 
-        trackEvent({
-          category: "nebula",
-          action: "execute_transaction",
-          label: "sent",
-        });
+        // trackEvent({
+        //   category: "nebula",
+        //   action: "execute_transaction",
+        //   label: "sent",
+        // });
 
         // wait for receipt
         setStatus({
@@ -169,11 +170,11 @@ export function useTxSetup() {
 
         onTxSettled?.(txHash);
 
-        trackEvent({
-          category: "nebula",
-          action: "execute_transaction",
-          label: "confirmed",
-        });
+        // trackEvent({
+        //   category: "nebula",
+        //   action: "execute_transaction",
+        //   label: "confirmed",
+        // });
       } catch (e) {
         console.error(e);
         if (txHash) {
@@ -185,7 +186,7 @@ export function useTxSetup() {
         });
       }
     },
-    [sendTransaction, trackEvent],
+    [sendTransaction],
   );
 
   return {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/TransactionsSection/TransactionsSection.stories.tsx b/apps/nebula/src/app/(app)/components/TransactionsSection/TransactionsSection.stories.tsx
similarity index 98%
rename from apps/dashboard/src/app/nebula-app/(app)/components/TransactionsSection/TransactionsSection.stories.tsx
rename to apps/nebula/src/app/(app)/components/TransactionsSection/TransactionsSection.stories.tsx
index e7f6272f9f7..f8ce96179f0 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/TransactionsSection/TransactionsSection.stories.tsx
+++ b/apps/nebula/src/app/(app)/components/TransactionsSection/TransactionsSection.stories.tsx
@@ -1,5 +1,5 @@
+import { storybookThirdwebClient } from "@/storybook/utils";
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { storybookThirdwebClient } from "../../../../../stories/utils";
 import {
   TransactionSectionUI,
   type WalletTransaction,
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/TransactionsSection/TransactionsSection.tsx b/apps/nebula/src/app/(app)/components/TransactionsSection/TransactionsSection.tsx
similarity index 96%
rename from apps/dashboard/src/app/nebula-app/(app)/components/TransactionsSection/TransactionsSection.tsx
rename to apps/nebula/src/app/(app)/components/TransactionsSection/TransactionsSection.tsx
index a32b263f171..fa94394cecd 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/TransactionsSection/TransactionsSection.tsx
+++ b/apps/nebula/src/app/(app)/components/TransactionsSection/TransactionsSection.tsx
@@ -1,14 +1,14 @@
+import { ChainIconClient } from "@/components/blocks/ChainIcon";
 import { Skeleton } from "@/components/ui/skeleton";
 import { isProd } from "@/constants/env-utils";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
+import { useAllChainsData } from "@/hooks/chains";
 import { useQuery } from "@tanstack/react-query";
-import { useAllChainsData } from "hooks/chains/allChains";
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import { shortenAddress } from "thirdweb/utils";
-import { ChainIconClient } from "../../../../../components/icons/ChainIcon";
-import { nebulaAppThirdwebClient } from "../../utils/nebulaThirdwebClient";
 
 // Note: this is not the full object type returned from insight API, it only includes fields we care about
 export type WalletTransaction = {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/data/examplePrompts.ts b/apps/nebula/src/app/(app)/data/examplePrompts.ts
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/(app)/data/examplePrompts.ts
rename to apps/nebula/src/app/(app)/data/examplePrompts.ts
index 238cf6e42f6..951ea5a8098 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/data/examplePrompts.ts
+++ b/apps/nebula/src/app/(app)/data/examplePrompts.ts
@@ -1,4 +1,4 @@
-export type ExamplePrompt = {
+type ExamplePrompt = {
   title: string;
   message: string;
   interceptedReply?: string;
@@ -68,7 +68,7 @@ Add more info for more fun:
 - Decimal places (default 18)
 - Image URL
 
-If you want, I can generate an image for it too. 
+If you want, I can generate an image for it too.
 `;
 
 const buyUsdcReply = `
diff --git a/apps/dashboard/src/app/nebula-app/(app)/hooks/useNewChatPageLink.ts b/apps/nebula/src/app/(app)/hooks/useNewChatPageLink.ts
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/hooks/useNewChatPageLink.ts
rename to apps/nebula/src/app/(app)/hooks/useNewChatPageLink.ts
diff --git a/apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts b/apps/nebula/src/app/(app)/hooks/useSessionsWithLocalOverrides.ts
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts
rename to apps/nebula/src/app/(app)/hooks/useSessionsWithLocalOverrides.ts
diff --git a/apps/dashboard/src/app/nebula-app/(app)/layout.tsx b/apps/nebula/src/app/(app)/layout.tsx
similarity index 82%
rename from apps/dashboard/src/app/nebula-app/(app)/layout.tsx
rename to apps/nebula/src/app/(app)/layout.tsx
index 845ab83f875..d0fa7ddf0a0 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/layout.tsx
+++ b/apps/nebula/src/app/(app)/layout.tsx
@@ -1,6 +1,6 @@
+import { getNebulaLoginStatus } from "@/utils/isLoggedIntoNebula";
+import { loginRedirect } from "@/utils/loginRedirect";
 import type React from "react";
-import { loginRedirect } from "../../(app)/login/loginRedirect";
-import { getNebulaLoginStatus } from "../_utils/isLoggedIntoNebula";
 import { getSessions } from "./api/session";
 import { ChatPageLayout } from "./components/ChatPageLayout";
 
diff --git a/apps/dashboard/src/app/nebula-app/(app)/page.tsx b/apps/nebula/src/app/(app)/page.tsx
similarity index 85%
rename from apps/dashboard/src/app/nebula-app/(app)/page.tsx
rename to apps/nebula/src/app/(app)/page.tsx
index 541a0c0c884..3853d42b51f 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/page.tsx
+++ b/apps/nebula/src/app/(app)/page.tsx
@@ -1,11 +1,11 @@
-import { loginRedirect } from "../../(app)/login/loginRedirect";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
 import {
   getNebulaAuthToken,
   getNebulaAuthTokenWalletAddress,
-} from "../_utils/authToken";
+} from "@/utils/authToken";
+import { loginRedirect } from "../../@/utils/loginRedirect";
 import { ChatPageContent } from "./components/ChatPageContent";
 import { getChainsForNebula } from "./utils/getChainIds";
-import { nebulaAppThirdwebClient } from "./utils/nebulaThirdwebClient";
 
 export default async function Page(props: {
   searchParams: Promise<{
diff --git a/apps/dashboard/src/app/nebula-app/(app)/stores.ts b/apps/nebula/src/app/(app)/stores.ts
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/(app)/stores.ts
rename to apps/nebula/src/app/(app)/stores.ts
diff --git a/apps/dashboard/src/app/nebula-app/(app)/utils/getChainIds.ts b/apps/nebula/src/app/(app)/utils/getChainIds.ts
similarity index 94%
rename from apps/dashboard/src/app/nebula-app/(app)/utils/getChainIds.ts
rename to apps/nebula/src/app/(app)/utils/getChainIds.ts
index eee67924e13..8f24f6c8810 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/utils/getChainIds.ts
+++ b/apps/nebula/src/app/(app)/utils/getChainIds.ts
@@ -1,6 +1,6 @@
+import { fetchChain } from "@/utils/fetchChain";
 import { unstable_cache } from "next/cache";
 import type { ChainMetadata } from "thirdweb/chains";
-import { fetchChain } from "utils/fetchChain";
 
 export const getChainsForNebula = unstable_cache(
   async (chainNamesOrIds: string[] | string | undefined) => {
diff --git a/apps/nebula/src/app/layout.tsx b/apps/nebula/src/app/layout.tsx
index 2f0214cdd2c..a3a2fb01ddf 100644
--- a/apps/nebula/src/app/layout.tsx
+++ b/apps/nebula/src/app/layout.tsx
@@ -1,12 +1,51 @@
+import type { Metadata } from "next";
+import "../global.css";
+import { DashboardRouterTopProgressBar } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
+import { Inter } from "next/font/google";
+import NextTopLoader from "nextjs-toploader";
+import { NebulaProviders } from "./providers";
+
+const title =
+  "thirdweb Nebula: The Most powerful AI for interacting with the blockchain";
+const description =
+  "The most powerful AI for interacting with the blockchain, with real-time access to EVM chains and their data";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+  },
+};
+
+const fontSans = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  display: "swap",
+});
+
 export default function Layout(props: {
   children: React.ReactNode;
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="/assets/nebula/favicon.ico" />
       </head>
-      <body>{props.children}</body>
+      <body
+        className={cn("bg-background font-sans antialiased", fontSans.variable)}
+      >
+        <NebulaProviders>{props.children}</NebulaProviders>
+        <DashboardRouterTopProgressBar />
+        <NextTopLoader
+          color="hsl(var(--foreground))"
+          height={3}
+          shadow={false}
+          showSpinner={false}
+        />
+      </body>
     </html>
   );
 }
diff --git a/apps/dashboard/src/app/nebula-app/login/NebulaConnectEmbedLogin.tsx b/apps/nebula/src/app/login/NebulaConnectEmbedLogin.tsx
similarity index 94%
rename from apps/dashboard/src/app/nebula-app/login/NebulaConnectEmbedLogin.tsx
rename to apps/nebula/src/app/login/NebulaConnectEmbedLogin.tsx
index 2ca3c656144..445bf5aadb1 100644
--- a/apps/dashboard/src/app/nebula-app/login/NebulaConnectEmbedLogin.tsx
+++ b/apps/nebula/src/app/login/NebulaConnectEmbedLogin.tsx
@@ -1,12 +1,15 @@
 "use client";
 
+import { ClientOnly } from "@/components/blocks/client-only";
 import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { nebulaAAOptions } from "@/config/nebula-aa";
+import { getSDKTheme } from "@/config/sdk-component-theme";
+import { nebulaAppThirdwebClient } from "@/constants/nebula-client";
 import { NEXT_PUBLIC_TURNSTILE_SITE_KEY } from "@/constants/public-envs";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { isVercel } from "@/utils/vercel-utils";
 import { Turnstile } from "@marsidev/react-turnstile";
-import { ClientOnly } from "components/ClientOnly/ClientOnly";
-import { isVercel } from "lib/vercel-utils";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
@@ -16,9 +19,6 @@ import {
   useActiveWalletConnectionStatus,
 } from "thirdweb/react";
 import { createWallet, inAppWallet } from "thirdweb/wallets";
-import { nebulaAppThirdwebClient } from "../(app)/utils/nebulaThirdwebClient";
-import { getSDKTheme } from "../../(app)/components/sdk-component-theme";
-import { nebulaAAOptions } from "./account-abstraction";
 import {
   doNebulaLogin,
   doNebulaLogout,
diff --git a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx b/apps/nebula/src/app/login/NebulaLoginPage.tsx
similarity index 98%
rename from apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
rename to apps/nebula/src/app/login/NebulaLoginPage.tsx
index 40d324d707b..406b00dd7e5 100644
--- a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
+++ b/apps/nebula/src/app/login/NebulaLoginPage.tsx
@@ -2,10 +2,10 @@
 
 import { ToggleThemeButton } from "@/components/color-mode-toggle";
 import { Button } from "@/components/ui/button";
+import { NebulaIcon } from "@/icons/NebulaIcon";
 import Link from "next/link";
 import { useState } from "react";
 import { EmptyStateChatPageContent } from "../(app)/components/EmptyStateChatPageContent";
-import { NebulaIcon } from "../(app)/icons/NebulaIcon";
 import { NebulaLoginPage } from "./NebulaConnectEmbedLogin";
 
 export function NebulaLoggedOutStatePage(props: {
diff --git a/apps/dashboard/src/app/nebula-app/login/auth-actions.ts b/apps/nebula/src/app/login/auth-actions.ts
similarity index 97%
rename from apps/dashboard/src/app/nebula-app/login/auth-actions.ts
rename to apps/nebula/src/app/login/auth-actions.ts
index 5c588f428aa..250ef706890 100644
--- a/apps/dashboard/src/app/nebula-app/login/auth-actions.ts
+++ b/apps/nebula/src/app/login/auth-actions.ts
@@ -1,9 +1,14 @@
 "use server";
 import "server-only";
 
+import {
+  NEBULA_COOKIE_ACTIVE_ACCOUNT,
+  NEBULA_COOKIE_PREFIX_TOKEN,
+} from "@/constants/cookies";
 import { NEXT_PUBLIC_NEBULA_URL } from "@/constants/public-envs";
 import { NEBULA_APP_SECRET_KEY } from "@/constants/server-envs";
-import { isVercel } from "lib/vercel-utils";
+import { isVercel } from "@/utils/vercel-utils";
+import { verifyTurnstileToken } from "@/utils/verifyTurnstileToken";
 import { cookies } from "next/headers";
 import { getAddress } from "thirdweb";
 import type {
@@ -11,11 +16,6 @@ import type {
   LoginPayload,
   VerifyLoginPayloadParams,
 } from "thirdweb/auth";
-import { verifyTurnstileToken } from "../../(app)/login/verifyTurnstileToken";
-import {
-  NEBULA_COOKIE_ACTIVE_ACCOUNT,
-  NEBULA_COOKIE_PREFIX_TOKEN,
-} from "../_utils/constants";
 
 const FOURTEEN_DAYS_IN_SECONDS = 14 * 24 * 60 * 60;
 
diff --git a/apps/dashboard/src/app/nebula-app/login/page.tsx b/apps/nebula/src/app/login/page.tsx
similarity index 84%
rename from apps/dashboard/src/app/nebula-app/login/page.tsx
rename to apps/nebula/src/app/login/page.tsx
index 61dbd1f013b..62f378e2d4d 100644
--- a/apps/dashboard/src/app/nebula-app/login/page.tsx
+++ b/apps/nebula/src/app/login/page.tsx
@@ -1,5 +1,5 @@
-import { getChainsForNebula } from "../(app)/utils/getChainIds";
-import { getNebulaAuthToken } from "../_utils/authToken";
+import { getNebulaAuthToken } from "@/utils/authToken";
+import { getChainsForNebula } from "@/utils/nebula-chains";
 import { NebulaLoggedOutStatePage } from "./NebulaLoginPage";
 
 export default async function NebulaLogin(props: {
diff --git a/apps/dashboard/src/app/nebula-app/move-funds/connect-button.tsx b/apps/nebula/src/app/move-funds/connect-button.tsx
similarity index 80%
rename from apps/dashboard/src/app/nebula-app/move-funds/connect-button.tsx
rename to apps/nebula/src/app/move-funds/connect-button.tsx
index e4d060ad406..87e0626d67a 100644
--- a/apps/dashboard/src/app/nebula-app/move-funds/connect-button.tsx
+++ b/apps/nebula/src/app/move-funds/connect-button.tsx
@@ -1,14 +1,14 @@
 "use client";
 
+import { nebulaAAOptions } from "@/config/nebula-aa";
+import { getSDKTheme } from "@/config/sdk-component-theme";
 import { useTheme } from "next-themes";
 import { ConnectButton } from "thirdweb/react";
 import { inAppWallet } from "thirdweb/wallets";
-import { getSDKTheme } from "../../(app)/components/sdk-component-theme";
-import { getClientThirdwebClient } from "../../../@/constants/thirdweb-client.client";
-import { nebulaAAOptions } from "../login/account-abstraction";
+import { getClientDashboardThirdwebClient } from "./dashboard-client";
 
 // use dashboard client to allow users to connect to their original wallet and move funds to a different wallet
-const dashboardClient = getClientThirdwebClient();
+const dashboardClient = getClientDashboardThirdwebClient();
 
 // since only the inApp and smart wallets were affected, only show in-app option
 const loginOptions = [
diff --git a/apps/nebula/src/app/move-funds/dashboard-client.ts b/apps/nebula/src/app/move-funds/dashboard-client.ts
new file mode 100644
index 00000000000..4a8909f718a
--- /dev/null
+++ b/apps/nebula/src/app/move-funds/dashboard-client.ts
@@ -0,0 +1,42 @@
+import {
+  NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
+  NEXT_PUBLIC_IPFS_GATEWAY_URL,
+} from "@/constants/public-envs";
+import {
+  THIRDWEB_BRIDGE_URL,
+  THIRDWEB_BUNDLER_DOMAIN,
+  THIRDWEB_INAPP_WALLET_DOMAIN,
+  THIRDWEB_INSIGHT_API_DOMAIN,
+  THIRDWEB_PAY_DOMAIN,
+  THIRDWEB_RPC_DOMAIN,
+  THIRDWEB_SOCIAL_API_DOMAIN,
+  THIRDWEB_STORAGE_DOMAIN,
+} from "@/constants/urls";
+import { getVercelEnv } from "@/utils/vercel-utils";
+import { type ThirdwebClient, createThirdwebClient } from "thirdweb";
+import { setThirdwebDomains } from "thirdweb/utils";
+
+export function getClientDashboardThirdwebClient(): ThirdwebClient {
+  if (getVercelEnv() !== "production") {
+    // if not on production: run this when creating a client to set the domains
+    setThirdwebDomains({
+      rpc: THIRDWEB_RPC_DOMAIN,
+      inAppWallet: THIRDWEB_INAPP_WALLET_DOMAIN,
+      pay: THIRDWEB_PAY_DOMAIN,
+      storage: THIRDWEB_STORAGE_DOMAIN,
+      social: THIRDWEB_SOCIAL_API_DOMAIN,
+      bundler: THIRDWEB_BUNDLER_DOMAIN,
+      insight: THIRDWEB_INSIGHT_API_DOMAIN,
+      bridge: THIRDWEB_BRIDGE_URL,
+    });
+  }
+
+  return createThirdwebClient({
+    clientId: NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
+    config: {
+      storage: {
+        gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,
+      },
+    },
+  });
+}
diff --git a/apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx b/apps/nebula/src/app/move-funds/move-funds.tsx
similarity index 98%
rename from apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx
rename to apps/nebula/src/app/move-funds/move-funds.tsx
index 2bcc095a443..53884e6a7b4 100644
--- a/apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx
+++ b/apps/nebula/src/app/move-funds/move-funds.tsx
@@ -1,5 +1,7 @@
 "use client";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { TransactionButton } from "@/components/blocks/buttons/TransactionButton";
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Button } from "@/components/ui/button";
 import { DecimalInput } from "@/components/ui/decimal-input";
 import {
@@ -11,6 +13,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Popover,
   PopoverContent,
@@ -24,9 +27,11 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
+import { TabButtons } from "@/components/ui/tabs";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { isProd } from "@/constants/env-utils";
-import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { cn } from "@/lib/utils";
+import { parseError } from "@/utils/parse-error";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -73,17 +78,12 @@ import {
 import { shortenAddress, toTokens } from "thirdweb/utils";
 import { type Account, type Wallet, getWalletBalance } from "thirdweb/wallets";
 import { z } from "zod";
-import { ScrollShadow } from "../../../@/components/ui/ScrollShadow/ScrollShadow";
-import { Label } from "../../../@/components/ui/label";
-import { TabButtons } from "../../../@/components/ui/tabs";
-import { ToolTipLabel } from "../../../@/components/ui/tooltip";
-import { TransactionButton } from "../../../components/buttons/TransactionButton";
-import { parseError } from "../../../utils/errorParser";
 import { MoveFundsConnectButton } from "./connect-button";
+import { getClientDashboardThirdwebClient } from "./dashboard-client";
 
 // This is the important part - using dashboard client instead of nebula client to allow users to
 // to connect to their original wallet and move funds to a different wallet
-const dashboardClient = getClientThirdwebClient();
+const dashboardClient = getClientDashboardThirdwebClient();
 
 export function MoveFundsPage() {
   const activeChain = useActiveWalletChain();
diff --git a/apps/dashboard/src/app/nebula-app/move-funds/page.tsx b/apps/nebula/src/app/move-funds/page.tsx
similarity index 95%
rename from apps/dashboard/src/app/nebula-app/move-funds/page.tsx
rename to apps/nebula/src/app/move-funds/page.tsx
index 13a06db7ef5..199e1035364 100644
--- a/apps/dashboard/src/app/nebula-app/move-funds/page.tsx
+++ b/apps/nebula/src/app/move-funds/page.tsx
@@ -1,6 +1,6 @@
 import { ToggleThemeButton } from "@/components/color-mode-toggle";
+import { NebulaIcon } from "@/icons/NebulaIcon";
 import Link from "next/link";
-import { NebulaIcon } from "../(app)/icons/NebulaIcon";
 import { MoveFundsConnectButton } from "./connect-button";
 import { MoveFundsPage } from "./move-funds";
 
diff --git a/apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx b/apps/nebula/src/app/not-found.tsx
similarity index 85%
rename from apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx
rename to apps/nebula/src/app/not-found.tsx
index c4ddf35ee9f..996b399c965 100644
--- a/apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx
+++ b/apps/nebula/src/app/not-found.tsx
@@ -1,4 +1,4 @@
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import Link from "next/link";
 
 export default function NebulaNotFound() {
   return (
@@ -22,14 +22,9 @@ export default function NebulaNotFound() {
           <div>
             <p className="text-center text-muted-foreground text-xl leading-7">
               Go to{" "}
-              <TrackedLinkTW
-                category="page-not-found"
-                label="homepage"
-                href="/"
-                className="text-foreground hover:underline"
-              >
+              <Link href="/" className="text-foreground hover:underline">
                 homepage
-              </TrackedLinkTW>
+              </Link>
             </p>
           </div>
 
diff --git a/apps/dashboard/src/app/nebula-app/opengraph-image.png b/apps/nebula/src/app/opengraph-image.png
similarity index 100%
rename from apps/dashboard/src/app/nebula-app/opengraph-image.png
rename to apps/nebula/src/app/opengraph-image.png
diff --git a/apps/nebula/src/app/page.tsx b/apps/nebula/src/app/page.tsx
deleted file mode 100644
index 7486b375233..00000000000
--- a/apps/nebula/src/app/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <div> Test </div>;
-}
diff --git a/apps/dashboard/src/app/nebula-app/providers.tsx b/apps/nebula/src/app/providers.tsx
similarity index 81%
rename from apps/dashboard/src/app/nebula-app/providers.tsx
rename to apps/nebula/src/app/providers.tsx
index 532bb20ab06..2de7dc95164 100644
--- a/apps/dashboard/src/app/nebula-app/providers.tsx
+++ b/apps/nebula/src/app/providers.tsx
@@ -1,10 +1,10 @@
 "use client";
 
+import { Toaster } from "@/components/ui/sonner";
+import { isSanctionedAddress } from "@/data/eth-sanctioned-addresses";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { isSanctionedAddress } from "data/eth-sanctioned-addresses";
-import { ThemeProvider, useTheme } from "next-themes";
+import { ThemeProvider } from "next-themes";
 import { useMemo } from "react";
-import { Toaster } from "sonner";
 import { ThirdwebProvider, useActiveAccount } from "thirdweb/react";
 import { NebulaConnectWallet } from "./(app)/components/NebulaConnectButton";
 
@@ -20,7 +20,7 @@ export function NebulaProviders(props: { children: React.ReactNode }) {
           enableSystem={false}
           defaultTheme="light"
         >
-          <ToasterSetup />
+          <Toaster richColors />
           <SanctionedAddressesChecker>
             {props.children}
           </SanctionedAddressesChecker>
@@ -30,11 +30,6 @@ export function NebulaProviders(props: { children: React.ReactNode }) {
   );
 }
 
-function ToasterSetup() {
-  const { theme } = useTheme();
-  return <Toaster richColors theme={theme === "light" ? "light" : "dark"} />;
-}
-
 const SanctionedAddressesChecker = ({
   children,
 }: {
diff --git a/apps/nebula/src/global.css b/apps/nebula/src/global.css
new file mode 100644
index 00000000000..4cd233cabea
--- /dev/null
+++ b/apps/nebula/src/global.css
@@ -0,0 +1,214 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root,
+  [data-theme="light"] {
+    /* bg - neutral  */
+    --background: 0 0% 98%;
+    --popover: 0 0% 100%;
+    --card: 0 0% 100%;
+    --secondary: 0 0% 90%;
+    --muted: 0 0% 93%;
+    --accent: 0 0% 93%;
+    --inverted: 0 0% 4%;
+
+    /* bg - colorful */
+    --primary: 221 83% 54%;
+    --destructive: 360 72% 51%;
+
+    /* Text */
+    --foreground: 0 0% 4%;
+    --card-foreground: 0 0% 4%;
+    --popover-foreground: 240 10% 4%;
+    --primary-foreground: 0 0% 100%;
+    --secondary-foreground: 0 0% 4%;
+    --muted-foreground: 0 0% 40%;
+    --accent-foreground: 0 0% 9%;
+    --destructive-foreground: 0 0% 100%;
+    --inverted-foreground: 0 0% 100%;
+    --link-foreground: 221.21deg 83.19% 53.33%;
+    --success-text: 142.09 70.56% 35.29%;
+    --warning-text: 38 92% 40%;
+    --destructive-text: 360 72% 60%;
+    --nebula-pink-foreground: 321 90% 51%;
+
+    /* Borders */
+    --border: 0 0% 85%;
+    --active-border: 0 0% 70%;
+    --input: 0 0% 85%;
+    --ring: 0 0% 80%;
+
+    /* Others */
+    --radius: 0.5rem;
+
+    /* Sidebar */
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 0 0% 4%;
+    --sidebar-primary: 221 83% 54%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 93%;
+    --sidebar-accent-foreground: 0 0% 9%;
+    --sidebar-border: 0 0% 85%;
+    --sidebar-ring: 0 0% 80%;
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    /* bg - neutral  */
+    --background: 0 0% 0%;
+    --card: 0 0% 3.92%;
+    --popover: 0 0% 0%;
+    --secondary: 0 0% 11%;
+    --muted: 0 0% 11%;
+    --accent: 0 0% 11%;
+    --inverted: 0 0% 100%;
+
+    /* bg - colorful */
+    --primary: 221 83% 54%;
+    --destructive: 360 72% 51%;
+
+    /* Text */
+    --foreground: 0 0% 98%;
+    --card-foreground: 0 0% 98%;
+    --popover-foreground: 0 0% 98%;
+    --primary-foreground: 0 0% 100%;
+    --secondary-foreground: 0 0% 98%;
+    --muted-foreground: 0 0% 63%;
+    --accent-foreground: 0 0% 98%;
+    --destructive-foreground: 0 0% 100%;
+    --link-foreground: 215.88 100% 65%;
+    --warning-text: 38 92% 50%;
+    --destructive-text: 360 72% 55%;
+    --success-text: 142 75% 50%;
+    --inverted-foreground: 0 0% 0%;
+    --nebula-pink-foreground: 321 90% 51%;
+
+    /* Borders */
+    --border: 0 0% 15%;
+    --active-border: 0 0% 22%;
+    --ring: 0 0% 30%;
+    --input: 0 0% 15%;
+
+    /* sidebar */
+    --sidebar-background: 0 0% 0%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 221 83% 54%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 11%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 15%;
+    --sidebar-ring: 0 0% 30%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* shadcn charts */
+@layer base {
+  :root {
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+
+    /* below is ai generated based on the initial */
+    --chart-6: 200 65% 50%;
+    --chart-7: 120 70% 45%;
+    --chart-8: 45 75% 55%;
+    --chart-9: 260 60% 60%;
+    --chart-10: 0 70% 50%;
+    --chart-11: 180 60% 50%;
+    --chart-12: 100 65% 55%;
+    --chart-13: 360 70% 55%;
+    --chart-14: 240 65% 50%;
+    --chart-15: 80 60% 50%;
+  }
+}
+
+@keyframes skeleton {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar,
+  .no-scrollbar *::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar,
+  .no-scrollbar * {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+}
+
+/* Fix colors on auto-filled inputs  */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  /* Revert text color */
+  -webkit-text-fill-color: hsl(var(--foreground)) !important;
+  color: hsl(var(--foreground)) !important;
+  caret-color: hsl(var(--foreground)) !important;
+
+  /* Revert background color */
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.shiki,
+.shiki span {
+  background-color: transparent !important;
+}
+
+.dark .shiki,
+.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted)) transparent;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+::selection {
+  background-color: hsl(var(--inverted));
+  color: hsl(var(--inverted-foreground));
+}
diff --git a/apps/nebula/tailwind.config.js b/apps/nebula/tailwind.config.js
new file mode 100644
index 00000000000..fdc57832312
--- /dev/null
+++ b/apps/nebula/tailwind.config.js
@@ -0,0 +1,124 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: ["./src/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: {
+        // 16px
+        DEFAULT: "1rem",
+        // 24px
+        lg: "1.5rem",
+      },
+      screens: {
+        "2xl": "1440px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        "active-border": "hsl(var(--active-border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          // destructive-foreground should only be used on destructive bg
+          foreground: "hsl(var(--destructive-foreground))",
+          // destructive-text can be used on neutral bg - it's red-ish
+          text: "hsl(var(--destructive-text))",
+        },
+        success: {
+          // success-text can be used on neutral bg, it's green-ish
+          text: "hsl(var(--success-text))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        inverted: {
+          DEFAULT: "hsl(var(--inverted))",
+          foreground: "hsl(var(--inverted-foreground))",
+        },
+        "nebula-pink": {
+          foreground: "hsl(var(--nebula-pink-foreground))",
+        },
+        warning: {
+          text: "hsl(var(--warning-text))",
+        },
+        link: {
+          foreground: "hsl(var(--link-foreground))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "caret-blink": {
+          "0%,70%,100%": { opacity: "1" },
+          "20%,50%": { opacity: "0" },
+        },
+        "text-shimmer": {
+          "0%": { backgroundPosition: "100% 50%" },
+          "100%": { backgroundPosition: "-100% 50%" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        skeleton: "skeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
+        "text-shimmer": "text-shimmer 1.25s linear infinite",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
diff --git a/apps/nebula/tsconfig.json b/apps/nebula/tsconfig.json
index f619795e725..72dd93624f0 100644
--- a/apps/nebula/tsconfig.json
+++ b/apps/nebula/tsconfig.json
@@ -1,22 +1,22 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "baseUrl": "./src",
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
     "noEmit": true,
-    "incremental": true,
-    "module": "esnext",
     "esModuleInterop": true,
+    "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
+    "incremental": true,
+    "downlevelIteration": true,
+    "noUncheckedIndexedAccess": true,
     "plugins": [
       {
         "name": "next"
@@ -25,11 +25,11 @@
   },
   "include": [
     "next-env.d.ts",
-    ".next/types/**/*.ts",
+    "lucide-react.d.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    "additional.d.ts",
+    ".next/types/**/*.ts"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules", ".next", "lib/__generated__"]
 }
diff --git a/apps/nebula/vercel.json b/apps/nebula/vercel.json
new file mode 100644
index 00000000000..007ce1f0346
--- /dev/null
+++ b/apps/nebula/vercel.json
@@ -0,0 +1,5 @@
+{
+  "github": {
+    "autoJobCancelation": true
+  }
+}
diff --git a/apps/playground-web/src/components/ui/Spinner/Spinner.module.css b/apps/playground-web/src/components/ui/Spinner/Spinner.module.css
index 0adc57ba75e..622a43a8a79 100644
--- a/apps/playground-web/src/components/ui/Spinner/Spinner.module.css
+++ b/apps/playground-web/src/components/ui/Spinner/Spinner.module.css
@@ -12,7 +12,6 @@
   inset: 0px;
   border-radius: 50%;
   border: 4px solid #fff;
-  animation: prixClipFix 2s linear infinite;
   stroke-linecap: round;
   animation: dash 1.5s ease-in-out infinite;
 }
diff --git a/apps/portal/src/components/ui/Spinner/Spinner.module.css b/apps/portal/src/components/ui/Spinner/Spinner.module.css
index 0adc57ba75e..622a43a8a79 100644
--- a/apps/portal/src/components/ui/Spinner/Spinner.module.css
+++ b/apps/portal/src/components/ui/Spinner/Spinner.module.css
@@ -12,7 +12,6 @@
   inset: 0px;
   border-radius: 50%;
   border: 4px solid #fff;
-  animation: prixClipFix 2s linear infinite;
   stroke-linecap: round;
   animation: dash 1.5s ease-in-out infinite;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca1682cd914..6dfbbb67448 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -181,9 +181,6 @@ importers:
       fast-xml-parser:
         specifier: ^5.2.5
         version: 5.2.5
-      fetch-event-stream:
-        specifier: 0.1.5
-        version: 0.1.5
       flat:
         specifier: ^6.0.1
         version: 6.0.1