diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 842e0744d4e967b32f3ec0c09a13c70bab811edd..03681c481671c0766d44b0f30187f6955d78c97e 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -1,42 +1,44 @@
 - page_title s_('TagsPage|Tags')
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_tags_url(@project, rss_url_options), title: "#{@project.name} tags")
+- show_header = @tags.any? || @search.present?
 
-.flex-list
-  .top-area.adjust
-    .nav-text.row-main-content
-      = s_('TagsPage|Tags give the ability to mark specific points in history as being important')
+- if show_header
+  .flex-list
+    .top-area.adjust
+      .nav-text.row-main-content
+      .nav-controls.gl-my-3
+        #js-tags-sort-dropdown{ data: { filter_tags_path: filter_tags_path(search: @search, sort: @sort), sort_options: tags_sort_options_hash.to_json } }
+        = link_button_to nil, project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'has-tooltip gl-ml-auto', icon: 'rss'
+        - if can?(current_user, :admin_tag, @project)
+          = link_button_to new_project_tag_path(@project), data: { testid: "new-tag-button" }, variant: :confirm do
+            = s_('TagsPage|New tag')
 
-    .nav-controls
-      #js-tags-sort-dropdown{ data: { filter_tags_path: filter_tags_path(search: @search, sort: @sort), sort_options: tags_sort_options_hash.to_json } }
-      = link_button_to nil, project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'has-tooltip gl-ml-auto', icon: 'rss'
-      - if can?(current_user, :admin_tag, @project)
-        = link_button_to new_project_tag_path(@project), data: { testid: "new-tag-button" }, variant: :confirm do
-          = s_('TagsPage|New tag')
+    = render_if_exists 'projects/commits/mirror_status'
 
-  = render_if_exists 'projects/commits/mirror_status'
+    - if @tags_loading_error
+      = render 'shared/errors/gitaly_unavailable', reason: s_('TagsPage|Unable to load tags')
 
-  - if @tags_loading_error
-    = render 'shared/errors/gitaly_unavailable', reason: s_('TagsPage|Unable to load tags')
-
-  .tags
     - if @tags.any?
-      %ul.flex-list.content-list
-        = render partial: 'tag', collection: @tags
-
-      = paginate @tags, theme: 'gitlab'
-
-    - else
-      .nothing-here-block
-        - if @search.present?
-          = s_('TagsPage|Sorry, your filter produced no results.')
-        - else
-          = s_('TagsPage|Repository has no tags yet.')
-          %br
-          %small
-            = s_('TagsPage|Use git tag command to add a new one:')
-            %br
-            %span.monospace git tag -a v1.4 -m 'version 1.4'
-
-- if can?(current_user, :admin_tag, @project)
-  .js-delete-tag-modal
+      .tags
+        %ul.flex-list.content-list
+          = render partial: 'tag', collection: @tags
+        = paginate @tags, theme: 'gitlab'
+    - elsif @search.present?
+      = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-search-md.svg',
+        title: s_('TagsPage|Sorry, your filter produced no results'),
+        empty_state_options: { data: { testid: 'empty-search-result' } })
+
+  - if can?(current_user, :admin_tag, @project)
+    .js-delete-tag-modal
+
+- else
+  = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-labels-md.svg',
+    title: s_('TagsPage|Repository has no tags yet'),
+    primary_button_text: s_('TagsPage|New tag'),
+    primary_button_link: new_project_tag_path(@project),
+    empty_state_options: { data: { testid: 'empty-state-tags' } }) do |c|
+
+    - c.with_description do
+      %p= s_('TagsPage|Tags give the ability to mark specific points in history as being important.')
+      %p= s_("TagsPage|Create a new tag using the %{code_start}git tag%{code_end} command. For example, %{code_start}git tag -a v1.4 -m 'version 1.4'%{code_end}").html_safe % { code_start: '<code>'.html_safe, code_end: '</code>'.html_safe }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 9140de1a97bc92dc0059b277b1fd4be861c07ffa..9c984e3ea3973cf9c06dfb7c36c4d5b3f4bbaba5 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -49280,6 +49280,9 @@ msgstr ""
 msgid "TagsPage|Cancel, keep tag"
 msgstr ""
 
+msgid "TagsPage|Create a new tag using the %{code_start}git tag%{code_end} command. For example, %{code_start}git tag -a v1.4 -m 'version 1.4'%{code_end}"
+msgstr ""
+
 msgid "TagsPage|Create release"
 msgstr ""
 
@@ -49334,24 +49337,21 @@ msgstr ""
 msgid "TagsPage|Please type the following to confirm:"
 msgstr ""
 
-msgid "TagsPage|Repository has no tags yet."
+msgid "TagsPage|Repository has no tags yet"
 msgstr ""
 
-msgid "TagsPage|Sorry, your filter produced no results."
+msgid "TagsPage|Sorry, your filter produced no results"
 msgstr ""
 
 msgid "TagsPage|Tags"
 msgstr ""
 
-msgid "TagsPage|Tags give the ability to mark specific points in history as being important"
+msgid "TagsPage|Tags give the ability to mark specific points in history as being important."
 msgstr ""
 
 msgid "TagsPage|Unable to load tags"
 msgstr ""
 
-msgid "TagsPage|Use git tag command to add a new one:"
-msgstr ""
-
 msgid "TagsPage|Yes, delete protected tag"
 msgstr ""
 
diff --git a/spec/features/tags/developer_views_tags_spec.rb b/spec/features/tags/developer_views_tags_spec.rb
index bc2d33b3a02d5fef9aa3e49916096f5ee094b68a..8538348ca8b87d9f900950e331daa2744a49b43c 100644
--- a/spec/features/tags/developer_views_tags_spec.rb
+++ b/spec/features/tags/developer_views_tags_spec.rb
@@ -28,7 +28,7 @@
     end
 
     it 'displays a specific message' do
-      expect(page).to have_content 'Repository has no tags yet.'
+      expect(page).to have_css '[data-testid="empty-state-tags"]'
     end
   end