diff --git a/stubs/inertia/resources/js/Components/PageHeader.vue b/stubs/inertia/resources/js/Components/PageHeader.vue
new file mode 100644
index 000000000..ef3982759
--- /dev/null
+++ b/stubs/inertia/resources/js/Components/PageHeader.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { Head } from '@inertiajs/vue3';
+
+defineProps({
+    title: String,
+});
+</script>
+
+<template>
+    <Head :title="title" />
+
+    <!-- Page Heading -->
+    <header class="bg-white dark:bg-gray-800 shadow">
+        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+            <slot />
+        </div>
+    </header>
+</template>
diff --git a/stubs/inertia/resources/js/Layouts/AppLayout.vue b/stubs/inertia/resources/js/Layouts/AppLayout.vue
index 65c86d232..8adbd028a 100644
--- a/stubs/inertia/resources/js/Layouts/AppLayout.vue
+++ b/stubs/inertia/resources/js/Layouts/AppLayout.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import { Head, Link, router } from '@inertiajs/vue3';
+import { Link, router } from '@inertiajs/vue3';
 import ApplicationMark from '@/Components/ApplicationMark.vue';
 import Banner from '@/Components/Banner.vue';
 import Dropdown from '@/Components/Dropdown.vue';
@@ -8,10 +8,6 @@ import DropdownLink from '@/Components/DropdownLink.vue';
 import NavLink from '@/Components/NavLink.vue';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 
