diff --git a/.storybook/stories/PieChartFigure.stories.js b/.storybook/stories/PieChartFigure.stories.js
deleted file mode 100644
index 69c61cae46..0000000000
--- a/.storybook/stories/PieChartFigure.stories.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import PieChartFigure from '#src/components/Charts/PieChartFigure';
-
-const genderValues = [{ label: 'Female', value: 1243, percent: 0.6467221644120708 }, { label: 'Male', value: 676, percent: 0.3517169614984391 }, { label: 'Unspecified', value: 2, percent: 0.001040582726326743 }, { label: 'Nonbinary', value: 1, percent: 0.0005202913631633715 }];
-const sectorValues = [{ label: 'Food', value: 575, percent: 0.2991675338189386 }, { label: 'Retail', value: 377, percent: 0.19614984391259105 }, { label: 'Agriculture', value: 285, percent: 0.14828303850156088 }, { label: 'Services', value: 211, percent: 0.10978147762747138 }, { label: 'Clothing', value: 183, percent: 0.09521331945889698 }, { label: 'Arts', value: 65, percent: 0.033818938605619145 }, { label: 'Housing', value: 65, percent: 0.033818938605619145 }, { label: 'Education', value: 36, percent: 0.018730489073881373 }, { label: 'Construction', value: 28, percent: 0.014568158168574402 }, { label: 'Health', value: 27, percent: 0.01404786680541103 }, { label: 'Transportation', value: 23, percent: 0.011966701352757543 }, { label: 'Personal Use', value: 19, percent: 0.009885535900104058 }, { label: 'Manufacturing', value: 13, percent: 0.006763787721123829 }, { label: 'Entertainment', value: 10, percent: 0.005202913631633715 }, { label: 'Wholesale', value: 5, percent: 0.0026014568158168575 }];
-
-export default {
-	title: 'Charts/PieChartFigure',
-	component: PieChartFigure,
-	args: {
-		loading: false,
-		values: genderValues,
-	},
-};
-
-const template = `
-	<pie-chart-figure
-		:values="values"
-		:loading="loading"
-	/>
-`;
-
-export const Default = (args, { argTypes }) => ({
-	components: {
-		PieChartFigure,
-	},
-	props: Object.keys(argTypes),
-	template,
-});
-
-export const Loading = (args, { argTypes }) => ({
-	components: {
-		PieChartFigure,
-	},
-	props: Object.keys(argTypes),
-	template,
-});
-Loading.args = {
-	loading: true,
-	values: [],
-};
-
-export const ManyValues = (args, { argTypes }) => ({
-	components: {
-		PieChartFigure,
-	},
-	props: Object.keys(argTypes),
-	template,
-});
-ManyValues.args = {
-	values: sectorValues,
-};
diff --git a/.storybook/stories/TreeMapFigure.stories.js b/.storybook/stories/TreeMapFigure.stories.js
deleted file mode 100644
index 0c018bd81a..0000000000
--- a/.storybook/stories/TreeMapFigure.stories.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import TreeMapFigure from '#src/components/Charts/TreeMapFigure';
-
-const genderValues = [{ label: 'Female', value: 1243, percent: 0.6467221644120708 }, { label: 'Male', value: 676, percent: 0.3517169614984391 }, { label: 'Unspecified', value: 2, percent: 0.001040582726326743 }, { label: 'Nonbinary', value: 1, percent: 0.0005202913631633715 }];
-const sectorValues = [{ label: 'Food', value: 575, percent: 0.2991675338189386 }, { label: 'Retail', value: 377, percent: 0.19614984391259105 }, { label: 'Agriculture', value: 285, percent: 0.14828303850156088 }, { label: 'Services', value: 211, percent: 0.10978147762747138 }, { label: 'Clothing', value: 183, percent: 0.09521331945889698 }, { label: 'Arts', value: 65, percent: 0.033818938605619145 }, { label: 'Housing', value: 65, percent: 0.033818938605619145 }, { label: 'Education', value: 36, percent: 0.018730489073881373 }, { label: 'Construction', value: 28, percent: 0.014568158168574402 }, { label: 'Health', value: 27, percent: 0.01404786680541103 }, { label: 'Transportation', value: 23, percent: 0.011966701352757543 }, { label: 'Personal Use', value: 19, percent: 0.009885535900104058 }, { label: 'Manufacturing', value: 13, percent: 0.006763787721123829 }, { label: 'Entertainment', value: 10, percent: 0.005202913631633715 }, { label: 'Wholesale', value: 5, percent: 0.0026014568158168575 }];
-
-export default {
-	title: 'Charts/TreeMapFigure',
-	component: TreeMapFigure,
-	args: {
-		loading: false,
-		values: genderValues,
-	},
-};
-
-const template = `
-	<tree-map-figure
-		:values="values"
-		:loading="loading"
-	/>
-`;
-
-export const Default = (args, { argTypes }) => ({
-	components: {
-		TreeMapFigure,
-	},
-	props: Object.keys(argTypes),
-	template,
-});
-
-export const Loading = (args, { argTypes }) => ({
-	components: {
-		TreeMapFigure,
-	},
-	props: Object.keys(argTypes),
-	template,
-});
-Loading.args = {
-	loading: true,
-	values: [],
-};
-
-export const ManyValues = (args, { argTypes }) => ({
-	components: {
-		TreeMapFigure,
-	},
-	props: Object.keys(argTypes),
-	template,
-});
-ManyValues.args = {
-	values: sectorValues,
-};
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1bcc0264a6..b2ca3ade89 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,114 @@
+## [2.751.0](https://github.com/kiva/ui/compare/v2.750.0...v2.751.0) (2024-08-27)
+
+
+### 🎉 New Features
+
+* 404 page added ([#5444](https://github.com/kiva/ui/issues/5444)) ([c477382](https://github.com/kiva/ui/commit/c47738239b58f143aa5e770f58ae2e8954105f40))
+* charts replaced with shared ones from kv components ([#5458](https://github.com/kiva/ui/issues/5458)) ([251c64b](https://github.com/kiva/ui/commit/251c64b6b6921c31074396f725e968f7a8e6972e))
+* create an intermediate screen after badge is revealed to enhance transition between screens ([8d69893](https://github.com/kiva/ui/commit/8d69893c20196c0bba056b986716104c422ad32d))
+* handle unknown lender on profile page ([#5455](https://github.com/kiva/ui/issues/5455)) ([a4c1986](https://github.com/kiva/ui/commit/a4c1986d67f6a4ca77f7c78a831fa8551990642d))
+* integrate kv-carousel for badges ([5dada33](https://github.com/kiva/ui/commit/5dada334a0178534366c9035e17f0bb092a5587c))
+* lender profile headings updated ([#5459](https://github.com/kiva/ui/issues/5459)) ([d25806d](https://github.com/kiva/ui/commit/d25806dbddc22f5fadc6d81380355e3a2ead7f7e))
+* loading states adding to lender profile sections ([#5451](https://github.com/kiva/ui/issues/5451)) ([c17e0fd](https://github.com/kiva/ui/commit/c17e0fd2f89bb5d73f847ab2e23cc1a6de93644d))
+* loans map added to lender profile ([#5438](https://github.com/kiva/ui/issues/5438)) ([55ba677](https://github.com/kiva/ui/commit/55ba677cf82de55adda65587aa5ebb40d5f4398e))
+* meta data updated in lender profile ([#5445](https://github.com/kiva/ui/issues/5445)) ([f0a1d70](https://github.com/kiva/ui/commit/f0a1d70352ff7ac565389e3b824fae0efc145c32))
+* pie chart mobile view fixed ([#5447](https://github.com/kiva/ui/issues/5447)) ([e230642](https://github.com/kiva/ui/commit/e23064296159b1da64d3e8a5a74b72fba934d168))
+* reorganize structure and create discover component view ([b308c78](https://github.com/kiva/ui/commit/b308c78700c606fdd41263f6050c3cf572a9b88b))
+* set badge fullscreen on click and fade in elements ([c8ed11c](https://github.com/kiva/ui/commit/c8ed11c31447079ce64074e22032f5f0bc6b1c0a))
+* set new deposit incentive end date MP-692 ([83bba41](https://github.com/kiva/ui/commit/83bba41a9d276edea74b8f90fc11b0a9a0ad1c10))
+* smooth badge unblur ([ed9af43](https://github.com/kiva/ui/commit/ed9af433a1a83cdc709dca647d774ec0621f1cc1))
+
+
+### 🐛 Bugfixes
+
+* 3 cols for desktop ([4a6b1aa](https://github.com/kiva/ui/commit/4a6b1aafa3b42996fa3e906f31aed889bdd69a45))
+* change refugee badge name to plural ([8e10d76](https://github.com/kiva/ui/commit/8e10d76ef2b6255c41156f275f1be1b2cc60d618))
+* extract async checkout error object with primary format ([2746096](https://github.com/kiva/ui/commit/27460969f0ad836266e8869b8ffeba90a148cff4))
+* fix optional chaining for fallback error states ([8c586ff](https://github.com/kiva/ui/commit/8c586ff78b8be2b16eb9557a0c2169a8e3ed2d21))
+* grow new bg to fullscreen except for header and footer ([59f941a](https://github.com/kiva/ui/commit/59f941a29b95d6ed53367e636220a444b409e5ba))
+* hide name using badge id ([11e992d](https://github.com/kiva/ui/commit/11e992de8ca41b18b54217e7bfcb12ef493581c7))
+* lint ([d637937](https://github.com/kiva/ui/commit/d63793718eac79af35b8bcd47b6179dcd237318a))
+* lint ([49bb940](https://github.com/kiva/ui/commit/49bb940b725c61032d82c7881257cdc575dc1f69))
+* lint ([2f5852a](https://github.com/kiva/ui/commit/2f5852ae94612ebe900645cead47316e4fe5f33d))
+* lint ([67e819e](https://github.com/kiva/ui/commit/67e819e98d5693a9c4653a3dbc19791463404cf3))
+* mfa api token auth requires using authorize call, not checkSession MP-479 ([56f4fc5](https://github.com/kiva/ui/commit/56f4fc53aac82baef73a96f0e03d6d3427bd3356))
+* missing region in ty page query ([b778aab](https://github.com/kiva/ui/commit/b778aab59a3c801ee6a1337a5b4465bb770a4317))
+* missing track property ([f357a9b](https://github.com/kiva/ui/commit/f357a9bfd5c9242a05ca4644c7d325dba62024c4))
+* remove checkout sticky code ([a40e081](https://github.com/kiva/ui/commit/a40e08131e480dd6e11b360e93553285f1b62960))
+* remove unused args in story ([b8810f9](https://github.com/kiva/ui/commit/b8810f913f4e4e24f63e27ebccb315042ff1fb9e))
+* state is in hash and show error page for error conditions MP-479 ([59d3186](https://github.com/kiva/ui/commit/59d3186f160368afc464d5a7826d676f1cfaad4c))
+* state param not generated before authorize call MP-479 ([88d0eff](https://github.com/kiva/ui/commit/88d0eff94a828bb9696eb708ed1c33ea2f528376))
+* tw class ([657250f](https://github.com/kiva/ui/commit/657250f2b8c753b4d767f04993d71ab772476539))
+* update component library ([bb5513b](https://github.com/kiva/ui/commit/bb5513bc0eb0faaa07737e336c1a86c70e2bc4de))
+* update selected comms value check ([8517ecd](https://github.com/kiva/ui/commit/8517ecdaa0f5b4824c97c52ff8ea6eab8bc0755f))
+
+
+### 🪚 Refactors
+
+* remove unused code ([fc166d0](https://github.com/kiva/ui/commit/fc166d038a8b452f495fa6e20cbb3b624db30156))
+* remove unused code ([5067f12](https://github.com/kiva/ui/commit/5067f12d2af4e760e1c487704df8c94ccd9e5f2c))
+* revert changes from WwwPage component ([88ee076](https://github.com/kiva/ui/commit/88ee0768537df040b0881d446cf6421f159ecf15))
+* sections to improve transition ([98af79f](https://github.com/kiva/ui/commit/98af79f32b8670a92e3afe1b4eab9d8b26436a69))
+* variable names ([800c207](https://github.com/kiva/ui/commit/800c207bfcf27800ff415d65cdbf066c4e4582d5))
+
+
+### 🧹 Chores
+
+* **release:** 2.751.0-rc.1 [skip ci] ([817e0c9](https://github.com/kiva/ui/commit/817e0c9da3d53f40132de454705dad9c046caa0a)), closes [#5444](https://github.com/kiva/ui/issues/5444) [#5458](https://github.com/kiva/ui/issues/5458) [#5455](https://github.com/kiva/ui/issues/5455) [#5459](https://github.com/kiva/ui/issues/5459) [#5451](https://github.com/kiva/ui/issues/5451) [#5438](https://github.com/kiva/ui/issues/5438) [#5445](https://github.com/kiva/ui/issues/5445) [#5447](https://github.com/kiva/ui/issues/5447)
+
+## [2.751.0-rc.1](https://github.com/kiva/ui/compare/v2.750.0...v2.751.0-rc.1) (2024-08-27)
+
+
+### 🎉 New Features
+
+* 404 page added ([#5444](https://github.com/kiva/ui/issues/5444)) ([c477382](https://github.com/kiva/ui/commit/c47738239b58f143aa5e770f58ae2e8954105f40))
+* charts replaced with shared ones from kv components ([#5458](https://github.com/kiva/ui/issues/5458)) ([251c64b](https://github.com/kiva/ui/commit/251c64b6b6921c31074396f725e968f7a8e6972e))
+* create an intermediate screen after badge is revealed to enhance transition between screens ([8d69893](https://github.com/kiva/ui/commit/8d69893c20196c0bba056b986716104c422ad32d))
+* handle unknown lender on profile page ([#5455](https://github.com/kiva/ui/issues/5455)) ([a4c1986](https://github.com/kiva/ui/commit/a4c1986d67f6a4ca77f7c78a831fa8551990642d))
+* integrate kv-carousel for badges ([5dada33](https://github.com/kiva/ui/commit/5dada334a0178534366c9035e17f0bb092a5587c))
+* lender profile headings updated ([#5459](https://github.com/kiva/ui/issues/5459)) ([d25806d](https://github.com/kiva/ui/commit/d25806dbddc22f5fadc6d81380355e3a2ead7f7e))
+* loading states adding to lender profile sections ([#5451](https://github.com/kiva/ui/issues/5451)) ([c17e0fd](https://github.com/kiva/ui/commit/c17e0fd2f89bb5d73f847ab2e23cc1a6de93644d))
+* loans map added to lender profile ([#5438](https://github.com/kiva/ui/issues/5438)) ([55ba677](https://github.com/kiva/ui/commit/55ba677cf82de55adda65587aa5ebb40d5f4398e))
+* meta data updated in lender profile ([#5445](https://github.com/kiva/ui/issues/5445)) ([f0a1d70](https://github.com/kiva/ui/commit/f0a1d70352ff7ac565389e3b824fae0efc145c32))
+* pie chart mobile view fixed ([#5447](https://github.com/kiva/ui/issues/5447)) ([e230642](https://github.com/kiva/ui/commit/e23064296159b1da64d3e8a5a74b72fba934d168))
+* reorganize structure and create discover component view ([b308c78](https://github.com/kiva/ui/commit/b308c78700c606fdd41263f6050c3cf572a9b88b))
+* set badge fullscreen on click and fade in elements ([c8ed11c](https://github.com/kiva/ui/commit/c8ed11c31447079ce64074e22032f5f0bc6b1c0a))
+* set new deposit incentive end date MP-692 ([83bba41](https://github.com/kiva/ui/commit/83bba41a9d276edea74b8f90fc11b0a9a0ad1c10))
+* smooth badge unblur ([ed9af43](https://github.com/kiva/ui/commit/ed9af433a1a83cdc709dca647d774ec0621f1cc1))
+
+
+### 🐛 Bugfixes
+
+* 3 cols for desktop ([4a6b1aa](https://github.com/kiva/ui/commit/4a6b1aafa3b42996fa3e906f31aed889bdd69a45))
+* change refugee badge name to plural ([8e10d76](https://github.com/kiva/ui/commit/8e10d76ef2b6255c41156f275f1be1b2cc60d618))
+* extract async checkout error object with primary format ([2746096](https://github.com/kiva/ui/commit/27460969f0ad836266e8869b8ffeba90a148cff4))
+* fix optional chaining for fallback error states ([8c586ff](https://github.com/kiva/ui/commit/8c586ff78b8be2b16eb9557a0c2169a8e3ed2d21))
+* grow new bg to fullscreen except for header and footer ([59f941a](https://github.com/kiva/ui/commit/59f941a29b95d6ed53367e636220a444b409e5ba))
+* hide name using badge id ([11e992d](https://github.com/kiva/ui/commit/11e992de8ca41b18b54217e7bfcb12ef493581c7))
+* lint ([d637937](https://github.com/kiva/ui/commit/d63793718eac79af35b8bcd47b6179dcd237318a))
+* lint ([49bb940](https://github.com/kiva/ui/commit/49bb940b725c61032d82c7881257cdc575dc1f69))
+* lint ([2f5852a](https://github.com/kiva/ui/commit/2f5852ae94612ebe900645cead47316e4fe5f33d))
+* lint ([67e819e](https://github.com/kiva/ui/commit/67e819e98d5693a9c4653a3dbc19791463404cf3))
+* mfa api token auth requires using authorize call, not checkSession MP-479 ([56f4fc5](https://github.com/kiva/ui/commit/56f4fc53aac82baef73a96f0e03d6d3427bd3356))
+* missing region in ty page query ([b778aab](https://github.com/kiva/ui/commit/b778aab59a3c801ee6a1337a5b4465bb770a4317))
+* missing track property ([f357a9b](https://github.com/kiva/ui/commit/f357a9bfd5c9242a05ca4644c7d325dba62024c4))
+* remove checkout sticky code ([a40e081](https://github.com/kiva/ui/commit/a40e08131e480dd6e11b360e93553285f1b62960))
+* remove unused args in story ([b8810f9](https://github.com/kiva/ui/commit/b8810f913f4e4e24f63e27ebccb315042ff1fb9e))
+* state is in hash and show error page for error conditions MP-479 ([59d3186](https://github.com/kiva/ui/commit/59d3186f160368afc464d5a7826d676f1cfaad4c))
+* state param not generated before authorize call MP-479 ([88d0eff](https://github.com/kiva/ui/commit/88d0eff94a828bb9696eb708ed1c33ea2f528376))
+* tw class ([657250f](https://github.com/kiva/ui/commit/657250f2b8c753b4d767f04993d71ab772476539))
+* update component library ([bb5513b](https://github.com/kiva/ui/commit/bb5513bc0eb0faaa07737e336c1a86c70e2bc4de))
+* update selected comms value check ([8517ecd](https://github.com/kiva/ui/commit/8517ecdaa0f5b4824c97c52ff8ea6eab8bc0755f))
+
+
+### 🪚 Refactors
+
+* remove unused code ([fc166d0](https://github.com/kiva/ui/commit/fc166d038a8b452f495fa6e20cbb3b624db30156))
+* remove unused code ([5067f12](https://github.com/kiva/ui/commit/5067f12d2af4e760e1c487704df8c94ccd9e5f2c))
+* revert changes from WwwPage component ([88ee076](https://github.com/kiva/ui/commit/88ee0768537df040b0881d446cf6421f159ecf15))
+* sections to improve transition ([98af79f](https://github.com/kiva/ui/commit/98af79f32b8670a92e3afe1b4eab9d8b26436a69))
+* variable names ([800c207](https://github.com/kiva/ui/commit/800c207bfcf27800ff415d65cdbf066c4e4582d5))
+
 ## [2.750.0](https://github.com/kiva/ui/compare/v2.749.1...v2.750.0) (2024-08-16)
 
 
diff --git a/package-lock.json b/package-lock.json
index 036e06f4ec..2b5ae11601 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "kvue",
-	"version": "2.750.0",
+	"version": "2.751.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "kvue",
-			"version": "2.750.0",
+			"version": "2.751.0",
 			"license": "UNLICENSED",
 			"dependencies": {
 				"@aacassandra/vue3-progressbar": "^1.0.3",
@@ -16,7 +16,7 @@
 				"@godaddy/terminus": "^4.11.0",
 				"@graphql-tools/load": "^7.7.0",
 				"@graphql-tools/url-loader": "^7.17.18",
-				"@kiva/kv-components": "^3.92.1",
+				"@kiva/kv-components": "^3.96.0",
 				"@kiva/kv-shop": "^1.12.8",
 				"@kiva/kv-tokens": "^2.11.1",
 				"@mdi/js": "^7",
@@ -93,7 +93,6 @@
 				"store2": "^2.12.0",
 				"timesync": "^1.0.8",
 				"title-case": "^3.0.2",
-				"treemap-squarify": "^1.0.1",
 				"uuid": "^8.3.0",
 				"vue": "^3.4.27",
 				"vue-docgen-loader": "^2.0.0",
@@ -5459,9 +5458,9 @@
 			"integrity": "sha512-1lNM7toQpiHWWdKrBmoXPudNLgFscU8rnk4nyBQQhbnlhSLzbjbsCcWWnA+IqXkgOCVysSpI7yEi7fuU6uLMYg=="
 		},
 		"node_modules/@kiva/kv-components": {
-			"version": "3.92.1",
-			"resolved": "https://registry.npmjs.org/@kiva/kv-components/-/kv-components-3.92.1.tgz",
-			"integrity": "sha512-3Ei9mrydQL4gPdLRa5jZ3jgs9mvja22uwR+RdypvrZ6XfbF5ElDVO1mk99gWqcsUIcAGnte1gv4JTqP4XpUgAQ==",
+			"version": "3.96.0",
+			"resolved": "https://registry.npmjs.org/@kiva/kv-components/-/kv-components-3.96.0.tgz",
+			"integrity": "sha512-G5XAFt38+8Gft2TK7WGRSnfhQrG5HKdgZzabfJP4HNL860zVrz8rDfS85xT4hPy3kOIvqjOl3Sh7y11t2FnAYQ==",
 			"dependencies": {
 				"@kiva/kv-tokens": "^2.13.0",
 				"@mdi/js": "^5.9.55",
@@ -5475,6 +5474,8 @@
 				"moment": "^2.29.4",
 				"nanoid": "^3.1.23",
 				"numeral": "^2.0.6",
+				"popper.js": "^1.16.1",
+				"treemap-squarify": "^1.0.1",
 				"vue-demi": "^0.14.7"
 			},
 			"peerDependencies": {
@@ -41458,9 +41459,9 @@
 			"integrity": "sha512-1lNM7toQpiHWWdKrBmoXPudNLgFscU8rnk4nyBQQhbnlhSLzbjbsCcWWnA+IqXkgOCVysSpI7yEi7fuU6uLMYg=="
 		},
 		"@kiva/kv-components": {
-			"version": "3.92.1",
-			"resolved": "https://registry.npmjs.org/@kiva/kv-components/-/kv-components-3.92.1.tgz",
-			"integrity": "sha512-3Ei9mrydQL4gPdLRa5jZ3jgs9mvja22uwR+RdypvrZ6XfbF5ElDVO1mk99gWqcsUIcAGnte1gv4JTqP4XpUgAQ==",
+			"version": "3.96.0",
+			"resolved": "https://registry.npmjs.org/@kiva/kv-components/-/kv-components-3.96.0.tgz",
+			"integrity": "sha512-G5XAFt38+8Gft2TK7WGRSnfhQrG5HKdgZzabfJP4HNL860zVrz8rDfS85xT4hPy3kOIvqjOl3Sh7y11t2FnAYQ==",
 			"requires": {
 				"@kiva/kv-tokens": "^2.13.0",
 				"@mdi/js": "^5.9.55",
@@ -41474,6 +41475,8 @@
 				"moment": "^2.29.4",
 				"nanoid": "^3.1.23",
 				"numeral": "^2.0.6",
+				"popper.js": "^1.16.1",
+				"treemap-squarify": "^1.0.1",
 				"vue-demi": "^0.14.7"
 			},
 			"dependencies": {
diff --git a/package.json b/package.json
index 5851375a9a..8f72583c72 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "kvue",
-	"version": "2.750.0",
+	"version": "2.751.0",
 	"description": "The Kiva ui",
 	"author": "braincrave",
 	"private": true,
@@ -43,7 +43,7 @@
 		"@godaddy/terminus": "^4.11.0",
 		"@graphql-tools/load": "^7.7.0",
 		"@graphql-tools/url-loader": "^7.17.18",
-		"@kiva/kv-components": "^3.92.1",
+		"@kiva/kv-components": "^3.96.0",
 		"@kiva/kv-shop": "^1.12.8",
 		"@kiva/kv-tokens": "^2.11.1",
 		"@mdi/js": "^7",
@@ -120,7 +120,6 @@
 		"store2": "^2.12.0",
 		"timesync": "^1.0.8",
 		"title-case": "^3.0.2",
-		"treemap-squarify": "^1.0.1",
 		"uuid": "^8.3.0",
 		"vue": "^3.4.27",
 		"vue-docgen-loader": "^2.0.0",
diff --git a/server/auth-router.js b/server/auth-router.js
index 65414fbddf..9b871bf7c9 100644
--- a/server/auth-router.js
+++ b/server/auth-router.js
@@ -129,6 +129,12 @@ export default function authRouter(config = {}) {
 			options.optInComms = cookies.opt_in_comms;
 		}
 
+		// Badge Experiment MP-387
+		if (req.query.earnBadge) {
+			options.earn_badge = true;
+			options.login_hint = 'signUp';
+		}
+
 		info(`LoginUI: attempt login, session id:${req.sessionID}, cookie:${getSyncCookie(req)}, done url:${req.query.doneUrl}`); // eslint-disable-line max-len
 		passport.authenticate('auth0', options)(req, res, next);
 	});
diff --git a/src/components/Charts/PieChartFigure.vue b/src/components/Charts/PieChartFigure.vue
deleted file mode 100644
index faa2ead26e..0000000000
--- a/src/components/Charts/PieChartFigure.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-	<figure
-		class="pie-chart tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-justify-center tw-gap-2"
-		@mouseleave="activeSlice = null"
-	>
-		<!-- pie chart -->
-		<div class="tw-relative tw-h-full">
-			<div v-if="loading" class="pie-placeholder tw-h-full tw-p-2.5">
-				<div class="tw-overflow-hidden tw-rounded-full tw-h-full">
-					<kv-loading-placeholder />
-				</div>
-			</div>
-			<svg
-				v-else
-				class="tw-h-full"
-				viewBox="0 0 32 32"
-				xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-			>
-				<path
-					v-for="(slice, index) in slices"
-					:key="index"
-					class="tw-origin-center tw-transition-transform"
-					:style="activeSlice === slice ? { transform: 'scale(1.1)' } : {}"
-					:d="slice.path"
-					:stroke="slice.color"
-					:stroke-width="lineWidth"
-					fill="none"
-					@mouseenter="activeSlice = slice"
-					@click="activeSlice = slice"
-				/>
-			</svg>
-			<!-- active slice -->
-			<div
-				v-if="activeSlice"
-				class="
-					tw-absolute tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2
-					tw-flex tw-flex-col tw-items-center tw-text-center"
-				style="max-width: 8.5rem;"
-			>
-				<div class="tw-font-medium tw-line-clamp-4">
-					{{ activeSlice.label }}
-				</div>
-				<div>
-					{{ activeSlice.value }} ({{ activeSlicePercent }})
-				</div>
-			</div>
-		</div>
-		<!-- key -->
-		<div style="width: 14rem; height: 85%;" class="tw-flex tw-flex-col tw-justify-between">
-			<ol class="tw-pl-4 md:tw-pl-0">
-				<li
-					v-for="(slice, index) in slices.slice(pageIndex * slicesPerPage, (pageIndex + 1) * slicesPerPage)"
-					:key="index"
-					@mouseenter="activeSlice = slice"
-					@click="activeSlice = slice"
-					class="tw-flex tw-items-center"
-				>
-					<div
-						class="tw-w-2 tw-h-2 tw-mr-1 tw-rounded-full tw-flex-none"
-						:style="{ backgroundColor: slice.color }"
-					></div>
-					<span class="tw-truncate">
-						{{ slice.label }}
-					</span>
-				</li>
-			</ol>
-			<!-- paging controls -->
-			<div class="tw-flex tw-justify-center md:tw-justify-start" v-if="pageCount > 1">
-				<button
-					:disabled="pageIndex === 0"
-					class="tw-font-medium tw-p-0.5 disabled:tw-opacity-low"
-					@click="prevPage"
-				>
-					&lt;
-				</button>
-				{{ pageIndex + 1 }} / {{ pageCount }}
-				<button
-					:disabled="pageIndex === pageCount - 1"
-					class="tw-font-medium tw-p-0.5 disabled:tw-opacity-low"
-					@click="nextPage"
-				>
-					&gt;
-				</button>
-			</div>
-		</div>
-	</figure>
-</template>
-
-<script>
-import numeral from 'numeral';
-import Alea from '#src/util/experiment/Alea';
-import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
-
-// convenience function to get point on circumference of a given circle (from https://codepen.io/grieve/pen/xwGMJp)
-function circumPointFromAngle(cx, cy, r, a) {
-	return [
-		cx + r * Math.cos(a),
-		cy + r * Math.sin(a)
-	];
-}
-
-export default {
-	name: 'PieChartFigure',
-	props: {
-		loading: {
-			type: Boolean,
-			default: true,
-		},
-		values: {
-			type: Array,
-			default: () => ([]),
-		},
-	},
-	components: {
-		KvLoadingPlaceholder,
-	},
-	data() {
-		return {
-			svgSize: 32,
-			lineWidth: 5,
-			activeSlice: null,
-			pageIndex: 0,
-			slicesPerPage: 10,
-		};
-	},
-	computed: {
-		activeSlicePercent() {
-			return this.activeSlice ? numeral(this.activeSlice.percent).format('0.00%') : '';
-		},
-		radius() {
-			return (this.svgSize / 2) - (this.lineWidth / 2) - 2;
-		},
-		center() {
-			return this.svgSize / 2;
-		},
-		slices() {
-			const slices = [];
-			// center point
-			const cX = this.center;
-			const cY = cX;
-			// radius
-			const r = this.radius;
-			// starting angle
-			let start = -0.25;
-			// loop through each value and create a pie slice path
-			for (let i = 0; i < this.values.length; i += 1) {
-				const value = this.values[i];
-				const end = start + value.percent;
-				const [startX, startY] = circumPointFromAngle(cX, cY, r, start * Math.PI * 2);
-				const [endX, endY] = circumPointFromAngle(cX, cY, r, end * Math.PI * 2);
-				const largeArc = value.percent > 0.5 ? 1 : 0;
-				// Draw just the outer arc of the slice
-				const path = `M ${startX} ${startY} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY}`;
-				slices.push({
-					...value,
-					path,
-					color: this.pickColor(i),
-				});
-				start = end;
-			}
-			return slices;
-		},
-		pageCount() {
-			return Math.ceil(this.slices.length / this.slicesPerPage);
-		},
-	},
-	methods: {
-		pickColor(index) {
-			const rng = new Alea('loans', index, 'kiva');
-			let color = '#';
-			for (let i = 0; i < 3; i += 1) {
-				color += Math.floor(rng() * 256).toString(16).padStart(2, '0');
-			}
-			return color;
-		},
-		prevPage() {
-			if (this.pageIndex > 0) {
-				this.pageIndex -= 1;
-			}
-		},
-		nextPage() {
-			if (this.pageIndex < this.pageCount - 1) {
-				this.pageIndex += 1;
-			}
-		},
-	},
-};
-</script>
-
-<style lang="postcss" scoped>
-.pie-chart {
-	height: 40rem;
-	@screen md {
-		height: 20rem;
-	}
-}
-
-.pie-placeholder {
-	width: 20rem;
-}
-</style>
diff --git a/src/components/Charts/TreeMapFigure.vue b/src/components/Charts/TreeMapFigure.vue
deleted file mode 100644
index 91582c1127..0000000000
--- a/src/components/Charts/TreeMapFigure.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<template>
-	<figure class="treemap-figure tw-relative">
-		<!-- treemap -->
-		<div
-			v-for="(block, index) in blocks"
-			:key="`block-${index}`"
-			class="tw-absolute"
-			:style="blockPositionStyles(block)"
-		>
-			<kv-loading-placeholder v-if="loading" style="width: calc(100% - 0.25rem); height: calc(100% - 0.25rem);" />
-			<p
-				v-if="!loading"
-				class="tw-rounded-sm tw-box-border tw-overflow-hidden tw-text-small"
-				:class="colorClasses(index)"
-				style="width: calc(100% - 0.25rem); height: calc(100% - 0.25rem);"
-				@mouseenter="setHoverBlock(block)"
-			>
-				<span class="tw-block tw-px-1 tw-py-0.5 tw-truncate">
-					{{ block.data.label }} {{ block.data.percent }}
-				</span>
-			</p>
-		</div>
-		<!-- tooltip -->
-		<div
-			ref="tooltipController"
-			class="tw-absolute"
-			:style="blockPositionStyles(activeBlock)"
-		></div>
-		<kv-tooltip
-			v-if="!loading && tooltipControllerElement"
-			:controller="tooltipControllerElement"
-		>
-			<template #title>
-				{{ activeBlock.data.label }}
-			</template>
-			{{ activeBlock.data.value }} ({{ activeBlock.data.percent }})
-		</kv-tooltip>
-	</figure>
-</template>
-
-<script>
-import _throttle from 'lodash/throttle';
-import numeral from 'numeral';
-import treemap from 'treemap-squarify';
-import KvTooltip from '#src/components/Kv/KvTooltip';
-import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
-import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
-
-const { breakpoints } = kvTokensPrimitives;
-
-export default {
-	name: 'TreeMapFigure',
-	components: {
-		KvLoadingPlaceholder,
-		KvTooltip,
-	},
-	props: {
-		loading: {
-			type: Boolean,
-			default: true,
-		},
-		values: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	data() {
-		return {
-			screenWidth: 0,
-			activeBlock: { data: {} },
-			tooltipControllerElement: null,
-		};
-	},
-	computed: {
-		activeBreakpoints() {
-			return Object.keys(breakpoints)
-				.filter(name => this.screenWidth >= breakpoints[name]);
-		},
-		// Used to determine if blocks should be displayed in landscape or portrait orientation
-		aboveMedium() {
-			return this.activeBreakpoints.includes('md');
-		},
-		// Calculate the blocks of the treemap, but don't apply any formatting
-		rawBlocks() {
-			// Use static blocks when no data is available (either loading or no loans)
-			if (!this.values?.length) {
-				return this.loading ? [
-					{
-						x: 0, y: 0, width: 60, height: 40
-					},
-					{ x: 60, y: 0, height: 40 },
-					{ x: 0, y: 40, width: 30 },
-					{ x: 30, y: 40 },
-				] : [
-					{ x: 0, y: 0, data: { label: 'No loans yet' } }
-				];
-			}
-
-			// Calculate treemap blocks using canvas size 100x100 to easily translate to percentages
-			const blocks = treemap.getTreemap({
-				data: this.values,
-				width: 100,
-				height: 100,
-			});
-
-			// Blocks smaller than 8% in either dimension will not display well,
-			// so combine them into one large 'Other' block
-			// If we only have 1 small block though, don't make the 'Other' block
-			const tooSmall = blocks.filter(block => block.width <= 8 || block.height <= 8);
-			if (tooSmall.length === 1) return blocks;
-
-			const bigBlocks = blocks.filter(block => block.width > 8 && block.height > 8);
-			return [...bigBlocks, this.reduceBlocks(tooSmall)];
-		},
-		// This is the array that is iterated over in the template
-		blocks() {
-			return this.rawBlocks.map(block => {
-				const {
-					data, x, y, width, height
-				} = block ?? {};
-				const { percent } = data ?? {};
-
-				return {
-					data: {
-						...data,
-						percent: numeral(percent).format('0[.]0%'),
-					},
-					// flip x/y when going between small (portrait) and medium (landscape) screens
-					x: this.aboveMedium ? x : y,
-					y: this.aboveMedium ? y : x,
-					width: this.aboveMedium ? width : height,
-					height: this.aboveMedium ? height : width,
-				};
-			});
-		},
-	},
-	methods: {
-		// Used by the p elements in the main v-for loop to determine background and text color
-		colorClasses(index) {
-			const classes = [];
-			const total = this.blocks?.length ?? 1;
-
-			// background
-			const size = (10 - Math.round((index / total) * 9)) * 100;
-			classes.push(size === 600 ? 'tw-bg-brand' : `tw-bg-brand-${size}`);
-
-			// text
-			classes.push(size > 700 ? 'tw-text-white' : 'tw-text-black');
-
-			return classes;
-		},
-		// Used by the divs in the main v-for for block positions and the tooltip controller div to match positions
-		// with the current active block
-		blockPositionStyles(block) {
-			return {
-				left: `${block.x}%`,
-				top: `${block.y}%`,
-				width: block.width ? `${block.width}%` : null,
-				height: block.height ? `${block.height}%` : null,
-				right: block.width ? null : '0',
-				bottom: block.height ? null : '0',
-			};
-		},
-		// Combine all small blocks into a single 'Other' block that will be at the bottom right of the figure.
-		reduceBlocks(blocks) {
-			return blocks?.reduce((other, block) => {
-				/* eslint-disable no-param-reassign */
-				// Use the smallest x for the overall x
-				if (block.x < other.x) {
-					other.x = block.x;
-				}
-				// Use the smallest y for the overall y
-				if (block.y < other.y) {
-					other.y = block.y;
-				}
-				// Sum up all values and percents
-				other.data.value += block.data.value;
-				other.data.percent += block.data.percent;
-				return other;
-				/* eslint-ensable no-param-reassign */
-			}, {
-				x: 100,
-				y: 100,
-				width: 0,
-				height: 0,
-				data: {
-					label: 'Other',
-					value: 0,
-					percent: 0,
-				},
-			}) ?? [];
-		},
-		// Sets the block that will be used to position the tooltip and change the info displayed in the tooltip
-		setHoverBlock(block) {
-			this.activeBlock = block;
-		},
-	},
-	mounted() {
-		this.screenWidth = window.innerWidth;
-		window.addEventListener('resize', _throttle(() => {
-			this.screenWidth = window.innerWidth;
-		}, 200));
-
-		// Used by KvTooltip/KvPopper to position the tooltip
-		if (this.$refs?.tooltipController) {
-			this.tooltipControllerElement = this.$refs.tooltipController;
-		}
-	},
-};
-</script>
-
-<style lang="postcss" scoped>
-.treemap-figure {
-	height: 30rem;
-
-	/* account for every block having a 0.25rem right margin */
-	width: calc(100% + 0.25rem);
-	margin-right: -0.25rem;
-}
-
-@screen md {
-	.treemap-figure {
-		height: 20rem;
-	}
-}
-</style>
diff --git a/src/components/LenderProfile/LenderBadges.vue b/src/components/LenderProfile/LenderBadges.vue
index 3730b00ef6..f046f43385 100644
--- a/src/components/LenderProfile/LenderBadges.vue
+++ b/src/components/LenderProfile/LenderBadges.vue
@@ -1,12 +1,12 @@
 <template>
 	<async-lender-section @visible="() => isLoading = false">
 		<section v-if="completedAchievements.length > 0">
-			<h4
+			<h2
 				v-if="!isLoading"
 				class="data-hj-suppress"
 			>
 				{{ badgesTitle }}
-			</h4>
+			</h2>
 			<kv-loading-placeholder
 				v-else
 				style="height: 30px; width: 250px;"
diff --git a/src/components/LenderProfile/LenderDedicationsList.vue b/src/components/LenderProfile/LenderDedicationsList.vue
index acaabd488a..62c676b47b 100644
--- a/src/components/LenderProfile/LenderDedicationsList.vue
+++ b/src/components/LenderProfile/LenderDedicationsList.vue
@@ -2,9 +2,9 @@
 	<async-lender-section @visible="fetchLenderDedications">
 		<section v-if="lenderDedications.length > 0" class="tw-my-8" id="lender-dedications">
 			<div v-if="!isLoading">
-				<h4 class="data-hj-suppress tw-mb-1">
+				<h2 class="data-hj-suppress tw-mb-1">
 					{{ lenderDedicationsTitle }}
-				</h4>
+				</h2>
 				<p class="tw-mb-2">
 					{{ showedDedications }}
 				</p>
diff --git a/src/components/LenderProfile/LenderInviteesList.vue b/src/components/LenderProfile/LenderInviteesList.vue
index 9798a71aca..08a70e474d 100644
--- a/src/components/LenderProfile/LenderInviteesList.vue
+++ b/src/components/LenderProfile/LenderInviteesList.vue
@@ -2,9 +2,9 @@
 	<async-lender-section @visible="fetchLenderInvitees">
 		<section v-if="lenderInvitees.length > 0" class="tw-my-8" id="lender-invitees">
 			<div v-if="!isLoading">
-				<h4 class="data-hj-suppress tw-mb-1">
+				<h2 class="data-hj-suppress tw-mb-1">
 					{{ lenderInviteesTitle }}
-				</h4>
+				</h2>
 				<p class="tw-mb-2">
 					{{ showedInvitees }}
 				</p>
diff --git a/src/components/LenderProfile/LenderLoansList.vue b/src/components/LenderProfile/LenderLoansList.vue
index b8731082ac..2e8e307839 100644
--- a/src/components/LenderProfile/LenderLoansList.vue
+++ b/src/components/LenderProfile/LenderLoansList.vue
@@ -1,9 +1,9 @@
 <template>
 	<section v-if="lenderLoans.length > 0" class="tw-my-8" id="lender-loans">
 		<div v-if="totalCount > 0">
-			<h4 class="data-hj-suppress tw-mb-1">
+			<h2 class="data-hj-suppress tw-mb-1">
 				{{ lenderLoansTitle }}
-			</h4>
+			</h2>
 			<p class="tw-mb-2">
 				{{ showedLoans }}
 			</p>
diff --git a/src/components/LenderProfile/LenderMap.vue b/src/components/LenderProfile/LenderMap.vue
index 8d237d3f22..19f1f82a06 100644
--- a/src/components/LenderProfile/LenderMap.vue
+++ b/src/components/LenderProfile/LenderMap.vue
@@ -11,9 +11,9 @@
 				/>
 			</div>
 			<div v-else>
-				<h4 class="data-hj-suppress tw-mb-2">
+				<h2 class="data-hj-suppress tw-mb-2">
 					{{ lenderMapTitle }}
-				</h4>
+				</h2>
 				<kv-map
 					class="
 						tw-rounded
@@ -111,6 +111,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+		lenderStats: {
+			type: Object,
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -125,7 +129,7 @@ export default {
 				: 'Lending Activity by Country';
 		},
 		countriesData() {
-			return (this.lenderInfo?.statsPerCountry?.values ?? []).map(stat => ({
+			return (this.lenderStats?.statsPerCountry?.values ?? []).map(stat => ({
 				label: stat.country?.name ?? '',
 				value: stat.loanCount ?? '',
 				lat: stat.country?.geocode?.latitude ?? 0,
diff --git a/src/components/LenderProfile/LenderProfileWrapper.vue b/src/components/LenderProfile/LenderProfileWrapper.vue
index bc5a4cb258..36ce0ebd75 100644
--- a/src/components/LenderProfile/LenderProfileWrapper.vue
+++ b/src/components/LenderProfile/LenderProfileWrapper.vue
@@ -32,16 +32,21 @@
 		/>
 
 		<lender-stats
-			:lender-info="lenderInfo"
+			:public-id="publicId"
+			:lender-stats="lenderStats"
+			@get-lender-stats="fetchLenderStats"
 		/>
 
 		<lender-map
 			:lender-info="lenderInfo"
+			:lender-stats="lenderStats"
 		/>
 	</div>
 </template>
 
 <script>
+import lenderStatsQuery from '#src/graphql/query/lenderStats.graphql';
+import logReadQueryError from '#src/util/logReadQueryError';
 import LenderSummary from '#src/components/LenderProfile/LenderSummary';
 import LenderLoansList from '#src/components/LenderProfile/LenderLoansList';
 import LenderStats from '#src/components/LenderProfile/LenderStats';
@@ -53,6 +58,7 @@ import LenderMap from '#src/components/LenderProfile/LenderMap';
 
 export default {
 	name: 'LenderProfileWrapper',
+	inject: ['apollo', 'cookieStore'],
 	props: {
 		publicId: {
 			type: String,
@@ -72,6 +78,11 @@ export default {
 			default: () => ([]),
 		},
 	},
+	data() {
+		return {
+			lenderStats: {},
+		};
+	},
 	components: {
 		LenderSummary,
 		LenderLoansList,
@@ -82,5 +93,21 @@ export default {
 		LenderDedicationsList,
 		LenderMap,
 	},
+	methods: {
+		async fetchLenderStats() {
+			try {
+				const { data } = await this.apollo.query({
+					query: lenderStatsQuery,
+					variables: {
+						publicId: this.publicId,
+					},
+				});
+
+				this.lenderStats = data.community?.lender ?? {};
+			} catch (e) {
+				logReadQueryError(e, 'LenderStats lenderStatsQuery');
+			}
+		},
+	},
 };
 </script>
diff --git a/src/components/LenderProfile/LenderStats.vue b/src/components/LenderProfile/LenderStats.vue
index 7a6c1e2dbc..31bf1bbbcd 100644
--- a/src/components/LenderProfile/LenderStats.vue
+++ b/src/components/LenderProfile/LenderStats.vue
@@ -1,5 +1,5 @@
 <template>
-	<async-lender-section @visible="() => isLoading = false">
+	<async-lender-section @visible="$emit('get-lender-stats')">
 		<section class="tw-my-8">
 			<div v-if="isLoading">
 				<kv-loading-placeholder
@@ -11,9 +11,9 @@
 				/>
 			</div>
 			<div v-else>
-				<h4 class="tw-mb-2">
+				<h2 class="tw-mb-2">
 					Portfolio distribution
-				</h4>
+				</h2>
 				<stats-table
 					class="lender-stats"
 					:location-stats="locationStats"
@@ -35,11 +35,9 @@ import AsyncLenderSection from './AsyncLenderSection';
 
 export default {
 	name: 'LenderStats',
-	inject: ['apollo', 'cookieStore'],
 	props: {
-		lenderInfo: {
+		lenderStats: {
 			type: Object,
-			default: () => ({}),
 			required: true,
 		},
 	},
@@ -66,35 +64,36 @@ export default {
 	},
 	computed: {
 		locationStats() {
-			return this.statsWithPercent((this.lenderInfo?.statsPerCountry?.values ?? []).map(stat => ({
+			return this.statsWithPercent((this.lenderStats?.statsPerCountry?.values ?? []).map(stat => ({
 				label: stat.country.name,
 				value: stat.loanCount,
 			})));
 		},
 		genderStats() {
-			return this.statsWithPercent((this.lenderInfo?.statsPerGender?.values ?? []).map(stat => ({
+			return this.statsWithPercent((this.lenderStats?.statsPerGender?.values ?? []).map(stat => ({
 				label: `${stat.gender.charAt(0).toUpperCase()}${stat.gender.slice(1)}`,
 				value: stat.loanCount,
 			})));
 		},
 		sectorStats() {
-			return this.statsWithPercent((this.lenderInfo?.statsPerSector?.values ?? []).map(stat => ({
+			return this.statsWithPercent((this.lenderStats?.statsPerSector?.values ?? []).map(stat => ({
 				label: stat.sector.name,
 				value: stat.loanCount,
 			})));
 		},
 		partnerStats() {
-			return this.statsWithPercent((this.lenderInfo?.statsPerPartner?.values ?? []).map(stat => ({
+			return this.statsWithPercent((this.lenderStats?.statsPerPartner?.values ?? []).map(stat => ({
 				label: stat.partner?.name ?? 'No partner',
 				value: stat.loanCount,
 			})));
 		},
-	}
+	},
+	watch: {
+		lenderStats() {
+			if (Object.keys(this.lenderStats).length !== 0) {
+				this.isLoading = false;
+			}
+		},
+	},
 };
 </script>
-
-<style lang="postcss" scoped>
-:deep(.lender-stats > div button) {
-	@apply tw-text-h5;
-}
-</style>
diff --git a/src/components/LenderProfile/LenderSummary.vue b/src/components/LenderProfile/LenderSummary.vue
index 586d99a1b8..8393abe408 100644
--- a/src/components/LenderProfile/LenderSummary.vue
+++ b/src/components/LenderProfile/LenderSummary.vue
@@ -1,8 +1,8 @@
 <template>
 	<div>
-		<h3 class="data-hj-suppress">
+		<h1 class="data-hj-suppress">
 			Kiva Lender {{ lenderName }}
-		</h3>
+		</h1>
 		<div class="tw-flex tw-flex-col md:tw-flex-row tw-items-start tw-gap-y-2 md:tw-gap-x-8 tw-pt-2">
 			<div class="tw-w-full md:tw-basis-1/4 tw-pt-1.5">
 				<kv-material-icon
diff --git a/src/components/LenderProfile/LenderTeamsList.vue b/src/components/LenderProfile/LenderTeamsList.vue
index ddcba94ea2..b650865c8e 100644
--- a/src/components/LenderProfile/LenderTeamsList.vue
+++ b/src/components/LenderProfile/LenderTeamsList.vue
@@ -2,9 +2,9 @@
 	<async-lender-section @visible="fetchLenderTeams">
 		<section v-if="lenderTeams.length > 0" class="tw-my-8" id="lender-teams">
 			<div v-if="!isLoading">
-				<h4 class="data-hj-suppress tw-mb-1">
+				<h2 class="data-hj-suppress tw-mb-1">
 					{{ lenderTeamsTitle }}
-				</h4>
+				</h2>
 				<p class="tw-mb-2">
 					{{ showedTeams }}
 				</p>
diff --git a/src/components/Payment/BraintreeDropInInterface.vue b/src/components/Payment/BraintreeDropInInterface.vue
index b91c07ee63..f1466f0b6a 100644
--- a/src/components/Payment/BraintreeDropInInterface.vue
+++ b/src/components/Payment/BraintreeDropInInterface.vue
@@ -546,4 +546,11 @@ $border-width: 1px;
 		@apply tw-text-base;
 		@apply tw-font-medium;
 	}
+
+	/* Show helper text */
+	#dropin-container .braintree-sheet__container > .braintree-sheet:not(.braintree-card)::before {
+		@apply tw-absolute tw-w-full tw-left-0 tw-top-3.5 tw-font-medium;
+
+		content: 'Click payment method again to continue';
+	}
 </style>
diff --git a/src/components/Stats/StatsTable.vue b/src/components/Stats/StatsTable.vue
index f15858dc65..33fb323e77 100644
--- a/src/components/Stats/StatsTable.vue
+++ b/src/components/Stats/StatsTable.vue
@@ -60,9 +60,9 @@
 </template>
 
 <script>
-import PieChartFigure from '#src/components/Charts/PieChartFigure';
-import TreeMapFigure from '#src/components/Charts/TreeMapFigure';
 import DistributionTable from '#src/pages/Portfolio/ImpactDashboard/DistributionTable';
+import KvPieChart from '@kiva/kv-components/vue/KvPieChart';
+import KvTreeMapChart from '@kiva/kv-components/vue/KvTreeMapChart';
 import KvButton from '@kiva/kv-components/vue/KvButton';
 import KvTab from '@kiva/kv-components/vue/KvTab';
 import KvTabs from '@kiva/kv-components/vue/KvTabs';
@@ -72,7 +72,7 @@ export default {
 	name: 'StatsTable',
 	components: {
 		DistributionTable,
-		PieChartFigure,
+		KvPieChart,
 		KvTab,
 		KvTabs,
 		KvTabPanel,
@@ -125,10 +125,10 @@ export default {
 		chartType() {
 			switch (this.chart) {
 				case 'pie':
-					return PieChartFigure;
+					return KvPieChart;
 				case 'treemap':
 				default:
-					return TreeMapFigure;
+					return KvTreeMapChart;
 			}
 		},
 		inPortfolio() {
diff --git a/src/components/Thanks/Badges/DetailSection.vue b/src/components/Thanks/Badges/DetailSection.vue
new file mode 100644
index 0000000000..38711ae021
--- /dev/null
+++ b/src/components/Thanks/Badges/DetailSection.vue
@@ -0,0 +1,271 @@
+<template>
+	<div class="tw-px-2 tw-relative tw-z-2 tw-text-center">
+		<div class="tw-flex tw-pt-2 tw-pb-4 tw-justify-center tw-cursor-pointer" @click="backToEarnedBadge">
+			<kv-material-icon :icon="mdiChevronLeft" class="tw-w-3 tw-h-3" />
+			<p class="tw-text-center tw-w-full">
+				YOUR BADGES
+			</p>
+		</div>
+		<kv-carousel
+			:embla-options="{ loop: true, align: 'center', startIndex: selectedBadgeIdx }"
+			:is-dotted="true"
+			:in-circle="true"
+			class="badge-carousel"
+			@change="handleChange"
+			ref="badgeCarousel"
+		>
+			<template v-for="badge in badges" #[`slide${badge.id}`] :key="badge.id">
+				<div
+					class="tw-flex tw-flex-col"
+					v-kv-track-event="[
+						'thanks',
+						'click',
+						'choose-a-badge',
+						badge.name
+					]"
+				>
+					<img
+						:src="imageRequire(`${badge.img}.svg`)"
+						class="badge tw-mx-auto"
+						alt="Gift icon"
+					>
+					<h3 v-if="hideBadgeName(badge.id)" class="tw-text-center">
+						{{ badge.name }}
+					</h3>
+				</div>
+			</template>
+		</kv-carousel>
+		<div class="tw-px-1 md:tw-px-8 tw-pt-2">
+			<h2 class="tw-pb-2">
+				{{ selectedName }}
+			</h2>
+			<p class="tw-pb-2">
+				{{ selectedDescription }}
+			</p>
+			<div class="tw-flex tw-flex-col tw-gap-1 tw-text-left">
+				<div :key="goal" v-for="goal in selectedGoals" class="tw-flex tw-gap-1">
+					<kv-material-icon
+						:icon="mdiCheckCircleOutline"
+						class="tw-w-3 tw-h-3 tw-text-gray-300 tw-align-middle"
+					/>
+					<p>{{ goal }}</p>
+				</div>
+			</div>
+		</div>
+		<div class="tw-pt-4">
+			<kv-button
+				class="tw-w-full tw-pb-2"
+				@click="setAsGoal"
+				v-kv-track-event="[
+					'thanks',
+					'click',
+					'set-as-goal',
+					currentBadgeName
+				]"
+			>
+				Set as goal
+			</kv-button>
+			<kv-button
+				v-if="!isGuest"
+				class="tw-w-full no-border"
+				to="/portfolio"
+				variant="secondary"
+				v-kv-track-event="[
+					'thanks',
+					'click',
+					'go-to-my-kiva',
+					`Button seen after seeing ${currentBadgeName} badge`
+				]"
+			>
+				Go to my kiva
+			</kv-button>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mdiChevronLeft, mdiCheckCircleOutline } from '@mdi/js';
+import { gql } from '@apollo/client';
+import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
+import KvButton from '@kiva/kv-components/vue/KvButton';
+import KvCarousel from '@kiva/kv-components/vue/KvCarousel';
+import { metaGlobReader } from '#src/util/importHelpers';
+
+const imageGlob = import.meta.glob('/src/assets/images/thanks-page/badges/*.*', { eager: true, query: '?url' });
+const imageRequire = metaGlobReader(imageGlob, '/src/assets/images/thanks-page/badges/');
+
+export default {
+	name: 'DetailSection',
+	inject: ['apollo', 'cookieStore'],
+	props: {
+		selectedBadgeIdx: {
+			type: Number,
+			default: 0
+		},
+		badges: {
+			type: Array,
+			default: () => ([])
+		},
+		isGuest: {
+			type: Boolean,
+			default: false
+		},
+		userPreferences: {
+			type: Object,
+			default: () => ({})
+		},
+	},
+	components: {
+		KvButton,
+		KvMaterialIcon,
+		KvCarousel,
+	},
+	data() {
+		return {
+			imageRequire,
+			mdiChevronLeft,
+			mdiCheckCircleOutline,
+			currentBadgeIndex: 0,
+		};
+	},
+	computed: {
+		currentBadgeName() {
+			return this.currentBadge?.name ?? '';
+		},
+		currentBadge() {
+			if (this.selectedBadgeIdx && !this.currentBadgeIndex) {
+				return this.badges[this.selectedBadgeIdx];
+			}
+
+			const index = this.currentBadgeIndex > 1 ? this.currentBadgeIndex - 1 : 0;
+			return this.badges[index] ?? null;
+		},
+		selectedName() {
+			return this.currentBadge?.name ?? '';
+		},
+		selectedDescription() {
+			return this.currentBadge?.description ?? '';
+		},
+		selectedGoals() {
+			return this.currentBadge?.goals ?? [];
+		},
+	},
+	mounted() {
+		const badgesNames = this.badges.map(badge => badge.name).join(', ');
+		this.$kvTrackEvent(
+			'thanks',
+			'view',
+			'view-all-badges',
+			badgesNames
+		);
+	},
+	methods: {
+		backToEarnedBadge() {
+			this.$kvTrackEvent('thanks', 'click', 'back-to-earned-badge');
+			this.$emit('back');
+		},
+		handleChange() {
+			const badgeIndex = this.$refs.badgeCarousel.currentIndex + 1;
+			this.currentBadgeIndex = badgeIndex;
+		},
+		hideBadgeName(badgeId) {
+			return badgeId !== this.currentBadge?.id;
+		},
+		async createUserPreferences() {
+			const createUserPreferencesMutation = gql`
+				mutation createUserPreferences($preferences: String) {
+					my {
+						createUserPreferences(userPreferences: {preferences: $preferences}) {
+							id
+							preferences
+						}
+					}
+				}
+			`;
+
+			const createUserPreferences = this.apollo.mutate({
+				mutation: createUserPreferencesMutation,
+				variables: {
+					preferences: '',
+				},
+			});
+			const response = await createUserPreferences;
+
+			return response?.data?.my?.createUserPreferences?.id;
+		},
+		async setAsGoal() {
+			try {
+				let updateUserPreferencesId = this.userPreferences?.id ?? null;
+
+				if (!updateUserPreferencesId) {
+					updateUserPreferencesId = await this.createUserPreferences();
+				}
+				const currentPreferences = this.userPreferences?.preferences ?? {};
+				const preferences = JSON.stringify({ ...currentPreferences, goal: this.currentBadgeName });
+
+				const updateUserPreferencesMutation = gql`
+					mutation UpdateUserPreferences(
+						$updateUserPreferencesId: Int!,
+						$preferences: String
+					) {
+						my {
+							updateUserPreferences(id: $updateUserPreferencesId, userPreferences: {
+								preferences: $preferences
+						}) {
+								id
+								preferences
+							}
+						}
+				}`;
+
+				const updateUserPreferences = this.apollo.mutate({
+					mutation: updateUserPreferencesMutation,
+					variables: {
+						updateUserPreferencesId,
+						preferences,
+					},
+				});
+
+				const response = await updateUserPreferences;
+				if (response.errors) {
+					this.$showTipMsg('There was a problem saving your goal', 'error');
+
+					throw new Error(
+						response?.errors?.[0]?.extensions?.code
+						|| response?.errors?.[0]?.message
+					);
+				} else if (this.isGuest) {
+					const doneUrl = encodeURIComponent('/portfolio?goal_saved=true');
+					window.location = `/ui-login?earnBadge=1&doneUrl=${doneUrl}`;
+				} else {
+					this.$router.push({ path: '/portfolio', query: { goal_saved: true } });
+				}
+			} catch (error) {
+				console.error(error);
+			}
+		},
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+
+.no-border :deep(span) {
+	@apply tw-bg-transparent tw-border-0;
+}
+
+.badge {
+	width: 164px;
+	height: 164px;
+}
+
+.badge-carousel :deep(.cirle-slide) {
+	flex: 0 0 36%;
+	@apply tw-mx-auto tw-flex tw-items-end tw-justify-center;
+}
+
+.badge-carousel :deep(.circle-carousel) {
+	@apply tw-mx-auto;
+}
+
+</style>
diff --git a/src/components/Thanks/Badges/DiscoverSection.vue b/src/components/Thanks/Badges/DiscoverSection.vue
index b1d39f09bb..01705ddf37 100644
--- a/src/components/Thanks/Badges/DiscoverSection.vue
+++ b/src/components/Thanks/Badges/DiscoverSection.vue
@@ -19,7 +19,7 @@
 			"
 		>
 			<div
-				v-for="badge in randomSortedBadges"
+				v-for="(badge, idx) in badges"
 				:key="badge.id"
 				class="badge-card"
 				v-kv-track-event="[
@@ -28,6 +28,7 @@
 					'choose-a-badge',
 					badge.name
 				]"
+				@click="() => selectBadge(idx)"
 			>
 				<img
 					:src="images(`${badge.img}.svg`)"
@@ -74,6 +75,10 @@ export default {
 			type: String,
 			default: ''
 		},
+		badges: {
+			type: Array,
+			default: () => ([])
+		}
 	},
 	components: {
 		KvButton,
@@ -83,48 +88,10 @@ export default {
 		return {
 			images,
 			mdiChevronLeft,
-			defaultSortBadges: [
-				{
-					id: 1,
-					name: this.selectedLoanRegion,
-					img: 'region'
-				},
-				{
-					id: 2,
-					name: 'Climate',
-					img: 'climate'
-				},
-				{
-					id: 3,
-					name: 'Women',
-					img: 'women'
-				},
-				{
-					id: 4,
-					name: 'U.S. Entrepreneurs',
-					img: 'entrepreneurs'
-				},
-				{
-					id: 5,
-					name: 'Refugees',
-					img: 'refugees'
-				},
-				{
-					id: 6,
-					name: 'Most Vulnerable',
-					img: 'most-vulnerable'
-				}
-			],
 		};
 	},
-	computed: {
-		randomSortedBadges() {
-			const badges = [...this.defaultSortBadges];
-			return badges.sort(() => Math.random() - 0.5);
-		},
-	},
 	mounted() {
-		const badgesNames = this.randomSortedBadges.map(badge => badge.name).join(', ');
+		const badgesNames = this.badges.map(badge => badge.name).join(', ');
 		this.$kvTrackEvent(
 			'thanks',
 			'view',
@@ -135,8 +102,11 @@ export default {
 	methods: {
 		backToEarnedBadge() {
 			this.$kvTrackEvent('thanks', 'click', 'back-to-earned-badge');
-			this.$emit('back-to-earned-badge');
+			this.$emit('back');
 		},
+		selectBadge(idx) {
+			this.$emit('select-badge', idx);
+		}
 	}
 };
 </script>
diff --git a/src/components/Thanks/Badges/FirstScreen.vue b/src/components/Thanks/Badges/FirstScreen.vue
new file mode 100644
index 0000000000..78ec93b3dd
--- /dev/null
+++ b/src/components/Thanks/Badges/FirstScreen.vue
@@ -0,0 +1,505 @@
+<template>
+	<div
+		class="tw-relative tw-text-center md:tw-rounded-t hide-for-print"
+	>
+		<div
+			class="tw-pt-4 tw-pb-5 bg-gradient"
+		>
+			<h1
+				class="tw-mb-1 tw-transition-all tw-duration-1000 tw-ease-in-out tw-relative tw-z-2"
+				:class="{
+					'tw-text-black': badgeBlurRevealCompleted,
+					'tw-text-white': !badgeBlurRevealCompleted
+				}"
+			>
+				{{ headerTitle }}
+			</h1>
+			<p
+				class="tw-text-subhead tw-px-3 md:tw-px-8
+									tw-transition-all tw-duration-1000 tw-ease-in-out"
+				:class="{
+					'tw-relative tw-z-2 tw-text-black': badgeBlurRevealCompleted,
+					'tw-text-white': !badgeBlurRevealCompleted
+				}"
+			>
+				{{ headerCopy }}
+			</p>
+			<div class="tw-relative tw-mt-3" :class="{'tw-relative': !badgeBlurRevealing}">
+				<div class="badge-container" :class="{'tw-flex-col': badgeBlurRevealing}">
+					<div class="tw-relative" :class="{'tw-z-1': badgeBlurRevealing} ">
+						<div
+							:class="{'tw-hidden': !badgeBlurRevealCompleted}"
+							class="tw-absolute tw-h-full tw-z-docked tw-left-1/2 -tw-translate-x-1/2"
+						>
+							<animated-stars :style="{ minWidth: '14rem'}" class="tw-h-full" />
+						</div>
+
+						<img
+							:class="{
+								'blurred': isBlurred,
+								'wiggle': wiggle,
+								'tw-z-2': badgeBlurRevealing
+							}"
+							:src="imageRequire('equity-badge.svg')"
+							class="badge"
+							alt="Gift icon"
+						>
+					</div>
+
+					<kv-button
+						@click="toggleBlur"
+						variant="secondary"
+						class="reveal-button"
+						:class="{'tw-hidden': badgeBlurRevealing}"
+						v-kv-track-event="[
+							'thanks',
+							'click',
+							'reveal-badge',
+						]"
+					>
+						<span class="tw-flex tw-items-center tw-gap-1">
+							<img
+								:src="imageRequire('gift.svg')"
+								class="tw-w-3 tw-h-3"
+								alt="Gift icon"
+							>
+							{{ revealBtnCta }}
+						</span>
+					</kv-button>
+				</div>
+			</div>
+		</div>
+		<div
+			v-if="badgeBlurRevealCompleted" class="tw-absolute tw-z-2 tw-px-3"
+		>
+			<p class="tw-pb-4">
+				<!-- eslint-disable-next-line max-len -->
+				You are a hero! Thanks to your loan, we are one step closer to a more financially inclusive world.
+			</p>
+			<kv-button
+				class="tw-w-full tw-mb-2"
+				@click="$emit('show-discover-badges')"
+				v-kv-track-event="[
+					'thanks',
+					'click',
+					'discover-more-badges',
+				]"
+			>
+				Discover more badges
+			</kv-button>
+			<div>
+				<kv-button
+					v-if="!isGuest"
+					class="tw-w-full no-border"
+					to="/portfolio"
+					variant="secondary"
+					v-kv-track-event="[
+						'thanks',
+						'click',
+						'go-to-my-kiva',
+						'Button seen after badge reveal'
+					]"
+				>
+					Go to my kiva
+				</kv-button>
+				<div
+					v-else
+					class="option-box"
+					:class="{'open' : openCreateAccount}"
+					@click="() => openCreateAccount = !openCreateAccount"
+					v-kv-track-event="[
+						'thanks',
+						'click',
+						'open-account-creation-drawer',
+					]"
+				>
+					<p class="tw-font-medium">
+						Create your account
+					</p>
+					<kv-material-icon
+						:icon="mdiChevronDown"
+						class="expandable-button"
+						:class="{'tw-rotate-180' : openCreateAccount}"
+					/>
+				</div>
+				<kv-expandable
+					v-show="openCreateAccount"
+					easing="ease-in-out"
+				>
+					<div class="tw-py-2">
+						<h2>Before you go!</h2>
+						<!-- eslint-disable-next-line max-len -->
+						<p>Finish setting up your account to track and relend your money as you are paid back.</p>
+						<guest-account-creation
+							class="tw-pt-3 account-creation"
+							event-category="thanks"
+							event-label="open-account-creation-drawer"
+						/>
+					</div>
+				</kv-expandable>
+			</div>
+		</div>
+		<div v-else>
+			<div
+				class="secondary-container"
+			>
+				<h3 class="tw-text-center tw-pt-1">
+					You are now part of {{ borrowerName }}'s journey! Here's what's next:
+				</h3>
+				<loan-next-steps
+					class="tw-mb-5"
+					:weeks-to-repay="weeksToRepay"
+				/>
+				<div class="tw-mb-2 hide-for-print">
+					<div v-if="!isGuest">
+						<kv-button
+							class="tw-w-full ghost-button"
+							to="/portfolio"
+							variant="secondary"
+							v-kv-track-event="[
+								'thanks',
+								'click',
+								'go-to-my-kiva',
+							]"
+						>
+							Go to my kiva
+						</kv-button>
+					</div>
+					<div
+						v-else
+						class="option-box"
+						:class="{'open' : openCreateAccount}"
+						@click="() => openCreateAccount = !openCreateAccount"
+						v-kv-track-event="[
+							'thanks',
+							'click',
+							'open-account-creation-drawer',
+						]"
+					>
+						<p class="tw-font-medium">
+							Create your account
+						</p>
+						<kv-material-icon
+							:icon="mdiChevronDown"
+							class="expandable-button"
+							:class="{'tw-rotate-180' : openCreateAccount}"
+						/>
+					</div>
+					<kv-expandable
+						v-show="openCreateAccount"
+						easing="ease-in-out"
+					>
+						<div class="tw-py-2">
+							<h2>Before you go!</h2>
+							<!-- eslint-disable-next-line max-len -->
+							<p>Finish setting up your account to track and relend your money as you are paid back.</p>
+							<guest-account-creation
+								class="tw-pt-3 account-creation"
+								event-category="thanks"
+								event-label="open-account-creation-drawer"
+							/>
+						</div>
+					</kv-expandable>
+				</div>
+			</div>
+			<div class="tw-pt-2 tw-pb-5 tw-border-t tw-px-3 md:tw-px-8" style="border-top-color: #ECE4D5;">
+				<div class="tw-mb-2">
+					<!-- eslint-disable-next-line max-len -->
+					<div
+						class="option-box hide-for-print"
+						:class="{'open' : openOrderConfirmation}"
+						@click="() => openOrderConfirmation = !openOrderConfirmation"
+						v-kv-track-event="[
+							'thanks',
+							'click',
+							'open-order-confirmation-drawer',
+						]"
+					>
+						<p class="tw-font-medium">
+							Show previous loan details
+						</p>
+						<kv-material-icon
+							:icon="mdiChevronDown"
+							class="expandable-button"
+							:class="{'tw-rotate-180' : openOrderConfirmation}"
+						/>
+					</div>
+					<kv-expandable
+						v-show="openOrderConfirmation"
+						easing="ease-in-out"
+					>
+						<div class="tw-py-2">
+							<checkout-receipt
+								v-if="receipt"
+								:lender="lender"
+								:receipt="receipt"
+							/>
+						</div>
+					</kv-expandable>
+				</div>
+				<div class="hide-for-print">
+					<div
+						class="option-box"
+						:class="{'open' : openShareModule}"
+						@click="() => openShareModule = !openShareModule"
+						v-kv-track-event="[
+							'thanks',
+							'click',
+							'open-share-drawer',
+						]"
+					>
+						<p class="tw-font-medium">
+							Share
+						</p>
+						<kv-material-icon
+							:icon="mdiChevronDown"
+							class="expandable-button"
+							:class="{'tw-rotate-180' : openShareModule}"
+						/>
+					</div>
+					<kv-expandable
+						v-show="openShareModule"
+						easing="ease-in-out"
+					>
+						<div class="tw-py-2">
+							<social-share-v2
+								v-if="receipt"
+								class="social-share"
+								:lender="lender"
+								:loans="loans"
+							/>
+						</div>
+					</kv-expandable>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { addMonths, differenceInWeeks } from 'date-fns';
+import { mdiChevronDown } from '@mdi/js';
+import CheckoutReceipt from '#src/components/Checkout/CheckoutReceipt';
+import SocialShareV2 from '#src/components/Checkout/SocialShareV2';
+import GuestAccountCreation from '#src/components/Forms/GuestAccountCreation';
+import AnimatedStars from '#src/components/Thanks/AnimatedStars';
+import KvExpandable from '#src/components/Kv/KvExpandable';
+import LoanNextSteps from '#src/components/Thanks/LoanNextSteps';
+import KvButton from '@kiva/kv-components/vue/KvButton';
+import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
+import { metaGlobReader } from '#src/util/importHelpers';
+
+const imageGlob = import.meta.glob('/src/assets/images/thanks-page/*.*', { eager: true, query: '?url' });
+const imageRequire = metaGlobReader(imageGlob, '/src/assets/images/thanks-page/');
+
+export default {
+	name: 'FirstScreen',
+	components: {
+		LoanNextSteps,
+		KvExpandable,
+		CheckoutReceipt,
+		SocialShareV2,
+		GuestAccountCreation,
+		AnimatedStars,
+		KvButton,
+		KvMaterialIcon,
+	},
+	props: {
+		receipt: {
+			type: Object,
+			default: () => ({})
+		},
+		lender: {
+			type: Object,
+			default: () => ({})
+		},
+		loans: {
+			type: Array,
+			default: () => ([])
+		},
+		isGuest: {
+			type: Boolean,
+			default: false
+		},
+		selectedLoan: {
+			type: Object,
+			default: () => ({})
+		},
+	},
+	data() {
+		return {
+			mdiChevronDown,
+			imageRequire,
+			isBlurred: true,
+			isMobileLayout: false,
+			wiggle: false,
+			badgeBlurRevealing: false,
+			badgeBlurRevealCompleted: false,
+			openCreateAccount: false,
+			openOrderConfirmation: false,
+			openShareModule: false,
+		};
+	},
+	inject: ['apollo', 'cookieStore'],
+	computed: {
+		borrowerName() {
+			return this.selectedLoan?.name ?? '';
+		},
+		weeksToRepay() {
+			const date = this.selectedLoan?.terms?.expectedPayments?.[0]?.dueToKivaDate ?? null;
+			const today = new Date();
+			if (date) {
+				// Get the number of weeks between the first repayment date (in the future) and now
+				return `${differenceInWeeks(Date.parse(date), today)} weeks`;
+			}
+
+			// Calculating a possible range of weeks between the planned expiration date and a month after
+			const expDate = Date.parse(this.selectedLoan?.plannedExpirationDate);
+			const minDate = differenceInWeeks(addMonths(today, 1), today);
+			const maxDate = differenceInWeeks(addMonths(expDate, 1), today);
+
+			if (minDate === maxDate) {
+				return `${minDate} weeks`;
+			}
+
+			return `${minDate} - ${maxDate} weeks`;
+		},
+		headerTitle() {
+			return this.badgeBlurRevealCompleted ? 'Congrats!' : 'Success!';
+		},
+		headerCopy() {
+			return this.badgeBlurRevealCompleted
+				? 'You earned your first badge'
+				: 'Celebrate your first loan with a special gift. 🙌';
+		},
+		revealBtnCta() {
+			return `${this.isMobileLayout ? 'Tap' : 'Click'} to reveal`;
+		},
+	},
+	methods: {
+		toggleBlur() {
+			this.$emit('show-new-bg');
+			this.isBlurred = !this.isBlurred;
+			if (!this.isBlurred) {
+				this.badgeBlurRevealing = true;
+			} else {
+				this.badgeBlurRevealing = false;
+			}
+
+			setTimeout(() => {
+				this.badgeBlurRevealCompleted = true;
+			}, 1000);
+		},
+	},
+	mounted() {
+		this.isMobileLayout = window.innerWidth < 1024;
+
+		this.wiggle = true;
+		setTimeout(() => {
+			this.wiggle = false;
+		}, 1000);
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+
+.expandable-button {
+	@apply tw-w-3 tw-h-3 tw-align-middle tw-mb-0.5 tw-transition-transform tw-ease-in-out tw-duration-500;
+}
+
+.ghost-button :deep(span) {
+	@apply tw-bg-transparent tw-border-black;
+}
+
+.no-border :deep(span) {
+	@apply tw-bg-transparent tw-border-0;
+}
+
+.account-creation :deep(input) {
+	@apply tw-bg-stone-1;
+}
+
+.secondary-container {
+	@apply tw-bg-stone-1 tw-w-full tw-px-3 md:tw-px-8 tw-z-1 tw-pt-3;
+}
+
+.option-box {
+	transition: border 0.2s ease, border-radius 0.5s ease;
+	@apply tw-w-full tw-border tw-rounded tw-flex tw-justify-between tw-cursor-pointer tw-py-2 tw-px-3;
+}
+
+.social-share :deep(.share__social.social) {
+	@apply tw-w-full;
+}
+
+.option-box.open {
+	@apply tw-border-t-0 tw-border-l-0 tw-border-r-0 tw-rounded-none;
+}
+
+.hide-for-print {
+	@apply print:tw-hidden;
+}
+
+.badge-container {
+	box-shadow: 0 4px 12px 0 #00000014;
+	transition: filter 0.3s ease;
+	width: 228px;
+	height: 233px;
+	background-color: #F3F1EF33;
+	@apply tw-flex tw-items-center tw-justify-center tw-mx-auto tw-rounded-lg;
+}
+
+.badge {
+	width: 180px;
+	height: 185px;
+	transition: filter 2s ease;
+}
+
+.blurred {
+	filter: blur(8px);
+}
+
+.reveal-button {
+	@apply tw-absolute tw-bottom-3;
+}
+
+.reveal-button :deep(span) {
+	opacity: 90%;
+	@apply tw-border-black;
+}
+
+@keyframes wiggle {
+	0% {
+		transform: rotate(0deg);
+		filter: blur(8px);
+	}
+
+	25% {
+		transform: rotate(-10deg);
+	}
+
+	50% {
+		transform: rotate(10deg);
+		filter: blur(2px);
+	}
+
+	75% {
+		transform: rotate(-10deg);
+	}
+
+	100% {
+		transform: rotate(0deg);
+		filter: blur(8px);
+	}
+}
+
+.wiggle {
+	animation: wiggle 1s ease-in-out;
+}
+
+.bg-gradient {
+	background: linear-gradient(166.92deg, #276A43 4.84%, #4DD083 95.26%);
+}
+
+</style>
diff --git a/src/components/Thanks/Badges/RevealedBadge.vue b/src/components/Thanks/Badges/RevealedBadge.vue
new file mode 100644
index 0000000000..90fa5c52df
--- /dev/null
+++ b/src/components/Thanks/Badges/RevealedBadge.vue
@@ -0,0 +1,172 @@
+<template>
+	<div
+		class="tw-relative tw-z-2 tw-pt-4 tw-pb-5 tw-bg-stone-1 tw-text-center"
+	>
+		<h1
+			class="tw-mb-1 tw-relative tw-z-2 tw-text-black"
+		>
+			Congrats!
+		</h1>
+		<p
+			class="tw-text-subhead tw-px-3 md:tw-px-8 tw-relative tw-z-2 tw-text-black"
+		>
+			You earned your first badge
+		</p>
+		<div class="tw-relative tw-mt-3">
+			<div class="badge-container tw-flex-col">
+				<div class="tw-relative tw-z-1">
+					<div
+						class="tw-absolute tw-h-full tw-z-docked tw-left-1/2 -tw-translate-x-1/2"
+					>
+						<animated-stars :style="{ minWidth: '14rem'}" class="tw-h-full" />
+					</div>
+
+					<img
+						:src="imageRequire('equity-badge.svg')"
+						class="badge tw-z-2"
+						alt="Gift icon"
+					>
+				</div>
+			</div>
+		</div>
+		<div
+			class="tw-relative tw-z-2 tw-px-3"
+		>
+			<p class="tw-pb-4">
+				<!-- eslint-disable-next-line max-len -->
+				You are a hero! Thanks to your loan, we are one step closer to a more financially inclusive world.
+			</p>
+			<kv-button
+				class="tw-w-full tw-mb-2"
+				@click="$emit('show-discover-badges')"
+				v-kv-track-event="[
+					'thanks',
+					'click',
+					'discover-more-badges',
+				]"
+			>
+				Discover more badges
+			</kv-button>
+			<div>
+				<kv-button
+					v-if="!isGuest"
+					class="tw-w-full no-border"
+					to="/portfolio"
+					variant="secondary"
+					v-kv-track-event="[
+						'thanks',
+						'click',
+						'go-to-my-kiva',
+						'Button seen after badge reveal'
+					]"
+				>
+					Go to my kiva
+				</kv-button>
+				<div
+					v-else
+					class="option-box"
+					:class="{'open' : openCreateAccount}"
+					@click="() => openCreateAccount = !openCreateAccount"
+					v-kv-track-event="[
+						'thanks',
+						'click',
+						'open-account-creation-drawer',
+					]"
+				>
+					<p class="tw-font-medium">
+						Create your account
+					</p>
+					<kv-material-icon
+						:icon="mdiChevronDown"
+						class="expandable-button"
+						:class="{'tw-rotate-180' : openCreateAccount}"
+					/>
+				</div>
+				<kv-expandable
+					v-show="openCreateAccount"
+					easing="ease-in-out"
+				>
+					<div class="tw-py-2">
+						<h2>Before you go!</h2>
+						<!-- eslint-disable-next-line max-len -->
+						<p>Finish setting up your account to track and relend your money as you are paid back.</p>
+						<guest-account-creation
+							class="tw-pt-3 account-creation"
+							event-category="thanks"
+							event-label="open-account-creation-drawer"
+						/>
+					</div>
+				</kv-expandable>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import KvExpandable from '#src/components/Kv/KvExpandable';
+import AnimatedStars from '#src/components/Thanks/AnimatedStars';
+import { mdiChevronDown } from '@mdi/js';
+import GuestAccountCreation from '#src/components/Forms/GuestAccountCreation';
+import KvButton from '@kiva/kv-components/vue/KvButton';
+import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
+import { metaGlobReader } from '#src/util/importHelpers';
+
+const imageGlob = import.meta.glob('/src/assets/images/thanks-page/*.*', { eager: true, query: '?url' });
+const imageRequire = metaGlobReader(imageGlob, '/src/assets/images/thanks-page/');
+
+export default {
+	name: 'RevealedBadge',
+	components: {
+		KvButton,
+		KvMaterialIcon,
+		KvExpandable,
+		AnimatedStars,
+		GuestAccountCreation,
+	},
+	props: {
+		isGuest: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			imageRequire,
+			mdiChevronDown,
+			openCreateAccount: false,
+		};
+	}
+};
+</script>
+
+<style lang="postcss" scoped>
+
+.expandable-button {
+	@apply tw-w-3 tw-h-3 tw-align-middle tw-mb-0.5 tw-transition-transform tw-ease-in-out tw-duration-500;
+}
+
+.badge {
+	width: 180px;
+	height: 185px;
+}
+
+.badge-container {
+	width: 228px;
+	height: 233px;
+	@apply tw-flex tw-items-center tw-justify-center tw-mx-auto tw-rounded-lg;
+}
+
+.no-border :deep(span) {
+	@apply tw-bg-transparent tw-border-0;
+}
+
+.account-creation :deep(input) {
+	@apply tw-bg-stone-1;
+}
+
+.option-box {
+	transition: border 0.2s ease, border-radius 0.5s ease;
+	@apply tw-w-full tw-border tw-rounded tw-flex tw-justify-between tw-cursor-pointer tw-py-2 tw-px-3;
+}
+
+</style>
diff --git a/src/components/Thanks/BadgesCustomization.vue b/src/components/Thanks/BadgesCustomization.vue
index 6b304ae345..b9fd6123b9 100644
--- a/src/components/Thanks/BadgesCustomization.vue
+++ b/src/components/Thanks/BadgesCustomization.vue
@@ -1,332 +1,64 @@
 <template>
 	<div
 		class="md:tw-my-6 md:tw-rounded tw-mx-auto tw-overflow-x-hidden tw-h-full tw-bg-stone-1"
-		:style="{maxWidth: '620px', minHeight: '1012px', boxShadow: '0px 5px 25px 0px #D1DCD6'}"
+		:style="{maxWidth: '620px', minHeight: '1012px'}"
+		:class="{'container-shadow': !showNewBg}"
 	>
-		<div>
-			<div
-				class="tw-text-center md:tw-rounded-t hide-for-print"
-			>
-				<div class="new-background tw-h-full tw-w-full" :class="{ 'grow': badgeBlurRevealing }"></div>
-				<div class="tw-relative">
-					<div
-						:class="{'tw-hidden': discoverBadges}"
-						style="background: linear-gradient(166.92deg, #276A43 4.84%, #4DD083 95.26%);"
-						class="tw-pt-4 tw-pb-5"
-					>
-						<h1
-							class="tw-mb-1 tw-transition-all tw-duration-1000 tw-ease-in-out"
-							:class="{
-								'tw-relative tw-z-2 tw-text-black': badgeBlurRevealCompleted,
-								'tw-text-white': !badgeBlurRevealCompleted
-							}"
-						>
-							{{ headerTitle }}
-						</h1>
-						<p
-							class="tw-text-subhead tw-px-3 md:tw-px-8
-									tw-transition-all tw-duration-1000 tw-ease-in-out"
-							:class="{
-								'tw-relative tw-z-2 tw-text-black': badgeBlurRevealCompleted,
-								'tw-text-white': !badgeBlurRevealCompleted
-							}"
-						>
-							{{ headerCopy }}
-						</p>
-						<div class="tw-mt-3" :class="{'tw-relative': !badgeBlurRevealing}">
-							<div class="badge-container" :class="{'tw-flex-col': badgeBlurRevealing}">
-								<div class="tw-relative" :class="{'tw-z-1': badgeBlurRevealing}">
-									<div
-										v-if="badgeBlurRevealCompleted"
-										class="tw-absolute tw-h-full tw-z-docked tw-left-1/2 -tw-translate-x-1/2"
-									>
-										<animated-stars :style="{ minWidth: '14rem'}" class="tw-h-full" />
-									</div>
-
-									<img
-										:class="{
-											'blurred': isBlurred,
-											'wiggle': wiggle,
-											'tw-z-2': badgeBlurRevealing
-										}"
-										:src="images('equity-badge.svg')"
-										class="badge"
-										alt="Gift icon"
-									>
-								</div>
-
-								<kv-button
-									@click="toggleBlur"
-									variant="secondary"
-									class="reveal-button"
-									:class="{'tw-hidden': badgeBlurRevealing}"
-									v-kv-track-event="[
-										'thanks',
-										'click',
-										'reveal-badge',
-									]"
-								>
-									<span class="tw-flex tw-items-center tw-gap-1">
-										<img
-											:src="images('gift.svg')"
-											class="tw-w-3 tw-h-3"
-											alt="Gift icon"
-										>
-										{{ revealBtnCta }}
-									</span>
-								</kv-button>
-							</div>
-						</div>
-					</div>
-					<div
-						v-if="badgeBlurRevealCompleted" class="tw-absolute tw-z-2 tw-px-3"
-						:class="{'tw-hidden': discoverBadges}"
-					>
-						<p class="tw-pb-4">
-							<!-- eslint-disable-next-line max-len -->
-							You are a hero! Thanks to your loan, we are one step closer to a more financially inclusive world.
-						</p>
-						<kv-button
-							class="tw-w-full tw-mb-2"
-							@click="showAllBadges"
-							v-kv-track-event="[
-								'thanks',
-								'click',
-								'discover-more-badges',
-							]"
-						>
-							Discover more badges
-						</kv-button>
-						<div>
-							<kv-button
-								v-if="!isGuest"
-								class="tw-w-full no-border"
-								to="/portfolio"
-								variant="secondary"
-								v-kv-track-event="[
-									'thanks',
-									'click',
-									'go-to-my-kiva',
-									'Button seen after badge reveal'
-								]"
-							>
-								Go to my kiva
-							</kv-button>
-							<div
-								v-else
-								class="option-box"
-								:class="{'open' : openCreateAccount}"
-								@click="() => openCreateAccount = !openCreateAccount"
-								v-kv-track-event="[
-									'thanks',
-									'click',
-									'open-account-creation-drawer',
-								]"
-							>
-								<p class="tw-font-medium">
-									Create your account
-								</p>
-								<kv-material-icon
-									:icon="mdiChevronDown"
-									class="expandable-button"
-									:class="{'tw-rotate-180' : openCreateAccount}"
-								/>
-							</div>
-							<kv-expandable
-								v-show="openCreateAccount"
-								easing="ease-in-out"
-							>
-								<div class="tw-py-2">
-									<h2>Before you go!</h2>
-									<!-- eslint-disable-next-line max-len -->
-									<p>Finish setting up your account to track and relend your money as you are paid back.</p>
-									<guest-account-creation
-										class="tw-pt-3 account-creation"
-										event-category="thanks"
-										event-label="open-account-creation-drawer"
-									/>
-								</div>
-							</kv-expandable>
-						</div>
-					</div>
-					<div v-else>
-						<div
-							class="secondary-container"
-						>
-							<h3 class="tw-text-center tw-pt-1">
-								You are now part of {{ borrowerName }}'s journey! Here's what's next:
-							</h3>
-							<loan-next-steps
-								class="tw-mb-5"
-								:weeks-to-repay="weeksToRepay"
-							/>
-							<div class="tw-mb-2 hide-for-print">
-								<div v-if="!isGuest">
-									<kv-button
-										class="tw-w-full ghost-button"
-										to="/portfolio"
-										variant="secondary"
-										v-kv-track-event="[
-											'thanks',
-											'click',
-											'go-to-my-kiva',
-										]"
-									>
-										Go to my kiva
-									</kv-button>
-								</div>
-								<div
-									v-else
-									class="option-box"
-									:class="{'open' : openCreateAccount}"
-									@click="() => openCreateAccount = !openCreateAccount"
-									v-kv-track-event="[
-										'thanks',
-										'click',
-										'open-account-creation-drawer',
-									]"
-								>
-									<p class="tw-font-medium">
-										Create your account
-									</p>
-									<kv-material-icon
-										:icon="mdiChevronDown"
-										class="expandable-button"
-										:class="{'tw-rotate-180' : openCreateAccount}"
-									/>
-								</div>
-								<kv-expandable
-									v-show="openCreateAccount"
-									easing="ease-in-out"
-								>
-									<div class="tw-py-2">
-										<h2>Before you go!</h2>
-										<!-- eslint-disable-next-line max-len -->
-										<p>Finish setting up your account to track and relend your money as you are paid back.</p>
-										<guest-account-creation
-											class="tw-pt-3 account-creation"
-											event-category="thanks"
-											event-label="open-account-creation-drawer"
-										/>
-									</div>
-								</kv-expandable>
-							</div>
-						</div>
-						<div class="tw-pt-2 tw-pb-5 tw-border-t tw-px-3 md:tw-px-8" style="border-top-color: #ECE4D5;">
-							<div class="tw-mb-2">
-								<!-- eslint-disable-next-line max-len -->
-								<div
-									class="option-box hide-for-print"
-									:class="{'open' : openOrderConfirmation}"
-									@click="() => openOrderConfirmation = !openOrderConfirmation"
-									v-kv-track-event="[
-										'thanks',
-										'click',
-										'open-order-confirmation-drawer',
-									]"
-								>
-									<p class="tw-font-medium">
-										Show previous loan details
-									</p>
-									<kv-material-icon
-										:icon="mdiChevronDown"
-										class="expandable-button"
-										:class="{'tw-rotate-180' : openOrderConfirmation}"
-									/>
-								</div>
-								<kv-expandable
-									v-show="openOrderConfirmation"
-									easing="ease-in-out"
-								>
-									<div class="tw-py-2">
-										<checkout-receipt
-											v-if="receipt"
-											:lender="lender"
-											:receipt="receipt"
-										/>
-									</div>
-								</kv-expandable>
-							</div>
-							<div class="hide-for-print">
-								<div
-									class="option-box"
-									:class="{'open' : openShareModule}"
-									@click="() => openShareModule = !openShareModule"
-									v-kv-track-event="[
-										'thanks',
-										'click',
-										'open-share-drawer',
-									]"
-								>
-									<p class="tw-font-medium">
-										Share
-									</p>
-									<kv-material-icon
-										:icon="mdiChevronDown"
-										class="expandable-button"
-										:class="{'tw-rotate-180' : openShareModule}"
-									/>
-								</div>
-								<kv-expandable
-									v-show="openShareModule"
-									easing="ease-in-out"
-								>
-									<div class="tw-py-2">
-										<social-share-v2
-											v-if="receipt"
-											class="social-share"
-											:lender="lender"
-											:loans="loans"
-										/>
-									</div>
-								</kv-expandable>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<transition name="fade">
+		<div class="new-background tw-h-0 tw-w-0" :class="{ 'grow': newBgActive }"></div>
+		<transition-group name="fade" tag="div">
+			<FirstScreen
+				key="first-screen"
+				v-if="newScreenSteps === 0"
+				:lender="lender"
+				:loans="loans"
+				:is-guest="isGuest"
+				:selected-loan="selectedLoan"
+				:receipt="receipt"
+				@show-discover-badges="showDiscoverBadges"
+				@show-new-bg="showNewBg"
+			/>
+			<RevealedBadge
+				key="revealed-badge-screen"
+				@show-discover-badges="showDiscoverBadges"
+				v-else-if="newScreenSteps === 1"
+				:is-guest="isGuest"
+			/>
 			<DiscoverSection
-				v-if="discoverBadges"
+				v-else-if="newScreenSteps === 2"
+				key="discover-screen"
 				:selected-loan-region="selectedLoanRegion"
 				:is-guest="isGuest"
-				@back-to-earned-badge="() => discoverBadges = false"
+				:badges="randomSortedBadges"
+				@back="() => newScreenSteps -= 1"
+				@select-badge="selectBadge"
+			/>
+			<DetailSection
+				v-else-if="newScreenSteps === 3"
+				key="detail-screen"
+				:selected-badge-idx="selectedBadgeIdx"
+				:badges="randomSortedBadges"
+				:is-guest="isGuest"
+				:user-preferences="userPreferences"
+				@back="() => newScreenSteps -= 1"
 			/>
-		</transition>
+		</transition-group>
 	</div>
 </template>
 
 <script>
-import { addMonths, differenceInWeeks } from 'date-fns';
-import LoanNextSteps from '#src/components/Thanks/LoanNextSteps';
-import KvExpandable from '#src/components/Kv/KvExpandable';
-import { mdiChevronDown } from '@mdi/js';
-import CheckoutReceipt from '#src/components/Checkout/CheckoutReceipt';
-import SocialShareV2 from '#src/components/Checkout/SocialShareV2';
-import GuestAccountCreation from '#src/components/Forms/GuestAccountCreation';
 import confetti from 'canvas-confetti';
-import AnimatedStars from '#src/components/Thanks/AnimatedStars';
 import DiscoverSection from '#src/components/Thanks/Badges/DiscoverSection';
-import KvButton from '@kiva/kv-components/vue/KvButton';
-import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
-import { metaGlobReader } from '#src/util/importHelpers';
-
-const imageRequire = import.meta.glob('/src/assets/images/thanks-page/*.*', { eager: true, query: '?url' });
-const images = metaGlobReader(imageRequire, '/src/assets/images/thanks-page/');
+import DetailSection from '#src/components/Thanks/Badges/DetailSection';
+import FirstScreen from '#src/components/Thanks/Badges/FirstScreen';
+import RevealedBadge from '#src/components/Thanks/Badges/RevealedBadge';
 
 export default {
 	name: 'BadgesCustomization',
 	components: {
-		LoanNextSteps,
-		KvExpandable,
-		CheckoutReceipt,
-		SocialShareV2,
-		GuestAccountCreation,
-		KvButton,
-		KvMaterialIcon,
-		AnimatedStars,
+		FirstScreen,
 		DiscoverSection,
+		DetailSection,
+		RevealedBadge,
 	},
 	inject: ['apollo', 'cookieStore'],
 	props: {
@@ -350,57 +82,88 @@ export default {
 			type: Object,
 			default: () => ({})
 		},
+		userPreferences: {
+			type: Object,
+			default: () => ({})
+		},
 	},
 	data() {
 		return {
-			openCreateAccount: false,
-			openOrderConfirmation: false,
-			openShareModule: false,
-			mdiChevronDown,
-			images,
-			isBlurred: true,
-			isMobileLayout: false,
-			wiggle: false,
-			badgeBlurRevealing: false,
-			badgeBlurRevealCompleted: false,
-			discoverBadges: false,
+			newScreenSteps: 0,
+			selectedBadgeId: 0,
+			defaultSortBadges: [
+				{
+					id: 2,
+					name: 'Climate',
+					img: 'climate',
+					description: 'Climate change is impacting unbanked and underserved populations the most.',
+					goals: [
+						'Complete 2 eco-friendly loans.',
+						'Learn one cool thing about climate action'
+					]
+				},
+				{
+					id: 3,
+					name: 'Women',
+					img: 'women',
+					// eslint-disable-next-line max-len
+					description: 'Over 50% of unbanked people worldwide are women, lacking access to financial services.',
+					goals: [
+						'Complete 2 loans for women',
+						'Learn one cool thing about women',
+					]
+				},
+				{
+					id: 4,
+					name: 'U.S. Entrepreneurs',
+					img: 'entrepreneurs',
+					description: '1 in 10 U.S. adults are unbanked & roughly 1 in 4 are underbanked.',
+					goals: [
+						'Complete 2 loans for U.S. Entrepreneurs',
+						'Learn one cool thing about U.S. Entrepreneurs',
+					]
+				},
+				{
+					id: 5,
+					name: 'Refugees',
+					img: 'refugees',
+					// eslint-disable-next-line max-len
+					description: 'When people are forced to flee their homes and livelihoods, they also leave behind their financial security.',
+					goals: [
+						'Complete 2 loans for refugees',
+						'Learn one cool thing about refugees',
+					]
+				},
+				{
+					id: 6,
+					name: 'Most Vulnerable',
+					img: 'most-vulnerable',
+					// eslint-disable-next-line max-len
+					description: 'Help families and communities access the medicine, surgeries and healthcare services they need.',
+					goals: [
+						'Complete 2 loans to help the most vulnerable',
+						'Learn one cool thing about the most vulnerable populations on Kiva',
+					]
+				}
+			],
+			newBgActive: false,
 		};
 	},
 	computed: {
-		borrowerName() {
-			return this.selectedLoan?.name ?? '';
+		randomSortedBadges() {
+			const badges = [...this.defaultSortBadges];
+			return badges.sort(() => Math.random() - 0.5);
 		},
-		weeksToRepay() {
-			const date = this.selectedLoan?.terms?.expectedPayments?.[0]?.dueToKivaDate ?? null;
-			const today = new Date();
-			if (date) {
-				// Get the number of weeks between the first repayment date (in the future) and now
-				return `${differenceInWeeks(Date.parse(date), today)} weeks`;
-			}
-
-			// Calculating a possible range of weeks between the planned expiration date and a month after
-			const expDate = Date.parse(this.selectedLoan?.plannedExpirationDate);
-			const minDate = differenceInWeeks(addMonths(today, 1), today);
-			const maxDate = differenceInWeeks(addMonths(expDate, 1), today);
-
-			if (minDate === maxDate) {
-				return `${minDate} weeks`;
-			}
-
-			return `${minDate} - ${maxDate} weeks`;
-		},
-		headerTitle() {
-			return this.badgeBlurRevealCompleted ? 'Congrats!' : 'Success!';
+		selectedLoanRegion() {
+			return this.selectedLoan?.geocode?.country?.region ?? '';
 		},
-		headerCopy() {
-			return this.badgeBlurRevealCompleted
-				? 'You earned your first badge'
-				: 'Celebrate your first loan with a special gift. 🙌';
+		borrowerName() {
+			return this.selectedLoan?.name ?? '';
 		},
-		revealBtnCta() {
-			return `${this.isMobileLayout ? 'Tap' : 'Click'} to reveal`;
+		loanCountry() {
+			return this.selectedLoan?.geocode?.country?.name ?? '';
 		},
-		selectedLoanRegion() {
+		loanRegion() {
 			return this.selectedLoan?.geocode?.country?.region ?? '';
 		},
 	},
@@ -408,33 +171,34 @@ export default {
 		hash(loan) {
 			return loan?.image?.hash ?? '';
 		},
-		toggleBlur() {
-			this.isBlurred = !this.isBlurred;
-			if (!this.isBlurred) {
-				this.badgeBlurRevealing = true;
-			} else {
-				this.badgeBlurRevealing = false;
-			}
-
-			setTimeout(() => {
-				this.badgeBlurRevealCompleted = true;
-			}, 1000);
+		showDiscoverBadges() {
+			this.newScreenSteps = 2;
 		},
-		showAllBadges() {
-			this.discoverBadges = true;
+		selectBadge(badgeIdx) {
+			this.newScreenSteps += 1;
+			this.selectedBadgeIdx = badgeIdx;
+		},
+		showNewBg() {
+			this.newBgActive = true;
 		},
 	},
 	created() {
+		this.defaultSortBadges.unshift(
+			{
+				id: 1,
+				name: this.loanRegion,
+				img: 'region',
+				goals: [
+					`Complete 2 loans from ${this.loanCountry}`,
+					`Learn 1 cool thing about ${this.loanRegion}`,
+				],
+				// eslint-disable-next-line max-len
+				description: `Like ${this.borrowerName}, people in ${this.loanRegion} continue to be financially excluded.`,
+			}
+		);
 		this.$kvTrackEvent('thanks', 'view', 'equity badge', this.isGuest ? 'guest' : 'signed-in');
 	},
 	mounted() {
-		this.isMobileLayout = window.innerWidth < 1024;
-
-		this.wiggle = true;
-		setTimeout(() => {
-			this.wiggle = false;
-		}, 1000);
-
 		confetti({
 			origin: {
 				y: 0.2
@@ -450,100 +214,6 @@ export default {
 
 <style lang="postcss" scoped>
 
-.expandable-button {
-	@apply tw-w-3 tw-h-3 tw-align-middle tw-mb-0.5 tw-transition-transform tw-ease-in-out tw-duration-500;
-}
-
-.ghost-button >>> span {
-	@apply tw-bg-transparent tw-border-black;
-}
-
-.no-border >>> span {
-	@apply tw-bg-transparent tw-border-0;
-}
-
-.account-creation >>> input {
-	@apply tw-bg-stone-1;
-}
-
-.secondary-container {
-	@apply tw-bg-stone-1 tw-w-full tw-px-3 md:tw-px-8 tw-z-1 tw-pt-3;
-}
-
-.option-box {
-	transition: border 0.2s ease, border-radius 0.5s ease;
-	@apply tw-w-full tw-border tw-rounded tw-flex tw-justify-between tw-cursor-pointer tw-py-2 tw-px-3;
-}
-
-.social-share >>> .share__social.social {
-	@apply tw-w-full;
-}
-
-.option-box.open {
-	@apply tw-border-t-0 tw-border-l-0 tw-border-r-0 tw-rounded-none;
-}
-
-.hide-for-print {
-	@apply print:tw-hidden;
-}
-
-.badge-container {
-	box-shadow: 0 4px 12px 0 #00000014;
-	transition: filter 0.3s ease;
-	width: 228px;
-	height: 233px;
-	background-color: #F3F1EF33;
-	@apply tw-flex tw-items-center tw-justify-center tw-mx-auto tw-rounded-lg;
-}
-
-.badge {
-	width: 180px;
-	height: 185px;
-	transition: filter 2s ease;
-}
-
-.blurred {
-	filter: blur(8px);
-}
-
-.reveal-button {
-	@apply tw-absolute tw-bottom-3;
-}
-
-.reveal-button >>> span {
-	opacity: 0.9;
-	@apply tw-border-black;
-}
-
-@keyframes wiggle {
-	0% {
-		transform: rotate(0deg);
-		filter: blur(8px);
-	}
-
-	25% {
-		transform: rotate(-10deg);
-	}
-
-	50% {
-		transform: rotate(10deg);
-		filter: blur(2px);
-	}
-
-	75% {
-		transform: rotate(-10deg);
-	}
-
-	100% {
-		transform: rotate(0deg);
-		filter: blur(8px);
-	}
-}
-
-.wiggle {
-	animation: wiggle 1s ease-in-out;
-}
-
 .new-background {
 	transition: all 1s ease-in-out;
 	@apply tw-bg-stone-1 tw-absolute tw-top-1/2 tw-left-1/2 tw-w-0 tw-h-0 tw-z-1;
@@ -561,4 +231,8 @@ export default {
 	@apply tw-opacity-0;
 }
 
+.container-shadow {
+	box-shadow: 0 5px 25px 0 #D1DCD6;
+}
+
 </style>
diff --git a/src/graphql/query/lenderPublicProfile.graphql b/src/graphql/query/lenderPublicProfile.graphql
index 2383153f38..e9a4512930 100644
--- a/src/graphql/query/lenderPublicProfile.graphql
+++ b/src/graphql/query/lenderPublicProfile.graphql
@@ -24,48 +24,6 @@ query LenderPublicProfile ($publicId: String!) {
 				otherInfo
 				url
 			}
-			statsPerCountry {
-				values {
-					id
-					loanCount
-					country {
-						name
-						numLoansFundraising
-						geocode {
-							latitude
-							longitude
-						}
-						isoCode
-					}
-				}
-			}
-			statsPerGender {
-				values {
-					id
-					loanCount
-					gender
-				}
-			}
-			statsPerPartner {
-				values {
-					id
-					loanCount
-					partner {
-						id
-						name
-					}
-				}
-			}
-			statsPerSector {
-				values {
-					id
-					loanCount
-					sector {
-						id
-						name
-					}
-				}
-			}
 		}
 	}
 	userAchievementProgress(publicId: $publicId) {
diff --git a/src/graphql/query/lenderStats.graphql b/src/graphql/query/lenderStats.graphql
new file mode 100644
index 0000000000..55f2c37e30
--- /dev/null
+++ b/src/graphql/query/lenderStats.graphql
@@ -0,0 +1,49 @@
+query LenderStats ($publicId: String!) {
+	community {
+		lender(publicId: $publicId) {
+			id
+			statsPerCountry {
+				values {
+					id
+					loanCount
+					country {
+						name
+						numLoansFundraising
+						geocode {
+							latitude
+							longitude
+						}
+						isoCode
+					}
+				}
+			}
+			statsPerGender {
+				values {
+					id
+					loanCount
+					gender
+				}
+			}
+			statsPerPartner {
+				values {
+					id
+					loanCount
+					partner {
+						id
+						name
+					}
+				}
+			}
+			statsPerSector {
+				values {
+					id
+					loanCount
+					sector {
+						id
+						name
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/src/graphql/query/thanksPage.graphql b/src/graphql/query/thanksPage.graphql
index ab5bf6346a..bba4ce8501 100644
--- a/src/graphql/query/thanksPage.graphql
+++ b/src/graphql/query/thanksPage.graphql
@@ -137,6 +137,10 @@ query checkoutReceipt($checkoutId: Int!, $visitorId: String) {
 		communicationSettings {
 			lenderNews
 		}
+		userPreferences {
+			id
+			preferences
+		}
 	}
 	general {
 		shareAskCopy: uiExperimentSetting(key: "share_ask_copy") {
diff --git a/src/pages/Checkout/CheckoutPage.vue b/src/pages/Checkout/CheckoutPage.vue
index 562aa96bb8..da411ae197 100644
--- a/src/pages/Checkout/CheckoutPage.vue
+++ b/src/pages/Checkout/CheckoutPage.vue
@@ -19,20 +19,11 @@
 				class="basket-wrap tw-relative tw-mb-1"
 				:class="{'pre-login': !preCheckoutStep}"
 			>
-				<div
-					class="checkout-header hide-for-print"
-					:class="{
-						'tw-pb-3': !checkoutStickyExperimentEnabled,
-						'tw-pb-0 md:tw-pb-1 lg:tw-pb-3': checkoutStickyExperimentEnabled
-					}"
-				>
+				<div class="checkout-header hide-for-print tw-pb-3">
 					<h1 class="tw-text-h2 tw-mb-3">
 						Your basket
 					</h1>
-					<hr
-						class="tw-border-tertiary tw-my-3"
-						:class="{ 'tw-hidden lg:tw-block': checkoutStickyExperimentEnabled }"
-					>
+					<hr class="tw-border-tertiary tw-my-3">
 
 					<ftds-message
 						class="tw-mb-2"
@@ -56,7 +47,6 @@
 							@validateprecheckout="validatePreCheckout"
 							@refreshtotals="refreshTotals($event)"
 							@updating-totals="setUpdatingTotals"
-							:class="{ 'lg:tw-w-3/4 lg:tw-mx-0 lg:tw-pr-3': showCheckoutStickyExperiment }"
 						/>
 						<div v-if="showUpsell && showUpsellModule" class="upsellContainer">
 							<kv-loading-placeholder v-if="!upsellLoan.name" class="tw-rounded" />
@@ -100,17 +90,7 @@
 
 						<div ref="checkoutActionsThreshold"></div>
 
-						<div
-							id="checkout-actions"
-							class="checkout-actions md:tw-text-right"
-							:class="{
-								'tw-my-6': !showCheckoutStickyExperiment,
-								'tw-fixed tw-bottom-0 tw-left-0 tw-bg-white tw-p-2 tw-w-full tw-border-t \
-								tw-border-tertiary tw-z-1 lg:tw-absolute lg:tw-top-0 lg:tw-p-0 lg:tw-my-0 \
-								lg:tw-left-auto lg:tw-right-0 lg:tw-w-1/4 lg:tw-border-0 \
-								lg:tw-h-min': showCheckoutStickyExperiment,
-							}"
-						>
+						<div class="checkout-actions md:tw-text-right tw-my-6">
 							<div v-if="isLoggedIn">
 								<form v-if="showKivaCreditButton" action="/checkout" method="GET">
 									<input type="hidden" name="js_loaded" value="false">
@@ -138,13 +118,7 @@
 								/>
 							</div>
 
-							<div
-								v-else-if="!isLoggedIn && showLoginContinueButton"
-								:class="{
-									'lg:tw-flex lg:tw-flex-col lg:tw-gap-2 lg:tw-p-1.5 \
-									lg:tw-bg-secondary': showCheckoutStickyExperiment
-								}"
-							>
+							<div v-else-if="!isLoggedIn && showLoginContinueButton">
 								<!-- Guest checkout button shown when the uiexp.guest_checkout and
 									feature.guest_checkout are enabled to users in the test group
 									without a 'kvu' cookie which indicates if a user has logged
@@ -153,7 +127,6 @@
 									v-if="eligibleForGuestCheckout && !guestCheckoutCTAExpActive"
 									class="guest-checkout-button checkout-button
 										tw-w-full md:tw-w-auto md:tw-mr-2 tw-mb-2 md:tw-mb-0"
-									:class="{ 'lg:tw-mr-0 guest-checkout-button-sticky': showCheckoutStickyExperiment }"
 									variant="secondary"
 									id="guest-checkout-button"
 									data-testid="guest-checkout-button"
@@ -314,7 +287,6 @@
 import { gql } from 'graphql-tag';
 import _get from 'lodash/get';
 import _filter from 'lodash/filter';
-import _throttle from 'lodash/throttle';
 import numeral from 'numeral';
 import { readBoolSetting } from '#src/util/settingsUtils';
 import { preFetchAll } from '#src/util/apolloPreFetch';
@@ -361,8 +333,6 @@ import iwdExperimentMixin from '#src/plugins/iwd-experiment-mixin';
 import FtdsMessage from '#src/components/Checkout/FtdsMessage';
 import FtdsDisclaimer from '#src/components/Checkout/FtdsDisclaimer';
 import { removeLoansFromChallengeCookie } from '#src/util/teamChallengeUtils';
-import smoothScrollMixin from '#src/plugins/smooth-scroll-mixin';
-import { fireHotJarEvent } from '#src/util/hotJarUtils';
 import KvLoadingPlaceholder from '@kiva/kv-components/vue/KvLoadingPlaceholder';
 import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
 import KvButton from '@kiva/kv-components/vue/KvButton';
@@ -371,7 +341,6 @@ const ASYNC_CHECKOUT_EXP = 'async_checkout_rollout';
 const CHECKOUT_LOGIN_CTA_EXP = 'checkout_login_cta';
 const GUEST_CHECKOUT_CTA_EXP = 'guest_checkout_cta';
 const DEPOSIT_REWARD_EXP_KEY = 'deposit_incentive_banner';
-const CHECKOUT_STICKY_EXP_KEY = 'checkout_sticky';
 
 // Query to gather user Teams
 const myTeamsQuery = gql`query myTeamsQuery {
@@ -414,7 +383,7 @@ export default {
 		FtdsDisclaimer,
 	},
 	inject: ['apollo', 'cookieStore', 'kvAuth0'],
-	mixins: [checkoutUtils, fiveDollarsTest, iwdExperimentMixin, hugeLendAmount, smoothScrollMixin],
+	mixins: [checkoutUtils, fiveDollarsTest, iwdExperimentMixin, hugeLendAmount],
 	head: {
 		title: 'Checkout'
 	},
@@ -465,9 +434,6 @@ export default {
 			// Deposit incentive experiment MP-72
 			depositIncentiveAmountToLend: 0,
 			depositIncentiveExperimentEnabled: false,
-			checkoutStickyExperimentEnabled: false,
-			isAboveCheckoutActions: false,
-			checkIsAboveCheckoutActionsThrottled: _throttle(this.checkIsAboveCheckoutActions, 100),
 			userOptedIn: false,
 		};
 	},
@@ -674,29 +640,8 @@ export default {
 				});
 			// end challenge code
 		}
-
-		this.checkIsAboveCheckoutActions();
-		window.addEventListener('scroll', this.checkIsAboveCheckoutActionsThrottled);
-
-		if (window?.innerWidth < 735) {
-			this.initializeCheckoutStickyExperiment();
-		}
-
-		if (this.showCheckoutStickyExperiment) {
-			fireHotJarEvent('checkout_sticky_experiment');
-		}
-	},
-	beforeDestroy() {
-		window.removeEventListener('scroll', this.checkIsAboveCheckoutActionsThrottled);
 	},
 	computed: {
-		showCheckoutStickyExperiment() {
-			return this.checkoutStickyExperimentEnabled
-				&& !this.checkingOutAsGuest
-				&& !this.showKivaCreditButton
-				&& !this.isLoggedIn
-				&& this.isAboveCheckoutActions;
-		},
 		isUpsellUnder100() {
 			const loanAmount = this.upsellLoan?.loanAmount ?? 0;
 			const fundedAmount = this.upsellLoan?.loanFundraisingInfo?.fundedAmount ?? 0;
@@ -823,15 +768,6 @@ export default {
 		},
 	},
 	methods: {
-		checkIsAboveCheckoutActions() {
-			const thresholdClientRectTop = this.$refs?.checkoutActionsThreshold?.getBoundingClientRect()?.top;
-			this.isAboveCheckoutActions = thresholdClientRectTop > window?.innerHeight;
-		},
-		scrollToSection(sectionId) {
-			const elementToScrollTo = document.querySelector(sectionId);
-			const topOfSectionToScrollTo = elementToScrollTo?.offsetTop ?? 0;
-			this.smoothScrollTo({ yPosition: topOfSectionToScrollTo, millisecondsToAnimate: 750 });
-		},
 		openMatchedLoansLightbox() {
 			this.$kvTrackEvent('Basket', 'click-must-deposit-message-cta', 'Learn more');
 			this.showMatchedLoansLightbox = true;
@@ -851,14 +787,7 @@ export default {
 			this.showUpsellModule = false;
 		},
 		guestCheckout() {
-			// Cache value to know whether to trigger nextTick
-			const wasCheckoutStickyExperimentShown = this.showCheckoutStickyExperiment;
-
 			this.checkingOutAsGuest = true;
-
-			if (wasCheckoutStickyExperimentShown) {
-				this.$nextTick(() => this.scrollToSection('#checkout-actions'));
-			}
 		},
 		disableGuestCheckout() {
 			this.checkingOutAsGuest = false;
@@ -1188,24 +1117,6 @@ export default {
 
 			this.depositIncentiveExperimentEnabled = depositIncentiveExp.version === 'b';
 		},
-		initializeCheckoutStickyExperiment() {
-			if (!this.isLoggedIn) {
-				const checkoutStickyExperiment = this.apollo.readFragment({
-					id: `Experiment:${CHECKOUT_STICKY_EXP_KEY}`,
-					fragment: experimentVersionFragment,
-				}) || {};
-
-				if (checkoutStickyExperiment.version) {
-					this.$kvTrackEvent(
-						'basket',
-						'EXP-MP-360-Jun2024',
-						checkoutStickyExperiment.version,
-					);
-				}
-
-				this.checkoutStickyExperimentEnabled = checkoutStickyExperiment.version === 'b';
-			}
-		},
 	},
 	destroyed() {
 		clearInterval(this.currentTimeInterval);
@@ -1234,10 +1145,4 @@ export default {
 		background-color: rgb(255 255 255 / 70%);
 	}
 }
-
-.guest-checkout-button-sticky > span {
-	@media screen and (min-width >= 1024px) {
-		background-color: white;
-	}
-}
 </style>
diff --git a/src/pages/Portfolio/ImpactDashboard/DistributionGraphs.vue b/src/pages/Portfolio/ImpactDashboard/DistributionGraphs.vue
index 1bf7401ba7..b7675e613d 100644
--- a/src/pages/Portfolio/ImpactDashboard/DistributionGraphs.vue
+++ b/src/pages/Portfolio/ImpactDashboard/DistributionGraphs.vue
@@ -22,9 +22,9 @@
 import { gql } from 'graphql-tag';
 import delayUntilVisibleMixin from '#src/plugins/delay-until-visible-mixin';
 import getCacheKey from '#src/util/getCacheKey';
-import PieChartFigure from '#src/components/Charts/PieChartFigure';
-import TreeMapFigure from '#src/components/Charts/TreeMapFigure';
 import StatsTable from '#src/components/Stats/StatsTable';
+import KvPieChart from '@kiva/kv-components/vue/KvPieChart';
+import KvTreeMapChart from '@kiva/kv-components/vue/KvTreeMapChart';
 import AsyncPortfolioSection from './AsyncPortfolioSection';
 
 export default {
@@ -66,10 +66,10 @@ export default {
 		chartType() {
 			switch (this.chart) {
 				case 'pie':
-					return PieChartFigure;
+					return KvPieChart;
 				case 'treemap':
 				default:
-					return TreeMapFigure;
+					return KvTreeMapChart;
 			}
 		},
 	},
diff --git a/src/pages/Portfolio/ImpactDashboard/ImpactDashboardPage.vue b/src/pages/Portfolio/ImpactDashboard/ImpactDashboardPage.vue
index d425cf977c..b25f970e43 100644
--- a/src/pages/Portfolio/ImpactDashboard/ImpactDashboardPage.vue
+++ b/src/pages/Portfolio/ImpactDashboard/ImpactDashboardPage.vue
@@ -113,6 +113,10 @@ export default {
 		});
 
 		this.showTeamChallenge = teamsChallengeEnable && this.allowedTeams.length > 0;
+
+		if (this.$route?.query?.goal_saved) {
+			this.$showTipMsg('Goal saved');
+		}
 	},
 	mounted() {
 		this.loadEducationPost();
diff --git a/src/pages/Thanks/ThanksPage.vue b/src/pages/Thanks/ThanksPage.vue
index f2b0057a54..e8d3c22ff5 100644
--- a/src/pages/Thanks/ThanksPage.vue
+++ b/src/pages/Thanks/ThanksPage.vue
@@ -18,6 +18,7 @@
 				:receipt="receipt"
 				:lender="lender"
 				:is-guest="isGuest"
+				:user-preferences="userPreferences"
 			/>
 		</template>
 		<template v-else-if="showNewTYPage">
@@ -264,6 +265,7 @@ export default {
 			optedIn: false,
 			enableShortVersion: false,
 			badgesCustomExpEnabled: false,
+			userPreferences: null
 		};
 	},
 	apollo: {
@@ -565,6 +567,7 @@ export default {
 		}
 
 		// Thanks Bagdes Experiment
+		this.userPreferences = data?.my?.userPreferences ?? null;
 		if (this.optedIn) {
 			const { version } = trackExperimentVersion(
 				this.apollo,