diff --git a/.storybook/mock-data/badge-journey-data-mock.js b/.storybook/mock-data/badge-journey-data-mock.js
index f6e6b559dd..a6f0e4d17e 100644
--- a/.storybook/mock-data/badge-journey-data-mock.js
+++ b/.storybook/mock-data/badge-journey-data-mock.js
@@ -7,7 +7,8 @@ export const badgeWomensEquality = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "Women's equality",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3dAEh0zYSkqK5Up5q8Flv8/70d21f8db5f93b20be1581ef333dc60e/Women_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3dAEh0zYSkqK5Up5q8Flv8/70d21f8db5f93b20be1581ef333dc60e/Women_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "womens-equality",
@@ -56,6 +57,7 @@ export const badgeWomensEquality = {
 		"__typename": "TieredLendingAchievement",
 		"id": "womens-equality",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
@@ -120,7 +122,8 @@ export const badgeUsEconomicEquality = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "U.S. economic equality",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3C3ddaga4hEXBlb9WxsdlQ/0155bb0e9a32be6b00071afa4769b10c/US_Business_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3C3ddaga4hEXBlb9WxsdlQ/0155bb0e9a32be6b00071afa4769b10c/US_Business_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "us-economic-equality",
@@ -169,6 +172,7 @@ export const badgeUsEconomicEquality = {
 		"__typename": "TieredLendingAchievement",
 		"id": "us-economic-equality",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
@@ -234,7 +238,8 @@ export const badgeClimateAction = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "Climate action",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3YklKNLbiA4kAcOgk5ouaw/14b41006455dfd756f141e0217bb8e9c/Climate_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/3YklKNLbiA4kAcOgk5ouaw/14b41006455dfd756f141e0217bb8e9c/Climate_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "climate-action",
@@ -283,6 +288,7 @@ export const badgeClimateAction = {
 		"__typename": "TieredLendingAchievement",
 		"id": "climate-action",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
@@ -347,7 +353,8 @@ export const badgeRefugeeEquality = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "Refugee equality",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/1SEhQMUbYUqZopjP2o67XK/c9b1f51837d87905d2a71578c0d6c434/Refugees_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/1SEhQMUbYUqZopjP2o67XK/c9b1f51837d87905d2a71578c0d6c434/Refugees_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "refugee-equality",
@@ -396,6 +403,7 @@ export const badgeRefugeeEquality = {
 		"__typename": "TieredLendingAchievement",
 		"id": "refugee-equality",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
@@ -460,7 +468,8 @@ export const badgeBasicNeeds = {
 			"level": 1,
 			"levelName": "1",
 			"challengeName": "Basic needs",
-			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/694uSymh8om0MxbiCjWZxl/b55c8cb3f3743efdd56b56beea8dfb42/Basic_Needs_10.svg"
+			"imageUrl": "//images.ctfassets.net/j0p9a6ql0rn7/694uSymh8om0MxbiCjWZxl/b55c8cb3f3743efdd56b56beea8dfb42/Basic_Needs_10.svg",
+			"shareFact": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."
 		},
 		{
 			"id": "basic-needs",
@@ -509,6 +518,7 @@ export const badgeBasicNeeds = {
 		"__typename": "TieredLendingAchievement",
 		"id": "basic-needs",
 		"totalProgressToAchievement": 0,
+		"matchingLoans": { "filters": {} },
 		"tiers": [
 			{
 				"__typename": "Tier",
diff --git a/.storybook/stories/BadgeModal.stories.js b/.storybook/stories/BadgeModal.stories.js
index aea25aaca8..f8b1c5ef3c 100644
--- a/.storybook/stories/BadgeModal.stories.js
+++ b/.storybook/stories/BadgeModal.stories.js
@@ -7,33 +7,92 @@ import {
 	badgeBasicNeeds,
 	badgeFirstTierComplete
 } from '../mock-data/badge-journey-data-mock';
+import { STATE_JOURNEY, STATE_EARNED, STATE_IN_PROGRESS } from '#src/composables/useBadgeModal';
+import apolloStoryMixin from '../mixins/apollo-story-mixin';
+import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
+import { mockLoansArray } from '../utils';
+
+const mockLoans = mockLoansArray(3);
 
 export default {
 	title: 'MyKiva/Badge Modal',
 	component: BadgeModal,
 };
 
+const queryResult = {
+	data: {
+		lend: {
+			loan: mockLoans[0]
+		},
+		fundraisingLoans: {
+			values: [
+				{
+					id: 2413188
+				},
+				{
+					id: 2411288
+				},
+				{
+					id: 2406410
+				},
+				{
+					id: 2406459
+				},
+				{
+					id: 2406956
+				},
+				{
+					id: 2408858
+				}
+			]
+		},
+	}
+}
+
 const story = (args) => {
 	const template = (_args, { argTypes }) => ({
 		props: Object.keys(argTypes),
 		components: { BadgeModal },
-		setup() { return args; },
+		mixins: [apolloStoryMixin({ queryResult }), cookieStoreStoryMixin()],
+		setup() { return { args }; },
 		template: `
-			<badge-modal :show="true" :badge="badge" />
+			<badge-modal :show="true" v-bind="args" />
 		`,
 	});
 	template.args = args;
 	return template;
 };
 
-export const WomensEquality = story({ badge: badgeWomensEquality });
+const tier = { level: 1 };
+
+export const JourneyWomensEquality = story({ badge: badgeWomensEquality, state: STATE_JOURNEY });
+
+export const JourneyUsEconomicEquality = story({ badge: badgeUsEconomicEquality, state: STATE_JOURNEY });
+
+export const JourneyClimateAction = story({ badge: badgeClimateAction, state: STATE_JOURNEY });
+
+export const JourneyRefugeeEquality = story({ badge: badgeRefugeeEquality, state: STATE_JOURNEY });
+
+export const JourneyBasicNeeds = story({ badge: badgeBasicNeeds, state: STATE_JOURNEY });
+
+export const JourneyFirstTierComplete = story({ badge: badgeFirstTierComplete, state: STATE_JOURNEY });
+
+export const InProgressWomensEquality = story({ badge: badgeWomensEquality, tier, state: STATE_IN_PROGRESS });
+
+export const InProgressUsEconomicEquality = story({ badge: badgeUsEconomicEquality, tier, state: STATE_IN_PROGRESS });
+
+export const InProgressClimateAction = story({ badge: badgeClimateAction, tier, state: STATE_IN_PROGRESS });
+
+export const InProgressRefugeeEquality = story({ badge: badgeRefugeeEquality, tier, state: STATE_IN_PROGRESS });
+
+export const InProgressBasicNeeds = story({ badge: badgeBasicNeeds, tier, state: STATE_IN_PROGRESS });
 
-export const UsEconomicEquality = story({ badge: badgeUsEconomicEquality });
+export const EarnedWomensEquality = story({ badge: badgeWomensEquality, tier, state: STATE_EARNED });
 
-export const ClimateAction = story({ badge: badgeClimateAction });
+export const EarnedUsEconomicEquality = story({ badge: badgeUsEconomicEquality, tier, state: STATE_EARNED });
 
-export const RefugeeEquality = story({ badge: badgeRefugeeEquality });
+export const EarnedClimateAction = story({ badge: badgeClimateAction, tier, state: STATE_EARNED });
 
-export const BasicNeeds = story({ badge: badgeBasicNeeds });
+export const EarnedRefugeeEquality = story({ badge: badgeRefugeeEquality, tier, state: STATE_EARNED });
 
-export const FirstTierComplete = story({ badge: badgeFirstTierComplete });
+export const EarnedBasicNeeds = story({ badge: badgeBasicNeeds, tier, state: STATE_EARNED });