diff --git a/app/views/dashboard/_no_filter_selected.html.haml b/app/views/dashboard/_no_filter_selected.html.haml
index 48c844d93e82db34944205c069cad623858448a4..684c119f5cbd4fd0630721963c1cc40babd9571f 100644
--- a/app/views/dashboard/_no_filter_selected.html.haml
+++ b/app/views/dashboard/_no_filter_selected.html.haml
@@ -1,8 +1,2 @@
-.row.empty-state.text-center
-  .col-12
-    .svg-130.gl-mt-3
-      = image_tag 'illustrations/issue-dashboard_results-without-filter.svg'
-  .col-12
-    .text-content
-      %h4
-        = _("Please select at least one filter to see results")
+= render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-search-md.svg',
+  title: _("Please select at least one filter to see results"))
diff --git a/app/views/shared/dashboard/_search_timeout_occurred.html.haml b/app/views/shared/dashboard/_search_timeout_occurred.html.haml
index 4b6331ee9865651c34987c0a07ff45c37e0b335c..babfbe4c5d564aebdce61cda8c36175b9060e480 100644
--- a/app/views/shared/dashboard/_search_timeout_occurred.html.haml
+++ b/app/views/shared/dashboard/_search_timeout_occurred.html.haml
@@ -1,8 +1,2 @@
-.row.empty-state.text-center
-  .col-12
-    .svg-130.gl-mt-3
-      = image_tag 'illustrations/issue-dashboard_results-without-filter.svg'
-  .col-12
-    .text-content
-      %h4
-        = _("Too many results to display. Edit your search or add a filter.")
+= render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-search-md.svg',
+  title: _("Too many results to display. Edit your search or add a filter."))
diff --git a/app/views/shared/empty_states/_merge_requests.html.haml b/app/views/shared/empty_states/_merge_requests.html.haml
index fabcf9fcc263e79006c2cbe9f7381f0669d90496..3df5b06a70393ae196467ae01a7784be9b9ac6c8 100644
--- a/app/views/shared/empty_states/_merge_requests.html.haml
+++ b/app/views/shared/empty_states/_merge_requests.html.haml
@@ -1,4 +1,5 @@
 - button_path = local_assigns.fetch(:button_path, false)
+- button_text = _("New merge request")
 - closed_merged_count = issuables_count_for_state(:merged, :closed)
 - opened_merged_count = issuables_count_for_state(:merged, :opened)
 - is_opened_state = params[:state] == 'opened'
@@ -6,42 +7,43 @@
 - can_create_merge_request = merge_request_source_project_for_project(@project)
 - tracking_data = { event_tracking: 'click_new_merge_request_empty_list' }
 
-.row.empty-state.merge-requests{ data: { testid: 'issuable-empty-state' } }
-  .col-12
-    .svg-content.svg-150
-      = image_tag 'illustrations/empty-state/empty-merge-requests-md.svg', { auto_dark: true }
-  .col-12
-    .text-content
-      - if has_filter_bar_param?
-        %h4.text-center
-          = _("Sorry, your filter produced no results")
-        %p.text-center
-          = _("To widen your search, change or remove filters above")
-        .text-center
-          - if can_create_merge_request
-            = link_button_to _("New merge request"), button_path || project_new_merge_request_path(@project),
-              title: _("New merge request"), variant: :confirm, data: tracking_data
-      - elsif is_opened_state && opened_merged_count == 0 && closed_merged_count > 0
-        %h4.text-center
-          = _("There are no open merge requests")
-        %p.text-center
-          = _("To keep this project going, create a new merge request")
-        .text-center
-          - if can_create_merge_request
-            = link_button_to _("New merge request"), button_path || project_new_merge_request_path(@project),
-              title: _("New merge request"), variant: :confirm, data: tracking_data
-      - elsif is_closed_state && opened_merged_count > 0 && closed_merged_count == 0
-        %h4.text-center
-          = _("There are no closed merge requests")
-      - else
-        %h4
-          = _("Merge requests are a place to propose changes you've made to a project and discuss those changes with others")
-        %p
-          = _("Interested parties can even contribute by pushing commits if they want to.")
-        - if button_path
-          .text-center
-            = link_button_to _('New merge request'), button_path,
-              title: _('New merge request'),
-              id: 'new_merge_request_link',
-              variant: :confirm,
-              data: { testid: "new-merge-request-button", **tracking_data }
+- if has_filter_bar_param?
+  = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-search-md.svg',
+    empty_state_options: { data: { testid: 'issuable-empty-state' } },
+    title: _("Sorry, your filter produced no results")) do |c|
+
+    - c.with_description do
+      = _("To widen your search, change or remove filters above")
+      - if can_create_merge_request
+        .gl-mt-5= link_button_to button_text, button_path || project_new_merge_request_path(@project),
+          title: button_text, variant: :confirm, data: tracking_data
+
+- elsif is_opened_state && opened_merged_count == 0 && closed_merged_count > 0
+  = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-merge-requests-md.svg',
+    empty_state_options: { data: { testid: 'issuable-empty-state' } },
+    title: _("There are no open merge requests")) do |c|
+
+    - c.with_description do
+      = _("To keep this project going, create a new merge request")
+      - if can_create_merge_request
+        .gl-mt-5= link_button_to button_text, button_path || project_new_merge_request_path(@project),
+          title: button_text, variant: :confirm, data: tracking_data
+
+- elsif is_closed_state && opened_merged_count > 0 && closed_merged_count == 0
+  = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-merge-requests-md.svg',
+    empty_state_options: { data: { testid: 'issuable-empty-state' } },
+    title: _("There are no closed merge requests"))
+
+- else
+  = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-merge-requests-md.svg',
+    empty_state_options: { data: { testid: 'issuable-empty-state' } },
+    title: _("Merge requests are a place to propose changes you've made to a project and discuss those changes with others")) do |c|
+
+    - c.with_description do
+      = _("Interested parties can even contribute by pushing commits if they want to.")
+      - if button_path
+        .gl-mt-5= link_button_to button_text, button_path,
+          title: button_text,
+          id: 'new_merge_request_link',
+          variant: :confirm,
+          data: { testid: "new-merge-request-button", **tracking_data }
diff --git a/spec/features/dashboard/merge_requests_spec.rb b/spec/features/dashboard/merge_requests_spec.rb
index ba42b3e099b7a7db1de74bf007c2c9ce42a36a78..c32dcd528ab7ad73ebdd3fdf303c669d4600d40b 100644
--- a/spec/features/dashboard/merge_requests_spec.rb
+++ b/spec/features/dashboard/merge_requests_spec.rb
@@ -80,7 +80,7 @@
     it 'shows an empty state' do
       visit merge_requests_dashboard_path(assignee_username: current_user.username)
 
