diff --git a/app/components/add_button_component.html.erb b/app/components/add_button_component.html.erb
index 9ba9cfb898b7..bfe3065020dc 100644
--- a/app/components/add_button_component.html.erb
+++ b/app/components/add_button_component.html.erb
@@ -1,10 +1,9 @@
-<li class="<%= li_css_class %>">
-  <a href="<%= dynamic_path %>"
-     id="<%= id %>"
-     title="<%= title %>"
-     arial-label="<%= aria_label %>"
-     class="<%= link_css_class %>">
-    <%= icon %>
-    <%= label %>
-  </a>
-</li>
+<a href="<%= dynamic_path %>"
+   id="<%= id %>"
+   title="<%= title %>"
+   arial-label="<%= aria_label %>"
+   class="<%= link_css_class %>">
+  <%= icon %>
+  <%= label %>
+</a>
+
diff --git a/app/components/add_button_component.rb b/app/components/add_button_component.rb
index a2b91bc92066..3b971f87af90 100644
--- a/app/components/add_button_component.rb
+++ b/app/components/add_button_component.rb
@@ -44,10 +44,6 @@ def id
     raise "Implement the id for this component"
   end
 
-  def li_css_class
-    "toolbar-item"
-  end
-
   def title
     accessibility_label_text
   end
diff --git a/app/views/activities/index.html.erb b/app/views/activities/index.html.erb
index b252f30e50be..8d3ce813dcdd 100644
--- a/app/views/activities/index.html.erb
+++ b/app/views/activities/index.html.erb
@@ -29,8 +29,16 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%= call_hook :activity_index_head %>
 
-<%= toolbar title: (@author.nil? ? t(:label_activity) : t(:label_user_activity, value: link_to_user(@author))).html_safe,
-            subtitle: t(:label_date_from_to, start: format_date(@date_to - @days), end: format_date(@date_to-1))
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { (@author.nil? ? t(:label_activity) : t(:label_user_activity, value: link_to_user(@author))) }
+    header.with_breadcrumbs([t(:label_activity)])
+  end
+%>
+<%=
+  render(Primer::OpenProject::SubHeader.new) do |subheader|
+    subheader.with_text {t(:label_date_from_to, start: format_date(@date_to - @days), end: format_date(@date_to-1))}
+  end
 %>
 
 <%= render(Activities::DaysComponent.new(events: @events, current_project: @project, activity_page: @activity_page))  %>
diff --git a/app/views/homescreen/index.html.erb b/app/views/homescreen/index.html.erb
index d94fd731fcf0..5fb9ebf79b45 100644
--- a/app/views/homescreen/index.html.erb
+++ b/app/views/homescreen/index.html.erb
@@ -26,7 +26,13 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
-<% breadcrumb_paths(nil) %>
+<%=
+  render(Primer::OpenProject::PageHeader.new) do |header|
+    header.with_title { I18n.t("label_home") }
+    header.with_breadcrumbs([I18n.t(:label_home)])
+  end
+%>
+
 <h2 class="headline--application">
   <span><%= organization_icon %></span>
   <%= organization_name %>
diff --git a/app/views/news/index.html.erb b/app/views/news/index.html.erb
index ba47943a1fee..8264d568e9b4 100644
--- a/app/views/news/index.html.erb
+++ b/app/views/news/index.html.erb
@@ -30,20 +30,26 @@ See COPYRIGHT and LICENSE files for more details.
   managable = User.current.allowed_in_project?(:manage_news, @project)
  %>
 
-<% html_title(t(:label_news_plural)) -%>
-<%= toolbar title: t(:label_news_plural) do %>
-  <% if managable %>
-    <li class="toolbar-item">
-      <%= link_to new_project_news_path(@project),
-          { class: 'button -primary',
-            id: 'new_news_link',
-            aria: {label: t(:label_news_new)},
-            title: t(:label_news_new)} do %>
-        <%= op_icon('button--icon icon-add') %>
-        <span class="button--text"><%= t(:label_news_singular) %></span>
-      <% end %>
-    </li>
-  <% end %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t(:label_news_plural) }
+    header.with_breadcrumbs([t(:label_news_plural)])
+  end
+%>
+<% if managable %>
+  <%=
+    render(Primer::OpenProject::SubHeader.new) do |subheader|
+      subheader.with_action_button(scheme: :primary,
+                                   aria: { label: t(:label_news_new)},
+                                   title: I18n.t(:label_work_package_status_new),
+                                   tag: :a,
+                                   id: 'new_news_link',
+                                   href: new_project_news_path(@project)) do |button|
+        button.with_leading_visual_icon(icon: :plus)
+        t(:label_news_singular)
+      end
+    end
+  %>
 <% end %>
 
 <% if @newss.any? %>
