diff --git a/app/components/projects/table_component.rb b/app/components/projects/table_component.rb
index 8828376130cc..e1244dd6003e 100644
--- a/app/components/projects/table_component.rb
+++ b/app/components/projects/table_component.rb
@@ -52,7 +52,7 @@ def table_id
     end
 
     def container_class
-      "generic-table--container_visible-overflow"
+      "generic-table--container_visible-overflow generic-table--container_height-100"
     end
 
     ##
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 4f844ca25f2c..afca3f0a3dc9 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -119,15 +119,6 @@ See COPYRIGHT and LICENSE files for more details.
     <main id="content-wrapper" class="<%= initial_classes %>">
       <%= render_primer_banner_message %>
       <%= render_streameable_primer_banner_message %>
-      <% if show_decoration %>
-        <div id="breadcrumb" class="<%= initial_classes %><%= show_breadcrumb ? ' -show' : '' %>">
-          <%= you_are_here_info %>
-          <div id="full_breadcrumbs">
-            <%= full_breadcrumbs %>
-          </div>
-          <%= call_hook :view_layouts_base_breadcrumb %>
-        </div>
-      <% end %>
       <%= render_flash_messages %>
       <% if show_onboarding_modal? %>
         <section data-augmented-model-wrapper
@@ -138,14 +129,35 @@ See COPYRIGHT and LICENSE files for more details.
       <% end %>
       <%= content_tag :div,
                       id: 'content',
-                      class: initial_classes,
+                      class: "#{initial_classes} #{'content--split' if content_for?(:content_body_right)}",
                       data: stimulus_content_data do %>
-        <h1 class="hidden-for-sighted"><%= t(:label_content) %></h1>
-        <%= content_for :content_body %>
-        <% unless local_assigns[:no_layout_yield] %>
-          <%= yield %>
+        <h1 class="hidden-for-sighted accessibility-helper"><%= t(:label_content) %></h1>
+        <% if content_for?(:content_header) %>
+          <div id="content-header">
+            <%= content_for :content_header %>
+          </div>
+        <% end %>
+
+        <div id="content-body">
+          <% if show_decoration %>
+            <div id="breadcrumb" class="<%= show_breadcrumb ? ' -show' : '' %>">
+              <%= you_are_here_info %>
+              <div id="full_breadcrumbs">
+                <%= full_breadcrumbs %>
+              </div>
+              <%= call_hook :view_layouts_base_breadcrumb %>
+            </div>
+          <% end %>
+          <%= content_for :content_body %>
+          <% unless local_assigns[:no_layout_yield] %>
+            <%= yield %>
+          <% end %>
+        </div>
+        <% if content_for?(:content_body_right) %>
+          <div id="content-bodyRight">
+            <%= content_for :content_body_right %>
+          </div>
         <% end %>
-        <%= call_hook :view_layouts_base_content %>
       <% end %>
     </main>
   </div>
diff --git a/app/views/members/index.html.erb b/app/views/members/index.html.erb
index 11b53e2f7c4f..0469594c432d 100644
--- a/app/views/members/index.html.erb
+++ b/app/views/members/index.html.erb
@@ -28,9 +28,9 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 <% html_title t(:label_member_plural) -%>
 
-<div data-controller="members-form"
-     data-application-target="dynamic">
+<% content_controller "members-form", dynamic: true %>
 
+<% content_for :content_header do %>
   <%= render ::Members::IndexPageHeaderComponent.new(project: @project) %>
   <%= render ::Members::IndexSubHeaderComponent.new(project: @project, filter_options: @members_filter_options) %>
 
@@ -47,8 +47,8 @@ See COPYRIGHT and LICENSE files for more details.
       <%= link_to I18n.t('button_back'), :back, class: 'button' %>
     <% end %>
   </div>
+<% end %>
 
-  <div>
-    <%= render ::Members::TableComponent.new(rows: @members, **@members_table_options) %>
-  </div>
+<div>
+  <%= render ::Members::TableComponent.new(rows: @members, **@members_table_options) %>
 </div>
