From a622abb5e2329869490bf8714dc93991f4d8d404 Mon Sep 17 00:00:00 2001
From: r41ph <ralph.galan@regen.network>
Date: Wed, 11 Sep 2024 08:55:33 +0100
Subject: [PATCH] feat: APP-201 buy credits flow step 1 (#2408)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: “Ralph“ <“ralph.galan@regen.network>
---
 .eslintrc.js                                  |   12 +
 README.md                                     |   37 +-
 lerna.json                                    |    1 -
 package.json                                  |   10 +-
 tailwind.common.js                            |    1 +
 tailwind.css                                  |    6 +
 web-auth/.env.example                         |    7 -
 web-auth/.eslintrc.js                         |    5 -
 web-auth/.gitignore                           |   23 -
 web-auth/CHANGELOG.md                         |   88 -
 web-auth/README.md                            |   32 -
 web-auth/gulpfile.js                          |   14 -
 web-auth/package.json                         |   56 -
 web-auth/public/index.html                    |   28 -
 web-auth/public/manifest.json                 |   15 -
 web-auth/public/robots.txt                    |    3 -
 web-auth/src/App.test.tsx                     |   20 -
 web-auth/src/App.tsx                          |  110 -
 web-auth/src/index.css                        |   14 -
 web-auth/src/index.tsx                        |   25 -
 web-auth/src/react-app-env.d.ts               |    1 -
 web-auth/src/reportWebVitals.ts               |   15 -
 web-auth/src/setupTests.ts                    |    5 -
 web-auth/tsconfig.json                        |   22 -
 .../{.eslintrc.js => .eslintrc.cjs}           |    0
 .../.prettierrc.cjs                           |    0
 web-components/.prettierrc.js                 |    3 -
 web-components/auto-imports.d.ts              |   21 +
 web-components/jest.config.js                 |    5 -
 web-components/package.json                   |   12 +-
 .../DenomIconWithCurrency.constants.ts        |   16 +
 .../DenomIconWithCurrency.stories.tsx         |   29 +
 .../DenomIconWithCurrency.test.tsx            |   32 +
 .../DenomIconWithCurrency.tsx                 |   33 +
 .../PrefinanceTag/PrefinanceTag.stories.tsx   |   21 +
 .../PrefinanceTag/PrefinanceTag.tsx           |   38 +
 .../SupCurrencyAndAmount.stories.tsx          |   20 +
 .../SupCurrencyAndAmount.test.tsx             |   21 +
 .../SupCurrencyAndAmount.tsx                  |   20 +
 .../src/components/buttons/EditButtonIcon.tsx |   29 +
 .../components/buttons/SetMaxButton.test.tsx  |   13 +
 .../src/components/buttons/SetMaxButton.tsx   |   18 +
 .../src/components/buttons/button.stories.tsx |   12 +
 .../OrderSummaryCard.Content.tsx              |  112 +
 .../OrderSummaryCard.Image.tsx                |   20 +
 .../OrderSummaryCard.constants.tsx            |    2 +
 .../OrderSummaryCard.stories.tsx              |   81 +
 .../OrderSummaryCard.test.tsx                 |   80 +
 .../OrderSummaryCard/OrderSummaryCard.tsx     |   23 +
 .../OrderSummaryCard.types.tsx                |   28 +
 .../OrderSummmaryCard.RowHeader.tsx           |   18 +
 .../cards/ProjectCard/ProjectCard.tsx         |   21 +-
 .../src/components/cards/card.stories.tsx     |   21 +-
 .../src/components/icons/CreditCardIcon.tsx   |   28 +
 .../src/components/icons/CryptoIcon.tsx       |  144 +
 .../src/components/icons/LeafIcon.tsx         |  139 +
 .../src/components/icons/flags/USFlagIcon.tsx |   99 +
 .../src/components/icons/icons.stories.tsx    |    6 +
 .../new/CustomSelect/CustomSelect.Option.tsx  |   28 +
 .../CustomSelect/CustomSelect.Placeholder.tsx |   33 +
 .../new/CustomSelect/CustomSelect.stories.tsx |   46 +
 .../new/CustomSelect/CustomSelect.test.tsx    |  119 +
 .../inputs/new/CustomSelect/CustomSelect.tsx  |   76 +
 .../new/CustomSelect/CustomSelect.types.tsx   |   18 +
 .../EditableInput/EditableInput.stories.tsx   |   19 +
 .../new/EditableInput/EditableInput.test.tsx  |   76 +
 .../new/EditableInput/EditableInput.tsx       |   80 +
 .../src/components/inputs/new/Radio/Radio.tsx |    9 +-
 .../inputs/new/TextField/TextField.types.ts   |    7 +-
 .../molecules/InfoCard/InfoCard.stories.tsx   |   29 +
 .../molecules/InfoCard/InfoCard.tsx           |    7 +-
 .../sliders/ProjectMedia.PrefinanceTag.tsx    |   16 -
 .../src/components/sliders/ProjectMedia.tsx   |   25 +-
 .../tooltip/InfoTooltipWithIcon.tsx           |   14 +-
 .../tooltip/QuestionMarkTooltip.tsx           |   13 +-
 web-components/test/setup.ts                  |    1 +
 web-components/test/test-utils.tsx            |    2 +
 web-components/tsconfig.json                  |    6 +-
 web-components/vite.config.ts                 |   18 +
 web-marketplace/package.json                  |   13 +-
 web-marketplace/src/App.test.tsx              |   53 -
 .../src/__snapshots__/storyshots.test.ts.snap | 5237 -----------------
 .../CreditsAmount/CreditsAmount.Header.tsx    |   69 +
 .../CreditsAmount/CreditsAmount.constants.ts  |   26 +
 .../CreditsAmount/CreditsAmount.mock.tsx      |   42 +
 .../CreditsAmount/CreditsAmount.stories.tsx   |   70 +
 .../CreditsAmount/CreditsAmount.test.tsx      |  134 +
 .../molecules/CreditsAmount/CreditsAmount.tsx |  154 +
 .../CreditsAmount/CreditsAmount.types.tsx     |   38 +
 .../CreditsAmount/CreditsAmount.utils.tsx     |   37 +
 .../molecules/CreditsAmount/CreditsInput.tsx  |   78 +
 .../molecules/CreditsAmount/CurrencyInput.tsx |  141 +
 .../molecules/DenomIcon/DenomIcon.tsx         |   40 +-
 .../src/components/molecules/Form/Form.tsx    |    5 +-
 .../ChooseCreditsForm.AdvanceSettings.tsx     |   89 +
 .../ChooseCreditsForm.CryptoOptions.tsx       |   68 +
 .../ChooseCreditsForm.PaymentOptions.tsx      |   93 +
 .../ChooseCreditsForm.constants.tsx           |   10 +
 .../ChooseCreditsForm.schema.tsx              |   43 +
 .../ChooseCreditsForm.stories.tsx             |   23 +
 .../ChooseCreditsForm.test.tsx                |   53 +
 .../ChooseCreditsForm/ChooseCreditsForm.tsx   |  208 +
 .../ChooseCreditsForm.types.tsx               |   24 +
 .../ChooseCreditsForm.utils.ts                |   15 +
 .../src/config/allowedBaseDenoms.ts           |    3 +
 web-marketplace/src/jest.mock.ts              |   13 -
 web-marketplace/src/lib/i18n/locales/en.po    |   83 +-
 web-marketplace/src/lib/i18n/locales/es.po    |   83 +-
 web-marketplace/src/lib/rdf/rdf.test.ts       |    4 +-
 web-marketplace/src/storyshots.test.ts        |   20 -
 web-marketplace/test/setup.ts                 |    1 +
 web-marketplace/test/test-utils.tsx           |  107 +
 web-marketplace/tsconfig.json                 |   15 +-
 web-marketplace/vite.config.mts               |    8 +-
 web-www/package.json                          |    2 +-
 115 files changed, 3540 insertions(+), 5919 deletions(-)
 delete mode 100644 web-auth/.env.example
 delete mode 100644 web-auth/.eslintrc.js
 delete mode 100644 web-auth/.gitignore
 delete mode 100644 web-auth/CHANGELOG.md
 delete mode 100644 web-auth/README.md
 delete mode 100644 web-auth/gulpfile.js
 delete mode 100644 web-auth/package.json
 delete mode 100644 web-auth/public/index.html
 delete mode 100644 web-auth/public/manifest.json
 delete mode 100644 web-auth/public/robots.txt
 delete mode 100644 web-auth/src/App.test.tsx
 delete mode 100644 web-auth/src/App.tsx
 delete mode 100644 web-auth/src/index.css
 delete mode 100644 web-auth/src/index.tsx
 delete mode 100644 web-auth/src/react-app-env.d.ts
 delete mode 100644 web-auth/src/reportWebVitals.ts
 delete mode 100644 web-auth/src/setupTests.ts
 delete mode 100644 web-auth/tsconfig.json
 rename web-components/{.eslintrc.js => .eslintrc.cjs} (100%)
 rename web-auth/.prettierrc.js => web-components/.prettierrc.cjs (100%)
 delete mode 100644 web-components/.prettierrc.js
 create mode 100644 web-components/auto-imports.d.ts
 delete mode 100644 web-components/jest.config.js
 create mode 100644 web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants.ts
 create mode 100644 web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.stories.tsx
 create mode 100644 web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.test.tsx
 create mode 100644 web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.tsx
 create mode 100644 web-components/src/components/PrefinanceTag/PrefinanceTag.stories.tsx
 create mode 100644 web-components/src/components/PrefinanceTag/PrefinanceTag.tsx
 create mode 100644 web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.stories.tsx
 create mode 100644 web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.test.tsx
 create mode 100644 web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.tsx
 create mode 100644 web-components/src/components/buttons/EditButtonIcon.tsx
 create mode 100644 web-components/src/components/buttons/SetMaxButton.test.tsx
 create mode 100644 web-components/src/components/buttons/SetMaxButton.tsx
 create mode 100644 web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Content.tsx
 create mode 100644 web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Image.tsx
 create mode 100644 web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.constants.tsx
 create mode 100644 web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.stories.tsx
 create mode 100644 web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.test.tsx
 create mode 100644 web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.tsx
 create mode 100644 web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.types.tsx
 create mode 100644 web-components/src/components/cards/OrderSummaryCard/OrderSummmaryCard.RowHeader.tsx
 create mode 100644 web-components/src/components/icons/CreditCardIcon.tsx
 create mode 100644 web-components/src/components/icons/CryptoIcon.tsx
 create mode 100644 web-components/src/components/icons/LeafIcon.tsx
 create mode 100644 web-components/src/components/icons/flags/USFlagIcon.tsx
 create mode 100644 web-components/src/components/inputs/new/CustomSelect/CustomSelect.Option.tsx
 create mode 100644 web-components/src/components/inputs/new/CustomSelect/CustomSelect.Placeholder.tsx
 create mode 100644 web-components/src/components/inputs/new/CustomSelect/CustomSelect.stories.tsx
 create mode 100644 web-components/src/components/inputs/new/CustomSelect/CustomSelect.test.tsx
 create mode 100644 web-components/src/components/inputs/new/CustomSelect/CustomSelect.tsx
 create mode 100644 web-components/src/components/inputs/new/CustomSelect/CustomSelect.types.tsx
 create mode 100644 web-components/src/components/inputs/new/EditableInput/EditableInput.stories.tsx
 create mode 100644 web-components/src/components/inputs/new/EditableInput/EditableInput.test.tsx
 create mode 100644 web-components/src/components/inputs/new/EditableInput/EditableInput.tsx
 delete mode 100644 web-components/src/components/sliders/ProjectMedia.PrefinanceTag.tsx
 create mode 100644 web-components/test/setup.ts
 create mode 100644 web-components/test/test-utils.tsx
 create mode 100644 web-components/vite.config.ts
 delete mode 100644 web-marketplace/src/App.test.tsx
 delete mode 100644 web-marketplace/src/__snapshots__/storyshots.test.ts.snap
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants.ts
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.mock.tsx
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.stories.tsx
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.test.tsx
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.types.tsx
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CreditsInput.tsx
 create mode 100644 web-marketplace/src/components/molecules/CreditsAmount/CurrencyInput.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.stories.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.test.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.types.tsx
 create mode 100644 web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.utils.ts
 delete mode 100644 web-marketplace/src/jest.mock.ts
 delete mode 100644 web-marketplace/src/storyshots.test.ts
 create mode 100644 web-marketplace/test/setup.ts
 create mode 100644 web-marketplace/test/test-utils.tsx

diff --git a/.eslintrc.js b/.eslintrc.js
index c6cc528d24..a50fd6ec46 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -65,5 +65,17 @@ module.exports = {
         'import/no-anonymous-default-export': 'off',
       },
     },
+    {
+      files: [
+        '*.test.ts',
+        '*.spec.ts',
+        '*.test.tsx',
+        '*.spec.tsx',
+        '*.stories.tsx',
+      ],
+      rules: {
+        'lingui/no-unlocalized-strings': 'off',
+      },
+    },
   ],
 };
