diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
index 883690681ce6a4765038d140fa2605955f00f91e..ef8f5cc1d1b59019709a34c56b7fcbe374ccd8be 100644
--- a/app/assets/stylesheets/framework/new_card.scss
+++ b/app/assets/stylesheets/framework/new_card.scss
@@ -29,6 +29,7 @@
   }
 
   &-title {
+    @include gl-display-flex;
     @include gl-font-base;
     @include gl-font-weight-bold;
     @include gl-relative;
diff --git a/app/views/admin/hooks/edit.html.haml b/app/views/admin/hooks/edit.html.haml
index f362cc9efbf44ef8ede909d2cdb3a0e79c3e3e7c..29b90f69800fce4d2631902d9e953072d5929b1b 100644
--- a/app/views/admin/hooks/edit.html.haml
+++ b/app/views/admin/hooks/edit.html.haml
@@ -9,10 +9,11 @@
   = gitlab_ui_form_for @hook, as: :hook, url: admin_hook_path do |f|
     = render partial: 'form', locals: { form: f, hook: @hook }
 
-    %div
-      = f.submit _('Save changes'), pajamas_button: true, class: 'gl-sm-mr-3'
-      = render 'shared/web_hooks/test_button', hook: @hook
-      = link_button_to _('Delete'), admin_hook_path(@hook), method: :delete, class: 'gl-float-right', aria: { label: s_('Webhooks|Delete webhook') }, data: { confirm: s_('Webhooks|Are you sure you want to delete this webhook?'), confirm_btn_variant: 'danger' }, variant: :danger
+    .gl-display-flex.gl-justify-content-space-between
+      %div
+        = f.submit _('Save changes'), pajamas_button: true, class: 'gl-sm-mr-3'
+        = render 'shared/web_hooks/test_button', hook: @hook
+      = link_button_to _('Delete'), admin_hook_path(@hook), method: :delete, aria: { label: s_('Webhooks|Delete webhook') }, data: { confirm: s_('Webhooks|Are you sure you want to delete this webhook?'), confirm_btn_variant: 'danger' }, variant: :danger
 
 %hr
 
diff --git a/app/views/admin/hooks/index.html.haml b/app/views/admin/hooks/index.html.haml
index 5bac2586fe6a9ea4cea1fcd9fa9e6884f577379c..14137e788bc56e44230042799e9bbb6b61783338 100644
--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
@@ -1,13 +1,7 @@
 - page_title @hook.pluralized_name
 
-.gl-mt-5
+.settings-section
   = render 'shared/web_hooks/title_and_docs', hook: @hook
-
-  .gl-mb-3
-    = gitlab_ui_form_for @hook, as: :hook, url: admin_hooks_path do |f|
-      = render partial: 'form', locals: { form: f, hook: @hook }
-      = f.submit _('Add system hook'), pajamas_button: true
-
-    = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class
+  = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class, partial: 'form', url: admin_hooks_path
 
 = render 'shared/file_hooks/index'
diff --git a/app/views/projects/hooks/index.html.haml b/app/views/projects/hooks/index.html.haml
index 6bc44a9171b5806e49e788e065ea672863e7d0dc..b57adc0ef0d09043802607f96ddf0115a21d9afc 100644
--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/index.html.haml
@@ -4,10 +4,4 @@
 
 .gl-mt-3.js-search-settings-section
   = render 'shared/web_hooks/title_and_docs', hook: @hook
-
-  .gl-mb-3
-    = gitlab_ui_form_for @hook, as: :hook, url: polymorphic_path([@project, :hooks]), html: { class: 'js-webhook-form' } do |f|
-      = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
-      = f.submit _('Add webhook'), pajamas_button: true, data: { qa_selector: "create_webhook_button" }
-
-    = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class
+  = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class, partial: 'shared/web_hooks/form', url: polymorphic_path([@project, :hooks])
diff --git a/app/views/shared/file_hooks/_index.html.haml b/app/views/shared/file_hooks/_index.html.haml
index 03300be918197fce4fd2958e22bab67b74c4d105..9f1b11d6ab5af25ae5d3ca6381683c8d71be55a8 100644
--- a/app/views/shared/file_hooks/_index.html.haml
+++ b/app/views/shared/file_hooks/_index.html.haml
@@ -1,24 +1,30 @@
 - file_hooks = Gitlab::FileHook.files
 
-.gl-mt-7
-  %h4.gl-my-0
-    = _('File Hooks')
+.settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %h4.gl-my-0
+        = _('File Hooks')
   %p.gl-text-secondary
     = _('File hooks are similar to system hooks but are executed as files instead of sending data to a URL.')
     = link_to _('For more information, see the File Hooks documentation.'), help_page_path('administration/file_hooks')
 
   .gl-mb-3
-    - if file_hooks.any?
-      = render Pajamas::CardComponent.new do |c|
-        - c.with_header do
-          = _('File Hooks (%{count})') % { count: file_hooks.count }
-        - c.with_body do
-          %ul.content-list
-            - file_hooks.each do |file|
-              %li
-                .monospace
-                  = File.basename(file)
-    - else
-      = render Pajamas::CardComponent.new do |c|
-        - c.with_body do
-          .nothing-here-block= _('No file hooks found.')
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card' }, header_options: { class: 'gl-new-card-header'}, body_options: { class: 'gl-new-card-body'}) do |c|
+      - c.with_header do
+        .gl-new-card-title-wrapper
+          %h3.gl-new-card-title
+            = _('File Hooks')
+            %span.gl-new-card-count
+              = sprite_icon('hook', css_class: 'gl-mr-2')
+              #{file_hooks.count}
+      - c.with_body do
+        .gl-new-card-content
+          - if file_hooks.any?
+            %ul.content-list{ class: 'gl-my-n3!' }
+              - file_hooks.each do |file|
+                %li.label-list-item
+                  .monospace
+                    = File.basename(file)
+          - else
+            .gl-new-card-empty.gl-text-center= _('No file hooks found.')
diff --git a/app/views/shared/hook_logs/_index.html.haml b/app/views/shared/hook_logs/_index.html.haml
index d4ed085be04739621ad41dbad413794c7bf45f8e..ee7d5b79560e118bc2cfbf57b3151ad91c4836f0 100644
--- a/app/views/shared/hook_logs/_index.html.haml
+++ b/app/views/shared/hook_logs/_index.html.haml
@@ -2,7 +2,9 @@
 - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: docs_link_url }
 - link_end = '</a>'.html_safe
 
