diff --git a/VueApp/src/CTS/__tests__/assessment-bubble.test.ts b/VueApp/src/CTS/__tests__/assessment-bubble.test.ts
new file mode 100644
index 000000000..a15f0daed
--- /dev/null
+++ b/VueApp/src/CTS/__tests__/assessment-bubble.test.ts
@@ -0,0 +1,160 @@
+import { mount } from "@vue/test-utils"
+import { Quasar } from "quasar"
+
+import AssessmentBubble from "../components/AssessmentBubble.vue"
+
+/**
+ * Tests for AssessmentBubble — the rating dot rendered on CTS assessment lists.
+ *
+ * Focus areas:
+ * 1. Privacy: aria-label must surface the descriptive rating label, never the
+ *    numeric value. Students should not hear "Rating 1 of 5" from a screen
+ *    reader when they are low-rated.
+ * 2. Class mapping: value/maxValue drive the bubbleClass contract consumed
+ *    by cts.css.
+ * 3. Click contract: clickable variant (id prop set) emits bubble-click with
+ *    the id; non-clickable variant renders as a non-interactive span.
+ */
+
+function createWrapper(props: Record<string, unknown>) {
+    return mount(AssessmentBubble, {
+        props: props as never,
+        global: {
+            plugins: [[Quasar, {}]],
+        },
+    })
+}
+
+describe(AssessmentBubble, () => {
+    describe("aria-label privacy", () => {
+        it("uses levelName on the clickable button and does not expose the numeric value", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 1,
+                levelName: "Trust with indirect supervision",
+                id: 42,
+            })
+
+            const label = wrapper.get("button").attributes("aria-label")!
+            expect(label).toContain("Trust with indirect supervision")
+            expect(label).not.toMatch(/\b1 of 5\b/i)
+            expect(label).not.toMatch(/rating\s+\d/i)
+        })
+
+        it("uses levelName on the standalone span and does not expose the numeric value", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 2,
+                levelName: "Trust with direct supervision",
+            })
+
+            const label = wrapper.get('span[role="img"]').attributes("aria-label")!
+            expect(label).toBe("Trust with direct supervision")
+            expect(label).not.toMatch(/\b2 of 5\b/i)
+        })
+
+        it("appends open-details hint on the clickable variant", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 3,
+                levelName: "Independent remote supervision",
+                id: 7,
+            })
+
+            expect(wrapper.get("button").attributes("aria-label")).toBe(
+                "Independent remote supervision, open assessment details",
+            )
+        })
+
+        it("falls back to a generic hint when levelName is missing on a clickable bubble", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 3,
+                id: 7,
+            })
+
+            expect(wrapper.get("button").attributes("aria-label")).toBe("Open assessment details")
+        })
+    })
+
+    describe("bubbleClass contract", () => {
+        it.each([
+            [1, "assessmentBubble5_1"],
+            [2, "assessmentBubble5_2"],
+            [3, "assessmentBubble5_3"],
+            [4, "assessmentBubble5_4"],
+            [5, "assessmentBubble5_5"],
+        ])("maps value=%i to %s", (value, expected) => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value,
+                levelName: "Label",
+            })
+
+            expect(wrapper.get('span[role="img"]').classes()).toContain(expected)
+        })
+
+        it.each([0, 6])("yields no level class for out-of-range value=%i", (value) => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value,
+                levelName: "Label",
+            })
+
+            const classes = wrapper.get('span[role="img"]').classes()
+            expect(classes.some((c) => c.startsWith("assessmentBubble5_"))).toBeFalsy()
+        })
+
+        it("yields no level class when maxValue is not 5", () => {
+            const wrapper = createWrapper({
+                maxValue: 3,
+                value: 2,
+                levelName: "Label",
+            })
+
+            const classes = wrapper.get('span[role="img"]').classes()
+            expect(classes.some((c) => c.startsWith("assessmentBubble5_"))).toBeFalsy()
+        })
+    })
+
+    describe("click behaviour", () => {
+        it("renders a button and emits bubble-click with the id when clicked", async () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 3,
+                levelName: "Label",
+                id: 99,
+            })
+
+            await wrapper.get("button").trigger("click")
+
+            expect(wrapper.emitted("bubble-click")).toEqual([[99]])
+        })
+
+        it("renders a non-interactive span and does not emit when id is omitted", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 3,
+                levelName: "Label",
+            })
+
+            expect(wrapper.find("button").exists()).toBeFalsy()
+            expect(wrapper.find('span[role="img"]').exists()).toBeTruthy()
+            expect(wrapper.emitted("bubble-click")).toBeUndefined()
+        })
+    })
+
+    describe("bubble content", () => {
+        it("does not render the numeric value inside the bubble", () => {
+            const wrapper = createWrapper({
+                maxValue: 5,
+                value: 4,
+                levelName: "Label",
+                id: 1,
+            })
+
+            const bubble = wrapper.get("span.assessmentBubble")
+            expect(bubble.text()).toBe("")
+        })
+    })
+})
diff --git a/VueApp/src/CTS/assets/cts.css b/VueApp/src/CTS/assets/cts.css
index 35d9d7a77..41c22753c 100644
--- a/VueApp/src/CTS/assets/cts.css
+++ b/VueApp/src/CTS/assets/cts.css
@@ -1,6 +1,12 @@
 .assessmentGroup {
     border-top: 1px solid silver;
 }
+
+.expandToggleCol {
+    flex: 0 0 2.5rem;
+    max-width: 2.5rem;
+    text-align: right;
+}
 /*
 .assessmentbubble {
     width: 15px;
@@ -51,24 +57,99 @@
     color: rgba(11,3,139,1);
 }
 */
+.assessmentBubbleTrigger {
+    background: none;
+    border: 0;
+    padding: 0;
+    margin: 0 0.25rem 0 0;
+    line-height: 0;
+    color: inherit;
+    cursor: pointer;
+}
+
+.assessmentBubble[role="img"] {
+    margin-right: 0.25rem;
+}
+
+.assessmentBubbleTooltipText {
+    white-space: pre-wrap;
+}
+
+.assessmentBubbleTrigger:focus-visible {
+    outline: 2px solid var(--q-primary);
+    outline-offset: 2px;
+    border-radius: 50%;
+}
+
+.assessmentBubble {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+}
+
 .assessmentBubble5_1 {
-    color: rgba(62, 127, 238, 0.3);
+    background-color: rgba(62, 127, 238, 0.3);
+    color: #212529;
 }
 
 .assessmentBubble5_2 {
-    color: rgba(62, 127, 238, 0.7);
+    background-color: rgba(62, 127, 238, 0.7);
+    color: #212529;
 }
 
 .assessmentBubble5_3 {
-    color: rgba(62, 127, 238, 1);
+    background-color: rgba(62, 127, 238, 1);
+    color: #000;
 }
 
 .assessmentBubble5_4 {
-    color: rgba(0, 44, 175, 0.8);
+    background-color: rgba(0, 44, 175, 0.8);
+    color: #fff;
 }
 
 .assessmentBubble5_5 {
-    color: rgba(11, 3, 139, 1);
+    background-color: rgba(11, 3, 139, 1);
+    color: #fff;
+}
+
+/* Style 1 — legacy palette (size matches current bubble) */
+.assessmentBubble--legacy.assessmentBubble5_1 {
+    background-color: rgba(174, 235, 255, 1);
+    color: #212529;
+}
+.assessmentBubble--legacy.assessmentBubble5_2 {
+    background-color: rgba(134, 198, 255, 1);
+    color: #212529;
+}
+.assessmentBubble--legacy.assessmentBubble5_3 {
+    background-color: rgba(62, 127, 238, 1);
+    color: #000;
+}
+.assessmentBubble--legacy.assessmentBubble5_4 {
+    background-color: rgba(0, 44, 219, 1);
+    color: #fff;
+}
+.assessmentBubble--legacy.assessmentBubble5_5 {
+    background-color: rgba(11, 3, 139, 1);
+    color: #fff;
+}
+
+/* Style 3 — abbreviation pill (keeps current palette, stretches shape) */
+.assessmentBubble--abbrev {
+    width: auto;
+    min-width: 1.5rem;
+    padding: 0 0.45rem;
+    border-radius: 0.75rem;
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
 }
 
 .assessmentBubbleCloser5_1 {
@@ -91,6 +172,426 @@
     color: rgba(2, 40, 150, 1);
 }
 
