diff --git a/ee/app/assets/javascripts/geo_settings/components/app.vue b/ee/app/assets/javascripts/geo_settings/components/app.vue
index 5621aacaa430b64258db3af6c8a4114dcc1c8b98..78ecf4c9be9652e10e626ef0b6226ec40c526afb 100644
--- a/ee/app/assets/javascripts/geo_settings/components/app.vue
+++ b/ee/app/assets/javascripts/geo_settings/components/app.vue
@@ -3,6 +3,7 @@ import { GlLoadingIcon } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapActions, mapState } from 'vuex';
 import { s__ } from '~/locale';
+import PageHeading from '~/vue_shared/components/page_heading.vue';
 import { VIEW_ADMIN_GEO_SETTINGS_PAGELOAD } from 'ee/geo_settings/constants';
 import { InternalEvents } from '~/tracking';
 import GeoSettingsForm from './geo_settings_form.vue';
@@ -18,6 +19,7 @@ export default {
   components: {
     GlLoadingIcon,
     GeoSettingsForm,
+    PageHeading,
   },
   mixins: [InternalEvents.mixin()],
   computed: {
@@ -37,8 +39,11 @@ export default {
 
 <template>
   <article data-testid="geoSettingsContainer">
-    <h1 class="page-title gl-text-size-h-display">{{ $options.i18n.geoSettingsTitle }}</h1>
-    <p>{{ $options.i18n.geoSettingsSubtitle }}</p>
+    <page-heading :heading="$options.i18n.geoSettingsTitle">
+      <template #description>
+        {{ $options.i18n.geoSettingsSubtitle }}
+      </template>
+    </page-heading>
     <gl-loading-icon v-if="isLoading" size="xl" />
     <geo-settings-form v-else />
   </article>
diff --git a/ee/spec/frontend/geo_settings/components/app_spec.js b/ee/spec/frontend/geo_settings/components/app_spec.js
index 582e2c8634a6f216d640175cb55fe27a6a9e7388..87d222a996cfa5a90ae15c51e0a4b2c4033de9d6 100644
--- a/ee/spec/frontend/geo_settings/components/app_spec.js
+++ b/ee/spec/frontend/geo_settings/components/app_spec.js
@@ -4,6 +4,7 @@ import Vue from 'vue';
 // eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
 
+import PageHeading from '~/vue_shared/components/page_heading.vue';
 import GeoSettingsApp from 'ee/geo_settings/components/app.vue';
 import GeoSettingsForm from 'ee/geo_settings/components/geo_settings_form.vue';
 import initStore from 'ee/geo_settings/store';
@@ -23,6 +24,9 @@ describe('GeoSettingsApp', () => {
   const createComponent = () => {
     wrapper = shallowMount(GeoSettingsApp, {
       store,
+      stubs: {
+        PageHeading,
+      },
     });
   };