-.gl-mt-5
-  %h4.gl-my-0= _('Recent events')
+.settings-section
+  .settings-sticky-header
+    .settings-sticky-header-inner
+      %h4.gl-my-0= _('Recent events')
   %p.gl-text-secondary= _('GitLab events trigger webhooks. Use the request details of a webhook to help troubleshoot problems. %{link_start}How do I troubleshoot?%{link_end}').html_safe % { link_start: link_start, link_end: link_end }
   = render partial: 'shared/hook_logs/recent_deliveries_table', locals: { hook: hook, hook_logs: hook_logs }
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index 4ca11eb3849b5f7e1d7356d7aaad671e60cccf3c..a0e55cd57233943b9dbbf31247438cf597cb3d93 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -11,56 +11,56 @@
 .form-group
   = form.label :url, s_('Webhooks|Trigger'), class: 'label-bold'
   %ul.list-unstyled
-    %li.gl-pb-5
+    %li.gl-pb-3
       .js-vue-push-events{ data: { push_events: hook.push_events.to_s, strategy: hook.branch_filter_strategy, is_new_hook: hook.new_record?.to_s, push_events_branch_filter: hook.push_events_branch_filter } }
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :tag_push_events,
           integration_webhook_event_human_name(:tag_push_events),
           help_text: s_('Webhooks|A new tag is pushed to the repository.')
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :note_events,
           integration_webhook_event_human_name(:note_events),
           help_text: s_('Webhooks|A comment is added to an issue or merge request.')
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :confidential_note_events,
           integration_webhook_event_human_name(:confidential_note_events),
           help_text: s_('Webhooks|A comment is added to a confidential issue.')
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :issues_events,
           integration_webhook_event_human_name(:issues_events),
           help_text: s_('Webhooks|An issue is created, updated, closed, or reopened.')
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :confidential_issues_events,
           integration_webhook_event_human_name(:confidential_issues_events),
           help_text: s_('Webhooks|A confidential issue is created, updated, closed, or reopened.')
     - if @group
       = render_if_exists 'groups/hooks/member_events', form: form
       = render_if_exists 'groups/hooks/subgroup_events', form: form
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :merge_requests_events,
           integration_webhook_event_human_name(:merge_requests_events),
           help_text: s_('Webhooks|A merge request is created, updated, or merged.')
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :job_events,
           integration_webhook_event_human_name(:job_events),
           help_text: s_("Webhooks|A job's status changes.")
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :pipeline_events,
           integration_webhook_event_human_name(:pipeline_events),
           help_text: s_("Webhooks|A pipeline's status changes.")
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :wiki_page_events,
           integration_webhook_event_human_name(:wiki_page_events),
           help_text: s_('Webhooks|A wiki page is created or updated.')
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :deployment_events,
           integration_webhook_event_human_name(:deployment_events),
           help_text: s_('Webhooks|A deployment starts, finishes, fails, or is canceled.')
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :feature_flag_events,
           integration_webhook_event_human_name(:feature_flag_events),
           help_text: s_('Webhooks|A feature flag is turned on or off.')
