diff --git a/packages/app/pages/graphql.vue b/packages/app/pages/graphql.vue
index cf2c978..9be5155 100644
--- a/packages/app/pages/graphql.vue
+++ b/packages/app/pages/graphql.vue
@@ -6,14 +6,14 @@ useSaveRoute({
     name: 'graphql-schema',
   },
 })
+
+useHead({
+  titleTemplate: title => title ? `GraphQL ${title}` : 'GraphQL',
+})
 </script>
 
 <template>
   <div class="flex divide-x divide-gray-300 dark:divide-gray-700">
-    <Head>
-      <Title>GraphQL</Title>
-    </Head>
-
     <UVerticalNavigation
       :links="[
         {
diff --git a/packages/app/pages/graphql/playground.vue b/packages/app/pages/graphql/playground.vue
index 867d91a..e6d6daf 100644
--- a/packages/app/pages/graphql/playground.vue
+++ b/packages/app/pages/graphql/playground.vue
@@ -3,6 +3,10 @@ const { data, refresh } = await useFetch('/api/server')
 onWindowFocus(refresh)
 
 const graphqlServer = computed(() => data.value?.routeInfos.find(item => item.type === 'graphql'))
+
+useHead({
+  title: 'Playground',
+})
 </script>
 
 <template>
diff --git a/packages/app/pages/graphql/schema.vue b/packages/app/pages/graphql/schema.vue
index 6fe5f3a..93c09c0 100644
--- a/packages/app/pages/graphql/schema.vue
+++ b/packages/app/pages/graphql/schema.vue
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 const { data, error, refresh } = await useFetch('/api/graphql/schema/inspect')
 onWindowFocus(refresh)
+
+useHead({
+  title: 'Schema',
+})
 </script>
 
 <template>
