diff --git a/frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.component.ts b/frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.component.ts
index 763d455256..03c6347d03 100644
--- a/frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.component.ts
+++ b/frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.component.ts
@@ -10,6 +10,8 @@ import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destr
 import { ApiV3Service } from 'core-app/core/apiv3/api-v3.service';
 import { RelationResource } from 'core-app/features/hal/resources/relation-resource';
 import { WorkPackageRelationsService } from '../wp-relations.service';
+import { Highlighting } from 'core-app/features/work-packages/components/wp-fast-table/builders/highlighting/highlighting.functions';
+
 
 @Component({
   selector: 'wp-relation-row',
@@ -200,4 +202,8 @@ export class WorkPackageRelationRowComponent extends UntilDestroyedMixin impleme
       .catch((err:any) => this.notificationService.handleRawError(err,
         this.relatedWorkPackage));
   }
+
+  public highlightingClassForWpType():string {
+    return Highlighting.inlineClass('type', this.relatedWorkPackage.type.id!);
+  }
 }
diff --git a/frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.template.html b/frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.template.html
index 84b9fd0479..780da916d1 100644
--- a/frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.template.html
+++ b/frontend/src/app/features/work-packages/components/wp-relations/wp-relation-row/wp-relation-row.template.html
@@ -14,6 +14,7 @@
         <span *ngIf="groupByWorkPackageType"
               [textContent]="normalizedRelationType"></span>
         <span *ngIf="!groupByWorkPackageType"
+              [ngClass]="highlightingClassForWpType()"
               [textContent]="relatedWorkPackage.type.name"></span>
         <span class="hidden-for-sighted" [textContent]="text.updateRelation"></span>
       </button>
diff --git a/spec/features/work_packages/details/relations/relations_spec.rb b/spec/features/work_packages/details/relations/relations_spec.rb
index b37550c16c..abbbfccf75 100644
--- a/spec/features/work_packages/details/relations/relations_spec.rb
+++ b/spec/features/work_packages/details/relations/relations_spec.rb
@@ -101,8 +101,8 @@ describe 'Work package relations tab', js: true, selenium: true do
       expect(page).to have_selector('.relation-group--header', text: 'FOLLOWS')
       expect(page).to have_selector('.relation-group--header', text: 'RELATED TO')
 
-      expect(page).to have_selector('.relation-row--type', text: type_1.name)
-      expect(page).to have_selector('.relation-row--type', text: type_2.name)
+      expect(page).to have_selector('.relation-row--type', text: type_1.name.upcase)
+      expect(page).to have_selector('.relation-row--type', text: type_2.name.upcase)
 
       find(toggle_btn_selector).click
       expect(page).to have_selector(toggle_btn_selector, text: 'Group by relation type', wait: 10)
diff --git a/spec/support/components/work_packages/relations.rb b/spec/support/components/work_packages/relations.rb
index 240bb92c34..8dee65ec15 100644
--- a/spec/support/components/work_packages/relations.rb
+++ b/spec/support/components/work_packages/relations.rb
@@ -110,7 +110,7 @@ module Components
                                       text: relation_label.upcase,
                                       wait: 10)
 
-        expect(page).to have_selector('.relation-row--type', text: to.type.name)
+        expect(page).to have_selector('.relation-row--type', text: to.type.name.upcase)
 
         expect(page).to have_selector('.wp-relations--subject-field', text: to.subject)