diff --git a/app/components/work_package_relations_tab/index_component.html.erb b/app/components/work_package_relations_tab/index_component.html.erb
index 3f15fde0121c..f42fdeb38742 100644
--- a/app/components/work_package_relations_tab/index_component.html.erb
+++ b/app/components/work_package_relations_tab/index_component.html.erb
@@ -1,31 +1,32 @@
 <%= turbo_frame_tag "work-package-relations-tab-content" do %>
-  <%= flex_layout(classes:  "work-package-relations-tab--list-container") do |flex| %>
-    <% @relations.group_by(&:relation_type).each do |relation_type, relations| %>
-      <%= flex.with_row do %>
-        <%= render(border_box_container(padding: :condensed)) do |border_box|
-            border_box.with_header do
-              flex_layout do |flex|
+  <%= 
+    blah_blah = "Blah blah"
+    flex_layout(classes: "work-package-relations-tab--list-container") do |flex|
+      relations.group_by(&:relation_type).each do |relation_type, relations_of_type|
+        flex.with_row do
+          render(border_box_container(padding: :condensed)) do |border_box|
+            border_box.with_header(py: 3) do
+              flex_layout(align_items: :center) do |flex|
                 flex.with_column(mr: 2) do
-                  render(Primer::Beta::Text.new(font_size: :normal, color: :muted)) do
-                    t(relations.first.label_for(@work_package)).capitalize
+                  render(Primer::Beta::Text.new(font_size: :normal, font_weight: :bold)) do
+                    t(relations_of_type.first.label_for(work_package)).capitalize
                   end
                 end
                 flex.with_column do
-                  render(Primer::Beta::Counter.new(count: relations.size,
-                                                  round: true,
-                                                  scheme: :primary))
+                  render(Primer::Beta::Counter.new(count: relations_of_type.size,
+                                                   round: true,
+                                                   scheme: :primary))
                 end
               end
             end
-            relations.each do |relation|
-              border_box.with_row do
-                render(Primer::Beta::Text.new(font_size: :normal, color: :muted)) do
-                  relation.to.subject.to_s
-                end
+            relations_of_type.each do |relation|
+              border_box.with_row(style: "padding-top: 12px; padding-bottom: 12px;") do
+                render(WorkPackageRelationsTab::RelationComponent.new(work_package: relation.to))
               end
             end
-          end %>
-      <% end %>
-    <% end %>
-  <% end %>
+          end
+        end
+      end
+    end
+  %>
 <% end %>
diff --git a/app/components/work_package_relations_tab/index_component.rb b/app/components/work_package_relations_tab/index_component.rb
index 211e26d85233..7d809ab399c7 100644
--- a/app/components/work_package_relations_tab/index_component.rb
+++ b/app/components/work_package_relations_tab/index_component.rb
@@ -3,6 +3,8 @@ class WorkPackageRelationsTab::IndexComponent < ApplicationComponent
   include OpPrimer::ComponentHelpers
   include Turbo::FramesHelper
 
+  attr_reader :work_package, :relations
+
   def initialize(work_package:, relations:)
     super()
 
diff --git a/app/components/work_package_relations_tab/relation_component.html.erb b/app/components/work_package_relations_tab/relation_component.html.erb
new file mode 100644
index 000000000000..c45782f6c718
--- /dev/null
+++ b/app/components/work_package_relations_tab/relation_component.html.erb
@@ -0,0 +1,39 @@
+<%= flex_layout(direction: :column, style: "gap: 0.25rem;") do |flex|
+  flex.with_row(flex_layout: true,
+                justify_content: :flex_start,
+                style: "gap: 0.5rem;") do |meta_information_row|
+    meta_information_row.with_column do
+      render(Primer::Beta::Text.new(font_size: :small,
+                                  font_weight: :bold,
+                                  color: :muted)) { "#{work_package.type.name.upcase}" }
+    end
+
+    meta_information_row.with_column do
+      render(Primer::Beta::Text.new(font_size: :small,
+                                    color: :muted)) { "##{work_package.id}" }
+    end
+    meta_information_row.with_column do
+      render(Primer::Beta::Label.new(font_weight: :bold)) { work_package.status.name }
+    end
+  end
+
+  flex.with_row(flex_layout: true, justify_content: :flex_start) do |subject_line_row|
+    subject_line_row.with_column do
+      render(Primer::Beta::Link.new(href: work_package_path(work_package),
+                                    color: :default,
+                                    underline: false,
+                                    font_size: :normal,
+                                    font_weight: :bold,
+                                    target: "_blank")) { work_package.subject }
+    end
+  end
+
+  flex.with_row(flex_layout: true, justify_content: :flex_start) do |description_row|
+    description_row.with_column do
+      render(Primer::Beta::Text.new(font_size: :small,
+                                    color: :muted)) do
+        format_text(work_package, :description)
+      end
+    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
new file mode 100644
index 000000000000..0a71843dab45
--- /dev/null
+++ b/app/components/work_package_relations_tab/relation_component.rb
@@ -0,0 +1,12 @@
+class WorkPackageRelationsTab::RelationComponent < ApplicationComponent
+  include ApplicationHelper
+  include OpPrimer::ComponentHelpers
+
+  attr_reader :work_package
+
+  def initialize(work_package:)
+    super()
+
+    @work_package = work_package
+  end
+end
diff --git a/app/controllers/work_package_relations_tab_controller.rb b/app/controllers/work_package_relations_tab_controller.rb
index 175cf547fce4..d6be53ce8771 100644
--- a/app/controllers/work_package_relations_tab_controller.rb
+++ b/app/controllers/work_package_relations_tab_controller.rb
@@ -38,7 +38,6 @@ def index
     @relations = @work_package
       .relations
       .includes(:to, :from)
-      .visible
 
     render(
       WorkPackageRelationsTab::IndexComponent.new(