diff --git a/src/components/dashboard/GapByRace.vue b/src/components/dashboard/GapByRace.vue
index 4f773a1..bcee77e 100644
--- a/src/components/dashboard/GapByRace.vue
+++ b/src/components/dashboard/GapByRace.vue
@@ -24,20 +24,21 @@
         />
       </div>
       <div class="centered">
-        <p class="has-text-centered">
-          In {{ activeCluster.name }}, the largest gap is among
-          {{ minVaxRace?.name }} residents. Only
-          <strong
-            >{{ formatPct(minVaxRace?.pct) }} of
-            {{ minVaxRace?.name }} residents</strong
-          >
-          are vaccinated compared to {{ formatPct(expected) }} statewide.
-          Approximately
-          <strong
-            >{{ minVaxRace?.gap }} more {{ minVaxRace?.name }} residents</strong
-          >
-          need to receive a dose to close this gap.
-        </p>
+        <!-- eslint-disable vue/no-v-html -->
+        <p
+          class="has-text-centered"
+          v-html="
+            sanitizeHtml(
+              allResidents({
+                name: activeCluster.name,
+                minRaceName: minVaxRace?.name,
+                pct: formatPct(minVaxRace?.pct),
+                expectedPct: formatPct(expected),
+                gap: minVaxRace?.gap,
+              }),
+            )
+          "
+        />
       </div>
     </div>
 
@@ -55,57 +56,90 @@
               ? formatPct(activeFocusStats?.pct)
               : '?'
           "
-          :title="`${activeFocusStats?.name} residents vaccinated in ${activeCluster.name}`"
+          :title="
+            sanitizeHtml(
+              kpiTitle({
+                race: activeFocusStats?.name,
+                name: props.activeCluster.name,
+              }),
+            )
+          "
         />
         <KeyPerformanceIndicator
           :value="
             activeFocusStats?.population > 0 ? activeFocusStats?.gap : '?'
           "
-          :title="`Approximate vaccine doses for ${activeFocusStats?.name} residents needed to close the gap`"
+          :title="
+            sanitizeHtml(
+              gapKpiTitle({
+                race: activeFocusStats?.name,
+                name: props.activeCluster.name,
+              }),
+            )
+          "
         />
       </div>
       <div class="content centered has-text-centered">
         <!-- In this community, there is a gap in this focus group -->
-        <p v-if="activeFocusStats?.gap > 0">
-          In {{ activeCluster.name }},
-          <strong>{{ formatPct(activeFocusStats?.pct) }}</strong> of
-          {{ activeFocusStats?.name }} residents are vaccinated compared to our
-          goal of {{ formatPct(expected) }} total vaccinations statewide.
-          Approximately
-          <strong
-            >{{ activeFocusStats?.gap }} more
-            {{ activeFocusStats?.name }} residents</strong
-          >
-          need to be vaccinated to close this gap.
-        </p>
+        <!-- eslint-disable vue/no-v-html -->
+        <p
+          v-if="activeFocusStats?.gap > 0"
+          v-html="
+            sanitizeHtml(
+              gapPhrase({
+                name: props.activeCluster.name,
+                pct: formatPct(activeFocusStats?.pct),
+                race: activeFocusStats?.name,
+                expectedPct: formatPct(expected),
+                gap: activeFocusStats?.gap,
+              }),
+            )
+          "
+        />
         <!-- There is no gap in this focus group, display the largest gap -->
         <span v-else>
-          <!-- Fully Vaccinated -->
-          <p v-if="activeFocusStats?.population > 0">
-            In {{ activeCluster.name }},
-            <strong>{{ formatPct(activeFocusStats?.pct) }}</strong> of
-            {{ activeFocusStats?.name }} residents are vaccinated compared to
-            our goal of {{ formatPct(expected) }} total vaccinations statewide.
-          </p>
+          <!-- eslint-disable vue/no-v-html -->
+          <p
+            v-if="activeFocusStats?.population > 0"
+            v-html="
+              sanitizeHtml(
+                noGap({
+                  name: props.activeCluster.name,
+                  pct: formatPct(activeFocusStats?.pct),
+                  race: activeFocusStats?.name,
+                  expectedPct: formatPct(expected),
+                }),
+              )
+            "
+          />
 
           <!-- Not Enough Information-->
-          <p v-else>
-            In {{ activeCluster.name }}, there isn't enough vaccine data on
-            <strong>{{ activeFocusStats?.name }} residents</strong> to determine
-            their vaccination status or the number of vaccine doses needed to
-            close the gap.
-          </p>
-
-          <!-- Largest Gap -->
-          <p>
-            The largest gap is among
-            <strong>{{ minVaxRace?.name }} residents</strong>. Only
-            <strong>{{ formatPct(minVaxRace?.pct) }}</strong> of
-            {{ minVaxRace?.name }} residents are vaccinated. Approximately
-            <strong>{{ minVaxRace?.gap }}</strong> more
-            {{ minVaxRace?.name }} residents need to be vaccinated to close this
-            gap.
-          </p>
+          <!-- eslint-disable vue/no-v-html -->
+          <p
+            v-else
+            v-html="
+              sanitizeHtml(
+                noInfo({
+                  name: props.activeCluster.name,
+                  race: activeFocusStats?.name,
+                }),
+              )
+            "
+          />
+
+          <!-- Largest Gap, displayed when no gap or not enough info -->
+          <!-- eslint-disable vue/no-v-html -->
+          <p
+            v-html="
+              sanitizeHtml(
+                highest({
+                  minRaceName: minVaxRace?.name,
+                  pct: formatPct(minVaxRace?.pct),
+                  gap: minVaxRace?.gap,
+                }),
+              )
+            "
+          />
         </span>
       </div>
     </div>