-    %li.gl-pb-5
+    %li.gl-pb-3
       = form.gitlab_ui_checkbox_component :releases_events,
           integration_webhook_event_human_name(:releases_events),
           help_text: s_('Webhooks|A release is created or updated.')
diff --git a/app/views/shared/web_hooks/_hook.html.haml b/app/views/shared/web_hooks/_hook.html.haml
index 155a7b1827fc059a6a2266334ddb0c7e3f58285a..50ce6552616b1d7950585d474ff5a3438620b196 100644
--- a/app/views/shared/web_hooks/_hook.html.haml
+++ b/app/views/shared/web_hooks/_hook.html.haml
@@ -1,10 +1,10 @@
 - sslStatus = hook.enable_ssl_verification ? _('enabled') : _('disabled')
 - sslBadgeText = _('SSL Verification:') + ' ' + sslStatus
 
-%li
-  .row
-    .col-md-8.col-lg-7
-      %strong.light-header
+%li.label-list-item
+  .gl-display-flex.lgl-align-items-center.row.gl-mx-n1
+    .col-md-8.col-lg-7.gl-px-3
+      .light-header.gl-mb-2
         = hook.url
         - if hook.rate_limited?
           = gl_badge_tag(_('Disabled'), variant: :danger, size: :sm)
@@ -19,7 +19,7 @@
             = gl_badge_tag(integration_webhook_event_human_name(trigger), size: :sm)
         = gl_badge_tag(sslBadgeText, size: :sm)
 
-    .col-md-4.col-lg-5.gl-mt-2.gl-display-flex.gl-md-justify-content-end.gl-align-items-baseline.gl-gap-3
+    .col-md-4.col-lg-5.gl-mt-2.gl-px-3.gl-gap-3.gl-display-flex.gl-md-justify-content-end.gl-align-items-baseline
       = render 'shared/web_hooks/test_button', hook: hook, size: 'small'
       = render Pajamas::ButtonComponent.new(href: edit_hook_path(hook), size: :small) do
         = _('Edit')