-      expect(page).to have_selector('.empty-state')
+      expect(page).to have_selector('.gl-empty-state')
     end
   end
 
diff --git a/spec/features/groups/merge_requests_spec.rb b/spec/features/groups/merge_requests_spec.rb
index 745360d591ed24b965d83aaa292762bf93e684f9..94980cea0191f7e45f8db5e66d606394d024b9fd 100644
--- a/spec/features/groups/merge_requests_spec.rb
+++ b/spec/features/groups/merge_requests_spec.rb
@@ -97,7 +97,7 @@
     it 'shows an empty state, button to create merge request and no filters bar', :aggregate_failures, :js do
       visit path
 
-      expect(page).to have_selector('.empty-state')
+      expect(page).to have_selector('.gl-empty-state')
       expect(page).to have_button('Select project to create merge request')
       expect(page).to have_selector('.issues-filters')
     end
@@ -107,7 +107,7 @@
         create(:merge_request, :closed, source_project: project, target_project: project)
         visit path
 
-        expect(page).to have_selector('.empty-state')
+        expect(page).to have_selector('.gl-empty-state')
         expect(page).to have_button('Select project to create merge request')
         expect(page).to have_selector('.issues-filters')
       end
diff --git a/spec/features/merge_requests/user_sees_empty_state_spec.rb b/spec/features/merge_requests/user_sees_empty_state_spec.rb
index f5803a47b2c6fe0bdc87d64c3e8f318d212579e2..f2c9b4b1b9655c3d71308adebedc8f3fedc0ddfe 100644
--- a/spec/features/merge_requests/user_sees_empty_state_spec.rb
+++ b/spec/features/merge_requests/user_sees_empty_state_spec.rb
@@ -16,7 +16,7 @@
   it 'shows an empty state and a "New merge request" button' do
     visit project_merge_requests_path(project)
 
-    expect(page).to have_selector('.empty-state')
+    expect(page).to have_selector('.gl-empty-state')
     expect(page).to have_link 'New merge request', href: project_new_merge_request_path(project)
   end
 
@@ -28,13 +28,13 @@
     it 'does not show an empty state' do
       visit project_merge_requests_path(project)
 
-      expect(page).not_to have_selector('.empty-state')
+      expect(page).not_to have_selector('.gl-empty-state')
     end
 
     it 'shows empty state when filter results empty' do
       visit project_merge_requests_path(project, milestone_title: "1.0")
 
-      expect(page).to have_selector('.empty-state')
+      expect(page).to have_selector('.gl-empty-state')
       expect(page).to have_content('Sorry, your filter produced no results')
       expect(page).to have_content('To widen your search, change or remove filters above')
     end
@@ -52,8 +52,8 @@
     it 'shows an empty state and a "New merge request" button' do
       visit project_merge_requests_path(project, search: 'foo')
 
-      expect(page).to have_selector('.empty-state')
-      within('.empty-state') do
+      expect(page).to have_selector('.gl-empty-state')
+      within('.gl-empty-state') do
         expect(page).to have_link 'New merge request', href: project_new_merge_request_path(forked_project)
       end
     end