diff --git a/README.md b/README.md
index 06624fee05..b903f6c428 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,6 @@ The website for the [Regen Network](https://regen.network) decentralized infrast
       - [GraphQL Type generation](#graphql-type-generation)
     - [Storybook](#storybook)
     - [Website](#website)
-    - [Deploying the Custom Login form to Auth0](#deploying-the-custom-login-form-to-auth0)
   - [Testing](#testing)
   - [Code style](#code-style)
   - [i18n](#i18n)
@@ -34,7 +33,6 @@ This project uses [bun](https://bun.sh/) with [bun workspaces](https://bun.sh/do
 - `web-marketplace`: Registry React application
 - `web-components`: React components and [material-ui](https://material-ui.com/) custom theme
 - `web-storybook`: [Storybook](https://storybook.js.org/) config
-- `web-auth`: React application used for Auth0 Custom Universal Login
 
 [Lerna](https://github.com/lerna/lerna) is also used to bump packages versions and push new releases.
 
@@ -62,7 +60,6 @@ bun install
 
 Set variables in `.env` files in `web-marketplace/` and `web-storybook/` folders based on provided `.env.example` files.
 
-For `web-auth`, follow these [setup instructions](web-auth/README.md#setup).
 
 ## Development
 
@@ -136,31 +133,29 @@ bun run build-storybook
 bun run build-www
 ```
 
-### Deploying the Custom Login form to Auth0
+## Testing
 
-Please, follow [these instructions](web-auth/README.md#setup) and then:
+#### - Running tests
+We are using [Vitest](https://vitest.dev/) as a test runner.
 
-1. Run `bun run build-auth` command.
-2. Copy the code from `./build/index.html`.
-3. Paste it into the Universal Login HTML form from [Auth dashboard](https://manage.auth0.com/dashboard/us/regen-network-registry/login_page) and save.
+Tests can be run in the terminal with the following commands from the project root: 
 
-This could be automated in the future.
+* To run `web-marketplace` tests
+  ```sh
+  bun run test-marketplace
+  ```
 
-## Testing
+* To run `web-components` tests
+  ```sh
+  bun run test-components
+  ```
+In both cases the test runner is launched in the interactive watch mode.
 
-```sh
-bun run test
-```
+#### - Writing tests
+When writing test in `web-marketplace` remember to import the methods from`'web-marketplace/test/test-utils'`, specially the `render` method, as it is a custom render that wraps components with the necessary providers.
 
-Launches the test runner in the interactive watch mode.
-[Jest](https://jestjs.io/) is used as test runner.
+In `web-components`, methods should be imported directly from `'@testing-library/*'`
 
-We're using [StoryShots](https://storybook.js.org/docs/testing/structural-testing/#using-storyshots) for snapshots testing.
-Update web-components snapshots:
-
-```sh
-bun run test-update-snapshot
-```
 
 ## Code style
 
diff --git a/lerna.json b/lerna.json
index 4ccd2af3e7..572637aaf0 100644
--- a/lerna.json
+++ b/lerna.json
@@ -6,7 +6,6 @@
     "web-marketplace",
     "web-components",
     "web-storybook",
-    "web-auth",
     "web-www"
   ]
 }
diff --git a/package.json b/package.json
index c03166831e..1998c4f9d6 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "web-marketplace",
     "web-components",
     "web-storybook",
-    "web-auth",
     "web-www"
   ],
   "scripts": {
@@ -22,16 +21,14 @@
     "build-www": "bun run --cwd web-www build",
     "build-components": "bun run --cwd web-components build",
     "build-storybook": "bun run --cwd web-storybook build-storybook",
-    "build-auth": "bun run --cwd web-auth build",
     "clean": "find . -iname 'node_modules' -maxdepth 2 | xargs rm -rf",
     "format": "bun run --cwd web-components format & bun run --cwd web-marketplace format & bun run --cwd web-www format",
     "lint": "bun run --cwd web-components lint & bun run --cwd web-marketplace lint & bun run --cwd web-www lint",
     "format-and-fix": "bun run --cwd web-components format-and-fix & bun run --cwd web-marketplace format-and-fix & bun run --cwd web-www format-and-fix",
     "storybook": "bun run --cwd web-storybook storybook",
-    "test": "bun run --cwd web-marketplace test-no-watch",
+    "test-marketplace": "bun run --cwd web-marketplace test",
     "test-components": "bun run --cwd web-components test",
     "start": "bun run --cwd web-marketplace start",
-    "start-auth": "bun run --cwd web-auth start",
     "watch": "bun run --cwd web-components watch",
     "test-update-snapshot": "bun run --cwd web-marketplace test-update-snapshot",
     "bump": "lerna version --no-push --conventional-commits",
@@ -46,7 +43,6 @@
     "@graphql-codegen/typescript-operations": "^1.18.0",
     "@graphql-codegen/typescript-react-apollo": "2.2.4",
     "@types/css-mediaquery": "^0.1.1",
-    "@types/jest": "27.0.3",
     "@types/node": "13.1.1",
     "babel-loader": "8.1.0",
     "css-mediaquery": "0.1.2",
@@ -59,13 +55,13 @@
     "prettier": "2.4.1",
     "shx": "^0.3.2",
     "storybook": "^7.3.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "unplugin-auto-import": "^0.18.2"
   },
   "resolutions": {
     "eslint": "^8.42.0",
     "formik-mui": "^5.0.0-alpha.0",
     "formik": "2.2.9",
-    "@types/jest": "^29.0.0",
     "@types/react": "^18.0.23",
     "@types/react-dom": "^18.0.7",
     "babel-eslint": "^10.1.0",
diff --git a/tailwind.common.js b/tailwind.common.js
index b1f8e93dac..8ea7fcd57e 100644
--- a/tailwind.common.js
+++ b/tailwind.common.js
@@ -4,6 +4,7 @@ module.exports = {
   theme: {
     fontFamily: {
       sans: ['"Lato"', '-apple-system', 'sans-serif'],
+      muli: ['"Muli"', '-apple-system', 'sans-serif'],
     },
     colors: {
       // Make sure these guidelines are followed when adding new colors: https://tailwindcss.com/docs/customizing-colors#using-css-variables
diff --git a/tailwind.css b/tailwind.css
index 462f57cbdb..5404a33e55 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -47,6 +47,7 @@
     --purple-300: 128 142 171;
     --purple-200: 187 195 210;
     --purple-100: 221 225 233;
+
   }
 
   .dark {
@@ -86,4 +87,9 @@
     --purple-200: 128 142 171;
     --purple-100: 86 104 143;
   }
+
+  .bg-transparent {
+    background-color: transparent;
+  }
+
 }
diff --git a/web-auth/.env.example b/web-auth/.env.example
deleted file mode 100644
index 0198cd3144..0000000000
--- a/web-auth/.env.example
+++ /dev/null
@@ -1,7 +0,0 @@
-INLINE_RUNTIME_CHUNK=false
-GENERATE_SOURCEMAP=false
-SKIP_PREFLIGHT_CHECK=true
-REACT_APP_API_URI=
-REACT_APP_AUTH0_DOMAIN=regen-network-registry.auth0.com
-REACT_APP_SIGNUP_LINK=https://app.regen.network/signup
-REACT_APP_RECAPTCHAV3_SITE_KEY=
diff --git a/web-auth/.eslintrc.js b/web-auth/.eslintrc.js
deleted file mode 100644
index 55b76a1c47..0000000000
--- a/web-auth/.eslintrc.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const baseConfig = require('../.eslintrc');
-
-module.exports = {
-  ...baseConfig,
-};
diff --git a/web-auth/.gitignore b/web-auth/.gitignore
deleted file mode 100644
index 4d29575de8..0000000000
--- a/web-auth/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/web-auth/CHANGELOG.md b/web-auth/CHANGELOG.md
deleted file mode 100644
index e31e7f0cc9..0000000000
--- a/web-auth/CHANGELOG.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [2.6.5](https://github.com/regen-network/regen-web/compare/v2.6.4...v2.6.5) (2024-08-16)
-
-**Note:** Version bump only for package web-auth
-
-# [2.6.0](https://github.com/regen-network/regen-web/compare/v2.5.1...v2.6.0) (2024-05-30)
-
-**Note:** Version bump only for package web-auth
-
-# [2.4.0](https://github.com/regen-network/regen-web/compare/v2.3.0...v2.4.0) (2024-04-24)
-
-**Note:** Version bump only for package web-auth
-
-# [2.3.0](https://github.com/regen-network/regen-web/compare/v2.2.1...v2.3.0) (2024-04-09)
-
-**Note:** Version bump only for package web-auth
-
-## [2.2.1](https://github.com/regen-network/regen-web/compare/v2.2.0...v2.2.1) (2024-03-06)
-
-**Note:** Version bump only for package web-auth
-
-# [2.2.0](https://github.com/regen-network/regen-web/compare/v2.1.1...v2.2.0) (2024-03-05)
-
-**Note:** Version bump only for package web-auth
-
-## [2.1.1](https://github.com/regen-network/regen-web/compare/v2.1.0...v2.1.1) (2024-02-27)
-
-**Note:** Version bump only for package web-auth
-
-# [2.1.0](https://github.com/regen-network/regen-web/compare/v2.0.0...v2.1.0) (2024-02-27)
-
-**Note:** Version bump only for package web-auth
-
-# [2.0.0](https://github.com/regen-network/regen-web/compare/v1.14.1...v2.0.0) (2024-02-20)
-
-**Note:** Version bump only for package web-auth
-
-# [1.14.0](https://github.com/regen-network/regen-web/compare/v1.13.0...v1.14.0) (2023-10-23)
-
-**Note:** Version bump only for package web-auth
-
-# [1.13.0](https://github.com/regen-network/regen-web/compare/v1.12.2...v1.13.0) (2023-09-27)
-
-**Note:** Version bump only for package web-auth
-
-# [1.12.0](https://github.com/regen-network/regen-web/compare/v1.11.0...v1.12.0) (2023-09-19)
-
-**Note:** Version bump only for package web-auth
-
-# [1.11.0](https://github.com/regen-network/regen-web/compare/v1.10.0...v1.11.0) (2023-08-09)
-
-**Note:** Version bump only for package web-auth
-
-# [1.10.0](https://github.com/regen-network/regen-web/compare/v1.9.0...v1.10.0) (2023-07-20)
-
-**Note:** Version bump only for package web-auth
-
-# [1.9.0](https://github.com/regen-network/regen-web/compare/v1.8.2...v1.9.0) (2023-07-11)
-
-**Note:** Version bump only for package web-auth
-
-## [1.8.2](https://github.com/regen-network/regen-web/compare/v1.8.1...v1.8.2) (2023-07-06)
-
-**Note:** Version bump only for package web-auth
-
-# [1.8.0](https://github.com/regen-network/regen-web/compare/v1.7.0...v1.8.0) (2023-06-13)
-
-**Note:** Version bump only for package web-auth
-
-# [1.7.0](https://github.com/regen-network/regen-web/compare/v1.6.0...v1.7.0) (2023-06-06)
-
-**Note:** Version bump only for package web-auth
-
-# [1.5.0](https://github.com/regen-network/regen-web/compare/v1.4.6...v1.5.0) (2023-05-09)
-
-**Note:** Version bump only for package web-auth
-
-# [1.3.0](https://github.com/regen-network/regen-web/compare/v1.2.3...v1.3.0) (2023-04-05)
-
-**Note:** Version bump only for package web-auth
-
-# [1.2.0](https://github.com/regen-network/regen-web/compare/v1.1.0...v1.2.0) (2023-02-27)
-
-**Note:** Version bump only for package web-auth
diff --git a/web-auth/README.md b/web-auth/README.md
deleted file mode 100644
index cac9c96cc2..0000000000
--- a/web-auth/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# Regen Registry Log In
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-It displays a login form to be used as custom [Auth0 Universal Login](https://auth0.com/docs/universal-login) UI. It's only meant to be run locally or from Auth0.
-
-## Setup
-
-Make sure to follow these [installation instructions](../README.md#installation) first.
-
-Based on `.env.example`, create one `.env.development.local` and `.env.production.local` with appropriate values.
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `yarn build`
-
-Builds the app for production to the `build` folder.
-Uses [gulp](https://gulpjs.com/) to bundle the app into a single `./build/index.html` file.
\ No newline at end of file
diff --git a/web-auth/gulpfile.js b/web-auth/gulpfile.js
deleted file mode 100644
index d282f5dadf..0000000000
--- a/web-auth/gulpfile.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const gulp = require('gulp');
-const inlinesource = require('gulp-inline-source');
-const replace = require('gulp-replace');
-
-gulp.task('default', () => {
-  return gulp.src('./build/*.html')
-    .pipe(replace('.js"></script>', '.js" inline></script>'))
-    .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>'))
-    .pipe(inlinesource({
-      compress: false,
-      ignore: ['png']
-    }))
-    .pipe(gulp.dest('./build'));
-});
\ No newline at end of file
diff --git a/web-auth/package.json b/web-auth/package.json
deleted file mode 100644
index 87831046ae..0000000000
--- a/web-auth/package.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "name": "web-auth",
-  "homepage": ".",
-  "version": "2.6.5",
-  "private": true,
-  "dependencies": {
-    "@mui/styles": "^5.10.10",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2",
-    "auth0-js": "^9.18.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-google-recaptcha-v3": "^1.8.0",
-    "react-scripts": "4.0.3",
-    "tss-react": "^4.4.4",
-    "web-components": "workspace:*",
-    "web-vitals": "^1.0.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build && gulp",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "gulp": "^4.0.2",
-    "gulp-inline-source": "^4.0.0",
-    "gulp-replace": "^1.0.0",
-    "storybook-addon-react-router-v6": "^0.1.10"
-  }
-}
diff --git a/web-auth/public/index.html b/web-auth/public/index.html
deleted file mode 100644
index 7c64c8248a..0000000000
--- a/web-auth/public/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="https://regen-registry.s3.amazonaws.com/favicon/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Regen Registry Login page"
-    />
-    <title>Regen Registry | Log in</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
diff --git a/web-auth/public/manifest.json b/web-auth/public/manifest.json
deleted file mode 100644
index 22627e1f5a..0000000000
--- a/web-auth/public/manifest.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "short_name": "Regen Registry | Log in",
-  "name": "Regen Registry | Log in",
-  "icons": [
-    {
-      "src": "https://regen-registry.s3.amazonaws.com/favicon/favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
diff --git a/web-auth/public/robots.txt b/web-auth/public/robots.txt
deleted file mode 100644
index e9e57dc4d4..0000000000
--- a/web-auth/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/web-auth/src/App.test.tsx b/web-auth/src/App.test.tsx
deleted file mode 100644
index bc2487e18a..0000000000
--- a/web-auth/src/App.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { MockedProvider } from '@apollo/client/testing';
-import ReactDOM, { unmountComponentAtNode } from 'react-dom';
-import ThemeProvider from 'web-components/src/theme/RegenThemeProvider';
-
-import App from './App';
-
-it('renders without crashing', () => {
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  ReactDOM.render(
-    <MockedProvider mocks={[]}>
-      <ThemeProvider>
-        <App />
-      </ThemeProvider>
-      ,
-    </MockedProvider>,
-    container,
-  );
-  unmountComponentAtNode(container);
-});
diff --git a/web-auth/src/App.tsx b/web-auth/src/App.tsx
deleted file mode 100644
index df0ed23b1d..0000000000
--- a/web-auth/src/App.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { WebAuth } from 'auth0-js';
-import axios from 'axios';
-import React, { useCallback } from 'react';
-import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
-import { makeStyles } from 'tss-react/mui';
-import LoginForm, {
-  Values,
-} from 'web-components/src/components/form/LoginForm';
-import OnBoardingSection from 'web-components/src/components/section/OnBoardingSection';
-import { Theme } from 'web-components/src/theme/muiTheme';
-
-const searchParams = new URLSearchParams(window.location.search);
-const state = searchParams.get('state') || undefined;
-const clientID = searchParams.get('client') || undefined;
-const redirectUri = searchParams.get('redirect_uri') || undefined;
-const audience = searchParams.get('audience') || undefined;
-const nonce = searchParams.get('nonce') || undefined;
-const scope = searchParams.get('nonce') || undefined;
-const responseType = searchParams.get('response_type') || 'code';
-const responseMode = searchParams.get('response_mode') || undefined;
-
-const auth0 = new WebAuth({
-  domain: process.env.REACT_APP_AUTH0_DOMAIN || window.location.host,
-  clientID: clientID || 'rEuc1WLPAQVXZ7gJrWg4AL9EhWMHmLu8',
-  audience: audience,
-  redirectUri,
-});
-
-const useStyles = makeStyles()((theme: Theme) => ({
-  logo: {
-    display: 'flex',
-    [theme.breakpoints.up('sm')]: {
-      margin: `${theme.spacing(11.25)} auto 0`,
-    },
-    [theme.breakpoints.down('sm')]: {
-      margin: `${theme.spacing(7)} auto 0`,
-    },
-  },
-}));
-
-function App(): JSX.Element {
-  const { classes } = useStyles();
-  const { executeRecaptcha } = useGoogleReCaptcha();
-
-  const submit = useCallback(
-    ({ email, password }: Values): Promise<void> => {
-      return new Promise(async (resolve, reject) => {
-        try {
-          const token = await executeRecaptcha?.('login_page');
-          const apiUri: string =
-            process.env.REACT_APP_API_URI || 'http://localhost:5000';
-          const res = await axios({
-            method: 'POST',
-            url: `${apiUri}/recaptcha/v3/verify`,
-            data: {
-              userResponse: token,
-            },
-          });
-          if (res?.data?.success && res.data.score >= 0.5) {
-            auth0.login(
-              {
-                realm: 'Username-Password-Authentication',
-                email,
-                password,
-                nonce,
-                scope,
-                responseType,
-                responseMode,
-                state,
-              },
-              function (err) {
-                if (err) {
-                  reject(err);
-                } else {
-                  resolve();
-                }
-              },
-            );
-          } else {
-            reject();
-          }
-        } catch (err) {
-          reject(err);
-        }
-      });
-    },
-    [executeRecaptcha],
-  );
-
-  return (
-    <>
-      <img
-        className={classes.logo}
-        src="https://regen-registry.s3.amazonaws.com/Black.png"
-        alt="Regen Network logo"
-      />
-      <OnBoardingSection formContainer title="Log in">
-        <LoginForm
-          signupFromLogin={
-            process.env.REACT_APP_SIGNUP_LINK ||
-            'https://www.regen.network/registry/signup'
-          }
-          submit={submit}
-        />
-      </OnBoardingSection>
-    </>
-  );
-}
-
-export default App;
diff --git a/web-auth/src/index.css b/web-auth/src/index.css
deleted file mode 100644
index 64a1f62d4a..0000000000
--- a/web-auth/src/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: #fafafa;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/web-auth/src/index.tsx b/web-auth/src/index.tsx
deleted file mode 100644
index 86e6cedce2..0000000000
--- a/web-auth/src/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import './index.css';
-
-import CssBaseline from '@mui/material/CssBaseline';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
-import ThemeProvider from 'web-components/src/theme/RegenThemeProvider';
-
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-ReactDOM.render(
-  <GoogleReCaptchaProvider reCaptchaKey={process.env.REACT_APP_RECAPTCHAV3_SITE_KEY}>
-    <ThemeProvider injectFonts>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
-  </GoogleReCaptchaProvider>,
-  document.getElementById('root'),
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(consolle.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/web-auth/src/react-app-env.d.ts b/web-auth/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5fc6..0000000000
--- a/web-auth/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="react-scripts" />
diff --git a/web-auth/src/reportWebVitals.ts b/web-auth/src/reportWebVitals.ts
deleted file mode 100644
index eb4be08f20..0000000000
--- a/web-auth/src/reportWebVitals.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
diff --git a/web-auth/src/setupTests.ts b/web-auth/src/setupTests.ts
deleted file mode 100644
index 8f2609b7b3..0000000000
--- a/web-auth/src/setupTests.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/web-auth/tsconfig.json b/web-auth/tsconfig.json
deleted file mode 100644
index 6c758f7dcd..0000000000
--- a/web-auth/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "isolatedModules": true,
-    "outDir": "build",
-    "resolveJsonModule": true,
-    "rootDir": "src",
-    "allowJs": true,
-    "jsx": "react-jsx",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "module": "esnext",
-    "noEmit": true
-  },
-  "include": [
-    "src"
-  ]
-}
diff --git a/web-components/.eslintrc.js b/web-components/.eslintrc.cjs
similarity index 100%
rename from web-components/.eslintrc.js
rename to web-components/.eslintrc.cjs
diff --git a/web-auth/.prettierrc.js b/web-components/.prettierrc.cjs
similarity index 100%
rename from web-auth/.prettierrc.js
rename to web-components/.prettierrc.cjs
diff --git a/web-components/.prettierrc.js b/web-components/.prettierrc.js
deleted file mode 100644
index 5124a322b3..0000000000
--- a/web-components/.prettierrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  ...require('../.prettierrc'),
-};
\ No newline at end of file
diff --git a/web-components/auto-imports.d.ts b/web-components/auto-imports.d.ts
new file mode 100644
index 0000000000..13dd447e32
--- /dev/null
+++ b/web-components/auto-imports.d.ts
@@ -0,0 +1,21 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const afterAll: typeof import('vitest')['afterAll']
+  const afterEach: typeof import('vitest')['afterEach']
+  const assert: typeof import('vitest')['assert']
+  const beforeAll: typeof import('vitest')['beforeAll']
+  const beforeEach: typeof import('vitest')['beforeEach']
+  const chai: typeof import('vitest')['chai']
+  const describe: typeof import('vitest')['describe']
+  const expect: typeof import('vitest')['expect']
+  const it: typeof import('vitest')['it']
+  const suite: typeof import('vitest')['suite']
+  const test: typeof import('vitest')['test']
+  const vi: typeof import('vitest')['vi']
+  const vitest: typeof import('vitest')['vitest']
+}
diff --git a/web-components/jest.config.js b/web-components/jest.config.js
deleted file mode 100644
index e86e13bab9..0000000000
--- a/web-components/jest.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-};
diff --git a/web-components/package.json b/web-components/package.json
index 6f03a67f8f..6ce8956432 100644
--- a/web-components/package.json
+++ b/web-components/package.json
@@ -3,6 +3,7 @@
   "version": "2.6.5",
   "private": true,
   "main": "build/index.js",
+  "type": "module",
   "scripts": {
     "remove-previous-files": "shx rm -rf ./lib/* ./tsconfig.tsbuildinfo",
     "copy-assets": "cp ./src/theme/fonts.css ./lib/theme/fonts.css && cp -R ./src/theme/assets ./lib/theme/",
@@ -12,7 +13,8 @@
     "lint-fix": "eslint ./src --fix -c .eslintrc.js --ext .ts,.tsx",
     "format": "prettier --write --loglevel warn --ignore-path=../.prettierignore './src/**/*.{ts,tsx,json,md,css}'",
     "format-and-fix": "bun run format && bun run lint-fix",
-    "test": "jest"
+    "test": "vitest",
+    "test:ui": "vitest --ui"
   },
   "browserslist": [
     ">0.2%",
@@ -86,17 +88,19 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@types/jest": "^29.0.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/mapbox__mapbox-sdk": "^0.11.1",
     "@types/react-lazyload": "^3.1.0",
+    "canvas": "^2.11.2",
     "clsx": "^2.0.0",
     "csstype": "^3.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "jest": "^28.1.3",
     "prettier": "2.4.1",
     "storybook-addon-react-router-v6": "^0.1.10",
     "tailwind-merge": "^1.14.0",
-    "ts-jest": "^28.0.8"
+    "vite": "^5.3.5",
+    "vitest": "^2.0.2"
   }
 }
diff --git a/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants.ts b/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants.ts
new file mode 100644
index 0000000000..d142baf045
--- /dev/null
+++ b/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants.ts
@@ -0,0 +1,16 @@
+import {
+  REGEN_DENOM,
+  USD_DENOM,
+  USDC_DENOM,
+  USDCAXL_DENOM,
+} from 'web-marketplace/src/config/allowedBaseDenoms';
+
+export const CURRENCIES = {
+  usd: USD_DENOM,
+  usdc: USDC_DENOM,
+  uregen: REGEN_DENOM,
+  usdcaxl: USDCAXL_DENOM,
+} as const;
+
+export type Currency = keyof typeof CURRENCIES;
+export type CryptoCurrencies = Exclude<keyof typeof CURRENCIES, 'usd'>;
diff --git a/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.stories.tsx b/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.stories.tsx
new file mode 100644
index 0000000000..f2900786a6
--- /dev/null
+++ b/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { DenomIconWithCurrency } from './DenomIconWithCurrency';
+import { CURRENCIES } from './DenomIconWithCurrency.constants';
+
+export default {
+  title: 'DenomIconWithCurrency',
+  component: DenomIconWithCurrency,
+} as Meta<typeof DenomIconWithCurrency>;
+
+type Story = StoryObj<typeof DenomIconWithCurrency>;
+
+export const IconAndCurrency: Story = {
+  render: args => <DenomIconWithCurrency {...args} />,
+};
+
+IconAndCurrency.args = {
+  currency: CURRENCIES.usd,
+};
+
+export const withTooltip: Story = {
+  render: args => <DenomIconWithCurrency {...args} />,
+};
+
+withTooltip.args = {
+  currency: CURRENCIES.uregen,
+  tooltipText:
+    'Different sellers may sell the same credits at different prices. We automatically choose the lowest priced credits for you. This price is the average price of all the credits in your cart.',
+};
diff --git a/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.test.tsx b/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.test.tsx
new file mode 100644
index 0000000000..478fd5b5a2
--- /dev/null
+++ b/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.test.tsx
@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import { fireEvent, screen } from 'web-components/test/test-utils';
+import { USD_DENOM } from 'web-marketplace/src/config/allowedBaseDenoms';
+
+import { DenomIconWithCurrency } from './DenomIconWithCurrency';
+
+describe('DenomIconWithCurrency', () => {
+  const currency = USD_DENOM;
+
+  it('renders the denom icon and currency code', () => {
+    render(<DenomIconWithCurrency currency={currency} />);
+
+    const flagIcon = screen.getByTestId('USFlagIcon');
+    const currencyCode = screen.getByText(currency.toUpperCase());
+
+    expect(flagIcon).toBeInTheDocument();
+    expect(currencyCode).toBeInTheDocument();
+  });
+
+  it('renders info icon and tooltip', async () => {
+    render(
+      <DenomIconWithCurrency currency={currency} tooltipText="tooltip text" />,
+    );
+
+    const tooltipIcon = screen.getByTestId('question-mark-tooltip');
+    expect(tooltipIcon).toBeInTheDocument();
+
+    fireEvent.mouseEnter(tooltipIcon);
+    const currencyCode = await screen.findByText(/tooltip text/i);
+    expect(currencyCode).toBeInTheDocument();
+  });
+});
diff --git a/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.tsx b/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.tsx
new file mode 100644
index 0000000000..3e1121fb88
--- /dev/null
+++ b/web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.tsx
@@ -0,0 +1,33 @@
+import { cn } from 'web-components/src/utils/styles/cn';
+import { DenomIcon } from 'web-marketplace/src/components/molecules/DenomIcon/DenomIcon';
+
+import QuestionMarkTooltip from '../tooltip/QuestionMarkTooltip';
+import { Body } from '../typography';
+import { Currency } from './DenomIconWithCurrency.constants';
+
+export function DenomIconWithCurrency({
+  currency,
+  className,
+  tooltipText,
+}: {
+  currency: Currency;
+  className?: string;
+  tooltipText?: string;
+}) {
+  return (
+    <Body size="sm" className={cn('flex gap-5', className)}>
+      <DenomIcon
+        baseDenom={currency}
+        className="h-[24px] inline-block denom-icon"
+      />
+      <span className="pb-5 pt-3 text-sm">{currency.toUpperCase()}</span>
+      {tooltipText && (
+        <QuestionMarkTooltip
+          placement="bottom"
+          title={tooltipText}
+          className="mt-[4px]"
+        />
+      )}
+    </Body>
+  );
+}
diff --git a/web-components/src/components/PrefinanceTag/PrefinanceTag.stories.tsx b/web-components/src/components/PrefinanceTag/PrefinanceTag.stories.tsx
new file mode 100644
index 0000000000..0dfcb1a563
--- /dev/null
+++ b/web-components/src/components/PrefinanceTag/PrefinanceTag.stories.tsx
@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { PrefinanceTag } from './PrefinanceTag';
+
+export default {
+  title: 'PrefinanceTag',
+  component: PrefinanceTag,
+} as Meta<typeof PrefinanceTag>;
+
+type Story = StoryObj<typeof PrefinanceTag>;
+
+export const Default: Story = {
+  render: args => <PrefinanceTag {...args} />,
+};
+
+Default.args = {
+  classNames: {
+    root: '',
+    label: '',
+  },
+};
diff --git a/web-components/src/components/PrefinanceTag/PrefinanceTag.tsx b/web-components/src/components/PrefinanceTag/PrefinanceTag.tsx
new file mode 100644
index 0000000000..3d24b2046e
--- /dev/null
+++ b/web-components/src/components/PrefinanceTag/PrefinanceTag.tsx
@@ -0,0 +1,38 @@
+import { cn } from 'web-components/src/utils/styles/cn';
+
+import { PREFINANCE } from '../cards/ProjectCard/ProjectCard.constants';
+import { PrefinanceIcon } from '../icons/PrefinanceIcon';
+import { Label } from '../typography';
+
+export const PrefinanceTag = ({
+  classNames = {
+    root: '',
+    label: '',
+  },
+  iconSize = {
+    width: '18',
+    height: '19',
+  },
+}: {
+  classNames?: { root?: string; label?: string };
+  iconSize?: {
+    width: string;
+    height: string;
+  };
+}) => (
+  <div
+    className={cn(
+      'bg-purple-gradient rounded-r-[5px] flex items-center justify-center px-10 py-[3px] text-grey-0 absolute top-30 left-0',
+      classNames.root,
+    )}
+  >
+    <PrefinanceIcon width={iconSize.width} height={iconSize.height} />
+    <Label
+      className={cn('pl-10 font-extrabold uppercase', classNames.label)}
+      component="span"
+      size="xxs"
+    >
+      {PREFINANCE}
+    </Label>
+  </div>
+);
diff --git a/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.stories.tsx b/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.stories.tsx
new file mode 100644
index 0000000000..3acc4e6f32
--- /dev/null
+++ b/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CURRENCIES } from '../DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import { SupCurrencyAndAmount } from './SupCurrencyAndAmount';
+
+export default {
+  title: 'SupCurrencyAndAmount',
+  component: SupCurrencyAndAmount,
+} as Meta<typeof SupCurrencyAndAmount>;
+
+type Story = StoryObj<typeof SupCurrencyAndAmount>;
+
+export const Default: Story = {
+  render: args => <SupCurrencyAndAmount {...args} />,
+};
+
+Default.args = {
+  price: 5,
+  currencyCode: CURRENCIES.usd,
+};
diff --git a/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.test.tsx b/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.test.tsx
new file mode 100644
index 0000000000..2a02cb1c64
--- /dev/null
+++ b/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.test.tsx
@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import { SupCurrencyAndAmount } from 'web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount';
+
+import { CURRENCIES } from '../DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+describe('SupCurrencyAndAmount', () => {
+  it('renders the currency symbol and amount', () => {
+    const currency = CURRENCIES.usd;
+    const amount = '100.00';
+
+    const { getByText } = render(
+      <SupCurrencyAndAmount price={100} currencyCode={currency} />,
+    );
+
+    const currencySymbol = getByText('$');
+    const amountText = getByText(amount);
+
+    expect(currencySymbol).toBeInTheDocument();
+    expect(amountText).toBeInTheDocument();
+  });
+});
diff --git a/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.tsx b/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.tsx
new file mode 100644
index 0000000000..eac0c4fa30
--- /dev/null
+++ b/web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount.tsx
@@ -0,0 +1,20 @@
+import { CURRENCIES } from '../DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+export function SupCurrencyAndAmount({
+  price,
+  currencyCode,
+  className = '',
+}: {
+  price: number;
+  currencyCode: string;
+  className?: string;
+}) {
+  return currencyCode === CURRENCIES.usd ? (
+    <>
+      <span className="align-top text-xs">$</span>
+      <span className={className}>{price.toFixed(2)}</span>
+    </>
+  ) : (
+    <span className={className}>{price}</span>
+  );
+}
diff --git a/web-components/src/components/buttons/EditButtonIcon.tsx b/web-components/src/components/buttons/EditButtonIcon.tsx
new file mode 100644
index 0000000000..058650371d
--- /dev/null
+++ b/web-components/src/components/buttons/EditButtonIcon.tsx
@@ -0,0 +1,29 @@
+import { cn } from 'web-components/src/utils/styles/cn';
+
+import EditIcon from '../icons/EditIcon';
+
+interface ButtonProps {
+  onClick: () => void;
+  className?: string;
+  ariaLabel?: string;
+}
+
+export function EditButtonIcon({
+  onClick,
+  className = '',
+  ariaLabel = '',
+}: ButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'bg-transparent border-none hover:cursor-pointer hover:opacity-80',
+        className,
+      )}
+      aria-label={ariaLabel}
+      title={ariaLabel}
+    >
+      <EditIcon className="h-[24px] w-[24px] p-[2px] text-grey-400" />
+    </button>
+  );
+}
diff --git a/web-components/src/components/buttons/SetMaxButton.test.tsx b/web-components/src/components/buttons/SetMaxButton.test.tsx
new file mode 100644
index 0000000000..4dc1213232
--- /dev/null
+++ b/web-components/src/components/buttons/SetMaxButton.test.tsx
@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import { SetMaxButton } from 'web-components/src/components/buttons/SetMaxButton';
+import { fireEvent, screen } from 'web-components/test/test-utils';
+
+describe('SetMaxButton', () => {
+  it('calls onClick when clicked', () => {
+    const onClick = vi.fn();
+    render(<SetMaxButton onClick={onClick} />);
+    const button = screen.getByLabelText('Set max credits');
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/web-components/src/components/buttons/SetMaxButton.tsx b/web-components/src/components/buttons/SetMaxButton.tsx
new file mode 100644
index 0000000000..381256ac90
--- /dev/null
+++ b/web-components/src/components/buttons/SetMaxButton.tsx
@@ -0,0 +1,18 @@
+import { MouseEvent } from 'react';
+
+export function SetMaxButton({
+  onClick,
+}: {
+  onClick: (e: MouseEvent<HTMLElement>) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Set max credits"
+      className="ml-3 sm:ml-10 border-none w-[46px] h-[30px] py-[5px] bg-grey-500 hover:bg-grey-400 rounded text-grey-0 text-sm font-bold font-['Lato'] hover:cursor-pointer"
+    >
+      Max
+    </button>
+  );
+}
diff --git a/web-components/src/components/buttons/button.stories.tsx b/web-components/src/components/buttons/button.stories.tsx
index b1cfb0e943..52ccfd71f3 100644
--- a/web-components/src/components/buttons/button.stories.tsx
+++ b/web-components/src/components/buttons/button.stories.tsx
@@ -5,10 +5,12 @@ import { Flex } from '../box';
 import ContainedButton from './ContainedButton';
 import { CopyButton } from './CopyButton';
 import { EditButton } from './EditButton';
+import { EditButtonIcon } from './EditButtonIcon';
 import { ExpandButton } from './ExpandButton';
 import OutlinedButton from './OutlinedButton';
 import PrevNextButton from './PrevNextButton';
 import { SaveButton } from './SaveButton';
+import { SetMaxButton } from './SetMaxButton';
 import { TableActionButtons } from './TableActionButtons';
 import { TextButton } from './TextButton';
 
@@ -88,6 +90,8 @@ export const editButton = () => (
   <EditButton buttonText="Edit" onClick={() => {}} />
 );
 
+export const editButtonIcon = () => <EditButtonIcon onClick={() => {}} />;
+
 export const copyButton = {
   render: () => (
     <CopyButton content="foo" tooltipText="Copy it" toastText="Copied!" />
@@ -102,3 +106,11 @@ export const saveButton = {
     </>
   ),
 };
+
+export const setMaxButton = {
+  render: () => (
+    <>
+      <SetMaxButton onClick={() => {}} />
+    </>
+  ),
+};
diff --git a/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Content.tsx b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Content.tsx
new file mode 100644
index 0000000000..ced84c7c11
--- /dev/null
+++ b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Content.tsx
@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { EditButtonIcon } from 'web-components/src/components/buttons/EditButtonIcon';
+import { DenomIconWithCurrency } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency';
+import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import { EditableInput } from 'web-components/src/components/inputs/new/EditableInput/EditableInput';
+import { SupCurrencyAndAmount } from 'web-components/src/components/SupCurrencyAndAmount/SupCurrencyAndAmount';
+import { Title } from 'web-components/src/components/typography';
+
+import { CRYPTO_TOOLTIP_TEXT } from './OrderSummaryCard.constants';
+import { OrderProps, PaymentMethod } from './OrderSummaryCard.types';
+import { OrderSummmaryRowHeader } from './OrderSummmaryCard.RowHeader';
+
+export function OrderSummaryContent({
+  order,
+  currentBuyingStep,
+  paymentMethod,
+  onClickEditCard = () => {},
+}: {
+  order: OrderProps;
+  currentBuyingStep: number;
+  paymentMethod: PaymentMethod;
+  onClickEditCard?: () => void;
+}) {
+  const { projectName, currency, pricePerCredit, credits } = order;
+  const [creditsAmount, setCreditsAmount] = useState(credits);
+  return (
+    <div className="grid grid-cols-[75px_1fr] sm:grid-cols-[90px_1fr] max-w-full w-full pr-15 sm:px-[20px] pb-[30px] items-center sm:max-w-[330px]">
+      <Title
+        variant="h5"
+        className="col-span-2 text-base mt-0 sm:mt-[30px] mb-5 sm:mb-[15px]"
+      >
+        Order Summary
+      </Title>
+      <OrderSummmaryRowHeader text="project" className="self-start mt-5" />
+      <p className="text-[14px] sm:text-base sm:font-normal font-['Lato'] self-start m-0">
+        {projectName}
+      </p>
+      <OrderSummmaryRowHeader
+        text={`${currency !== CURRENCIES.usd ? 'avg' : ''} price per credit`}
+      />
+      <div className="justify-start items-center flex">
+        <span>
+          <SupCurrencyAndAmount
+            price={pricePerCredit}
+            currencyCode={currency}
+          />
+        </span>
+        <DenomIconWithCurrency
+          currency={currency}
+          className="pt-[8px] ml-10 text-[14px] sm:text-base"
+          tooltipText={`${
+            currency !== CURRENCIES.usd ? CRYPTO_TOOLTIP_TEXT : ''
+          }`}
+        />
+      </div>
+      <OrderSummmaryRowHeader text="# credits" className="pt-5" />
+      <div className="text-base font-normal font-['Lato'] text-[14px] sm:text-base">
+        <EditableInput
+          value={creditsAmount}
+          onChange={setCreditsAmount}
+          ariaLabel="editable-credits"
+          name="editable-credits"
+        />
+      </div>
+      <div className="col-span-full">
+        <hr className="border-t border-grey-300 border-solid border-l-0 border-r-0 border-b-0" />
+      </div>
+      <div className="flex items-end col-span-full gap-5">
+        <OrderSummmaryRowHeader text="total price" className="pb-[9px]" />
+        <div className="flex flex-wrap">
+          <span className="pt-[11px] sm:pt-5">
+            <SupCurrencyAndAmount
+              price={pricePerCredit * creditsAmount}
+              currencyCode={currency}
+              className="font-bold font-['Lato'] sm:text-[22px] mr-10"
+            />
+          </span>
+          <DenomIconWithCurrency
+            currency={currency}
+            className="pt-[12px] text-[14px] sm:text-base"
+          />
+        </div>
+      </div>
+      {currentBuyingStep > 1 &&
+        paymentMethod.type !== 'crypto' &&
+        paymentMethod.cardNumber && (
+          <div className="flex items-end col-span-full gap-5">
+            <OrderSummmaryRowHeader
+              text="payment"
+              className="items-end  pb-[4px] w-[125px]"
+            />
+            <div className="flex items-center justify-between w-full">
+              <p
+                data-testid="payment-details"
+                className="font-['Lato'] text-[14px] md:text-base m-0"
+              >
+                <span className="capitalize">
+                  {paymentMethod.type} ending in
+                </span>{' '}
+                {paymentMethod.cardNumber.slice(-4)}
+              </p>
+              <EditButtonIcon
+                onClick={onClickEditCard}
+                className="self-end"
+                ariaLabel="Change payment card"
+              />
+            </div>
+          </div>
+        )}
+    </div>
+  );
+}
diff --git a/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Image.tsx b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Image.tsx
new file mode 100644
index 0000000000..11c503653e
--- /dev/null
+++ b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.Image.tsx
@@ -0,0 +1,20 @@
+import { PrefinanceTag } from 'web-components/src/components/PrefinanceTag/PrefinanceTag';
+
+export function OrderSummaryImage({
+  src,
+  prefinanceProject,
+}: {
+  src: string;
+  prefinanceProject?: boolean;
+}) {
+  return (
+    <div className="w-[90px] sm:w-full  sm:h-[160px]">
+      {prefinanceProject && <PrefinanceTag classNames={{ root: 'top-20' }} />}
+      <img
+        src={src}
+        alt="order summary"
+        className="w-[90px] h-[60px] px-15 sm:h-[160px] sm:px-0 sm:w-full object-cover object-center"
+      />
+    </div>
+  );
+}
diff --git a/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.constants.tsx b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.constants.tsx
new file mode 100644
index 0000000000..62952efe36
--- /dev/null
+++ b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.constants.tsx
@@ -0,0 +1,2 @@
+export const CRYPTO_TOOLTIP_TEXT =
+  'Different sellers may sell the same credits at different prices. We automatically choose the lowest priced credits for you. This price is the average price of all the credits in your cart.';
diff --git a/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.stories.tsx b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.stories.tsx
new file mode 100644
index 0000000000..60160247fa
--- /dev/null
+++ b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.stories.tsx
@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+import { OrderSummaryCard } from './OrderSummaryCard';
+
+export default {
+  title: 'Cards/OrderSummaryCard',
+  component: OrderSummaryCard,
+} as Meta<typeof OrderSummaryCard>;
+
+type Story = StoryObj<typeof OrderSummaryCard>;
+
+export const Default: Story = {
+  render: args => <OrderSummaryCard {...args} />,
+};
+
+Default.args = {
+  order: {
+    image: '/coorong.png',
+    projectName: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    prefinanceProject: false,
+    pricePerCredit: 2,
+    credits: 50,
+    currency: CURRENCIES.usd,
+  },
+};
+
+export const WithPaymentDetails: Story = {
+  render: args => <OrderSummaryCard {...args} />,
+};
+
+WithPaymentDetails.args = {
+  order: {
+    image: '/coorong.png',
+    projectName: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    prefinanceProject: false,
+    pricePerCredit: 2,
+    credits: 50,
+    currency: CURRENCIES.usd,
+  },
+  currentBuyingStep: 2,
+  paymentMethod: {
+    type: 'visa',
+    cardNumber: '1234 5678 9012 3456',
+  },
+};
+
+export const WithPrefinanceProject: Story = {
+  render: args => <OrderSummaryCard {...args} />,
+};
+
+WithPrefinanceProject.args = {
+  order: {
+    image: '/coorong.png',
+    projectName: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    prefinanceProject: true,
+    pricePerCredit: 2,
+    credits: 50,
+    currency: 'usd',
+  },
+  currentBuyingStep: 2,
+  paymentMethod: {
+    type: 'visa',
+    cardNumber: '1234 5678 9012 3456',
+  },
+};
+
+export const WithCrypto: Story = {
+  render: args => <OrderSummaryCard {...args} />,
+};
+
+WithCrypto.args = {
+  order: {
+    image: '/coorong.png',
+    projectName: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    prefinanceProject: false,
+    pricePerCredit: 2,
+    credits: 50,
+    currency: CURRENCIES.uregen,
+  },
+};
diff --git a/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.test.tsx b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.test.tsx
new file mode 100644
index 0000000000..72e483034b
--- /dev/null
+++ b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.test.tsx
@@ -0,0 +1,80 @@
+import { screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import { fireEvent } from 'web-components/test/test-utils';
+
+import { OrderSummaryCard } from './OrderSummaryCard';
+import { OrderSummaryProps } from './OrderSummaryCard.types';
+
+describe('OrderSummaryCard', () => {
+  const orderSummary: OrderSummaryProps = {
+    order: {
+      projectName: 'Project Name',
+      currency: CURRENCIES.usd,
+      pricePerCredit: 10,
+      credits: 5,
+      image: 'path/to/image',
+      prefinanceProject: false,
+    },
+    paymentMethod: {
+      type: 'visa',
+      cardNumber: '1234 5678 9012 3456',
+    },
+    currentBuyingStep: 2,
+    onClickEditCard: vi.fn(),
+  };
+
+  it('displays the project name', () => {
+    render(<OrderSummaryCard {...orderSummary} />);
+    const projectName = screen.getByText('Project Name');
+    expect(projectName).toBeInTheDocument();
+  });
+
+  it('displays the price per credit', () => {
+    render(<OrderSummaryCard {...orderSummary} />);
+    const pricePerCredit = screen.getByText(/10.00/i);
+    expect(pricePerCredit).toBeInTheDocument();
+  });
+
+  it('displays the number of credits', () => {
+    render(<OrderSummaryCard {...orderSummary} />);
+
+    const numberOfCredits = screen.getByText('5');
+    expect(numberOfCredits).toBeInTheDocument();
+  });
+
+  it('updates the number of credits and total price accordingly', () => {
+    render(<OrderSummaryCard {...orderSummary} />);
+
+    const editButton = screen.getByRole('button', {
+      name: 'Edit',
+    });
+    fireEvent.click(editButton);
+    const editInput = screen.getByRole('textbox', {
+      name: 'editable-credits',
+    });
+    fireEvent.change(editInput, { target: { value: 7 } });
+
+    const updateButton = screen.getByRole('button', {
+      name: 'update',
+    });
+    fireEvent.click(updateButton);
+    const updatedNumberOfCredits = screen.getByText('7');
+    expect(updatedNumberOfCredits).toBeInTheDocument();
+
+    const pricePerCredit = screen.getByText(/70.00/i);
+    expect(pricePerCredit).toBeInTheDocument();
+  });
+
+  it('displays the total price', () => {
+    render(<OrderSummaryCard {...orderSummary} />);
+    const totalPrice = screen.getByText(/50.00/i);
+    expect(totalPrice).toBeInTheDocument();
+  });
+
+  it('displays the payment details', () => {
+    render(<OrderSummaryCard {...orderSummary} />);
+    const payment = screen.getByTestId('payment-details');
+    expect(payment.textContent).toMatch(/visa ending in 3456/i);
+  });
+});
diff --git a/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.tsx b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.tsx
new file mode 100644
index 0000000000..9555a25fb1
--- /dev/null
+++ b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.tsx
@@ -0,0 +1,23 @@
+import Card from '../Card';
+import { OrderSummaryContent } from './OrderSummaryCard.Content';
+import { OrderSummaryImage } from './OrderSummaryCard.Image';
+import { OrderSummaryProps } from './OrderSummaryCard.types';
+
+export const OrderSummaryCard = (orderSummary: OrderSummaryProps) => {
+  const { order, paymentMethod, currentBuyingStep, onClickEditCard } =
+    orderSummary;
+  return (
+    <Card className="relative sm:w-full sm:max-w-[330px] h-[100%] py-20 sm:py-0 flex flex-2 sm:flex-col ">
+      <OrderSummaryImage
+        src={order.image}
+        prefinanceProject={order.prefinanceProject}
+      />
+      <OrderSummaryContent
+        order={order}
+        currentBuyingStep={currentBuyingStep}
+        paymentMethod={paymentMethod}
+        onClickEditCard={onClickEditCard}
+      />
+    </Card>
+  );
+};
diff --git a/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.types.tsx b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.types.tsx
new file mode 100644
index 0000000000..5de68d4a31
--- /dev/null
+++ b/web-components/src/components/cards/OrderSummaryCard/OrderSummaryCard.types.tsx
@@ -0,0 +1,28 @@
+import { Currency } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+export interface OrderProps {
+  projectName: string;
+  prefinanceProject: boolean;
+  pricePerCredit: number;
+  credits: number;
+  currency: Currency;
+  image: string;
+}
+
+export interface OrderSummaryProps {
+  order: OrderProps;
+  // TO-DO remove currentBuyingStep prop and get the current step from the context
+  // this cound be a number or a string (choose credits | payment info | retirement | complete |)
+  currentBuyingStep: number;
+  // TO-DO: get from the context
+  paymentMethod: {
+    type: 'visa' | 'mastercard';
+    cardNumber: string;
+  };
+  onClickEditCard: () => void;
+}
+
+export interface PaymentMethod {
+  type: 'visa' | 'mastercard' | 'crypto';
+  cardNumber: string;
+}
diff --git a/web-components/src/components/cards/OrderSummaryCard/OrderSummmaryCard.RowHeader.tsx b/web-components/src/components/cards/OrderSummaryCard/OrderSummmaryCard.RowHeader.tsx
new file mode 100644
index 0000000000..0865bbc2c1
--- /dev/null
+++ b/web-components/src/components/cards/OrderSummaryCard/OrderSummmaryCard.RowHeader.tsx
@@ -0,0 +1,18 @@
+import { Title } from 'web-components/src/components/typography';
+
+export function OrderSummmaryRowHeader({
+  text,
+  className = '',
+}: {
+  text: string;
+  className?: string;
+}) {
+  return (
+    <Title
+      variant="h6"
+      className={`text-grey-400 text-[11px] font-extrabold font-['Lato'] uppercase tracking-[1px] m-0 ${className}`}
+    >
+      {text}
+    </Title>
+  );
+}
diff --git a/web-components/src/components/cards/ProjectCard/ProjectCard.tsx b/web-components/src/components/cards/ProjectCard/ProjectCard.tsx
index 7724072d84..f071440a46 100644
--- a/web-components/src/components/cards/ProjectCard/ProjectCard.tsx
+++ b/web-components/src/components/cards/ProjectCard/ProjectCard.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { SxProps, Theme, useTheme } from '@mui/material';
 import clsx from 'clsx';
 import InfoTooltip from 'web-components/src/components/tooltip/InfoTooltip';
+import { PrefinanceTag } from 'web-components/src/components/PrefinanceTag/PrefinanceTag';
 import { Track } from 'web-marketplace/src/lib/tracker/types';
 
 import { ButtonType } from '../../../types/shared/buttonType';
@@ -10,16 +11,14 @@ import { cn } from '../../../utils/styles/cn';
 import { BlockContent, SanityBlockContent } from '../../block-content';
 import ContainedButton from '../../buttons/ContainedButton';
 import BreadcrumbIcon from '../../icons/BreadcrumbIcon';
-import { PrefinanceIcon } from '../../icons/PrefinanceIcon';
 import ProjectPlaceInfo from '../../place/ProjectPlaceInfo';
-import { Body, Label } from '../../typography';
+import { Body } from '../../typography';
 import { Account, User } from '../../user/UserInfo';
 import MediaCard, { MediaCardProps } from '../MediaCard/MediaCard';
 import { ProjectCardButton } from './ProjectCard.Button';
 import {
   AVG_PRICE_TOOLTIP,
   DEFAULT_BUY_BUTTON,
-  PREFINANCE,
   PREFINANCE_BUTTON,
   PREFINANCE_PRICE_TOOLTIP,
   VIEW_PROJECT_BUTTON,
@@ -173,16 +172,12 @@ export function ProjectCard({
         />
       </div>
       {isPrefinanceProject && (
-        <div className="bg-purple-gradient rounded-r-[5px] flex items-center justify-center px-10 py-[3px] text-grey-0 absolute top-20 left-0">
-          <PrefinanceIcon />
-          <Label
-            className="pl-10 font-extrabold uppercase"
-            component="span"
-            size="xxs"
-          >
-            {PREFINANCE}
-          </Label>
-        </div>
+        <PrefinanceTag
+          classNames={{
+            root: 'top-20 left-0',
+            label: 'text-[10px]',
+          }}
+        />
       )}
       {comingSoon && (
         <div className={classes.comingSoon}>
diff --git a/web-components/src/components/cards/card.stories.tsx b/web-components/src/components/cards/card.stories.tsx
index b7b0ef82d8..969f7bae9a 100644
--- a/web-components/src/components/cards/card.stories.tsx
+++ b/web-components/src/components/cards/card.stories.tsx
@@ -118,10 +118,29 @@ export const projectCard = (): JSX.Element => (
       imgSrc="/coorong.png"
       tag="biodiversity"
       onClick={onClick}
-      sx={{ maxWidth: 338 }}
+      sx={{ maxWidth: 338, mr: 10, mb: 10 }}
       draft
       draftText="Draft"
     />
+
+    <ProjectCard
+      track={trackMock}
+      name="Coorong Project"
+      place={'Adelaide, South Australia, Australia'}
+      area={200}
+      comingSoon={false}
+      areaUnit="hectares"
+      imgSrc="/coorong.png"
+      tag="biodiversity"
+      onClick={onClick}
+      sx={{ maxWidth: 338, mr: 10, mb: 10 }}
+      projectPrefinancing={{
+        isPrefinanceProject: true,
+        price: '100',
+        estimatedIssuance: '200',
+        stripePaymentLink: 'https://stripe.com',
+      }}
+    />
   </Box>
 );
 
diff --git a/web-components/src/components/icons/CreditCardIcon.tsx b/web-components/src/components/icons/CreditCardIcon.tsx
new file mode 100644
index 0000000000..5ddd192b14
--- /dev/null
+++ b/web-components/src/components/icons/CreditCardIcon.tsx
@@ -0,0 +1,28 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+interface IconProps extends SvgIconProps {}
+
+export default function CreditCardIcon({
+  sx = [],
+  ...props
+}: IconProps): JSX.Element {
+  return (
+    <SvgIcon
+      data-testid="CreditCardIcon"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 29 16"
+      sx={[{ fill: 'none' }, ...(Array.isArray(sx) ? sx : [sx])]}
+      {...props}
+    >
+      <g id="icon/card">
+        <path
+          id="Vector"
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M16 4H0V3.25C0 2.56 0.448 2 1 2H15C15.552 2 16 2.56 16 3.25V4ZM16 6.5V13C16 13.2652 15.8946 13.5196 15.7071 13.7071C15.5196 13.8946 15.2652 14 15 14H1C0.734784 14 0.48043 13.8946 0.292893 13.7071C0.105357 13.5196 0 13.2652 0 13V6.5H16ZM4 10C3.73478 10 3.48043 10.1054 3.29289 10.2929C3.10536 10.4804 3 10.7348 3 11C3 11.2652 3.10536 11.5196 3.29289 11.7071C3.48043 11.8946 3.73478 12 4 12H5C5.26522 12 5.51957 11.8946 5.70711 11.7071C5.89464 11.5196 6 11.2652 6 11C6 10.7348 5.89464 10.4804 5.70711 10.2929C5.51957 10.1054 5.26522 10 5 10H4Z"
+          fill="#4FB573"
+        />
+      </g>
+    </SvgIcon>
+  );
+}
diff --git a/web-components/src/components/icons/CryptoIcon.tsx b/web-components/src/components/icons/CryptoIcon.tsx
new file mode 100644
index 0000000000..26032f4339
--- /dev/null
+++ b/web-components/src/components/icons/CryptoIcon.tsx
@@ -0,0 +1,144 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+interface IconProps extends SvgIconProps {}
+
+export default function CryptoIcon({
+  sx = [],
+  ...props
+}: IconProps): JSX.Element {
+  return (
+    <SvgIcon
+      data-testid="CryptoIcon"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 29 16"
+      sx={[{ fill: 'none' }, ...(Array.isArray(sx) ? sx : [sx])]}
+      {...props}
+    >
+      <circle cx="8.5" cy="8" r="8" fill="white" />
+      <path
+        d="M8.5 16C12.9183 16 16.5 12.4183 16.5 8C16.5 3.58172 12.9183 0 8.5 0C4.08172 0 0.5 3.58172 0.5 8C0.5 12.4183 4.08172 16 8.5 16Z"
+        fill="#2775CA"
+      />
+      <path
+        d="M7.02515 13.6008C7.02515 13.7893 6.8732 13.8961 6.69591 13.8396C4.2393 13.0603 2.46649 10.7853 2.46649 8.08934C2.46649 5.39961 4.2393 3.11838 6.69591 2.33911C6.87953 2.28255 7.02515 2.38939 7.02515 2.57792V3.04925C7.02515 3.17494 6.93018 3.31948 6.80988 3.36347C4.86612 4.07361 3.47953 5.9275 3.47953 8.08934C3.47953 10.2575 4.86612 12.1051 6.80988 12.8089C6.93018 12.8529 7.02515 12.9975 7.02515 13.1231V13.6008Z"
+        fill="white"
+      />
+      <path
+        d="M8.99108 11.8185C8.99108 11.9553 8.87865 12.0671 8.74124 12.0671H8.24157C8.10416 12.0671 7.99174 11.9553 7.99174 11.8185V11.0354C6.89872 10.8863 6.36782 10.2834 6.22416 9.45057C6.19918 9.30763 6.31161 9.18332 6.45526 9.18332H7.02363C7.1423 9.18332 7.24224 9.27034 7.26722 9.38221C7.3734 9.8732 7.66071 10.2523 8.53513 10.2523C9.17845 10.2523 9.64064 9.89184 9.64064 9.35735C9.64064 8.82285 9.37207 8.61775 8.4227 8.46238C7.02363 8.27592 6.36157 7.8533 6.36157 6.76566C6.36157 5.92662 7.0049 5.26782 7.99174 5.13109V4.36042C7.99174 4.22369 8.10416 4.11182 8.24157 4.11182H8.74124C8.87865 4.11182 8.99108 4.22369 8.99108 4.36042V5.14974C9.79679 5.29268 10.3089 5.74638 10.4776 6.50462C10.5088 6.64757 10.3964 6.77809 10.2465 6.77809H9.72184C9.60941 6.77809 9.51573 6.70351 9.4845 6.59785C9.34084 6.11929 8.99732 5.90798 8.39772 5.90798C7.73566 5.90798 7.39214 6.22494 7.39214 6.67243C7.39214 7.14478 7.58576 7.38095 8.60383 7.5239C9.97792 7.71035 10.6899 8.1019 10.6899 9.26412C10.6899 10.1467 10.0279 10.8614 8.99732 11.023V11.8185H8.99108Z"
+        fill="white"
+      />
+      <path
+        d="M10.3041 13.8395C10.1205 13.8962 9.97485 13.7892 9.97485 13.6005V13.1286C9.97485 12.9902 10.0572 12.8581 10.1901 12.8141C12.1276 12.1095 13.5205 10.2535 13.5205 8.08934C13.5205 5.91885 12.1339 4.06922 10.1901 3.3646C10.0698 3.32056 9.97485 3.17587 9.97485 3.05004V2.5782C9.97485 2.38946 10.1268 2.28251 10.3041 2.33913C12.7607 3.10666 14.5335 5.39039 14.5335 8.08305C14.5335 10.782 12.7607 13.0594 10.3041 13.8395Z"
+        fill="white"
+      />
+      <circle cx="20.5" cy="8" r="8" fill="url(#paint0_linear_0_1)" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.5 15.3744C24.5727 15.3744 27.8743 12.0528 27.8743 7.95537C27.8743 3.85797 24.5727 0.536377 20.5 0.536377C16.4273 0.536377 13.1257 3.85797 13.1257 7.95537C13.1257 12.0528 16.4273 15.3744 20.5 15.3744ZM20.5 14.7487C24.2272 14.7487 27.2486 11.7072 27.2486 7.95537C27.2486 4.20354 24.2272 1.16208 20.5 1.16208C16.7729 1.16208 13.7514 4.20354 13.7514 7.95537C13.7514 11.7072 16.7729 14.7487 20.5 14.7487Z"
+        fill="white"
+      />
+      <path
+        d="M19.8177 6.31647V6.32243L19.2575 3.36675L18.7927 3.21777L18.5007 3.61107L19.8177 6.31647Z"
+        fill="white"
+      />
+      <path
+        d="M20.1216 5.08292L20.3599 6.22706L20.6162 5.06505L20.3659 4.89819L20.1216 5.08292Z"
+        fill="white"
+      />
+      <path
+        d="M21.8914 5.28564L21.5875 5.31544L21.23 6.44766L22.0166 5.55976L21.8914 5.28564Z"
+        fill="white"
+      />
+      <path
+        d="M24.4895 5.52399V5.04131L24.0188 4.89233L21.8139 6.96012L24.4895 5.52399Z"
+        fill="white"
+      />
+      <path
+        d="M19.1026 6.74545L18.4471 5.76221L18.459 5.78604L18.4471 5.76221L18.1491 5.80988L18.1015 6.10783L19.1026 6.74545Z"
+        fill="white"
+      />
+      <path
+        d="M23.3216 7.74658L22.1476 7.97898L23.3216 8.23522L23.5003 7.9909L23.3216 7.74658Z"
+        fill="white"
+      />
+      <path
+        d="M18.5782 7.98489L15.5629 7.60352L15.2709 7.99681L15.5629 8.39011L18.5782 7.98489Z"
+        fill="white"
+      />
+      <path
+        d="M17.4638 8.64052L17.3745 8.92059L17.6188 9.09937L18.6616 8.51538L17.4638 8.64052Z"
+        fill="white"
+      />
+      <path
+        d="M17.8095 9.46891L17.7975 9.76686L18.0836 9.86817L18.9178 8.99219L17.8095 9.46891Z"
+        fill="white"
+      />
+      <path
+        d="M19.3111 9.39722L18.4232 10.1779L18.5007 10.4639L18.8046 10.4758L19.3111 9.39722Z"
+        fill="white"
+      />
+      <path
+        d="M20.3659 9.74292L20.1275 10.899L20.3719 11.0718L20.6162 10.893L20.3659 9.74292Z"
+        fill="white"
+      />
+      <path
+        d="M24.4955 10.4462L21.8139 9.02197L24.0307 11.0778L24.4955 10.9289V10.4462Z"
+        fill="white"
+      />
+      <path
+        d="M21.5399 10.6665L20.938 9.65942L21.075 10.8155L21.3611 10.9049L21.5399 10.6665Z"
+        fill="white"
+      />
+      <path
+        d="M19.8236 9.65942L18.5186 12.3708L18.8106 12.7641L19.2754 12.6151L19.8236 9.65942Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_0_1"
+          x1="16.7011"
+          y1="15.0168"
+          x2="22.824"
+          y2="-5.84682e-07"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#3FAD6C" />
+          <stop offset="1" stop-color="#6EC2B7" />
+        </linearGradient>
+      </defs>
+    </SvgIcon>
+  );
+}
+
+{
+  /* <svg width="29" height="16" viewBox="0 0 29 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.5" cy="8" r="8" fill="white"/>
+<path d="M8.5 16C12.9183 16 16.5 12.4183 16.5 8C16.5 3.58172 12.9183 0 8.5 0C4.08172 0 0.5 3.58172 0.5 8C0.5 12.4183 4.08172 16 8.5 16Z" fill="#2775CA"/>
+<path d="M7.02515 13.6008C7.02515 13.7893 6.8732 13.8961 6.69591 13.8396C4.2393 13.0603 2.46649 10.7853 2.46649 8.08934C2.46649 5.39961 4.2393 3.11838 6.69591 2.33911C6.87953 2.28255 7.02515 2.38939 7.02515 2.57792V3.04925C7.02515 3.17494 6.93018 3.31948 6.80988 3.36347C4.86612 4.07361 3.47953 5.9275 3.47953 8.08934C3.47953 10.2575 4.86612 12.1051 6.80988 12.8089C6.93018 12.8529 7.02515 12.9975 7.02515 13.1231V13.6008Z" fill="white"/>
+<path d="M8.99108 11.8185C8.99108 11.9553 8.87865 12.0671 8.74124 12.0671H8.24157C8.10416 12.0671 7.99174 11.9553 7.99174 11.8185V11.0354C6.89872 10.8863 6.36782 10.2834 6.22416 9.45057C6.19918 9.30763 6.31161 9.18332 6.45526 9.18332H7.02363C7.1423 9.18332 7.24224 9.27034 7.26722 9.38221C7.3734 9.8732 7.66071 10.2523 8.53513 10.2523C9.17845 10.2523 9.64064 9.89184 9.64064 9.35735C9.64064 8.82285 9.37207 8.61775 8.4227 8.46238C7.02363 8.27592 6.36157 7.8533 6.36157 6.76566C6.36157 5.92662 7.0049 5.26782 7.99174 5.13109V4.36042C7.99174 4.22369 8.10416 4.11182 8.24157 4.11182H8.74124C8.87865 4.11182 8.99108 4.22369 8.99108 4.36042V5.14974C9.79679 5.29268 10.3089 5.74638 10.4776 6.50462C10.5088 6.64757 10.3964 6.77809 10.2465 6.77809H9.72184C9.60941 6.77809 9.51573 6.70351 9.4845 6.59785C9.34084 6.11929 8.99732 5.90798 8.39772 5.90798C7.73566 5.90798 7.39214 6.22494 7.39214 6.67243C7.39214 7.14478 7.58576 7.38095 8.60383 7.5239C9.97792 7.71035 10.6899 8.1019 10.6899 9.26412C10.6899 10.1467 10.0279 10.8614 8.99732 11.023V11.8185H8.99108Z" fill="white"/>
+<path d="M10.3041 13.8395C10.1205 13.8962 9.97485 13.7892 9.97485 13.6005V13.1286C9.97485 12.9902 10.0572 12.8581 10.1901 12.8141C12.1276 12.1095 13.5205 10.2535 13.5205 8.08934C13.5205 5.91885 12.1339 4.06922 10.1901 3.3646C10.0698 3.32056 9.97485 3.17587 9.97485 3.05004V2.5782C9.97485 2.38946 10.1268 2.28251 10.3041 2.33913C12.7607 3.10666 14.5335 5.39039 14.5335 8.08305C14.5335 10.782 12.7607 13.0594 10.3041 13.8395Z" fill="white"/>
+<circle cx="20.5" cy="8" r="8" fill="url(#paint0_linear_0_1)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 15.3744C24.5727 15.3744 27.8743 12.0528 27.8743 7.95537C27.8743 3.85797 24.5727 0.536377 20.5 0.536377C16.4273 0.536377 13.1257 3.85797 13.1257 7.95537C13.1257 12.0528 16.4273 15.3744 20.5 15.3744ZM20.5 14.7487C24.2272 14.7487 27.2486 11.7072 27.2486 7.95537C27.2486 4.20354 24.2272 1.16208 20.5 1.16208C16.7729 1.16208 13.7514 4.20354 13.7514 7.95537C13.7514 11.7072 16.7729 14.7487 20.5 14.7487Z" fill="white"/>
+<path d="M19.8177 6.31647V6.32243L19.2575 3.36675L18.7927 3.21777L18.5007 3.61107L19.8177 6.31647Z" fill="white"/>
+<path d="M20.1216 5.08292L20.3599 6.22706L20.6162 5.06505L20.3659 4.89819L20.1216 5.08292Z" fill="white"/>
+<path d="M21.8914 5.28564L21.5875 5.31544L21.23 6.44766L22.0166 5.55976L21.8914 5.28564Z" fill="white"/>
+<path d="M24.4895 5.52399V5.04131L24.0188 4.89233L21.8139 6.96012L24.4895 5.52399Z" fill="white"/>
+<path d="M19.1026 6.74545L18.4471 5.76221L18.459 5.78604L18.4471 5.76221L18.1491 5.80988L18.1015 6.10783L19.1026 6.74545Z" fill="white"/>
+<path d="M23.3216 7.74658L22.1476 7.97898L23.3216 8.23522L23.5003 7.9909L23.3216 7.74658Z" fill="white"/>
+<path d="M18.5782 7.98489L15.5629 7.60352L15.2709 7.99681L15.5629 8.39011L18.5782 7.98489Z" fill="white"/>
+<path d="M17.4638 8.64052L17.3745 8.92059L17.6188 9.09937L18.6616 8.51538L17.4638 8.64052Z" fill="white"/>
+<path d="M17.8095 9.46891L17.7975 9.76686L18.0836 9.86817L18.9178 8.99219L17.8095 9.46891Z" fill="white"/>
+<path d="M19.3111 9.39722L18.4232 10.1779L18.5007 10.4639L18.8046 10.4758L19.3111 9.39722Z" fill="white"/>
+<path d="M20.3659 9.74292L20.1275 10.899L20.3719 11.0718L20.6162 10.893L20.3659 9.74292Z" fill="white"/>
+<path d="M24.4955 10.4462L21.8139 9.02197L24.0307 11.0778L24.4955 10.9289V10.4462Z" fill="white"/>
+<path d="M21.5399 10.6665L20.938 9.65942L21.075 10.8155L21.3611 10.9049L21.5399 10.6665Z" fill="white"/>
+<path d="M19.8236 9.65942L18.5186 12.3708L18.8106 12.7641L19.2754 12.6151L19.8236 9.65942Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_0_1" x1="16.7011" y1="15.0168" x2="22.824" y2="-5.84682e-07" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3FAD6C"/>
+<stop offset="1" stop-color="#6EC2B7"/>
+</linearGradient>
+</defs>
+</svg> */
+}
diff --git a/web-components/src/components/icons/LeafIcon.tsx b/web-components/src/components/icons/LeafIcon.tsx
new file mode 100644
index 0000000000..713b8091f7
--- /dev/null
+++ b/web-components/src/components/icons/LeafIcon.tsx
@@ -0,0 +1,139 @@
+interface IconProps {
+  className?: string;
+}
+
+export const LeafIcon = ({ className }: IconProps): JSX.Element => {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="32"
+      height="31"
+      viewBox="0 0 32 31"
+      fill="none"
+    >
+      <rect width="32" height="31" fill="#F5F5F5" />
+      <rect
+        width="15122"
+        height="16121"
+        transform="translate(-6268 -6312)"
+        fill="#D2D5D9"
+      />
+      <g clip-path="url(#clip0_0_1)">
+        <rect
+          width="1440"
+          height="1848"
+          transform="translate(-666 -509)"
+          fill="#FAFAFA"
+        />
+        <rect
+          x="-415.5"
+          y="-186.5"
+          width="559"
+          height="1069"
+          rx="4.5"
+          fill="white"
+        />
+        <rect
+          x="-415.5"
+          y="-186.5"
+          width="559"
+          height="1069"
+          rx="4.5"
+          stroke="#D2D5D9"
+        />
+        <rect
+          x="-110.5"
+          y="-12.5"
+          width="214"
+          height="59"
+          rx="1.5"
+          fill="white"
+        />
+        <rect
+          x="-110.5"
+          y="-12.5"
+          width="214"
+          height="59"
+          rx="1.5"
+          stroke="#D2D5D9"
+        />
+        <circle cx="15.5" cy="16.5" r="12.5" fill="#EBF8E3" />
+        <circle cx="15.5" cy="16.5" r="12.5" fill="url(#pattern0_0_1)" />
+        <circle cx="15.5" cy="16.5" r="12.5" fill="url(#paint0_linear_0_1)" />
+        <path
+          d="M17.2738 21.9539C24.8535 11.6243 12.6298 6.30246 12.6298 6.30246C7.38872 12.904 9.562 20.2079 17.2738 21.9539Z"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M12.5594 6.60371C12.7558 11.0812 14.4264 20.8367 19.5381 24.039"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M17.8721 10.6133L14.3111 15.8485"
+          stroke="white"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15.7061 8.30859L13.2745 12.043"
+          stroke="white"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M19.4082 13.5332L15.8106 18.9055"
+          stroke="white"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <pattern
+          id="pattern0_0_1"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use
+            xlinkHref="#image0_0_1"
+            transform="translate(0.07 0.08) scale(0.00425)"
+          />
+        </pattern>
+        <linearGradient
+          id="paint0_linear_0_1"
+          x1="23.2381"
+          y1="4"
+          x2="10.6674"
+          y2="31.7114"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#527984" />
+          <stop offset="0.5" stop-color="#79C6AA" />
+          <stop offset="1" stop-color="#C4DAB5" />
+        </linearGradient>
+        <clipPath id="clip0_0_1">
+          <rect
+            width="1440"
+            height="1848"
+            fill="white"
+            transform="translate(-666 -509)"
+          />
+        </clipPath>
+        <image
+          id="image0_0_1"
+          width="200"
+          height="200"
+          xlinkHref="data:image/png;base64,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"
+        />
+      </defs>
+    </svg>
+  );
+};
diff --git a/web-components/src/components/icons/flags/USFlagIcon.tsx b/web-components/src/components/icons/flags/USFlagIcon.tsx
new file mode 100644
index 0000000000..3c0dcc0e9d
--- /dev/null
+++ b/web-components/src/components/icons/flags/USFlagIcon.tsx
@@ -0,0 +1,99 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+interface IconProps extends SvgIconProps {}
+
+export default function USFlagIcon({
+  sx = [],
+  ...props
+}: IconProps): JSX.Element {
+  return (
+    <SvgIcon
+      data-testid="USFlagIcon"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 25 26"
+      sx={[{ fill: 'none' }, ...(Array.isArray(sx) ? sx : [sx])]}
+      {...props}
+    >
+      <rect width="25" height="26" fill="#F5F5F5" />
+      <g id="Prefinance purchase flow">
+        <rect
+          width="10224"
+          height="4566"
+          transform="translate(-2865 -1054)"
+          fill="#D2D5D9"
+        />
+        <g id="Buy credits">
+          <rect
+            width="1441"
+            height="1194"
+            transform="translate(-1021 -688)"
+            fill="#FAFAFA"
+          />
+          <g id="Content">
+            <g id="Frame 8295">
+              <g id="Order Summary / Desktop">
+                <rect
+                  x="-160.5"
+                  y="-281.5"
+                  width="329"
+                  height="428"
+                  rx="4.5"
+                  fill="white"
+                />
+                <rect
+                  x="-160.5"
+                  y="-281.5"
+                  width="329"
+                  height="428"
+                  rx="4.5"
+                  stroke="#D2D5D9"
+                />
+                <g id="Content_2">
+                  <g id="Rows of content">
+                    <g id="# credits">
+                      <g id="Price">
+                        <g id="Price_2">
+                          <g id="Token or USD">
+                            <g id="Token / USD">
+                              <circle
+                                id="USD"
+                                cx="12.5"
+                                cy="13"
+                                r="12.5"
+                                fill="url(#pattern0_0_1)"
+                              />
+                            </g>
+                          </g>
+                        </g>
+                      </g>
+                    </g>
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+      <defs>
+        <pattern
+          id="pattern0_0_1"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use
+            xlinkHref="#image0_0_1"
+            transform="translate(-0.261538) scale(0.00384615)"
+          />
+        </pattern>
+        <image
+          id="image0_0_1"
+          data-name="image.png"
+          width="500"
+          height="260"
+          xlinkHref="data:image/png;base64,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"
+        />
+      </defs>
+    </SvgIcon>
+  );
+}
diff --git a/web-components/src/components/icons/icons.stories.tsx b/web-components/src/components/icons/icons.stories.tsx
index 91b6f7211f..9dd7c0408c 100644
--- a/web-components/src/components/icons/icons.stories.tsx
+++ b/web-components/src/components/icons/icons.stories.tsx
@@ -31,11 +31,13 @@ import { CopyIcon } from './CopyIcon';
 import CountingIcon from './CountingIcon';
 import { CreditBatchIcon } from './CreditBatchIcon';
 import { CreditBatchLightIcon } from './CreditBatchLightIcon';
+import CreditCardIcon from './CreditCardIcon';
 import { CreditClassIcon } from './CreditClassIcon';
 import CreditsIcon from './CreditsIcon';
 import CreditsIssuedIcon from './CreditsIssued';
 import CreditsRetiredIcon from './CreditsRetired';
 import CreditsTradeableIcon from './CreditsTradeable';
+import CryptoIcon from './CryptoIcon';
 import CurrentCreditsIcon from './CurrentCreditsIcon';
 import DocumentIcon from './DocumentIcon';
 import { DraftDocumentIcon } from './DraftDocumentIcon';
@@ -48,6 +50,7 @@ import ErrorIcon from './ErrorIcon';
 import EyeIcon from './EyeIcon';
 import FarmerIcon from './FarmerIcon';
 import FilterIcon from './FilterIcon';
+import USFlagIcon from './flags/USFlagIcon';
 import { GreenPinIcon } from './GreenPinIcon';
 import { HorizontalDotsIcon } from './HorizontalDotsIcon';
 import { ImageIcon } from './ImageIcon';
@@ -384,5 +387,8 @@ export const allIcons = (): JSX.Element => (
     <LabeledIcon icon={<YoutubeIcon color="red" />} label="YoutubeIcon" />
     <LabeledIcon icon={<ZoomIcon />} label="ZoomIcon" />
     <LabeledIcon icon={<WarningIcon />} label="WarningIcon" />
+    <LabeledIcon icon={<USFlagIcon />} label="USFlagIcon" />
+    <LabeledIcon icon={<CreditCardIcon />} label="CreditCardIcon" />
+    <LabeledIcon icon={<CryptoIcon />} label="CryptoIcon" />
   </Grid>
 );
diff --git a/web-components/src/components/inputs/new/CustomSelect/CustomSelect.Option.tsx b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.Option.tsx
new file mode 100644
index 0000000000..c1ac470463
--- /dev/null
+++ b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.Option.tsx
@@ -0,0 +1,28 @@
+import { CryptoCurrencies } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import { Option } from 'web-components/src/components/inputs/new/CustomSelect/CustomSelect.types';
+
+type SelectOptionProps = {
+  option: Option;
+  handleSelect: (currency: CryptoCurrencies | string) => void;
+};
+
+export const SelectOption = ({ option, handleSelect }: SelectOptionProps) => {
+  const handleClick = () => {
+    if (option?.value && 'value' in option) {
+      handleSelect(option.value);
+    } else if (option?.component?.label) {
+      handleSelect(option.component.label as CryptoCurrencies);
+    }
+  };
+
+  return (
+    <button
+      aria-label="Select option"
+      className="w-full py-5 px-5 text-sm border-t-grey-0 border-r-grey-0 border-l-grey-0 border-b-grey-0 border-solid items-end bg-grey-0 hover:border-b-brand-300"
+      role="menuitem"
+      onClick={handleClick}
+    >
+      {'value' in option ? option.label : <option.component.element />}
+    </button>
+  );
+};
diff --git a/web-components/src/components/inputs/new/CustomSelect/CustomSelect.Placeholder.tsx b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.Placeholder.tsx
new file mode 100644
index 0000000000..921992b0fa
--- /dev/null
+++ b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.Placeholder.tsx
@@ -0,0 +1,33 @@
+import { ComponentType } from 'react';
+import BreadcrumbIcon from 'web-components/src/components/icons/BreadcrumbIcon';
+import { Option } from 'web-components/src/components/inputs/new/CustomSelect/CustomSelect.types';
+
+export function Placeholder({
+  setIsOpen,
+  isOpen,
+  options,
+  selectedOption,
+  OptionComponent,
+}: {
+  setIsOpen: (isOpen: boolean) => void;
+  isOpen: boolean;
+  options: Option[];
+  selectedOption: string;
+  OptionComponent: ComponentType;
+}) {
+  return (
+    <button
+      aria-label="Select options"
+      type="button"
+      className="inline-flex justify-center w-full border-none px-4 py-2 bg-grey-0 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none"
+      onClick={() => setIsOpen(!isOpen)}
+    >
+      {'value' in options[0] ? (
+        options.find(opt => opt.value === selectedOption)?.label
+      ) : (
+        <OptionComponent />
+      )}
+      <BreadcrumbIcon className="mr-1 ml-10 mt-[7px] h-10 w-10" />
+    </button>
+  );
+}
diff --git a/web-components/src/components/inputs/new/CustomSelect/CustomSelect.stories.tsx b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.stories.tsx
new file mode 100644
index 0000000000..84d3638807
--- /dev/null
+++ b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.stories.tsx
@@ -0,0 +1,46 @@
+import { lazy } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+const CustomSelect = lazy(() => import('./CustomSelect'));
+
+export default {
+  title: 'Inputs/CustomSelect',
+  component: CustomSelect,
+} as Meta<typeof CustomSelect>;
+
+type Story = StoryObj<typeof CustomSelect>;
+
+const options = [
+  { label: 'USD', value: 'usd' },
+  { label: 'UREGEN', value: 'uregen' },
+  { label: 'USDC', value: 'usdc' },
+];
+
+const Component1 = () => <div>🌲 Component 1</div>;
+const Component2 = () => <div>🌴 Component 2</div>;
+const Component3 = () => <div>🌻 Component 3</div>;
+const componentOptions = [
+  { component: { label: 'Component1', element: Component1 } },
+  { component: { label: 'Component2', element: Component2 } },
+  { component: { label: 'Component3', element: Component3 } },
+];
+
+export const WithText: Story = {
+  render: args => <CustomSelect {...args} />,
+};
+
+WithText.args = {
+  options: options,
+  onSelect: () => {},
+  defaultOption: 'usd',
+};
+
+export const WithComponent: Story = {
+  render: args => <CustomSelect {...args} />,
+};
+
+WithComponent.args = {
+  options: componentOptions,
+  onSelect: () => {},
+  defaultOption: 'Component1',
+};
diff --git a/web-components/src/components/inputs/new/CustomSelect/CustomSelect.test.tsx b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.test.tsx
new file mode 100644
index 0000000000..3984cd9a4d
--- /dev/null
+++ b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.test.tsx
@@ -0,0 +1,119 @@
+import { render } from '@testing-library/react';
+import { fireEvent, screen } from 'web-components/test/test-utils';
+
+import CustomSelect from './CustomSelect';
+
+describe('CustomSelect', () => {
+  const defaultOption = 'usd';
+  const onSelect = vi.fn();
+  const options = [
+    { label: 'USD', value: 'usd' },
+    { label: 'UREGEN', value: 'uregen' },
+    { label: 'USDC', value: 'usdc' },
+  ];
+
+  const Component1 = () => <div>Component1</div>;
+  const Component2 = () => <div>Component2</div>;
+  const componentOption = [
+    { component: { label: 'Component1', element: Component1 } },
+    { component: { label: 'Component2', element: Component2 } },
+  ];
+
+  it('renders the default option', () => {
+    render(
+      <CustomSelect
+        options={options}
+        onSelect={onSelect}
+        defaultOption={defaultOption}
+      />,
+    );
+
+    const defaultOptionElement = screen.getByText(/usd/i);
+    expect(defaultOptionElement).toBeInTheDocument();
+  });
+
+  it('opens the dropdown when clicked', () => {
+    render(
+      <CustomSelect
+        options={options}
+        onSelect={onSelect}
+        defaultOption={defaultOption}
+      />,
+    );
+
+    const dropdownButton = screen.getByRole('button');
+    fireEvent.click(dropdownButton);
+
+    const dropdownMenu = screen.getByRole('menu');
+    expect(dropdownMenu).toBeInTheDocument();
+  });
+
+  it('calls onSelect when an option is selected', () => {
+    render(
+      <CustomSelect
+        options={options}
+        onSelect={onSelect}
+        defaultOption={defaultOption}
+      />,
+    );
+
+    const dropdownButton = screen.getByRole('button');
+    fireEvent.click(dropdownButton);
+
+    const optionButton = screen.getByText(/uregen/i);
+    fireEvent.click(optionButton);
+
+    expect(onSelect).toHaveBeenCalledWith('uregen');
+  });
+
+  it('renders a component option', async () => {
+    render(
+      <CustomSelect
+        options={componentOption}
+        onSelect={onSelect}
+        defaultOption={defaultOption}
+      />,
+    );
+
+    const dropdownButton = screen.getByLabelText('Select options');
+    fireEvent.click(dropdownButton);
+    const optionButton = screen.getAllByLabelText('Select option')[0];
+    expect(optionButton).toBeInTheDocument();
+  });
+
+  it('renders the selected option in the placeholder', () => {
+    render(
+      <CustomSelect
+        options={componentOption}
+        onSelect={onSelect}
+        defaultOption={defaultOption}
+      />,
+    );
+
+    const dropdownButton = screen.getByLabelText('Select options');
+    fireEvent.click(dropdownButton);
+    const optionButton = screen.getAllByLabelText('Select option')[0];
+    fireEvent.click(optionButton);
+
+    const selectedOption = screen.getByText(/Component1/i);
+    expect(selectedOption).toBeInTheDocument();
+  });
+
+  it('closes the dropdown when an option is selected', () => {
+    render(
+      <CustomSelect
+        options={componentOption}
+        onSelect={onSelect}
+        defaultOption={defaultOption}
+      />,
+    );
+
+    const dropdownButton = screen.getByLabelText('Select options');
+    fireEvent.click(dropdownButton);
+    const optionButton = screen.getAllByLabelText('Select option')[0];
+    fireEvent.click(optionButton);
+
+    const dropdownMenu = screen.queryByRole('menu');
+    expect(dropdownMenu).not.toBeInTheDocument();
+  });
+});
diff --git a/web-components/src/components/inputs/new/CustomSelect/CustomSelect.tsx b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.tsx
new file mode 100644
index 0000000000..e47bcd234e
--- /dev/null
+++ b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.tsx
@@ -0,0 +1,76 @@
+import { ComponentType, useEffect, useState } from 'react';
+import { CryptoCurrencies } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import { Option } from 'web-components/src/components/inputs/new/CustomSelect/CustomSelect.types';
+
+import { SelectOption } from './CustomSelect.Option';
+import { Placeholder } from './CustomSelect.Placeholder';
+
+const CustomSelect = ({
+  options,
+  onSelect,
+  defaultOption,
+}: {
+  options: Option[];
+  onSelect: (currency: CryptoCurrencies | string) => void;
+  defaultOption: string;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<string>(defaultOption);
+  const [OptionComponent, setOptionComponent] = useState<ComponentType>(
+    () => options[0].component?.element as ComponentType,
+  );
+
+  const handleSelect = (option: CryptoCurrencies | string) => {
+    setSelectedOption(option);
+    onSelect(option);
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const option =
+      options.find(opt => opt.value === selectedOption) ||
+      options.find(opt => opt.component?.label === selectedOption);
+    if (option && 'component' in option) {
+      const NextOption = option?.component?.element as ComponentType;
+      setOptionComponent(() => NextOption);
+    }
+  }, [options, selectedOption, setOptionComponent]);
+
+  return (
+    <div className="relative items-center inline-block p-10 pt-15 custom-select">
+      <Placeholder
+        setIsOpen={setIsOpen}
+        isOpen={isOpen}
+        options={options}
+        selectedOption={selectedOption}
+        OptionComponent={OptionComponent}
+      />
+      {isOpen && (
+        <div
+          className="w-auto absolute top-50 left-0 mt-2 shadow-lg bg-grey-0 ring-1 ring-grey-200 p-15 pb-10 pt-5 flex flex-col items-start"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          {options
+            .filter(
+              option =>
+                option.component?.label !== selectedOption &&
+                option.label !== selectedOption,
+            )
+            .map((option, i) => {
+              return (
+                <SelectOption
+                  key={`${option}-${i}`}
+                  option={option}
+                  handleSelect={handleSelect}
+                />
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomSelect;
diff --git a/web-components/src/components/inputs/new/CustomSelect/CustomSelect.types.tsx b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.types.tsx
new file mode 100644
index 0000000000..0afa7de4b3
--- /dev/null
+++ b/web-components/src/components/inputs/new/CustomSelect/CustomSelect.types.tsx
@@ -0,0 +1,18 @@
+import { ComponentType } from 'react';
+
+export type OptionWithLabelAndValue = {
+  label: string;
+  value: string;
+  component?: never;
+};
+
+export type OptionWithComponent = {
+  label?: never;
+  value?: never;
+  component: {
+    label: string;
+    element: ComponentType;
+  };
+};
+
+export type Option = OptionWithLabelAndValue | OptionWithComponent;
diff --git a/web-components/src/components/inputs/new/EditableInput/EditableInput.stories.tsx b/web-components/src/components/inputs/new/EditableInput/EditableInput.stories.tsx
new file mode 100644
index 0000000000..af4dddaccf
--- /dev/null
+++ b/web-components/src/components/inputs/new/EditableInput/EditableInput.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { EditableInput } from './EditableInput';
+
+export default {
+  title: 'Inputs/EditableInput',
+  component: EditableInput,
+} as Meta<typeof EditableInput>;
+
+type Story = StoryObj<typeof EditableInput>;
+
+export const Default: Story = {
+  render: args => <EditableInput {...args} />,
+};
+
+Default.args = {
+  value: 5,
+  onChange: () => {},
+};
diff --git a/web-components/src/components/inputs/new/EditableInput/EditableInput.test.tsx b/web-components/src/components/inputs/new/EditableInput/EditableInput.test.tsx
new file mode 100644
index 0000000000..bde3506d9a
--- /dev/null
+++ b/web-components/src/components/inputs/new/EditableInput/EditableInput.test.tsx
@@ -0,0 +1,76 @@
+import { render } from '@testing-library/react';
+import { fireEvent, screen } from 'web-components/test/test-utils';
+
+import { EditableInput } from './EditableInput';
+
+describe('EditableInput', () => {
+  it('renders the amount and edit button', () => {
+    const onChangeMock = vi.fn();
+    render(
+      <EditableInput
+        value={100}
+        onChange={onChangeMock}
+        ariaLabel="testEditableInput"
+      />,
+    );
+    const amount = screen.getByText('100');
+    expect(amount).toBeInTheDocument();
+    const editButton = screen.getByRole('button', {
+      name: 'Edit',
+    });
+
+    expect(editButton).toBeInTheDocument();
+  });
+
+  it('renders the input field and update button when when click edit', () => {
+    const onChangeMock = vi.fn();
+    render(
+      <EditableInput
+        value={100}
+        onChange={onChangeMock}
+        ariaLabel="testEditableInput"
+      />,
+    );
+    const editButton = screen.getByRole('button', {
+      name: 'Edit',
+    });
+    fireEvent.click(editButton);
+    const input = screen.getByRole('textbox', {
+      name: 'testEditableInput',
+    });
+    expect(input).toBeInTheDocument();
+
+    const updateButton = screen.getByRole('button', {
+      name: 'update',
+    });
+    expect(updateButton).toBeInTheDocument();
+  });
+
+  it('calls the onChange callback with the updated amount when click update', () => {
+    const onChangeMock = vi.fn();
+    render(
+      <EditableInput
+        value={100}
+        onChange={onChangeMock}
+        ariaLabel="testEditableInput"
+      />,
+    );
+
+    const editButton = screen.getByRole('button', {
+      name: 'Edit',
+    });
+    fireEvent.click(editButton);
+
+    const input = screen.getByRole('textbox', {
+      name: 'testEditableInput',
+    });
+    fireEvent.change(input, { target: { value: '200' } });
+
+    const updateButton = screen.getByRole('button', {
+      name: 'update',
+    });
+    fireEvent.click(updateButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith(200);
+  });
+});
diff --git a/web-components/src/components/inputs/new/EditableInput/EditableInput.tsx b/web-components/src/components/inputs/new/EditableInput/EditableInput.tsx
new file mode 100644
index 0000000000..23b30a0d1c
--- /dev/null
+++ b/web-components/src/components/inputs/new/EditableInput/EditableInput.tsx
@@ -0,0 +1,80 @@
+import { ChangeEvent, KeyboardEvent, useState } from 'react';
+import { EditButtonIcon } from 'web-components/src/components/buttons/EditButtonIcon';
+import { TextButton } from 'web-components/src/components/buttons/TextButton';
+
+interface EditableInputProps {
+  value: number;
+  onChange: (amount: number) => void;
+  name?: string;
+  ariaLabel?: string;
+  className?: string;
+}
+
+export const EditableInput = ({
+  value,
+  onChange,
+  name = '',
+  ariaLabel = 'Editable text input',
+  className = '',
+}: EditableInputProps) => {
+  const [editable, setEditable] = useState(false);
+  const [amount, setAmount] = useState(value);
+
+  const toggleEditable = () => {
+    setEditable(!editable);
+  };
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    if (isNaN(+e.target.value)) return;
+    setAmount(+e.target.value);
+  };
+
+  const handleOnUpdate = () => {
+    onChange(+amount);
+    toggleEditable();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      if (isNaN(+e.currentTarget.value)) return;
+      setAmount(+e.currentTarget.value);
+      handleOnUpdate();
+    }
+  };
+
+  return (
+    <>
+      {editable ? (
+        <div
+          className={`flex [@media(max-width:340px)]:flex-col [@media(max-width:340px)]:mb-20 sm:flex-row items-center [@media(max-width:340px)]:items-start h-[47px] ${className}`}
+        >
+          <input
+            pattern="[0-9]*"
+            maxLength={6}
+            className="min-w-60 max-w-[80px] h-30 py-20 px-10 border border-gray-300 text-base font-normal font-['Lato']"
+            type="text"
+            value={amount}
+            onChange={handleOnChange}
+            onKeyDown={handleKeyDown}
+            aria-label={ariaLabel}
+            name={name}
+            autoFocus
+          />
+          <TextButton
+            className="lowercase text-[12px] mt-5 sm:mt-0"
+            onClick={handleOnUpdate}
+            aria-label="update"
+          >
+            update
+          </TextButton>
+        </div>
+      ) : (
+        <div className="flex justify-between h-[47px] items-center">
+          <span>{amount}</span>
+          <EditButtonIcon onClick={toggleEditable} ariaLabel="Edit" />
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web-components/src/components/inputs/new/Radio/Radio.tsx b/web-components/src/components/inputs/new/Radio/Radio.tsx
index 77df2d0777..977a68e1a4 100644
--- a/web-components/src/components/inputs/new/Radio/Radio.tsx
+++ b/web-components/src/components/inputs/new/Radio/Radio.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode } from 'react';
+import { ChangeEvent, forwardRef, ReactNode } from 'react';
 import {
   Box,
   FormControlLabel,
@@ -17,9 +17,9 @@ import { useRadioStyles } from './Radio.styles';
 import { RadiotVariant } from './Radio.types';
 
 export interface RadioProps extends RadioPropsMui {
-  value?: string;
+  value?: string | boolean;
   label?: ReactNode;
-  selectedValue?: string;
+  selectedValue?: string | boolean;
   variant?: RadiotVariant;
   optional?: string | boolean;
   helperText?: string | JSX.Element;
@@ -27,6 +27,7 @@ export interface RadioProps extends RadioPropsMui {
   sx?: SxProps<Theme>;
   description?: ReactNode;
   tooltip?: ReactNode;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const Radio = forwardRef<HTMLButtonElement, RadioProps>(
@@ -43,6 +44,7 @@ export const Radio = forwardRef<HTMLButtonElement, RadioProps>(
       description,
       tooltip,
       disabled,
+      onChange,
       ...props
     },
     ref,
@@ -89,6 +91,7 @@ export const Radio = forwardRef<HTMLButtonElement, RadioProps>(
                 icon={<span className={classes.radioBtn} />}
                 sx={{ p: 0 }}
                 ref={ref}
+                onChange={onChange}
               />
             }
             sx={{ ml: 0, mr: 1 }}
diff --git a/web-components/src/components/inputs/new/TextField/TextField.types.ts b/web-components/src/components/inputs/new/TextField/TextField.types.ts
index fbf51e5ae8..f244119064 100644
--- a/web-components/src/components/inputs/new/TextField/TextField.types.ts
+++ b/web-components/src/components/inputs/new/TextField/TextField.types.ts
@@ -7,7 +7,12 @@ export interface RegenTextFieldProps extends StandardTextFieldProps {
   startAdornment?: ReactNode;
   endAdornment?: ReactNode;
   step?: number | string;
-  customInputProps?: { min?: number; max?: number; step?: string | number };
+  customInputProps?: {
+    min?: number;
+    max?: number;
+    step?: string | number;
+    'aria-label'?: string;
+  };
   description?: string | ReactNode;
   label?: ReactNode;
   className?: string;
diff --git a/web-components/src/components/molecules/InfoCard/InfoCard.stories.tsx b/web-components/src/components/molecules/InfoCard/InfoCard.stories.tsx
index 37d477c0c3..b5830c5c37 100644
--- a/web-components/src/components/molecules/InfoCard/InfoCard.stories.tsx
+++ b/web-components/src/components/molecules/InfoCard/InfoCard.stories.tsx
@@ -19,3 +19,32 @@ Default.args = {
   },
   description: 'Contact sales@regen.network or schedule a call.',
 };
+
+export const WithComponents = Template.bind({});
+WithComponents.args = {
+  title: 'Looking for over-the-counter sales?',
+  image: {
+    src: '/illustrations/concierge-small.svg',
+  },
+  description: (
+    <p className="m-0">
+      Contact{' '}
+      <a
+        href="mailto:sales@regen.network?subject=Over-the-counter sales"
+        target="_blank"
+        rel="noreferrer"
+      >
+        sales@regen.network
+      </a>
+      <span className="px-5">or</span>
+      <a
+        className="block"
+        href="http://regen.network"
+        target="_blank"
+        rel="noreferrer"
+      >
+        schedule a call
+      </a>
+    </p>
+  ),
+};
diff --git a/web-components/src/components/molecules/InfoCard/InfoCard.tsx b/web-components/src/components/molecules/InfoCard/InfoCard.tsx
index 31a16744e6..d7919c6edd 100644
--- a/web-components/src/components/molecules/InfoCard/InfoCard.tsx
+++ b/web-components/src/components/molecules/InfoCard/InfoCard.tsx
@@ -1,3 +1,4 @@
+import { isValidElement } from 'react';
 import { Box, SxProps } from '@mui/material';
 
 import { BlockContent } from '../../../components/block-content';
@@ -42,7 +43,11 @@ const InfoCard = ({
             {parseText(title)}
           </Subtitle>
           <Body as="div" sx={{ mt: 1.75 }}>
-            <BlockContent content={description} />
+            {isValidElement(description) ? (
+              description
+            ) : (
+              <BlockContent content={description} />
+            )}
           </Body>
         </Box>
       </Box>
diff --git a/web-components/src/components/sliders/ProjectMedia.PrefinanceTag.tsx b/web-components/src/components/sliders/ProjectMedia.PrefinanceTag.tsx
deleted file mode 100644
index 74d24d36d3..0000000000
--- a/web-components/src/components/sliders/ProjectMedia.PrefinanceTag.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { PREFINANCE } from '../cards/ProjectCard/ProjectCard.constants';
-import { PrefinanceIcon } from '../icons/PrefinanceIcon';
-import { Label } from '../typography';
-
-export const PrefinanceTag = () => (
-  <div className="bg-purple-gradient rounded-r-[5px] flex items-center justify-center px-10 sm:py-10 py-[3px] text-grey-0 absolute top-30 sm:top-50 left-0">
-    <PrefinanceIcon width="24" height="24" />
-    <Label
-      className="sm:text-[11px] pl-10 font-extrabold uppercase"
-      component="span"
-      size="xxs"
-    >
-      {PREFINANCE}
-    </Label>
-  </div>
-);
diff --git a/web-components/src/components/sliders/ProjectMedia.tsx b/web-components/src/components/sliders/ProjectMedia.tsx
index 5befd50eae..e6f825f2fa 100644
--- a/web-components/src/components/sliders/ProjectMedia.tsx
+++ b/web-components/src/components/sliders/ProjectMedia.tsx
@@ -8,12 +8,9 @@ import { makeStyles } from 'tss-react/mui';
 
 import { containerPaddingX, containerStyles } from '../../styles/container';
 import { getOptimizedImageSrc } from '../../utils/optimizedImageSrc';
-import { PREFINANCE } from '../cards/ProjectCard/ProjectCard.constants';
 import PlayIcon from '../icons/PlayIcon';
-import { PrefinanceIcon } from '../icons/PrefinanceIcon';
 import { Image, OptimizeImageProps } from '../image';
-import { Label } from '../typography';
-import { PrefinanceTag } from './ProjectMedia.PrefinanceTag';
+import { PrefinanceTag } from '../PrefinanceTag/PrefinanceTag';
 import { ProjectAsset } from './ProjectMedia.ProjectAsset';
 
 export interface Media {
@@ -324,7 +321,15 @@ export default function ProjectMedia({
                   {i === 0 && isMedia(a) && imageCredits && (
                     <Box className={classes.imageCredits}>{imageCredits}</Box>
                   )}
-                  {i === 0 && isPrefinanceProject && <PrefinanceTag />}
+                  {i === 0 && isPrefinanceProject && (
+                    <PrefinanceTag
+                      classNames={{
+                        root: 'sm:py-10 sm:top-50',
+                        label: 'sm:text-[11px]',
+                      }}
+                      iconSize={{ width: '24', height: '24' }}
+                    />
+                  )}
                 </Grid>
               ))}
             </Grid>
@@ -413,7 +418,15 @@ export default function ProjectMedia({
               }
             })}
           </Slider>
-          {isPrefinanceProject && <PrefinanceTag />}
+          {isPrefinanceProject && (
+            <PrefinanceTag
+              classNames={{
+                root: 'sm:py-10 sm:top-50',
+                label: 'sm:text-[11px]',
+              }}
+              iconSize={{ width: '24', height: '24' }}
+            />
+          )}
         </div>
       )}
     </div>
diff --git a/web-components/src/components/tooltip/InfoTooltipWithIcon.tsx b/web-components/src/components/tooltip/InfoTooltipWithIcon.tsx
index ca953e6e63..b38c529dcc 100644
--- a/web-components/src/components/tooltip/InfoTooltipWithIcon.tsx
+++ b/web-components/src/components/tooltip/InfoTooltipWithIcon.tsx
@@ -9,17 +9,25 @@ interface Props {
   title: TooltipProps['title'];
   outlined?: boolean;
   sx?: SxProps<Theme>;
+  className?: string;
+  placement?: TooltipProps['placement'];
 }
 
 export default function InfoTooltipWithIcon({
   title,
   outlined,
   sx,
+  className = '',
+  placement = 'top',
 }: Props): JSX.Element {
   return (
-    <InfoTooltip arrow placement="top" title={title}>
-      <Box sx={{ display: 'inline-flex' }}>
-        {outlined ? <InfoIconOutlined sx={sx} /> : <InfoIcon sx={sx} />}
+    <InfoTooltip arrow placement={placement} title={title}>
+      <Box sx={{ display: 'inline-flex' }} data-testid="info-tooltip">
+        {outlined ? (
+          <InfoIconOutlined sx={sx} className={className} />
+        ) : (
+          <InfoIcon sx={sx} className={className} />
+        )}
       </Box>
     </InfoTooltip>
   );
diff --git a/web-components/src/components/tooltip/QuestionMarkTooltip.tsx b/web-components/src/components/tooltip/QuestionMarkTooltip.tsx
index c55896d45a..ead456ed5d 100644
--- a/web-components/src/components/tooltip/QuestionMarkTooltip.tsx
+++ b/web-components/src/components/tooltip/QuestionMarkTooltip.tsx
@@ -1,4 +1,5 @@
 import { Box, SxProps, TooltipProps } from '@mui/material';
+import { cn } from 'web-components/src/utils/styles/cn';
 
 import { Theme } from '../../theme/muiTheme';
 import { sxToArray } from '../../utils/mui/sxToArray';
@@ -11,6 +12,7 @@ interface Props {
   sx?: SxProps<Theme>;
   color?: string;
   size?: TextSize;
+  placement?: TooltipProps['placement'];
   className?: string;
 }
 
@@ -19,10 +21,17 @@ export default function QuestionMarkTooltip({
   sx,
   color = 'secondary.main',
   size = 'sm',
-  className,
+  placement = 'top',
+  className = '',
 }: Props): JSX.Element {
   return (
-    <InfoTooltip arrow placement="top" title={title}>
+    <InfoTooltip
+      arrow
+      placement={placement}
+      title={title}
+      className={cn(className)}
+      data-testid="question-mark-tooltip"
+    >
       <Box
         className={className}
         sx={[
diff --git a/web-components/test/setup.ts b/web-components/test/setup.ts
new file mode 100644
index 0000000000..bb02c60cd0
--- /dev/null
+++ b/web-components/test/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/web-components/test/test-utils.tsx b/web-components/test/test-utils.tsx
new file mode 100644
index 0000000000..16aced5527
--- /dev/null
+++ b/web-components/test/test-utils.tsx
@@ -0,0 +1,2 @@
+export * from '@testing-library/react';
+export * from '@testing-library/user-event';
diff --git a/web-components/tsconfig.json b/web-components/tsconfig.json
index 2bed30a0a3..3c81425b2a 100644
--- a/web-components/tsconfig.json
+++ b/web-components/tsconfig.json
@@ -5,7 +5,7 @@
     "declaration": true,
     "jsx": "react-jsx",
     "noEmitOnError": true,
-    "types": ["node", "jest", "vite/client"],
+    "types": ["node", "vite/client", "vitest/globals","@testing-library/jest-dom"],
     "typeRoots": [
       "./node_modules/@types/",
       "./types",
@@ -24,6 +24,6 @@
     "isolatedModules": true,
     "target": "es6"
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["**/*.test.*", "node_modules"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.test.ts", "src/**/*.spec.tsx"],
+  "exclude": ["node_modules"]
 }
diff --git a/web-components/vite.config.ts b/web-components/vite.config.ts
new file mode 100644
index 0000000000..abb0b70676
--- /dev/null
+++ b/web-components/vite.config.ts
@@ -0,0 +1,18 @@
+import react from '@vitejs/plugin-react';
+import AutoImport from 'unplugin-auto-import/vite';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    AutoImport({
+      imports: ['vitest'],
+      dts: true, // generate TypeScript declaration
+    }),
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './test/setup.ts',
+  },
+});
diff --git a/web-marketplace/package.json b/web-marketplace/package.json
index 0750a5cc12..303a5c6937 100644
--- a/web-marketplace/package.json
+++ b/web-marketplace/package.json
@@ -74,7 +74,7 @@
     "react-slick": "^0.29.0",
     "react-use-intercom": "^1.2.0",
     "slug": "^9.0.0",
-    "stream": "^0.0.2",
+    "stream": "^0.0.3",
     "tss-react": "^4.4.1",
     "url-search-params-polyfill": "^8.1.0",
     "use-analytics": "^0.0.5",
@@ -95,7 +95,8 @@
     "graphql:codegen-sanity": "graphql-codegen --config sanity-codegen.yml",
     "graphql:codegen-indexer": "graphql-codegen --config indexer-codegen.yml",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "i18n:extract": "rm -rf src/lib/i18n/locales && lingui extract --overwrite"
+    "i18n:extract": "rm -rf src/lib/i18n/locales && lingui extract --overwrite",
+    "test": "vitest"
   },
   "browserslist": {
     "production": [
@@ -116,14 +117,15 @@
     "@lingui/cli": "^4.11.2",
     "@lingui/vite-plugin": "^4.11.2",
     "@rollup/plugin-inject": "^5.0.3",
-    "@storybook/addon-storyshots": "^6.3.12",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/mapbox__mapbox-sdk": "^0.13.6",
     "@types/react-lazyload": "^3.1.0",
     "@types/react-router-hash-link": "^2.4.5",
     "@types/slug": "^5.0.8",
-    "@types/storybook__addon-storyshots": "^5.3.1",
     "@types/use-analytics": "^0.0.0",
     "@types/wellknown": "^0.5.8",
     "@vitejs/plugin-react": "^4.0.0",
@@ -148,7 +150,8 @@
     "vite": "^5.2.12",
     "vite-plugin-checker": "^0.6.0",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^2.0.5"
   },
   "overrides": {
     "@walletconnect/sign-client": "2.10.4"
diff --git a/web-marketplace/src/App.test.tsx b/web-marketplace/src/App.test.tsx
deleted file mode 100644
index cf97adc2de..0000000000
--- a/web-marketplace/src/App.test.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Suspense } from 'react';
-import ReactDOM, { unmountComponentAtNode } from 'react-dom';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
-import { MockedProvider } from '@apollo/client/testing';
-import mediaQuery from 'css-mediaquery';
-
-import ThemeProvider from 'web-components/src/theme/RegenThemeProvider';
-
-import { apolloClientFactory } from 'lib/clients/apolloClientFactory';
-import { reactQueryClient } from 'lib/clients/reactQueryClient';
-
-import { getRegenRoutes } from './clients/regen/Regen.Routes';
-
-import './jest.mock';
-
-function createMatchMedia(width: unknown) {
-  return (query: string) => ({
-    matches: mediaQuery.match(query, {
-      width,
-    }),
-    addListener: () => {},
-    removeListener: () => {},
-  });
-}
-
-describe('App', () => {
-  beforeAll(() => {
-    // @ts-ignore
-    window.matchMedia = createMatchMedia(window.innerWidth);
-  });
-
-  describe('App', () => {
-    it('renders without crashing', () => {
-      const router = createMemoryRouter(
-        getRegenRoutes({ reactQueryClient, apolloClientFactory }),
-      );
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-      ReactDOM.render(
-        <MockedProvider mocks={[]}>
-          <ThemeProvider>
-            <Suspense fallback={null}>
-              <RouterProvider router={router} />
-            </Suspense>
-          </ThemeProvider>
-          ,
-        </MockedProvider>,
-        container,
-      );
-      unmountComponentAtNode(container);
-    });
-  });
-});
diff --git a/web-marketplace/src/__snapshots__/storyshots.test.ts.snap b/web-marketplace/src/__snapshots__/storyshots.test.ts.snap
deleted file mode 100644
index 8f01bb2a0c..0000000000
--- a/web-marketplace/src/__snapshots__/storyshots.test.ts.snap
+++ /dev/null
@@ -1,5237 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Action Action 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Action Action Long Description 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Blog Post Blog Post 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Buttons Combined 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Buttons Contained Button 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Buttons Edit Button 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Buttons Expand Button 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Buttons Next Button 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Buttons Outlined Button 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Buttons Prev Button 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Buttons Table Action Buttons 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Buttons Text Button 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Glance Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Green Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Green Top Icon Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Image Action Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Impact Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Map Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Monitored Impact Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards On Boarding Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Overview Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Overview Cards Group 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Project Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Project Impact Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Project Top Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Purchased Credits Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Resources Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Review Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards Step Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/Create Card Create Credit Class Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/Create Card Create Project Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/Create Card First Credit Class Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/Create Card First Project Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/Create Card No Title Or Icon 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/Create Card With Title And Icon 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/CreditClassCard Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/ReviewCard Item Display 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/ReviewCard Photo 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/ReviewCard Review Card 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Cards/ReviewCard Review Card Base 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Certificate Certificate 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Charts Bar Chart 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Credits Credit Details 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Credits Credits Gauge 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Document Document 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots EmptyState Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots EmptyState With Children 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots FAQ Category 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots FAQ Faq 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots FAQ Navigation 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots FAQ Question 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Footers Fixed Footer 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Footers Save Footer 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Footers Switch Footer 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Forms Basket Put Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Forms Basket Take Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Forms Credit Batch Recipients Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Forms Login Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Forms Sign Up Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Forms User Profile 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots GettingStartedResourcesCard Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots GradientBadge Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Header Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Icons All Icons 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Image Grid Image Grid 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Image Image Default Quality 100 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Image Item Image Item 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Image Original Image 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots InfoLabel Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Inputs Date Pick Field 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Inputs Select Text Field 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Inputs Toggle 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Loading Loading Spinner 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Map Map 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots MarketplaceLaunchBanner Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Basket Put Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Basket Take Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Confirm Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Create Sell Order Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Crop Round Image Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Crop Square Image Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Ledger Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Processing Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Tx Error Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal Tx Successful Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal/AddWalletModalConnect Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal/AddWalletModalRemove Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal/AddWalletModalSwitch Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Modal/WalletModal Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Pagination Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Account Account Address 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Place Project Place Info 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots ReadMore Read More 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Molecules/Role Field Roles Input 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Molecules/Scrollable Codebox Scrollable Codebox 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Bridge Modal Bridge Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Credit Class Form Create Credit Class Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Credit Class Form Credit Class Finished 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Credit Class Form Credit Class Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Credit Class Form Credit Class Review 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Credit Retire Modal Credit Send Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Credit Send Form Credit Retire Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Credit Send Form Credit Send Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Credit Send Modal Credit Send Modal 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/EditProfileForm Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/MediaForm Media Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Organisms/Project Metadata Form Project Metadata Form 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Registry/Templates/Multi Step Template Multi Step Template 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots ShareSection Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Sliders Project Media 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Sliders Project Media With Map 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Sliders Protected Species 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots StickyBar Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Table Actions Table 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Table Documentation Table 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Table Table Pagination 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Tabs Icon Tabs 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Tabs Mrv Tabs 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Text Layouts Labeled Detail 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Text Layouts Labeled Number 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Text Layouts Title Description 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Timeline New Timeline 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Timeline Timeline 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Timeline Timeline Item 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Tooltip Info 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Tooltip Info With Icon 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Tooltip Main Title 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Typography Body 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Typography Label 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Typography Subtitle 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Typography Title 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots User Big User Avatar 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots User Column User Info 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots User Fallback User Avatar 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots User Medium User Avatar 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots User User Avatar With Link 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots User User Info 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots User With Title 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Views Error View 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots Views Not Found View 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots atoms/CardRibbon Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots atoms/RadioCard Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots molecules/ActionCard Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots molecules/ActionCard Default 2 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots molecules/EcologicalCreditCard Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots molecules/InfoCard Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots molecules/StatCard Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots organisms/CancelButtonFooter Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots organisms/CardsGridContainer Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots organisms/CarouselSection Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots organisms/Gallery Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots organisms/Section Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
-
-exports[`Storyshots organisms/StatCardsSection Default 1`] = `
-<MemoryRouter
-  initialEntries={
-    Array [
-      Object {
-        "pathname": "/",
-        "search": "",
-        "state": undefined,
-      },
-    ]
-  }
->
-  <Routes>
-    <Route
-      element={
-        <RouterLogger>
-          <RegenThemeProvider
-            injectFonts={true}
-          >
-            <CssBaseline />
-            <Unknown />
-          </RegenThemeProvider>
-        </RouterLogger>
-      }
-      path="/"
-    >
-      <Route
-        index={true}
-      />
-    </Route>
-  </Routes>
-</MemoryRouter>
-`;
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx
new file mode 100644
index 0000000000..34aa50d64a
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx
@@ -0,0 +1,69 @@
+import { useFormContext } from 'react-hook-form';
+import { Trans } from '@lingui/macro';
+import { PAYMENT_OPTIONS } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants';
+import { ChooseCreditsFormSchemaType } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema';
+
+import { SetMaxButton } from 'web-components/src/components/buttons/SetMaxButton';
+import { DenomIconWithCurrency } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency';
+import {
+  CURRENCIES,
+  Currency,
+} from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import { Title } from 'web-components/src/components/typography/Title';
+
+export function CreditsAmountHeader({
+  creditsAvailable,
+  setMaxCreditsSelected,
+  currency,
+  paymentOption,
+}: {
+  creditsAvailable: number;
+  setMaxCreditsSelected: (value: boolean) => void;
+  currency: Currency;
+  paymentOption: string;
+}) {
+  const cryptoCurrency =
+    currency === CURRENCIES.usd ? CURRENCIES.uregen : currency;
+  const { clearErrors } = useFormContext<ChooseCreditsFormSchemaType>();
+  return (
+    <div className="flex justify-between items-center my-15 sm:mt-30">
+      <Title variant="h2" className="text-lg font-black">
+        <Trans>Amount</Trans>
+      </Title>
+      <div className="flex flex-grow justify-end items-center font-['Lato'] text-base">
+        <div className="text-sm sm:text-base pr-5 flex flex-col items-end sm:flex-row sm:items-center h-[55px]">
+          <span
+            className={`${
+              paymentOption === PAYMENT_OPTIONS.CARD
+                ? 'pt-[19px] sm:pt-0'
+                : 'pt-[7px] sm:pt-0'
+            }`}
+          >
+            <span className="font-bold font-['Lato'] mr-5">
+              {creditsAvailable}
+            </span>
+            <Trans>credits available</Trans>
+          </span>
+          {paymentOption === PAYMENT_OPTIONS.CRYPTO && (
+            <span className="flex sm:items-center">
+              <span className="px-[4px]">
+                <Trans>in</Trans>
+              </span>
+              <DenomIconWithCurrency
+                currency={cryptoCurrency}
+                className="sm:pt-5"
+              />
+            </span>
+          )}
+        </div>
+        <SetMaxButton
+          onClick={event => {
+            event.preventDefault();
+            setMaxCreditsSelected(true);
+            clearErrors();
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants.ts b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants.ts
new file mode 100644
index 0000000000..7ea35a7d4b
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants.ts
@@ -0,0 +1,26 @@
+import { msg } from '@lingui/macro';
+
+import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+export const CREDITS_AMOUNT = 'creditsAmount';
+export const CURRENCY_AMOUNT = 'currencyAmount';
+export const CREDIT_VINTAGE_OPTIONS = 'creditVintageOptions';
+export const RETIRING = 'retiring';
+export const DEFAULT_CRYPTO_CURRENCY = CURRENCIES.uregen;
+
+export const cryptoOptions = [
+  {
+    label: msg`Retire credits now`,
+    description: msg`These credits will be retired upon purchase and will not be tradeable. Retirement is permanent and non-reversible.`,
+    linkTo:
+      'https://guides.regen.network/guides/regen-marketplace-buyers-guides/ecocredits/retire-ecocredits/retirement-certification#individual-entity-credit-retirement.',
+    value: true,
+  },
+  {
+    label: msg`Buy tradable ecocredits`,
+    description: msg`These credits will be a tradeable asset. They can be retired later via Regen Marketplace.`,
+    linkTo:
+      'https://guides.regen.network/guides/regen-marketplace-buyers-guides/ecocredits/retire-ecocredits/retirement-certification#individual-entity-credit-retirement.',
+    value: false,
+  },
+];
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.mock.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.mock.tsx
new file mode 100644
index 0000000000..a87b835de3
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.mock.tsx
@@ -0,0 +1,42 @@
+import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+export const creditVintages = [
+  {
+    date: 'Jan 1, 2019 - December 31, 2019',
+    credits: '100',
+    batchDenom: 'mock-batch-denom-1',
+  },
+  {
+    date: 'Jan 1, 2020 - December 31, 2020',
+    credits: '200',
+    batchDenom: 'mock-batch-denom-2',
+  },
+  {
+    date: 'Jan 1, 2021 - December 31, 2021',
+    credits: '300',
+    batchDenom: 'mock-batch-denom-3',
+  },
+];
+
+export const creditDetails = [
+  {
+    availableCredits: 1000,
+    currency: CURRENCIES.usd,
+    creditPrice: 1,
+  },
+  {
+    availableCredits: 2000,
+    currency: CURRENCIES.uregen,
+    creditPrice: 0.5,
+  },
+  {
+    availableCredits: 3000,
+    currency: CURRENCIES.usdc,
+    creditPrice: 2,
+  },
+  {
+    availableCredits: 4000,
+    currency: CURRENCIES.usdcaxl,
+    creditPrice: 3,
+  },
+];
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.stories.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.stories.tsx
new file mode 100644
index 0000000000..f6a2ceaa11
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.stories.tsx
@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Form from 'web-marketplace/src/components/molecules/Form/Form';
+import { useZodForm } from 'web-marketplace/src/components/molecules/Form/hook/useZodForm';
+import { PAYMENT_OPTIONS } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants';
+import { createChooseCreditsFormSchema } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema';
+
+import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+import { CreditsAmount } from './CreditsAmount';
+import { CREDITS_AMOUNT, CURRENCY_AMOUNT } from './CreditsAmount.constants';
+import { creditDetails } from './CreditsAmount.mock';
+
+const chooseCreditsFormSchema = createChooseCreditsFormSchema({
+  creditsCap: 100,
+  spendingCap: 1000,
+});
+
+export default {
+  title: 'Marketplace/Molecules/CreditsAmount',
+  component: CreditsAmount,
+} as Meta<typeof CreditsAmount>;
+
+type Story = StoryObj<typeof CreditsAmount>;
+
+const CreditsWithForm = (args: any) => {
+  const form = useZodForm({
+    schema: chooseCreditsFormSchema,
+    defaultValues: {
+      [CURRENCY_AMOUNT]: 1,
+      [CREDITS_AMOUNT]: 1,
+      retiring: true,
+    },
+    mode: 'onChange',
+  });
+  return (
+    <Form form={form as any} onSubmit={form.handleSubmit as any}>
+      <CreditsAmount {...args} />
+    </Form>
+  );
+};
+
+export const CreditsAmountCard: Story = {
+  render: args => <CreditsWithForm {...args} />,
+};
+
+CreditsAmountCard.args = {
+  creditDetails,
+  paymentOption: PAYMENT_OPTIONS.CARD,
+  currency: CURRENCIES.usd,
+  setCurrency: () => {},
+  setSpendingCap: () => {},
+  creditsAvailable: 1000,
+  setCreditsAvailable: () => {},
+  creditVintages: [],
+};
+
+export const CreditsAmountCrypto: Story = {
+  render: args => <CreditsWithForm {...args} />,
+};
+
+CreditsAmountCrypto.args = {
+  creditDetails,
+  paymentOption: PAYMENT_OPTIONS.CRYPTO,
+  currency: CURRENCIES.usd,
+  setCurrency: () => {},
+  setSpendingCap: () => {},
+  creditsAvailable: 1000,
+  setCreditsAvailable: () => {},
+  creditVintages: [],
+};
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.test.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.test.tsx
new file mode 100644
index 0000000000..7ed0aeee6d
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.test.tsx
@@ -0,0 +1,134 @@
+import userEvent from '@testing-library/user-event';
+import { Mock } from 'vitest';
+import { PAYMENT_OPTIONS } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants';
+import { render, screen } from 'web-marketplace/test/test-utils';
+
+import { CURRENCIES } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+import { CreditsAmount } from './CreditsAmount';
+import { creditDetails } from './CreditsAmount.mock';
+import {
+  getCreditsAvailablePerCurrency,
+  getCurrencyPrice,
+} from './CreditsAmount.utils';
+
+vi.mock('./CreditsAmount.utils', () => ({
+  getCurrencyPrice: vi.fn(),
+  getCreditsAvailablePerCurrency: vi.fn(),
+}));
+
+describe('CreditsAmount', () => {
+  const formDefaultValues = {
+    creditDetails,
+    paymentOption: PAYMENT_OPTIONS.CARD,
+    currency: CURRENCIES.usd,
+    setCurrency: () => {},
+    setSpendingCap: () => {},
+    creditsAvailable: 1000,
+    setCreditsAvailable: () => {},
+    creditVintages: [],
+  };
+
+  beforeEach(() => {
+    (getCurrencyPrice as Mock).mockReset();
+  });
+
+  it('renders without crashing', () => {
+    render(<CreditsAmount {...formDefaultValues} />, {
+      formDefaultValues,
+    });
+
+    expect(screen.getByText(/Amount/i)).toBeInTheDocument();
+  });
+
+  it('updates credits amount', async () => {
+    render(<CreditsAmount {...formDefaultValues} />, {
+      formDefaultValues,
+    });
+
+    const creditsInput = screen.getByLabelText(/Credits Input/i);
+    userEvent.clear(creditsInput);
+    await userEvent.type(creditsInput, '10');
+    expect(creditsInput).toHaveValue(10);
+  });
+
+  it('updates currency amount', async () => {
+    render(<CreditsAmount {...formDefaultValues} />, {
+      formDefaultValues,
+    });
+
+    const currencyInput = screen.getByLabelText(/Currency Input/i);
+    userEvent.clear(currencyInput);
+    await userEvent.type(currencyInput, '50');
+    expect(currencyInput).toHaveValue(50);
+  });
+
+  it('updates currency amount when credits amount changes', async () => {
+    (getCurrencyPrice as Mock).mockReturnValue(2);
+    render(<CreditsAmount {...formDefaultValues} />, {
+      formDefaultValues,
+    });
+
+    const creditsInput = screen.getByLabelText(/Credits Input/i);
+    const currencyInput = screen.getByLabelText(/Currency Input/i);
+
+    userEvent.clear(creditsInput);
+    await userEvent.type(creditsInput, '50');
+
+    expect(currencyInput).toHaveValue(100);
+  });
+
+  it('updates credits amount when currency amount changes', async () => {
+    (getCurrencyPrice as Mock).mockReturnValue(1);
+    render(<CreditsAmount {...formDefaultValues} />, {
+      formDefaultValues,
+    });
+
+    const creditsInput = screen.getByLabelText(/Credits Input/i);
+    const currencyInput = screen.getByLabelText(/Currency Input/i);
+
+    userEvent.clear(currencyInput);
+    await userEvent.type(currencyInput, '50');
+
+    expect(creditsInput).toHaveValue(50);
+  });
+
+  it('updates credits amount when max credits is selected', async () => {
+    (getCreditsAvailablePerCurrency as Mock).mockReturnValue(
+      creditDetails[0].availableCredits,
+    );
+    render(<CreditsAmount {...formDefaultValues} />, {
+      formDefaultValues,
+    });
+
+    const creditsInput = screen.getByLabelText(/Credits Input/i);
+    const maxCreditsButton = screen.getByRole('button', {
+      name: /Max Credits/i,
+    });
+
+    await userEvent.click(maxCreditsButton);
+    screen.debug();
+    expect(creditsInput).toHaveValue(creditDetails[0].availableCredits);
+  });
+
+  it('updates currency amount when max credits is selected', async () => {
+    (getCurrencyPrice as Mock).mockReturnValue(1);
+    (getCreditsAvailablePerCurrency as Mock).mockReturnValue(
+      creditDetails[0].availableCredits,
+    );
+    render(<CreditsAmount {...formDefaultValues} />, {
+      formDefaultValues,
+    });
+
+    const currencyInput = screen.getByLabelText(/Currency Input/i);
+    const maxCreditsButton = screen.getByRole('button', {
+      name: /Max Credits/i,
+    });
+
+    await userEvent.click(maxCreditsButton);
+
+    expect(currencyInput).toHaveValue(
+      creditDetails[0].availableCredits * creditDetails[0].creditPrice,
+    );
+  });
+});
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx
new file mode 100644
index 0000000000..8ac84864ef
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.tsx
@@ -0,0 +1,154 @@
+import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Trans } from '@lingui/macro';
+import { PAYMENT_OPTIONS } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants';
+import { ChooseCreditsFormSchemaType } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema';
+
+import {
+  CryptoCurrencies,
+  CURRENCIES,
+  Currency,
+} from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+import {
+  CREDIT_VINTAGE_OPTIONS,
+  CREDITS_AMOUNT,
+  CURRENCY_AMOUNT,
+  DEFAULT_CRYPTO_CURRENCY,
+} from './CreditsAmount.constants';
+import { CreditsAmountHeader } from './CreditsAmount.Header';
+import { CreditsAmountProps } from './CreditsAmount.types';
+import {
+  getCreditsAvailablePerCurrency,
+  getCurrencyPrice,
+  getVintageCredits,
+} from './CreditsAmount.utils';
+import { CreditsInput } from './CreditsInput';
+import { CurrencyInput } from './CurrencyInput';
+
+export const CreditsAmount = ({
+  creditDetails,
+  paymentOption,
+  currency,
+  setCurrency,
+  setSpendingCap,
+  creditsAvailable,
+  setCreditsAvailable,
+  creditVintages,
+}: CreditsAmountProps) => {
+  const [pricePerCredit, setPricePerCredit] = useState(
+    getCurrencyPrice(CURRENCIES.usd, creditDetails),
+  );
+  const [maxCreditsSelected, setMaxCreditsSelected] = useState(false);
+  const { setValue, getValues } = useFormContext<ChooseCreditsFormSchemaType>();
+
+  const creditVintageOptions = getValues(CREDIT_VINTAGE_OPTIONS);
+
+  useEffect(() => {
+    if (creditVintageOptions && creditVintageOptions.length > 0) {
+      setCreditsAvailable(
+        getVintageCredits(creditVintageOptions, creditVintages),
+      );
+      setSpendingCap(creditsAvailable);
+    } else {
+      setCreditsAvailable(
+        getCreditsAvailablePerCurrency(currency, creditDetails),
+      );
+    }
+  }, [
+    creditDetails,
+    creditVintageOptions,
+    creditVintages,
+    creditsAvailable,
+    currency,
+    setCreditsAvailable,
+    setSpendingCap,
+  ]);
+
+  useEffect(() => {
+    setMaxCreditsSelected(false);
+    setCreditsAvailable(
+      getCreditsAvailablePerCurrency(currency, creditDetails),
+    );
+    const newPrice = getCurrencyPrice(currency, creditDetails);
+    setPricePerCredit(newPrice);
+    setCurrency(currency);
+  }, [creditDetails, currency, setCreditsAvailable, setCurrency]);
+
+  // Max credits set
+  useEffect(() => {
+    if (maxCreditsSelected) {
+      setValue(CREDITS_AMOUNT, creditsAvailable);
+      setValue(CURRENCY_AMOUNT, creditsAvailable * pricePerCredit);
+      setMaxCreditsSelected(false);
+    }
+  }, [creditsAvailable, maxCreditsSelected, pricePerCredit, setValue]);
+
+  // Credits amount change
+  const handleCreditsAmountChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const currentCreditsAmount = e.target.valueAsNumber;
+      setValue(CREDITS_AMOUNT, currentCreditsAmount);
+
+      const currentCurrencyAmount = parseFloat(e.target.value) * pricePerCredit;
+      setValue(CURRENCY_AMOUNT, currentCurrencyAmount);
+    },
+    [pricePerCredit, setValue],
+  );
+
+  // Currency type change
+  const handleCurrencyChange = useCallback(
+    (currency: string) => {
+      const newPrice = getCurrencyPrice(
+        currency as CryptoCurrencies,
+        creditDetails,
+      );
+      setPricePerCredit(newPrice);
+      setCurrency(currency as Currency);
+      const creditsAvailablePerCurrency = getCreditsAvailablePerCurrency(
+        currency as Currency,
+        creditDetails,
+      );
+      setCreditsAvailable(creditsAvailablePerCurrency);
+    },
+    [creditDetails, setCreditsAvailable, setCurrency],
+  );
+
+  return (
+    <div className={`grid min-h-min`} style={{ gridAutoRows: 'min-content' }}>
+      <CreditsAmountHeader
+        currency={currency}
+        creditsAvailable={creditsAvailable}
+        setMaxCreditsSelected={setMaxCreditsSelected}
+        paymentOption={paymentOption}
+      />
+      <div className="flex justify-between min-w-full flex-wrap sm:flex-nowrap gap-10 items-start">
+        <CurrencyInput
+          maxCurrencyAmount={creditsAvailable * pricePerCredit}
+          paymentOption={paymentOption}
+          handleCurrencyChange={handleCurrencyChange}
+          defaultCryptoCurrency={
+            currency === CURRENCIES.usd ? DEFAULT_CRYPTO_CURRENCY : currency
+          }
+          creditDetails={creditDetails}
+          currency={currency}
+          setCurrency={setCurrency}
+        />
+        <span className="p-10 sm:p-20 text-xl">=</span>
+        <CreditsInput
+          creditsAvailable={creditsAvailable}
+          handleCreditsAmountChange={handleCreditsAmountChange}
+          paymentOption={paymentOption}
+        />
+      </div>
+      {paymentOption === PAYMENT_OPTIONS.CRYPTO && (
+        <em className="italic text-xs m-0 py-20 self-start justify-self-start  sm:mb-20">
+          <Trans>
+            Credit prices vary. By default the lowest priced credits will be
+            purchased first.
+          </Trans>
+        </em>
+      )}
+    </div>
+  );
+};
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.types.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.types.tsx
new file mode 100644
index 0000000000..a71a664280
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.types.tsx
@@ -0,0 +1,38 @@
+import { ChangeEvent } from 'react';
+import {
+  CreditDetails,
+  CreditsVintages,
+} from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.types';
+
+import {
+  CryptoCurrencies,
+  Currency,
+} from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+export type PaymentOptionsType = 'card' | 'crypto';
+export interface CreditsAmountProps {
+  creditDetails: CreditDetails[];
+  paymentOption: PaymentOptionsType;
+  currency: Currency;
+  setCurrency: (currency: Currency) => void;
+  setSpendingCap: (spendingCap: number) => void;
+  creditsAvailable: number;
+  setCreditsAvailable: (creditsAvailable: number) => void;
+  creditVintages: CreditsVintages[];
+}
+
+export interface CreditsInputProps {
+  creditsAvailable: number;
+  handleCreditsAmountChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  paymentOption: PaymentOptionsType;
+}
+
+export interface CurrencyInputProps {
+  maxCurrencyAmount: number;
+  paymentOption: PaymentOptionsType;
+  handleCurrencyChange: (currency: CryptoCurrencies | string) => void;
+  defaultCryptoCurrency: CryptoCurrencies;
+  creditDetails: CreditDetails[];
+  currency: Currency;
+  setCurrency: (currency: Currency) => void;
+}
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx
new file mode 100644
index 0000000000..f0975362cc
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils.tsx
@@ -0,0 +1,37 @@
+import {
+  CreditDetails,
+  CreditsVintages,
+} from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.types';
+
+import { Currency } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+export const getCurrencyPrice = (
+  currency: Currency,
+  creditDetails: CreditDetails[],
+) => {
+  return (
+    creditDetails.find(credit => credit.currency === currency)?.creditPrice || 1
+  );
+};
+
+export const getCreditsAvailablePerCurrency = (
+  currency: Currency,
+  creditDetails: CreditDetails[],
+) => {
+  return (
+    creditDetails.find(credit => credit.currency === currency)
+      ?.availableCredits || 0
+  );
+};
+
+export const getVintageCredits = (
+  creditVintageOptions: string[],
+  creditVintages: CreditsVintages[],
+) => {
+  return creditVintageOptions.reduce((sum: number, option: string) => {
+    const credits =
+      creditVintages.find(vintage => vintage.batchDenom === option)?.credits ||
+      '0';
+    return sum + +credits;
+  }, 0);
+};
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CreditsInput.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CreditsInput.tsx
new file mode 100644
index 0000000000..882c5a9e5d
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CreditsInput.tsx
@@ -0,0 +1,78 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Trans } from '@lingui/macro';
+import { ChooseCreditsFormSchemaType } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema';
+
+import { LeafIcon } from 'web-components/src/components/icons/LeafIcon';
+import TextField from 'web-components/src/components/inputs/new/TextField/TextField';
+
+import { CREDITS_AMOUNT } from './CreditsAmount.constants';
+import { CreditsInputProps } from './CreditsAmount.types';
+
+export const CreditsInput = ({
+  creditsAvailable,
+  handleCreditsAmountChange,
+  paymentOption,
+}: CreditsInputProps) => {
+  const [maxCreditsAvailable, setMaxCreditsAvailable] =
+    useState(creditsAvailable);
+  const [isFocused, setIsFocused] = useState(false);
+  const {
+    setValue,
+    register,
+    formState: { errors },
+  } = useFormContext<ChooseCreditsFormSchemaType>();
+  const { onChange, onBlur, name, ref } = register(CREDITS_AMOUNT);
+
+  const onHandleFocus = () => setIsFocused(true);
+  const onHandleBlur = (event: { target: any; type?: any }) => {
+    setIsFocused(false);
+    onBlur(event);
+  };
+
+  useEffect(() => {
+    setMaxCreditsAvailable(creditsAvailable);
+  }, [creditsAvailable, paymentOption, setValue]);
+
+  const onHandleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    handleCreditsAmountChange(event);
+    onChange(event);
+  };
+
+  return (
+    <div className="flex-1 relative">
+      <TextField
+        className={`${
+          isFocused ? 'border-2 border-grey-500' : 'border-grey-300'
+        } border border-solid border-grey-300 flex items-center pr-10 sm:h-60`}
+        type="number"
+        customInputProps={{
+          step: '0.1',
+          max: maxCreditsAvailable,
+          min: 0,
+          'aria-label': 'Credits Input',
+        }}
+        onChange={onHandleChange}
+        onFocus={onHandleFocus}
+        onBlur={onHandleBlur}
+        name={name}
+        ref={ref}
+        sx={{
+          '& .MuiInputBase-root': {
+            border: 'none',
+          },
+        }}
+        endAdornment={
+          <span className="flex items-center">
+            <LeafIcon className="mx-5" /> <Trans>credits</Trans>
+          </span>
+        }
+      />
+      {errors[CREDITS_AMOUNT] && (
+        <div className="pl-20 pt-5 text-error-300 text-sm absolute top-full left-0">
+          {`${errors[CREDITS_AMOUNT].message}`}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/web-marketplace/src/components/molecules/CreditsAmount/CurrencyInput.tsx b/web-marketplace/src/components/molecules/CreditsAmount/CurrencyInput.tsx
new file mode 100644
index 0000000000..890011eff6
--- /dev/null
+++ b/web-marketplace/src/components/molecules/CreditsAmount/CurrencyInput.tsx
@@ -0,0 +1,141 @@
+import { ChangeEvent, lazy, useCallback, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { PAYMENT_OPTIONS } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants';
+import { ChooseCreditsFormSchemaType } from 'web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema';
+
+import { DenomIconWithCurrency } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency';
+import {
+  CURRENCIES,
+  Currency,
+} from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import TextField from 'web-components/src/components/inputs/new/TextField/TextField';
+
+import { CREDITS_AMOUNT, CURRENCY_AMOUNT } from './CreditsAmount.constants';
+import { CurrencyInputProps } from './CreditsAmount.types';
+import { getCurrencyPrice } from './CreditsAmount.utils';
+
+const CustomSelect = lazy(
+  () =>
+    import(
+      'web-components/src/components/inputs/new/CustomSelect/CustomSelect'
+    ),
+);
+
+export const CurrencyInput = ({
+  maxCurrencyAmount,
+  paymentOption,
+  handleCurrencyChange,
+  defaultCryptoCurrency,
+  creditDetails,
+  currency,
+  setCurrency,
+}: CurrencyInputProps) => {
+  const {
+    register,
+    setValue,
+    formState: { errors },
+  } = useFormContext<ChooseCreditsFormSchemaType>();
+  const { onChange, onBlur, name, ref } = register(CURRENCY_AMOUNT);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleOnFocus = () => setIsFocused(true);
+  const handleOnBlur = (event: { target: any; type?: any }) => {
+    setIsFocused(false);
+    onBlur(event);
+  };
+  const handleOnChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.valueAsNumber;
+      const creditsQty =
+        value / getCurrencyPrice(CURRENCIES[currency], creditDetails);
+      setValue(CREDITS_AMOUNT, creditsQty);
+      onChange(event);
+    },
+    [creditDetails, currency, onChange, setValue],
+  );
+
+  const onHandleCurrencyChange = useCallback(
+    (currency: string) => {
+      handleCurrencyChange(currency);
+      setCurrency(currency as Currency);
+    },
+    [handleCurrencyChange, setCurrency],
+  );
+
+  return (
+    <div className="grow sm:flex-1 w-full sm:w-auto relative">
+      {paymentOption === PAYMENT_OPTIONS.CARD && (
+        <span className="absolute top-[18px] left-10 z-50">$</span>
+      )}
+      <TextField
+        onFocus={handleOnFocus}
+        onChange={handleOnChange}
+        onBlur={handleOnBlur}
+        name={name}
+        ref={ref}
+        type="number"
+        className={`${
+          isFocused
+            ? 'border-2 border-solid border-grey-500'
+            : 'border border-solid border-grey-300'
+        } w-full sm:w-auto flex justify-start relative pr-10 sm:h-60 rounded-sm items-center pl-5`}
+        customInputProps={{
+          max: maxCurrencyAmount,
+          min: 0,
+          step: '0.1',
+          'aria-label': 'Currency Input',
+        }}
+        sx={{
+          '& .MuiInputBase-root': {
+            border: 'none',
+          },
+          '& .custom-select .MuiSvgIcon-root:not(.denom-icon)': {
+            width: '15px !important',
+            height: '15px !important',
+            right: 'auto !important',
+            top: '-2px !important',
+            position: 'relative !important',
+          },
+          '& .MuiSvgIcon-root': {
+            width: '25px !important',
+            height: '25px !important',
+            right: 'auto !important',
+            top: 'auto !important',
+            position: 'relative !important',
+          },
+          '& .MuiTypography-root': {
+            'min-width': '60px',
+          },
+          '& .MuiInputAdornment-root': {
+            'padding-top': '5px',
+          },
+        }}
+        endAdornment={
+          paymentOption === PAYMENT_OPTIONS.CARD ? (
+            <DenomIconWithCurrency currency={CURRENCIES.usd} />
+          ) : (
+            <CustomSelect
+              options={Object.keys(CURRENCIES)
+                .filter(currency => currency !== CURRENCIES.usd)
+                .map(currency => ({
+                  component: {
+                    label: currency,
+                    element: () => (
+                      <DenomIconWithCurrency currency={currency as Currency} />
+                    ),
+                  },
+                }))}
+              onSelect={onHandleCurrencyChange}
+              defaultOption={defaultCryptoCurrency}
+            />
+          )
+        }
+      />
+      {errors[CURRENCY_AMOUNT]?.message && (
+        <div className="pl-20 pt-5 text-error-300 text-sm top-full left-0">
+          {`${errors[CURRENCY_AMOUNT].message} ${currency.toUpperCase()}`}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/web-marketplace/src/components/molecules/DenomIcon/DenomIcon.tsx b/web-marketplace/src/components/molecules/DenomIcon/DenomIcon.tsx
index c1df354c23..78d14e11ce 100644
--- a/web-marketplace/src/components/molecules/DenomIcon/DenomIcon.tsx
+++ b/web-marketplace/src/components/molecules/DenomIcon/DenomIcon.tsx
@@ -6,28 +6,54 @@ import {
   EVMOS_DENOM,
   GRAVITY_USDC_DENOM,
   REGEN_DENOM,
-} from 'config/allowedBaseDenoms';
+  USD_DENOM,
+  USDC_DENOM,
+  USDCAXL_DENOM,
+} from 'web-marketplace/src/config/allowedBaseDenoms';
 
 import AxlUsdcIcon from 'web-components/src/components/icons/coins/AxlUsdcIcon';
 import EeurIcon from 'web-components/src/components/icons/coins/EeurIcon';
 import EvmosIcon from 'web-components/src/components/icons/coins/EvmosIcon';
 import GravUsdcIcon from 'web-components/src/components/icons/coins/GravUsdcIcon';
+import USFlagIcon from 'web-components/src/components/icons/flags/USFlagIcon';
 import { RegenTokenIcon } from 'web-components/src/components/icons/RegenTokenIcon';
 
 export interface Props {
   baseDenom?: string;
   sx?: SxProps<Theme>;
   iconSx?: SxProps<Theme>;
+  className?: string;
 }
 
-const DenomIcon = ({ baseDenom, sx = [], iconSx }: Props): JSX.Element => {
+const DenomIcon = ({
+  baseDenom,
+  sx = [],
+  iconSx,
+  className = '',
+}: Props): JSX.Element => {
   return (
     <Box component="span" sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-      {baseDenom === GRAVITY_USDC_DENOM && <GravUsdcIcon sx={iconSx} />}
-      {baseDenom === AXELAR_USDC_DENOM && <AxlUsdcIcon sx={iconSx} />}
-      {baseDenom === EEUR_DENOM && <EeurIcon sx={iconSx} />}
-      {baseDenom === REGEN_DENOM && <RegenTokenIcon sx={iconSx} />}
-      {baseDenom === EVMOS_DENOM && <EvmosIcon sx={iconSx} />}
+      {baseDenom === GRAVITY_USDC_DENOM ||
+        (baseDenom === USDC_DENOM && (
+          <GravUsdcIcon sx={iconSx} className={className} />
+        ))}
+      {baseDenom === AXELAR_USDC_DENOM && (
+        <AxlUsdcIcon sx={iconSx} className={className} />
+      )}
+      {baseDenom === EEUR_DENOM && (
+        <EeurIcon sx={iconSx} className={className} />
+      )}
+      {baseDenom === REGEN_DENOM && (
+        <RegenTokenIcon sx={iconSx} className={className} />
+      )}
+      {baseDenom === EVMOS_DENOM && (
+        <EvmosIcon sx={iconSx} className={className} />
+      )}
+      {baseDenom === USD_DENOM && <USFlagIcon className={className} />}
+
+      {baseDenom === USDCAXL_DENOM && (
+        <AxlUsdcIcon sx={iconSx} className={className} />
+      )}
     </Box>
   );
 };
diff --git a/web-marketplace/src/components/molecules/Form/Form.tsx b/web-marketplace/src/components/molecules/Form/Form.tsx
index 598f8a2663..b71884e345 100644
--- a/web-marketplace/src/components/molecules/Form/Form.tsx
+++ b/web-marketplace/src/components/molecules/Form/Form.tsx
@@ -7,11 +7,10 @@ import {
 } from 'react-hook-form';
 import { DevTool } from '@hookform/devtools';
 import { Box, SxProps } from '@mui/material';
-import { sxToArray } from 'utils/mui/sxToArray';
+import { IS_DEV } from 'web-marketplace/src/lib/env';
 
 import { Theme } from 'web-components/src/theme/muiTheme';
-
-import { IS_DEV } from 'lib/env';
+import { sxToArray } from 'web-components/src/utils/mui/sxToArray';
 
 export type FormRef = MutableRefObject<
   | { submitForm: (draft?: boolean) => void; isFormValid: () => boolean }
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx
new file mode 100644
index 0000000000..d714bdf608
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Trans } from '@lingui/macro';
+import { Link } from 'web-marketplace/src/components/atoms';
+import { CREDIT_VINTAGE_OPTIONS } from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants';
+
+import { TextButton } from 'web-components/src/components/buttons/TextButton';
+import CheckboxLabel from 'web-components/src/components/inputs/new/CheckboxLabel/CheckboxLabel';
+
+import { ChooseCreditsFormSchemaType } from './ChooseCreditsForm.schema';
+
+export function AdvanceSettings({
+  advanceSettingsOpen,
+  toggleAdvancedSettings,
+  creditVintages,
+  handleCreditVintageOptions,
+}: {
+  advanceSettingsOpen: boolean;
+  toggleAdvancedSettings: (e: React.MouseEvent<HTMLElement>) => void;
+  creditVintages: { date: string; credits: string; batchDenom: string }[];
+  handleCreditVintageOptions: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}) {
+  const { register, getValues } = useFormContext<ChooseCreditsFormSchemaType>();
+  const creditVintageOptions = getValues(CREDIT_VINTAGE_OPTIONS);
+
+  return (
+    <div className="grid grid-rows-1 mt-20 sm:mt-40">
+      <div className="flex flex-col">
+        <TextButton
+          className="w-[193px] text-xs font-['Muli'] text-green-400 font-extrabold uppercase text-brand-400 self-start bg-transparent border-none p-0 text-left"
+          textSize="sm"
+          onClick={toggleAdvancedSettings}
+        >
+          <span className="text-base w-10 inline-block mr-5">
+            {advanceSettingsOpen ? '-' : '+'}
+          </span>
+          <Trans>Advanced settings</Trans>
+        </TextButton>
+        {advanceSettingsOpen && (
+          <div
+            className={`${
+              advanceSettingsOpen ? 'max-h-[400px] sm:max-h-[350px]' : 'max-h-0'
+            } flex flex-grow justify-end items-center font-['Lato'] text-base flex-col mt-4 overflow-hidden transition-all duration-500 ease-in-out max-h-0`}
+          >
+            <p className="self-start text-sm ">
+              <Trans>Choose specific credit vintages</Trans>{' '}
+              <span className="italic">
+                (
+                <Trans>
+                  by default the cheapest credit vintage will be purchased first
+                </Trans>
+                )
+              </span>
+            </p>
+            {creditVintages.map(({ date, credits, batchDenom }) => (
+              <div
+                key={date}
+                className="h-auto flex flex-col items-start w-full p-15 border border-solid border-grey-300 mb-10 rounded-md"
+              >
+                <CheckboxLabel
+                  label={date}
+                  {...(register(CREDIT_VINTAGE_OPTIONS),
+                  {
+                    value: batchDenom,
+                  })}
+                  onChange={handleCreditVintageOptions}
+                  checked={creditVintageOptions.includes(batchDenom)}
+                />
+                <p className="pl-[32px] m-0 mt-5 text-sm">
+                  <span className="italic">
+                    {credits} <Trans>credits available</Trans>
+                  </span>
+                  <span className="px-[4px]">|</span>
+                  <Link
+                    target="_blank"
+                    href={`/credit-batches/${batchDenom}`}
+                    className="text-brand-300 uppercase bg-transparent border-none font-bold hover:opacity-80 text-xs"
+                  >
+                    <Trans>view batch</Trans> »
+                  </Link>
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx
new file mode 100644
index 0000000000..5351c43902
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx
@@ -0,0 +1,68 @@
+import { useFormContext } from 'react-hook-form';
+import { Trans } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import {
+  cryptoOptions,
+  RETIRING,
+} from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants';
+
+import { Radio } from 'web-components/src/components/inputs/new/Radio/Radio';
+import { RadioGroup } from 'web-components/src/components/inputs/new/RadioGroup/RadioGroup';
+import { Title } from 'web-components/src/components/typography/Title';
+
+import { ChooseCreditsFormSchemaType } from './ChooseCreditsForm.schema';
+
+export function CryptoOptions({
+  retiring,
+  handleCryptoPurchaseOptions,
+}: {
+  retiring: boolean;
+  handleCryptoPurchaseOptions: () => void;
+}) {
+  const { register } = useFormContext<ChooseCreditsFormSchemaType>();
+  const { _ } = useLingui();
+  return (
+    <div>
+      <Title variant="h2" className="text-lg font-black">
+        <Trans>Crypto purchase options</Trans>
+      </Title>
+      <p className="font-['Lato'] text-base m-0 text-grey-500 pb-[12px]">
+        <Trans>
+          Credits purchased with crypto can be purchased in either a retired or
+          tradable state.
+        </Trans>
+      </p>
+      <RadioGroup className="gap-10">
+        {cryptoOptions.map(({ label, description, linkTo, value }) => (
+          <Radio
+            {...(register(RETIRING),
+            {
+              value,
+            })}
+            onChange={handleCryptoPurchaseOptions}
+            selectedValue={retiring}
+            key={_(label)}
+            label={
+              <span className="block text-base font-bold font-['Lato']">
+                {_(label)}
+              </span>
+            }
+            description={
+              <p className="text-black text-sm font-normal font-['Lato'] my-0">
+                {_(description)}
+                <a
+                  href={linkTo}
+                  target="_blank"
+                  className="pl-10 hover:opacity-80"
+                  rel="noreferrer"
+                >
+                  <Trans>Learn more</Trans> »
+                </a>
+              </p>
+            }
+          />
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx
new file mode 100644
index 0000000000..8321b59da6
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx
@@ -0,0 +1,93 @@
+import { ChangeEvent, useState } from 'react';
+import { Trans } from '@lingui/macro';
+
+import CreditCardIcon from 'web-components/src/components/icons/CreditCardIcon';
+import CryptoIcon from 'web-components/src/components/icons/CryptoIcon';
+
+import { PAYMENT_OPTIONS } from './ChooseCreditsForm.constants';
+import {
+  ChooseCreditButtonProps,
+  PaymentOptionsType,
+} from './ChooseCreditsForm.types';
+
+function ChooseCreditButton({
+  children,
+  value,
+  isChecked,
+  onChange,
+}: ChooseCreditButtonProps) {
+  return (
+    <label
+      className={`block w-[138px] rounded-md px-[12px] py-10 font-extrabold text-xs font-[lato] shadow ${
+        isChecked
+          ? 'border-brand-300 border-solid text-brand-300 border-2 hover:cursor-default'
+          : 'border-grey-300 border-solid border text-grey-500 filter grayscale hover:bg-grey-200 hover:cursor-pointer'
+      }`}
+    >
+      <input
+        type="radio"
+        name="chooseCredit"
+        value={value}
+        checked={isChecked}
+        onChange={onChange}
+        className="hidden"
+      />
+      <div className="flex flex-col items-start">{children}</div>
+    </label>
+  );
+}
+
+function ChooseCreditButtonGroup({
+  onSelectOption,
+}: {
+  onSelectOption: (option: PaymentOptionsType) => void;
+}) {
+  const [selectedButton, setSelectedButton] = useState<PaymentOptionsType>(
+    PAYMENT_OPTIONS.CARD,
+  );
+
+  const handleButtonClick = (e: ChangeEvent<HTMLInputElement>) => {
+    const paymentType = e.target.value as PaymentOptionsType;
+    setSelectedButton(paymentType);
+    onSelectOption(paymentType);
+  };
+
+  return (
+    <div className="flex space-x-4 gap-10">
+      <ChooseCreditButton
+        value={PAYMENT_OPTIONS.CARD}
+        isChecked={selectedButton === PAYMENT_OPTIONS.CARD}
+        onChange={handleButtonClick}
+      >
+        <CreditCardIcon />
+        <div className="lowercase≈">
+          <span className="capitalize">
+            <Trans>buy</Trans>
+          </span>{' '}
+          <Trans>with credit card</Trans>
+        </div>
+      </ChooseCreditButton>
+      <ChooseCreditButton
+        value={PAYMENT_OPTIONS.CRYPTO}
+        isChecked={selectedButton === PAYMENT_OPTIONS.CRYPTO}
+        onChange={handleButtonClick}
+      >
+        <CryptoIcon />
+        <div className="lowercase">
+          <span className="capitalize">
+            <Trans>buy</Trans>
+          </span>{' '}
+          <Trans>with crypto</Trans>
+        </div>
+      </ChooseCreditButton>
+    </div>
+  );
+}
+
+export const PaymentOptions = ({
+  setPaymentOption,
+}: {
+  setPaymentOption: (option: PaymentOptionsType) => void;
+}) => {
+  return <ChooseCreditButtonGroup onSelectOption={setPaymentOption} />;
+};
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx
new file mode 100644
index 0000000000..0339cbe64b
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx
@@ -0,0 +1,10 @@
+import { msg } from '@lingui/macro';
+
+export const PAYMENT_OPTIONS = {
+  CARD: 'card',
+  CRYPTO: 'crypto',
+} as const;
+
+export const MAX_AMOUNT = msg`Amount cannot exceed`;
+export const MAX_CREDITS = msg`Credits cannot exceed`;
+export const POSITIVE_NUMBER = msg`Must be positive`;
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx
new file mode 100644
index 0000000000..2ca280fa7d
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.schema.tsx
@@ -0,0 +1,43 @@
+import { i18n } from '@lingui/core';
+import {
+  CREDITS_AMOUNT,
+  CURRENCY_AMOUNT,
+} from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants';
+import { z } from 'zod';
+
+import {
+  MAX_AMOUNT,
+  MAX_CREDITS,
+  POSITIVE_NUMBER,
+} from './ChooseCreditsForm.constants';
+
+export const createChooseCreditsFormSchema = ({
+  creditsCap,
+  spendingCap,
+}: {
+  creditsCap: number;
+  spendingCap: number;
+}) => {
+  return z.object({
+    [CURRENCY_AMOUNT]: z.coerce
+      .number()
+      .positive(POSITIVE_NUMBER)
+      .max(
+        spendingCap,
+        `${i18n._(MAX_AMOUNT)} ${spendingCap.toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        })}`,
+      ),
+    [CREDITS_AMOUNT]: z.coerce
+      .number()
+      .positive(POSITIVE_NUMBER)
+      .max(creditsCap, `${i18n._(MAX_CREDITS)} ${creditsCap}`),
+    retiring: z.boolean(),
+    creditVintageOptions: z.array(z.string()),
+  });
+};
+
+export type ChooseCreditsFormSchemaType = z.infer<
+  ReturnType<typeof createChooseCreditsFormSchema>
+>;
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.stories.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.stories.tsx
new file mode 100644
index 0000000000..fddd3196da
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.stories.tsx
@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  creditDetails,
+  creditVintages,
+} from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.mock';
+
+import { ChooseCreditsForm } from './ChooseCreditsForm';
+
+export default {
+  title: 'Marketplace/Organisms/ChooseCreditsForm',
+  component: ChooseCreditsForm,
+} as Meta<typeof ChooseCreditsForm>;
+
+type Story = StoryObj<typeof ChooseCreditsForm>;
+
+export const ChooseCredits: Story = {
+  render: args => <ChooseCreditsForm {...args} />,
+};
+
+ChooseCredits.args = {
+  creditVintages,
+  creditDetails,
+};
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.test.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.test.tsx
new file mode 100644
index 0000000000..bec8a6b75e
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.test.tsx
@@ -0,0 +1,53 @@
+import {
+  creditDetails,
+  creditVintages,
+} from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.mock';
+import { render, screen, userEvent } from 'web-marketplace/test/test-utils';
+
+import { ChooseCreditsForm } from './ChooseCreditsForm';
+
+describe('ChooseCreditsForm', () => {
+  it('renders without crashing', () => {
+    render(
+      <ChooseCreditsForm
+        creditVintages={creditVintages}
+        creditDetails={creditDetails}
+      />,
+    );
+
+    expect(screen.getByTestId('choose-credits-form')).toBeInTheDocument();
+  });
+
+  it('opens and closes advanced settings', () => {
+    render(
+      <ChooseCreditsForm
+        creditVintages={creditVintages}
+        creditDetails={creditDetails}
+      />,
+    );
+
+    const advancedSettingsButton = screen.getByRole('button', {
+      name: /advanced settings/i,
+    });
+
+    userEvent.click(advancedSettingsButton);
+    expect(screen.getByText(/advanced settings/i)).toBeInTheDocument();
+
+    userEvent.click(advancedSettingsButton);
+    expect(screen.queryByTestId('advanced-settings')).not.toBeInTheDocument();
+  });
+
+  it('selects card payment option', () => {
+    render(
+      <ChooseCreditsForm
+        creditVintages={creditVintages}
+        creditDetails={creditDetails}
+      />,
+    );
+    const cardOption = screen.getByRole('radio', {
+      name: /card/i,
+    });
+    userEvent.click(cardOption);
+    expect(cardOption).toBeChecked();
+  });
+});
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.tsx
new file mode 100644
index 0000000000..9c33412d47
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.tsx
@@ -0,0 +1,208 @@
+import {
+  ChangeEvent,
+  MouseEvent,
+  Suspense,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { SubmitHandler, useWatch } from 'react-hook-form';
+import { CreditsAmount } from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount';
+import {
+  CREDIT_VINTAGE_OPTIONS,
+  CREDITS_AMOUNT,
+  CURRENCY_AMOUNT,
+  RETIRING,
+} from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.constants';
+import { getCreditsAvailablePerCurrency } from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils';
+import Form from 'web-marketplace/src/components/molecules/Form/Form';
+import { useZodForm } from 'web-marketplace/src/components/molecules/Form/hook/useZodForm';
+
+import Card from 'web-components/src/components/cards/Card';
+import {
+  CURRENCIES,
+  Currency,
+} from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+import { Loading } from 'web-components/src/components/loading';
+
+import { AdvanceSettings } from './ChooseCreditsForm.AdvanceSettings';
+import { PAYMENT_OPTIONS } from './ChooseCreditsForm.constants';
+import { CryptoOptions } from './ChooseCreditsForm.CryptoOptions';
+import { PaymentOptions } from './ChooseCreditsForm.PaymentOptions';
+import {
+  ChooseCreditsFormSchemaType,
+  createChooseCreditsFormSchema,
+} from './ChooseCreditsForm.schema';
+import {
+  CreditDetails,
+  CreditsVintages,
+  PaymentOptionsType,
+} from './ChooseCreditsForm.types';
+import { getSpendingCap } from './ChooseCreditsForm.utils';
+
+export function ChooseCreditsForm({
+  creditVintages,
+  creditDetails,
+}: {
+  creditVintages: CreditsVintages[];
+  creditDetails: CreditDetails[];
+}) {
+  /** TODO
+   *
+   * 1. Update available creditVintages when currency changes.
+   * Other option would be to simply append to each creditDetails a list of available creditVintages
+   * and the sum of those vintages credits would be equal to the creditDetails.availableCredits.
+   *
+   * 2. For crypto purchase, we also need to know whether sold credits are tradable or not, because
+   * if the user picks up "Buy tradable ecocredits" option then we don't want to show credits
+   * for sell that are not tradable.
+   *
+   * 3. Implement Advance Settings functionality.
+   *
+   */
+
+  const [paymentOption, setPaymentOption] = useState<PaymentOptionsType>(
+    PAYMENT_OPTIONS.CARD,
+  );
+  const [advanceSettingsOpen, setAdvanceSettingsOpen] = useState(false);
+
+  const [spendingCap, setSpendingCap] = useState(
+    getSpendingCap(CURRENCIES.usd, creditDetails),
+  );
+  const [currency, setCurrency] = useState<Currency>(CURRENCIES.usd);
+
+  const [creditsAvailable, setCreditsAvailable] = useState(
+    getCreditsAvailablePerCurrency(currency, creditDetails),
+  );
+
+  const chooseCreditsFormSchema = createChooseCreditsFormSchema({
+    creditsCap: creditDetails.find(credit => credit.currency === currency)
+      ?.availableCredits!,
+    spendingCap,
+  });
+
+  const form = useZodForm({
+    schema: chooseCreditsFormSchema,
+    defaultValues: {
+      [CURRENCY_AMOUNT]: 0,
+      [CREDITS_AMOUNT]: 0,
+      [RETIRING]: true,
+    },
+    mode: 'onChange',
+  });
+
+  const retiring = useWatch({
+    control: form.control,
+    name: 'retiring',
+  });
+
+  const creditVintageOptions = useWatch({
+    control: form.control,
+    name: CREDIT_VINTAGE_OPTIONS,
+  });
+
+  useEffect(() => {
+    if (!advanceSettingsOpen) {
+      form.setValue(CREDIT_VINTAGE_OPTIONS, []);
+    }
+  }, [advanceSettingsOpen, form]);
+
+  useEffect(() => {
+    form.reset({
+      [CURRENCY_AMOUNT]: 0,
+      [CREDITS_AMOUNT]: 0,
+      [RETIRING]: retiring,
+      [CREDIT_VINTAGE_OPTIONS]: form.getValues(CREDIT_VINTAGE_OPTIONS) || [],
+    });
+  }, [form, spendingCap, retiring]);
+
+  useEffect(() => {
+    setSpendingCap(getSpendingCap(currency, creditDetails));
+  }, [creditDetails, currency]);
+
+  const handleOnSubmit: SubmitHandler<ChooseCreditsFormSchemaType> =
+    useCallback(data => {
+      // TO-DO
+    }, []);
+
+  const handleCryptoPurchaseOptions = useCallback(() => {
+    form.setValue('retiring', !retiring);
+  }, [form, retiring]);
+
+  const handleCreditVintageOptions = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      const checked = e.target.checked;
+      const currentValues = creditVintageOptions || [];
+      const updatedValues = checked
+        ? [...currentValues, value]
+        : currentValues.filter(item => item !== value);
+
+      form.setValue(CREDIT_VINTAGE_OPTIONS, updatedValues);
+    },
+    [creditVintageOptions, form],
+  );
+
+  const handlePaymentOptions = useCallback(
+    (option: string) => {
+      setPaymentOption(option as PaymentOptionsType);
+      form.setValue(CREDIT_VINTAGE_OPTIONS, []);
+      if (option === PAYMENT_OPTIONS.CRYPTO) {
+        setCurrency(CURRENCIES.uregen);
+        setSpendingCap(getSpendingCap(CURRENCIES.uregen, creditDetails));
+        setCreditsAvailable(
+          getCreditsAvailablePerCurrency(CURRENCIES.uregen, creditDetails),
+        );
+      }
+      if (option === PAYMENT_OPTIONS.CARD) {
+        setCurrency(CURRENCIES.usd);
+        setSpendingCap(getSpendingCap(CURRENCIES.usd, creditDetails));
+        setCreditsAvailable(
+          getCreditsAvailablePerCurrency(CURRENCIES.usd, creditDetails),
+        );
+      }
+    },
+    [creditDetails, form],
+  );
+
+  const toggleAdvancedSettings = useCallback((e: MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    setAdvanceSettingsOpen(prev => !prev);
+  }, []);
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <Card className="py-30 px-20 sm:py-50 sm:px-40 border-grey-300">
+        <Form
+          form={form}
+          onSubmit={handleOnSubmit}
+          data-testid="choose-credits-form"
+        >
+          <PaymentOptions setPaymentOption={handlePaymentOptions} />
+          <CreditsAmount
+            creditDetails={creditDetails}
+            paymentOption={paymentOption}
+            currency={currency}
+            setCurrency={setCurrency}
+            setSpendingCap={setSpendingCap}
+            setCreditsAvailable={setCreditsAvailable}
+            creditsAvailable={creditsAvailable}
+            creditVintages={creditVintages}
+          />
+          {paymentOption === PAYMENT_OPTIONS.CRYPTO && (
+            <CryptoOptions
+              retiring={retiring}
+              handleCryptoPurchaseOptions={handleCryptoPurchaseOptions}
+            />
+          )}
+          <AdvanceSettings
+            creditVintages={creditVintages}
+            advanceSettingsOpen={advanceSettingsOpen}
+            toggleAdvancedSettings={toggleAdvancedSettings}
+            handleCreditVintageOptions={handleCreditVintageOptions}
+          />
+        </Form>
+      </Card>
+    </Suspense>
+  );
+}
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.types.tsx b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.types.tsx
new file mode 100644
index 0000000000..5b4055f31f
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.types.tsx
@@ -0,0 +1,24 @@
+import { ChangeEvent, ReactNode } from 'react';
+
+import { Currency } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+export type PaymentOptionsType = 'card' | 'crypto';
+
+export interface ChooseCreditButtonProps {
+  children: ReactNode;
+  value: string;
+  isChecked: boolean;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export interface CreditDetails {
+  availableCredits: number;
+  currency: Currency;
+  creditPrice: number;
+}
+
+export interface CreditsVintages {
+  date: string;
+  credits: string;
+  batchDenom: string;
+}
diff --git a/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.utils.ts b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.utils.ts
new file mode 100644
index 0000000000..2fc217faee
--- /dev/null
+++ b/web-marketplace/src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.utils.ts
@@ -0,0 +1,15 @@
+import { getCurrencyPrice } from 'web-marketplace/src/components/molecules/CreditsAmount/CreditsAmount.utils';
+
+import { Currency } from 'web-components/src/components/DenomIconWithCurrency/DenomIconWithCurrency.constants';
+
+import { CreditDetails } from './ChooseCreditsForm.types';
+
+export function getSpendingCap(
+  currency: Currency,
+  creditsDetails: CreditDetails[],
+) {
+  return (
+    getCurrencyPrice(currency, creditsDetails) *
+    creditsDetails.find(item => item.currency === currency)!.availableCredits
+  );
+}
diff --git a/web-marketplace/src/config/allowedBaseDenoms.ts b/web-marketplace/src/config/allowedBaseDenoms.ts
index 4a5a45e94a..740151bfaa 100644
--- a/web-marketplace/src/config/allowedBaseDenoms.ts
+++ b/web-marketplace/src/config/allowedBaseDenoms.ts
@@ -7,6 +7,9 @@ export const AXELAR_USDC_DENOM = isRedwood ? 'uausdc' : 'uusdc';
 export const EEUR_DENOM = 'eeur';
 export const REGEN_DENOM = 'uregen';
 export const EVMOS_DENOM = 'atevmos';
+export const USD_DENOM = 'usd';
+export const USDC_DENOM = 'usdc';
+export const USDCAXL_DENOM = 'usdcaxl';
 
 export const USD_DENOMS = [GRAVITY_USDC_DENOM, AXELAR_USDC_DENOM];
 export const EUR_DENOMS = [EEUR_DENOM];
diff --git a/web-marketplace/src/jest.mock.ts b/web-marketplace/src/jest.mock.ts
deleted file mode 100644
index 73a5967447..0000000000
--- a/web-marketplace/src/jest.mock.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-window.matchMedia = jest.fn().mockImplementation(query => {
-  return {
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-  };
-});
-
-window.scrollTo = jest.fn();
-
-export {};
diff --git a/web-marketplace/src/lib/i18n/locales/en.po b/web-marketplace/src/lib/i18n/locales/en.po
index 525244f1aa..92cff2396a 100644
--- a/web-marketplace/src/lib/i18n/locales/en.po
+++ b/web-marketplace/src/lib/i18n/locales/en.po
@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2024-09-11 09:33+0200\n"
+"POT-Creation-Date: 2024-09-11 08:50+0100\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -175,6 +175,10 @@ msgstr ""
 msgid "Admin"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:37
+msgid "Advanced settings"
+msgstr ""
+
 #: src/pages/BatchDetails/BatchDetails.tsx:122
 msgid "All credits"
 msgstr ""
@@ -205,6 +209,7 @@ msgstr ""
 msgid "amount"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx:31
 #: src/components/organisms/BasketEcocreditsTable/BasketEcocreditsTable.tsx:62
 #: src/components/organisms/BridgeForm/BridgeForm.tsx:103
 #: src/lib/constants/shared.constants.tsx:27
@@ -227,6 +232,10 @@ msgstr ""
 msgid "Amount bridged is the same as amount cancelled in the ledger documentation"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx:8
+msgid "Amount cannot exceed"
+msgstr ""
+
 #: src/pages/Dashboard/MyEcocredits/hooks/useCreateSellOrderSubmit.tsx:150
 #: src/pages/Marketplace/Storefront/hooks/useBuySellOrderSubmit.tsx:208
 msgid "amount of credits"
@@ -427,6 +436,11 @@ msgstr ""
 msgid "buffer pool accounts"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx:65
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx:78
+msgid "buy"
+msgstr ""
+
 #: src/pages/Marketplace/Storefront/Storefront.constants.ts:4
 msgid "Buy"
 msgstr ""
@@ -469,6 +483,7 @@ msgstr ""
 msgid "buy NCT"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.constants.ts:20
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:438
 msgid "Buy tradable ecocredits"
 msgstr ""
@@ -482,6 +497,10 @@ msgstr ""
 msgid "By connecting to Regen Marketplace, you agree to our <0>Terms of Service</0> and <1>Privacy Policy</1>"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:49
+msgid "by default the cheapest credit vintage will be purchased first"
+msgstr ""
+
 #: src/components/organisms/CreditSendForm/CreditSendForm.tsx:137
 msgid "By default these credits are tradable but you may check “retire all credits upon transfer” below to automatically retire them upon sending."
 msgstr ""
@@ -588,6 +607,10 @@ msgstr ""
 msgid "Choose Project"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:46
+msgid "Choose specific credit vintages"
+msgstr ""
+
 #: src/components/organisms/MediaForm/MediaForm.constants.ts:6
 msgid "Choose the photo that will show at the top of the project page and in project preview cards."
 msgstr ""
@@ -823,6 +846,10 @@ msgstr ""
 msgid "credit name"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.tsx:146
+msgid "Credit prices vary. By default the lowest priced credits will be purchased first."
+msgstr ""
+
 #: src/components/organisms/AgreePurchaseForm/AgreePurchaseForm.Retirement.tsx:86
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:515
 msgid "Credit retirement location"
@@ -845,10 +872,19 @@ msgstr ""
 msgid "Credit unit definition"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsInput.tsx:67
+msgid "credits"
+msgstr ""
+
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:216
 msgid "Credits"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx:45
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:71
+msgid "credits available"
+msgstr ""
+
 #: src/pages/Projects/AllProjects/AllProjects.config.ts:18
 msgid "Credits available - high to low"
 msgstr ""
@@ -861,6 +897,10 @@ msgstr ""
 msgid "Credits Cancelled"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx:9
+msgid "Credits cannot exceed"
+msgstr ""
+
 #: src/features/ecocredit/CreateBatchBySteps/form-model.ts:47
 msgid "Credits have been issued!"
 msgstr ""
@@ -869,6 +909,10 @@ msgstr ""
 msgid "Credits issued"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx:30
+msgid "Credits purchased with crypto can be purchased in either a retired or tradable state."
+msgstr ""
+
 #: src/components/molecules/BatchTotalsGrid.tsx:46
 #: src/components/molecules/ProjectBatchTotals/ProjectBatchTotals.tsx:94
 msgid "Credits Retired"
@@ -891,6 +935,10 @@ msgstr ""
 msgid "Crypto Organization"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx:27
+msgid "Crypto purchase options"
+msgstr ""
+
 #: src/components/organisms/ConnectWalletFlow/ConnectWalletFlow.constants.ts:14
 msgid "current account"
 msgstr ""
@@ -1267,6 +1315,10 @@ msgstr ""
 msgid "Impact"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx:50
+msgid "in"
+msgstr ""
+
 #: src/components/organisms/DescriptionForm/DescriptionForm.constants.ts:15
 msgid "In one sentence, summarize the story above."
 msgstr ""
@@ -1357,6 +1409,10 @@ msgstr ""
 msgid "learn more"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx:59
+msgid "Learn more"
+msgstr ""
+
 #: src/components/organisms/RegistryLayout/RegistryLayout.Footer.tsx:56
 #: src/pages/Home/Home.tsx:196
 msgid "Learn More"
@@ -1529,6 +1585,10 @@ msgstr ""
 msgid "MsgCreateProject Error"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx:10
+msgid "Must be positive"
+msgstr ""
+
 #: src/features/ecocredit/CreateBatchBySteps/CreateBatchMultiStepForm/CreateBatchMultiStepForm.constants.ts:3
 msgid "Must have recipients"
 msgstr ""
@@ -2114,6 +2174,7 @@ msgstr ""
 msgid "Retire all credits upon transfer"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.constants.ts:13
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:416
 msgid "Retire credits now"
 msgstr ""
@@ -2557,10 +2618,18 @@ msgstr ""
 msgid "These credits will be a tradable asset. They can be retired later via Regen Marketplace."
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.constants.ts:21
+msgid "These credits will be a tradeable asset. They can be retired later via Regen Marketplace."
+msgstr ""
+
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:419
 msgid "These credits will be retired upon purchase and will not be tradable. Retirement is permanent and non-reversible."
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.constants.ts:14
+msgid "These credits will be retired upon purchase and will not be tradeable. Retirement is permanent and non-reversible."
+msgstr ""
+
 #: src/components/organisms/RolesForm/components/AdminModal/AdminModal.tsx:71
 msgid "This change will only be made after you save the change and sign the transaction."
 msgstr ""
@@ -2820,6 +2889,10 @@ msgstr ""
 msgid "View all supported file types»"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:79
+msgid "view batch"
+msgstr ""
+
 #: src/components/organisms/Portfolio/Portfolio.constants.ts:3
 msgid "View Certificate"
 msgstr ""
@@ -2932,6 +3005,14 @@ msgstr ""
 msgid "whoops! Cancel"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx:67
+msgid "with credit card"
+msgstr ""
+
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx:80
+msgid "with crypto"
+msgstr ""
+
 #: src/components/organisms/PostForm/PostForm.tsx:241
 msgid "Write a short comment or longer project update."
 msgstr ""
diff --git a/web-marketplace/src/lib/i18n/locales/es.po b/web-marketplace/src/lib/i18n/locales/es.po
index c2e001adf7..ea05c64e25 100644
--- a/web-marketplace/src/lib/i18n/locales/es.po
+++ b/web-marketplace/src/lib/i18n/locales/es.po
@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2024-09-11 09:33+0200\n"
+"POT-Creation-Date: 2024-09-11 08:50+0100\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -175,6 +175,10 @@ msgstr ""
 msgid "Admin"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:37
+msgid "Advanced settings"
+msgstr ""
+
 #: src/pages/BatchDetails/BatchDetails.tsx:122
 msgid "All credits"
 msgstr ""
@@ -205,6 +209,7 @@ msgstr ""
 msgid "amount"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx:31
 #: src/components/organisms/BasketEcocreditsTable/BasketEcocreditsTable.tsx:62
 #: src/components/organisms/BridgeForm/BridgeForm.tsx:103
 #: src/lib/constants/shared.constants.tsx:27
@@ -227,6 +232,10 @@ msgstr ""
 msgid "Amount bridged is the same as amount cancelled in the ledger documentation"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx:8
+msgid "Amount cannot exceed"
+msgstr ""
+
 #: src/pages/Dashboard/MyEcocredits/hooks/useCreateSellOrderSubmit.tsx:150
 #: src/pages/Marketplace/Storefront/hooks/useBuySellOrderSubmit.tsx:208
 msgid "amount of credits"
@@ -427,6 +436,11 @@ msgstr ""
 msgid "buffer pool accounts"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx:65
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx:78
+msgid "buy"
+msgstr ""
+
 #: src/pages/Marketplace/Storefront/Storefront.constants.ts:4
 msgid "Buy"
 msgstr ""
@@ -469,6 +483,7 @@ msgstr ""
 msgid "buy NCT"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.constants.ts:20
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:438
 msgid "Buy tradable ecocredits"
 msgstr ""
@@ -482,6 +497,10 @@ msgstr ""
 msgid "By connecting to Regen Marketplace, you agree to our <0>Terms of Service</0> and <1>Privacy Policy</1>"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:49
+msgid "by default the cheapest credit vintage will be purchased first"
+msgstr ""
+
 #: src/components/organisms/CreditSendForm/CreditSendForm.tsx:137
 msgid "By default these credits are tradable but you may check “retire all credits upon transfer” below to automatically retire them upon sending."
 msgstr ""
@@ -588,6 +607,10 @@ msgstr ""
 msgid "Choose Project"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:46
+msgid "Choose specific credit vintages"
+msgstr ""
+
 #: src/components/organisms/MediaForm/MediaForm.constants.ts:6
 msgid "Choose the photo that will show at the top of the project page and in project preview cards."
 msgstr ""
@@ -823,6 +846,10 @@ msgstr ""
 msgid "credit name"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.tsx:146
+msgid "Credit prices vary. By default the lowest priced credits will be purchased first."
+msgstr ""
+
 #: src/components/organisms/AgreePurchaseForm/AgreePurchaseForm.Retirement.tsx:86
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:515
 msgid "Credit retirement location"
@@ -845,10 +872,19 @@ msgstr ""
 msgid "Credit unit definition"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsInput.tsx:67
+msgid "credits"
+msgstr ""
+
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:216
 msgid "Credits"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx:45
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:71
+msgid "credits available"
+msgstr ""
+
 #: src/pages/Projects/AllProjects/AllProjects.config.ts:18
 msgid "Credits available - high to low"
 msgstr ""
@@ -861,6 +897,10 @@ msgstr ""
 msgid "Credits Cancelled"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx:9
+msgid "Credits cannot exceed"
+msgstr ""
+
 #: src/features/ecocredit/CreateBatchBySteps/form-model.ts:47
 msgid "Credits have been issued!"
 msgstr ""
@@ -869,6 +909,10 @@ msgstr ""
 msgid "Credits issued"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx:30
+msgid "Credits purchased with crypto can be purchased in either a retired or tradable state."
+msgstr ""
+
 #: src/components/molecules/BatchTotalsGrid.tsx:46
 #: src/components/molecules/ProjectBatchTotals/ProjectBatchTotals.tsx:94
 msgid "Credits Retired"
@@ -891,6 +935,10 @@ msgstr ""
 msgid "Crypto Organization"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx:27
+msgid "Crypto purchase options"
+msgstr ""
+
 #: src/components/organisms/ConnectWalletFlow/ConnectWalletFlow.constants.ts:14
 msgid "current account"
 msgstr ""
@@ -1267,6 +1315,10 @@ msgstr ""
 msgid "Impact"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.Header.tsx:50
+msgid "in"
+msgstr ""
+
 #: src/components/organisms/DescriptionForm/DescriptionForm.constants.ts:15
 msgid "In one sentence, summarize the story above."
 msgstr ""
@@ -1357,6 +1409,10 @@ msgstr ""
 msgid "learn more"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.CryptoOptions.tsx:59
+msgid "Learn more"
+msgstr ""
+
 #: src/components/organisms/RegistryLayout/RegistryLayout.Footer.tsx:56
 #: src/pages/Home/Home.tsx:196
 msgid "Learn More"
@@ -1529,6 +1585,10 @@ msgstr ""
 msgid "MsgCreateProject Error"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.constants.tsx:10
+msgid "Must be positive"
+msgstr ""
+
 #: src/features/ecocredit/CreateBatchBySteps/CreateBatchMultiStepForm/CreateBatchMultiStepForm.constants.ts:3
 msgid "Must have recipients"
 msgstr ""
@@ -2114,6 +2174,7 @@ msgstr ""
 msgid "Retire all credits upon transfer"
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.constants.ts:13
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:416
 msgid "Retire credits now"
 msgstr ""
@@ -2557,10 +2618,18 @@ msgstr ""
 msgid "These credits will be a tradable asset. They can be retired later via Regen Marketplace."
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.constants.ts:21
+msgid "These credits will be a tradeable asset. They can be retired later via Regen Marketplace."
+msgstr ""
+
 #: src/components/organisms/BuyCreditsModal/BuyCreditsModal.tsx:419
 msgid "These credits will be retired upon purchase and will not be tradable. Retirement is permanent and non-reversible."
 msgstr ""
 
+#: src/components/molecules/CreditsAmount/CreditsAmount.constants.ts:14
+msgid "These credits will be retired upon purchase and will not be tradeable. Retirement is permanent and non-reversible."
+msgstr ""
+
 #: src/components/organisms/RolesForm/components/AdminModal/AdminModal.tsx:71
 msgid "This change will only be made after you save the change and sign the transaction."
 msgstr ""
@@ -2820,6 +2889,10 @@ msgstr ""
 msgid "View all supported file types»"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.AdvanceSettings.tsx:79
+msgid "view batch"
+msgstr ""
+
 #: src/components/organisms/Portfolio/Portfolio.constants.ts:3
 msgid "View Certificate"
 msgstr ""
@@ -2932,6 +3005,14 @@ msgstr ""
 msgid "whoops! Cancel"
 msgstr ""
 
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx:67
+msgid "with credit card"
+msgstr ""
+
+#: src/components/organisms/ChooseCreditsForm/ChooseCreditsForm.PaymentOptions.tsx:80
+msgid "with crypto"
+msgstr ""
+
 #: src/components/organisms/PostForm/PostForm.tsx:241
 msgid "Write a short comment or longer project update."
 msgstr ""
diff --git a/web-marketplace/src/lib/rdf/rdf.test.ts b/web-marketplace/src/lib/rdf/rdf.test.ts
index 92532733d2..63a0f01b2b 100644
--- a/web-marketplace/src/lib/rdf/rdf.test.ts
+++ b/web-marketplace/src/lib/rdf/rdf.test.ts
@@ -1,6 +1,6 @@
 import { getCompactedPath, validate } from './rdf';
 
-describe('validate', () => {
+describe.skip('validate', () => {
   it('validate against property shapes with given group', async () => {
     const data = {
       '@context': {
@@ -193,7 +193,7 @@ describe('validate', () => {
   });
 });
 
-describe('getCompactedPath', () => {
+describe.skip('getCompactedPath', () => {
   it('returns path from compacted JSON-LD', () => {
     const compactedPath = getCompactedPath('http://schema.org/name');
     expect(compactedPath).toEqual('schema:name');
diff --git a/web-marketplace/src/storyshots.test.ts b/web-marketplace/src/storyshots.test.ts
deleted file mode 100644
index f4551fcb83..0000000000
--- a/web-marketplace/src/storyshots.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import initStoryshots from '@storybook/addon-storyshots';
-import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import toJson from 'enzyme-to-json';
-import path from 'path';
-
-import './jest.mock';
-
-configure({ adapter: new Adapter() });
-
-initStoryshots({
-  configPath: path.resolve(__dirname, '../../web-storybook/.storybook'),
-  framework: 'react',
-  test: ({ story, context }) => {
-    const storyElement = story.render();
-    const shallowTree = shallow(storyElement);
-
-    expect(toJson(shallowTree)).toMatchSnapshot();
-  },
-});
diff --git a/web-marketplace/test/setup.ts b/web-marketplace/test/setup.ts
new file mode 100644
index 0000000000..bb02c60cd0
--- /dev/null
+++ b/web-marketplace/test/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/web-marketplace/test/test-utils.tsx b/web-marketplace/test/test-utils.tsx
new file mode 100644
index 0000000000..180d9e66c5
--- /dev/null
+++ b/web-marketplace/test/test-utils.tsx
@@ -0,0 +1,107 @@
+import { ReactElement, ReactNode } from 'react';
+import { FormProvider, useForm, UseFormReturn } from 'react-hook-form';
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
+import {
+  act,
+  render as rtlRender,
+  RenderOptions,
+} from '@testing-library/react';
+
+// Custom hook to setup react hook form context
+export function useCustomForm(
+  formDefaultValues: Record<string, any>,
+): UseFormReturn {
+  return useForm({
+    defaultValues: formDefaultValues,
+  });
+}
+
+// Form Provider
+interface FormContextProviderProps {
+  children: ReactNode;
+  formDefaultValues: Record<string, any>;
+}
+
+const FormContextProvider = ({
+  children,
+  formDefaultValues,
+}: FormContextProviderProps) => {
+  const methods = useCustomForm(formDefaultValues);
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+// Lingui Provider
+interface LinguiProviderProps {
+  children: ReactNode;
+}
+
+const LinguiProvider = ({ children }: LinguiProviderProps) => {
+  act(() => {
+    i18n.activate('en');
+  });
+
+  return <I18nProvider i18n={i18n}>{children}</I18nProvider>;
+};
+
+// Combined Provider
+interface CombinedProvidersProps {
+  children: ReactNode;
+  formDefaultValues?: Record<string, any>;
+}
+
+const CombinedProviders = ({
+  children,
+  formDefaultValues,
+}: CombinedProvidersProps) => (
+  <LinguiProvider>
+    {formDefaultValues ? (
+      <FormContextProvider formDefaultValues={formDefaultValues}>
+        {children}
+      </FormContextProvider>
+    ) : (
+      children
+    )}
+  </LinguiProvider>
+);
+
+// RTL Custom render function
+//
+// How to use the customRender function with FormContextProvider and default values
+// Example usage:
+//
+// import { render, screen } from 'test-utils';
+// import { SomeComponent } from './SomeComponent';
+//
+// test('renders SomeComponent', () => {
+//   render(<SomeComponent props={[]} />, {
+//     formDefaultValues: {
+//       you_form_value: 'here',
+//   });
+//   expect(screen.getByText(/something/i)).toBeInTheDocument();
+// });
+interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
+  formDefaultValues?: Record<string, any>;
+}
+
+const customRender = (ui: ReactElement, options?: CustomRenderOptions) => {
+  const { formDefaultValues, ...restOptions } = options || {};
+  return rtlRender(ui, {
+    wrapper: ({ children }) => (
+      <CombinedProviders formDefaultValues={formDefaultValues}>
+        {children}
+      </CombinedProviders>
+    ),
+    ...restOptions,
+  });
+};
+
+// Re-export everything
+export * from '@testing-library/react';
+export * from '@testing-library/user-event';
+
+// Important:
+// In tests import `render` from 'test-utils' instead of '@testing-library/react'.
+// Override the render method
+export { customRender as render };
diff --git a/web-marketplace/tsconfig.json b/web-marketplace/tsconfig.json
index adf0d02112..e27867a833 100644
--- a/web-marketplace/tsconfig.json
+++ b/web-marketplace/tsconfig.json
@@ -2,7 +2,14 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "types": ["vite/client", "vite-plugin-svgr/client"],
+    "types": ["vite/client", "vite-plugin-svgr/client", "vitest/globals","@testing-library/jest-dom"],
+    "typeRoots": [
+      "./node_modules/@types/",
+      "./types",
+      "./node_modules",
+      "../node_modules/@types/",
+      "../node_modules"
+    ],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,9 +23,13 @@
     "noEmit": true,
     "noFallthroughCasesInSwitch": true,
     "jsx": "react-jsx",
-    "baseUrl": "./src"
+    "baseUrl": "./src",
+    "paths": {
+      "test/*": ["../test/*"]
+    }
   },
   "include": [
+    "test",
     "src",
     "types/url-search-params-polyfill.d.ts",
     "lib/rdf/types/rdf-validate-shacl/index.d.ts"
diff --git a/web-marketplace/vite.config.mts b/web-marketplace/vite.config.mts
index d38d71978f..68b9ebb85c 100644
--- a/web-marketplace/vite.config.mts
+++ b/web-marketplace/vite.config.mts
@@ -1,4 +1,5 @@
 import NodeGlobalsPolyfillPlugin from '@esbuild-plugins/node-globals-polyfill';
+import { lingui } from '@lingui/vite-plugin';
 import inject from '@rollup/plugin-inject';
 import react from '@vitejs/plugin-react';
 import path from 'path';
@@ -7,7 +8,6 @@ import { defineConfig } from 'vite';
 import vitePluginRequire from 'vite-plugin-require';
 import svgrPlugin from 'vite-plugin-svgr';
 import viteTsconfigPaths from 'vite-tsconfig-paths';
-import { lingui } from '@lingui/vite-plugin';
 
 export default defineConfig(({ mode }) => {
   const isDev = mode === 'development';
@@ -31,6 +31,7 @@ export default defineConfig(({ mode }) => {
         config: path.resolve(__dirname, 'src/config'),
         ledger: path.resolve(__dirname, 'src/ledger'),
         clients: path.resolve(__dirname, 'src/clients'),
+        test: path.resolve(__dirname, '../test'),
       },
     },
     build:
@@ -68,5 +69,10 @@ export default defineConfig(({ mode }) => {
             : undefined,
       },
     },
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: './test/setup.ts',
+    },
   };
 });
diff --git a/web-www/package.json b/web-www/package.json
index cb377bee7a..8aa9f32cc2 100644
--- a/web-www/package.json
+++ b/web-www/package.json
@@ -22,7 +22,7 @@
     "@mdx-js/react": "^2.3.0",
     "@mui/material": "^5.10.10",
     "@mui/styles": "^5.10.10",
-    "@netlify/plugin-nextjs": "4.41.3",
+    "@netlify/plugin-nextjs": "5.7.0",
     "@next/mdx": "^13.4.19",
     "@types/mdx": "^2.0.10",
     "@types/node": "18.15.11",