+.levelChip {
+    display: inline-block;
+    padding: 0.125rem 0.625rem;
+    border-radius: 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.25;
+    white-space: nowrap;
+    background-color: #adb5bd;
+    color: #212529;
+}
+.levelChip--1 {
+    background-color: rgba(62, 127, 238, 0.3);
+    color: #212529;
+}
+.levelChip--2 {
+    background-color: rgba(62, 127, 238, 0.7);
+    color: #212529;
+}
+.levelChip--3 {
+    background-color: rgba(62, 127, 238, 1);
+    color: #000;
+}
+.levelChip--4 {
+    background-color: rgba(0, 44, 175, 0.8);
+    color: #fff;
+}
+.levelChip--5 {
+    background-color: rgba(11, 3, 139, 1);
+    color: #fff;
+}
+
+.assessmentComment {
+    font-style: italic;
+}
+
+/* Shared dot colors (used by EpaProgressionChart SVG circles and inline byline dots) */
+.cts-dot-1 {
+    fill: rgb(62 127 238 / 30%);
+    background-color: rgb(62 127 238 / 30%);
+}
+.cts-dot-2 {
+    fill: rgb(62 127 238 / 70%);
+    background-color: rgb(62 127 238 / 70%);
+}
+.cts-dot-3 {
+    fill: rgb(62 127 238 / 100%);
+    background-color: rgb(62 127 238 / 100%);
+}
+.cts-dot-4 {
+    fill: rgb(0 44 175 / 80%);
+    background-color: rgb(0 44 175 / 80%);
+}
+.cts-dot-5 {
+    fill: rgb(11 3 139 / 100%);
+    background-color: rgb(11 3 139 / 100%);
+}
+
+/* ── Style 4: Voices in the Margin ── */
+.epaThread {
+    background: #ffffff;
+    border: 1px solid #e8e4dc;
+    border-radius: 0.5rem;
+    padding: 1.375rem 1.75rem;
+    margin-bottom: 1.125rem;
+}
+.epaThreadHeader {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+    border-bottom: 1px solid #e8e4dc;
+    padding-bottom: 0.75rem;
+    margin-bottom: 1.125rem;
+}
+.epaThreadTitle {
+    font-family: Georgia, "Times New Roman", serif;
+    font-style: italic;
+    font-weight: 500;
+    font-size: 1.125rem;
+    color: var(--ucdavis-blue-100, #022851);
+    line-height: 1.3;
+}
+.epaThreadCount {
+    font-size: 0.72rem;
+    font-weight: 500;
+    color: #6c757d;
+    text-transform: lowercase;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+.epaThreadEmpty {
+    font-style: italic;
+    font-size: 0.85rem;
+    color: #616161;
+}
+.epaThreadContent {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.5rem;
+}
+.epaThreadBody {
+    flex: 1;
+    min-width: 0;
+    display: grid;
+    grid-template-columns: 2rem 1fr;
+    position: relative;
+}
+.epaThreadGutter {
+    grid-column: 1;
+    grid-row: 1 / -1;
+    position: relative;
+    width: 2rem;
+}
+.epaThreadGutter svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 2rem;
+    overflow: visible;
+    pointer-events: none;
+}
+.epaThread--sparse .epaThreadGutter::before {
+    content: "";
+    position: absolute;
+    left: 0.8125rem;
+    top: 1rem;
+    bottom: 1rem;
+    width: 0.1875rem;
+    background: #ffc519;
+    opacity: 0.45;
+    border-radius: 0.125rem;
+}
+.epaVoice {
+    grid-column: 2;
+    padding: 0.875rem 0 0.875rem 1.25rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.12s;
+}
+.epaVoice + .epaVoice {
+    border-top: 1px solid #f0ece4;
+}
+.epaVoice--active {
+    background-color: rgba(2, 40, 81, 0.05);
+}
+.epaVoice:focus-visible {
+    outline: 2px solid var(--q-primary);
+    outline-offset: 2px;
+}
+.epaVoiceQuote {
+    font-family: Georgia, "Times New Roman", serif;
+    font-style: italic;
+    font-size: 1rem;
+    line-height: 1.6;
+    color: #1a1a1a;
+    margin: 0 0 0.5rem;
+}
+.epaVoiceNoComment {
+    font-size: 0.85rem;
+    color: #adb5bd;
+    font-style: italic;
+    margin-bottom: 0.5rem;
+}
+.epaVoiceByline {
+    font-size: 0.8rem;
+    color: #6c757d;
+    line-height: 1.55;
+}
+.epaVoiceByline strong {
+    color: var(--ucdavis-blue-100, #022851);
+    font-weight: 600;
+}
+.epaVoiceSupervision {
+    font-style: italic;
+    display: block;
+}
+.epaVoiceLevelDot {
+    display: inline-block;
+    width: 0.7em;
+    height: 0.7em;
+    border-radius: 50%;
+    vertical-align: -0.05em;
+    margin-right: 0.4em;
+    border: 1px solid rgba(2, 40, 81, 0.15);
+}
+.epaThreadMore {
+    grid-column: 2;
+    margin: 0.5rem 0 0 1.25rem;
+    font-size: 0.8rem;
+    color: var(--ucdavis-blue-100, #022851);
+    background: none;
+    border: none;
+    border-bottom: 1px dotted var(--ucdavis-blue-100, #022851);
+    padding: 0 0 1px;
+    cursor: pointer;
+    text-align: left;
+    opacity: 0.75;
+}
+.epaThreadMore:hover,
+.epaThreadMore:focus-visible {
+    opacity: 1;
+}
+.epaThreadMore:focus-visible {
+    outline: 2px solid var(--q-primary);
+    outline-offset: 2px;
+}
+.epaChartPanel {
+    flex-shrink: 0;
+    padding-top: 0.125rem;
+}
+.epaChartPanel svg {
+    display: block;
+    overflow: visible;
+}
+.epaChartButton {
+    flex-shrink: 0;
+    padding: 0.25rem;
+    background: none;
+    border: 1px solid transparent;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition:
+        border-color 0.12s,
+        background-color 0.12s;
+}
+.epaChartButton:hover,
+.epaChartButton:focus-visible {
+    border-color: var(--ucdavis-blue-100, #022851);
+    background-color: rgba(2, 40, 81, 0.03);
+}
+.epaChartButton:focus-visible {
+    outline: 2px solid var(--q-primary);
+    outline-offset: 2px;
+}
+.epaChartExpandHint {
+    display: block;
+    font-size: 0.7rem;
+    color: #6c757d;
+    text-align: center;
+    margin-top: 0.25rem;
+    letter-spacing: 0.03em;
+    transition: color 0.12s;
+}
+.epaChartButton:hover .epaChartExpandHint,
+.epaChartButton:focus-visible .epaChartExpandHint {
+    color: var(--ucdavis-blue-100, #022851);
+}
+@media (max-width: 599px) {
+    .epaThreadContent {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    .epaChartButton {
+        align-self: center;
+        order: -1;
+    }
+}
+
+/* Style toggle (segmented control on MyAssessments) */
+.assessmentStyleToggle {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+/* ── Style 5: Supervision Blend ── */
+.epaBlend {
+    background: #ffffff;
+    border: 1px solid #e8e4dc;
+    border-radius: 0.5rem;
+    padding: 1.375rem 1.75rem;
+    margin-bottom: 1.125rem;
+}
+.epaBlendHeader {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1rem;
+    border-bottom: 1px solid #e8e4dc;
+    padding-bottom: 0.75rem;
+    margin-bottom: 1.125rem;
+}
+.epaBlendTitle {
+    font-family: Georgia, "Times New Roman", serif;
+    font-style: italic;
+    font-weight: 500;
+    font-size: 1.125rem;
+    color: var(--ucdavis-blue-100, #022851);
+    line-height: 1.3;
+}
+.epaBlendCount {
+    font-size: 0.72rem;
+    font-weight: 500;
+    color: #6c757d;
+    text-transform: lowercase;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+.epaBlendEmpty {
+    font-style: italic;
+    font-size: 0.85rem;
+    color: #616161;
+}
+.epaBlendBar {
+    display: flex;
+    width: 100%;
+    height: 1.5rem;
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: #f0ece4;
+    margin-bottom: 0.875rem;
+}
+.epaBlendSegment {
+    height: 100%;
+    box-shadow: inset -1px 0 0 #ffffff;
+    transition: width 0.2s;
+}
+.epaBlendSegment:last-child {
+    box-shadow: none;
+}
+.epaBlendSegment--lv-1 {
+    background-color: rgba(62, 127, 238, 0.3);
+}
+.epaBlendSegment--lv-2 {
+    background-color: rgba(62, 127, 238, 0.7);
+}
+.epaBlendSegment--lv-3 {
+    background-color: rgba(62, 127, 238, 1);
+}
+.epaBlendSegment--lv-4 {
+    background-color: rgba(0, 44, 175, 0.8);
+}
+.epaBlendSegment--lv-5 {
+    background-color: rgba(11, 3, 139, 1);
+}
+.epaBlendLegend {
+    list-style: none;
+    margin: 0 0 1.25rem;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.25rem;
+}
+.epaBlendLegendItem {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: #1a1d2e;
+}
+.epaBlendSwatch {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 0.1875rem;
+    flex-shrink: 0;
+}
+.epaBlendLegendLabel {
+    color: #1a1d2e;
+}
+.epaBlendLegendCount {
+    color: #6c757d;
+    font-variant-numeric: tabular-nums;
+}
+.epaBlendComments--withBar {
+    border-top: 1px solid #f0ece4;
+    padding-top: 0.875rem;
+}
+.epaBlendComment {
+    padding: 0.625rem 0;
+    border-top: 1px solid #f0ece4;
+}
+.epaBlendComment:first-child {
+    border-top: none;
+    padding-top: 0;
+}
+.epaBlendCommentText {
+    font-family: Georgia, "Times New Roman", serif;
+    font-style: italic;
+    font-size: 1rem;
+    line-height: 1.55;
+    color: #1a1a1a;
+    margin: 0 0 0.375rem;
+}
+.epaBlendCommentMissing {
+    font-size: 0.85rem;
+    color: #adb5bd;
+    font-style: italic;
+    margin-bottom: 0.375rem;
+}
+.epaBlendCommentMeta {
+    font-size: 0.8rem;
+    color: #6c757d;
+}
+.epaBlendCommentMeta strong {
+    color: var(--ucdavis-blue-100, #022851);
+    font-weight: 600;
+}
+.epaBlendMore {
+    margin: 0.5rem 0 0;
+    font-size: 0.8rem;
+    color: var(--ucdavis-blue-100, #022851);
+    background: none;
+    border: none;
+    border-bottom: 1px dotted var(--ucdavis-blue-100, #022851);
+    padding: 0 0 1px;
+    cursor: pointer;
+    text-align: left;
+    opacity: 0.75;
+}
+.epaBlendMore:hover,
+.epaBlendMore:focus-visible {
+    opacity: 1;
+}
+.epaBlendMore:focus-visible {
+    outline: 2px solid var(--q-primary);
+    outline-offset: 2px;
+}
+
 /*
 .assessmentbubble.ab5_1 {
     background-color: rgb(169, 208, 255)
@@ -105,6 +606,6 @@
     background-color: rgb(42, 60, 152)
 }
 .assessmentbubble.ab5_5 {
-    background-color: rgb(0, 11, 113) 
+    background-color: rgb(0, 11, 113)
 }
 */
diff --git a/VueApp/src/CTS/components/AssessmentBubble.vue b/VueApp/src/CTS/components/AssessmentBubble.vue
index 7a7c700e6..ce44eb75c 100644
--- a/VueApp/src/CTS/components/AssessmentBubble.vue
+++ b/VueApp/src/CTS/components/AssessmentBubble.vue
@@ -1,22 +1,40 @@
 <script setup lang="ts">
-import { ref, watch } from "vue"
+import { computed } from "vue"
 
-const props = withDefaults(
-    defineProps<{
-        maxValue: number
-        value: number
-        text?: string
-        id?: number
-    }>(),
-    {
-        text: undefined,
-        id: undefined,
+type DisplayStyle = "legacy" | "current" | "abbrev"
+
+const props = defineProps({
+    maxValue: {
+        type: Number,
+        required: true,
+    },
+    value: {
+        type: Number,
+        required: true,
+    },
+    levelName: {
+        type: String,
+        default: "",
+    },
+    text: {
+        type: String,
+        default: undefined,
+    },
+    id: {
+        type: Number,
+        default: undefined,
+    },
+    displayStyle: {
+        type: String as () => DisplayStyle,
+        default: "current",
+    },
+    abbreviation: {
+        type: String,
+        default: "",
     },
-)
+})
 
-const emit = defineEmits<{
-    "bubble-click": [id: number]
-}>()
+const emit = defineEmits(["bubble-click"])
 
 const classes5 = [
     "assessmentBubble5_1",
@@ -26,41 +44,49 @@ const classes5 = [
     "assessmentBubble5_5",
 ]
 
-const bubbleClass = ref("")
+const isValidValue = computed(() => props.maxValue === 5 && props.value > 0 && props.value <= 5)
 
-watch(props, () => {
-    setBubbleAttrs()
+const bubbleClasses = computed(() => {
+    const classes: string[] = ["assessmentBubble"]
+    if (props.displayStyle === "legacy") classes.push("assessmentBubble--legacy")
+    if (props.displayStyle === "abbrev") classes.push("assessmentBubble--abbrev")
+    if (isValidValue.value) classes.push(classes5[props.value - 1] ?? "")
+    return classes
 })
 
+const showAbbreviation = computed(() => props.displayStyle === "abbrev" && !!props.abbreviation)
+
 function clickBubble() {
     if (props.id !== undefined) {
         emit("bubble-click", props.id)
     }
 }
-
-function setBubbleAttrs() {
-    if (props.maxValue === 5 && props.value <= 5 && props.value > 0) {
-        const index = props.value - 1
-        bubbleClass.value = classes5[index] ?? ""
-    }
-}
-
-setBubbleAttrs()
 </script>
 <template>
-    <q-icon
-        name="circle"
-        size="sm"
-        :class="'assessmentIcon cursor-pointer ' + bubbleClass"
+    <button
+        v-if="id !== undefined"
+        type="button"
+        class="assessmentBubbleTrigger"
+        :aria-label="levelName ? `${levelName}, open assessment details` : 'Open assessment details'"
         @click="clickBubble"
     >
-        <q-tooltip
-            style="white-space: pre-wrap"
-            class="text-body2"
+        <span
+            :class="bubbleClasses"
+            aria-hidden="true"
         >
-            <strong>Click to open details</strong>
-            <br />
-            {{ props.text }}
+            <template v-if="showAbbreviation">{{ abbreviation }}</template>
+        </span>
+        <q-tooltip class="text-body2">
+            <div><strong>Click to open details</strong></div>
+            <div class="assessmentBubbleTooltipText">{{ props.text }}</div>
         </q-tooltip>
-    </q-icon>
+    </button>
+    <span
+        v-else
+        :class="bubbleClasses"
+        role="img"
+        :aria-label="levelName"
+    >
+        <template v-if="showAbbreviation">{{ abbreviation }}</template>
+    </span>
 </template>
diff --git a/VueApp/src/CTS/components/EpaProgressionChart.vue b/VueApp/src/CTS/components/EpaProgressionChart.vue
new file mode 100644
index 000000000..ca744838d
--- /dev/null
+++ b/VueApp/src/CTS/components/EpaProgressionChart.vue
@@ -0,0 +1,299 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { Assessment } from "@/CTS/types"
+
+type ChartSize = "compact" | "large"
+
+const props = withDefaults(
+    defineProps<{
+        assessments: Assessment[]
+        size?: ChartSize
+        activeEncounterId?: number | null
+    }>(),
+    { size: "compact", activeEncounterId: null },
+)
+
+const emit = defineEmits<{
+    "hover-dot": [id: number]
+    "leave-dot": []
+}>()
+
+const DENSE_THRESHOLD = 8
+
+const geometry = computed(() => {
+    if (props.size === "large") {
+        return {
+            VW: 720,
+            VH: 360,
+            LBL: 24,
+            TOP: 24,
+            LANE_H: 56,
+            MONTH_FONT: 12,
+            DOT_R_DEFAULT: 7,
+            DOT_R_DENSE: 5.5,
+            DOT_STROKE: 2.5,
+            MIN_TICK_SPACING: 56,
+        }
+    }
+    return {
+        VW: 214,
+        VH: 132,
+        LBL: 12,
+        TOP: 10,
+        LANE_H: 20,
+        MONTH_FONT: 7.5,
+        DOT_R_DEFAULT: 4.5,
+        DOT_R_DENSE: 3.5,
+        DOT_STROKE: 1.5,
+        MIN_TICK_SPACING: 26,
+    }
+})
+
+const CH = computed(() => geometry.value.LANE_H * 5)
+const CW = computed(() => geometry.value.VW - geometry.value.LBL - 6)
+
+const sorted = computed(() =>
+    [...props.assessments].sort((a, b) => new Date(a.encounterDate).getTime() - new Date(b.encounterDate).getTime()),
+)
+
+const dotRadius = computed(() =>
+    sorted.value.length >= DENSE_THRESHOLD ? geometry.value.DOT_R_DENSE : geometry.value.DOT_R_DEFAULT,
+)
+
+const dateBounds = computed(() => {
+    if (sorted.value.length === 0) {
+        const now = Date.now()
+        return { min: now, max: now }
+    }
+    const times = sorted.value.map((a) => new Date(a.encounterDate).getTime())
+    let min = Math.min(...times)
+    let max = Math.max(...times)
+    if (min === max) {
+        const dayMs = 86_400_000
+        min -= dayMs * 7
+        max += dayMs * 7
+    } else {
+        const pad = (max - min) * 0.05
+        min -= pad
+        max += pad
+    }
+    return { min, max }
+})
+
+function dotX(t: number): number {
+    const { min, max } = dateBounds.value
+    const range = max - min || 1
+    return geometry.value.LBL + ((t - min) / range) * CW.value
+}
+
+function dotY(level: number): number {
+    return geometry.value.TOP + (5 - level) * geometry.value.LANE_H + geometry.value.LANE_H / 2
+}
+
+const monthTicks = computed(() => {
+    const { min, max } = dateBounds.value
+    const start = new Date(min)
+    const all: { x: number; label: string }[] = []
+    const cursor = new Date(start.getFullYear(), start.getMonth(), 1)
+    while (cursor.getTime() <= max) {
+        if (cursor.getTime() >= min) {
+            all.push({
+                x: dotX(cursor.getTime()),
+                label: cursor.toLocaleDateString("en-US", { month: "short" }),
+            })
+        }
+        cursor.setMonth(cursor.getMonth() + 1)
+    }
+    if (all.length <= 1) return all
+
+    const targetCount = Math.max(2, Math.floor(CW.value / geometry.value.MIN_TICK_SPACING))
+    const step = Math.max(1, Math.ceil(all.length / targetCount))
+    return all.filter((_, i) => i % step === 0 || i === all.length - 1)
+})
+
+// Group same-day assessments and spread their cx symmetrically so duplicate
+// dates don't render on top of each other. Re-sort by cx so the spline draws
+// monotonically left-to-right through the (possibly jittered) sequence.
+const dots = computed(() => {
+    type Dot = { cx: number; cy: number; levelValue: number; encounterId: number }
+    const groups = new Map<number, Assessment[]>()
+    for (const a of sorted.value) {
+        const day = new Date(a.encounterDate)
+        day.setHours(0, 0, 0, 0)
+        const key = day.getTime()
+        const list = groups.get(key)
+        if (list) list.push(a)
+        else groups.set(key, [a])
+    }
+    const result: Dot[] = []
+    const step = dotRadius.value * 2.4
+    for (const list of groups.values()) {
+        const baseX = dotX(new Date(list[0].encounterDate).getTime())
+        const mid = (list.length - 1) / 2
+        list.forEach((a, i) => {
+            result.push({
+                cx: baseX + (i - mid) * step,
+                cy: dotY(a.levelValue),
+                levelValue: a.levelValue,
+                encounterId: a.encounterId,
+            })
+        })
+    }
+    result.sort((a, b) => a.cx - b.cx)
+    return result
+})
+
+const activeDot = computed(() => {
+    if (props.activeEncounterId === null) return null
+    return dots.value.find((d) => d.encounterId === props.activeEncounterId) ?? null
+})
+
+// Smooth path through every dot.
+// 2 points → quadratic with a vertical bulge (up if level rises, down if it falls).
+// 3+ points → Catmull-Rom spline converted to cubic Béziers.
+const splinePath = computed(() => {
+    const pts = dots.value
+    if (pts.length < 2) return ""
+
+    if (pts.length === 2) {
+        const [p0, p1] = pts
+        const midX = (p0.cx + p1.cx) / 2
+        const midY = (p0.cy + p1.cy) / 2
+        const bulge = geometry.value.LANE_H * 0.3
+        // SVG: smaller y = higher on screen. Higher level value = smaller cy.
+        // dy > 0 → second dot is lower (rating dropped); arch downward.
+        // dy < 0 → second dot is higher (rating rose); arch upward.
+        const dy = p1.cy - p0.cy
+        const cpy = dy === 0 ? midY : midY + Math.sign(dy) * bulge
+        return `M ${p0.cx.toFixed(1)} ${p0.cy.toFixed(1)} Q ${midX.toFixed(1)} ${cpy.toFixed(1)} ${p1.cx.toFixed(1)} ${p1.cy.toFixed(1)}`
+    }
+
+    let d = `M ${pts[0].cx.toFixed(1)} ${pts[0].cy.toFixed(1)}`
+    for (let i = 1; i < pts.length; i++) {
+        const p0 = pts[Math.max(0, i - 2)]
+        const p1 = pts[i - 1]
+        const p2 = pts[i]
+        const p3 = pts[Math.min(pts.length - 1, i + 1)]
+        const cp1x = (p1.cx + (p2.cx - p0.cx) / 6).toFixed(1)
+        const cp1y = (p1.cy + (p2.cy - p0.cy) / 6).toFixed(1)
+        const cp2x = (p2.cx - (p3.cx - p1.cx) / 6).toFixed(1)
+        const cp2y = (p2.cy - (p3.cy - p1.cy) / 6).toFixed(1)
+        d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.cx.toFixed(1)} ${p2.cy.toFixed(1)}`
+    }
+    return d
+})
+
+const dotFillClasses = ["", "cts-dot-1", "cts-dot-2", "cts-dot-3", "cts-dot-4", "cts-dot-5"]
+</script>
+<template>
+    <div :class="['epaChartPanel', `epaChartPanel--${size}`]">
+        <svg
+            :viewBox="`0 0 ${geometry.VW} ${geometry.VH}`"
+            :width="geometry.VW"
+            :height="geometry.VH"
+            preserveAspectRatio="xMidYMid meet"
+            aria-hidden="true"
+        >
+            <line
+                :x1="geometry.LBL"
+                :y1="geometry.TOP + CH"
+                :x2="geometry.LBL + CW"
+                :y2="geometry.TOP + CH"
+                stroke="rgba(2,40,81,0.1)"
+                stroke-width="0.75"
+            />
+            <text
+                v-for="(tick, i) in monthTicks"
+                :key="`m-${i}`"
+                :x="tick.x.toFixed(1)"
+                :y="geometry.TOP + CH + geometry.MONTH_FONT + 4"
+                text-anchor="middle"
+                fill="#adb5bd"
+                :font-size="geometry.MONTH_FONT"
+            >
+                {{ tick.label }}
+            </text>
+            <path
+                v-if="splinePath"
+                :d="splinePath"
+                fill="none"
+                stroke="rgba(2,40,81,0.2)"
+                stroke-width="1"
+                stroke-linecap="round"
+            />
+            <circle
+                v-if="activeDot"
+                class="epaChartDotHalo"
+                :cx="activeDot.cx.toFixed(1)"
+                :cy="activeDot.cy.toFixed(1)"
+                :r="(dotRadius * 1.9).toFixed(1)"
+                fill="#ffc519"
+                fill-opacity="0.45"
+            />
+            <!-- Mouse-only visual sync inside an aria-hidden chart; the
+                 review list is the canonical keyboard-accessible surface. -->
+            <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/mouse-events-have-key-events -->
+            <circle
+                v-for="dot in dots"
+                :key="dot.encounterId"
+                class="epaChartDot"
+                :class="[
+                    dotFillClasses[dot.levelValue],
+                    { 'epaChartDot--active': dot.encounterId === activeEncounterId },
+                ]"
+                :cx="dot.cx.toFixed(1)"
+                :cy="dot.cy.toFixed(1)"
+                :r="dotRadius"
+                :stroke="dot.encounterId === activeEncounterId ? '#022851' : 'white'"
+                :stroke-width="geometry.DOT_STROKE"
+                @mouseenter="emit('hover-dot', dot.encounterId)"
+                @mouseleave="emit('leave-dot')"
+            />
+        </svg>
+    </div>
+</template>
+
+<style scoped>
+.epaChartPanel--compact svg {
+    width: 13.375rem;
+    height: 9.25rem;
+}
+
+@media (width >= 1200px) {
+    .epaChartPanel--compact svg {
+        width: 17rem;
+        height: 11.75rem;
+    }
+}
+
+@media (width >= 1600px) {
+    .epaChartPanel--compact svg {
+        width: 21rem;
+        height: 14.5rem;
+    }
+}
+
+.epaChartPanel--large svg {
+    width: 100%;
+    height: auto;
+    max-width: 45rem;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+    .epaChartDot {
+        cursor: pointer;
+        transition: none;
+    }
+}
+
+.epaChartDot {
+    cursor: pointer;
+    transition:
+        r 0.12s,
+        stroke 0.12s;
+}
+
+.epaChartDotHalo {
+    pointer-events: none;
+}
+</style>
diff --git a/VueApp/src/CTS/components/EpaSupervisionBlend.vue b/VueApp/src/CTS/components/EpaSupervisionBlend.vue
new file mode 100644
index 000000000..9631b94c4
--- /dev/null
+++ b/VueApp/src/CTS/components/EpaSupervisionBlend.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { Assessment, Epa } from "@/CTS/types"
+import { useDateFunctions } from "@/composables/DateFunctions"
+import { inflect } from "inflection"
+
+const props = defineProps<{
+    epa: Epa
+    assessments: Assessment[]
+}>()
+
+const { formatDate } = useDateFunctions()
+
+const total = computed(() => props.assessments.length)
+
+// Chronological order — drives both the bar segments and the comment list
+// so the leftmost segment lines up with the first comment shown.
+const sortedChronological = computed(() =>
+    [...props.assessments].sort((a, b) => new Date(a.encounterDate).getTime() - new Date(b.encounterDate).getTime()),
+)
+
+// One bar segment per assessment, equal width, in chronological order.
+const segments = computed(() => {
+    const width = total.value > 0 ? 100 / total.value : 0
+    return sortedChronological.value.map((a) => ({
+        encounterId: a.encounterId,
+        levelValue: a.levelValue,
+        levelName: a.levelName,
+        date: a.encounterDate,
+        widthPct: width,
+    }))
+})
+
+// Legend totals: counts per supervision level, ordered by rank.
+const legendTotals = computed(() => {
+    const map = new Map<number, { levelValue: number; levelName: string; count: number }>()
+    for (const a of props.assessments) {
+        const existing = map.get(a.levelValue)
+        if (existing) {
+            existing.count++
+        } else {
+            map.set(a.levelValue, { levelValue: a.levelValue, levelName: a.levelName, count: 1 })
+        }
+    }
+    return [...map.values()].sort((a, b) => a.levelValue - b.levelValue)
+})
+
+const countLabel = computed(() => {
+    const n = total.value
+    if (n === 0) return "no assessments"
+    return `${n} ${inflect("assessment", n)}`
+})
+</script>
+<template>
+    <article class="epaBlend">
+        <header class="epaBlendHeader">
+            <h3 class="epaBlendTitle">{{ epa.name }}</h3>
+            <div class="epaBlendCount">{{ countLabel }}</div>
+        </header>
+
+        <div
+            v-if="total === 0"
+            class="epaBlendEmpty"
+        >
+            No assessments recorded yet.
+        </div>
+
+        <template v-else>
+            <div
+                class="epaBlendBar"
+                role="img"
+                :aria-label="`Supervision context for each assessment of ${epa.name}, in chronological order`"
+            >
+                <div
+                    v-for="seg in segments"
+                    :key="seg.encounterId"
+                    :class="['epaBlendSegment', `epaBlendSegment--lv-${seg.levelValue}`]"
+                    :style="{ width: `${seg.widthPct}%` }"
+                    :title="`${seg.levelName} — ${formatDate(seg.date.toString())}`"
+                />
+            </div>
+
+            <ul class="epaBlendLegend">
+                <li
+                    v-for="lt in legendTotals"
+                    :key="lt.levelValue"
+                    class="epaBlendLegendItem"
+                >
+                    <span :class="['epaBlendSwatch', `epaBlendSegment--lv-${lt.levelValue}`]" />
+                    <span class="epaBlendLegendLabel">{{ lt.levelName }}</span>
+                    <span class="epaBlendLegendCount">{{ lt.count }}</span>
+                </li>
+            </ul>
+
+            <div class="epaBlendComments epaBlendComments--withBar">
+                <div
+                    v-for="a in sortedChronological"
+                    :key="a.encounterId"
+                    class="epaBlendComment"
+                >
+                    <div
+                        v-if="a.comment"
+                        class="epaBlendCommentText"
+                    >
+                        {{ a.comment }}
+                    </div>
+                    <div
+                        v-else
+                        class="epaBlendCommentMissing"
+                    >
+                        (No comment recorded)
+                    </div>
+                    <div class="epaBlendCommentMeta">
+                        <strong>{{ a.enteredByName }}</strong>
+                        <span v-if="a.serviceName"> &middot; {{ a.serviceName }}</span>
+                        &middot; {{ formatDate(a.encounterDate.toString()) }}
+                    </div>
+                </div>
+            </div>
+        </template>
+    </article>
+</template>
diff --git a/VueApp/src/CTS/components/EpaVoiceThread.vue b/VueApp/src/CTS/components/EpaVoiceThread.vue
new file mode 100644
index 000000000..f1a822bef
--- /dev/null
+++ b/VueApp/src/CTS/components/EpaVoiceThread.vue
@@ -0,0 +1,264 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from "vue"
+import type { Assessment, Epa } from "@/CTS/types"
+import { useDateFunctions } from "@/composables/DateFunctions"
+import { inflect } from "inflection"
+import EpaProgressionChart from "@/CTS/components/EpaProgressionChart.vue"
+
+const VOICES_THRESHOLD = 5
+const CHART_THRESHOLD = 2
+
+const props = defineProps<{
+    epa: Epa
+    assessments: Assessment[]
+}>()
+
+const { formatDate } = useDateFunctions()
+const showAll = ref(false)
+const showChartDialog = ref(false)
+const chartDialogTitleId = computed(() => `chart-dialog-title-${props.epa.epaId ?? "new"}`)
+const activeEncounterId = ref<number | null>(null)
+function setActive(id: number) {
+    activeEncounterId.value = id
+}
+function clearActive() {
+    activeEncounterId.value = null
+}
+
+const sorted = computed(() =>
+    [...props.assessments].sort((a, b) => new Date(b.encounterDate).getTime() - new Date(a.encounterDate).getTime()),
+)
+
+const visible = computed(() =>
+    showAll.value || sorted.value.length <= VOICES_THRESHOLD ? sorted.value : sorted.value.slice(0, VOICES_THRESHOLD),
+)
+
+const hiddenCount = computed(() => sorted.value.length - visible.value.length)
+const showChart = computed(() => sorted.value.length >= CHART_THRESHOLD)
+const isSparse = computed(() => sorted.value.length <= 1)
+const showGutterSvg = computed(() => sorted.value.length >= 2)
+
+const countLabel = computed(() => {
+    const n = sorted.value.length
+    if (n === 0) return "no assessments"
+    return `${n} ${inflect("assessment", n)}`
+})
+
+const gutterRef = ref<HTMLElement | null>(null)
+const gutterPath = ref("")
+const gutterDots = ref<{ x: number; y: number }[]>([])
+const gutterHeight = ref(0)
+
+function lvX(lv: number): number {
+    return 6 + (lv - 1) * 5
+}
+
+function buildGutter() {
+    const gutter = gutterRef.value
+    if (!gutter) return
+    const body = gutter.parentElement
+    if (!body) return
+
+    const voiceEls = Array.from(body.querySelectorAll<HTMLElement>(".epaVoice"))
+    if (voiceEls.length < 2) {
+        gutterPath.value = ""
+        gutterDots.value = []
+        gutterHeight.value = 0
+        return
+    }
+    const totalH = gutter.offsetHeight
+    if (totalH === 0) return
+
+    const gutterTop = gutter.getBoundingClientRect().top
+    const pts = voiceEls.map((el, i) => ({
+        x: lvX(visible.value[i]?.levelValue ?? 3),
+        y: el.getBoundingClientRect().top - gutterTop + 18,
+    }))
+
+    let d = `M ${pts[0].x} ${pts[0].y}`
+    for (let i = 1; i < pts.length; i++) {
+        const p0 = pts[Math.max(0, i - 2)]
+        const p1 = pts[i - 1]
+        const p2 = pts[i]
+        const p3 = pts[Math.min(pts.length - 1, i + 1)]
+        const cp1x = +(p1.x + (p2.x - p0.x) / 6).toFixed(1)
+        const cp1y = +(p1.y + (p2.y - p0.y) / 6).toFixed(1)
+        const cp2x = +(p2.x - (p3.x - p1.x) / 6).toFixed(1)
+        const cp2y = +(p2.y - (p3.y - p1.y) / 6).toFixed(1)
+        d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`
+    }
+
+    gutterPath.value = d
+    gutterDots.value = pts
+    gutterHeight.value = totalH
+}
+
+function scheduleGutter() {
+    nextTick(() => buildGutter())
+}
+
+onMounted(scheduleGutter)
+watch(visible, scheduleGutter)
+</script>
+<template>
+    <article :class="['epaThread', { 'epaThread--sparse': isSparse }]">
+        <header class="epaThreadHeader">
+            <h3 class="epaThreadTitle">{{ epa.name }}</h3>
+            <div class="epaThreadCount">{{ countLabel }}</div>
+        </header>
+
+        <div
+            v-if="sorted.length === 0"
+            class="epaThreadEmpty"
+        >
+            No assessments recorded yet.
+        </div>
+
+        <div
+            v-else
+            class="epaThreadContent"
+        >
+            <div class="epaThreadBody">
+                <div
+                    ref="gutterRef"
+                    class="epaThreadGutter"
+                >
+                    <svg
+                        v-if="showGutterSvg && gutterPath"
+                        :viewBox="`0 0 32 ${gutterHeight}`"
+                        :height="gutterHeight"
+                        width="32"
+                        aria-hidden="true"
+                    >
+                        <path
+                            :d="gutterPath"
+                            fill="none"
+                            stroke="#ffc519"
+                            stroke-opacity="0.65"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                        />
+                        <circle
+                            v-for="(p, i) in gutterDots"
+                            :key="i"
+                            :cx="p.x"
+                            :cy="p.y"
+                            r="4"
+                            fill="#022851"
+                            stroke="#fbfaf8"
+                            stroke-width="2.5"
+                        />
+                    </svg>
+                </div>
+                <!-- Hover/focus on a review only highlights styling and syncs
+                     the chart dot; no click action, so role="button" would be
+                     misleading. Focus pair satisfies the keyboard equivalent. -->
+                <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+                <div
+                    v-for="a in visible"
+                    :key="a.encounterId"
+                    :class="['epaVoice', { 'epaVoice--active': activeEncounterId === a.encounterId }]"
+                    tabindex="0"
+                    @mouseenter="setActive(a.encounterId)"
+                    @mouseleave="clearActive"
+                    @focusin="setActive(a.encounterId)"
+                    @focusout="clearActive"
+                >
+                    <div
+                        v-if="a.comment"
+                        class="epaVoiceQuote"
+                    >
+                        {{ a.comment }}
+                    </div>
+                    <div
+                        v-else
+                        class="epaVoiceNoComment"
+                    >
+                        (No comment recorded)
+                    </div>
+                    <div class="epaVoiceByline">
+                        <strong>&mdash; {{ a.enteredByName }}</strong>
+                        <span v-if="a.serviceName"> &middot; {{ a.serviceName }}</span>
+                        &middot; {{ formatDate(a.encounterDate.toString()) }}
+                        <span class="epaVoiceSupervision">
+                            <span
+                                :class="['epaVoiceLevelDot', `cts-dot-${a.levelValue}`]"
+                                aria-hidden="true"
+                            ></span>
+                            {{ a.levelName }}
+                        </span>
+                    </div>
+                </div>
+                <button
+                    v-if="hiddenCount > 0"
+                    type="button"
+                    class="epaThreadMore"
+                    :aria-expanded="showAll"
+                    @click="showAll = true"
+                >
+                    show {{ hiddenCount }} earlier {{ inflect("assessment", hiddenCount) }}
+                </button>
+                <button
+                    v-else-if="showAll && sorted.length > VOICES_THRESHOLD"
+                    type="button"
+                    class="epaThreadMore"
+                    :aria-expanded="showAll"
+                    @click="showAll = false"
+                >
+                    show fewer
+                </button>
+            </div>
+
+            <button
+                v-if="showChart"
+                type="button"
+                class="epaChartButton"
+                :aria-label="`Expand progression chart for ${epa.name}`"
+                @click="showChartDialog = true"
+            >
+                <EpaProgressionChart
+                    :assessments="sorted"
+                    size="compact"
+                    :active-encounter-id="activeEncounterId"
+                    @hover-dot="setActive"
+                    @leave-dot="clearActive"
+                />
+                <span class="epaChartExpandHint">click to expand</span>
+            </button>
+        </div>
+
+        <q-dialog
+            v-model="showChartDialog"
+            :aria-labelledby="chartDialogTitleId"
+        >
+            <q-card style="width: 50rem; max-width: 92vw">
+                <q-card-section class="row items-center q-pb-none">
+                    <div
+                        :id="chartDialogTitleId"
+                        class="text-h6"
+                    >
+                        Progression — {{ epa.name }}
+                    </div>
+                    <q-space />
+                    <q-btn
+                        icon="close"
+                        flat
+                        round
+                        dense
+                        aria-label="Close progression chart"
+                        v-close-popup
+                    />
+                </q-card-section>
+                <q-card-section>
+                    <EpaProgressionChart
+                        :assessments="sorted"
+                        size="large"
+                        :active-encounter-id="activeEncounterId"
+                        @hover-dot="setActive"
+                        @leave-dot="clearActive"
+                    />
+                </q-card-section>
+            </q-card>
+        </q-dialog>
+    </article>
+</template>
diff --git a/VueApp/src/CTS/pages/MyAssessments.vue b/VueApp/src/CTS/pages/MyAssessments.vue
index 11aad2771..8ed57b5c6 100644
--- a/VueApp/src/CTS/pages/MyAssessments.vue
+++ b/VueApp/src/CTS/pages/MyAssessments.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useQuasar } from "quasar"
-import { ref, inject } from "vue"
+import { ref, computed, inject } from "vue"
 import type { Ref } from "vue"
 import { useRoute } from "vue-router"
 import { useUserStore } from "@/store/UserStore"
@@ -8,6 +8,11 @@ import { useFetch } from "@/composables/ViperFetch"
 import type { Assessment, Epa, Level, Person } from "@/CTS/types"
 import { useDateFunctions } from "@/composables/DateFunctions"
 import AssessmentBubble from "@/CTS/components/AssessmentBubble.vue"
+import EpaVoiceThread from "@/CTS/components/EpaVoiceThread.vue"
+import EpaSupervisionBlend from "@/CTS/components/EpaSupervisionBlend.vue"
+import { getLevelLabel } from "@/CTS/utils/level-labels"
+
+type DisplayStyle = 1 | 2 | 3 | 4 | 5
 
 const userStore = useUserStore()
 const { get } = useFetch()
@@ -25,6 +30,27 @@ const loaded = ref(false)
 const showDetails = ref([]) as Ref<boolean[]>
 
 const showAssessmentDetail = ref(false)
+const displayStyle = ref<DisplayStyle>(2)
+
+const styleOptions = [
+    { label: "1. Original circles", value: 1 as DisplayStyle },
+    { label: "2. Current bubbles", value: 2 as DisplayStyle },
+    { label: "3. Abbreviations", value: 3 as DisplayStyle },
+    { label: "4. Timeline", value: 4 as DisplayStyle },
+    { label: "5. Bar", value: 5 as DisplayStyle },
+]
+
+const bubbleDisplayStyle = computed<"legacy" | "current" | "abbrev">(() => {
+    if (displayStyle.value === 1) return "legacy"
+    if (displayStyle.value === 3) return "abbrev"
+    return "current"
+})
+
+const isTimelineView = computed(() => displayStyle.value === 4)
+const isBlendView = computed(() => displayStyle.value === 5)
+const isCardListView = computed(() => isTimelineView.value || isBlendView.value)
+
+const anyExpanded = computed(() => showDetails.value.some((s) => s))
 
 async function load() {
     const $q = useQuasar()
@@ -88,16 +114,9 @@ function getText(date: Date, enteredBy: string, levelName: string, comment: stri
 }
 
 function toggleExpandAll() {
-    let anyExpanded = false
+    const expand = !anyExpanded.value
     for (let i = 0; i < showDetails.value.length; i++) {
-        if (showDetails.value[i]) {
-            anyExpanded = true
-            break
-        }
-    }
-
-    for (let i = 0; i < showDetails.value.length; i++) {
-        showDetails.value[i] = !anyExpanded
+        showDetails.value[i] = expand
     }
 }
 
@@ -122,25 +141,33 @@ load()
             aria-labelledby="assessment-detail-title"
         >
             <q-card style="width: 700px; max-width: 80vw">
-                <q-card-section>
+                <q-card-section class="row items-center q-pb-none">
                     <div
                         id="assessment-detail-title"
                         class="text-h6"
                     >
                         Assessment Details
                     </div>
+                    <q-space />
+                    <q-btn
+                        icon="close"
+                        flat
+                        round
+                        dense
+                        aria-label="Close dialog"
+                        v-close-popup
+                    />
+                </q-card-section>
+                <q-card-section>
                     <div class="row">
                         <div class="col-12"><strong>EPA:</strong> {{ epaAssessment.epaName }}</div>
                     </div>
                     <div class="row">
                         <div class="col-12">
                             <strong>Rating:</strong>
-                            <AssessmentBubble
-                                class="q-ml-sm"
-                                :max-value="5"
-                                :value="epaAssessment.levelValue"
-                            ></AssessmentBubble>
-                            {{ epaAssessment.levelName }}
+                            <span :class="['levelChip', 'levelChip--' + epaAssessment.levelValue, 'q-ml-sm']">
+                                {{ epaAssessment.levelName }}
+                            </span>
                         </div>
                     </div>
                     <div class="row q-mt-xs">
@@ -161,79 +188,138 @@ load()
             </q-card>
         </q-dialog>
 
-        <div class="row">
-            <div class="col col-md-10 col-lg-7 q-mr-sm">
-                <h2>Entrustable Professional Activities</h2>
-            </div>
-            <div class="col-1">
-                <q-btn
-                    dense
-                    color="secondary"
-                    :icon="showDetails.find((s) => s) != undefined ? 'expand_less' : 'expand_more'"
-                    @click="toggleExpandAll()"
-                ></q-btn>
-            </div>
+        <div class="q-mb-md">
+            <q-btn-toggle
+                v-model="displayStyle"
+                :options="styleOptions"
+                color="white"
+                text-color="primary"
+                toggle-color="primary"
+                toggle-text-color="white"
+                unelevated
+                no-caps
+                dense
+                spread
+                aria-label="Assessment display style"
+                class="assessmentStyleToggle"
+            />
         </div>
-        <div
-            v-for="(epa, index) in epas"
-            :key="epa.epaId ?? `epa-${index}`"
-            class="row q-mt-sm q-pt-sm assessmentGroup"
-        >
-            <div class="col col-md-4 col-lg-3 q-mr-sm">
-                {{ epa.name }}
-            </div>
-            <div class="col col-md-6 col-lg-4">
-                <AssessmentBubble
-                    :max-value="5"
-                    :value="a.levelValue"
-                    :text="getText(a.encounterDate, a.enteredByName, a.levelName, a?.comment, a?.serviceName)"
-                    :id="a.encounterId"
-                    @bubble-click="handleAssessmentClick"
-                    v-for="a in getAssessmentsForEpa(epa.epaId)"
-                    :key="a.encounterId"
-                />
-            </div>
-            <div class="col-1">
-                <q-btn
-                    dense
-                    :icon="showDetails[index] ? 'expand_less' : 'expand_more'"
-                    @click="showDetails[index] = !showDetails[index]"
-                    v-if="getAssessmentsForEpa(epa.epaId).length > 0"
-                />
+
+        <template v-if="!isCardListView">
+            <div class="row items-center">
+                <div class="expandToggleCol">
+                    <q-btn
+                        dense
+                        color="secondary"
+                        :icon="anyExpanded ? 'expand_less' : 'expand_more'"
+                        :aria-label="anyExpanded ? 'Collapse all EPAs' : 'Expand all EPAs'"
+                        @click="toggleExpandAll()"
+                    ></q-btn>
+                </div>
+                <div class="col col-md-10 col-lg-7 q-ml-md">
+                    <h2>Entrustable Professional Activities</h2>
+                </div>
             </div>
-            <q-slide-transition>
-                <div
-                    class="col-12 q-mb-md"
-                    v-if="showDetails[index]"
-                    :key="'epadetails' + index"
-                >
-                    <div
-                        v-for="a in getAssessmentsForEpa(epa.epaId)"
-                        :key="a.encounterId"
-                        class="row q-mb-sm"
-                    >
-                        <div class="col-2 col-sm-auto q-pr-sm">
+            <div
+                v-for="(epa, index) in epas"
+                :key="epa.epaId ?? `epa-${index}`"
+                class="row q-mt-sm q-pt-sm assessmentGroup"
+            >
+                <div class="expandToggleCol">
+                    <q-btn
+                        dense
+                        :icon="showDetails[index] ? 'expand_less' : 'expand_more'"
+                        :aria-label="`${showDetails[index] ? 'Collapse' : 'Expand'} details for ${epa.name}`"
+                        :aria-expanded="showDetails[index]"
+                        @click="showDetails[index] = !showDetails[index]"
+                        v-if="getAssessmentsForEpa(epa.epaId).length > 0"
+                    />
+                </div>
+                <div class="col col-md-10 col-lg-7 q-ml-md">
+                    <div class="row items-center">
+                        <div class="col-12 col-sm q-mr-sm">
+                            {{ epa.name }}
+                        </div>
+                        <div class="col-12 col-sm-auto">
                             <AssessmentBubble
                                 :max-value="5"
                                 :value="a.levelValue"
-                            ></AssessmentBubble>
-                        </div>
-                        <div class="col-10 col-sm-5 col-md-3 col-lg-2">
-                            {{ formatDate(a.encounterDate.toString()) }}
-                            {{ a.enteredByName }}
-                        </div>
-                        <div class="col-10 offset-2 col-sm-5 offset-sm-1 offset-md-0 col-md-3 col-lg-2">
-                            {{ a.serviceName }}
-                        </div>
-                        <div class="col-10 offset-2 col-sm-5 offset-sm-1 offset-md-0 col-md-3 col-lg-2">
-                            {{ a.levelName }}
-                        </div>
-                        <div class="col-10 offset-2 offset-sm-1 offset-md-0 col-md-4 col-lg-5">
-                            {{ a.comment }}
+                                :level-name="a.levelName"
+                                :display-style="bubbleDisplayStyle"
+                                :abbreviation="getLevelLabel(a.levelValue).abbreviation"
+                                :text="
+                                    getText(a.encounterDate, a.enteredByName, a.levelName, a?.comment, a?.serviceName)
+                                "
+                                :id="a.encounterId"
+                                @bubble-click="handleAssessmentClick"
+                                v-for="a in getAssessmentsForEpa(epa.epaId)"
+                                :key="a.encounterId"
+                            />
                         </div>
                     </div>
+                    <q-slide-transition>
+                        <div
+                            class="q-mb-md"
+                            v-if="showDetails[index]"
+                            :key="'epadetails' + index"
+                        >
+                            <div
+                                v-for="a in getAssessmentsForEpa(epa.epaId)"
+                                :key="a.encounterId"
+                                class="row q-mb-sm items-center q-col-gutter-sm"
+                            >
+                                <div class="col-12 col-sm-6 col-md-4">
+                                    {{ formatDate(a.encounterDate.toString()) }}
+                                    {{ a.enteredByName }}
+                                </div>
+                                <div class="col-12 col-sm-6 col-md-4">
+                                    {{ a.serviceName }}
+                                </div>
+                                <div class="col-12 col-sm-auto">
+                                    <span
+                                        v-if="displayStyle === 1"
+                                        class="text-grey-8"
+                                    >
+                                        {{ a.levelName }}
+                                    </span>
+                                    <span
+                                        v-else
+                                        :class="['levelChip', 'levelChip--' + a.levelValue]"
+                                    >
+                                        {{ a.levelName }}
+                                    </span>
+                                </div>
+                                <div
+                                    v-if="a.comment"
+                                    class="col-12 q-mt-xs text-grey-8 assessmentComment"
+                                >
+                                    {{ a.comment }}
+                                </div>
+                            </div>
+                        </div>
+                    </q-slide-transition>
                 </div>
-            </q-slide-transition>
-        </div>
+            </div>
+        </template>
+
+        <template v-else>
+            <h2 class="q-mb-md">Entrustable Professional Activities</h2>
+            <template v-if="isTimelineView">
+                <EpaVoiceThread
+                    v-for="epa in epas"
+                    :key="epa.epaId ?? epa.name"
+                    :epa="epa"
+                    :assessments="getAssessmentsForEpa(epa.epaId)"
+                />
+            </template>
+            <template v-else>
+                <EpaSupervisionBlend
+                    v-for="epa in epas"
+                    :key="epa.epaId ?? epa.name"
+                    :epa="epa"
+                    :assessments="getAssessmentsForEpa(epa.epaId)"
+                />
+            </template>
+        </template>
     </div>
 </template>
diff --git a/VueApp/src/CTS/utils/level-labels.ts b/VueApp/src/CTS/utils/level-labels.ts
new file mode 100644
index 000000000..5cd5b7fca
--- /dev/null
+++ b/VueApp/src/CTS/utils/level-labels.ts
@@ -0,0 +1,30 @@
+/**
+ * Display labels for EPA supervision levels (cts.Level rows with order 1–5).
+ *
+ * The Level entity carries only a full name. These labels are presentation
+ * concerns kept on the frontend so we can iterate without a schema change.
+ *
+ * - `chartLabel`: y-axis label for the progression chart ("Indirect")
+ * - `abbreviation`: 3-letter pill text for Style 3 ("TIS")
+ */
+type LevelLabel = {
+    chartLabel: string
+    abbreviation: string
+}
+
+const LABELS_BY_VALUE: Record<number, LevelLabel> = {
+    1: { chartLabel: "Knowledge", abbreviation: "DNP" },
+    2: { chartLabel: "Direct", abbreviation: "TDS" },
+    3: { chartLabel: "Indirect", abbreviation: "TIS" },
+    4: { chartLabel: "Independent", abbreviation: "IRS" },
+    5: { chartLabel: "Mentoring", abbreviation: "SJL" },
+}
+
+const FALLBACK: LevelLabel = { chartLabel: "", abbreviation: "" }
+
+function getLevelLabel(levelValue: number): LevelLabel {
+    return LABELS_BY_VALUE[levelValue] ?? FALLBACK
+}
+
+export type { LevelLabel }
+export { getLevelLabel }