@@ -118,12 +152,15 @@ import { computed } from "vue";
 import GapChart from "@/components/dashboard/GapChart.vue";
 import KeyPerformanceIndicator from "@/components/dashboard/KeyPerformanceIndicator.vue";
 import { formatPct, sortByProperty } from "../../utils/utils";
+import { compile } from "handlebars";
+import sanitizeHtml from "sanitize-html";
 
 const props = defineProps<{
   stats: Stat[];
   activeCluster: Cluster;
   fieldNames: Array<{ field: string; name: string }>;
   focusStat: FocusStat;
+  phrases: Phrases;
 }>();
 
 const expected = computed(
@@ -181,6 +218,14 @@ const activeFocusStats = computed(() => {
     (a) => a.name.toUpperCase() === props.focusStat.value.toUpperCase(),
   );
 });
+
+const gapPhrase = compile(props.phrases.gap);
+const allResidents = compile(props.phrases.allResidents);
+const noGap = compile(props.phrases.noGap);
+const noInfo = compile(props.phrases.noInfo);
+const highest = compile(props.phrases.highest);
+const kpiTitle = compile(props.phrases.kpiTitle);
+const gapKpiTitle = compile(props.phrases.gapKpiTitle);
 </script>
 
 <style scoped lang="scss">
diff --git a/src/env.d.ts b/src/env.d.ts
index 5a12756..f547970 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -29,6 +29,7 @@ interface Phrases {
   noInfo: string;
   highest: string;
   kpiTitle: string;
+  gapKpiTitle: string;
 }
 
 interface ClusterBarrier extends Barrier {
diff --git a/src/views/datasets/booster-gap/dashboard.vue b/src/views/datasets/booster-gap/dashboard.vue
index ddad0c3..aefe38b 100644
--- a/src/views/datasets/booster-gap/dashboard.vue
+++ b/src/views/datasets/booster-gap/dashboard.vue
@@ -109,6 +109,7 @@
             { field: 'total', name: 'All Residents' },
           ]"
           :focus-stat="controls.focusStat"
+          :phrases="phrases"
         />
         <div :class="{ invisible: activeCluster.name === '' }">
           <router-link
@@ -313,6 +314,21 @@ const updateCluster = (newClusterId) => {
   activeCluster.value = clusterIdToCluster(newClusterId);
   dashboardActiveCluster.value = activeCluster.value;
 };
+
+// setup phrases for card text
+const phrases = {
+  gap: "In {{ name }}, <strong>{{ pct }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedPct }} total vaccinations statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to be vaccinated to close this gap.",
+  allResidents:
+    "In {{ name }}, the largest gap was among {{ minRaceName }} residents. Only <strong>{{ pct }} of {{ name }} residents</strong> are vaccinated compared to {{ expectedPct }} statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to receive a dose to close this gap.",
+  noGap:
+    "In {{ name }}, <strong>{{ pct }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedPct }} total vaccinations statewide.",
+  noInfo:
+    "In {{ name }}, there isn't enough vaccine data on <strong>{{ race }} residents</strong> to determine their vaccination status or the number of vaccine doses needed to close the gap.",
+  highest:
+    "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ pct }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
+  kpiTitle: "{{ race }} residents vaccinated in {{ name }}",
+  gapKpiTitle: "Approximate vaccine doses for {{ race }} residents needed to close the gap",
+};
 </script>
 
 <style scoped>
diff --git a/src/views/datasets/vaccine-gap/dashboard.vue b/src/views/datasets/vaccine-gap/dashboard.vue
index ba1a592..347f95b 100644
--- a/src/views/datasets/vaccine-gap/dashboard.vue
+++ b/src/views/datasets/vaccine-gap/dashboard.vue
@@ -105,6 +105,7 @@
             { field: 'total', name: 'All Residents' },
           ]"
           :focus-stat="controls.focusStat"
+          :phrases="phrases"
         />
         <div :class="{ invisible: activeCluster.name === '' }">
           <router-link
@@ -308,6 +309,21 @@ const updateCluster = (newClusterId) => {
   activeCluster.value = clusterIdToCluster(newClusterId);
   dashboardActiveCluster.value = activeCluster.value;
 };
+
+const phrases = {
+  gap: "In {{ name }}, <strong>{{ pct }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedPct }} total vaccinations statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to be vaccinated to close this gap.",
+  allResidents:
+    "In {{ name }}, the largest gap was among {{ minRaceName }} residents. Only <strong>{{ pct }} of {{ name }} residents</strong> are vaccinated compared to {{ expectedPct }} statewide. Approximately <strong>{{ gap }} more {{ minRaceName }} residents</strong> need to receive a dose to close this gap.",
+  noGap:
+    "In {{ name }}, <strong>{{ pct }}</strong> of {{ race }} residents are vaccinated compared to our goal of {{ expectedPct }} total vaccinations statewide.",
+  noInfo:
+    "In {{ name }}, there isn't enough vaccine data on <strong>{{ race }} residents</strong> to determine their vaccination status or the number of vaccine doses needed to close the gap.",
+  highest:
+    "The largest gap is among <strong>{{ minRaceName }} residents</strong>. Only <strong>{{ pct }}</strong> of {{ minRaceName }} residents are vaccinated. Approximately <strong>{{ gap }}</strong> more {{ minRaceName }} residents need to be vaccinated to close this gap.",
+  kpiTitle: "{{ race }} residents vaccinated in {{ name }}",
+  gapKpiTitle:
+    "Approximate vaccine doses for {{ race }} residents needed to close the gap",
+};
 </script>
 
 <style scoped>