diff --git a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass
index f9f52da862f3..bcd4ad75b180 100644
--- a/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass
+++ b/frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass
@@ -12,21 +12,20 @@
 @import "tooltips"
 @import "pivot_point"
 
-// The IFC viewer shall fill the viewport to the bottom.
-// This is different to how we style #content else where.
 .controller-bim\/ifc_models\/ifc_viewer
   overflow: hidden
 
-  &.action-show
-    #content
-      height: 100%
+  // Do not remove this, without checking the BCF module.
+  // The container of the xeokit viewer needs a fixed height. Otherwise it will grow without end.
+  #content-body
+    height: calc(100vh - #{var(--header-height)})
 
-  // Override default behavior to let the viewer span the whole height
+  // Override default behavior to let the viewer be at the top of the table/cards
   @media only screen and (max-width: $breakpoint-sm)
     @include extended-content--right
     @include extended-content--left
     #content-wrapper
-      height: calc(100vh - 55px)
+      height: calc(100vh - #{var(--header-height)})
 
     .work-packages-partitioned-page--content-container
       flex-direction: column
diff --git a/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass b/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass
index 2c92544764d4..2dacdc0e867a 100644
--- a/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass
+++ b/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass
@@ -2,7 +2,6 @@
 
 .op-wp-breadcrumb
   @include global-breadcrumb-styles
-  margin: 0
   height: initial
 
   &--ellipsed
diff --git a/frontend/src/assets/sass/backlogs/_master_backlog.sass b/frontend/src/assets/sass/backlogs/_master_backlog.sass
index f25a565ef1a7..21e1cf04a474 100644
--- a/frontend/src/assets/sass/backlogs/_master_backlog.sass
+++ b/frontend/src/assets/sass/backlogs/_master_backlog.sass
@@ -57,16 +57,6 @@
     margin: 0 0 10px 0
     width: 100%
 
-/*
- *this adds space at the bottom of the main content div to leave enough space
- *for the menu without cutting it even if the bottom backlog does not contain
- *any elements
- */
-
-.controller-rb_master_backlogs
-  .action-index #content
-    padding-bottom: 180px
-
 #rb
   #backlogs_container .backlog .header
     background-color: var(--bgColor-muted)
@@ -330,17 +320,5 @@
       float: right
       width: 10%
 
-/* In-place Story Editor */
-
-.controller-rb_master_backlogs.action-show
-  #main, #content, #rb #backlogs_container .backlog .stories
-    overflow: visible
-  div.calendar
-    z-index: 10000
-
 .backlog
   font-size: 0.9rem
-
-/* Hide the button text in the ui-dialog */
-.ui-dialog-titlebar-close
-  overflow: hidden
diff --git a/frontend/src/assets/sass/backlogs/_taskboard.sass b/frontend/src/assets/sass/backlogs/_taskboard.sass
index 1d3cd2dffc6f..b889c60dcef7 100644
--- a/frontend/src/assets/sass/backlogs/_taskboard.sass
+++ b/frontend/src/assets/sass/backlogs/_taskboard.sass
@@ -48,10 +48,6 @@
   white-space: nowrap
   text-overflow: ellipsis
 
-
-.controller-rb_taskboards.action-show #main
-  overflow: visible
-
 #rb .task
   color: #484848
   line-height: inherit
@@ -225,9 +221,6 @@
     background-color: none
     border: none
 
-.ui-dialog-titlebar-close
-  overflow: hidden
-
 .dark
   #task_editor label, .subject, .assigned_to_id, div
     color: #FFFFFF
diff --git a/frontend/src/global_styles/content/_grid.sass b/frontend/src/global_styles/content/_grid.sass
index 112234567cdd..2f69daa35487 100644
--- a/frontend/src/global_styles/content/_grid.sass
+++ b/frontend/src/global_styles/content/_grid.sass
@@ -9,7 +9,6 @@ $grid--widget-padding: 20px 20px 20px 20px
   display: grid
 
 body.widget-grid-layout
-  #content-wrapper,
   #content
     background-color: var(--grid-background-color)
 
diff --git a/frontend/src/global_styles/content/_journal.sass b/frontend/src/global_styles/content/_journal.sass
index 93346a3d0416..682b684dc397 100644
--- a/frontend/src/global_styles/content/_journal.sass
+++ b/frontend/src/global_styles/content/_journal.sass
@@ -26,9 +26,6 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-#content #history
-  padding-bottom: 11px
-
 #history
   width: 700px
   margin:
diff --git a/frontend/src/global_styles/content/_table.sass b/frontend/src/global_styles/content/_table.sass
index 1d92a73aca99..bd33ef17b77d 100644
--- a/frontend/src/global_styles/content/_table.sass
+++ b/frontend/src/global_styles/content/_table.sass
@@ -41,7 +41,7 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select',
 
 .generic-table--container
   position:     relative
-  height:       100%
+  height:       initial
   width:        100%
   overflow:
     x: hidden
@@ -53,6 +53,9 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select',
   &_visible-overflow
     overflow: visible
 
+  &_height-100
+    height: 100%
+
 .generic-table--results-container
   height:       100%
   overflow:
diff --git a/frontend/src/global_styles/content/modules/_boards.sass b/frontend/src/global_styles/content/modules/_boards.sass
index 103a8a2e0b74..4fbdeda32225 100644
--- a/frontend/src/global_styles/content/modules/_boards.sass
+++ b/frontend/src/global_styles/content/modules/_boards.sass
@@ -2,6 +2,3 @@
 .router--boards-full-view
   @media only screen and (min-width: 680px)
     @include extended-content--left
-
-  #content
-    height: 100%
diff --git a/frontend/src/global_styles/content/modules/_calendar.sass b/frontend/src/global_styles/content/modules/_calendar.sass
deleted file mode 100644
index 9146a088ecfb..000000000000
--- a/frontend/src/global_styles/content/modules/_calendar.sass
+++ /dev/null
@@ -1,3 +0,0 @@
-.router--calendar
-  #content
-    height: 100%
diff --git a/frontend/src/global_styles/content/modules/_index.sass b/frontend/src/global_styles/content/modules/_index.sass
index 5981374ff14c..4b393435a122 100644
--- a/frontend/src/global_styles/content/modules/_index.sass
+++ b/frontend/src/global_styles/content/modules/_index.sass
@@ -4,7 +4,6 @@
 @import 'avatars'
 @import 'bim'
 @import 'boards'
-@import 'calendar'
 @import 'costs'
 @import 'documents'
 @import '2fa'
diff --git a/frontend/src/global_styles/content/modules/_team_planner.sass b/frontend/src/global_styles/content/modules/_team_planner.sass
index 2c3e7ccb1a9a..1c64df7a7a83 100644
--- a/frontend/src/global_styles/content/modules/_team_planner.sass
+++ b/frontend/src/global_styles/content/modules/_team_planner.sass
@@ -3,9 +3,6 @@
 $view-select-dropdown-width: 8rem
 
 .router--team-planner
-  #content
-    height: 100%
-
   &.router--work-packages-partitioned-split-view-details,
   &.router--work-packages-partitioned-split-view-new
     full-calendar.op-team-planner--calendar .fc-header-toolbar
diff --git a/frontend/src/global_styles/layout/_base.sass b/frontend/src/global_styles/layout/_base.sass
index 20e965a07ccc..e03c169969c3 100644
--- a/frontend/src/global_styles/layout/_base.sass
+++ b/frontend/src/global_styles/layout/_base.sass
@@ -38,7 +38,6 @@
   overflow: auto
 
   &.nomenus
-    padding-bottom: 0
     overflow: hidden
 
   &.nosidebar
@@ -56,29 +55,82 @@
   background-color: var(--body-background)
   position: relative
 
-  &.nosidebar
-    margin-left: 0
 
-  &.nomenus
-    margin:     0
-    padding:    0
+// ----------- BEGIN Content definition --------------
+
+// The content is structured as grid and should ideally look like this
+// --------------------------------------------------------
+// |                    content-header                   |
+// --------------------------------------------------------
+// |                                      |               |
+// |                                      |               |
+// |                                      |               |
+// |             content-body            |   content-     |
+// |                                      |   bodyRight   |
+// |                                      |               |
+// |                                      |               |
+// |                                      |               |
+// --------------------------------------------------------
+
+// This layout is designed to show the WP split screen on any rails page.
+// Because of that, there are three things to keep in mind
+//    1. The content-bodyRight is optional. If it is not shown, the content-body should fill the available space.
+//    2. The WP split screen requires a 100% layout, meaning that the content-bodyRight needs to be
+//       "glued" to the right side and the bottom of the screen without any additional paddings or margins.
+//    3. Not all pages already follow that desired structure. Older pages render all their content inside content-body.
+//       The design most cover that case in which the content-body needs to span the whole available height and width.
+
+// Because of those requirements, the #content element cannot take care of the paddings.
+// Instead the children elements have to do that themselves depending on which elements are present
+
+$top-space: 10px
+$right-space: 20px
+$bottom-space: 10px
+$left-space: 20px
 
 #content
-  padding: 10px 20px
+  display: grid
+  grid-template-columns: 1fr auto
+  grid-template-rows: auto 1fr
+  grid-template-areas: "header header" "body bodyRight"
+  padding: 0
   margin: 0
   width: 100%
+  height: 100%
+  overflow: auto
+  @include styled-scroll-bar
   z-index: 10
   background-color: var(--body-background)
 
-  &.api-docs
-    height: 100%
-    padding: 0
+  &.content--split
+    overflow: hidden
+
+#content-header
+  grid-area: header
+  padding-right: $right-space
+  padding-top: $top-space
+  padding-left: $left-space
+
+#content-body
+  grid-area: body
+  padding-bottom: $bottom-space
+  padding-left: $left-space
 
-.content-overlay
-  display: none
+  // Special rules for pages that still follow the old layout and render everything inside the content-body
+  .accessibility-helper ~ &
+    padding-top: $top-space
+  &:last-child
+    padding-right: $right-space
 
-.-draggable
-  cursor: grab
+  .content--split &
+    overflow: auto
+    @include styled-scroll-bar
+
+#content-bodyRight
+  grid-area: bodyRight
+  padding: 0
+  width: 580px
+  overflow: auto
+  @include styled-scroll-bar
 
-a
-  text-decoration: var(--link-text-decoration)
+// ----------- END Content definition --------------
diff --git a/frontend/src/global_styles/layout/_base_mobile.sass b/frontend/src/global_styles/layout/_base_mobile.sass
index 4359d1578a71..bfdc02b09680 100644
--- a/frontend/src/global_styles/layout/_base_mobile.sass
+++ b/frontend/src/global_styles/layout/_base_mobile.sass
@@ -44,7 +44,8 @@
 
   #wrapper,
   #content-wrapper,
-  #content
+  #content-body,
+  #content-bodyRight
     overflow: hidden
 
   #main
@@ -60,8 +61,13 @@
     min-height: calc(100vh - var(--header-height))
   // ------------------- END CHANGED SCROLL BEHAVIOR
 
-  #content
-    padding: 10px 15px
+  #content-body,
+  #content-header
+    padding-left: 15px
+    padding-right: 15px
+
+  #content-bodyRight
+    display: none
 
   #main
     grid-template-columns: auto
diff --git a/frontend/src/global_styles/layout/_breadcrumb.sass b/frontend/src/global_styles/layout/_breadcrumb.sass
index 15a25e360bf5..e423c9bedaf2 100644
--- a/frontend/src/global_styles/layout/_breadcrumb.sass
+++ b/frontend/src/global_styles/layout/_breadcrumb.sass
@@ -29,8 +29,7 @@
 #breadcrumb
   @include global-breadcrumb-styles
   min-height: var(--breadcrumb-height)
-  padding: 10px 20px
-  padding-bottom: 0
+  padding: 0
 
   li
     white-space: nowrap
diff --git a/frontend/src/global_styles/layout/_main_menu.sass b/frontend/src/global_styles/layout/_main_menu.sass
index f5b96e2f97a9..ccd16383f440 100644
--- a/frontend/src/global_styles/layout/_main_menu.sass
+++ b/frontend/src/global_styles/layout/_main_menu.sass
@@ -400,3 +400,6 @@ $badge_offset: 4px
 #main-menu-toggle
   .icon-close
     display: none
+
+.content-overlay
+  display: none
diff --git a/frontend/src/global_styles/layout/_print.sass b/frontend/src/global_styles/layout/_print.sass
index fa183e598347..d57deb0f148f 100644
--- a/frontend/src/global_styles/layout/_print.sass
+++ b/frontend/src/global_styles/layout/_print.sass
@@ -27,16 +27,9 @@
 
   #content-wrapper
     width: 100vw
-    margin: 0
-    border: 0
     background: #fff
     overflow: visible !important
 
-  #content-wrapper.hidden-navigation,
-  #content.hidden-navigation
-    width: 99% !important
-    margin-left: 0 !important
-
   .autoscroll
     overflow-x: visible
 
diff --git a/frontend/src/global_styles/layout/_toolbar_mobile.sass b/frontend/src/global_styles/layout/_toolbar_mobile.sass
index e644ac548208..f1b4415cbf2c 100644
--- a/frontend/src/global_styles/layout/_toolbar_mobile.sass
+++ b/frontend/src/global_styles/layout/_toolbar_mobile.sass
@@ -27,36 +27,29 @@
 //++
 
 @media screen and (max-width: $breakpoint-md)
-  #content
-    .toolbar-container
-      .title-container:not(editable-toolbar-title)
-        margin-right: 10px
-
-      .toolbar-items
-        display: flex
-        flex-wrap: nowrap
-        justify-content: flex-end
-        margin-right: 0
-
-        .toolbar-item
-          margin: 0 0 0 10px
-
-        // Hide toolbar button texts on mobile
-        .button--text:not(.button--text_without_icon),
-        .icon-pulldown,
-        .spot-icon_dropdown
-          display: none
-
-        .op-icon--wrapper
-          margin: 0
-
-        > li
-          .button
-            width: 100%
-            white-space: nowrap
-
-          .spot-action-bar .button
-            width: auto
-
-        > form input.button
+  .toolbar-container
+    .title-container:not(editable-toolbar-title)
+      margin-right: 10px
+
+    .toolbar-items
+      display: flex
+      flex-wrap: nowrap
+      justify-content: flex-end
+      margin-right: 0
+
+      .toolbar-item
+        margin: 0 0 0 10px
+
+      // Hide toolbar button texts on mobile
+      .button--text:not(.button--text_without_icon),
+      .icon-pulldown,
+      .spot-icon_dropdown
+        display: none
+
+      .op-icon--wrapper
+        margin: 0
+
+      > li
+        .button
           width: 100%
+          white-space: nowrap
diff --git a/frontend/src/global_styles/layout/_zen_mode.sass b/frontend/src/global_styles/layout/_zen_mode.sass
index aebb385bb168..c679d6a68cc9 100644
--- a/frontend/src/global_styles/layout/_zen_mode.sass
+++ b/frontend/src/global_styles/layout/_zen_mode.sass
@@ -2,20 +2,9 @@ body.zen-mode
   #main-menu
     display: none
   #content-wrapper
-    margin-left: 0px
     height: 100vh
     width: 100vw
 
   #main
-    top: 0px
     height: 100%
     grid-template-columns: auto
-
-  &.controller-wiki #content
-    margin: 0 auto
-
-    @media only screen and (max-width: $breakpoint-xl)
-      max-width: 90vw
-
-    @include breakpoint(xl)
-      max-width: 60vw
diff --git a/frontend/src/global_styles/layout/work_packages/_mobile.sass b/frontend/src/global_styles/layout/work_packages/_mobile.sass
index ce7401d65250..873a30365d81 100644
--- a/frontend/src/global_styles/layout/work_packages/_mobile.sass
+++ b/frontend/src/global_styles/layout/work_packages/_mobile.sass
@@ -101,9 +101,6 @@
 
 @media screen and (max-width: $breakpoint-sm)
   .router--work-packages-full-view
-    #content
-      position: relative
-
     .wp-show--header-container
       grid-template-columns: auto 1fr
       grid-template-rows: auto auto 1fr
@@ -120,9 +117,9 @@
 
   .router--work-packages-partitioned-split-view
     // Ensure the WP cards can span the complete width on mobile
-    #content
+    #content-body
       padding: 15px 0 !important
 
-      .toolbar-container,
-      .work-packages--filters-optional-container
-        margin-left: 15px
+    .toolbar-container,
+    .work-packages--filters-optional-container
+      margin-left: 15px
diff --git a/frontend/src/global_styles/layout/work_packages/_table.sass b/frontend/src/global_styles/layout/work_packages/_table.sass
index e310b7fee1ff..cb8c488597da 100644
--- a/frontend/src/global_styles/layout/work_packages/_table.sass
+++ b/frontend/src/global_styles/layout/work_packages/_table.sass
@@ -53,9 +53,11 @@
 //
 // This makes use of more specific rules overwriting less specific ones.
 // Per default, the height is always 100
-.openproject-base--ui-view,
-.work-packages-page--ui-view
-  height: 100%
+// TODO: remove this whole block once the angular router is removed
+body[class*="router--"]
+  .openproject-base--ui-view,
+  .work-packages-page--ui-view
+    height: 100%
 
 .work-packages-partitioned-query-space--container
   > .toolbar-container
@@ -134,9 +136,6 @@
   contain: strict
 
 .router--work-packages-base
-  #content
-    height: 100%
-
   .work-packages-partitioned-page--content-left
     overflow: hidden
 
diff --git a/frontend/src/global_styles/openproject/_generic.sass b/frontend/src/global_styles/openproject/_generic.sass
index e9ede8321f45..2d5c9fc4ee67 100644
--- a/frontend/src/global_styles/openproject/_generic.sass
+++ b/frontend/src/global_styles/openproject/_generic.sass
@@ -26,6 +26,9 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
+a
+  text-decoration: var(--link-text-decoration)
+
 .no-padding-bottom
   padding-bottom: 0 !important
 
@@ -104,6 +107,9 @@
   .-placeholder &
     direction: ltr
 
+.-draggable
+  cursor: grab
+
 .drop-zone.-dragged-over
   background-color: #eaeaea60
 
diff --git a/frontend/src/global_styles/openproject/_homescreen.sass b/frontend/src/global_styles/openproject/_homescreen.sass
index 1011a9fce9ec..bb3c656e8393 100644
--- a/frontend/src/global_styles/openproject/_homescreen.sass
+++ b/frontend/src/global_styles/openproject/_homescreen.sass
@@ -28,10 +28,9 @@
 
 @import mixins
 
-.controller-homescreen #content-wrapper
+.controller-homescreen .widget-boxes
   .widget-box
     box-shadow: none
-    border: 1px solid var(--borderColor-default)
 
     &.upsale
       background: var(--bgColor-accent-muted)
diff --git a/frontend/src/global_styles/openproject/_mixins.sass b/frontend/src/global_styles/openproject/_mixins.sass
index f3ebb5063696..857ba0da4f21 100644
--- a/frontend/src/global_styles/openproject/_mixins.sass
+++ b/frontend/src/global_styles/openproject/_mixins.sass
@@ -243,16 +243,13 @@ $scrollbar-size: 10px
   bottom: 0
   z-index: 900
 
-@mixin extended-content--top
-  #content
-    padding-top: 0
-
 @mixin extended-content--bottom
-  #content
+  #content-body
     padding-bottom: 0
 
 @mixin extended-content--left
-  #content
+  #content-body,
+  #content-header
     padding-left: 0
 
     .toolbar-container
@@ -261,7 +258,8 @@ $scrollbar-size: 10px
       margin-left: 20px
 
 @mixin extended-content--right
-  #content
+  #content-body,
+  #content-header
     padding-right: 0
 
     .toolbar-container
@@ -307,7 +305,6 @@ $scrollbar-size: 10px
   line-height: 36px !important
 
 @mixin global-breadcrumb-styles
-  margin-top: 10px
   display: none
   @include default-transition
   overflow: hidden
diff --git a/modules/storages/app/views/storages/admin/storages/index.html.erb b/modules/storages/app/views/storages/admin/storages/index.html.erb
index db38dbc49303..479409a1f35d 100644
--- a/modules/storages/app/views/storages/admin/storages/index.html.erb
+++ b/modules/storages/app/views/storages/admin/storages/index.html.erb
@@ -6,41 +6,43 @@
   I18n.t("storages.label_storage")
 end %>
 
-<%= render(Primer::OpenProject::PageHeader.new) do |header| %>
-  <% header.with_title { t("external_file_storages") } %>
-  <% header.with_description { t("storages.page_titles.file_storages.subtitle") } %>
-  <% header.with_breadcrumbs([{ href: admin_index_path, text: t("label_administration") },
-                              { href: admin_settings_storages_path, text: t("project_module_storages") },
-                              t("external_file_storages")]) %>
-<% end %>
+<% content_for :content_header do %>
+  <%= render(Primer::OpenProject::PageHeader.new) do |header| %>
+    <% header.with_title { t("external_file_storages") } %>
+    <% header.with_description { t("storages.page_titles.file_storages.subtitle") } %>
+    <% header.with_breadcrumbs([{ href: admin_index_path, text: t("label_administration") },
+                                { href: admin_settings_storages_path, text: t("project_module_storages") },
+                                t("external_file_storages")]) %>
+  <% end %>
 
-<%= render(Primer::OpenProject::SubHeader.new) do |subheader|
-  subheader.with_action_component do
-    render(Primer::Alpha::ActionMenu.new(test_selector: 'storages-select-provider-action-menu',
-                                         anchor_align: :end)) do |menu|
-      menu.with_show_button(scheme: :primary,
-                            aria: { label: I18n.t("storages.label_add_new_storage") },
-                            test_selector: "storages-create-new-provider-button") do |button|
-        button.with_leading_visual_icon(icon: :plus)
-        button.with_trailing_action_icon(icon: :"triangle-down")
-        I18n.t("storages.label_storage")
-      end
+  <%= render(Primer::OpenProject::SubHeader.new) do |subheader|
+    subheader.with_action_component do
+      render(Primer::Alpha::ActionMenu.new(test_selector: 'storages-select-provider-action-menu',
+                                           anchor_align: :end)) do |menu|
+        menu.with_show_button(scheme: :primary,
+                              aria: { label: I18n.t("storages.label_add_new_storage") },
+                              test_selector: "storages-create-new-provider-button") do |button|
+          button.with_leading_visual_icon(icon: :plus)
+          button.with_trailing_action_icon(icon: :"triangle-down")
+          I18n.t("storages.label_storage")
+        end
 
-      ::Storages::Storage::PROVIDER_TYPES.each do |provider_type|
-        short_provider_type = ::Storages::Storage.shorten_provider_type(provider_type)
+        ::Storages::Storage::PROVIDER_TYPES.each do |provider_type|
+          short_provider_type = ::Storages::Storage.shorten_provider_type(provider_type)
 
-        menu.with_item(
-          label: I18n.t("storages.provider_types.#{short_provider_type}.name"),
-          href: url_helpers.select_provider_admin_settings_storages_path(provider: short_provider_type)
-        ) do |item|
-          item.with_trailing_visual_icon(
-            icon: "op-enterprise-addons",
-            classes: "upsale-colored"
-          ) if ::Storages::Storage::one_drive_without_ee_token?(provider_type)
+          menu.with_item(
+            label: I18n.t("storages.provider_types.#{short_provider_type}.name"),
+            href: url_helpers.select_provider_admin_settings_storages_path(provider: short_provider_type)
+          ) do |item|
+            item.with_trailing_visual_icon(
+              icon: "op-enterprise-addons",
+              classes: "upsale-colored"
+            ) if ::Storages::Storage::one_drive_without_ee_token?(provider_type)
+          end
         end
       end
     end
-  end
-end %>
+  end %>
+<% end %>
 
 <%= render(::Storages::Admin::StorageListComponent.new(@storages)) %>