1 files changed, 6 insertions, 5 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
index c254dd05aa4..ff613daf7fa 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
@@ -1,9 +1,10 @@
 <script>
 import { GlSprintf } from '@gitlab/ui';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 import { DETAILS_PAGE_TITLE } from '../../constants/index';
 
 export default {
-  components: { GlSprintf },
+  components: { GlSprintf, TitleArea },
   props: {
     imageName: {
       type: String,
@@ -18,13 +19,13 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-my-2 gl-align-items-center">
-    <h4>
+  <title-area>
+    <template #title>
       <gl-sprintf :message="$options.i18n.DETAILS_PAGE_TITLE">
         <template #imageName>
           {{ imageName }}
         </template>
       </gl-sprintf>
-    </h4>
-  </div>
+    </template>
+  </title-area>
 </template>