diff --git a/modules/boards/app/views/boards/boards/index.html.erb b/modules/boards/app/views/boards/boards/index.html.erb
index 8e4777c1ad2e..3744faea4290 100644
--- a/modules/boards/app/views/boards/boards/index.html.erb
+++ b/modules/boards/app/views/boards/boards/index.html.erb
@@ -29,9 +29,20 @@ See COPYRIGHT and LICENSE files for more details.
 
 <% html_title(t('boards.label_boards')) -%>
 
-<%= toolbar title: t('boards.label_boards') do %>
-  <%= render Boards::AddButtonComponent.new(current_project: @project) %>
-<% end %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t("boards.label_boards") }
+    header.with_breadcrumbs([t("boards.label_boards")])
+  end
+%>
+
+<%=
+  render Primer::OpenProject::SubHeader.new do |subheader|
+    subheader.with_action_component do
+       render Boards::AddButtonComponent.new(current_project: @project)
+    end
+  end
+%>
 
 <% if @board_grids.empty? -%>
   <%= no_results_box %>
diff --git a/modules/calendar/app/components/calendar/add_button_component.html.erb b/modules/calendar/app/components/calendar/add_button_component.html.erb
index 9ba9cfb898b7..b1da75b2a660 100644
--- a/modules/calendar/app/components/calendar/add_button_component.html.erb
+++ b/modules/calendar/app/components/calendar/add_button_component.html.erb
@@ -1,10 +1,8 @@
-<li class="<%= li_css_class %>">
-  <a href="<%= dynamic_path %>"
-     id="<%= id %>"
-     title="<%= title %>"
-     arial-label="<%= aria_label %>"
-     class="<%= link_css_class %>">
-    <%= icon %>
-    <%= label %>
-  </a>
-</li>
+<a href="<%= dynamic_path %>"
+   id="<%= id %>"
+   title="<%= title %>"
+   arial-label="<%= aria_label %>"
+   class="<%= link_css_class %>">
+  <%= icon %>
+  <%= label %>
+</a>
diff --git a/modules/calendar/app/views/calendar/calendars/index.html.erb b/modules/calendar/app/views/calendar/calendars/index.html.erb
index 70303fc18304..c21f5d03e8b0 100644
--- a/modules/calendar/app/views/calendar/calendars/index.html.erb
+++ b/modules/calendar/app/views/calendar/calendars/index.html.erb
@@ -28,8 +28,20 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 
 <% html_title(t(:label_calendar_plural)) -%>
-<%= toolbar title: t(:label_calendar_plural) do %>
-  <%= render Calendar::AddButtonComponent.new(current_project: @project) %>
-<% end %>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t(:label_calendar_plural) }
+    header.with_breadcrumbs([t(:label_calendar_plural)])
+  end
+%>
+
+<%=
+  render Primer::OpenProject::SubHeader.new do |subheader|
+    subheader.with_action_component do
+      render Calendar::AddButtonComponent.new(current_project: @project)
+    end
+  end
+%>
+
 
 <%= render ::Calendar::TableComponent.new(rows: @views, current_project: @project, current_user: current_user) %>
diff --git a/modules/team_planner/app/views/team_planner/team_planner/overview.html.erb b/modules/team_planner/app/views/team_planner/team_planner/overview.html.erb
index bb684321f680..f05659fb797c 100644
--- a/modules/team_planner/app/views/team_planner/team_planner/overview.html.erb
+++ b/modules/team_planner/app/views/team_planner/team_planner/overview.html.erb
@@ -1,7 +1,17 @@
 <% html_title(t('team_planner.label_team_planner_plural')) -%>
+<%=
+  render Primer::OpenProject::PageHeader.new do |header|
+    header.with_title { t('team_planner.label_team_planner_plural') }
+    header.with_breadcrumbs([t('team_planner.label_team_planner_plural')])
+  end
+%>
 
-<%= toolbar title: t(:'team_planner.label_team_planner_plural') do %>
-  <%= render ::TeamPlanner::AddButtonComponent.new %>
-<% end %>
+<%=
+  render Primer::OpenProject::SubHeader.new do |subheader|
+    subheader.with_action_component do
+      render ::TeamPlanner::AddButtonComponent.new
+    end
+  end
+%>
 
 <%= render ::TeamPlanner::Overview::TableComponent.new(rows: @views, current_user: current_user) %>