diff --git a/src/components/MyKiva/BadgesSection.vue b/src/components/MyKiva/BadgesSection.vue
index 1a151dd40e..a8b0ee6a54 100644
--- a/src/components/MyKiva/BadgesSection.vue
+++ b/src/components/MyKiva/BadgesSection.vue
@@ -20,18 +20,18 @@
 			<span class="tw-text-base !tw-font-medium tw-text-center tw-mb-1">
 				{{ badge.challengeName }}
 			</span>
-			<div
-				class="tw-p-1"
-				:class="{
-					'tw-grayscale': !badge.hasStarted
-				}"
-				style="height: 148px;"
+			<BadgeContainer
+				:status="getBadgeStatus(badge)"
+				:shape="getBadgeShape(badge.id)"
+				class="tw-self-start tw-mx-auto"
+				style="height: 133px;"
 			>
 				<img
 					:src="getActiveTierData(badge).imageUrl"
+					:alt="badge.challengeName"
 					class="tw-h-full tw-mx-auto"
 				>
-			</div>
+			</BadgeContainer>
 			<div class="tw-flex tw-flex-col tw-gap-0.5 tw-font-medium tw-grow">
 				<span
 					v-if="badge.hasStarted"
@@ -54,6 +54,8 @@ import { computed } from 'vue';
 import { defaultBadges } from '#src/util/achievementUtils';
 import { indexIn } from '#src/util/comparators';
 import useBadgeData from '#src/composables/useBadgeData';
+import { getBadgeShape, BADGE_COMPLETED, BADGE_IN_PROGRESS } from '#src/composables/useBadgeModal';
+import BadgeContainer from './BadgeContainer';
 
 defineEmits(['badge-clicked']);
 
@@ -75,6 +77,14 @@ const visibleBadges = computed(() => {
 const levelCaption = badge => {
 	return `Level ${getActiveTierData(badge).level}/${getBadgeWithVisibleTiers(badge).achievementData.tiers.length}`;
 };
+
+const getBadgeStatus = badge => {
+	const activeTier = getActiveTierData(badge);
+	if (activeTier?.level === badge?.achievementData?.tiers?.length) {
+		return BADGE_COMPLETED;
+	}
+	return BADGE_IN_PROGRESS;
+};
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/components/MyKiva/MyKivaHero.vue b/src/components/MyKiva/MyKivaHero.vue
index 2566d1d040..7e4f4e5a85 100644
--- a/src/components/MyKiva/MyKivaHero.vue
+++ b/src/components/MyKiva/MyKivaHero.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="tw-w-full landscape tw-relative">
 		<MyKivaContainer>
-			<div class="tw-bg-white tw-rounded-b tw-absolute tw-top-0 tw-px-1.5 tw-py-2">
+			<div class="tw-bg-white tw-rounded-b tw-absolute tw-top-0 tw-p-1.5">
 				<h3>Welcome back 👋</h3>
 				<div
 					v-if="isBorrower || isTrustee"
@@ -37,7 +37,7 @@
 				@click="$emit('show-navigation')"
 			>
 				<kv-material-icon
-					class="tw-absolute tw-right-0 tw-bg-white tw-p-0.5 tw-rounded-full tw-mt-2 tw-shadow-lg"
+					class="tw-absolute tw-right-0 tw-bg-white tw-p-0.5 tw-rounded-full tw-shadow-lg tw-top-1"
 					name="settings"
 					:icon="mdiCogOutline"
 				/>