diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index 8d471672..aa0e4e64 100644
--- a/src/partials/RecommendationPartial.vue
+++ b/src/partials/RecommendationPartial.vue
@@ -16,6 +16,9 @@
 					<div class="pl-20 space-y-1">
 						<div class="font-aspekta font-[650] text-slate-800 dark:text-slate-100">{{ item.person.full_name }}</div>
 						<div class="text-sm font-medium text-slate-800 dark:text-slate-100">{{ item.person.company }}</div>
+						<div v-if="item.person.designation" class="text-sm text-slate-600 dark:text-slate-300">
+							{{ item.person.designation }}
+						</div>
 						<div class="flex justify-between text-xs dark:text-teal-500 text-slate-400 pb-2">
 							<div>{{ item.relation }}</div>
 							<div>{{ item.formattedDate }}</div>
diff --git a/tests/partials/RecommendationPartial.test.ts b/tests/partials/RecommendationPartial.test.ts
index c84e2c56..a0d5cae9 100644
--- a/tests/partials/RecommendationPartial.test.ts
+++ b/tests/partials/RecommendationPartial.test.ts
@@ -35,5 +35,25 @@ describe('RecommendationPartial', () => {
 		expect(renderMarkdown).toHaveBeenCalledWith('**great**');
 		expect(wrapper.html()).toContain('<strong>great</strong>');
 		expect(wrapper.text()).toContain('now');
+		expect(wrapper.text()).toContain(data[0].person.designation);
+	});
+
+	it('does not render designation markup when missing', () => {
+		const wrapper = mount(RecommendationPartial, {
+			props: {
+				recommendations: [
+					{
+						...data[0],
+						person: {
+							...data[0].person,
+							designation: '',
+						},
+					},
+				],
+				backToTopTarget: '#top',
+			},
+		});
+
+		expect(wrapper.html()).not.toContain('text-sm text-slate-600 dark:text-slate-300');
 	});
 });