diff --git a/app/views/shared/web_hooks/_index.html.haml b/app/views/shared/web_hooks/_index.html.haml
index 8a81e697a593ffd7c14494758737cda8651c44e3..0ea6a0307baf97845c8b03204e6d0fe9f63409f0 100644
--- a/app/views/shared/web_hooks/_index.html.haml
+++ b/app/views/shared/web_hooks/_index.html.haml
@@ -1,13 +1,24 @@
-%hr
-= render Pajamas::CardComponent.new(card_options: { id: 'webhooks-index' }, body_options: { class: 'gl-py-0'}) do |c|
+= render Pajamas::CardComponent.new(card_options: { id: 'webhooks-index', class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header'}, body_options: { class: 'gl-new-card-body'}) do |c|
   - c.with_header do
-    = hook_class.underscore.humanize.titleize.pluralize
-    (#{hooks.size})
+    .gl-new-card-title-wrapper
+      %h3.gl-new-card-title
+        = hook_class.underscore.humanize.titleize.pluralize
+        %span.gl-new-card-count
+          = sprite_icon('hook', css_class: 'gl-mr-2')
+          #{hooks.size}
+    = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content' }) do
+      = _('Add new webhook')
   - c.with_body do
-    - if hooks.any?
-      %ul.content-list
-        - hooks.each do |hook|
-          = render 'shared/web_hooks/hook', hook: hook
-    - else
-      %p.text-center.gl-mt-3.gl-mb-3
-        = _('No webhooks enabled. Select trigger events above.')
+    .gl-new-card-content
+      = gitlab_ui_form_for @hook, as: :hook, url: url, html: { class: 'js-webhook-form gl-new-card-add-form gl-mb-3 gl-display-none js-toggle-content' } do |f|
+        = render partial: partial, locals: { form: f, hook: @hook }
+        = f.submit _('Add webhook'), pajamas_button: true, data: { qa_selector: "create_webhook_button" }
+        = render Pajamas::ButtonComponent.new(button_options: { type: 'reset', class: 'js-webhook-edit-close gl-ml-2 js-toggle-button' }) do
+          = _('Cancel')
+      - if hooks.any?
+        %ul.content-list{ class: 'gl-my-n3!' }
+          - hooks.each do |hook|
+            = render 'shared/web_hooks/hook', hook: hook
+      - else
+        %p.gl-new-card-empty.gl-text-center
+          = _('No webhooks enabled. Select trigger events above.')
diff --git a/app/views/shared/web_hooks/_title_and_docs.html.haml b/app/views/shared/web_hooks/_title_and_docs.html.haml
index 8a6968ee01e8d2a74a371c4dd22b3687bd7c2238..ae32dcea7cbad97bdb1be1fb6fed55b6a12923ca 100644
--- a/app/views/shared/web_hooks/_title_and_docs.html.haml
+++ b/app/views/shared/web_hooks/_title_and_docs.html.haml
@@ -1,7 +1,9 @@
 - webhooks_link_start = '<a href="%{url}">'.html_safe % { url: help_page_path(hook.help_path) }
 
-%h4.gl-my-0
-  = page_title
+.settings-sticky-header
+  .settings-sticky-header-inner
+    %h4.gl-my-0
+      = page_title
 
 - if @project
   - integrations_link_start = '<a href="%{url}">'.html_safe % { url: scoped_integrations_path(project: @project) }
diff --git a/ee/app/views/groups/hooks/index.html.haml b/ee/app/views/groups/hooks/index.html.haml
index dd46880d62fd05e27367a707d5f3380e4bdb7905..51895416fd9ad27dcc18f02c2c3e5c9f96c57886 100644
--- a/ee/app/views/groups/hooks/index.html.haml
+++ b/ee/app/views/groups/hooks/index.html.haml
@@ -4,12 +4,6 @@
 - if @group.licensed_feature_available?(:group_webhooks)
   .gl-mt-3.js-search-settings-section
     = render 'shared/web_hooks/title_and_docs', hook: @hook
-
-    .gl-mb-3
-      = gitlab_ui_form_for @hook, as: :hook, url: polymorphic_path([@group, :hooks]), html: { class: 'js-webhook-form' } do |f|
-        = render partial: 'shared/web_hooks/form', locals: { form: f, hook: @hook }
-        = f.submit _('Add webhook'), pajamas_button: true
-
-      = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class
+    = render 'shared/web_hooks/index', hooks: @hooks, hook_class: @hook.class, partial: 'shared/web_hooks/form', url: polymorphic_path([@group, :hooks])
 - elsif show_promotions?
   = render 'shared/promotions/promote_group_webhooks'
diff --git a/ee/spec/features/groups/hooks/user_adds_hook_spec.rb b/ee/spec/features/groups/hooks/user_adds_hook_spec.rb
index 55f4c110e259ce67347475dddaf5443b82dd00eb..d849dd837cb8d36449864586122540af64e95f0b 100644
--- a/ee/spec/features/groups/hooks/user_adds_hook_spec.rb
+++ b/ee/spec/features/groups/hooks/user_adds_hook_spec.rb
@@ -16,6 +16,7 @@
   end
 
   it "adds new hook", :js do
+    click_button 'Add new webhook'
     fill_in("URL", with: url)
 
     expect { click_button("Add webhook") }.to change { GroupHook.count }.by(1)
diff --git a/ee/spec/features/groups/settings/webhooks_settings_spec.rb b/ee/spec/features/groups/settings/webhooks_settings_spec.rb
index eba35178b7d719bc479cc2a2798aa7abdce7ff61..60a7e9428ddda507b1660f1c74c307dcbcd6f43e 100644
--- a/ee/spec/features/groups/settings/webhooks_settings_spec.rb
+++ b/ee/spec/features/groups/settings/webhooks_settings_spec.rb
@@ -72,6 +72,7 @@
       it 'creates a group hook', :js do
         visit webhooks_path
 
+        click_button 'Add new webhook'
         fill_in 'URL', with: url
         check 'Tag push events'
         check 'Enable SSL verification'
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index f89dc472737129d170ec062f1414117c296a273d..4f796c55c2c826e80816680d8a18a69181455476 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2821,6 +2821,9 @@ msgstr ""
 msgid "Add new directory"
 msgstr ""
 
+msgid "Add new webhook"
+msgstr ""
+
 msgid "Add or remove a user."
 msgstr ""
 
@@ -2854,9 +2857,6 @@ msgstr ""
 msgid "Add suggestion to batch"
 msgstr ""
 
-msgid "Add system hook"
-msgstr ""
-
 msgid "Add text to the sign-in page. Markdown enabled."
 msgstr ""
 
@@ -19253,9 +19253,6 @@ msgstr ""
 msgid "File Hooks"
 msgstr ""
 
-msgid "File Hooks (%{count})"
-msgstr ""
-
 msgid "File Tree"
 msgstr ""
 
diff --git a/spec/features/admin/admin_hooks_spec.rb b/spec/features/admin/admin_hooks_spec.rb
index ee8f94d6658347edf15365a0cf09724f11a7399f..b4f64cbfa7b4b8e8960af3179e25bfb681e13c94 100644
--- a/spec/features/admin/admin_hooks_spec.rb
+++ b/spec/features/admin/admin_hooks_spec.rb
@@ -46,10 +46,12 @@
 
     it 'adds new hook' do
       visit admin_hooks_path
+
+      click_button 'Add new webhook'
       fill_in 'hook_url', with: url
       check 'Enable SSL verification'
 
-      expect { click_button 'Add system hook' }.to change(SystemHook, :count).by(1)
+      expect { click_button 'Add webhook' }.to change(SystemHook, :count).by(1)
       expect(page).to have_content 'SSL Verification: enabled'
       expect(page).to have_current_path(admin_hooks_path, ignore_query: true)
       expect(page).to have_content(url)
@@ -119,11 +121,12 @@
       it 'adds new hook' do
         visit admin_hooks_path
 
+        click_button 'Add new webhook'
         fill_in 'hook_url', with: url
         uncheck 'Repository update events'
         check 'Merge request events'
 
-        expect { click_button 'Add system hook' }.to change(SystemHook, :count).by(1)
+        expect { click_button 'Add webhook' }.to change(SystemHook, :count).by(1)
         expect(page).to have_current_path(admin_hooks_path, ignore_query: true)
         expect(page).to have_content(url)
       end
diff --git a/spec/features/projects/settings/user_searches_in_settings_spec.rb b/spec/features/projects/settings/user_searches_in_settings_spec.rb
index 4ec553a67260194665f5721d9275e1215f9ab8d0..978b678c3341462f80c6d01265a7a3b89a147811 100644
--- a/spec/features/projects/settings/user_searches_in_settings_spec.rb
+++ b/spec/features/projects/settings/user_searches_in_settings_spec.rb
@@ -26,14 +26,6 @@
     it_behaves_like 'can highlight results', 'third-party applications'
   end
 
-  context 'in Webhooks page' do
-    before do
-      visit project_hooks_path(project)
-    end
-
-    it_behaves_like 'can highlight results', 'Secret token'
-  end
-
   context 'in Access Tokens page' do
     before do
       visit project_settings_access_tokens_path(project)
diff --git a/spec/features/projects/settings/webhooks_settings_spec.rb b/spec/features/projects/settings/webhooks_settings_spec.rb
index e3d09ba4ded92d23d7297b7a88dff830a52588ea..af7c790c692b4638c24d3ef6df7d09741e6baf11 100644
--- a/spec/features/projects/settings/webhooks_settings_spec.rb
+++ b/spec/features/projects/settings/webhooks_settings_spec.rb
@@ -31,7 +31,6 @@
 
       it 'show list of webhooks' do
         hook
-
         visit webhooks_path
 
         expect(page.status_code).to eq(200)
@@ -52,6 +51,7 @@
       it 'create webhook', :js do
         visit webhooks_path
 
+        click_button 'Add new webhook'
         fill_in 'URL', with: url
         check 'Tag push events'
         check 'Enable SSL verification'
@@ -60,10 +60,10 @@
         click_button 'Add webhook'
 
         expect(page).to have_content(url)
+        expect(page).to have_content('Webhook was created')
         expect(page).to have_content('SSL Verification: enabled')
         expect(page).to have_content('Tag push events')
         expect(page).to have_content('Job events')
-        expect(page).to have_content('Push events')
       end
 
       it 'edit existing webhook', :js do