diff --git a/app/components/work_package_relations_tab/relation_component.html.erb b/app/components/work_package_relations_tab/relation_component.html.erb
index fba5021d5834..92a18553207a 100644
--- a/app/components/work_package_relations_tab/relation_component.html.erb
+++ b/app/components/work_package_relations_tab/relation_component.html.erb
@@ -70,11 +70,17 @@
   if should_display_start_and_end_dates?
     flex.with_row(flex_layout: true, justify_content: :flex_start, align_items: :center, style: "gap: 0.25rem;") do |start_and_end_dates_row|
       start_and_end_dates_row.with_column do
-        render(Primer::Beta::Octicon.new(icon: :calendar, color: :muted))
+        icon = if follows?
+                 :calendar
+               elsif precedes?
+                 :pin
+               end
+
+        render(Primer::Beta::Octicon.new(icon:, color: :muted))
       end
       start_and_end_dates_row.with_column do
         render(Primer::Beta::Text.new(color: :muted)) do
-          format_date(related_work_package.start_date) + " - " + format_date(related_work_package.due_date)
+          "#{format_date(related_work_package.start_date)} - #{format_date(related_work_package.due_date)}"
         end
       end
     end
diff --git a/app/components/work_package_relations_tab/relation_component.rb b/app/components/work_package_relations_tab/relation_component.rb
index 19bf080a0969..bfc0ecbbfd9a 100644
--- a/app/components/work_package_relations_tab/relation_component.rb
+++ b/app/components/work_package_relations_tab/relation_component.rb
@@ -46,6 +46,14 @@ def should_display_start_and_end_dates?
     relation.follows? || relation.precedes?
   end
 
+  def follows?
+    relation.relation_type_for(work_package) == Relation::TYPE_FOLLOWS
+  end
+
+  def precedes?
+    relation.relation_type_for(work_package) == Relation::TYPE_PRECEDES
+  end
+
   def edit_path
     if parent_child_relationship?
       raise NotImplementedError, "Children relationships are not editable"
diff --git a/spec/features/work_packages/details/relations/primerized_relations_spec.rb b/spec/features/work_packages/details/relations/primerized_relations_spec.rb
index c77a6b2825ba..ad245e3892c1 100644
--- a/spec/features/work_packages/details/relations/primerized_relations_spec.rb
+++ b/spec/features/work_packages/details/relations/primerized_relations_spec.rb
@@ -45,7 +45,7 @@
   let(:type1) { create(:type) }
   let(:type2) { create(:type) }
 
-  let(:to1) { create(:work_package, type: type1, project:) }
+  let(:to1) { create(:work_package, type: type1, project:, start_date: Date.current, due_date: Date.current + 1.week) }
   let(:to2) { create(:work_package, type: type2, project:) }
   let(:to3) { create(:work_package, type: type1, project:) }
   let(:from1) { create(:work_package, type: type1, project:) }
@@ -104,36 +104,62 @@ def label_for_relation_type(relation_type)
       scroll_to_element relations_panel
       expect(page).to have_css(relations_panel_selector)
 
-      [relation1, relation2].each do |relation|
-        target = relation.to == work_package ? "from" : "to"
-        target_relation_type = target == "from" ? relation.reverse_type : relation.relation_type
-
-        within(relations_panel) do
-          expect(page).to have_text(relation.to.type.name.upcase)
-          expect(page).to have_text(relation.to.id)
-          expect(page).to have_text(relation.to.status.name)
-          expect(page).to have_text(relation.to.subject)
-          # We reference the reverse type as the "from" node of the relation
-          # is the currently visited work package, and the "to" node is the
-          # relation target. From the current user's perspective on the work package's
-          # page, this is the "reverse" relation.
-          expect(page).to have_text(label_for_relation_type(target_relation_type))
-        end
+      target = relation1.to == work_package ? "from" : "to"
+      target_relation_type = target == "from" ? relation1.reverse_type : relation1.relation_type
+
+      relation_row = relations_panel.find("[data-test-selector='op-relation-row-#{relation1.id}']")
+
+      within(relations_panel) do
+        # We reference the reverse type as the "from" node of the relation
+        # is the currently visited work package, and the "to" node is the
+        # relation target. From the current user's perspective on the work package's
+        # page, this is the "reverse" relation.
+        expect(page).to have_text(label_for_relation_type(target_relation_type))
+      end
+      within(relation_row) do
+        expect(page).to have_text(relation1.to.type.name.upcase)
+        expect(page).to have_text(relation1.to.id)
+        expect(page).to have_text(relation1.to.status.name)
+        expect(page).to have_text(relation1.to.subject)
+        expect(page).to have_text(I18n.l(relation1.to.start_date))
+        expect(page).to have_text(I18n.l(relation1.to.due_date))
+      end
+
+      relation_row = relations_panel.find("[data-test-selector='op-relation-row-#{relation2.id}']")
+
+      within(relations_panel) do
+        # We reference the reverse type as the "from" node of the relation
+        # is the currently visited work package, and the "to" node is the
+        # relation target. From the current user's perspective on the work package's
+        # page, this is the "reverse" relation.
+        expect(page).to have_text(label_for_relation_type(target_relation_type))
+      end
+
+      within(relation_row) do
+        expect(page).to have_text(relation2.to.type.name.upcase)
+        expect(page).to have_text(relation2.to.id)
+        expect(page).to have_text(relation2.to.status.name)
+        expect(page).to have_text(relation2.to.subject)
       end
 
       target = relation3.to == work_package ? "from" : "to"
       target_relation_type = target == "from" ? relation3.reverse_type : relation3.relation_type
 
+      relation_row = relations_panel.find("[data-test-selector='op-relation-row-#{relation3.id}']")
+
       within(relations_panel) do
-        expect(page).to have_text(relation3.to.type.name.upcase)
-        expect(page).to have_text(relation3.to.id)
-        expect(page).to have_text(relation3.to.status.name)
-        expect(page).to have_text(relation3.to.subject)
         # We reference the relation type as the "from" node of the relation
         # is not the currently visited work package. From the current user's
         # perspective on the work package's page, this is the "forward" relation.
         expect(page).to have_text(label_for_relation_type(target_relation_type))
       end
+
+      within(relation_row) do
+        expect(page).to have_text(relation3.to.type.name.upcase)
+        expect(page).to have_text(relation3.to.id)
+        expect(page).to have_text(relation3.to.status.name)
+        expect(page).to have_text(relation3.to.subject)
+      end
     end
   end