diff --git a/app/assets/javascripts/admin/background_migrations/components/database_listbox.vue b/app/assets/javascripts/admin/background_migrations/components/database_listbox.vue
index d3010976ce862216efc7961fbc1510ac76bf693d..60e682c5b9fbde8d592a357695949c7a4ca77ce3 100644
--- a/app/assets/javascripts/admin/background_migrations/components/database_listbox.vue
+++ b/app/assets/javascripts/admin/background_migrations/components/database_listbox.vue
@@ -1,13 +1,9 @@
 <script>
 import { GlCollapsibleListbox } from '@gitlab/ui';
-import { s__ } from '~/locale';
 import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
 
 export default {
   name: 'BackgroundMigrationsDatabaseListbox',
-  i18n: {
-    database: s__('BackgroundMigrations|Database'),
-  },
   components: {
     GlCollapsibleListbox,
   },
@@ -35,8 +31,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-align-items-center">
-    <label id="label" class="gl-font-bold gl-mr-4 gl-mb-0">{{ $options.i18n.database }}</label>
+  <div class="gl-flex gl-align-items-center gl-grow gl-justify-end">
     <gl-collapsible-listbox
       v-model="selected"
       :items="databases"
diff --git a/app/views/admin/background_migrations/_migration.html.haml b/app/views/admin/background_migrations/_migration.html.haml
index 423eb4b7eb72d0f4019e995514ad88c590e804d2..22a8ac1cf6530fc0253f88dffdf4c5cac898e060 100644
--- a/app/views/admin/background_migrations/_migration.html.haml
+++ b/app/views/admin/background_migrations/_migration.html.haml
@@ -1,6 +1,6 @@
 %tr{ role: 'row' }
   %td{ role: 'cell', data: { label: _('Migration') } }
-    = link_to admin_background_migration_path(migration, database: params[:database]) do
+    = link_to admin_background_migration_path(migration, database: params[:database]), class: 'gl-break-anywhere' do
       = migration.job_class_name + ': ' + migration.table_name
   %td{ role: 'cell', data: { label: _('Progress') } }
     - progress = batched_migration_progress(migration, @successful_rows_counts[migration.id])
diff --git a/app/views/admin/background_migrations/index.html.haml b/app/views/admin/background_migrations/index.html.haml
index 804fb3cb1db16685a5bf08004b2e3dca4426f4ad..757a81bf912cd1ca11e8c832aeaca36aff699e69 100644
--- a/app/views/admin/background_migrations/index.html.haml
+++ b/app/views/admin/background_migrations/index.html.haml
@@ -1,17 +1,13 @@
 - page_title s_('BackgroundMigrations|Background Migrations')
 - @breadcrumb_link = admin_background_migrations_path(database: params[:database])
+- learnmore_link = help_page_path('update/background_migrations')
+- learnmore_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learnmore_link }
+- page_description = html_escape(s_('BackgroundMigrations|Background migrations are used to perform data migrations when a migration exceeds the time limits set by GitLab. %{linkStart}Learn more%{linkEnd}')) % { linkStart: learnmore_link_start, linkEnd: '</a>'.html_safe }
 
-.gl-display-flex.gl-flex-direction-column.gl-md-flex-direction-row.gl-sm-align-items-flex-end.gl-pb-5.gl-border-b-1.gl-border-b-solid.gl-border-b-gray-100{ data: { event_tracking_load: 'true', event_tracking: 'view_admin_background_migrations_pageload' } }
-  .gl-flex-grow-1
-    %h3= s_('BackgroundMigrations|Background Migrations')
-    %p.light.gl-mb-0
-      - learnmore_link = help_page_path('update/background_migrations')
-      - learnmore_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learnmore_link }
-      = html_escape(s_('BackgroundMigrations|Background migrations are used to perform data migrations whenever a migration exceeds the time limits in our guidelines. %{linkStart}Learn more%{linkEnd}')) % { linkStart: learnmore_link_start, linkEnd: '</a>'.html_safe }
 
-  - if @databases.size > 1
-    .gl-display-flex.gl-align-items-center.gl-flex-grow-0.gl-flex-basis-0.gl-sm-mt-0.gl-mt-5.gl-sm-ml-7.gl-ml-0
-      #js-database-listbox{ data: { databases: @databases, selected_database: @selected_database } }
+= render ::Layouts::PageHeadingComponent.new(s_('BackgroundMigrations|Background Migrations'),
+  description: page_description,
+  options: { data: { event_tracking_load: 'true', event_tracking: 'view_admin_background_migrations_pageload' } })
 
 = gl_tabs_nav do
   = gl_tab_link_to admin_background_migrations_path({ tab: nil, database: params[:database] }), item_active: @current_tab == 'queued' do
@@ -26,17 +22,22 @@
   = gl_tab_link_to admin_background_migrations_path({ tab: 'finished', database: params[:database] }), item_active: @current_tab == 'finished' do
     = _('Finished')
     = gl_tab_counter_badge limited_counter_with_delimiter(@relations_by_tab['finished'])
+  - if @databases.size > 1
+    #js-database-listbox{ data: { databases: @databases, selected_database: @selected_database } }
 
-.tab-content.gl-tab-content
-  .tab-pane.active{ role: 'tabpanel' }
-    %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
-      %thead{ role: 'rowgroup' }
-        %tr{ role: 'row' }
-          %th.border-bottom{ role: 'cell' }= _('Migration')
-          %th.border-bottom{ role: 'cell' }= _('Progress')
-          %th.border-bottom{ role: 'cell' }= _('Status')
-          %th.border-bottom{ role: 'cell' }
-      %tbody{ role: 'rowgroup' }
-        = render partial: 'migration', collection: @migrations
-
+.tab-content.gl-tab-content.gl-pt-0
+  - if @migrations.any?
+    .tab-pane.active{ role: 'tabpanel' }
+      %table.table.b-table.gl-table.b-table-stacked-md.gl-table-no-top-border.gl-mb-7
+        %thead
+          %tr{ role: 'row' }
+            %th.border-bottom{ role: 'cell' }= _('Migration')
+            %th.border-bottom{ role: 'cell' }= _('Progress')
+            %th.border-bottom{ role: 'cell' }= _('Status')
+            %th.border-bottom{ role: 'cell' }
+        %tbody
+          = render partial: 'migration', collection: @migrations
     = paginate_collection @migrations
+  - else
+    = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-milestone-md.svg',
+      title: s_('BackgroundMigrations|No background migrations'))
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 89754dd73c502332e43e5cb2c440d338cb640236..8aa20ff40c604461b280294e412695dae6d11627 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7850,21 +7850,21 @@ msgstr ""
 msgid "BackgroundMigrations|Background Migrations"
 msgstr ""
 
-msgid "BackgroundMigrations|Background migrations are used to perform data migrations whenever a migration exceeds the time limits in our guidelines. %{linkStart}Learn more%{linkEnd}"
+msgid "BackgroundMigrations|Background migrations are used to perform data migrations when a migration exceeds the time limits set by GitLab. %{linkStart}Learn more%{linkEnd}"
 msgstr ""
 
 msgid "BackgroundMigrations|Batch size"
 msgstr ""
 
-msgid "BackgroundMigrations|Database"
-msgstr ""
-
 msgid "BackgroundMigrations|Failed jobs:"
 msgstr ""
 
 msgid "BackgroundMigrations|Finished at"
 msgstr ""
 
+msgid "BackgroundMigrations|No background migrations"
+msgstr ""
+
 msgid "BackgroundMigrations|Started at"
 msgstr ""