diff --git a/app/views/admin/topics/_form.html.haml b/app/views/admin/topics/_form.html.haml
index 6881bc798e6cbe84fe3ea76eadd82b59d4ea9985..76ba329c3c50d30a7de96c06044bdb1630e5452d 100644
--- a/app/views/admin/topics/_form.html.haml
+++ b/app/views/admin/topics/_form.html.haml
@@ -25,6 +25,7 @@
                                  supports_quick_actions: 'false',
                                  enable_autocomplete: 'false',
                                  disable_attachments: 'true',
+                                 autofocus: 'false',
                                  form_field_classes: 'note-textarea js-gfm-input markdown-area' } }
       = f.hidden_field :description
 
@@ -36,14 +37,12 @@
     - if @topic.avatar?
       .js-remove-topic-avatar{ data: { path: admin_topic_avatar_path(@topic), name: @topic.name } }
 
-  - if @topic.new_record?
-    .form-actions
+  .gl-mt-5.gl-flex.gl-flex-wrap.gl-gap-3
+    - if @topic.new_record?
       = f.submit _('Create topic'), pajamas_button: true
       = render Pajamas::ButtonComponent.new(href: admin_topics_path) do
         = _('Cancel')
-
-  - else
-    .form-actions
+    - else
       = f.submit _('Save changes'), pajamas_button: true
       = render Pajamas::ButtonComponent.new(href: admin_topics_path) do
         = _('Cancel')
diff --git a/app/views/admin/topics/index.html.haml b/app/views/admin/topics/index.html.haml
index 58dd6e7b000e4136921b5e213f52538f55ebb122..dec30c8e465a774bc83f785255c61d0d1765b02f 100644
--- a/app/views/admin/topics/index.html.haml
+++ b/app/views/admin/topics/index.html.haml
@@ -1,20 +1,23 @@
 - page_title _("Topics")
 - add_page_specific_style 'page_bundles/search'
 
-.top-area{ data: { event_tracking_load: 'true', event_tracking: 'view_admin_topics_pageload' } }
-  .nav-controls.gl-w-full.gl-mt-3.gl-mb-3
-    = form_tag admin_topics_path, method: :get do |f|
-      - search = params.fetch(:search, nil)
-      .search-field-holder
-        = search_field_tag :search, search, class: "form-control gl-form-input search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: _('Search by name')
-        = sprite_icon('search', css_class: 'search-icon')
-    .gl-flex-grow-1
+= render ::Layouts::PageHeadingComponent.new(_('Topics'), options: { data: { event_tracking_load: 'true', event_tracking: 'view_admin_topics_pageload' } }) do |c|
+  - c.with_actions do
     .js-merge-topics{ data: { path: merge_admin_topics_path } }
     = render Pajamas::ButtonComponent.new(href: new_admin_topic_path, variant: 'confirm') do
       = _('New topic')
+
+.gl-flex.gl-min-w-0.gl-grow.row-content-block
+  = form_tag admin_topics_path, method: :get, class: 'gl-w-full' do |f|
+    - search = params.fetch(:search, nil)
+    .search-field-holder
+      = search_field_tag :search, search, class: "form-control gl-form-input search-text-input js-search-input", autofocus: true, spellcheck: false, placeholder: _('Search by name')
+      = sprite_icon('search', css_class: 'search-icon')
+
 %ul.content-list
   = render partial: 'topic', collection: @topics
 
 = paginate_collection @topics
+
 - if @topics.empty?
   = render 'shared/empty_states/topics'
diff --git a/app/views/admin/topics/new.html.haml b/app/views/admin/topics/new.html.haml
index aefa1bbcf9544a4b134884eebae049c8eed9f2e7..aa3facd22710f125ea9e050ab31c159567d186be 100644
--- a/app/views/admin/topics/new.html.haml
+++ b/app/views/admin/topics/new.html.haml
@@ -1,4 +1,3 @@
 - page_title _("New topic")
 %h1.page-title.gl-font-size-h-display= _('New topic')
-%hr
 = render 'form', url: admin_topics_path(@topic)
diff --git a/app/views/shared/empty_states/_topics.html.haml b/app/views/shared/empty_states/_topics.html.haml
index cd60d966d71a3276e3d7f955b145ef3ba505328f..04f859bb60384968e3f355c9b665eeb485dc5f7c 100644
--- a/app/views/shared/empty_states/_topics.html.haml
+++ b/app/views/shared/empty_states/_topics.html.haml
@@ -1,7 +1,5 @@
-.row.empty-state
-  .col-12
-    .svg-content.svg-150
-      = image_tag 'illustrations/empty-state/empty-labels-md.svg'
-    .text-content.gl-text-center.gl-pt-0!
-      %h4= _('There are no topics to show.')
-      %p= _('Add topics to projects to help users find them.')
+= render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-labels-md.svg',
+  title: _('There are no topics to show'))  do |c|
+
+  - c.with_description do
+    = _('Add topics to projects to help users find them.')
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3895227e8c467061a1ac3a3ea05f3f4a1f0ab826..7355cd8384a06629989f3b072239333605ed4b1b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -53478,7 +53478,7 @@ msgstr ""
 msgid "There are no secure files yet."
 msgstr ""
 
-msgid "There are no topics to show."
+msgid "There are no topics to show"
 msgstr ""
 
 msgid "There are no variables yet."
diff --git a/spec/features/explore/topics_spec.rb b/spec/features/explore/topics_spec.rb
index dcccaea8c80c87a9327208c39c3e89a726280cbe..d7123c51e561f3e71e8713f7e9936aa2b18f1969 100644
--- a/spec/features/explore/topics_spec.rb
+++ b/spec/features/explore/topics_spec.rb
@@ -8,7 +8,7 @@
       visit topics_explore_projects_path
 
       expect(page).to have_current_path topics_explore_projects_path, ignore_query: true
-      expect(page).to have_content('There are no topics to show.')
+      expect(page).to have_content('There are no topics to show')
     end
   end