-defineProps({
-    title: String,
-});
-
 const showingNavigationDropdown = ref(false);
 
 const switchToTeam = (team) => {
@@ -29,8 +25,6 @@ const logout = () => {
 
 <template>
     <div>
-        <Head :title="title" />
-
         <Banner />
 
         <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
@@ -273,13 +267,6 @@ const logout = () => {
                 </div>
             </nav>
 
-            <!-- Page Heading -->
-            <header v-if="$slots.header" class="bg-white dark:bg-gray-800 shadow">
-                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                    <slot name="header" />
-                </div>
-            </header>
-
             <!-- Page Content -->
             <main>
                 <slot />
diff --git a/stubs/inertia/resources/js/Pages/API/Index.vue b/stubs/inertia/resources/js/Pages/API/Index.vue
index a7d9c0b42..d45d62a41 100644
--- a/stubs/inertia/resources/js/Pages/API/Index.vue
+++ b/stubs/inertia/resources/js/Pages/API/Index.vue
@@ -1,6 +1,11 @@
 <script setup>
 import ApiTokenManager from '@/Pages/API/Partials/ApiTokenManager.vue';
 import AppLayout from '@/Layouts/AppLayout.vue';
+import PageHeader from "@/Components/PageHeader.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 
 defineProps({
     tokens: Array,
@@ -10,21 +15,19 @@ defineProps({
 </script>
 
 <template>
-    <AppLayout title="API Tokens">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                API Tokens
-            </h2>
-        </template>
+    <PageHeader title="API Tokens">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            API Tokens
+        </h2>
+    </PageHeader>
 
-        <div>
-            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
-                <ApiTokenManager
-                    :tokens="tokens"
-                    :available-permissions="availablePermissions"
-                    :default-permissions="defaultPermissions"
-                />
-            </div>
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <ApiTokenManager
+                :tokens="tokens"
+                :available-permissions="availablePermissions"
+                :default-permissions="defaultPermissions"
+            />
         </div>
-    </AppLayout>
+    </div>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Dashboard.vue b/stubs/inertia/resources/js/Pages/Dashboard.vue
index d2c067ff1..39ca0511d 100644
--- a/stubs/inertia/resources/js/Pages/Dashboard.vue
+++ b/stubs/inertia/resources/js/Pages/Dashboard.vue
@@ -1,22 +1,25 @@
 <script setup>
 import AppLayout from '@/Layouts/AppLayout.vue';
 import Welcome from '@/Components/Welcome.vue';
+import PageHeader from "@/Components/PageHeader.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 </script>
 
 <template>
-    <AppLayout title="Dashboard">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                Dashboard
-            </h2>
-        </template>
+    <PageHeader title="Dashboard">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            Dashboard
+        </h2>
+    </PageHeader>
 
-        <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
-                    <Welcome />
-                </div>
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
+                <Welcome />
             </div>
         </div>
-    </AppLayout>
+    </div>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Profile/Show.vue b/stubs/inertia/resources/js/Pages/Profile/Show.vue
index 1d4a4ae4d..952e46844 100644
--- a/stubs/inertia/resources/js/Pages/Profile/Show.vue
+++ b/stubs/inertia/resources/js/Pages/Profile/Show.vue
@@ -6,6 +6,11 @@ import SectionBorder from '@/Components/SectionBorder.vue';
 import TwoFactorAuthenticationForm from '@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue';
 import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm.vue';
 import UpdateProfileInformationForm from '@/Pages/Profile/Partials/UpdateProfileInformationForm.vue';
+import PageHeader from "@/Components/PageHeader.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 
 defineProps({
     confirmsTwoFactorAuthentication: Boolean,
@@ -14,44 +19,42 @@ defineProps({
 </script>
 
 <template>
-    <AppLayout title="Profile">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                Profile
-            </h2>
-        </template>
-
-        <div>
-            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
-                <div v-if="$page.props.jetstream.canUpdateProfileInformation">
-                    <UpdateProfileInformationForm :user="$page.props.auth.user" />
-
-                    <SectionBorder />
-                </div>
+    <PageHeader title="Profile">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            Profile
+        </h2>
+    </PageHeader>
+
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <div v-if="$page.props.jetstream.canUpdateProfileInformation">
+                <UpdateProfileInformationForm :user="$page.props.auth.user" />
+
+                <SectionBorder />
+            </div>
 
-                <div v-if="$page.props.jetstream.canUpdatePassword">
-                    <UpdatePasswordForm class="mt-10 sm:mt-0" />
+            <div v-if="$page.props.jetstream.canUpdatePassword">
+                <UpdatePasswordForm class="mt-10 sm:mt-0" />
 
-                    <SectionBorder />
-                </div>
+                <SectionBorder />
+            </div>
 
-                <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
-                    <TwoFactorAuthenticationForm
-                        :requires-confirmation="confirmsTwoFactorAuthentication"
-                        class="mt-10 sm:mt-0"
-                    />
+            <div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
+                <TwoFactorAuthenticationForm
+                    :requires-confirmation="confirmsTwoFactorAuthentication"
+                    class="mt-10 sm:mt-0"
+                />
 
-                    <SectionBorder />
-                </div>
+                <SectionBorder />
+            </div>
 
-                <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />
+            <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" />
 
-                <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
-                    <SectionBorder />
+            <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
+                <SectionBorder />
 
-                    <DeleteUserForm class="mt-10 sm:mt-0" />
-                </template>
-            </div>
+                <DeleteUserForm class="mt-10 sm:mt-0" />
+            </template>
         </div>
-    </AppLayout>
+    </div>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Teams/Create.vue b/stubs/inertia/resources/js/Pages/Teams/Create.vue
index 8cdd4526f..b22afdc22 100644
--- a/stubs/inertia/resources/js/Pages/Teams/Create.vue
+++ b/stubs/inertia/resources/js/Pages/Teams/Create.vue
@@ -1,20 +1,23 @@
 <script setup>
 import AppLayout from '@/Layouts/AppLayout.vue';
 import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
+import PageHeader from "@/Components/PageHeader.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 </script>
 
 <template>
-    <AppLayout title="Create Team">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                Create Team
-            </h2>
-        </template>
+    <PageHeader title="Create Team">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            Create Team
+        </h2>
+    </PageHeader>
 
-        <div>
-            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
-                <CreateTeamForm />
-            </div>
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <CreateTeamForm />
         </div>
-    </AppLayout>
+    </div>
 </template>
diff --git a/stubs/inertia/resources/js/Pages/Teams/Show.vue b/stubs/inertia/resources/js/Pages/Teams/Show.vue
index d22fe0ecc..f357d8e6e 100644
--- a/stubs/inertia/resources/js/Pages/Teams/Show.vue
+++ b/stubs/inertia/resources/js/Pages/Teams/Show.vue
@@ -4,6 +4,11 @@ import DeleteTeamForm from '@/Pages/Teams/Partials/DeleteTeamForm.vue';
 import SectionBorder from '@/Components/SectionBorder.vue';
 import TeamMemberManager from '@/Pages/Teams/Partials/TeamMemberManager.vue';
 import UpdateTeamNameForm from '@/Pages/Teams/Partials/UpdateTeamNameForm.vue';
+import PageHeader from "@/Components/PageHeader.vue";
+
+defineOptions({
+    layout: AppLayout,
+})
 
 defineProps({
     team: Object,
@@ -13,30 +18,28 @@ defineProps({
 </script>
 
 <template>
-    <AppLayout title="Team Settings">
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-                Team Settings
-            </h2>
-        </template>
+    <PageHeader title="Team Settings">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            Team Settings
+        </h2>
+    </PageHeader>
 
-        <div>
-            <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
-                <UpdateTeamNameForm :team="team" :permissions="permissions" />
+    <div>
+        <div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
+            <UpdateTeamNameForm :team="team" :permissions="permissions" />
 
-                <TeamMemberManager
-                    class="mt-10 sm:mt-0"
-                    :team="team"
-                    :available-roles="availableRoles"
-                    :user-permissions="permissions"
-                />
+            <TeamMemberManager
+                class="mt-10 sm:mt-0"
+                :team="team"
+                :available-roles="availableRoles"
+                :user-permissions="permissions"
+            />
 
-                <template v-if="permissions.canDeleteTeam && ! team.personal_team">
-                    <SectionBorder />
+            <template v-if="permissions.canDeleteTeam && ! team.personal_team">
+                <SectionBorder />
 
-                    <DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
-                </template>
-            </div>
+                <DeleteTeamForm class="mt-10 sm:mt-0" :team="team" />
+            </template>
         </div>
-    </AppLayout>
+    </div>
 </template>
