diff --git a/app/assets/javascripts/pages/projects/network/network.js b/app/assets/javascripts/pages/projects/network/network.js
index b88127384dced9dfb376543eb45bca598621e48d..10fa77267ce866d2ed7ec50196865eed9dc25e9d 100644
--- a/app/assets/javascripts/pages/projects/network/network.js
+++ b/app/assets/javascripts/pages/projects/network/network.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import BranchGraph from '~/network/branch_graph';
 
-const vph = $(window).height() - 250;
+const vph = $(window).height() - $('.project-network-header').height();
 
 export default class Network {
   constructor(opts) {
@@ -11,6 +11,8 @@ export default class Network {
     this.filter_ref.click(() => this.submit());
     this.branch_graph = new BranchGraph(this.network_graph, this.opts);
     this.network_graph.css({ height: `${vph}px` });
+    $('body').css({ 'overflow-y': 'hidden' });
+    $('.content-wrapper').css({ 'padding-bottom': 0 });
   }
 
   submit() {
diff --git a/app/assets/stylesheets/framework/top_bar.scss b/app/assets/stylesheets/framework/top_bar.scss
index 1ec8cb44f955fc96dc42d76b62e24cfe33aeec26..96c14e3c5951a42cb212522f1ee8ec764aa8144e 100644
--- a/app/assets/stylesheets/framework/top_bar.scss
+++ b/app/assets/stylesheets/framework/top_bar.scss
@@ -24,4 +24,3 @@
 .top-app-header {
   top: $calc-application-header-height;
 }
-
diff --git a/app/views/projects/network/_head.html.haml b/app/views/projects/network/_head.html.haml
deleted file mode 100644
index fdb29455d876a5a2e9eaebf9f170be7364b5a2fe..0000000000000000000000000000000000000000
--- a/app/views/projects/network/_head.html.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-.row-content-block.second-block.content-component-block.gl-px-0.gl-py-3
-  .gl-w-max.gl-max-w-full
-    #js-graph-ref-switcher{ data: { project_id: @project.id, ref: @ref, network_path: project_network_path(@project, @ref, ref_type: @ref_type) } }
-
-  .oneline
-    = _("You can move around the graph by using the arrow keys.")
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index af74bbefb2ea9889d33dc28ea742ba7f98eaff4a..142399330fa4d1c89babca144a5a1c42d88229c0 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -1,18 +1,28 @@
-- breadcrumb_title _("Graph")
-- page_title _("Graph"), @ref
+- title = _("Repository graph")
+- breadcrumb_title title
+- page_title title, @ref
 - network_path = project_network_path(@project, @ref, ref_type: @ref_type)
-= render "head"
-.gl-mt-5
-  .project-network.gl-border-1.gl-border-solid.gl-border-gray-300
-    .controls.gl-bg-strong.gl-p-2.gl-text-base.gl-text-subtle.gl-border-b-1.gl-border-b-solid.gl-border-b-gray-300
-      = form_tag network_path, method: :get, class: 'form-inline network-form' do |f|
-        = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: _("Git revision"), class: 'search-input form-control gl-form-input input-mx-250 search-sha gl-mr-2'
-        = render Pajamas::ButtonComponent.new(type: :submit, variant: :confirm, icon: 'search', button_options: {'aria-label': _("Search"), 'title': _("Search")})
-        .form-group{ class: 'gl-ml-5 !gl-mb-3' }
+
+.project-network-header.gl-flex.gl-flex-col.gl-overflow-hidden
+  = render ::Layouts::PageHeadingComponent.new(title) do |c|
+    - c.with_description do
+      = _("You can move around the graph by using the arrow keys.")
+
+  .project-network
+    .gl-flex.gl-flex-wrap.gl-items-start.gl-gap-3.gl-p-5.gl-bg-subtle.gl-border-t.gl-border-b
+      .gl-min-w-26
+        #js-graph-ref-switcher{ data: { project_id: @project.id, ref: @ref, network_path: project_network_path(@project, @ref, ref_type: @ref_type) } }
+
+      = form_tag network_path, method: :get, class: 'gl-grow gl-flex gl-flex-wrap gl-gap-3 gl-items-center network-form' do |f|
+        .gl-flex
+          = text_field_tag :extended_sha1, @options[:extended_sha1], placeholder: _("Git revision"), class: 'search-input form-control gl-form-input search-sha !gl-rounded-r-none'
+          = render Pajamas::ButtonComponent.new(type: :submit, icon: 'search', button_options: { class: '!gl-rounded-l-none -gl-ml-[1px]', 'aria-label': _("Search"), 'title': _("Search") })
+
+        .gl-mt-3
           = render Pajamas::CheckboxTagComponent.new(name: :filter_ref, checked: @options[:filter_ref]) do |c|
             - c.with_label do
               = _("Begin with the selected commit")
 
     - if @commit
-      .network-graph.gl-bg-white.gl-overflow-scroll.gl-overflow-x-hidden{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
-        = gl_loading_icon(size: 'md', css_class: 'gl-mt-3')
+      .network-graph.gl-overflow-scroll.gl-overflow-x-hidden{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
+        = gl_loading_icon(size: 'md', css_class: 'gl-mt-5')
diff --git a/spec/features/projects/network_graph_spec.rb b/spec/features/projects/network_graph_spec.rb
index e84bbf382ad69724c53e938e66c0403c63b9fcea..b0cebb80a5832caaeac9e4177d7ccb53c025ae07 100644
--- a/spec/features/projects/network_graph_spec.rb
+++ b/spec/features/projects/network_graph_spec.rb
@@ -86,7 +86,7 @@ def click_show_only_selected_branch_checkbox
       it 'filters select tag' do
         switch_ref_to('v1.0.0')
 
-        expect(page).to have_css 'title', text: 'Graph · v1.0.0', visible: false
+        expect(page).to have_css 'title', text: 'Repository graph · v1.0.0', visible: false
         page.within '.network-graph' do
           expect(page).to have_content 'Change some files'
         end