diff --git a/composer.json b/composer.json
index 89d507a3c0a..ffe4868bac7 100644
--- a/composer.json
+++ b/composer.json
@@ -14,6 +14,7 @@
         "bacon/bacon-qr-code": "^3.0",
         "composer/semver": "^3.4",
         "guzzlehttp/guzzle": "^6.3 || ^7.0",
+        "inertiajs/inertia-laravel": "^2.0",
         "james-heinrich/getid3": "^1.9.21",
         "laravel/framework": "^11.34 || ^12.0",
         "laravel/prompts": "^0.3.0",
diff --git a/package-lock.json b/package-lock.json
index 36b3ffdf204..387bb951f6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@floating-ui/dom": "^1.6.0",
         "@he-tree/vue": "^2.10.0-beta.2",
         "@hoppscotch/vue-toasted": "^0.1.0",
+        "@inertiajs/vue3": "^2.1.11",
         "@internationalized/date": "^3.7.0",
         "@shopify/draggable": "^1.0.0-beta.12",
         "@tiptap/core": "^3.0.0",
@@ -931,6 +932,32 @@
         "vue": "^3.2.37"
       }
     },
+    "node_modules/@inertiajs/core": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-2.1.11.tgz",
+      "integrity": "sha512-TF1UE1UjNRGyxJZGYe5IwDZwgyTvviE2XoJRHOS4SjS8kVzIqeBb3disIkLiJqshRNSNP8syggOro4TLtVubvA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash-es": "^4.17.12",
+        "axios": "^1.12.0",
+        "lodash-es": "^4.17.21",
+        "qs": "^6.9.0"
+      }
+    },
+    "node_modules/@inertiajs/vue3": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-2.1.11.tgz",
+      "integrity": "sha512-9+ny7uaPwMeLMl01GOoNFmC4ssCZ/RPH8AeyAwMVdfIEnUaXVqWwf8epHeLdc/wH17hWYWlSTxAOLdSUbjvaDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@inertiajs/core": "2.1.11",
+        "@types/lodash-es": "^4.17.12",
+        "lodash-es": "^4.17.21"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@internationalized/date": {
       "version": "3.8.2",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.8.2.tgz",
@@ -2385,6 +2412,21 @@
       "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/markdown-it": {
       "version": "14.1.2",
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
diff --git a/package.json b/package.json
index 1799edc634e..3be1c17cd89 100644
--- a/package.json
+++ b/package.json
@@ -19,10 +19,10 @@
     "@floating-ui/dom": "^1.6.0",
     "@he-tree/vue": "^2.10.0-beta.2",
     "@hoppscotch/vue-toasted": "^0.1.0",
+    "@inertiajs/vue3": "^2.1.11",
     "@internationalized/date": "^3.7.0",
     "@shopify/draggable": "^1.0.0-beta.12",
     "@tiptap/core": "^3.0.0",
-    "@tiptap/extensions": "^3.0.0",
     "@tiptap/extension-blockquote": "^3.0.0",
     "@tiptap/extension-bold": "^3.0.0",
     "@tiptap/extension-bullet-list": "^3.0.0",
@@ -48,6 +48,7 @@
     "@tiptap/extension-text-align": "^3.0.0",
     "@tiptap/extension-typography": "^3.0.0",
     "@tiptap/extension-underline": "^3.0.0",
+    "@tiptap/extensions": "^3.0.0",
     "@tiptap/pm": "^3.0.0",
     "@tiptap/vue-3": "^3.0.0",
     "alpinejs": "^3.1.1",
diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 0c2027636a5..ccfd97c71ad 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -25,6 +25,7 @@ export const {
     DatePicker,
     DateRangePicker,
     Description,
+    DocsCallout,
     DragHandle,
     Drawer,
     Dropdown,
diff --git a/packages/ui/src/Badge.vue b/packages/ui/src/Badge.vue
index 8c426f9a80d..83c853f4783 100644
--- a/packages/ui/src/Badge.vue
+++ b/packages/ui/src/Badge.vue
@@ -3,12 +3,14 @@ import { computed, useSlots } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import Icon from './Icon/Icon.vue';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
     append: { type: [String, Number, Boolean, null], default: null },
     as: { type: String, default: 'div' },
     color: { type: String, default: 'default' },
     href: { type: String, default: null },
+    target: { type: String, default: null },
     icon: { type: String, default: null },
     iconAppend: { type: String, default: null },
     pill: { type: Boolean, default: false },
@@ -21,7 +23,12 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
-const tag = computed(() => (props.href ? 'a' : props.as));
+const tag = computed(() => {
+    if (props.href) {
+        return props.target === '_blank' ? 'a' : Link;
+    }
+    return props.as;
+});
 
 const badgeClasses = computed(() => {
     const classes = cva({
@@ -71,7 +78,7 @@ const badgeClasses = computed(() => {
 </script>
 
 <template>
-    <component :is="tag" :class="badgeClasses" :href="props.href" data-ui-badge>
+    <component :is="tag" :class="badgeClasses" :href="props.href" :target="target" data-ui-badge>
         <span v-if="props.prepend" class="font-medium border-e border-inherit pe-2">{{ prepend }}</span>
         <Icon v-if="icon" :name="icon" />
         <slot v-if="hasDefaultSlot" />
diff --git a/packages/ui/src/Button/Button.vue b/packages/ui/src/Button/Button.vue
index ced06d81ad7..99457068077 100644
--- a/packages/ui/src/Button/Button.vue
+++ b/packages/ui/src/Button/Button.vue
@@ -3,6 +3,7 @@ import { computed, useSlots } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import Icon from '../Icon/Icon.vue';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
     as: { type: String, default: 'button' },
@@ -21,7 +22,12 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
-const tag = computed(() => (props.href ? 'a' : props.as));
+const tag = computed(() => {
+    if (props.href) {
+        return props.target === '_blank' ? 'a' : Link;
+    }
+    return props.as;
+});
 const iconOnly = computed(() => (props.icon && !hasDefaultSlot && !props.text) || props.iconOnly);
 
 const buttonClasses = computed(() => {
diff --git a/packages/ui/src/Dropdown/Item.vue b/packages/ui/src/Dropdown/Item.vue
index a23a64f49da..467e950f477 100644
--- a/packages/ui/src/Dropdown/Item.vue
+++ b/packages/ui/src/Dropdown/Item.vue
@@ -1,10 +1,12 @@
 <script setup>
 import { DropdownMenuItem } from 'reka-ui';
-import { useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 import Icon from '../Icon/Icon.vue';
 import { cva } from 'cva';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
+    as: { type: String, default: null },
     href: { type: String, default: null },
     target: { type: String, default: '_self' },
     icon: { type: String, default: null },
@@ -14,6 +16,11 @@ const props = defineProps({
 
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
+const tag = computed(() => {
+    if (props.as) return props.as;
+    if (! props.href) return 'div';
+    return props.target === '_blank' ? 'a' : Link;
+});
 
 const classes = cva({
     base: 'col-span-2 grid grid-cols-subgrid items-center rounded-lg px-1 py-1.5 text-sm antialiased text-gray-900 dark:text-gray-300 not-data-disabled:cursor-pointer data-disabled:opacity-50 hover:not-data-disabled:bg-gray-100 dark:hover:not-data-disabled:bg-gray-800 outline-hidden',
@@ -41,7 +48,7 @@ const iconClasses = cva({
     <DropdownMenuItem
         :class="classes"
         data-ui-dropdown-item
-        :as="href ? 'a' : 'div'"
+        :as="tag"
         :href
         :target
     >
diff --git a/packages/ui/src/Heading.vue b/packages/ui/src/Heading.vue
index 462b5cc9a0a..1e720e98a51 100644
--- a/packages/ui/src/Heading.vue
+++ b/packages/ui/src/Heading.vue
@@ -2,9 +2,11 @@
 import { cva } from 'cva';
 import { computed, useSlots } from 'vue';
 import Icon from './Icon/Icon.vue';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
     href: { type: [String, null], default: null },
+    target: { type: String, default: null },
     icon: { type: [String, null], default: null },
     level: { type: [Number, null], default: null },
     size: { type: String, default: 'base' },
@@ -16,7 +18,7 @@ const hasDefaultSlot = !!slots.default;
 
 const tag = computed(() => {
     if (props.level) return `h${props.level}`;
-    if (props.href) return 'a';
+    if (props.href) return props.target === '_blank' ? 'a' : Link;
     return 'div';
 });
 
diff --git a/resources/css/core/layout.css b/resources/css/core/layout.css
index 26f8f45b4ed..c9f441ab920 100644
--- a/resources/css/core/layout.css
+++ b/resources/css/core/layout.css
@@ -69,15 +69,12 @@ main {
     }
 }
 
-.nav-closed main {
-    @apply ps-0;
-}
-
 .nav-closed .nav-main {
     @apply -start-46;
 }
 
-.nav-closed main {
+main.nav-closed {
+    @apply ps-0;
     @apply md:ps-0;
 }
 
diff --git a/resources/js/bootstrap/App.vue b/resources/js/bootstrap/App.vue
index fe3becafe8a..6bffb81c524 100644
--- a/resources/js/bootstrap/App.vue
+++ b/resources/js/bootstrap/App.vue
@@ -1,89 +1,10 @@
 <script>
-import GlobalSiteSelector from '../components/GlobalSiteSelector.vue';
-import Login from '../components/login/Login.vue';
-import TwoFactorChallenge from '../components/login/TwoFactorChallenge.vue';
-import EnableTwoFactorAuthentication from '../components/login/EnableTwoFactorAuthentication.vue';
-import BaseEntryCreateForm from '../components/entries/BaseCreateForm.vue';
-import BaseTermCreateForm from '../components/terms/BaseCreateForm.vue';
-import CreateTermButton from '../components/terms/CreateTermButton.vue';
-import FieldsetListing from '../components/fieldsets/Listing.vue';
-import FieldsetEditForm from '../components/fieldsets/EditForm.vue';
-import BlueprintListing from '../components/blueprints/Listing.vue';
-import BlueprintBuilder from '../components/blueprints/Builder.vue';
-import FormListing from '../components/forms/Listing.vue';
-import FormSubmissionListing from '../components/forms/SubmissionListing.vue';
-import GlobalListing from '../components/globals/Listing.vue';
-import GlobalPublishForm from '../components/globals/PublishForm.vue';
-import UserListing from '../components/users/Listing.vue';
-import UserWizard from '../components/users/Wizard.vue';
-import RoleListing from '../components/roles/Listing.vue';
-import RolePublishForm from '../components/roles/PublishForm.vue';
-import UserGroupListing from '../components/user-groups/Listing.vue';
-import UserGroupPublishForm from '../components/user-groups/PublishForm.vue';
-import CollectionScaffolder from '../components/collections/Scaffolder.vue';
-import CollectionView from '../components/collections/View.vue';
-import CollectionBlueprintListing from '../components/collections/BlueprintListing.vue';
-import SessionExpiry from '../components/SessionExpiry.vue';
-import NavigationListing from '../components/navigation/Listing.vue';
-import PreferencesEditForm from '../components/preferences/EditForm.vue';
-import NavigationView from '../components/navigation/View.vue';
-import TaxonomyBlueprintListing from '../components/taxonomies/BlueprintListing.vue';
-import Updater from '../components/updater/Updater.vue';
-import PortalTargets from '../components/portals/PortalTargets.vue';
-import SitesEditForm from '../components/sites/EditForm.vue';
-import CommandPalette from '../components/command-palette/CommandPalette.vue';
-import ItemActions from '../components/actions/ItemActions.vue';
-import BulkActions from '../components/actions/BulkActions.vue';
-import LicensingAlert from '../components/LicensingAlert.vue';
-
-import { defineAsyncComponent } from 'vue';
-import { ConfigProvider } from 'reka-ui';
-
 export default {
     components: {
-        CommandPalette,
-        GlobalSiteSelector,
-        Login,
-        TwoFactorChallenge,
-        EnableTwoFactorAuthentication,
-        BaseEntryCreateForm,
-        BaseTermCreateForm,
-        CreateTermButton,
-        FieldsetListing,
-        FieldsetEditForm,
-        BlueprintListing,
-        BlueprintBuilder,
-        FormListing,
-        FormSubmissionListing,
-        GlobalListing,
-        GlobalPublishForm,
-        UserListing,
-        UserWizard,
-        RoleListing,
-        RolePublishForm,
-        UserGroupListing,
-        UserGroupPublishForm,
-        CollectionScaffolder,
-        CollectionView,
-        CollectionBlueprintListing,
-        SessionExpiry,
-        NavigationListing,
-        PreferencesEditForm,
-        NavigationView,
-        TaxonomyBlueprintListing,
-        NavBuilder: defineAsyncComponent(() => import('../components/nav/Builder.vue')),
-        Updater,
-        PortalTargets,
-        SitesEditForm,
-        ConfigProvider,
-        ItemActions,
-        BulkActions,
-        LicensingAlert,
     },
 
     data() {
         return {
-            navOpen: false,
             appendedComponents: Statamic.$components.components,
             copyToClipboardModalUrl: null,
         };
@@ -100,13 +21,6 @@ export default {
     },
 
     mounted() {
-        this.$keys.bind(['command+\\'], (e) => {
-            e.preventDefault();
-            this.toggleNav();
-        });
-
-
-
         if (this.$config.get('broadcasting.enabled')) {
             this.$echo.start();
         }
@@ -119,8 +33,6 @@ export default {
 
     created() {
         const app = this;
-        const state = localStorage.getItem('statamic.nav') || 'open';
-        this.navOpen = state === 'open';
 
         Statamic.$callbacks.add('copyToClipboard', async function (url) {
             try {
@@ -140,10 +52,6 @@ export default {
     },
 
     methods: {
-        toggleNav() {
-            this.navOpen = !this.navOpen;
-            localStorage.setItem('statamic.nav', this.navOpen ? 'open' : 'closed');
-        },
 
         fixAutofocus() {
             // Fix autofocus issues in Safari and Firefox
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index e508c1ad550..86c456a2d87 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -25,6 +25,7 @@ export {
     DatePicker,
     DateRangePicker,
     Description,
+    DocsCallout,
     DragHandle,
     Drawer,
     Dropdown,
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
index 4b82c9d5cce..5294c65d614 100644
--- a/resources/js/bootstrap/components.js
+++ b/resources/js/bootstrap/components.js
@@ -7,7 +7,6 @@ import EntryPublishForm from '../components/entries/PublishForm.vue';
 import TermPublishForm from '../components/terms/PublishForm.vue';
 import UserPublishForm from '../components/users/PublishForm.vue';
 import EntryListing from '../components/entries/Listing.vue';
-import CollectionListing from '../components/collections/Listing.vue';
 import TaxonomyListing from '../components/taxonomies/Listing.vue';
 import TermListing from '../components/terms/Listing.vue';
 import AddonListing from '../components/addons/Listing.vue';
@@ -30,6 +29,34 @@ import GitStatus from '../components/GitStatus.vue';
 import DateTime from '../components/DateTime.vue';
 import UpdaterWidget from '../components/updater/UpdaterWidget.vue';
 
+import BaseTermCreateForm from '../components/terms/BaseCreateForm.vue';
+import CreateTermButton from '../components/terms/CreateTermButton.vue';
+import FieldsetListing from '../components/fieldsets/Listing.vue';
+import FieldsetEditForm from '../components/fieldsets/EditForm.vue';
+import BlueprintListing from '../components/blueprints/Listing.vue';
+import BlueprintBuilder from '../components/blueprints/Builder.vue';
+import FormListing from '../components/forms/Listing.vue';
+import FormSubmissionListing from '../components/forms/SubmissionListing.vue';
+import GlobalListing from '../components/globals/Listing.vue';
+import GlobalPublishForm from '../components/globals/PublishForm.vue';
+import UserListing from '../components/users/Listing.vue';
+import UserWizard from '../components/users/Wizard.vue';
+import RoleListing from '../components/roles/Listing.vue';
+import RolePublishForm from '../components/roles/PublishForm.vue';
+import UserGroupListing from '../components/user-groups/Listing.vue';
+import UserGroupPublishForm from '../components/user-groups/PublishForm.vue';
+import CollectionScaffolder from '../components/collections/Scaffolder.vue';
+import CollectionBlueprintListing from '../components/collections/BlueprintListing.vue';
+import NavigationListing from '../components/navigation/Listing.vue';
+import PreferencesEditForm from '../components/preferences/EditForm.vue';
+import NavigationView from '../components/navigation/View.vue';
+import TaxonomyBlueprintListing from '../components/taxonomies/BlueprintListing.vue';
+import Updater from '../components/updater/Updater.vue';
+import ItemActions from '../components/actions/ItemActions.vue';
+import BulkActions from '../components/actions/BulkActions.vue';
+
+import { defineAsyncComponent } from 'vue';
+
 export default function registerGlobalComponents(app) {
     // Core
     app.component('asset-manager', AssetManager);
@@ -46,7 +73,6 @@ export default function registerGlobalComponents(app) {
 
     // Resource Type Lists
     app.component('entry-list', EntryListing);
-    app.component('collection-list', CollectionListing);
     app.component('taxonomy-list', TaxonomyListing);
     app.component('term-list', TermListing);
     app.component('addon-list', AddonListing);
@@ -76,4 +102,34 @@ export default function registerGlobalComponents(app) {
 
     app.component('blueprint-create-form', BlueprintCreateForm);
     app.component('blueprint-resetter', BlueprintResetter);
+
+    // Temporarily global during intertia migration
+    // These are no longer used at the top level since there's now a layout component.
+    // Eventually they will be moved into their respective pages.
+    app.component('BaseTermCreateForm', BaseTermCreateForm);
+    app.component('CreateTermButton', CreateTermButton);
+    app.component('FieldsetListing', FieldsetListing);
+    app.component('FieldsetEditForm', FieldsetEditForm);
+    app.component('BlueprintListing', BlueprintListing);
+    app.component('BlueprintBuilder', BlueprintBuilder);
+    app.component('FormListing', FormListing);
+    app.component('FormSubmissionListing', FormSubmissionListing);
+    app.component('GlobalListing', GlobalListing);
+    app.component('GlobalPublishForm', GlobalPublishForm);
+    app.component('UserListing', UserListing);
+    app.component('UserWizard', UserWizard);
+    app.component('RoleListing', RoleListing);
+    app.component('RolePublishForm', RolePublishForm);
+    app.component('UserGroupListing', UserGroupListing);
+    app.component('UserGroupPublishForm', UserGroupPublishForm);
+    app.component('CollectionScaffolder', CollectionScaffolder);
+    app.component('CollectionBlueprintListing', CollectionBlueprintListing);
+    app.component('NavigationListing', NavigationListing);
+    app.component('PreferencesEditForm', PreferencesEditForm);
+    app.component('NavigationView', NavigationView);
+    app.component('TaxonomyBlueprintListing', TaxonomyBlueprintListing);
+    app.component('NavBuilder', defineAsyncComponent(() => import('../components/nav/Builder.vue')));
+    app.component('Updater', Updater);
+    app.component('ItemActions', ItemActions);
+    app.component('BulkActions', BulkActions);
 }
diff --git a/resources/js/bootstrap/statamic.js b/resources/js/bootstrap/statamic.js
index 9df494eb192..5da599cbd1a 100644
--- a/resources/js/bootstrap/statamic.js
+++ b/resources/js/bootstrap/statamic.js
@@ -1,4 +1,4 @@
-import { createApp, ref, markRaw } from 'vue';
+import { createApp, markRaw, h } from 'vue';
 import App from './App.vue';
 import { createPinia, defineStore } from 'pinia';
 import axios from 'axios';
@@ -14,6 +14,8 @@ import useDirtyState from '../composables/dirty-state';
 import VueClickAway from 'vue3-click-away';
 import FloatingVue from 'floating-vue';
 import 'floating-vue/dist/style.css';
+import { createInertiaApp } from '@inertiajs/vue3';
+import { router } from '@inertiajs/vue3';
 import Toasts from '../components/Toasts';
 import PortalVue from 'portal-vue';
 import Keys from '../components/keys/Keys';
@@ -38,10 +40,11 @@ import markdown from '@/util/markdown.js';
 import VueComponentDebug from 'vue-component-debug';
 import CommandPalette from '../components/CommandPalette.js';
 import { registerIconSetFromStrings } from '@ui';
+import Layout from '@/pages/layout/Layout.vue';
 
 let bootingCallbacks = [];
 let bootedCallbacks = [];
-let components;
+let components = new Components;
 
 export default {
     booting(callback) {
@@ -149,7 +152,72 @@ export default {
     },
 
     async start() {
-        this.$app = createApp(App);
+        bootingCallbacks.forEach((callback) => callback(this));
+        bootingCallbacks = [];
+
+        const el = document.getElementById('statamic');
+        const titleEl = document.getElementById('blade-title');
+        const bladeTitle = titleEl.dataset.title;
+        const bladeContent = el?.innerHTML || '';
+        const _this = this;
+
+        await createInertiaApp({
+            id: 'statamic',
+            resolve: name => {
+                if (name === 'NonInertiaPage') {
+                    return {
+                        default: {
+                            layout: Layout,
+                            template: `<div>${bladeContent}</div>`,
+                        }
+                    }
+                }
+
+                // Resolve core pages
+                const pages = import.meta.glob('../pages/**/*.vue', { eager: true });
+                let page = pages[`../pages/${name}.vue`];
+
+                // Resolve addon pages
+                if (!page) {
+                    const addonPage = components.queue[`Pages/${name}`];
+                    if (addonPage) page = { default: addonPage };
+                }
+
+                if (!page) {
+                    let message = `Couldn't find Inertia component for the [${name}] page. `;
+                    message += name.endsWith('.vue')
+                        ? 'You do not need to include the .vue extension when referencing a page.'
+                        : 'Did you you register a [Pages/${name}] component?';
+                    throw new Error(message);
+                }
+
+                page.default.layout = page.default.layout || Layout;
+                return page;
+            },
+            async setup({ el, App: InertiaApp, props, plugin }) {
+                const app = await _this.configureApp(InertiaApp, props);
+                app.use(plugin).mount(el);
+            },
+            title: (title) => title || bladeTitle
+        })
+
+        // Handle non-Inertia responses with full page reload
+        router.on('invalid', (event) => {
+            if (event.detail.response.status === 200) {
+                event.preventDefault();
+                window.location.href = event.detail.response.request.responseURL;
+            }
+        });
+
+        bootedCallbacks.forEach((callback) => callback(this));
+        bootedCallbacks = [];
+    },
+
+    async configureApp(InertiaApp, props, el) {
+        this.$app = createApp({
+            ...App,
+            render: () => h(InertiaApp, props),
+        });
 
         this.$app.config.silent = false;
         this.$app.config.devtools = true;
@@ -162,8 +230,6 @@ export default {
 
         const portals = markRaw(new Portals());
 
-        components = new Components(this.$app);
-
         Object.assign(this.$app.config.globalProperties, {
             $config: new Config(this.initialConfig),
         });
@@ -231,6 +297,7 @@ export default {
         registerGlobalCommandPalette();
         registerFieldtypes(this.$app);
         registerIconSets(this.initialConfig);
+        components.boot(this.$app);
 
         // Suppress the translation warnings
         this.$app.config.warnHandler = (msg, vm, trace) => {
@@ -243,13 +310,7 @@ export default {
         axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
         axios.defaults.headers.common['X-CSRF-TOKEN'] = Statamic.$config.get('csrfToken');
 
-        bootingCallbacks.forEach((callback) => callback(this));
-        bootingCallbacks = [];
-
-        this.$app.mount('#statamic');
-
-        bootedCallbacks.forEach((callback) => callback(this));
-        bootedCallbacks = [];
+        return this.$app;
     },
 };
 
diff --git a/resources/js/components/Components.js b/resources/js/components/Components.js
index 8096d6c198f..faa795ca597 100644
--- a/resources/js/components/Components.js
+++ b/resources/js/components/Components.js
@@ -3,13 +3,32 @@ import uniqid from 'uniqid';
 import Component from './Component';
 
 class Components {
-    constructor(app) {
-        this.app = app;
+    #booted = false;
+
+    constructor() {
+        this.queue = {};
         this.components = ref([]);
     }
 
+    boot(app) {
+        if (this.#booted) return;
+
+        this.app = app;
+
+        Object.entries(this.queue).forEach(([name, component]) => {
+            this.app.component(name, component);
+        });
+
+        this.#booted = true;
+    }
+
     register(name, component) {
-        this.app.component(name, component);
+        if (this.#booted) {
+            this.app.component(name, component);
+            return;
+        }
+
+        this.queue[name] = component;
     }
 
     append(name, { props }) {
diff --git a/resources/js/components/DynamicHtmlRenderer.vue b/resources/js/components/DynamicHtmlRenderer.vue
new file mode 100644
index 00000000000..78d8bbe3af2
--- /dev/null
+++ b/resources/js/components/DynamicHtmlRenderer.vue
@@ -0,0 +1,19 @@
+<template>
+    <component :is="dynamicComponent" />
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default {
+    props: {
+        html: { type: String, required: true }
+    },
+
+    computed: {
+        dynamicComponent() {
+            return defineComponent({ template: this.html })
+        }
+    }
+}
+</script>
diff --git a/resources/js/components/LicensingAlert.vue b/resources/js/components/LicensingAlert.vue
index 57cdae401ed..a958cad9637 100644
--- a/resources/js/components/LicensingAlert.vue
+++ b/resources/js/components/LicensingAlert.vue
@@ -1,16 +1,16 @@
 <script setup>
 import { Modal, Description, Button } from '@/components/ui';
 import { computed, ref } from 'vue';
+import useStatamicPageProps from '@/composables/page-props.js';
 
-const props = defineProps({
-    message: String,
-    testing: Boolean,
-    manageUrl: String,
-});
-
+const { licensing } = useStatamicPageProps();
+const { alert } = licensing;
+const message = ref(alert?.message);
+const testing = ref(alert?.testing);
+const manageUrl = ref(alert?.manageUrl);
 const key = 'statamic.snooze_license_banner';
 const open = ref(localStorage.getItem(key) < new Date().valueOf());
-const snoozeMinutes = computed(() => props.testing ? (24 * 60) : 5);
+const snoozeMinutes = computed(() => testing.value ? (24 * 60) : 5);
 const snoozeMilliseconds = computed(() => snoozeMinutes.value * 60 * 1000);
 
 function snooze() {
@@ -20,12 +20,13 @@ function snooze() {
 
 function manageLicenses() {
     snooze();
-    window.location = props.manageUrl;
+    window.location = manageUrl.value;
 }
 </script>
 
 <template>
     <Modal
+        v-if="alert"
         :title="__('Licensing Alert')"
         :open="open"
         @update:open="snooze"
diff --git a/resources/js/components/SessionExpiry.vue b/resources/js/components/SessionExpiry.vue
index e45a14c0c6c..48ee18154de 100644
--- a/resources/js/components/SessionExpiry.vue
+++ b/resources/js/components/SessionExpiry.vue
@@ -106,6 +106,7 @@
 
 <script>
 import { Modal, Input, Button } from '@/components/ui';
+import useStatamicPageProps from '@/composables/page-props.js';
 
 var counter;
 
@@ -116,20 +117,19 @@ export default {
         Button,
     },
 
-    props: {
-        warnAt: Number,
-        lifetime: Number,
-        email: String,
-        oauthProvider: String,
-        auth: Object,
-    },
-
     data() {
+        const { sessionExpiry: { warnAt, email, lifetime, oauthProvider, auth }} = useStatamicPageProps();
+
         return {
+            warnAt,
+            email,
+            lifetime,
+            oauthProvider,
+            auth,
             isShowingLogin: false,
             isShowingTwoFactorChallenge: false,
-            count: this.lifetime, // The timer used in vue
-            remaining: this.lifetime, // The actual time remaining as per server responses
+            count: lifetime, // The timer used in vue
+            remaining: lifetime, // The actual time remaining as per server responses
             errors: {},
             password: null,
             twoFactorCode: null,
diff --git a/resources/js/components/collections/Listing.vue b/resources/js/components/collections/Listing.vue
index 65cc4ac5e40..2fb1bb0c23b 100644
--- a/resources/js/components/collections/Listing.vue
+++ b/resources/js/components/collections/Listing.vue
@@ -52,7 +52,6 @@
 
                         <create-entry-button
                             v-if="collection.available_in_selected_site"
-                            :url="collection.create_entry_url"
                             variant="default"
                             :blueprints="collection.blueprints"
                             :text="collection.create_label"
@@ -87,7 +86,7 @@
                                     <template #cell-title="{ row: entry }" class="w-full">
                                         <div class="flex items-center gap-2">
                                             <StatusIndicator :status="entry.status" />
-                                            <a :href="entry.edit_url" class="line-clamp-1 overflow-hidden text-ellipsis" :text="entry.title" />
+                                            <Link :href="entry.edit_url" class="line-clamp-1 overflow-hidden text-ellipsis" :text="entry.title" />
                                         </div>
                                     </template>
                                     <template #cell-date="{ row: entry }" v-if="collection.dated">
@@ -134,10 +133,10 @@
         @refreshing="request"
     >
         <template #cell-title="{ row: collection }">
-            <a :href="collection.available_in_selected_site ? collection.entries_url : collection.edit_url" class="flex items-center gap-2">
+            <Link :href="collection.available_in_selected_site ? collection.entries_url : collection.edit_url" class="flex items-center gap-2">
                 <ui-icon :name="collection.icon || 'collections'" />
                 {{ __(collection.title) }}
-            </a>
+            </Link>
         </template>
         <template #cell-entries_count="{ row: collection }">
             <div class="flex items-center gap-3">
@@ -182,9 +181,11 @@ import {
     DropdownSeparator,
 } from '@/components/ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
+import { Link } from '@inertiajs/vue3';
 
 export default {
     components: {
+        Link,
         CardPanel,
         StatusIndicator,
         Badge,
diff --git a/resources/js/components/command-palette/Item.vue b/resources/js/components/command-palette/Item.vue
index 00200d21330..cf8472e7089 100644
--- a/resources/js/components/command-palette/Item.vue
+++ b/resources/js/components/command-palette/Item.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { useSlots, shallowRef, onMounted } from 'vue';
+import { useSlots, shallowRef, onMounted, computed } from 'vue';
 import { Icon, Badge } from '@/components/ui';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
     href: { type: String, default: null },
@@ -18,6 +19,14 @@ const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 const iconComponent = shallowRef(null);
 
+const component = computed(() => {
+    if (!props.href) return 'div';
+    if (! props.href.startsWith('http')) return Link;
+    const hostOfCurrentUrl = window.location.host;
+    const hostOfHref = (new URL(props.href)).host;
+    return hostOfHref === hostOfCurrentUrl ? Link : 'a';
+});
+
 onMounted(() => {
     if (props.icon) {
         iconComponent.value = true;
@@ -32,7 +41,8 @@ function click(event) {
 </script>
 
 <template>
-    <a
+    <Component
+        :is="component"
         :class="[
             'flex items-center gap-2 border-0',
             'rounded-lg px-2 py-1.5 text-sm antialiased',
@@ -42,7 +52,6 @@ function click(event) {
             'outline-hidden focus-visible:bg-gray-100 dark:focus-visible:bg-gray-900',
         ]"
         data-command-palette-item
-        :as="href ? 'a' : 'div'"
         :href="href"
         :target="openNewTab ? '_blank' : '_self'"
         @click="click"
@@ -63,5 +72,5 @@ function click(event) {
             class="size-4 opacity-30 hover:opacity-70"
             @click.prevent.stop="$emit('remove', href)"
         />
-    </a>
+    </Component>
 </template>
diff --git a/resources/js/components/entries/CollectionWidget.vue b/resources/js/components/entries/CollectionWidget.vue
index 7b88eeea5fb..3d2d0a27ce3 100644
--- a/resources/js/components/entries/CollectionWidget.vue
+++ b/resources/js/components/entries/CollectionWidget.vue
@@ -10,6 +10,7 @@ import {
     ListingPagination as Pagination,
     Icon,
 } from '@/components/ui';
+import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
     additionalColumns: Array,
@@ -71,9 +72,9 @@ function formatDate(value) {
                             <template #cell-title="{ row: entry, isColumnVisible }">
                                 <div class="flex items-center gap-2">
                                     <StatusIndicator v-if="!isColumnVisible('status')" :status="entry.status" />
-                                    <a :href="entry.edit_url" class="line-clamp-1 overflow-hidden text-ellipsis">{{
+                                    <Link :href="entry.edit_url" class="line-clamp-1 overflow-hidden text-ellipsis">{{
                                         entry.title
-                                    }}</a>
+                                    }}</Link>
                                 </div>
                             </template>
                             <template #cell-date="{ row: entry, isColumnVisible }">
diff --git a/resources/js/components/entries/CreateEntryButton.vue b/resources/js/components/entries/CreateEntryButton.vue
index 2f3e62fa07f..49cac0d06d3 100644
--- a/resources/js/components/entries/CreateEntryButton.vue
+++ b/resources/js/components/entries/CreateEntryButton.vue
@@ -10,7 +10,7 @@
                 <DropdownItem
                     v-for="blueprint in blueprints"
                     :key="blueprint.handle"
-                    @click="select(blueprint.handle, $event)"
+                    @click="select(blueprint, $event)"
                     :text="blueprint.title"
                 />
             </DropdownMenu>
@@ -31,7 +31,6 @@ export default {
     },
 
     props: {
-        url: String,
         blueprints: Array,
         variant: { type: String, default: 'primary' },
         text: { type: String, default: () => __('Create Entry') },
@@ -62,13 +61,8 @@ export default {
         },
 
         createUrl(blueprint) {
-            let url = this.url;
-
-            if (blueprint) {
-                url = url += `?blueprint=${blueprint}`;
-            }
-
-            return url;
+            if (!blueprint) blueprint = this.blueprints[0];
+            return blueprint.createEntryUrl;
         },
 
         addToCommandPalette() {
@@ -83,7 +77,7 @@ export default {
                     category: Statamic.$commandPalette.category.Actions,
                     text: this.hasMultipleBlueprints ? [title, blueprint.title] : title,
                     icon: 'entry',
-                    url: this.createUrl(blueprint.handle),
+                    url: this.createUrl(blueprint),
                     prioritize: true,
                 });
             });
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 708da62668c..68062f1802f 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -16,10 +16,10 @@
         @reordered="reordered"
     >
         <template #cell-title="{ row: entry, isColumnVisible }">
-            <a class="title-index-field" :href="entry.edit_url" @click.stop>
+            <Link class="title-index-field" :href="entry.edit_url" @click.stop>
                 <StatusIndicator v-if="!isColumnVisible('status')" :status="entry.status" />
                 <span v-text="entry.title" />
-            </a>
+            </Link>
         </template>
         <template #cell-status="{ row: entry }">
             <StatusIndicator :status="entry.status" show-label :show-dot="false" />
@@ -39,11 +39,13 @@
 
 <script>
 import { StatusIndicator, DropdownItem, Listing } from '@/components/ui';
+import { Link } from '@inertiajs/vue3';
 
 export default {
     emits: ['reordered', 'site-changed'],
 
     components: {
+        Link,
         StatusIndicator,
         Listing,
         DropdownItem,
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 5ab8fbf692d..8d8686f4add 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -282,6 +282,7 @@ import {
 import resetValuesFromResponse from '@/util/resetValuesFromResponse.js';
 import { computed, ref } from 'vue';
 import { Pipeline, Request, BeforeSaveHooks, AfterSaveHooks, PipelineStopped } from '@ui/Publish/SavePipeline.js';
+import { router } from '@inertiajs/vue3';
 
 let saving = ref(false);
 let errors = ref({});
@@ -570,12 +571,12 @@ export default {
 
                     // If the user has opted to create another entry, redirect them to create page.
                     if (!this.isInline && nextAction === 'create_another') {
-                        window.location = this.createAnotherUrl;
+                        this.redirectTo(this.createAnotherUrl);
                     }
 
                     // If the user has opted to go to listing (default/null option), redirect them there.
                     else if (!this.isInline && nextAction === null) {
-                        window.location = this.listingUrl;
+                        this.redirectTo(this.listingUrl);
                     }
 
                     // Otherwise, leave them on the edit form and emit an event. We need to wait until after
@@ -679,7 +680,7 @@ export default {
             this.selectingOrigin = false;
 
             if (this.isCreating) {
-                this.$nextTick(() => (window.location = localization.url));
+                this.$nextTick(() => this.redirectTo(localization.url));
                 return;
             }
 
@@ -738,12 +739,12 @@ export default {
 
             // If the user has opted to create another entry, redirect them to create page.
             if (!this.isInline && nextAction === 'create_another') {
-                window.location = this.createAnotherUrl;
+                this.redirectTo(this.createAnotherUrl);
             }
 
             // If the user has opted to go to listing (default/null option), redirect them there.
             else if (!this.isInline && nextAction === null) {
-                window.location = this.listingUrl;
+                this.redirectTo(this.listingUrl);
             }
 
             // Otherwise, leave them on the edit form and emit an event. We need to wait until after
@@ -822,6 +823,10 @@ export default {
                 action: action.run,
             }));
         },
+
+        redirectTo(location) {
+            router.get(location);
+        }
     },
 
     mounted() {
diff --git a/resources/js/components/global-header/Breadcrumbs.vue b/resources/js/components/global-header/Breadcrumbs.vue
new file mode 100644
index 00000000000..16cafa1987e
--- /dev/null
+++ b/resources/js/components/global-header/Breadcrumbs.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { Link } from '@inertiajs/vue3';
+import useNavigation from '../nav/navigation.js';
+import { computed, inject } from 'vue';
+
+const { breadcrumbs: nav, setParentActive, setChildActive } = useNavigation();
+const additionalBreadcrumbs = inject('layout').additionalBreadcrumbs;
+
+const activeSection = computed(() => nav.value.find(section => section.items.some(item => item.active)));
+
+const primaryItem = computed(() => {
+    if (! activeSection.value) {
+        return null;
+    }
+
+    const item = activeSection.value.items.find(item => item.active);
+
+    if (item) item.links = activeSection.value.items.filter(i => i !== item);
+
+    return item;
+});
+
+const secondaryItem = computed(() => {
+    if (!primaryItem.value || !primaryItem.value.children) {
+        return null;
+    }
+
+    const item = primaryItem.value.children.find(item => item.active);
+
+    if (item) {
+        item.links = primaryItem.value.children.filter(i => i !== item);
+        item.createLabel = primaryItem.value.extra?.breadcrumbs?.create_label;
+        item.createUrl = primaryItem.value.extra?.breadcrumbs?.create_url;
+        item.configureUrl = primaryItem.value.extra?.breadcrumbs?.configure_url;
+    }
+
+    return item;
+});
+
+const breadcrumbs = computed(() => [
+    primaryItem.value,
+    secondaryItem.value,
+    ...(additionalBreadcrumbs.value || []),
+].filter(Boolean));
+
+function setBreadcrumbActive(index) {
+    if (index === 0) {
+        setParentActive(primaryItem.value, 'breadcrumbs');
+    } else if (index === 1 && secondaryItem.value) {
+        setChildActive(primaryItem.value, secondaryItem.value, 'breadcrumbs');
+    }
+}
+
+function setDropdownItemActive(breadcrumbIndex, linkIndex, breadcrumb) {
+    if (breadcrumbIndex === 0) {
+        setParentActive(breadcrumb.links[linkIndex], 'breadcrumbs');
+    } else if (breadcrumbIndex === 1 && secondaryItem.value) {
+        setChildActive(primaryItem.value, breadcrumb.links[linkIndex], 'breadcrumbs');
+    }
+}
+</script>
+
+<template>
+    <div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs>
+        <div
+            v-for="(breadcrumb, breadcrumbIndex) in breadcrumbs"
+            :key="breadcrumbIndex"
+            class="items-center gap-2 md:flex relative"
+        >
+            <span class="text-white/30">/</span>
+            <Component
+                :is="breadcrumb.url ? Link: 'span'"
+                class="
+                    inline-flex items-center justify-center whitespace-nowrap shrink-0
+                    font-medium antialiased cursor-pointer no-underline
+                    disabled:text-white/60 dark:disabled:text-white/50 disabled:cursor-not-allowed
+                    bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 px-3 h-8
+                    text-[0.8125rem] leading-tight gap-2 rounded-lg
+                    dark:text-white/85! hover:text-white! px-2! mr-1.75
+                "
+                :href="breadcrumb.url"
+                v-text="__(breadcrumb.display)"
+                @click="setBreadcrumbActive(breadcrumbIndex)"
+            />
+
+            <ui-dropdown v-if="breadcrumb.links.length" class="relative" :aria-label="`${__('More options for')} ${__(breadcrumb.display)}`">
+                <template #trigger>
+                    <ui-button
+                        variant="ghost"
+                        icon="chevron-vertical"
+                        class="[&_svg]:size-3! h-8! w-4! hover:bg-gray-300/5! -ml-3 mr-1 animate-in fade-in duration-500"
+                        :aria-label="`${__('Options for')} ${__(breadcrumb.display)}`"
+                        aria-haspopup
+                        :aria-expanded="false"
+                    />
+                </template>
+                <ui-dropdown-header
+                    class="grid grid-cols-[auto_1fr_auto] items-center"
+                    :icon="breadcrumb.icon"
+                    :append-icon="breadcrumb.configureUrl ? 'cog-solid' : null"
+                    :append-href="breadcrumb.configureUrl"
+                    role="menuitem"
+                >
+                    <Link
+                        :href="breadcrumb.url"
+                        :aria-label="`${__('Navigate to')} ${__(breadcrumb.display)}`"
+                        v-text="breadcrumb.display"
+                        @click="setBreadcrumbActive(breadcrumbIndex)"
+                    />
+                </ui-dropdown-header>
+                <ui-dropdown-menu role="menu" v-if="breadcrumb.links.length">
+                    <ui-dropdown-item
+                        v-for="(link, dropdownLinkIndex) in breadcrumb.links"
+                        :key="dropdownLinkIndex"
+                        :text="__(link.display)"
+                        :icon="link.icon"
+                        :href="link.url"
+                        role="menuitem"
+                        :aria-label="`${__(link.display)} - ${__('Navigate to')}`"
+                        @click="setDropdownItemActive(breadcrumbIndex, dropdownLinkIndex, breadcrumb)"
+                    />
+                </ui-dropdown-menu>
+                <ui-dropdown-footer
+                    v-if="breadcrumb.createUrl"
+                    icon="plus"
+                    :text="__(breadcrumb.createLabel)"
+                    :href="breadcrumb.createUrl"
+                    role="menuitem"
+                    :aria-label="`${__(breadcrumb.createLabel)} - ${__('Create new')}`"
+                />
+            </ui-dropdown>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/global-header/Header.vue b/resources/js/components/global-header/Header.vue
new file mode 100644
index 00000000000..cf8661929d3
--- /dev/null
+++ b/resources/js/components/global-header/Header.vue
@@ -0,0 +1,32 @@
+<script setup>
+import Logo from './Logo.vue';
+import Breadcrumbs from './Breadcrumbs.vue';
+import SiteSelector from './SiteSelector.vue';
+import Search from './Search.vue';
+import ViewSiteButton from './ViewSiteButton.vue';
+import UserDropdown from './UserDropdown.vue';
+</script>
+
+<template>
+    <header class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-4 fixed overflow-x-auto top-0 inset-x-0 z-[3]">
+        <a class="c-skip-link z-(--z-index-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
+            {{ __('Skip to sidebar') }}
+        </a>
+        <a class="c-skip-link z-(--z-index-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main-content">
+            {{ __('Skip to content') }}
+        </a>
+        <div class="dark flex items-center gap-2 text-[0.8125rem] text-white/85 w-full">
+            <Logo />
+            <Breadcrumbs />
+        </div>
+
+        <div class="dark flex-1 flex gap-1 md:gap-3 items-center justify-end shrink-0">
+            <SiteSelector />
+            <div class="flex items-center">
+                <Search />
+            </div>
+            <ViewSiteButton />
+            <UserDropdown />
+        </div>
+    </header>
+</template>
diff --git a/resources/js/components/global-header/Logo.vue b/resources/js/components/global-header/Logo.vue
new file mode 100644
index 00000000000..c630c671e2b
--- /dev/null
+++ b/resources/js/components/global-header/Logo.vue
@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+import { Icon } from '@ui';
+import StatamicLogo from '@/../svg/statamic-mark-lime.svg';
+import ProBadge from './ProBadge.vue';
+import { Link } from '@inertiajs/vue3';
+import useStatamicPageProps from '@/composables/page-props.js';
+
+const { logos, isPro, cmsName } = useStatamicPageProps();
+const customLogo = computed(() => {
+    if (! logos) return null
+    return logos.dark.nav ?? logos.light.nav;
+});
+
+function toggleNav() {
+    Statamic.$events.$emit('nav.toggle');
+}
+</script>
+
+<template>
+    <template v-if="customLogo">
+        <button class="flex items-center group cursor-pointer text-white/85 hover:text-white" type="button" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}">
+            <div class="p-1 size-7 inset-0 flex items-center justify-center">
+                <Icon name="burger-menu" class="size-5" />
+            </div>
+        </button>
+        <img :src="customLogo" :alt="cmsName" class="max-w-[260px] max-h-9">
+    </template>
+    <template v-else>
+        <div class="flex items-center gap-2 relative">
+            <button class="flex items-center group rounded-lg cursor-pointer" type="button" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}" style="--focus-outline-offset: 0.2rem;">
+                <div class="opacity-0 group-hover:opacity-100 p-1 size-7 transition-opacity duration-150 absolute inset-0 flex items-center justify-center">
+                    <Icon name="burger-menu" class="size-5" />
+                </div>
+                <StatamicLogo class="size-7 group-hover:opacity-0 transition-opacity duration-150" />
+            </button>
+            <Link :href="cp_url('/')" class="hidden sm:block text-white/85 rounded-xs whitespace-nowrap" style="--focus-outline-offset: var(--outline-offset-button);">
+                {{ logos.text }}
+            </Link>
+            <ProBadge v-if="isPro" />
+        </div>
+    </template>
+</template>
diff --git a/resources/js/components/global-header/ProBadge.vue b/resources/js/components/global-header/ProBadge.vue
new file mode 100644
index 00000000000..bedeb925785
--- /dev/null
+++ b/resources/js/components/global-header/ProBadge.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { Badge, Tooltip } from '@ui';
+import { computed } from 'vue';
+import useStatamicPageProps from '@/composables/page-props.js';
+
+const { licensing } = useStatamicPageProps();
+
+const problemBadgeColor = computed(() => {
+    if (licensing.requestFailed) {
+        return 'yellow';
+    } else if (licensing.isOnPublicDomain) {
+        return 'red';
+    }
+    return 'green';
+});
+</script>
+
+<template>
+    <Badge v-if="licensing.valid" :text="__('Pro')" variant="flat" size="sm" class="bg-white/15!" />
+
+    <Tooltip
+        v-else
+        :text="licensing.requestFailureMessage"
+    >
+        <Badge
+            variant="flat"
+            :color="problemBadgeColor"
+        >
+            {{ __('Pro') }} – {{ licensing.isOnPublicDomain ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}
+        </Badge>
+    </Tooltip>
+</template>
diff --git a/resources/js/components/global-header/Search.vue b/resources/js/components/global-header/Search.vue
new file mode 100644
index 00000000000..f38a204b35f
--- /dev/null
+++ b/resources/js/components/global-header/Search.vue
@@ -0,0 +1,22 @@
+<script setup>
+import CommandPalette from '@/components/command-palette/CommandPalette.vue';
+import { Icon } from '@ui';
+</script>
+
+<template>
+    <CommandPalette>
+        <div class="
+            data-[focus-visible]:outline-focus hover flex cursor-text items-center gap-x-1.5 group h-8
+            rounded-lg [button:has(>&)]:rounded-md bg-black/40 text-xs text-white/60 outline-none
+            border-b border-b-white/20 inset-shadow-sm inset-shadow-black/20
+            md:w-32 md:py-[calc(5/16*1rem)] md:px-2
+            hover:bg-black/45 hover:text-white/70
+        ">
+            <Icon name="magnifying-glass" class="size-5 flex-none text-white/50 group-hover:text-white/70" />
+            <span class="sr-only leading-none md:not-sr-only st-text-trim-cap">{{ __('Search') }}</span>
+            <kbd class="ml-auto hidden self-center rounded bg-white/5 px-[0.3125rem] py-[0.0625rem] text-[0.625rem]/4 font-medium text-white/60 group-hover:text-white/70 ring-1 ring-white/7.5 [word-spacing:-0.15em] ring-inset md:block">
+                <kbd class="font-sans">⌘ </kbd><kbd class="font-sans">K</kbd>
+            </kbd>
+        </div>
+    </CommandPalette>
+</template>
diff --git a/resources/js/components/GlobalSiteSelector.vue b/resources/js/components/global-header/SiteSelector.vue
similarity index 100%
rename from resources/js/components/GlobalSiteSelector.vue
rename to resources/js/components/global-header/SiteSelector.vue
diff --git a/resources/js/components/global-header/UserDropdown.vue b/resources/js/components/global-header/UserDropdown.vue
new file mode 100644
index 00000000000..f0909f1b97e
--- /dev/null
+++ b/resources/js/components/global-header/UserDropdown.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { computed } from 'vue';
+import { Avatar, Button, DropdownHeader, Badge, Dropdown, DropdownMenu, DropdownItem, DropdownFooter, ToggleGroup, ToggleItem } from '@ui';
+import useStatamicPageProps from '@/composables/page-props.js';
+
+const { supportUrl } = useStatamicPageProps();
+const logoutUrl = `${cp_url('auth/logout')}?redirect=${cp_url('/')}`;
+const user = Statamic.user;
+const isImpersonating = computed((() => user.is_impersonating));
+</script>
+
+<template>
+    <Dropdown align="end" v-cloak>
+        <template #trigger>
+            <Button :icon-only="true" variant="ghost">
+                <Avatar :user="user" />
+            </Button>
+        </template>
+
+        <DropdownHeader>
+            <div class="flex items-center gap-2">
+                <Avatar :user="user" class="size-8" />
+                <div>
+                    <div class="text-sm" v-text="user.email" />
+                    <div v-if="user.super" class="text-xs text-gray-500 font-normal flex items-center gap-1">
+                        {{ __('Super Admin') }}
+                        <Badge v-if="isImpersonating" size="sm" pill :text="__('Impersonating')" />
+                    </div>
+                    <Badge v-if="isImpersonating" size="sm" pill :text="__('Impersonating')" />
+                </div>
+            </div>
+        </DropdownHeader>
+
+        <DropdownMenu>
+            <DropdownItem
+                :href="cp_url('account')"
+                icon="avatar"
+                :text="__('Manage profile')"
+            />
+            <DropdownItem
+                :href="cp_url('preferences/edit')"
+                icon="cog"
+                :text="__('Preferences')"
+            />
+            <DropdownItem
+                v-if="supportUrl"
+                :href="supportUrl"
+                icon="support"
+                :text="__('Get support')"
+                target="_blank"
+            />
+            <DropdownItem
+                v-if="isImpersonating"
+                :href="cp_url('auth/stop-impersonating')"
+                icon="mask"
+                :text="__('Stop impersonating')"
+            />
+            <DropdownItem
+                as="a"
+                :href="logoutUrl"
+                icon="sign-out"
+                :text="__('Sign out')"
+            />
+        </DropdownMenu>
+
+        <DropdownFooter class="px-1.75! space-y-2">
+            <ToggleGroup variant="ghost" size="xs" class="justify-between" v-model="$theme.preference">
+                <ToggleItem icon="sun" class="[&_svg]:size-4.5" value="light" :label="__('Light')" />
+                <ToggleItem icon="moon" class="[&_svg]:size-4.5" value="dark" :label="__('Dark')" />
+                <ToggleItem icon="monitor" class="[&_svg]:size-4.5" value="auto" :label="__('System')" />
+            </ToggleGroup>
+        </DropdownFooter>
+    </Dropdown>
+
+</template>
diff --git a/resources/js/components/global-header/ViewSiteButton.vue b/resources/js/components/global-header/ViewSiteButton.vue
new file mode 100644
index 00000000000..507a10ff1f3
--- /dev/null
+++ b/resources/js/components/global-header/ViewSiteButton.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { Icon } from '@ui';
+import useStatamicPageProps from '@/composables/page-props.js';
+
+const { selectedSiteUrl: url } = useStatamicPageProps();
+</script>
+
+<template>
+    <a
+        :href="url"
+        :aria-label="__('View Site')"
+        class="inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-white/60 dark:disabled:text-white/50 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 h-8 text-[0.8125rem] leading-tight rounded-lg px-0 gap-0 w-8 [&_svg]:size-3.5 [&_svg]:size-4 -me-2 [&_svg]:text-white/85! v-popper--has-tooltip"
+        target="_blank"
+    >
+        <Icon name="visit-website" />
+    </a>
+</template>
diff --git a/resources/js/components/login/EnableTwoFactorAuthentication.vue b/resources/js/components/login/EnableTwoFactorAuthentication.vue
deleted file mode 100644
index 5aecade0a89..00000000000
--- a/resources/js/components/login/EnableTwoFactorAuthentication.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup>
-import TwoFactorSetup from '@/components/two-factor/Setup.vue';
-import { ref } from 'vue';
-
-const props = defineProps({
-    routes: Object,
-    redirect: String,
-});
-
-const setupModalOpen = ref(false);
-
-function setupComplete() {
-    window.location.href = props.redirect;
-}
-</script>
-
-<template>
-    <ui-button variant="primary" @click="setupModalOpen = true" :text="__('Set up')" class="w-full" />
-
-    <TwoFactorSetup
-        v-if="setupModalOpen"
-        :enable-url="routes.enable"
-        :recovery-code-urls="routes.recovery_codes"
-        @close="setupModalOpen = false"
-        @setup-complete="setupComplete"
-    />
-</template>
diff --git a/resources/js/components/login/Login.vue b/resources/js/components/login/Login.vue
deleted file mode 100644
index 36a38edcbba..00000000000
--- a/resources/js/components/login/Login.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-    <slot v-bind="{ showEmailLogin, hasError, busy, setBusy }"></slot>
-</template>
-
-<script>
-export default {
-    props: {
-        showEmailLogin: {
-            default: false,
-        },
-        hasError: {
-            default: false,
-        },
-    },
-
-    data() {
-        return {
-            busy: false,
-        };
-    },
-
-    mounted() {
-        if (this.hasError) {
-            this.$el.parentElement.parentElement.classList.add('animation-shake');
-        }
-    },
-
-    methods: {
-        setBusy(state = null) {
-            this.busy = state ?? true;
-        },
-    },
-};
-</script>
diff --git a/resources/js/components/login/TwoFactorChallenge.vue b/resources/js/components/login/TwoFactorChallenge.vue
deleted file mode 100644
index 04b5ea96fa6..00000000000
--- a/resources/js/components/login/TwoFactorChallenge.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-
-const props = defineProps({
-    initialMode: {
-        type: String,
-        default: 'code',
-    },
-    errors: {
-        type: Object,
-    },
-    formAction: {
-        type: String,
-    },
-    csrfToken: {
-        type: String,
-    },
-    redirect: {
-        type: String,
-    },
-});
-
-const formEl = ref(null);
-const busy = ref(false);
-const mode = ref(props.initialMode);
-
-onMounted(() => {
-    if (hasErrors()) {
-        formEl.value.parentElement.parentElement.classList.add('animation-shake');
-    }
-});
-
-function hasErrors() {
-    return Object.keys(props.errors).length > 0;
-}
-
-function hasError(field) {
-    return !!props.errors[field];
-}
-
-function errorFor(field) {
-    return props.errors[field][0];
-}
-</script>
-
-<template>
-    <div class="bg-white backdrop-blur-[2px] border border-gray-200 rounded-2xl p-2 shadow-[0_8px_5px_-6px_rgba(0,0,0,0.12),_0_3px_8px_0_rgba(0,0,0,0.02),_0_30px_22px_-22px_rgba(39,39,42,0.35)]">
-        <div class="relative space-y-3 rounded-xl border border-gray-300 bg-white p-4 shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)]">
-            <header class="flex flex-col justify-center items-center mb-8 py-3">
-                <ui-card class="p-2! mb-4 flex items-center justify-center">
-                    <ui-icon name="phone-lock" class="size-5" />
-                </ui-card>
-                <ui-heading :level="1" size="xl">
-                    {{ __('Two-Factor Authentication') }}
-                </ui-heading>
-                <ui-description v-if="mode === 'code'" :text="__('statamic::messages.two_factor_challenge_code_instructions')" class="text-center" />
-                <ui-description v-else :text="__('statamic::messages.two_factor_recovery_code_instructions')" class="text-center" />
-            </header>
-            <form ref="formEl" method="POST" :action="formAction" class="email-login select-none space-y-6" @submit="busy = true">
-                <input type="hidden" name="_token" :value="csrfToken" />
-                <input v-if="redirect" type="hidden" name="redirect" :value="redirect" />
-
-                <ui-field v-if="mode === 'code'" :label="__('Code')" :error="hasError('code') ? errorFor('code') : null">
-                    <ui-input
-                        type="text"
-                        name="code"
-                        pattern="[0-9]*"
-                        maxlength="6"
-                        inputmode="numeric"
-                        autofocus
-                        autocomplete="one-time-code"
-                    />
-                </ui-field>
-
-                <ui-field v-if="mode === 'recovery_code'" :label="__('Recovery Code')" :error="hasError('recovery_code') ? errorFor('recovery_code') : null">
-                    <ui-input
-                        type="text"
-                        name="recovery_code"
-                        maxlength="21"
-                        autofocus
-                        autocomplete="off"
-                    />
-                </ui-field>
-
-                <ui-button type="submit" variant="primary" :disabled="busy" :loading="busy" class="w-full">{{ __('Continue') }}</ui-button>
-
-                <button v-if="mode === 'code'" class="cursor-pointer text-xs text-gray-500 hover:text-gray-900" type="button" @click="mode = 'recovery_code'">
-                    {{ __('Use recovery code') }}
-                </button>
-
-                <button v-if="mode === 'recovery_code'" class="cursor-pointer text-xs text-gray-500 hover:text-gray-900" type="button" @click="mode = 'code'">
-                    {{ __('Use one-time code') }}
-                </button>
-            </form>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/components/nav/Nav.vue b/resources/js/components/nav/Nav.vue
new file mode 100644
index 00000000000..289dbdaef2c
--- /dev/null
+++ b/resources/js/components/nav/Nav.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { Link, usePage } from '@inertiajs/vue3';
+import { Badge, Icon, Tooltip } from '@ui';
+import useNavigation from './navigation.js';
+import { nextTick, onMounted, ref, watch } from 'vue';
+import DynamicHtmlRenderer from '@/components/DynamicHtmlRenderer.vue';
+import { useReactiveStatamicPageProps } from '@/composables/page-props.js';
+
+const { isInertia } = useReactiveStatamicPageProps();
+const { nav, setParentActive, setChildActive } = useNavigation();
+const localStorageKey = 'statamic.nav';
+const isOpen = ref(localStorage.getItem(localStorageKey) !== 'closed');
+
+onMounted(() => {
+    nextTick(() => {
+        watch(isOpen, (isOpen) => {
+            const el = document.getElementById('main');
+            el.classList.toggle('nav-closed', !isOpen);
+            el.classList.toggle('nav-open', isOpen);
+        }, { immediate: true });
+    });
+});
+
+function toggle() {
+    isOpen.value = !isOpen.value;
+    localStorage.setItem(localStorageKey, isOpen.value ? 'open' : 'closed');
+}
+
+Statamic.$keys.bind(['command+\\'], (e) => {
+    e.preventDefault();
+    toggle();
+});
+
+Statamic.$events.$on('nav.toggle', toggle);
+</script>
+
+<template>
+    <nav class="nav-main">
+        <div v-for="(section, i) in nav" :key="i">
+            <div
+                class="section-title"
+                v-if="section.display !== 'Top Level'"
+                v-text="section.display"
+            />
+            <ul>
+                <li v-for="(item, i) in section.items" :key="i">
+                    <DynamicHtmlRenderer v-if="item.view" :html="item.view" />
+                    <template v-else>
+                        <Link
+                            :href="item.url"
+                            v-bind="item.attributes"
+                            :class="{ 'active': item.active }"
+                            @click="setParentActive(item)"
+                        >
+                            <Icon :name="item.icon" />
+                            <span v-text="item.display" />
+                        </Link>
+                        <ul v-if="item.children.length && item.active">
+                            <li v-for="(child, i) in item.children" :key="i">
+                                <Link
+                                    :href="child.url"
+                                    v-bind="child.attributes"
+                                    v-text="child.display"
+                                    :class="{ 'active': child.active }"
+                                    @click="setChildActive(item, child)"
+                                />
+                            </li>
+                        </ul>
+                    </template>
+                </li>
+            </ul>
+        </div>
+        <div>
+            <Tooltip text="This page is rendered using a traditional Blade view, not Inertia. This badge is temporary.">
+                <Badge v-if="!isInertia" text="Blade" color="yellow" />
+            </Tooltip>
+        </div>
+    </nav>
+</template>
diff --git a/resources/js/components/nav/navigation.js b/resources/js/components/nav/navigation.js
new file mode 100644
index 00000000000..0d964b0d730
--- /dev/null
+++ b/resources/js/components/nav/navigation.js
@@ -0,0 +1,93 @@
+import { ref } from 'vue';
+import useStatamicPageProps from '@/composables/page-props.js';
+import { deepClone } from '@/util/clone.js';
+import { router } from '@inertiajs/vue3';
+
+let navData = null;
+let breadcrumbsData = null;
+let routerEventListener = null;
+
+export default function useNavigation() {
+    if (!navData) {
+        const { nav: navProp } = useStatamicPageProps();
+        const cloned = deepClone(navProp);
+        navData = ref(cloned);
+        breadcrumbsData = ref(deepClone(cloned));
+    }
+
+    if (! routerEventListener) {
+        routerEventListener = router.on('success', () => {
+            const freshNav = deepClone(useStatamicPageProps().nav);
+            navData.value = freshNav;
+            breadcrumbsData.value = deepClone(freshNav);
+        });
+    }
+
+    function unsetActiveItem(data) {
+        data.forEach(section => {
+            section.items.forEach(item => {
+                item.active = false;
+                item.children.forEach(child => child.active = false);
+            });
+        });
+    }
+
+    function findItemInNav(data, id) {
+        for (const section of data) {
+            for (const item of section.items) {
+                if (item.id === id) {
+                    return item;
+                }
+            }
+        }
+    }
+
+    function findItemInChildren(parent, id) {
+        return parent.children.find(c => c.id === id);
+    }
+
+    function applyUpdate(data, update) {
+        unsetActiveItem(data);
+
+        if (update.type === 'parent') {
+            findItemInNav(data, update.parentId).active = true;
+        } else if (update.type === 'child') {
+            const parent = findItemInNav(data, update.parentId);
+            parent.active = true;
+            findItemInChildren(parent, update.childId).active = true;
+        }
+    }
+
+    function setParentActive(parent, source = 'nav') {
+        const update = { type: 'parent', parentId: parent.id };
+
+        if (source === 'nav') {
+            // Nav: update immediately, breadcrumbs wait for success
+            applyUpdate(navData.value, update);
+        } else {
+            // Breadcrumbs: update both immediately
+            applyUpdate(navData.value, update);
+            applyUpdate(breadcrumbsData.value, update);
+        }
+    }
+
+    function setChildActive(parent, child, source = 'nav') {
+        const update = { type: 'child', parentId: parent.id, childId: child.id };
+
+        if (source === 'nav') {
+            // Nav: update immediately, breadcrumbs wait for success
+            applyUpdate(navData.value, update);
+        } else {
+            // Breadcrumbs: update both immediately
+            applyUpdate(navData.value, update);
+            applyUpdate(breadcrumbsData.value, update);
+        }
+    }
+
+    return {
+        nav: navData,
+        breadcrumbs: breadcrumbsData,
+        setParentActive,
+        setChildActive
+    }
+}
diff --git a/resources/js/components/ui/DocsCallout.vue b/resources/js/components/ui/DocsCallout.vue
new file mode 100644
index 00000000000..78868552cb4
--- /dev/null
+++ b/resources/js/components/ui/DocsCallout.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { CommandPaletteItem, Badge } from '@ui';
+import { computed } from 'vue';
+
+const props = defineProps({
+    topic: { type: String, required: true },
+    url: { type: String, required: true },
+});
+
+const linkToDocs = Statamic.$config.get('linkToDocs');
+const url = computed(() => props.url.startsWith('http') ? props.url : `https://statamic.dev/${props.url}`);
+</script>
+
+<template>
+
+    <div v-if="linkToDocs" class="mt-12 flex justify-center text-center starting-style-transition">
+        <CommandPaletteItem
+            :text="[__('Statamic Documentation'), topic]"
+            icon="book-next-page"
+            :url="url"
+            open-new-tab
+            track-recent
+            v-slot="{ url, icon }"
+        >
+            <Badge
+                :text="__('Learn about :topic', { topic })"
+                icon-append="external-link"
+                :href="url"
+                target="_blank"
+                pill
+            />
+        </CommandPaletteItem>
+    </div>
+
+</template>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index bed939ed8b4..fe99702dca8 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -34,3 +34,4 @@ export { default as ListingTableBody } from "./Listing/TableBody.vue";
 export { default as ListingTableHead } from "./Listing/TableHead.vue";
 export { default as ListingToggleAll } from "./Listing/ToggleAll.vue";
 export { default as CommandPaletteItem } from "./CommandPalette/Item.vue";
+export { default as DocsCallout } from "./DocsCallout.vue";
diff --git a/resources/js/composables/dirty-state.js b/resources/js/composables/dirty-state.js
index b9cd200c86b..6c5fb160319 100644
--- a/resources/js/composables/dirty-state.js
+++ b/resources/js/composables/dirty-state.js
@@ -1,11 +1,17 @@
 import { ref, watch } from 'vue';
+import { router } from '@inertiajs/vue3';
 
 const dirty = ref([]);
+let inertiaWarningListener = null;
 
 function names() {
     return dirty.value;
 }
 
+function clear() {
+    dirty.value = [];
+}
+
 function count() {
     return dirty.value.length;
 }
@@ -21,13 +27,29 @@ function remove(name) {
 }
 
 function enableWarning() {
-    if (Statamic.$preferences.get('confirm_dirty_navigation', true)) {
-        window.onbeforeunload = () => '';
+    if (! Statamic.$preferences.get('confirm_dirty_navigation', true)) {
+        return;
     }
+
+    // For Inertia navigation (e.g. through Link component)
+    inertiaWarningListener = router.on('before', event => {
+        const confirmed = confirm('You have unsaved changes. Are you sure you want to leave this page?');
+        if (confirmed) {
+            // Clear state so subsequent navigations don't prompt again
+            router.on('success', () => clear());
+            // Disable the browser warning so the user doesn't get double prompts
+            disableWarning();
+        }
+        return confirmed;
+    });
+
+    // For browser navigation (e.g. back button, refresh, closing tab)
+    window.onbeforeunload = () => '';
 }
 
 function disableWarning() {
     window.onbeforeunload = null;
+    inertiaWarningListener && inertiaWarningListener();
 }
 
 function state(name, state) {
diff --git a/resources/js/composables/page-props.js b/resources/js/composables/page-props.js
new file mode 100644
index 00000000000..8e56bc9c2b0
--- /dev/null
+++ b/resources/js/composables/page-props.js
@@ -0,0 +1,25 @@
+import { usePage } from '@inertiajs/vue3';
+import { computed } from 'vue';
+
+export default function useStatamicPageProps() {
+    const page = usePage();
+
+    return new Proxy({}, {
+        get(target, prop) {
+            return page.props._statamic?.[prop];
+        }
+    });
+}
+
+export function useReactiveStatamicPageProps() {
+    const page = usePage();
+
+    return new Proxy({}, {
+        get(target, prop) {
+            if (!target[prop]) {
+                target[prop] = computed(() => page.props._statamic?.[prop]);
+            }
+            return target[prop];
+        }
+    });
+}
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
new file mode 100644
index 00000000000..976982d6be1
--- /dev/null
+++ b/resources/js/pages/Dashboard.vue
@@ -0,0 +1,51 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import DynamicHtmlRenderer from '@/components/DynamicHtmlRenderer.vue';
+
+defineProps(['widgets'])
+
+function classes(widget) {
+    return `${widget.classes} ${tailwindWidthClass(widget.width)}`;
+}
+
+function tailwindWidthClass(width) {
+    const sizes = {
+        sm: 'w-full @lg:w-1/2 @4xl:w-1/3 @8xl:w-1/4',
+        md: 'w-full @lg:w-1/2 @4xl:w-1/2 @8xl:w-1/3',
+        lg: 'w-full @lg:w-full @4xl:w-2/3 @8xl:w-3/4',
+        full: 'w-full',
+    };
+
+    // For backward compatibility, map old numeric widths to new sizes
+    const legacyMap = {
+        25: 'sm',
+        33: 'sm',
+        50: 'md',
+        66: 'md',
+        75: 'lg',
+        100: 'full'
+    };
+
+    const size = typeof width === 'number' ? (legacyMap[width] ?? 'full') : width;
+
+    return sizes[size] ?? sizes.md;
+}
+</script>
+
+<template>
+    <Head :title="__('Dashboard')" />
+
+    <ui-header :title="__('Dashboard')" icon="dashboard" />
+
+    <div class="widgets @container/widgets flex flex-wrap py-2 gap-y-6 -mx-3">
+        <div
+            v-for="widget in widgets"
+            class="min-h-54 px-3 starting-style-transition starting-style-transition--siblings"
+            :class="classes(widget)"
+        >
+            <DynamicHtmlRenderer :html="widget.html" />
+        </div>
+    </div>
+
+    <ui-docs-callout :topic="__('Widgets')" url="widgets" />
+</template>
diff --git a/resources/js/pages/auth/ConfirmPassword.vue b/resources/js/pages/auth/ConfirmPassword.vue
new file mode 100644
index 00000000000..15b4ce75f09
--- /dev/null
+++ b/resources/js/pages/auth/ConfirmPassword.vue
@@ -0,0 +1,47 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import { AuthCard, Input, Field, Button, Description } from '@ui';
+import { computed } from 'vue';
+import { Form } from '@inertiajs/vue3';
+
+const props = defineProps(['method', 'status', 'submitUrl', 'resendUrl']);
+const isConfirmingPassword = computed(() => props.method === 'password_confirmation');
+const isUsingVerificationCode = computed(() => props.method === 'verification_code');
+</script>
+
+<template>
+    <Head :title="__('Confirm Password')" />
+
+    <AuthCard
+        icon="key"
+        class="max-w-md mx-auto mt-8"
+        :title="isConfirmingPassword ? __('Confirm Your Password') : __('Verification Code')"
+        :description="isConfirmingPassword
+            ? __('statamic::messages.elevated_session_enter_password')
+            : __('statamic::messages.elevated_session_enter_verification_code')"
+    >
+        <Description v-if="status" variant="success" :text="status" class="mb-6" />
+
+        <Form method="post" :action="submitUrl" class="flex flex-col gap-6" v-slot="{ errors }">
+            <Field v-if="isConfirmingPassword" :label="__('Password')" :error="errors.password">
+                <Input name="password" type="password" viewable autofocus />
+            </Field>
+
+            <Field v-if="isUsingVerificationCode" :label="__('Verification Code')" :error="errors.verification_code">
+                <Input name="verification_code" autofocus />
+            </Field>
+
+            <div class="flex items-center gap-4">
+                <Button type="submit" variant="primary" :text="__('Submit')" class="flex-1" />
+
+                <Button
+                    v-if="isUsingVerificationCode"
+                    as="href"
+                    class="flex-1"
+                    :href="resendUrl"
+                    :text="__('Resend code')"
+                />
+            </div>
+        </Form>
+    </AuthCard>
+</template>
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
new file mode 100644
index 00000000000..9f0f07685d5
--- /dev/null
+++ b/resources/js/pages/auth/Login.vue
@@ -0,0 +1,96 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import Outside from '@/pages/layout/Outside.vue';
+import { AuthCard, Input, Field, Button, Separator, Checkbox } from '@ui';
+import { Link, router } from '@inertiajs/vue3';
+import { computed, ref, watch } from 'vue';
+
+defineOptions({ layout: Outside });
+
+const props = defineProps([
+    'errors',
+    'emailLoginEnabled',
+    'oauthEnabled',
+    'providers',
+    'referer',
+    'submitUrl',
+    'forgotPasswordUrl',
+])
+
+const errors = ref(props.errors);
+watch(() => props.errors, (newErrors) => errors.value = newErrors);
+
+const email = ref('');
+const password = ref('');
+const remember = ref(false);
+const processing = ref(false);
+const shaking = computed(() => Object.keys(errors.value).length ? 'animation-shake' : '');
+
+const submit = () => {
+    processing.value = true;
+    router.post(props.submitUrl, {
+        email: email.value,
+        password: password.value,
+        remember: remember.value
+    }, {
+        onBefore: () => {
+            processing.value = true;
+            errors.value = {};
+        },
+        onSuccess: () => window.location.href = props.referer,
+        onError: () => processing.value = false
+    });
+}
+</script>
+
+<template>
+    <Head :title="__('Log in')" />
+    <AuthCard
+        icon="sign-in"
+        :title="emailLoginEnabled ? __('Sign in with email') : __('Sign in with OAuth')"
+        :description="__('Sign into your Statamic Control Panel')"
+        :class="[shaking]"
+    >
+        <div>
+            <form
+                v-if="emailLoginEnabled"
+                @submit.prevent="submit"
+                class="flex flex-col gap-6"
+            >
+                <Field :label="__('Email')" :error="errors?.email">
+                    <Input v-model="email" name="email" autofocus tabindex="1" />
+                </Field>
+
+                <Field :label="__('Password')" :error="errors?.password">
+                    <Input v-model="password" name="password" type="password" tabindex="2" />
+                    <template #actions>
+                        <Link
+                            :href="forgotPasswordUrl"
+                            class="text-blue-400 text-sm hover:text-blue-600"
+                            tabindex="6"
+                            v-text="__('Forgot password?')"
+                        />
+                    </template>
+                </Field>
+
+                <Checkbox v-model="remember" name="remember" :label="__('Remember me')" tabindex="4" />
+
+                <Button type="submit" variant="primary" :disabled="processing" :text="__('Continue')" tabindex="5" />
+            </form>
+
+            <template v-if="oauthEnabled">
+                <Separator v-if="emailLoginEnabled" variant="dots" :text="__('Or sign in with')" class="py-3" />
+                <div class="flex gap-4 justify-center items-center">
+                    <Button
+                        v-for="provider in providers"
+                        :key="provider.name"
+                        as="href"
+                        class="flex-1"
+                        :href="provider.url"
+                        :icon="provider.icon"
+                    />
+                </div>
+            </template>
+        </div>
+    </AuthCard>
+</template>
diff --git a/resources/js/pages/auth/Unauthorized.vue b/resources/js/pages/auth/Unauthorized.vue
new file mode 100644
index 00000000000..cf83538f7ad
--- /dev/null
+++ b/resources/js/pages/auth/Unauthorized.vue
@@ -0,0 +1,30 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import Outside from '@/pages/layout/Outside.vue';
+import { AuthCard, Button } from '@ui';
+import { Link } from '@inertiajs/vue3';
+
+defineOptions({ layout: Outside });
+
+defineProps(['isLoggedIn', 'loginUrl', 'logoutUrl']);
+</script>
+
+<template>
+    <Head :title="__('Unauthorized')" />
+
+    <AuthCard
+        icon="key"
+        :title="__('Unauthorized')"
+        :description="__('You do not have permission to access this URL')"
+    >
+        <div class="flex justify-center">
+            <Button
+                :as="Link"
+                variant="primary"
+                :href="isLoggedIn ? logoutUrl : loginUrl"
+                class="w-full"
+                v-text="isLoggedIn ? __('Log out') : __('Log in')"
+            />
+        </div>
+    </AuthCard>
+</template>
diff --git a/resources/js/pages/auth/passwords/Email.vue b/resources/js/pages/auth/passwords/Email.vue
new file mode 100644
index 00000000000..5e0521f2963
--- /dev/null
+++ b/resources/js/pages/auth/passwords/Email.vue
@@ -0,0 +1,54 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import Outside from '@/pages/layout/Outside.vue';
+import { AuthCard, Heading, Description, Icon, Card, Input, Field, Button } from '@ui';
+import { Link, Form } from '@inertiajs/vue3';
+
+defineOptions({ layout: Outside });
+
+defineProps(['action', 'loginUrl']);
+</script>
+
+<template>
+    <Head :title="__('Reset Password')" />
+    <AuthCard>
+        <Form
+            method="post"
+            :action="action"
+            error-bag="user.forgot_password"
+            v-slot="{ errors, wasSuccessful }"
+        >
+            <header class="flex flex-col justify-center items-center mb-8 py-3">
+                <template v-if="!wasSuccessful">
+                    <Card class="p-2! mb-4 flex items-center justify-center">
+                        <Icon name="key" class="size-5" />
+                    </Card>
+                    <Heading :level="1" size="xl" :text="__('Reset Your Password')" />
+                    <Description :text="__('statamic::messages.forgot_password_enter_email')" class="text-center" />
+                </template>
+                <template v-if="wasSuccessful">
+                    <Card class="p-2! mb-4 flex items-center justify-center">
+                        <Icon name="mail-check" class="size-5" />
+                    </Card>
+                    <Heading :level="1" size="xl" :text="__('Password Reset Sent')" />
+                    <Description :text="__('statamic::messages.forgot_password_sent')" class="text-center" />
+                </template>
+            </header>
+            <div class="flex flex-col gap-6" v-if="!wasSuccessful">
+                <Field :label="__('Email Address')" :error="errors.email">
+                    <Input name="email" autofocus type="email" />
+                </Field>
+                <Button type="submit" variant="primary" :text="__('Submit')" />
+            </div>
+        </Form>
+
+    </AuthCard>
+
+    <div class="mt-4 w-full text-center dark:mt-6">
+        <Link
+            :href="loginUrl"
+            class="text-blue-400 text-sm hover:text-blue-600"
+            v-text="__('I remember my password')"
+        />
+    </div>
+</template>
diff --git a/resources/js/pages/auth/passwords/Reset.vue b/resources/js/pages/auth/passwords/Reset.vue
new file mode 100644
index 00000000000..eb100afcb85
--- /dev/null
+++ b/resources/js/pages/auth/passwords/Reset.vue
@@ -0,0 +1,75 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import Outside from '@/pages/layout/Outside.vue';
+import { AuthCard, Heading, Description, Icon, Card, Input, Field, Button } from '@ui';
+import { Link, Form, router } from '@inertiajs/vue3';
+import { computed, ref, watch } from 'vue';
+
+defineOptions({ layout: Outside });
+
+const props = defineProps(['errors', 'action', 'token', 'email', 'redirect', 'title', 'loginUrl']);
+
+const errors = ref(props.errors);
+watch(() => props.errors, (newErrors) => errors.value = newErrors);
+
+const email = ref(props.email);
+const password = ref('');
+const passwordConfirmation = ref('');
+const processing = ref(false);
+
+const submit = () => {
+    processing.value = true;
+    router.post(props.action, {
+        email: email.value,
+        password: password.value,
+        password_confirmation: passwordConfirmation.value,
+        token: props.token,
+        redirect: props.redirect,
+    }, {
+        onBefore: () => {
+            processing.value = true;
+            errors.value = {};
+        },
+        onSuccess: (e) => {
+            return window.location.href = e.url;
+        },
+        onError: () => processing.value = false
+    });
+}
+</script>
+
+<template>
+    <Head :title="title" />
+    <AuthCard
+        icon="key"
+        :title="title"
+        :description="__('statamic::messages.set_new_password_instructions')"
+    >
+        <form
+            @submit.prevent="submit"
+            class="flex flex-col gap-6"
+        >
+            <Field :label="__('Email Address')" :error="errors?.email">
+                <Input v-model="email" autofocus type="email" />
+            </Field>
+
+            <Field :label="__('Password')" :error="errors?.password">
+                <Input v-model="password" type="password" />
+            </Field>
+
+            <Field :label="__('Confirm Password')" :error="errors?.password_confirmation">
+                <Input v-model="passwordConfirmation" type="password" />
+            </Field>
+
+            <Button type="submit" variant="primary" :text="title" />
+        </form>
+    </AuthCard>
+
+    <div class="mt-4 w-full text-center dark:mt-6">
+        <Link
+            :href="loginUrl"
+            class="text-blue-400 text-sm hover:text-blue-600"
+            v-text="__('Back to login')"
+        />
+    </div>
+</template>
diff --git a/resources/js/pages/auth/protect/Password.vue b/resources/js/pages/auth/protect/Password.vue
new file mode 100644
index 00000000000..99f237d2712
--- /dev/null
+++ b/resources/js/pages/auth/protect/Password.vue
@@ -0,0 +1,62 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import Outside from '@/pages/layout/Outside.vue';
+import { AuthCard, Input, Field, Button, ErrorMessage } from '@ui';
+import { router } from '@inertiajs/vue3';
+import { computed, ref, watch } from 'vue';
+
+defineOptions({ layout: Outside });
+
+const props = defineProps(['errors', 'token', 'submitUrl']);
+
+const processing = ref(false);
+const password = ref('');
+const errors = ref(props.errors?.passwordProtect || {});
+watch(() => props.errors, (newErrors) => errors.value = newErrors.passwordProtect);
+const shaking = computed(() => Object.keys(errors.value).length ? 'animation-shake' : '');
+
+const submit = () => {
+    processing.value = true;
+    router.post(props.submitUrl, {
+        password: password.value,
+        token: props.token
+    }, {
+        onBefore: () => {
+            processing.value = true;
+            errors.value = {};
+        },
+        onSuccess: () => {
+            return false;
+        },
+        onError: () => processing.value = false
+    });
+}
+</script>
+
+<template>
+    <Head :title="__('Protected Page')" />
+    <AuthCard
+        icon="key"
+        :title="__('Protected Page')"
+        :description="token ? __('statamic::messages.password_protect_enter_password') : __('statamic::messages.password_protect_token_missing')"
+        :class="[shaking]"
+    >
+        <form
+            @submit.prevent="submit"
+            class="flex flex-col gap-6"
+        >
+            <Field :error="errors?.password">
+                <Input
+                    type="password"
+                    v-model="password"
+                    autofocus
+                    :placeholder="__('statamic::messages.password_protect_enter_password')"
+                />
+            </Field>
+
+            <ErrorMessage v-if="errors?.token" :text="errors?.token" />
+
+            <Button type="submit" variant="primary" class="w-full" :text="__('Submit')" />
+        </form>
+    </AuthCard>
+</template>
diff --git a/resources/js/pages/auth/two-factor/Challenge.vue b/resources/js/pages/auth/two-factor/Challenge.vue
new file mode 100644
index 00000000000..b39424f891e
--- /dev/null
+++ b/resources/js/pages/auth/two-factor/Challenge.vue
@@ -0,0 +1,85 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import Outside from '@/pages/layout/Outside.vue';
+import { AuthCard, Field, Input, Button } from '@statamic/ui';
+import { computed, ref, watch } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+defineOptions({ layout: Outside });
+
+const props = defineProps(['errors', 'mode', 'action', 'redirect']);
+
+const errors = ref(props.errors);
+watch(() => props.errors, (newErrors) => errors.value = newErrors);
+
+const mode = ref(props.mode);
+const code = ref('');
+const recoveryCode = ref('');
+const processing = ref(false);
+const shaking = computed(() => Object.keys(errors.value).length ? 'animation-shake' : '');
+
+const submit = () => {
+    processing.value = true;
+    router.post(props.action, {
+        code: code.value,
+        recovery_code: recoveryCode.value,
+        redirect: props.redirect,
+    }, {
+        onBefore: () => {
+            processing.value = true;
+            errors.value = {};
+        },
+        onSuccess: (response) => window.location.href = response.url,
+        onError: () => processing.value = false
+    });
+}
+</script>
+
+<template>
+    <Head :title="__('Two-Factor Authentication')" />
+    <AuthCard
+        icon="phone-lock"
+        :title="__('Two-Factor Authentication')"
+        :description="mode === 'code'
+            ? __('statamic::messages.two_factor_challenge_code_instructions')
+            : __('statamic::messages.two_factor_recovery_code_instructions')"
+        :class="[shaking]"
+    >
+        <form
+            @submit.prevent="submit"
+            class="flex flex-col gap-6"
+        >
+            <Field v-if="mode === 'code'" :label="__('Code')" :error="errors.code">
+                <Input
+                    type="text"
+                    v-model="code"
+                    pattern="[0-9]*"
+                    maxlength="6"
+                    inputmode="numeric"
+                    autofocus
+                    autocomplete="one-time-code"
+                />
+            </Field>
+
+            <Field v-if="mode === 'recovery_code'" :label="__('Recovery Code')" :error="errors.recovery_code">
+                <Input
+                    type="text"
+                    v-model="recoveryCode"
+                    maxlength="21"
+                    autofocus
+                    autocomplete="off"
+                />
+            </Field>
+
+            <Button type="submit" variant="primary" :disabled="processing" :loading="processing" class="w-full">{{ __('Continue') }}</Button>
+
+            <button v-if="mode === 'code'" class="cursor-pointer text-xs text-gray-500 hover:text-gray-900" type="button" @click="mode = 'recovery_code'">
+                {{ __('Use recovery code') }}
+            </button>
+
+            <button v-if="mode === 'recovery_code'" class="cursor-pointer text-xs text-gray-500 hover:text-gray-900" type="button" @click="mode = 'code'">
+                {{ __('Use one-time code') }}
+            </button>
+        </form>
+    </AuthCard>
+</template>
diff --git a/resources/js/pages/auth/two-factor/Setup.vue b/resources/js/pages/auth/two-factor/Setup.vue
new file mode 100644
index 00000000000..e3deb6bc6aa
--- /dev/null
+++ b/resources/js/pages/auth/two-factor/Setup.vue
@@ -0,0 +1,37 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import Outside from '@/pages/layout/Outside.vue';
+import TwoFactorSetup from '@/components/two-factor/Setup.vue';
+import { AuthCard, Button } from '@ui';
+import { ref } from 'vue';
+
+defineOptions({ layout: Outside });
+
+const props = defineProps(['routes', 'redirect']);
+
+const setupModalOpen = ref(false);
+
+function setupComplete() {
+    window.location.href = props.redirect;
+}
+</script>
+
+<template>
+    <Head :title="__('Two-Factor Authentication')" />
+
+    <AuthCard
+        icon="phone-lock"
+        :title="__('Set up Two Factor Authentication')"
+        :description="__('statamic::messages.two_factor_account_requirement')"
+    >
+        <Button variant="primary" @click="setupModalOpen = true" :text="__('Set up')" class="w-full" />
+
+        <TwoFactorSetup
+            v-if="setupModalOpen"
+            :enable-url="routes.enable"
+            :recovery-code-urls="routes.recovery_codes"
+            @close="setupModalOpen = false"
+            @setup-complete="setupComplete"
+        />
+    </AuthCard>
+</template>
diff --git a/resources/js/pages/collections/Empty.vue b/resources/js/pages/collections/Empty.vue
new file mode 100644
index 00000000000..16f14cc200d
--- /dev/null
+++ b/resources/js/pages/collections/Empty.vue
@@ -0,0 +1,79 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+
+const props = defineProps([
+    'title',
+    'blueprints',
+    'canEdit',
+    'editUrl',
+    'canEditBlueprints',
+    'canCreate',
+    'createLabel',
+    'createEntryUrl',
+    'blueprintsUrl',
+    'scaffoldUrl',
+])
+</script>
+
+<template>
+    <Head :title="[__(title), __('Collections')]" />
+
+    <header class="py-8 mt-8 text-center starting-style-transition" v-cloak>
+        <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-3">
+            <ui-icon name="collections" class="size-5 text-gray-500"></ui-icon>
+            <span v-text="__(title)" />
+        </h1>
+    </header>
+
+    <ui-empty-state-menu :heading="__('Start designing your collection with these steps')">
+        <ui-empty-state-item
+            v-if="canEdit"
+            :href="editUrl"
+            icon="configure"
+            :heading="__('Configure Collection')"
+            :description="__('statamic::messages.collection_next_steps_configure_description')"
+        />
+
+        <template v-if="canCreate">
+            <ui-empty-state-item
+                v-if="blueprints.length > 1"
+                icon="fieldtype-entries"
+                :heading="createLabel"
+                :description="__('statamic::messages.collection_next_steps_create_entry_description')"
+            >
+                <a
+                    v-for="blueprint in blueprints"
+                    :href="blueprint.createEntryUrl"
+                    class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2"
+                    v-text="blueprint.title"
+                />
+            </ui-empty-state-item>
+
+            <ui-empty-state-item
+                v-else
+                :href="createEntryUrl"
+                icon="fieldtype-entries"
+                :heading="createLabel"
+                :description="__('statamic::messages.collection_next_steps_create_entry_description')"
+            />
+        </template>
+
+        <ui-empty-state-item
+            v-if="canEditBlueprints"
+            :href="blueprintsUrl"
+            icon="blueprints"
+            :heading="__('Configure Blueprints')"
+            :description="__('statamic::messages.collection_next_steps_blueprints_description')"
+        />
+
+        <ui-empty-state-item
+            v-if="canEdit"
+            :href="scaffoldUrl"
+            icon="scaffold"
+            :heading="__('Scaffold Views')"
+            :description="__('statamic::messages.collection_next_steps_scaffold_description')"
+        />
+    </ui-empty-state-menu>
+
+    <ui-docs-callout :topic="__('Collections')" url="collections" />
+</template>
diff --git a/resources/js/pages/collections/Index.vue b/resources/js/pages/collections/Index.vue
new file mode 100644
index 00000000000..d72e03968bf
--- /dev/null
+++ b/resources/js/pages/collections/Index.vue
@@ -0,0 +1,43 @@
+<script setup>
+import Listing from '@/components/collections/Listing.vue';
+import { Icon, EmptyStateMenu, EmptyStateItem, DocsCallout } from '@ui';
+
+const props = defineProps({
+    collections: Array,
+    columns: Array,
+    createUrl: String,
+    actionUrl: String,
+    canCreate: Boolean,
+});
+</script>
+
+<template>
+    <Listing
+        v-if="collections.length"
+        :initial-rows="collections"
+        :initial-columns="columns"
+        :can-create-collections="canCreate"
+        :create-url="createUrl"
+        :action-url="actionUrl"
+    />
+
+    <template v-else>
+        <header class="py-8 mt-8 text-center">
+            <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-3">
+                <Icon name="collections" class="size-5 text-gray-500" />
+                {{ __('Collections') }}
+            </h1>
+        </header>
+
+        <EmptyStateMenu :heading="__('statamic::messages.collection_configure_intro')">
+            <EmptyStateItem
+                :href="createUrl"
+                icon="collections"
+                :heading="__('Create Collection')"
+                :description="__('Get started by creating your first collection.')"
+            />
+        </EmptyStateMenu>
+    </template>
+
+    <DocsCallout :topic="__('Collections')" url="collections" />
+</template>
diff --git a/resources/js/components/collections/View.vue b/resources/js/pages/collections/Show.vue
similarity index 96%
rename from resources/js/components/collections/View.vue
rename to resources/js/pages/collections/Show.vue
index 5def42d01bb..4589d80746f 100644
--- a/resources/js/components/collections/View.vue
+++ b/resources/js/pages/collections/Show.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <Head :title="[__(title), __('Collections')]" />
         <Header :title="__(title)" :icon="icon">
             <ItemActions
                 ref="actions"
@@ -76,7 +77,6 @@
 
             <create-entry-button
                 v-if="!reordering && canCreate"
-                :url="createUrl"
                 :blueprints="blueprints"
                 :text="createLabel"
                 :command-palette="true"
@@ -169,15 +169,17 @@
 </template>
 
 <script>
-import DeleteEntryConfirmation from './DeleteEntryConfirmation.vue';
-import DeleteLocalizationConfirmation from './DeleteLocalizationConfirmation.vue';
-import SiteSelector from '../SiteSelector.vue';
+import DeleteEntryConfirmation from '@/components/collections/DeleteEntryConfirmation.vue';
+import DeleteLocalizationConfirmation from '@/components/collections/DeleteLocalizationConfirmation.vue';
+import SiteSelector from '@/components/SiteSelector.vue';
 import { defineAsyncComponent } from 'vue';
 import { Dropdown, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, Header, Button, ToggleGroup, ToggleItem } from '@/components/ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
+import Head from '@/pages/layout/Head.vue';
 
 export default {
     components: {
+        Head,
         DropdownSeparator,
         DropdownItem,
         DropdownLabel,
@@ -188,7 +190,7 @@ export default {
         Button,
         ToggleGroup,
         ToggleItem,
-        PageTree: defineAsyncComponent(() => import('../structures/PageTree.vue')),
+        PageTree: defineAsyncComponent(() => import('@/components/structures/PageTree.vue')),
         DeleteEntryConfirmation,
         DeleteLocalizationConfirmation,
         SiteSelector,
diff --git a/resources/js/components/entries/BaseCreateForm.vue b/resources/js/pages/entries/Create.vue
similarity index 58%
rename from resources/js/components/entries/BaseCreateForm.vue
rename to resources/js/pages/entries/Create.vue
index 57de25c097b..3dc83374503 100644
--- a/resources/js/components/entries/BaseCreateForm.vue
+++ b/resources/js/pages/entries/Create.vue
@@ -1,4 +1,36 @@
+
+<script setup>
+import EntryPublishForm from '@/components/entries/PublishForm.vue';
+import { router } from '@inertiajs/vue3';
+
+defineProps([
+    'actions',
+    'collectionHandle',
+    'collectionCreateLabel',
+    'collectionHasRoutes',
+    'blueprint',
+    'values',
+    'extraValues',
+    'meta',
+    'localizations',
+    'revisions',
+    'site',
+    'parent',
+    'canManagePublishState',
+    'canEditBlueprint',
+    'createAnotherUrl',
+    'listingUrl',
+    'previewTargets',
+]);
+
+function saved(response) {
+    router.get(response.data.data.edit_url + '?created=true');
+}
+</script>
+
 <template>
+    <Head :title="collectionCreateLabel" />
+
     <entry-publish-form
         :is-creating="true"
         publish-container="base"
@@ -7,7 +39,7 @@
         :initial-title="collectionCreateLabel"
         :collection-handle="collectionHandle"
         :collection-has-routes="collectionHasRoutes"
-        :initial-fieldset="fieldset"
+        :initial-fieldset="blueprint"
         :initial-values="values"
         :initial-extra-values="extraValues"
         :initial-meta="meta"
@@ -25,33 +57,3 @@
         @saved="saved"
     ></entry-publish-form>
 </template>
-
-<script>
-export default {
-    props: [
-        'actions',
-        'collectionHandle',
-        'collectionCreateLabel',
-        'collectionHasRoutes',
-        'fieldset',
-        'values',
-        'extraValues',
-        'meta',
-        'localizations',
-        'revisions',
-        'site',
-        'parent',
-        'canManagePublishState',
-        'canEditBlueprint',
-        'createAnotherUrl',
-        'listingUrl',
-        'previewTargets',
-    ],
-
-    methods: {
-        saved(response) {
-            window.location = response.data.data.edit_url + '?created=true';
-        },
-    },
-};
-</script>
diff --git a/resources/js/pages/entries/Edit.vue b/resources/js/pages/entries/Edit.vue
new file mode 100644
index 00000000000..2738470f5ab
--- /dev/null
+++ b/resources/js/pages/entries/Edit.vue
@@ -0,0 +1,69 @@
+<script setup>
+import EntryPublishForm from '@/components/entries/PublishForm.vue';
+
+defineProps([
+    'actions',
+    'collection',
+    'collectionHasRoutes',
+    'title',
+    'reference',
+    'blueprint',
+    'values',
+    'extraValues',
+    'localizedFields',
+    'meta',
+    'permalink',
+    'originBehavior',
+    'localizations',
+    'hasOrigin',
+    'originValues',
+    'originMeta',
+    'locale',
+    'hasWorkingCopy',
+    'revisionsEnabled',
+    'readOnly',
+    'canEditBlueprint',
+    'canManagePublishState',
+    'createAnotherUrl',
+    'initialListingUrl',
+    'previewTargets',
+    'autosaveInterval',
+    'itemActions',
+    'itemActionUrl',
+])
+</script>
+
+<template>
+    <EntryPublishForm
+        publish-container="base"
+        :initial-actions="actions"
+        method="patch"
+        :collection-handle="collection"
+        :collection-has-routes="collectionHasRoutes"
+        :initial-title="title"
+        :initial-reference="reference"
+        :initial-fieldset="blueprint"
+        :initial-values="values"
+        :initial-extra-values="extraValues"
+        :initial-localized-fields="localizedFields"
+        :initial-meta="meta"
+        :initial-permalink="permalink"
+        :origin-behavior="originBehavior"
+        :initial-localizations="localizations"
+        :initial-has-origin="hasOrigin"
+        :initial-origin-values="originValues"
+        :initial-origin-meta="originMeta"
+        :initial-site="locale"
+        :initial-is-working-copy="hasWorkingCopy"
+        :revisions-enabled="revisionsEnabled"
+        :initial-read-only="readOnly"
+        :can-edit-blueprint="canEditBlueprint"
+        :can-manage-publish-state="canManagePublishState"
+        :create-another-url="createAnotherUrl"
+        :initial-listing-url="initialListingUrl"
+        :preview-targets="previewTargets"
+        :autosave-interval="autosaveInterval"
+        :initial-item-actions="itemActions"
+        :item-action-url="itemActionUrl"
+    />
+</template>
diff --git a/resources/js/pages/errors/404.vue b/resources/js/pages/errors/404.vue
new file mode 100644
index 00000000000..75012e5d2dc
--- /dev/null
+++ b/resources/js/pages/errors/404.vue
@@ -0,0 +1,12 @@
+<script setup>
+import { Card, Heading, Description } from '@ui';
+</script>
+
+<template>
+    <div class="flex min-h-screen flex-col items-center justify-center">
+        <Card class="text-center flex flex-col items-center space-y-2">
+            <Heading size="2xl" :text="__('404')" />
+            <Description :text="__('The page you are looking for could not be found.')" />
+        </Card>
+    </div>
+</template>
diff --git a/resources/js/pages/errors/Error.vue b/resources/js/pages/errors/Error.vue
new file mode 100644
index 00000000000..315e91cedf4
--- /dev/null
+++ b/resources/js/pages/errors/Error.vue
@@ -0,0 +1,18 @@
+<script setup>
+import { Card, Heading, Description } from '@ui';
+import Blank from '@/pages/layout/Blank.vue';
+import useBodyClasses from '@/pages/layout/body-classes.js';
+
+defineOptions({ layout: Blank })
+defineProps(['status'])
+useBodyClasses('bg-gray-50 dark:bg-gray-900');
+</script>
+
+<template>
+    <div class="flex min-h-screen flex-col items-center justify-center">
+        <Card class="text-center flex flex-col items-center space-y-2">
+            <Heading size="2xl" :text="__('Whoops!')" />
+            <Description :text="`${__('Something went wrong')} (${status})`" />
+        </Card>
+    </div>
+</template>
diff --git a/resources/js/pages/layout/Blank.vue b/resources/js/pages/layout/Blank.vue
new file mode 100644
index 00000000000..8c48458d970
--- /dev/null
+++ b/resources/js/pages/layout/Blank.vue
@@ -0,0 +1,5 @@
+<script setup>
+</script>
+<template>
+    <slot />
+</template>
diff --git a/resources/js/pages/layout/Head.vue b/resources/js/pages/layout/Head.vue
new file mode 100644
index 00000000000..a73c342c004
--- /dev/null
+++ b/resources/js/pages/layout/Head.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Head } from '@inertiajs/vue3';
+
+const props = defineProps<{
+    title?: string | string[];
+}>();
+
+const title = computed(() => {
+    let title = props.title;
+    if (typeof title === 'string') title = [title];
+    title.push(Statamic.$config.get('cmsName'));
+    const divider = Statamic.$config.get('direction') === 'ltr' ? '‹' : '›';
+    return title.join(` ${divider} `);
+});
+</script>
+
+<template>
+    <Head :title="title">
+        <slot />
+    </Head>
+</template>
diff --git a/resources/js/pages/layout/Layout.vue b/resources/js/pages/layout/Layout.vue
new file mode 100644
index 00000000000..b375f6766af
--- /dev/null
+++ b/resources/js/pages/layout/Layout.vue
@@ -0,0 +1,63 @@
+<script setup>
+import Header from '@/components/global-header/Header.vue';
+import Nav from '@/components/nav/Nav.vue';
+import { ConfigProvider } from 'reka-ui';
+import SessionExpiry from '@/components/SessionExpiry.vue';
+import LicensingAlert from '@/components/LicensingAlert.vue';
+import PortalTargets from '@/components/portals/PortalTargets.vue';
+import { provide, watch, ref } from 'vue';
+import useBodyClasses from './body-classes.js';
+
+useBodyClasses('bg-global-header-bg dark:bg-dark-global-header-bg font-sans leading-normal text-gray-900 dark:text-white');
+
+const props = defineProps({
+    architecturalBackground: { type: Boolean, default: false },
+    additionalBreadcrumbs: { type: Array, default: () => [] },
+});
+
+const additionalBreadcrumbs = ref(props.additionalBreadcrumbs);
+watch(() => props.additionalBreadcrumbs, (newVal) => additionalBreadcrumbs.value = newVal);
+
+provide('layout', {
+    additionalBreadcrumbs,
+});
+</script>
+
+<template>
+    <ConfigProvider>
+        <SessionExpiry />
+        <LicensingAlert />
+        <Header />
+
+        <main id="main" class="flex bg-body-bg dark:bg-dark-body-bg dark:border-t rounded-t-2xl dark:border-dark-body-border fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
+            <Nav />
+            <div id="main-content" class="main-content p-2 h-full flex-1 overflow-y-auto rounded-t-2xl">
+                <div class="relative content-card min-h-full" :class="{'bg-architectural-lines': architecturalBackground}">
+                    <slot />
+                </div>
+            </div>
+        </main>
+
+        <Component
+            v-for="component in $root.appendedComponents"
+            :key="component.id"
+            :is="component.name"
+            v-bind="component.props"
+            v-on="component.events"
+        />
+
+        <confirmation-modal
+            v-if="$root.copyToClipboardModalUrl"
+            :cancellable="false"
+            :button-text="__('OK')"
+            :title="__('Copy to clipboard')"
+            @confirm="$root.copyToClipboardModalUrl = null"
+        >
+            <div class="prose">
+                <ui-input :model-value="$root.copyToClipboardModalUrl" readonly copyable class="font-mono text-sm dark" />
+            </div>
+        </confirmation-modal>
+
+        <PortalTargets />
+    </ConfigProvider>
+</template>
diff --git a/resources/js/pages/layout/Outside.vue b/resources/js/pages/layout/Outside.vue
new file mode 100644
index 00000000000..0458e1d7958
--- /dev/null
+++ b/resources/js/pages/layout/Outside.vue
@@ -0,0 +1,38 @@
+<script setup>
+import StatamicLogo from '@/../svg/statamic-logo-lime.svg';
+import useBodyClasses from './body-classes.js';
+import useStatamicPageProps from '@/composables/page-props.js';
+
+useBodyClasses('bg-gray-50 font-sans leading-normal scheme-light p-2');
+const { logos, cmsName } = useStatamicPageProps();
+const customLogo = logos.light.outside ?? logos.dark.outside ?? null;
+const lightCustomLogo = logos.light.outside ?? null;
+const darkCustomLogo = logos.dark.outside ?? logos.light.outside ?? null;
+</script>
+
+<template>
+    <div class="relative mx-auto max-w-[400px] items-center justify-center">
+        <div class="flex items-center justify-center py-6">
+            <div class="logo relative z-10 max-w-3/4 md:pt-18">
+                <template v-if="customLogo">
+                    <img
+                        :src="lightCustomLogo"
+                        :alt="cmsName"
+                        class="white-label-logo dark:hidden"
+                    />
+                    <img
+                        :src="darkCustomLogo"
+                        :alt="cmsName"
+                        class="white-label-logo hidden dark:block"
+                    />
+                </template>
+                <div
+                    v-else-if="logos.text"
+                    class="mx-auto mb-8 max-w-xs text-center text-lg font-medium opacity-50"
+                    v-text="logos.text" />
+                <StatamicLogo v-else class="h-6" />
+            </div>
+        </div>
+        <slot />
+    </div>
+</template>
diff --git a/resources/js/pages/layout/body-classes.js b/resources/js/pages/layout/body-classes.js
new file mode 100644
index 00000000000..acc9aff0e00
--- /dev/null
+++ b/resources/js/pages/layout/body-classes.js
@@ -0,0 +1,7 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export default function useBodyClasses(bodyClasses) {
+    bodyClasses = bodyClasses.split(' ');
+    onMounted(() => document.body.classList.add(...bodyClasses));
+    onUnmounted(() => document.body.classList.remove(...bodyClasses));
+}
diff --git a/resources/js/pages/sites/Edit.vue b/resources/js/pages/sites/Edit.vue
new file mode 100644
index 00000000000..764c9d33382
--- /dev/null
+++ b/resources/js/pages/sites/Edit.vue
@@ -0,0 +1,22 @@
+<script setup>
+import Head from '@/pages/layout/Head.vue';
+import Form from '@/components/sites/EditForm.vue';
+import { DocsCallout } from '@ui';
+
+defineProps(['blueprint', 'values', 'meta', 'updateUrl']);
+</script>
+
+<template>
+    <Head :title="__('Configure Sites')" />
+
+    <div class="max-w-5xl mx-auto">
+        <Form
+            :blueprint="blueprint"
+            :initial-values="values"
+            :meta="meta"
+            :url="updateUrl"
+        />
+
+        <DocsCallout :topic="__('Multi-Site')" url="multi-site" />
+    </div>
+</template>
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index d4a904fe623..580b72d412a 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -148,6 +148,7 @@ it('exports ui', async () => {
         'Avatar',
         'CommandPaletteItem',
         'CreateForm',
+        'DocsCallout',
         'Listing',
         'ListingCustomizeColumns',
         'ListingFilters',
diff --git a/resources/js/util/clone.js b/resources/js/util/clone.js
index 57986d1aa49..7f139ff156c 100644
--- a/resources/js/util/clone.js
+++ b/resources/js/util/clone.js
@@ -1,4 +1,4 @@
-export default function (value) {
+export default function clone(value) {
     if (Array.isArray(value)) {
         return [...value];
     } else if (value !== null && typeof value === 'object') {
@@ -6,3 +6,14 @@ export default function (value) {
     }
     return value;
 }
+
+export function deepClone(value) {
+    if (Array.isArray(value)) {
+        return value.map(item => deepClone(item));
+    } else if (value !== null && typeof value === 'object') {
+        return Object.fromEntries(
+            Object.entries(value).map(([key, val]) => [key, deepClone(val)])
+        );
+    }
+    return value;
+}
diff --git a/resources/views/auth/confirm-password.blade.php b/resources/views/auth/confirm-password.blade.php
deleted file mode 100644
index 929b14aaa2b..00000000000
--- a/resources/views/auth/confirm-password.blade.php
+++ /dev/null
@@ -1,63 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@inject('str', 'Statamic\Support\Str')
-@extends('statamic::outside')
-@section('title', __('Confirm Password'))
-
-@section('content')
-    <div class="relative mx-auto max-w-[400px] items-center justify-center">
-        <div class="flex items-center justify-center py-6">
-            <x-statamic::outside-logo />
-        </div>
-        <ui-auth-card
-            icon="key"
-            title="{{ $method === 'password_confirmation' ? __('Confirm Your Password') : __('Verification Code') }}"
-            description="{{ $method === 'password_confirmation'
-                ? __('statamic::messages.elevated_session_enter_password')
-                : __('statamic::messages.elevated_session_enter_verification_code') }}"
-        >
-            @if (session('status'))
-                <ui-alert variant="success" :text="session('status')" class="mb-6" />
-            @endif
-
-            <form method="POST" action="{{ cp_route('elevated-session.confirm') }}" class="flex flex-col gap-6">
-                @csrf
-
-                @if ($method === 'password_confirmation')
-                    <ui-field :label="__('Password')" error="{{ $errors->first('password') }}">
-                        <ui-input
-                            name="password"
-                            type="password"
-                            viewable
-                            autofocus
-                        />
-                    </ui-field>
-                @endif
-
-                @if ($method === 'verification_code')
-                    <ui-field :label="__('Verification Code')" error="{{ $errors->first('verification_code') }}">
-                        <ui-input
-                            name="verification_code"
-                            autofocus
-                        />
-                    </ui-field>
-                @endif
-
-                <div class="flex items-center gap-4">
-                    <ui-button type="submit" variant="primary" :text="__('Submit')" class="flex-1"/>
-
-                    @if ($method === 'verification_code')
-                        <ui-button
-                            as="href"
-                            class="flex-1"
-                            href="{{ cp_route('elevated-session.resend-code') }}"
-                            :text="__('Resend code')"
-                        />
-                    @endif
-                </div>
-            </form>
-        </ui-auth-card>
-    </div>
-@endsection
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
deleted file mode 100644
index 0dc0432bf53..00000000000
--- a/resources/views/auth/login.blade.php
+++ /dev/null
@@ -1,77 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@inject('str', 'Statamic\Support\Str')
-@extends('statamic::outside')
-@section('title', __('Log in'))
-
-@section('content')
-
-    <div class="relative mx-auto max-w-[400px] items-center justify-center">
-        <div class="flex items-center justify-center py-6">
-            <x-statamic::outside-logo />
-        </div>
-        <ui-auth-card
-            icon="sign-in"
-            title="{{ $emailLoginEnabled ? __('Sign in with email') : __('Sign in with OAuth') }}"
-            :description="__('Sign into your Statamic Control Panel')"
-        >
-            <login
-                :has-error="{{ $str::bool(count($errors) > 0) }}"
-                v-slot="{ busy, setBusy, hasError }"
-            >
-                <div>
-                    @if ($emailLoginEnabled)
-                        <form method="POST" class="flex flex-col gap-6" @submit="setBusy(true)">
-                            {!! csrf_field() !!}
-
-                            <input type="hidden" name="referer" value="{{ $referer }}" />
-
-
-                            <ui-field :label="__('Email')" error="{{ $errors->first('email') }}">
-                                <ui-input
-                                    name="email"
-                                    value="{{ old('email') }}"
-                                    autofocus
-                                    tabindex="1"
-                                />
-                            </ui-field>
-
-                            <ui-field :label="__('Password')" error="{{ $errors->first('password') }}">
-                                <ui-input
-                                    name="password"
-                                    type="password"
-                                    value="{{ old('password') }}"
-                                    tabindex="2"
-                                />
-                                <template #actions>
-                                    <a href="{{ cp_route('password.request') }}" class="text-blue-400 text-sm hover:text-blue-600" tabindex="6">
-                                        {{ __('Forgot password?') }}
-                                    </a>
-                                </template>
-                            </ui-field>
-
-                            <ui-checkbox name="remember" :label="__('Remember me')" tabindex="4" />
-
-                            <ui-button type="submit" variant="primary" :disabled="busy" :text="__('Continue')" tabindex="5" />
-
-                        </form>
-                    @endif
-                    @if ($oauth)
-                        @if ($emailLoginEnabled)
-                            <ui-separator variant="dots" :text="__('Or sign in with')" class="py-3" />
-                        @endif
-                        <div class="flex gap-4 justify-center items-center">
-                            @foreach ($providers as $provider)
-                                <ui-button as="href" class="flex-1" href="{{ $provider->loginUrl() }}?redirect={{ parse_url(cp_route('index'))['path'] }}">
-                                    @cp_svg("oauth/".$provider->name(), 'size-7')
-                                </ui-button>
-                            @endforeach
-                        </div>
-                    @endif
-                </div>
-            </login>
-        </ui-auth-card>
-    </div>
-@endsection
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
deleted file mode 100644
index aa120127e8e..00000000000
--- a/resources/views/auth/passwords/email.blade.php
+++ /dev/null
@@ -1,56 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@extends('statamic::outside')
-@section('title', __('Reset Password'))
-
-@section('content')
-    <div class="relative mx-auto max-w-[400px] items-center justify-center">
-        <div class="flex items-center justify-center py-6">
-            <x-statamic::outside-logo />
-        </div>
-        <ui-auth-card>
-            <header class="flex flex-col justify-center items-center mb-8 py-3">
-                @if (! old('email'))
-                    <ui-card class="p-2! mb-4 flex items-center justify-center">
-                        <ui-icon name="key" class="size-5" />
-                    </ui-card>
-                    <ui-heading :level="1" size="xl">
-                        {{ __('Reset Your Password') }}
-                    </ui-heading>
-                    <ui-description :text="__('statamic::messages.forgot_password_enter_email')" class="text-center" />
-                @else
-                    <ui-card class="p-2! mb-4 flex items-center justify-center">
-                        <ui-icon name="mail-check" class="size-5" />
-                    </ui-card>
-                    <ui-heading :level="1" size="xl">
-                        {{ __('Password Reset Sent') }}
-                    </ui-heading>
-                    <ui-description :text="__('statamic::messages.forgot_password_sent')" class="text-center" />
-                @endif
-            </header>
-
-            <form method="POST" action="{{ cp_route('password.email') }}" class="flex flex-col gap-6">
-                @csrf
-
-                <ui-field :label="__('Email Address')" error="{{ $errors->first('email') }}">
-                    <ui-input
-                        name="email"
-                        value="{{ old('email') }}"
-                        autofocus
-                        type="email"
-                    />
-                </ui-field>
-
-                <ui-button type="submit" variant="primary" :text="__('Submit')" />
-            </form>
-        </ui-auth-card>
-    </div>
-
-    <div class="mt-4 w-full text-center dark:mt-6">
-        <a href="{{ cp_route('login') }}" class="text-blue-400 text-sm hover:text-blue-600">
-            {{ __('I remember my password') }}
-        </a>
-    </div>
-@endsection
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
deleted file mode 100644
index 518bdb769a5..00000000000
--- a/resources/views/auth/passwords/reset.blade.php
+++ /dev/null
@@ -1,60 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@extends('statamic::outside')
-@section('title', __('Set New Password'))
-
-@section('content')
-    <div class="relative mx-auto max-w-[400px] items-center justify-center">
-        <div class="flex items-center justify-center py-6">
-            <x-statamic::outside-logo />
-        </div>
-        <ui-auth-card
-            icon="key"
-            title="{{ __('Set New Password') }}"
-            :description="__('statamic::messages.set_new_password_instructions')"
-        >
-            <form method="POST" action="{{ $action }}" class="flex flex-col gap-6">
-                @csrf
-
-                <input type="hidden" name="token" value="{{ $token }}" />
-
-                @if (request('redirect'))
-                    <input type="hidden" name="redirect" value="{{ request('redirect') }}" />
-                @endif
-
-                <ui-field :label="__('Email Address')" error="{{ $errors->first('email') }}">
-                    <ui-input
-                        name="email"
-                        value="{{ $email ?? old('email') }}"
-                        autofocus
-                        type="email"
-                    />
-                </ui-field>
-
-                <ui-field :label="__('Password')" error="{{ $errors->first('password') }}">
-                    <ui-input
-                        name="password"
-                        type="password"
-                    />
-                </ui-field>
-
-                <ui-field :label="__('Confirm Password')" error="{{ $errors->first('password_confirmation') }}">
-                    <ui-input
-                        name="password_confirmation"
-                        type="password"
-                    />
-                </ui-field>
-
-                <ui-button type="submit" variant="primary" text="{{ $title }}" />
-            </form>
-        </ui-auth-card>
-    </div>
-
-    <div class="mt-4 w-full text-center dark:mt-6">
-        <a href="{{ cp_route('login') }}" class="text-blue-400 text-sm hover:text-blue-600">
-            {{ __('Back to login') }}
-        </a>
-    </div>
-@endsection
diff --git a/resources/views/auth/protect/password.blade.php b/resources/views/auth/protect/password.blade.php
deleted file mode 100644
index fbd6d988152..00000000000
--- a/resources/views/auth/protect/password.blade.php
+++ /dev/null
@@ -1,38 +0,0 @@
-@extends('statamic::outside')
-
-@section('content')
-
-    <div class="relative mx-auto max-w-[400px] items-center justify-center">
-        <div class="flex items-center justify-center py-6">
-            <x-statamic::outside-logo />
-        </div>
-        <ui-auth-card
-            icon="key"
-            title="{{ __('Protected Page') }}"
-            description="{{ !request()->has('token') ? __('statamic::messages.password_protect_token_missing') : __('statamic::messages.password_protect_enter_password') }}"
-        >
-            <form method="POST" class="flex flex-col gap-6">
-                @csrf
-                <statamic:protect:password-form class="flex flex-col gap-6">
-                    <ui-input
-                        type="password"
-                        name="password"
-                        autofocus
-                        placeholder="{{ __('statamic::messages.password_protect_enter_password') }}"
-                    />
-
-                    <statamic:get_errors:all bag="passwordProtect">
-                        @foreach($messages as $message)
-                            <ui-description class="text-red-600" text="{{ $message['message'] }}" />
-                        @endforeach
-                    </statamic:get_errors:all>
-
-                    <ui-button type="submit" variant="primary" class="w-full">
-                        {{ __('Submit') }}
-                    </ui-button>
-                </statamic:protect:password-form>
-            </form>
-        </ui-auth-card>
-    </div>
-
-@endsection
diff --git a/resources/views/auth/two-factor/challenge.blade.php b/resources/views/auth/two-factor/challenge.blade.php
deleted file mode 100644
index 1d44f5ef4e5..00000000000
--- a/resources/views/auth/two-factor/challenge.blade.php
+++ /dev/null
@@ -1,21 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@inject('str', 'Statamic\Support\Str')
-@extends('statamic::outside')
-@section('title', __('Two-Factor Authentication'))
-
-@section('content')
-    <div class="relative mx-auto max-w-[400px] items-center justify-center">
-        <div class="flex items-center justify-center py-6">
-            <x-statamic::outside-logo />
-        </div>
-        <two-factor-challenge
-            initial-mode="{{ $mode }}"
-            :errors="{{ $errors->isEmpty() ? '{}' : json_encode($errors->getMessages()) }}"
-            csrf-token="{{ csrf_token() }}"
-            redirect="{{ request('redirect') }}"
-        ></two-factor-challenge>
-    </div>
-@endsection
diff --git a/resources/views/auth/two-factor/setup.blade.php b/resources/views/auth/two-factor/setup.blade.php
deleted file mode 100644
index b2fa67d47a2..00000000000
--- a/resources/views/auth/two-factor/setup.blade.php
+++ /dev/null
@@ -1,25 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@inject('str', 'Statamic\Support\Str')
-@extends('statamic::outside')
-@section('title', __('Two-Factor Authentication'))
-
-@section('content')
-    <div class="relative mx-auto max-w-[400px] items-center justify-center scheme-light">
-        <div class="flex items-center justify-center py-6">
-            <x-statamic::outside-logo />
-        </div>
-        <ui-auth-card
-            icon="phone-lock"
-            title="{{ __('Set up Two Factor Authentication') }}"
-            description="{{ __('statamic::messages.two_factor_account_requirement') }}"
-        >
-            <enable-two-factor-authentication
-                :routes="{{ json_encode($routes) }}"
-                redirect="{{ $redirect }}"
-            />
-        </ui-auth-card>
-    </div>
-@endsection
diff --git a/resources/views/auth/unauthorized.blade.php b/resources/views/auth/unauthorized.blade.php
deleted file mode 100644
index e56e35d6646..00000000000
--- a/resources/views/auth/unauthorized.blade.php
+++ /dev/null
@@ -1,31 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@extends('statamic::outside')
-@section('title', __('Unauthorized'))
-
-@section('content')
-    <div class="relative mx-auto max-w-[400px] items-center justify-center">
-        <div class="flex items-center justify-center py-6">
-            <x-statamic::outside-logo />
-        </div>
-        <ui-auth-card
-            icon="key"
-            title="{{ __('Unauthorized') }}"
-            description="{{ __('You do not have permission to access this URL') }}"
-        >
-            <div class="flex justify-center">
-                @auth
-                    <ui-button as="href" variant="primary" href="{{ cp_route('logout') }}?redirect={{ $redirect }}" class="w-full">
-                        {{ __('Log out') }}
-                    </ui-button>
-                @else
-                    <ui-button as="href" variant="primary" href="{{ cp_route('login') }}" class="w-full">
-                        {{ __('Log in') }}
-                    </ui-button>
-                @endauth
-            </div>
-        </ui-auth-card>
-    </div>
-@endsection
diff --git a/resources/views/collections/empty.blade.php b/resources/views/collections/empty.blade.php
deleted file mode 100644
index 0e13ecdf3f3..00000000000
--- a/resources/views/collections/empty.blade.php
+++ /dev/null
@@ -1,73 +0,0 @@
-@php use function Statamic\trans as __; @endphp
-
-@extends('statamic::layout')
-@section('title', Statamic::crumb($collection->title(), 'Collections'))
-@section('content-card-modifiers', 'bg-architectural-lines')
-
-@section('content')
-    <header class="py-8 mt-8 text-center starting-style-transition" v-cloak>
-        <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-3">
-            <ui-icon name="collections" class="size-5 text-gray-500"></ui-icon>
-            <span v-pre>{{ $collection->title() }}</span>
-        </h1>
-    </header>
-
-    <ui-empty-state-menu heading="{{ __('Start designing your collection with these steps') }}">
-        @can('edit', $collection)
-            <ui-empty-state-item
-                href="{{ $collection->editUrl() }}"
-                icon="configure"
-                heading="{{ __('Configure Collection') }}"
-                description="{{ __('statamic::messages.collection_next_steps_configure_description') }}"
-            ></ui-empty-state-item>
-        @endcan
-
-        @can('create', ['Statamic\Contracts\Entries\Entry', $collection, \Statamic\Facades\Site::get($site)])
-            @php($multipleBlueprints = $collection->entryBlueprints()->count() > 1)
-
-            @if($multipleBlueprints)
-                <ui-empty-state-item
-                    icon="fieldtype-entries"
-                    heading="{{ __($collection->createLabel()) }}"
-                    description="{{ __('statamic::messages.collection_next_steps_create_entry_description') }}"
-                >
-                    @foreach ($collection->entryBlueprints() as $blueprint)
-                        <a href="{{ cp_route('collections.entries.create', [$collection->handle(), $site, 'blueprint' => $blueprint->handle()]) }}" class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2">
-                            {{ $blueprint->title() }}
-                        </a>
-                    @endforeach
-                </ui-empty-state-item>
-            @else
-                <ui-empty-state-item
-                    href="{{ cp_route('collections.entries.create', [$collection->handle(), $site]) }}"
-                    icon="fieldtype-entries"
-                    heading="{{ __($collection->createLabel()) }}"
-                    description="{{ __('statamic::messages.collection_next_steps_create_entry_description') }}"
-                ></ui-empty-state-item>
-            @endif
-        @endcan
-
-        @can('configure fields')
-            <ui-empty-state-item
-                href="{{ cp_route('blueprints.collections.index', [$collection->handle()]) }}"
-                icon="blueprints"
-                heading="{{ __('Configure Blueprints') }}"
-                description="{{ __('statamic::messages.collection_next_steps_blueprints_description') }}"
-            ></ui-empty-state-item>
-        @endcan
-
-        @can('store', 'Statamic\Contracts\Entries\Collection')
-            <ui-empty-state-item
-                href="{{ cp_route('collections.scaffold', $collection->handle()) }}"
-                icon="scaffold"
-                heading="{{ __('Scaffold Views') }}"
-                description="{{ __('statamic::messages.collection_next_steps_scaffold_description') }}"
-            ></ui-empty-state-item>
-        @endcan
-    </ui-empty-state-menu>
-
-    <x-statamic::docs-callout
-        :topic="__('Collections')"
-        :url="Statamic::docsUrl('collections')"
-    />
-@stop
diff --git a/resources/views/collections/index.blade.php b/resources/views/collections/index.blade.php
deleted file mode 100644
index fd8d4f0f168..00000000000
--- a/resources/views/collections/index.blade.php
+++ /dev/null
@@ -1,43 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@extends('statamic::layout')
-@section('title', __('Collections'))
-
-@if($collections->isEmpty())
-    @section('content-card-modifiers', 'bg-architectural-lines')
-@endif
-
-@section('content')
-    @unless ($collections->isEmpty())
-        <collection-list
-            :initial-rows="{{ json_encode($collections) }}"
-            :initial-columns="{{ json_encode($columns) }}"
-            :can-create-collections="{{ $user->can('create', 'Statamic\Contracts\Entries\Collection') ? 'true' : 'false' }}"
-            create-url="{{ cp_route('collections.create') }}"
-            action-url="{{ cp_route('collections.actions.run') }}"
-        ></collection-list>
-    @else
-        <header class="py-8 mt-8 text-center">
-            <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-3">
-                <ui-icon name="collections" class="size-5 text-gray-500"></ui-icon>
-                {{ __('Collections') }}
-            </h1>
-        </header>
-
-        <ui-empty-state-menu heading="{{ __('statamic::messages.collection_configure_intro') }}">
-            <ui-empty-state-item
-                href="{{ cp_route('collections.create') }}"
-                icon="collections"
-                heading="{{ __('Create Collection') }}"
-                description="{{ __('Get started by creating your first collection.') }}"
-            ></ui-empty-state-item>
-        </ui-empty-state-menu>
-    @endunless
-
-    <x-statamic::docs-callout
-        topic="{{ __('Collections') }}"
-        url="{{ Statamic::docsUrl('collections') }}"
-    />
-@endsection
diff --git a/resources/views/collections/show.blade.php b/resources/views/collections/show.blade.php
deleted file mode 100644
index 07507b2f87c..00000000000
--- a/resources/views/collections/show.blade.php
+++ /dev/null
@@ -1,38 +0,0 @@
-@extends("statamic::layout")
-@section("title", Statamic::crumb($collection->title(), "Collections"))
-
-@section("content")
-    <collection-view
-        title="{{ $collection->title() }}"
-        handle="{{ $collection->handle() }}"
-        icon="{{ $collection->icon() }}"
-        :can-create="{{ Statamic\Support\Str::bool($canCreate) }}"
-        :create-urls="{{ Js::from($createUrls) }}"
-        create-label="{{ $collection->createLabel() }}"
-        :blueprints="{{ Js::from($blueprints) }}"
-        sort-column="{{ $collection->sortField() }}"
-        sort-direction="{{ $collection->sortDirection() }}"
-        :columns="{{ $columns->toJson() }}"
-        :filters="{{ $filters->toJson() }}"
-        :actions="{{ Js::from($actions) }}"
-        action-url="{{ cp_route("collections.actions.run") }}"
-        entries-action-url="{{ cp_route("collections.entries.actions.run", $collection->handle()) }}"
-        reorder-url="{{ cp_route("collections.entries.reorder", $collection->handle()) }}"
-        edit-url="{{ $collection->editUrl() }}"
-        blueprints-url="{{ cp_route("blueprints.collections.index", $collection) }}"
-        scaffold-url="{{ cp_route("collections.scaffold", $collection->handle()) }}"
-        :can-edit="{{ Statamic\Support\Str::bool($user->can("edit", $collection)) }}"
-        :can-edit-blueprints="{{ Statamic\Support\Str::bool($user->can("configure fields")) }}"
-        initial-site="{{ $site }}"
-        :sites="{{ json_encode($sites) }}"
-        :can-change-localization-delete-behavior="{{ Statamic\Support\Str::bool($canChangeLocalizationDeleteBehavior) }}"
-        @if ($collection->hasStructure())
-            :structured="{{ Statamic\Support\Str::bool($user->can("reorder", $collection)) }}"
-        structure-pages-url="{{ cp_route("collections.tree.index", $structure->handle()) }}"
-        structure-submit-url="{{ cp_route("collections.tree.update", $collection->handle()) }}"
-        :structure-max-depth="{{ $structure->maxDepth() ?? "Infinity" }}"
-        :structure-expects-root="{{ Statamic\Support\Str::bool($structure->expectsRoot()) }}"
-        :structure-show-slugs="{{ Statamic\Support\Str::bool($structure->showSlugs()) }}"
-        @endif
-    ></collection-view>
-@endsection
diff --git a/resources/views/components/breadcrumbs/dropdown.blade.php b/resources/views/components/breadcrumbs/dropdown.blade.php
deleted file mode 100644
index bff9fbd8175..00000000000
--- a/resources/views/components/breadcrumbs/dropdown.blade.php
+++ /dev/null
@@ -1,66 +0,0 @@
-{{-- Hardcoded duplicate of the dropdown trigger in blade to prevent Vue pop in --}}
-<button
-    :class="{'absolute right-0 animate-out fade-out duration-700 fill-mode-forwards':true}"
-    class="
-        inline-flex items-center justify-center whitespace-nowrap shrink-0
-        font-medium antialiased cursor-pointer no-underline
-        disabled:text-white/60 dark:disabled:text-white/50 disabled:cursor-not-allowed
-        [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white
-        bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200
-        h-10 text-sm rounded-lg px-0 gap-0 w-10
-        [&_svg]:size-4.5 [&_svg]:size-3! h-8! w-4! hover:bg-gray-300/5! -ml-3 mr-1
-    "
-    type="button"
-    data-ui-dropdown-trigger
-    tabindex="-1"
->
-    @cp_svg('icons/chevron-vertical')
-</button>
-
-<ui-dropdown v-cloak class="relative" aria-label="{{ __('More options for') }} {{ __($breadcrumb->text()) }}">
-    <template #trigger>
-        <ui-button
-            variant="ghost"
-            icon="chevron-vertical"
-            class="[&_svg]:size-3! h-8! w-4! hover:bg-gray-300/5! -ml-3 mr-1 animate-in fade-in duration-500"
-            aria-label="'{{ __('Options for') }} {{ __($breadcrumb->text()) }}'"
-            aria-haspopup="true"
-            aria-expanded="false"
-        ></ui-button>
-    </template>
-    <ui-dropdown-header
-        class="grid grid-cols-[auto_1fr_auto] items-center"
-        icon="{{ $breadcrumb->icon() }}"
-        @if($breadcrumb->hasConfigureUrl())
-            append-icon="cog-solid"
-        append-href="{{ $breadcrumb->configureUrl() }}"
-        @endif
-        role="menuitem"
-    >
-        <a href="{{ $breadcrumb->url() }}" aria-label="{{ __('Navigate to') }} {{ __($breadcrumb->text()) }}">
-            {{ __($breadcrumb->text()) }}
-        </a>
-    </ui-dropdown-header>
-    @if($breadcrumb->hasLinks())
-        <ui-dropdown-menu role="menu">
-            @foreach($breadcrumb->links() as $link)
-                <ui-dropdown-item
-                    text="{{ __($link->text) }}"
-                    icon="{{ $link->icon }}"
-                    href="{{ $link->url }}"
-                    role="menuitem"
-                    :aria-label="'{{ __($link->text) }} - {{ __('Navigate to') }}'"
-                ></ui-dropdown-item>
-            @endforeach
-        </ui-dropdown-menu>
-    @endif
-    @if($breadcrumb->createUrl())
-        <ui-dropdown-footer
-            icon="plus"
-            text="{{ __($breadcrumb->createLabel()) }}"
-            href="{{ $breadcrumb->createUrl() }}"
-            role="menuitem"
-            :aria-label="'{{ __($breadcrumb->createLabel()) }} - {{ __('Create new') }}'"
-        ></ui-dropdown-footer>
-    @endif
-</ui-dropdown>
diff --git a/resources/views/components/breadcrumbs/index.blade.php b/resources/views/components/breadcrumbs/index.blade.php
deleted file mode 100644
index 9d0e91b837a..00000000000
--- a/resources/views/components/breadcrumbs/index.blade.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="items-center gap-2 hidden md:flex" data-global-header-breadcrumbs>
-    @foreach($breadcrumbs as $breadcrumb)
-        <div class="items-center gap-2 md:flex relative">
-            <span class="text-white/30">/</span>
-            <a
-                class="
-                    inline-flex items-center justify-center whitespace-nowrap shrink-0
-                    font-medium antialiased cursor-pointer no-underline
-                    disabled:text-white/60 dark:disabled:text-white/50 disabled:cursor-not-allowed
-                    bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 px-3 h-8
-                    text-[0.8125rem] leading-tight gap-2 rounded-lg
-                    dark:text-white/85! hover:text-white! px-2! mr-1.75
-                "
-                href="{{ $breadcrumb->url() }}"
-            >
-                {{ __($breadcrumb->text()) }}
-            </a>
-
-            @if($breadcrumb->hasLinks() || $breadcrumb->createUrl())
-                <x-statamic::breadcrumbs.dropdown :$breadcrumb />
-            @endif
-        </div>
-    @endforeach
-</div>
diff --git a/resources/views/components/command-palette.blade.php b/resources/views/components/command-palette.blade.php
deleted file mode 100644
index c43ea612eaa..00000000000
--- a/resources/views/components/command-palette.blade.php
+++ /dev/null
@@ -1,15 +0,0 @@
-<command-palette>
-    <div class="
-            data-[focus-visible]:outline-focus hover flex cursor-text items-center gap-x-1.5 group h-8
-            rounded-lg [button:has(>&)]:rounded-md bg-black/40 text-xs text-white/60 outline-none
-            border-b border-b-white/20 inset-shadow-sm inset-shadow-black/20
-            md:w-32 md:py-[calc(5/16*1rem)] md:px-2
-            hover:bg-black/45 hover:text-white/70
-        ">
-        @cp_svg('icons/magnifying-glass', 'size-5 flex-none text-white/50 group-hover:text-white/70')
-        <span class="sr-only leading-none md:not-sr-only st-text-trim-cap">{{ __('Search') }}</span>
-        <kbd class="ml-auto hidden self-center rounded bg-white/5 px-[0.3125rem] py-[0.0625rem] text-[0.625rem]/4 font-medium text-white/60 group-hover:text-white/70 ring-1 ring-white/7.5 [word-spacing:-0.15em] ring-inset md:block">
-            <kbd class="font-sans">⌘ </kbd><kbd class="font-sans">K</kbd>
-        </kbd>
-    </div>
-</command-palette>
diff --git a/resources/views/components/docs-callout.blade.php b/resources/views/components/docs-callout.blade.php
index 14ae50ef191..cf1d0ec7c42 100644
--- a/resources/views/components/docs-callout.blade.php
+++ b/resources/views/components/docs-callout.blade.php
@@ -1,24 +1 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@if (config('statamic.cp.link_to_docs'))
-    <div class="mt-12 flex justify-center text-center starting-style-transition">
-        <ui-command-palette-item
-            :text="[__('Statamic Documentation'), `{{ $topic }}`]"
-            icon="book-next-page"
-            url="{{ $url }}"
-            open-new-tab
-            track-recent
-            v-slot="{ url, icon }"
-        >
-            <ui-badge
-                text="{{ __('Learn about :topic', ['topic' => $topic]) }}"
-                icon-append="external-link"
-                :href="url"
-                target="_blank"
-                pill
-            />
-        </ui-command-palette-item>
-    </div>
-@endif
+<ui-docs-callout topic="{{ $topic }}" url="{{ $url }}" />
diff --git a/resources/views/components/global-site-selector.blade.php b/resources/views/components/global-site-selector.blade.php
deleted file mode 100644
index 6000ee20a62..00000000000
--- a/resources/views/components/global-site-selector.blade.php
+++ /dev/null
@@ -1,27 +0,0 @@
-<global-site-selector></global-site-selector>
-
-<div
-    :class="{'absolute inset-0 animate-out fade-out duration-1200 fill-mode-forwards':true}"
-    class="
-        antialiased bg-transparent border-none cursor-pointer pointer-events-none
-        dark:hover:bg-white/15 dark:hover:text-gray-200 dark:text-gray-300
-        flex focus-within:focus-outline h-8 hover:bg-gray-400/10
-        items-center justify-between px-3 rounded-lg text-[0.8125rem] text-gray-900
-    "
-    data-ui-combobox-trigger
-    tabindex="-1"
->
-    <div class="flex-1 min-w-0">
-        <button
-            type="button"
-            class="w-full text-start bg-transparent truncate flex items-center gap-2 cursor-pointer focus:outline-none"
-            data-ui-combobox-selected-option
-        >
-            @cp_svg('icons/globe-arrow', 'size-4 shrink-0 text-white/85 dark:text-white dark:opacity-50 text-white/85 dark:text-white dark:opacity-50')
-            <span>{{ Statamic\Facades\Site::selected()->name() }}</span>
-        </button>
-    </div>
-    <div class="flex gap-1.5 items-center shrink-0 ms-1.5">
-        @cp_svg('icons/chevron-down', 'size-4 shrink-0 text-gray-400 dark:text-white/40 text-gray-400 dark:text-white/40')
-    </div>
-</div>
diff --git a/resources/views/components/outside-logo.blade.php b/resources/views/components/outside-logo.blade.php
deleted file mode 100644
index 8c129195dbd..00000000000
--- a/resources/views/components/outside-logo.blade.php
+++ /dev/null
@@ -1,18 +0,0 @@
-<div class="logo relative z-10 max-w-3/4 md:pt-18">
-    @if ($customLogo)
-        <img
-            src="{{ $customLogo }}"
-            alt="{{ config('statamic.cp.custom_cms_name') }}"
-            class="white-label-logo dark:hidden"
-        />
-        <img
-            src="{{ $customDarkLogo }}"
-            alt="{{ config('statamic.cp.custom_cms_name') }}"
-            class="white-label-logo hidden dark:block"
-        />
-    @elseif ($customLogoText)
-        <div class="mx-auto mb-8 max-w-xs text-center text-lg font-medium opacity-50">{{ $customLogoText }}</div>
-    @else
-        @cp_svg('statamic-logo-lime', 'h-6')
-    @endif
-</div>
diff --git a/resources/views/components/pro-badge/index.blade.php b/resources/views/components/pro-badge/index.blade.php
deleted file mode 100644
index cef976b90a2..00000000000
--- a/resources/views/components/pro-badge/index.blade.php
+++ /dev/null
@@ -1,41 +0,0 @@
-@inject('licenses', 'Statamic\Licensing\LicenseManager')
-
-@php
-$requestFailed = $licenses->requestFailed();
-$onPublicDomain = $licenses->isOnPublicDomain();
-
-$base = 'relative inline-flex items-center justify-center gap-1 font-normal antialiased whitespace-nowrap no-underline not-prose [button]:cursor-pointer group [&_svg]:opacity-60 [&_svg]:group-hover:opacity-80 dark:[&_svg]:group-hover:opacity-70';
-$sizeDefault = 'text-xs leading-5.5 px-2 rounded-sm [&_svg]:size-3.5 gap-2';
-$sizeSm = 'text-2xs leading-normal px-1.25 rounded-[0.1875rem] [&_svg]:size-2.5';
-$flat = 'border-0 shadow-none!';
-$yellow = 'bg-yellow-100 border-yellow-400 text-yellow-700 dark:bg-yellow-300/6 dark:text-yellow-300 [a]:hover:bg-yellow-200/80 [button]:hover:bg-yellow-200/80 dark:[a]:hover:bg-yellow-300/15';
-$red = 'bg-red-100/80 border-red-400/80 text-red-700 dark:bg-red-300/6 dark:text-red-300 [a]:hover:bg-red-200/60 [button]:hover:bg-red-200/60 dark:[a]:hover:bg-red-300/15';
-$green = 'bg-green-100/80 border-green-400 text-green-700 dark:bg-green-300/6 dark:text-green-300 [a]:hover:bg-green-200/60 [button]:hover:bg-green-200/60 dark:[a]:hover:bg-green-300/15';
-@endphp
-
-@if ($licenses->valid())
-    <div class="{{ $base }} {{ $flat }} {{ $sizeSm }} bg-white/15!">
-        {{ __('Pro') }}
-    </div>
-@else
-
-    {{--
-        Rendered twice:
-        - Once without being wrapped in a tooltip to prevent vue pop-in.
-        - Again surrounded by the tooltip so we can... have the tooltip.
-    --}}
-    <div v-if="false">
-        <x-statamic::pro-badge.problematic
-            :$requestFailed :$onPublicDomain
-            :$base :$sizeDefault :$flat :$yellow :$red :$green
-        />
-    </div>
-
-    <ui-tooltip v-cloak :text="{{ $requestFailed ? "'".$licenses->requestFailureMessage()."'" : 'null' }}">
-        <x-statamic::pro-badge.problematic
-            :$requestFailed :$onPublicDomain
-            :$base :$sizeDefault :$flat :$yellow :$red :$green
-        />
-    </ui-tooltip>
-
-@endif
diff --git a/resources/views/components/pro-badge/problematic.blade.php b/resources/views/components/pro-badge/problematic.blade.php
deleted file mode 100644
index 12fb222e480..00000000000
--- a/resources/views/components/pro-badge/problematic.blade.php
+++ /dev/null
@@ -1,13 +0,0 @@
-<a href="{{ cp_route('utilities.licensing') }}" class="
-    {{ $base }} {{ $sizeDefault }} {{ $flat }}
-
-    @if ($requestFailed)
-        {{ $yellow }}
-    @elseif ($onPublicDomain)
-        {{ $red }}
-    @else
-        {{ $green }}
-    @endif
-">
-    {{ __('Pro') }} – {{ $onPublicDomain ? __('statamic::messages.licensing_error_unlicensed') : __('Trial Mode') }}
-</a>
diff --git a/resources/views/components/user-dropdown.blade.php b/resources/views/components/user-dropdown.blade.php
deleted file mode 100644
index 6f72bdf2430..00000000000
--- a/resources/views/components/user-dropdown.blade.php
+++ /dev/null
@@ -1,74 +0,0 @@
-@php($userJson = json_encode($user))
-
-<div v-if="false" class="inline-flex items-center justify-center h-10 w-10">
-    <ui-avatar :user='{{ $userJson }}' />
-</div>
-
-<ui-dropdown align="end" v-cloak>
-    <template #trigger>
-        <ui-button :icon-only="true" variant="ghost">
-            <ui-avatar :user='{{ $userJson }}' />
-        </ui-button>
-    </template>
-
-    <ui-dropdown-header>
-        <div class="flex items-center gap-2">
-            <ui-avatar :user='{{ $userJson }}' class="size-8" />
-            <div>
-                <div class="text-sm" v-pre>{{ $user->email() }}</div>
-                @if ($user->isSuper())
-                    <div class="text-xs text-gray-500 font-normal flex items-center gap-1">
-                        {{ __('Super Admin') }}
-                        @if (session()->get('statamic_impersonated_by'))
-                            <ui-badge size="sm" pill :text="__('Impersonating')" />
-                        @endif
-                    </div>
-                @elseif (session()->get('statamic_impersonated_by'))
-                    <ui-badge size="sm" pill :text="__('Impersonating')" />
-                @endif
-            </div>
-        </div>
-    </ui-dropdown-header>
-
-    <ui-dropdown-menu>
-        <ui-dropdown-item
-            href="{{ route('statamic.cp.account') }}"
-            icon="avatar"
-            :text="__('Manage profile')"
-        />
-        <ui-dropdown-item
-            href="{{ cp_route('preferences.user.edit') }}"
-            icon="cog"
-            :text="__('Preferences')"
-        />
-        @if (config('statamic.cp.support_url'))
-            <ui-dropdown-item
-                href="{{ config('statamic.cp.support_url') }}"
-                icon="support"
-                :text="__('Get support')"
-                target="_blank"
-            >
-            </ui-dropdown-item>
-        @endif
-        @if (session()->get('statamic_impersonated_by'))
-            <ui-dropdown-item
-                href="{{ cp_route('impersonation.stop') }}"
-                icon="mask"
-                :text="__('Stop impersonating')"
-            />
-        @endif
-        <ui-dropdown-item
-            href="{{ route('statamic.cp.logout', ['redirect' => cp_route('index')]) }}"
-            icon="sign-out"
-            :text="__('Sign out')"
-        />
-    </ui-dropdown-menu>
-
-    <ui-dropdown-footer class="px-1.75! space-y-2">
-        <ui-toggle-group variant="ghost" size="xs" class="justify-between" v-model="$theme.preference">
-            <ui-toggle-item icon="sun" class="[&_svg]:size-4.5" value="light" :label="__('Light')" />
-            <ui-toggle-item icon="moon" class="[&_svg]:size-4.5" value="dark" :label="__('Dark')" />
-            <ui-toggle-item icon="monitor" class="[&_svg]:size-4.5" value="auto" :label="__('System')" />
-        </ui-toggle-group>
-    </ui-dropdown-footer>
-</ui-dropdown>
diff --git a/resources/views/components/view-site-button.blade.php b/resources/views/components/view-site-button.blade.php
deleted file mode 100644
index 78c6aac712e..00000000000
--- a/resources/views/components/view-site-button.blade.php
+++ /dev/null
@@ -1,8 +0,0 @@
-<a
-    href="{{ Statamic\Facades\Site::selected()->url() }}"
-    aria-label="{{ __('View Site') }}"
-    class="inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-white/60 dark:disabled:text-white/50 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 h-8 text-[0.8125rem] leading-tight rounded-lg px-0 gap-0 w-8 [&_svg]:size-3.5 [&_svg]:size-4 -me-2 [&_svg]:text-white/85! v-popper--has-tooltip"
-    target="_blank"
->
-    @cp_svg('icons/visit-website')
-</a>
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
deleted file mode 100644
index 89659c36f7a..00000000000
--- a/resources/views/errors/404.blade.php
+++ /dev/null
@@ -1,15 +0,0 @@
-@php
-    use function Statamic\trans as __;
-    $authed = \Statamic\Facades\User::current();
-@endphp
-
-@extends($authed ? 'statamic::layout' : 'statamic::outside')
-
-@section('content')
-    <div class="flex min-h-screen flex-col items-center justify-center">
-        <ui-card class="text-center flex flex-col items-center space-y-2">
-            <ui-heading size="2xl">{{ __('404') }}</ui-heading>
-            <ui-description>{{ __('The page you are looking for could not be found.') }}</ui-description>
-        </ui-card>
-    </div>
-@endsection
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index 0442865ef5d..bd1cf196895 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -8,54 +8,17 @@
     </head>
 
     <body
-        class="bg-global-header-bg dark:bg-dark-global-header-bg font-sans leading-normal text-gray-900 dark:text-white"
-        @if ($user->getPreference('strict_accessibility')) data-contrast="increased" @endif
+        @if ($user && $user->getPreference('strict_accessibility')) data-contrast="increased" @endif
     >
-        <div id="statamic">
-           <config-provider>
-                @include('statamic::partials.session-expiry')
-                @include('statamic::partials.licensing-alerts')
-                 @include('statamic::partials.global-header')
-
-                <div
-                    class="@yield('content-class') pt-14"
-                    :class="{
-                        'nav-closed': ! navOpen,
-                        'nav-open': navOpen,
-                    }"
-                >
-                    <main id="main" class="flex bg-body-bg dark:bg-dark-body-bg dark:border-t rounded-t-2xl dark:border-dark-body-border fixed top-14 inset-x-0 bottom-0 min-h-[calc(100vh-3.5rem)]">
-                        @include('statamic::partials.nav-main')
-                        <div id="main-content" class="main-content p-2 h-full flex-1 overflow-y-auto rounded-t-2xl">
-                            <div class="relative content-card @yield('content-card-modifiers') min-h-full">
-                                @yield('content')
-                            </div>
-                        </div>
-                    </main>
-                </div>
-
-                <component
-                    v-for="component in appendedComponents"
-                    :key="component.id"
-                    :is="component.name"
-                    v-bind="component.props"
-                    v-on="component.events"
-                ></component>
-
-                <confirmation-modal
-                    v-if="copyToClipboardModalUrl"
-                    :cancellable="false"
-                    :button-text="__('OK')"
-                    :title="__('Copy to clipboard')"
-                    @confirm="copyToClipboardModalUrl = null"
-                >
-                    <div class="prose">
-                        <ui-input :model-value="copyToClipboardModalUrl" readonly copyable class="font-mono text-sm dark" />
-                    </div>
-                </confirmation-modal>
-
-                <portal-targets></portal-targets>
-            </config-provider>
+        <div
+            id="statamic"
+            data-page="{{ json_encode($page ?? Statamic::nonInertiaPageData()) }}"
+        >
+            <div id="blade-title" data-title="
+                @yield('title', $title ?? __('Here')) {{ Statamic::cpDirection() === 'ltr' ? '‹' : '›' }}
+                {{ __(Statamic::pro() ? config('statamic.cp.custom_cms_name', 'Statamic') : 'Statamic') }}
+            "></div>
+            @yield('content')
         </div>
 
         @include('statamic::partials.scripts')
diff --git a/resources/views/outside.blade.php b/resources/views/outside.blade.php
deleted file mode 100644
index 0e70c20e8fc..00000000000
--- a/resources/views/outside.blade.php
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html
-    lang="{{ Statamic::cpLocale() }}"
-    dir="{{ Statamic::cpDirection() }}"
->
-    <head>
-        @include('statamic::partials.head')
-    </head>
-
-    <body class="bg-gray-50 font-sans leading-normal scheme-light p-2">
-        <config-provider>
-            <div id="statamic">
-                @yield('content')
-                <portal-targets></portal-targets>
-            </div>
-            @include('statamic::partials.scripts')
-            @yield('scripts')
-        </config-provider>
-    </body>
-</html>
diff --git a/resources/views/partials/global-header.blade.php b/resources/views/partials/global-header.blade.php
deleted file mode 100644
index 38d3b88026e..00000000000
--- a/resources/views/partials/global-header.blade.php
+++ /dev/null
@@ -1,53 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-<header class="h-14 bg-global-header-bg dark:bg-dark-global-header-bg flex justify-between space-x-2 items-center text-white px-4 fixed overflow-x-auto top-0 inset-x-0 z-[3]">
-    <a class="c-skip-link z-(--z-index-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
-        {{ __('Skip to sidebar') }}
-    </a>
-    <a class="c-skip-link z-(--z-index-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main-content">
-        {{ __('Skip to content') }}
-    </a>
-    <div class="dark flex items-center gap-2 text-[0.8125rem] text-white/85 w-full">
-         {{-- Logo --}}
-        @if ($customDarkLogo)
-            <button class="flex items-center group cursor-pointer text-white/85 hover:text-white" type="button" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}">
-                <div class="p-1 size-7 inset-0 flex items-center justify-center">
-                    @cp_svg('icons/burger-menu', 'size-5')
-                </div>
-            </button>
-            <img src="{{ $customDarkLogo }}" alt="{{ config('statamic.cp.custom_cms_name') }}" class="max-w-[260px] max-h-9">
-        @else
-        <div class="flex items-center gap-2 relative">
-            <button class="flex items-center group rounded-lg cursor-pointer" type="button" @click="toggleNav" aria-label="{{ __('Toggle Nav') }}" style="--focus-outline-offset: 0.2rem;">
-                <div class="opacity-0 group-hover:opacity-100 p-1 size-7 transition-opacity duration-150 absolute inset-0 flex items-center justify-center">
-                    @cp_svg('icons/burger-menu', 'size-5')
-                </div>
-                @cp_svg('statamic-mark-lime', 'size-7 group-hover:opacity-0 transition-opacity duration-150')
-            </button>
-            <a href="{{ route('statamic.cp.index') }}" class="hidden sm:block text-white/85 rounded-xs whitespace-nowrap" style="--focus-outline-offset: var(--outline-offset-button);">
-                {{ $customLogoText ?? config('app.name') }}
-            </a>
-            @if (Statamic::pro())
-                <x-statamic::pro-badge />
-            @endif
-        </div>
-        @endif
-
-        <x-statamic::breadcrumbs :$breadcrumbs />
-    </div>
-
-    <div class="dark flex-1 flex gap-1 md:gap-3 items-center justify-end shrink-0">
-        @if (Statamic\Facades\Site::authorized()->count() > 1)
-            <div class="relative">
-                <x-statamic::global-site-selector />
-            </div>
-        @endif
-        <div class="flex items-center">
-            <x-statamic::command-palette />
-        </div>
-        <x-statamic::view-site-button />
-        <x-statamic::user-dropdown />
-    </div>
-</header>
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
index a6872e0b429..c954d5e5ef1 100644
--- a/resources/views/partials/head.blade.php
+++ b/resources/views/partials/head.blade.php
@@ -8,11 +8,6 @@
 <meta name="robots" content="noindex,nofollow" />
 <meta name="color-scheme" content="{{ $user?->preferredTheme() ?? 'auto' }}">
 
-<title>
-    @yield('title', $title ?? __('Here')) {{ Statamic::cpDirection() === 'ltr' ? '‹' : '›' }}
-    {{ __(Statamic::pro() ? config('statamic.cp.custom_cms_name', 'Statamic') : 'Statamic') }}
-</title>
-
 @if (Statamic::pro() && config('statamic.cp.custom_favicon_url'))
     @include('statamic::partials.favicon', ['favicon_url' => config('statamic.cp.custom_favicon_url')])
 @else
diff --git a/resources/views/partials/licensing-alerts.blade.php b/resources/views/partials/licensing-alerts.blade.php
deleted file mode 100644
index 5d21a2bd665..00000000000
--- a/resources/views/partials/licensing-alerts.blade.php
+++ /dev/null
@@ -1,15 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@inject('licenses', 'Statamic\Licensing\LicenseManager')
-
-@if ($alert = $licenses->licensingAlert())
-    <licensing-alert
-        message="{{ $alert['message'] }}"
-        :testing="{{ \Statamic\Support\Str::bool($alert['testing']) }}"
-        @can('access licensing utility')
-        manage-url="{{ cp_route('utilities.licensing') }}"
-        @endcan
-    ></licensing-alert>
-@endif
diff --git a/resources/views/partials/nav-main.blade.php b/resources/views/partials/nav-main.blade.php
deleted file mode 100644
index 0cef258e489..00000000000
--- a/resources/views/partials/nav-main.blade.php
+++ /dev/null
@@ -1,42 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@section('nav-main')
-    <nav class="nav-main">
-        @foreach ($nav as $section)
-            <div>
-                @if ($section['display'] !== 'Top Level')
-                    <div class="section-title">{{ __($section['display']) }}</div>
-                @endif
-                <ul>
-                    @foreach ($section['items'] as $item)
-                        @unless ($item->view())
-                            <li v-pre>
-                                <a @class(['active' => $item->isActive()]) href="{{ $item->url() }}" {{ $item->attributes() }}>
-                                    {!! $item->svg() !!}
-                                    <span>{{ __($item->name()) }}</span>
-                                </a>
-                                @if ($item->children() && $item->isActive())
-                                    <ul>
-                                        @foreach ($item->children() as $child)
-                                            <li>
-                                                <a href="{{ $child->url() }}" {{ $item->attributes() }} @class(['active' => $child->isActive()])>
-                                                    {{ __($child->name()) }}
-                                                </a>
-                                            </li>
-                                        @endforeach
-                                    </ul>
-                                @endif
-                            </li>
-                        @else
-                            @include($item->view())
-                        @endunless
-                    @endforeach
-                </ul>
-            </div>
-        @endforeach
-    </nav>
-@stop
-
-@yield('nav-main')
diff --git a/resources/views/partials/session-expiry.blade.php b/resources/views/partials/session-expiry.blade.php
deleted file mode 100644
index 29488f33105..00000000000
--- a/resources/views/partials/session-expiry.blade.php
+++ /dev/null
@@ -1,7 +0,0 @@
-<session-expiry
-    email="{{ $email }}"
-    :warn-at="{{ $warnAt }}"
-    :lifetime="{{ $lifetime }}"
-    :oauth-provider="{{ json_encode($oauth) }}"
-    :auth="{{ json_encode($auth) }}"
-></session-expiry>
diff --git a/resources/views/settings/edit.blade.php b/resources/views/settings/edit.blade.php
deleted file mode 100644
index 1737c32569f..00000000000
--- a/resources/views/settings/edit.blade.php
+++ /dev/null
@@ -1,27 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@extends('statamic::layout')
-@section('content-class', 'publishing')
-@section('title', __('Settings'))
-
-@section('content')
-
-<script>
-    Statamic.Publish = {
-        contentData: {!! json_encode($content_data) !!},
-        fieldset: {!! json_encode($fieldset) !!},
-    };
-</script>
-
-<publish
-    title="{{ $title }}"
-    extra="{{ json_encode($extra) }}"
-    :is-new="false"
-    slug="{{ $slug }}"
-    content-type="{{ $content_type }}"
-    :update-title-on-save="false"
-></publish>
-
-@stop
diff --git a/resources/views/sites/configure.blade.php b/resources/views/sites/configure.blade.php
deleted file mode 100644
index 22c7b7d9338..00000000000
--- a/resources/views/sites/configure.blade.php
+++ /dev/null
@@ -1,24 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@extends('statamic::layout')
-@section('title', __('Configure Sites'))
-
-@section('content')
-
-<div class="max-w-5xl mx-auto">
-    <sites-edit-form
-        :blueprint="{{ json_encode($blueprint) }}"
-        :initial-values="{{ json_encode($values) }}"
-        :meta="{{ json_encode($meta) }}"
-        url="{{ cp_route('sites.update') }}"
-    ></sites-edit-form>
-
-    <x-statamic::docs-callout
-        topic="{{ __('Multi-Site') }}"
-        url="{{ Statamic::docsUrl('multi-site') }}"
-    />
-</div>
-
-@stop
diff --git a/resources/views/widgets/collection.blade.php b/resources/views/widgets/collection.blade.php
index 0e2d3a18602..4c003bab844 100644
--- a/resources/views/widgets/collection.blade.php
+++ b/resources/views/widgets/collection.blade.php
@@ -16,7 +16,6 @@
         <template #actions>
             <create-entry-button
                 text="{{ $button }}"
-                url="{{ $collection->createEntryUrl(Site::selected()) }}"
                 size="sm"
                 variant="default"
                 :blueprints="{{ $blueprints->toJson() }}"
diff --git a/routes/web.php b/routes/web.php
index b71da7df296..388076c38e6 100755
--- a/routes/web.php
+++ b/routes/web.php
@@ -22,6 +22,7 @@
 use Statamic\Http\Controllers\User\TwoFactorRecoveryCodesController;
 use Statamic\Http\Middleware\AuthGuard;
 use Statamic\Http\Middleware\CP\AuthGuard as CPAuthGuard;
+use Statamic\Http\Middleware\CP\HandleInertiaRequests;
 use Statamic\Http\Middleware\RedirectIfTwoFactorSetupIncomplete;
 use Statamic\Statamic;
 use Statamic\StaticCaching\NoCache\Controller as NoCacheController;
@@ -31,7 +32,7 @@
     Route::group(['prefix' => config('statamic.routes.action')], function () {
         Route::post('forms/{form}', [FormController::class, 'submit'])->middleware([HandlePrecognitiveRequests::class])->name('forms.submit');
 
-        Route::get('protect/password', [PasswordProtectController::class, 'show'])->name('protect.password.show');
+        Route::get('protect/password', [PasswordProtectController::class, 'show'])->name('protect.password.show')->middleware([HandleInertiaRequests::class]);
         Route::post('protect/password', [PasswordProtectController::class, 'store'])->name('protect.password.store');
 
         Route::group(['prefix' => 'auth', 'middleware' => [AuthGuard::class]], function () {
diff --git a/src/Auth/Protect/Protectors/Password/Controller.php b/src/Auth/Protect/Protectors/Password/Controller.php
index afd3a7f9d08..d41af2d6fcd 100644
--- a/src/Auth/Protect/Protectors/Password/Controller.php
+++ b/src/Auth/Protect/Protectors/Password/Controller.php
@@ -2,6 +2,7 @@
 
 namespace Statamic\Auth\Protect\Protectors\Password;
 
+use Inertia\Inertia;
 use Statamic\Auth\Protect\ProtectorManager;
 use Statamic\Facades\Data;
 use Statamic\Facades\Site;
@@ -22,7 +23,15 @@ public function show()
             app()->setLocale($site->lang());
         }
 
-        return View::make('statamic::auth.protect.password')->cascadeContent($data ?? null);
+        // If a user has a custom view, make sure to use theirs instead of Inertia.
+        if (view()->exists('statamic::auth.protect.password')) {
+            return View::make('statamic::auth.protect.password')->cascadeContent($data ?? null);
+        }
+
+        return Inertia::render('auth/protect/Password', [
+            'token' => request('token'),
+            'submitUrl' => route('statamic.protect.password.store'),
+        ]);
     }
 
     public function store()
diff --git a/src/CP/Breadcrumbs/Breadcrumbs.php b/src/CP/Breadcrumbs/Breadcrumbs.php
index 317506c9ba6..c77710d49a3 100644
--- a/src/CP/Breadcrumbs/Breadcrumbs.php
+++ b/src/CP/Breadcrumbs/Breadcrumbs.php
@@ -2,6 +2,7 @@
 
 namespace Statamic\CP\Breadcrumbs;
 
+use Inertia\Inertia;
 use Statamic\CP\Navigation\NavItem;
 use Statamic\Facades\CP\Nav;
 use Statamic\Statamic;
@@ -13,6 +14,8 @@ class Breadcrumbs
     public static function push(Breadcrumb $breadcrumb)
     {
         static::$pushed[] = $breadcrumb;
+
+        Inertia::share(['additionalBreadcrumbs' => static::additional()]);
     }
 
     public static function build(): array
@@ -88,4 +91,22 @@ public static function title(?string $title = null): string
 
         return $crumbs->reverse()->join($arrow);
     }
+
+    public static function additional()
+    {
+        return collect(static::$pushed)->map(function (Breadcrumb $crumb) {
+            return [
+                'display' => $crumb->text(),
+                'url' => $crumb->url(),
+                'icon' => $crumb->icon(),
+                'links' => collect($crumb->links())->map(function ($link) {
+                    return [
+                        'display' => $link->text,
+                        'url' => $link->url,
+                        'icon' => $link->icon,
+                    ];
+                }),
+            ];
+        })->all();
+    }
 }
diff --git a/src/CP/Navigation/NavItem.php b/src/CP/Navigation/NavItem.php
index 339b6f0fe68..0999de295a7 100644
--- a/src/CP/Navigation/NavItem.php
+++ b/src/CP/Navigation/NavItem.php
@@ -221,9 +221,6 @@ public function attributes($attrs = null)
     {
         return $this
             ->fluentlyGetOrSet('attributes')
-            ->setter(function ($value) {
-                return is_array($value) ? Html::attributes($value) : $value;
-            })
             ->value($attrs);
     }
 
diff --git a/src/Exceptions/Concerns/RendersControlPanelExceptions.php b/src/Exceptions/Concerns/RendersControlPanelExceptions.php
index 9b02ecf1f96..07408df54da 100644
--- a/src/Exceptions/Concerns/RendersControlPanelExceptions.php
+++ b/src/Exceptions/Concerns/RendersControlPanelExceptions.php
@@ -3,6 +3,8 @@
 namespace Statamic\Exceptions\Concerns;
 
 use Illuminate\Auth\Access\AuthorizationException as IlluminateAuthException;
+use Inertia\Inertia;
+use Statamic\Statamic;
 
 trait RendersControlPanelExceptions
 {
@@ -12,7 +14,17 @@ protected function renderException($request, $e)
             return redirect($this->getAuthExceptionRedirectUrl())->withError($e->getMessage());
         }
 
-        return parent::render($request, $e);
+        $response = parent::render($request, $e);
+
+        if (app()->isProduction()) {
+            Statamic::$isRenderingCpException = true;
+
+            return Inertia::render('errors/Error', ['status' => $response->getStatusCode()])
+                ->toResponse($request)
+                ->setStatusCode($response->getStatusCode());
+        }
+
+        return $response;
     }
 
     protected function getAuthExceptionRedirectUrl()
diff --git a/src/Exceptions/Concerns/RendersHttpExceptions.php b/src/Exceptions/Concerns/RendersHttpExceptions.php
index ab316357e83..dfab380e3fe 100644
--- a/src/Exceptions/Concerns/RendersHttpExceptions.php
+++ b/src/Exceptions/Concerns/RendersHttpExceptions.php
@@ -5,6 +5,7 @@
 use Closure;
 use Illuminate\Http\Request;
 use Illuminate\Http\Response;
+use Inertia\Inertia;
 use Statamic\Facades\Cascade;
 use Statamic\Statamic;
 use Statamic\StaticCaching\Cacher;
@@ -22,7 +23,9 @@ public function render(Request $request)
         }
 
         if (Statamic::isCpRoute()) {
-            return response()->view('statamic::errors.'.$this->getStatusCode(), [], $this->getStatusCode());
+            return Inertia::render('errors/'.$this->getStatusCode())
+                ->toResponse(request())
+                ->setStatusCode($this->getStatusCode());
         }
 
         if (Statamic::isApiRoute()) {
diff --git a/src/Fields/BlueprintRepository.php b/src/Fields/BlueprintRepository.php
index 7d490f627c4..ce5c8d6e63d 100644
--- a/src/Fields/BlueprintRepository.php
+++ b/src/Fields/BlueprintRepository.php
@@ -278,7 +278,7 @@ protected function filesIn($namespace)
                 $files = $files->merge($overrides)->values();
             }
 
-            return $files;
+            return $files->collect();
         });
     }
 
diff --git a/src/Http/Controllers/CP/Auth/ElevatedSessionController.php b/src/Http/Controllers/CP/Auth/ElevatedSessionController.php
index 9f73c16efc6..0381d0015f2 100644
--- a/src/Http/Controllers/CP/Auth/ElevatedSessionController.php
+++ b/src/Http/Controllers/CP/Auth/ElevatedSessionController.php
@@ -5,6 +5,7 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Validation\ValidationException;
+use Inertia\Inertia;
 use Statamic\Facades\User;
 
 class ElevatedSessionController
@@ -34,8 +35,11 @@ public function showForm()
             session()->sendElevatedSessionVerificationCodeIfRequired();
         }
 
-        return view('statamic::auth.confirm-password', [
+        return Inertia::render('auth/ConfirmPassword', [
             'method' => $method,
+            'status' => session('status'),
+            'submitUrl' => cp_route('elevated-session.confirm'),
+            'resendUrl' => cp_route('elevated-session.resend-code'),
         ]);
     }
 
diff --git a/src/Http/Controllers/CP/Auth/LoginController.php b/src/Http/Controllers/CP/Auth/LoginController.php
index d2ce1008b00..08626da387e 100644
--- a/src/Http/Controllers/CP/Auth/LoginController.php
+++ b/src/Http/Controllers/CP/Auth/LoginController.php
@@ -4,11 +4,14 @@
 
 use Illuminate\Auth\Events\Failed;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 use Statamic\Facades\OAuth;
 use Statamic\Facades\User;
 use Statamic\Http\Controllers\Concerns\HandlesLogins;
 use Statamic\Http\Controllers\CP\CpController;
 use Statamic\Http\Middleware\CP\RedirectIfAuthorized;
+use Statamic\OAuth\Provider;
+use Statamic\Statamic;
 use Statamic\Support\Str;
 
 use function Statamic\trans as __;
@@ -27,29 +30,28 @@ public function __construct()
         $this->middleware(RedirectIfAuthorized::class)->except('logout');
     }
 
-    /**
-     * Show the application's login form.
-     *
-     * @return \Illuminate\Http\Response
-     */
     public function showLoginForm(Request $request)
     {
-        $data = [
+        return Inertia::render('auth/Login', [
             'title' => __('Log in'),
-            'oauth' => $enabled = OAuth::enabled(),
+            'oauthEnabled' => $enabled = OAuth::enabled(),
             'emailLoginEnabled' => $enabled ? config('statamic.oauth.email_login_enabled') : true,
-            'providers' => $enabled ? OAuth::providers() : [],
+            'providers' => $enabled ? $this->oauthProviders() : [],
             'referer' => $this->getReferrer($request),
-            'hasError' => $this->hasError(),
-        ];
-
-        $view = view('statamic::auth.login', $data);
+            'forgotPasswordUrl' => cp_route('password.request'),
+            'submitUrl' => cp_route('login'),
+        ]);
+    }
 
-        if ($request->expired) {
-            return $view->withErrors(__('Session Expired'));
-        }
+    private function oauthProviders()
+    {
+        $redirect = parse_url(cp_route('index'))['path'];
 
-        return $view;
+        return OAuth::providers()->map(fn (Provider $provider) => [
+            'name' => $provider->name(),
+            'icon' => Statamic::svg('oauth/'.$provider->name()),
+            'url' => $provider->loginUrl().'?redirect='.$redirect,
+        ]);
     }
 
     public function login(Request $request)
@@ -140,18 +142,4 @@ public function username()
     {
         return 'email';
     }
-
-    private function hasError()
-    {
-        return function ($field) {
-            if (! $error = optional(session('errors'))->first($field)) {
-                return false;
-            }
-
-            return ! in_array($error, [
-                __('auth.failed'),
-                __('statamic::validation.required'),
-            ]);
-        };
-    }
 }
diff --git a/src/Http/Controllers/CP/Auth/UnauthorizedController.php b/src/Http/Controllers/CP/Auth/UnauthorizedController.php
index 260742e10bb..2454f1adc45 100644
--- a/src/Http/Controllers/CP/Auth/UnauthorizedController.php
+++ b/src/Http/Controllers/CP/Auth/UnauthorizedController.php
@@ -2,14 +2,21 @@
 
 namespace Statamic\Http\Controllers\CP\Auth;
 
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
 class UnauthorizedController
 {
-    public function __invoke()
+    public function __invoke(Request $request)
     {
         $redirect = config('statamic.cp.auth.enabled', true)
             ? cp_route('login')
             : config('statamic.cp.auth.redirect_to', '/');
 
-        return view('statamic::auth.unauthorized', compact('redirect'));
+        return Inertia::render('auth/Unauthorized', [
+            'isLoggedIn' => (bool) $request->user(),
+            'loginUrl' => cp_route('login'),
+            'logoutUrl' => cp_route('logout').'?redirect='.$redirect,
+        ]);
     }
 }
diff --git a/src/Http/Controllers/CP/Collections/CollectionsController.php b/src/Http/Controllers/CP/Collections/CollectionsController.php
index 3b4c8dc59cb..f09de9f9ab8 100644
--- a/src/Http/Controllers/CP/Collections/CollectionsController.php
+++ b/src/Http/Controllers/CP/Collections/CollectionsController.php
@@ -3,6 +3,7 @@
 namespace Statamic\Http\Controllers\CP\Collections;
 
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 use Statamic\Contracts\Entries\Collection as CollectionContract;
 use Statamic\Contracts\Entries\Entry as EntryContract;
 use Statamic\CP\Column;
@@ -43,9 +44,13 @@ public function index(Request $request)
             ];
         }
 
-        return view('statamic::collections.index', [
-            'collections' => $this->collections(),
+        return Inertia::render('collections/Index', [
+            'collections' => $collections = $this->collections()->all(),
+            'architecturalBackground' => empty($collections),
             'columns' => $columns,
+            'createUrl' => cp_route('collections.create'),
+            'actionUrl' => cp_route('collections.actions.run'),
+            'canCreate' => User::current()->can('create', 'Statamic\Contracts\Entries\Collection'),
         ]);
     }
 
@@ -145,20 +150,68 @@ public function show(Request $request, $collection)
             'actions' => Action::for($collection, ['view' => 'form']),
         ];
 
-        if ($collection->queryEntries()->count() === 0) {
-            return view('statamic::collections.empty', $viewData);
-        }
+        $user = \Statamic\Facades\User::current();
+        $props = [
+            'title' => $collection->title(),
+            'handle' => $collection->handle(),
+            'icon' => $collection->icon(),
+            'canCreate' => $viewData['canCreate'],
+            'createUrls' => $viewData['createUrls'],
+            'createLabel' => $collection->createLabel(),
+            'blueprints' => $blueprints->map(fn ($blueprint) => [
+                ...$blueprint,
+                'createEntryUrl' => cp_route('collections.entries.create', [$collection->handle(), $site, 'blueprint' => $blueprint['handle']]),
+            ])->all(),
+            'sortColumn' => $collection->sortField(),
+            'sortDirection' => $collection->sortDirection(),
+            'columns' => $columns,
+            'filters' => $viewData['filters'],
+            'actions' => $viewData['actions'],
+            'actionUrl' => cp_route('collections.actions.run'),
+            'entriesActionUrl' => cp_route('collections.entries.actions.run', $collection->handle()),
+            'reorderUrl' => cp_route('collections.entries.reorder', $collection->handle()),
+            'editUrl' => $collection->editUrl(),
+            'blueprintsUrl' => cp_route('blueprints.collections.index', $collection),
+            'scaffoldUrl' => cp_route('collections.scaffold', $collection->handle()),
+            'canEdit' => $user->can('edit', $collection),
+            'canEditBlueprints' => $user->can('configure fields'),
+            'initialSite' => $site->handle(),
+            'sites' => $viewData['sites'],
+            'canChangeLocalizationDeleteBehavior' => $viewData['canChangeLocalizationDeleteBehavior'],
+        ];
 
-        if (! $collection->hasStructure()) {
-            return view('statamic::collections.show', $viewData);
+        if ($collection->hasStructure()) {
+            $structure = $collection->structure();
+            $props = [
+                ...$props,
+                'structured' => $user->can('reorder', $collection),
+                'structurePagesUrl' => cp_route('collections.tree.index', $structure->handle()),
+                'structureSubmitUrl' => cp_route('collections.tree.update', $collection->handle()),
+                'structureMaxDepth' => $structure->maxDepth() ?? PHP_FLOAT_MAX, // "Infinity"
+                'structureExpectsRoot' => $structure->expectsRoot(),
+                'structureShowSlugs' => $structure->showSlugs(),
+            ];
         }
 
-        $structure = $collection->structure();
+        if ($collection->queryEntries()->count() === 0) {
+            return Inertia::render('collections/Empty', [
+                ...Arr::only($props, [
+                    'title',
+                    'blueprints',
+                    'canEdit',
+                    'editUrl',
+                    'canEditBlueprints',
+                    'canCreate',
+                    'createLabel',
+                    'blueprintsUrl',
+                    'scaffoldUrl',
+                ]),
+                'createEntryUrl' => $viewData['createUrls'][$site->handle()],
+                'architecturalBackground' => true,
+            ]);
+        }
 
-        return view('statamic::collections.show', array_merge($viewData, [
-            'structure' => $structure,
-            'expectsRoot' => $structure->expectsRoot(),
-        ]));
+        return Inertia::render('collections/Show', $props);
     }
 
     public function create()
diff --git a/src/Http/Controllers/CP/Collections/EntriesController.php b/src/Http/Controllers/CP/Collections/EntriesController.php
index 683b14c1d14..50311a3f7cc 100644
--- a/src/Http/Controllers/CP/Collections/EntriesController.php
+++ b/src/Http/Controllers/CP/Collections/EntriesController.php
@@ -4,6 +4,7 @@
 
 use Illuminate\Http\Request;
 use Illuminate\Validation\ValidationException;
+use Inertia\Inertia;
 use Statamic\Contracts\Entries\Entry as EntryContract;
 use Statamic\Exceptions\BlueprintNotFoundException;
 use Statamic\Facades\Action;
@@ -171,6 +172,14 @@ public function edit(Request $request, $collection, $entry)
             session()->now('success', __('Entry created'));
         }
 
+        return Inertia::render('entries/Edit', [
+            ...$viewData,
+            'canEditBlueprint' => User::current()->can('configure fields'),
+            'createAnotherUrl' => cp_route('collections.entries.create', [$viewData['collection'], $viewData['locale']]),
+            'initialListingUrl' => cp_route('collections.show', $viewData['collection']),
+            'itemActionUrl' => cp_route('collections.entries.actions.run', $viewData['collection']),
+        ]);
+
         return view('statamic::entries.edit', array_merge($viewData, [
             'entry' => $entry,
         ]));
@@ -333,7 +342,9 @@ public function create(Request $request, $collection, $site)
             return collect($viewData);
         }
 
-        return view('statamic::entries.create', $viewData);
+        return Inertia::render('entries/Create', [
+            ...$viewData,
+        ]);
     }
 
     public function store(Request $request, $collection, $site)
diff --git a/src/Http/Controllers/CP/CpController.php b/src/Http/Controllers/CP/CpController.php
index 981a23e7103..b7a65ed5f88 100644
--- a/src/Http/Controllers/CP/CpController.php
+++ b/src/Http/Controllers/CP/CpController.php
@@ -4,6 +4,7 @@
 
 use Illuminate\Auth\Access\AuthorizationException as LaravelAuthException;
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 use Statamic\Exceptions\AuthorizationException;
 use Statamic\Exceptions\ElevatedSessionAuthorizationException;
 use Statamic\Http\Controllers\Controller;
@@ -32,7 +33,9 @@ public function __construct(Request $request)
      */
     public function pageNotFound()
     {
-        return response()->view('statamic::errors.404', [], 404);
+        return Inertia::render('errors/404')
+            ->toResponse(request())
+            ->setStatusCode(404);
     }
 
     public function authorize($ability, $args = [], $message = null)
diff --git a/src/Http/Controllers/CP/DashboardController.php b/src/Http/Controllers/CP/DashboardController.php
index d415f9676ce..faeea4c8c95 100644
--- a/src/Http/Controllers/CP/DashboardController.php
+++ b/src/Http/Controllers/CP/DashboardController.php
@@ -2,6 +2,7 @@
 
 namespace Statamic\Http\Controllers\CP;
 
+use Inertia\Inertia;
 use Statamic\Facades\Preference;
 use Statamic\Facades\Site;
 use Statamic\Facades\User;
@@ -23,7 +24,7 @@ public function index(Loader $loader)
             return view('statamic::dashboard.empty');
         }
 
-        return view('statamic::dashboard.dashboard', [
+        return Inertia::render('Dashboard', [
             'widgets' => $widgets,
         ]);
     }
diff --git a/src/Http/Controllers/CP/Sites/SitesController.php b/src/Http/Controllers/CP/Sites/SitesController.php
index 66d0c5be937..70359ec3f00 100644
--- a/src/Http/Controllers/CP/Sites/SitesController.php
+++ b/src/Http/Controllers/CP/Sites/SitesController.php
@@ -3,6 +3,7 @@
 namespace Statamic\Http\Controllers\CP\Sites;
 
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 use Statamic\Facades\Site;
 use Statamic\Http\Controllers\CP\CpController;
 
@@ -22,10 +23,11 @@ public function edit()
             ->addValues($this->values())
             ->preProcess();
 
-        return view('statamic::sites.configure', [
+        return Inertia::render('sites/Edit', [
             'blueprint' => $blueprint->toPublishArray(),
             'values' => $fields->values(),
             'meta' => $fields->meta(),
+            'updateUrl' => cp_route('sites.update'),
         ]);
     }
 
diff --git a/src/Http/Controllers/ForgotPasswordController.php b/src/Http/Controllers/ForgotPasswordController.php
index 9bfb5c99f16..6553db0ebc3 100644
--- a/src/Http/Controllers/ForgotPasswordController.php
+++ b/src/Http/Controllers/ForgotPasswordController.php
@@ -4,6 +4,7 @@
 
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Password;
+use Inertia\Inertia;
 use Statamic\Auth\Passwords\PasswordReset;
 use Statamic\Auth\SendsPasswordResetEmails;
 use Statamic\Facades\URL;
@@ -22,8 +23,9 @@ public function __construct()
 
     public function showLinkRequestForm()
     {
-        return view('statamic::auth.passwords.email')->with([
-            'title' => __('Forgot Your Password?'),
+        return Inertia::render('auth/passwords/Email', [
+            'action' => cp_route('password.email'),
+            'loginUrl' => cp_route('login'),
         ]);
     }
 
diff --git a/src/Http/Controllers/ResetPasswordController.php b/src/Http/Controllers/ResetPasswordController.php
index e2e63ca7e10..1c9034d7c01 100644
--- a/src/Http/Controllers/ResetPasswordController.php
+++ b/src/Http/Controllers/ResetPasswordController.php
@@ -5,6 +5,7 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Hash;
 use Illuminate\Support\Facades\Password;
+use Inertia\Inertia;
 use Statamic\Auth\Passwords\PasswordReset;
 use Statamic\Auth\ResetsPasswords;
 use Statamic\Contracts\Auth\User;
@@ -21,10 +22,12 @@ public function __construct()
 
     public function showResetForm(Request $request, $token = null)
     {
-        return view('statamic::auth.passwords.reset')->with([
+        return Inertia::render('auth/passwords/Reset', [
+            'loginUrl' => cp_route('login'),
             'token' => $token,
             'email' => $request->email,
             'action' => $this->resetFormAction(),
+            'redirect' => $request->redirect,
             'title' => $this->resetFormTitle(),
         ]);
     }
diff --git a/src/Http/Controllers/TwoFactorChallengeController.php b/src/Http/Controllers/TwoFactorChallengeController.php
index 7f2087ae268..352f028b761 100644
--- a/src/Http/Controllers/TwoFactorChallengeController.php
+++ b/src/Http/Controllers/TwoFactorChallengeController.php
@@ -5,6 +5,7 @@
 use Illuminate\Http\Exceptions\HttpResponseException;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
 use Statamic\Events\TwoFactorAuthenticationFailed;
 use Statamic\Events\ValidTwoFactorAuthenticationCodeProvided;
 use Statamic\Http\Middleware\RedirectIfAuthenticated;
@@ -24,10 +25,11 @@ public function index(TwoFactorChallengeRequest $request)
             throw new HttpResponseException(redirect()->route('statamic.cp.login'));
         }
 
-        return view('statamic::auth.two-factor.challenge', [
-            'hasError' => $this->hasError(),
+        return Inertia::render('auth/two-factor/Challenge', [
             'action' => $this->formAction(),
             'mode' => session()->get('errors')?->getBag('default')->has('recovery_code') ? 'recovery_code' : 'code',
+            'csrfToken' => csrf_token(),
+            'redirect' => $request->redirect,
         ]);
     }
 
@@ -65,18 +67,4 @@ protected function redirectPath()
     {
         return request('redirect') ?? route('statamic.site');
     }
-
-    protected function hasError()
-    {
-        return function ($field) {
-            if (! $error = optional(session('errors'))->first($field)) {
-                return false;
-            }
-
-            return ! in_array($error, [
-                __('auth.failed'),
-                __('statamic::validation.required'),
-            ]);
-        };
-    }
 }
diff --git a/src/Http/Controllers/TwoFactorSetupController.php b/src/Http/Controllers/TwoFactorSetupController.php
index 7973a619ed3..e0640f02504 100644
--- a/src/Http/Controllers/TwoFactorSetupController.php
+++ b/src/Http/Controllers/TwoFactorSetupController.php
@@ -3,6 +3,7 @@
 namespace Statamic\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Inertia\Inertia;
 use Statamic\Facades\User;
 
 class TwoFactorSetupController extends Controller
@@ -20,7 +21,7 @@ public function __invoke(Request $request)
             return redirect($this->redirectPath());
         }
 
-        return view('statamic::auth.two-factor.setup', [
+        return Inertia::render('auth/two-factor/Setup', [
             'routes' => $this->routes($user),
             'redirect' => $this->redirectPath(),
         ]);
diff --git a/src/Http/Middleware/CP/HandleInertiaRequests.php b/src/Http/Middleware/CP/HandleInertiaRequests.php
new file mode 100644
index 00000000000..3cc310c1cb4
--- /dev/null
+++ b/src/Http/Middleware/CP/HandleInertiaRequests.php
@@ -0,0 +1,181 @@
+<?php
+
+namespace Statamic\Http\Middleware\CP;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Gate;
+use Inertia\Middleware;
+use Statamic\CP\Breadcrumbs\Breadcrumbs;
+use Statamic\CP\Navigation\NavItem;
+use Statamic\Facades\CP\Nav;
+use Statamic\Facades\OAuth;
+use Statamic\Facades\Site;
+use Statamic\Facades\User;
+use Statamic\Licensing\LicenseManager;
+use Statamic\Statamic;
+
+class HandleInertiaRequests extends Middleware
+{
+    /**
+     * The root template that's loaded on the first page visit.
+     *
+     * @see https://inertiajs.com/server-side-setup#root-template
+     *
+     * @var string
+     */
+    protected $rootView = 'statamic::layout';
+
+    /**
+     * Determines the current asset version.
+     *
+     * @see https://inertiajs.com/asset-versioning
+     */
+    public function version(Request $request): ?string
+    {
+        return parent::version($request);
+    }
+
+    /**
+     * Define the props that are shared by default.
+     *
+     * @see https://inertiajs.com/shared-data
+     *
+     * @return array<string, mixed>
+     */
+    public function share(Request $request): array
+    {
+        return array_filter([
+            ...parent::share($request),
+            '_statamic' => $request->inertia() ? $this->alwaysProps() : [
+                ...$this->alwaysProps(),
+                ...$this->protectedProps(),
+                'cmsName' => __(Statamic::pro() ? config('statamic.cp.custom_cms_name', 'Statamic') : 'Statamic'),
+                'logos' => $this->logos(),
+            ],
+        ]);
+    }
+
+    private function alwaysProps()
+    {
+        return [
+            'nav' => $this->nav(),
+            'isInertia' => true,
+        ];
+    }
+
+    private function protectedProps()
+    {
+        if (Statamic::$isRenderingCpException || ! Gate::allows('access cp')) {
+            return [];
+        }
+
+        return [
+            'isPro' => Statamic::pro(),
+            'selectedSiteUrl' => Site::selected()->url(),
+            'licensing' => $this->licensing(),
+            'sessionExpiry' => $this->sessionExpiry(),
+        ];
+    }
+
+    private function logos()
+    {
+        if (! Statamic::pro()) {
+            return false;
+        }
+
+        if (is_string($light = config('statamic.cp.custom_logo_url'))) {
+            $light = ['nav' => $light, 'outside' => $light];
+        }
+
+        if (is_string($dark = config('statamic.cp.custom_dark_logo_url'))) {
+            $dark = ['nav' => $dark, 'outside' => $dark];
+        }
+
+        return [
+            'text' => config('statamic.cp.custom_logo_text'),
+            'light' => [
+                'nav' => $light['nav'] ?? null,
+                'outside' => $light['outside'] ?? null,
+            ],
+            'dark' => [
+                'nav' => $dark['nav'] ?? null,
+                'outside' => $dark['outside'] ?? null,
+            ],
+        ];
+    }
+
+    private function licensing()
+    {
+        $licenses = app(LicenseManager::class);
+
+        return [
+            'valid' => $licenses->valid(),
+            'requestFailed' => $licenses->requestFailed(),
+            'requestFailureMessage' => $licenses->requestFailureMessage(),
+            'isOnPublicDomain' => $licenses->isOnPublicDomain(),
+            'alert' => ($alert = $licenses->licensingAlert()) ? [
+                ...$alert,
+                'manageUrl' => User::current()->can('access licensing utility') ? cp_route('utilities.licensing') : null,
+            ] : null,
+        ];
+    }
+
+    private function nav()
+    {
+        if (Statamic::$isRenderingCpException || ! Gate::allows('access cp')) {
+            return [];
+        }
+
+        return collect(Nav::build())->map(function ($section, $sectionIndex) {
+            return [
+                'id' => (string) $sectionIndex,
+                'display' => $section['display'],
+                'items' => $this->navItems($section['items']->all(), $sectionIndex),
+            ];
+        })->all();
+    }
+
+    private function navItems(array $items, $parentId = null)
+    {
+        return collect($items)->map(function (NavItem $item, $index) use ($parentId) {
+            $id = $parentId !== null ? "{$parentId}.{$index}" : (string) $index;
+
+            return [
+                'id' => $id,
+                'display' => $item->display(),
+                'icon' => $item->icon(),
+                'url' => $item->url(),
+                'attributes' => $item->attributes(),
+                'active' => $item->isActive(),
+                'children' => $this->navItems($item->resolveChildren()->children()?->all() ?? [], $id),
+                'extra' => $item->extra(),
+                'view' => ($view = $item->view()) ? view($view, ['item' => $item])->render() : null,
+            ];
+        })->all();
+    }
+
+    private function breadcrumbs()
+    {
+        return Breadcrumbs::additional();
+    }
+
+    private function sessionExpiry()
+    {
+        return [
+            'email' => User::current()->email(),
+            'lifetime' => config('session.lifetime') * 60,
+            'warnAt' => 60,
+            'oauthProvider' => $this->sessionExpiryOauth(),
+            'auth' => config('statamic.cp.auth'),
+        ];
+    }
+
+    private function sessionExpiryOauth()
+    {
+        if (! $provider = session('oauth-provider')) {
+            return null;
+        }
+
+        return OAuth::provider($provider)->toArray();
+    }
+}
diff --git a/src/Http/View/Composers/CustomLogoComposer.php b/src/Http/View/Composers/CustomLogoComposer.php
deleted file mode 100644
index 54e75669cd9..00000000000
--- a/src/Http/View/Composers/CustomLogoComposer.php
+++ /dev/null
@@ -1,58 +0,0 @@
-<?php
-
-namespace Statamic\Http\View\Composers;
-
-use Illuminate\View\View;
-use Statamic\Statamic;
-use Statamic\Support\Arr;
-
-class CustomLogoComposer
-{
-    const VIEWS = [
-        'statamic::partials.global-header',
-        'statamic::partials.outside-logo',
-    ];
-
-    public function compose(View $view)
-    {
-        $view->with('customLogo', $this->customLogo($view));
-        $view->with('customDarkLogo', $this->customLogo($view, dark: true));
-        $view->with('customLogoText', $this->customLogo($view, text: true));
-    }
-
-    protected function customLogo($view, bool $dark = false, bool $text = false)
-    {
-        if (! Statamic::pro()) {
-            return false;
-        }
-
-        $config = config('statamic.cp.custom_logo_url');
-        if ($dark && config('statamic.cp.custom_dark_logo_url')) {
-            $config = config('statamic.cp.custom_dark_logo_url');
-        }
-        if ($text && config('statamic.cp.custom_logo_text')) {
-            $config = config('statamic.cp.custom_logo_text');
-        }
-
-        switch ($view->name()) {
-            case 'statamic::partials.outside-logo':
-                $type = 'outside';
-                break;
-            case 'statamic::partials.global-header':
-                $type = 'nav';
-                break;
-            default:
-                $type = 'other';
-        }
-
-        if ($logo = Arr::get($config, $type)) {
-            return $logo;
-        }
-
-        if (! is_array($config)) {
-            return $config;
-        }
-
-        return false;
-    }
-}
diff --git a/src/Http/View/Composers/JavascriptComposer.php b/src/Http/View/Composers/JavascriptComposer.php
index f25b9afd20f..97affd4e7a9 100644
--- a/src/Http/View/Composers/JavascriptComposer.php
+++ b/src/Http/View/Composers/JavascriptComposer.php
@@ -55,7 +55,6 @@ private function commonVariables()
     private function protectedVariables()
     {
         $user = User::current();
-        $licenses = app('Statamic\Licensing\LicenseManager');
 
         return [
             'version' => Statamic::version(),
@@ -71,6 +70,7 @@ private function protectedVariables()
             'multisiteEnabled' => Site::multiEnabled(),
             'sites' => $this->sites(),
             'selectedSite' => Site::selected()->handle(),
+            'supportUrl' => config('statamic.cp.support_url'),
             'preloadableFieldtypes' => FieldtypeRepository::preloadable()->keys(),
             'livePreview' => config('statamic.live_preview'),
             'permissions' => $this->permissions($user),
@@ -78,6 +78,7 @@ private function protectedVariables()
             'commandPaletteCategories' => Category::order(),
             'commandPalettePreloadedItems' => CommandPalette::getPreloadedItems(),
             'setPreviewImages' => Sets::previewImageConfig(),
+            'linkToDocs' => config('statamic.cp.link_to_docs'),
         ];
     }
 
@@ -109,6 +110,7 @@ protected function user($user)
             'preferences' => Preference::all(),
             'permissions' => $user->permissions()->all(),
             'theme' => $user->preferredTheme(),
+            'is_impersonating' => session()->has('statamic_impersonated_by'),
         ])->toArray();
     }
 
diff --git a/src/Http/View/Composers/NavComposer.php b/src/Http/View/Composers/NavComposer.php
deleted file mode 100644
index 9b8d3df5b1e..00000000000
--- a/src/Http/View/Composers/NavComposer.php
+++ /dev/null
@@ -1,22 +0,0 @@
-<?php
-
-namespace Statamic\Http\View\Composers;
-
-use Illuminate\View\View;
-use Statamic\CP\Breadcrumbs\Breadcrumbs;
-use Statamic\Facades\Blink;
-use Statamic\Facades\CP\Nav;
-
-class NavComposer
-{
-    const VIEWS = [
-        'statamic::partials.nav-main',
-        'statamic::partials.global-header',
-    ];
-
-    public function compose(View $view)
-    {
-        $view->with('nav', Blink::once('nav-composer-navigation', fn () => Nav::build()));
-        $view->with('breadcrumbs', Blink::once('nav-composer-breadcrumbs', fn () => Breadcrumbs::build()));
-    }
-}
diff --git a/src/Http/View/Composers/SessionExpiryComposer.php b/src/Http/View/Composers/SessionExpiryComposer.php
deleted file mode 100644
index 45d81ecf86d..00000000000
--- a/src/Http/View/Composers/SessionExpiryComposer.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php
-
-namespace Statamic\Http\View\Composers;
-
-use Illuminate\View\View;
-use Statamic\Facades\OAuth;
-use Statamic\Facades\User;
-
-class SessionExpiryComposer
-{
-    const VIEWS = ['statamic::partials.session-expiry'];
-
-    public function compose(View $view)
-    {
-        $view->with([
-            'email' => User::current()->email(),
-            'lifetime' => config('session.lifetime') * 60,
-            'warnAt' => 60,
-            'oauth' => $this->oauth(),
-            'auth' => config('statamic.cp.auth'),
-        ]);
-    }
-
-    protected function oauth()
-    {
-        if (! $provider = session('oauth-provider')) {
-            return null;
-        }
-
-        return OAuth::provider($provider)->toArray();
-    }
-}
diff --git a/src/Providers/CpServiceProvider.php b/src/Providers/CpServiceProvider.php
index 06dc7ec64cb..161af3f4aa2 100644
--- a/src/Providers/CpServiceProvider.php
+++ b/src/Providers/CpServiceProvider.php
@@ -10,16 +10,14 @@
 use Illuminate\Support\Facades\View;
 use Illuminate\Support\ServiceProvider;
 use Illuminate\Support\Str;
+use Inertia\Inertia;
 use Statamic\CP\Utilities\UtilityRepository;
 use Statamic\Extensions\Translation\Loader;
 use Statamic\Extensions\Translation\Translator;
 use Statamic\Facades\User;
 use Statamic\Http\Middleware\CP\StartSession;
-use Statamic\Http\View\Composers\CustomLogoComposer;
 use Statamic\Http\View\Composers\FieldComposer;
 use Statamic\Http\View\Composers\JavascriptComposer;
-use Statamic\Http\View\Composers\NavComposer;
-use Statamic\Http\View\Composers\SessionExpiryComposer;
 use Statamic\Licensing\LicenseManager;
 use Statamic\Licensing\Outpost;
 use Statamic\Notifications\ElevatedSessionVerificationCode;
@@ -29,15 +27,14 @@ class CpServiceProvider extends ServiceProvider
 {
     public function boot()
     {
+        Inertia::setRootView('statamic::layout');
+
         View::composer('statamic::*', function ($view) {
             $view->with('user', User::current());
         });
 
         View::composer(FieldComposer::VIEWS, FieldComposer::class);
-        View::composer(SessionExpiryComposer::VIEWS, SessionExpiryComposer::class);
         View::composer(JavascriptComposer::VIEWS, JavascriptComposer::class);
-        View::composer(NavComposer::VIEWS, NavComposer::class);
-        View::composer(CustomLogoComposer::VIEWS, CustomLogoComposer::class);
 
         Blade::component('statamic::outside-logo', OutsideLogo::class);
 
@@ -94,6 +91,7 @@ protected function registerMiddlewareGroups()
             \Statamic\Http\Middleware\CP\StartSession::class,
             \Illuminate\View\Middleware\ShareErrorsFromSession::class,
             \Illuminate\Foundation\Http\Middleware\VerifyCsrfToken::class,
+            \Statamic\Http\Middleware\CP\HandleInertiaRequests::class,
             \Illuminate\Routing\Middleware\SubstituteBindings::class,
             \Statamic\Http\Middleware\CP\ContactOutpost::class,
             \Statamic\Http\Middleware\CP\AuthGuard::class,
diff --git a/src/Statamic.php b/src/Statamic.php
index f80910a14c0..2f8f7d048de 100644
--- a/src/Statamic.php
+++ b/src/Statamic.php
@@ -8,6 +8,7 @@
 use Illuminate\Support\Facades\Artisan;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Vite;
+use Inertia\Inertia;
 use Laravel\Nova\Nova;
 use Statamic\Facades\File;
 use Statamic\Facades\URL;
@@ -36,6 +37,7 @@ class Statamic
     protected static $jsonVariables = [];
     protected static $bootedCallbacks = [];
     protected static $afterInstalledCallbacks = [];
+    public static bool $isRenderingCpException = false;
 
     public static function version()
     {
@@ -467,4 +469,17 @@ public static function cpDirection()
     {
         return TextDirection::of(static::cpLocale());
     }
+
+    public static function nonInertiaPageData()
+    {
+        $props = Inertia::getShared();
+        $props['_statamic']['isInertia'] = false;
+
+        return [
+            'url' => '/'.request()->path(),
+            'component' => 'NonInertiaPage',
+            'version' => inertia()->getVersion(),
+            'props' => $props,
+        ];
+    }
 }
diff --git a/tests/Auth/LoginTest.php b/tests/Auth/LoginTest.php
index a5493696986..9e8a5586b64 100644
--- a/tests/Auth/LoginTest.php
+++ b/tests/Auth/LoginTest.php
@@ -24,7 +24,7 @@ public function it_shows_the_login_page()
         $this
             ->get(cp_route('login'))
             ->assertOk()
-            ->assertViewIs('statamic::auth.login');
+            ->assertInertia(fn ($page) => $page->component('auth/Login'));
     }
 
     #[Test]
diff --git a/tests/CP/Navigation/NavTest.php b/tests/CP/Navigation/NavTest.php
index a0201f09109..4d0a8afd1ae 100644
--- a/tests/CP/Navigation/NavTest.php
+++ b/tests/CP/Navigation/NavTest.php
@@ -82,7 +82,7 @@ public function it_can_create_a_nav_item_with_a_more_custom_config()
             ->url('/human-cyborg-relations')
             ->view('cp.nav.importer')
             ->can('index', DroidsClass::class)
-            ->attributes(['target' => '_blank', 'class' => 'red']);
+            ->attributes($attrs = ['target' => '_blank', 'class' => 'red']);
 
         $item = $this->build()->get('Droids')->first();
 
@@ -93,7 +93,7 @@ public function it_can_create_a_nav_item_with_a_more_custom_config()
         $this->assertEquals('cp.nav.importer', $item->view());
         $this->assertEquals('index', $item->authorization()->ability);
         $this->assertEquals(DroidsClass::class, $item->authorization()->arguments);
-        $this->assertEquals(' target="_blank" class="red"', $item->attributes());
+        $this->assertEquals($attrs, $item->attributes());
     }
 
     #[Test]
diff --git a/tests/Feature/Collections/ShowCollectionTestCase.php b/tests/Feature/Collections/ShowCollectionTestCase.php
index e2b993e8216..78ba449051f 100644
--- a/tests/Feature/Collections/ShowCollectionTestCase.php
+++ b/tests/Feature/Collections/ShowCollectionTestCase.php
@@ -24,7 +24,7 @@ public function it_shows_the_empty_entry_listing_page_if_you_have_permission_and
             ->actingAs($user)
             ->get($collection->showUrl())
             ->assertOk()
-            ->assertViewIs('statamic::collections.empty');
+            ->assertInertia(fn ($page) => $page->component('collections/Empty'));
     }
 
     #[Test]
diff --git a/tests/Feature/Collections/ShowRegularCollectionTest.php b/tests/Feature/Collections/ShowRegularCollectionTest.php
index 891595c3aff..aad3d522518 100644
--- a/tests/Feature/Collections/ShowRegularCollectionTest.php
+++ b/tests/Feature/Collections/ShowRegularCollectionTest.php
@@ -29,7 +29,9 @@ public function it_shows_the_entry_listing_page_if_you_have_permission()
             ->actingAs($user)
             ->get($collection->showUrl())
             ->assertOk()
-            ->assertViewIs('statamic::collections.show')
-            ->assertViewHas('collection', $collection);
+            ->assertInertia(fn ($page) => $page
+                ->component('collections/Show')
+                ->where('handle', 'test')
+            );
     }
 }
diff --git a/tests/Feature/Collections/ShowStructuredCollectionTest.php b/tests/Feature/Collections/ShowStructuredCollectionTest.php
index e2ac0baa971..a3088f42bf0 100644
--- a/tests/Feature/Collections/ShowStructuredCollectionTest.php
+++ b/tests/Feature/Collections/ShowStructuredCollectionTest.php
@@ -33,8 +33,10 @@ public function it_shows_the_structure_tree_if_you_have_permission()
             ->actingAs($user)
             ->get($collection->showUrl())
             ->assertOk()
-            ->assertViewIs('statamic::collections.show')
-            ->assertViewHas('collection', $collection)
-            ->assertViewHas('structure', $collection->structure());
+            ->assertInertia(fn ($page) => $page
+                ->component('collections/Show')
+                ->where('handle', 'test')
+                ->has('structured')
+            );
     }
 }
diff --git a/tests/Feature/Collections/ViewCollectionListingTest.php b/tests/Feature/Collections/ViewCollectionListingTest.php
index 9aa866d12ce..873f280e1e8 100644
--- a/tests/Feature/Collections/ViewCollectionListingTest.php
+++ b/tests/Feature/Collections/ViewCollectionListingTest.php
@@ -30,7 +30,10 @@ public function it_shows_a_list_of_collections()
             ->actingAs($user)
             ->get(cp_route('collections.index'))
             ->assertSuccessful()
-            ->assertViewHas('collections', collect([
+            ->assertInertia(fn ($page) => $page->component('collections/Index')->has('collections', 2));
+
+        /*
+            collect([
                 [
                     'id' => 'bar',
                     'title' => 'Bar',
@@ -101,8 +104,9 @@ public function it_shows_a_list_of_collections()
                         'collection' => $collectionB->handle(),
                     ]),
                 ],
-            ]))
+            ])))
             ->assertDontSee('ui-empty-state-menu');
+        */
     }
 
     #[Test]
@@ -114,8 +118,9 @@ public function it_shows_no_results_when_there_are_no_collections()
             ->actingAs($user)
             ->get(cp_route('collections.index'))
             ->assertSuccessful()
-            ->assertViewHas('collections', collect([]))
-            ->assertSee('ui-empty-state-menu');
+            ->assertInertia(fn ($page) => $page
+                ->component('collections/Index')
+                ->has('collections', 0));
     }
 
     #[Test]
@@ -130,10 +135,10 @@ public function it_filters_out_collections_the_user_cannot_access()
             ->actingAs($user)
             ->get(cp_route('collections.index'))
             ->assertSuccessful()
-            ->assertViewHas('collections', function ($collections) {
-                return count($collections) === 1 && $collections[0]['id'] === 'bar';
-            })
-            ->assertDontSee('ui-empty-state-menu');
+            ->assertInertia(fn ($page) => $page
+                ->component('collections/Index')
+                ->has('collections', 1)
+                ->where('collections.0.id', 'bar'));
     }
 
     #[Test]
@@ -148,10 +153,11 @@ public function it_doesnt_filter_out_collections_if_they_have_permission_to_conf
             ->actingAs($user)
             ->get(cp_route('collections.index'))
             ->assertSuccessful()
-            ->assertViewHas('collections', function ($collections) {
-                return $collections->map->id->all() === ['bar', 'foo'];
-            })
-            ->assertDontSee('ui-empty-state-menu');
+            ->assertInertia(fn ($page) => $page
+                ->component('collections/Index')
+                ->has('collections', 2)
+                ->where('collections.0.id', 'bar')
+                ->where('collections.1.id', 'foo'));
     }
 
     #[Test]
@@ -178,7 +184,7 @@ public function create_collection_button_is_visible_with_permission_to_configure
         $response = $this
             ->actingAs($user)
             ->get(cp_route('collections.index'))
-            ->assertSee('Create Collection');
+            ->assertInertia(fn ($page) => $page->where('canCreate', true));
     }
 
     #[Test]
@@ -191,8 +197,7 @@ public function create_collection_button_is_not_visible_without_permission_to_co
         $response = $this
             ->actingAs($user)
             ->get(cp_route('collections.index'))
-            ->assertOk()
-            ->assertSee(':can-create-collections="false"', escape: false);
+            ->assertInertia(fn ($page) => $page->where('canCreate', false));
     }
 
     private function createCollection($handle)
diff --git a/tests/Feature/Users/EnableTwoFactorTest.php b/tests/Feature/Users/EnableTwoFactorTest.php
index 083f484b124..a2d9f9561d5 100644
--- a/tests/Feature/Users/EnableTwoFactorTest.php
+++ b/tests/Feature/Users/EnableTwoFactorTest.php
@@ -112,12 +112,13 @@ public function it_doesnt_regenerate_secret_when_validation_error_is_present($ur
         $user->set('two_factor_recovery_codes', $originalRecoveryCodes = encrypt(['abc', 'def', 'ghi', 'jkl', 'mno', 'pqr', 'stu', 'vwx']));
         $user->save();
 
+        $errors = new \Illuminate\Support\ViewErrorBag;
+        $errors->put('default', new \Illuminate\Support\MessageBag(['code' => 'The provided two factor authentication code was invalid.']));
+
         $this
             ->actingAs($user)
             ->withActiveElevatedSession()
-            ->session([
-                'errors' => collect(['code' => 'The provided two factor authentication code was invalid.']),
-            ])
+            ->withSession(['errors' => $errors])
             ->get($url())
             ->assertOk()
             ->assertJsonStructure(['qr', 'secret_key', 'confirm_url']);
diff --git a/tests/Feature/Users/TwoFactorChallengeTest.php b/tests/Feature/Users/TwoFactorChallengeTest.php
index a8572e2ddb9..2f935605776 100644
--- a/tests/Feature/Users/TwoFactorChallengeTest.php
+++ b/tests/Feature/Users/TwoFactorChallengeTest.php
@@ -43,7 +43,7 @@ public function it_shows_the_two_factor_challenge_page()
         $this
             ->session(['login.id' => $user->id()])
             ->get(cp_route('two-factor-challenge'))
-            ->assertViewIs('statamic::auth.two-factor.challenge');
+            ->assertInertia(fn ($page) => $page->component('auth/two-factor/Challenge'));
     }
 
     #[Test]
diff --git a/tests/Feature/Users/TwoFactorSetupTest.php b/tests/Feature/Users/TwoFactorSetupTest.php
index 72236bc0cfe..8eef490a09e 100644
--- a/tests/Feature/Users/TwoFactorSetupTest.php
+++ b/tests/Feature/Users/TwoFactorSetupTest.php
@@ -22,7 +22,7 @@ public function it_shows_the_two_factor_setup_view()
         $this
             ->actingAs($this->user())
             ->get(cp_route('two-factor-setup'))
-            ->assertViewIs('statamic::auth.two-factor.setup');
+            ->assertInertia(fn ($page) => $page->component('auth/two-factor/Setup'));
     }
 
     #[Test]
@@ -42,7 +42,7 @@ public function redirect_url_is_referer()
             ->get(cp_route('two-factor-setup', [
                 'referer' => 'http://localhost/cp/collections',
             ]))
-            ->assertViewHas('redirect', 'http://localhost/cp/collections');
+            ->assertInertia(fn ($page) => $page->where('redirect', 'http://localhost/cp/collections'));
     }
 
     private function user()
diff --git a/tests/TestCase.php b/tests/TestCase.php
index 31a4cd2fefe..75aed4cf270 100644
--- a/tests/TestCase.php
+++ b/tests/TestCase.php
@@ -64,6 +64,7 @@ protected function getPackageProviders($app)
     {
         return [
             \Statamic\Providers\StatamicServiceProvider::class,
+            \Inertia\ServiceProvider::class,
             \Rebing\GraphQL\GraphQLServiceProvider::class,
             \Wilderborn\Partyline\ServiceProvider::class,
             \Archetype\ServiceProvider::class,
@@ -92,6 +93,8 @@ protected function resolveApplicationConfiguration($app)
 
     protected function getEnvironmentSetUp($app)
     {
+        $app['config']->set('inertia.testing.page_paths', [statamic_path('resources/js/pages')]);
+
         $app['config']->set('auth.providers.users.driver', 'statamic');
         $app['config']->set('statamic.stache.watcher', false);
         $app['config']->set('statamic.users.repository', 'file');
diff --git a/tests/View/Components/OutsideLogoTest.php b/tests/View/Components/OutsideLogoTest.php
deleted file mode 100644
index 0f41363b293..00000000000
--- a/tests/View/Components/OutsideLogoTest.php
+++ /dev/null
@@ -1,60 +0,0 @@
-<?php
-
-namespace Tests\View\Components;
-
-use Illuminate\Support\Facades\Blade;
-use PHPUnit\Framework\Attributes\Group;
-use PHPUnit\Framework\Attributes\Test;
-use Statamic\Statamic;
-use Tests\TestCase;
-
-#[Group('view-components')]
-class OutsideLogoTest extends TestCase
-{
-    #[Test]
-    public function it_renders_default_statamic_logo_when_no_custom_logo_is_set()
-    {
-        $this->assertStringContainsString(
-            Statamic::svg('icons/statamic-logo-lime.svg'),
-            Blade::render('<x-statamic::outside-logo />')
-        );
-    }
-
-    #[Test]
-    public function it_renders_custom_logo_when_configured()
-    {
-        config(['statamic.cp.custom_logo_url' => 'https://example.com/logo.png']);
-
-        $rendered = Blade::render('<x-statamic::outside-logo />');
-
-        $this->assertStringContainsString('https://example.com/logo.png', $rendered);
-        $this->assertStringContainsString('white-label-logo', $rendered);
-    }
-
-    #[Test]
-    public function it_renders_custom_dark_logo_when_configured()
-    {
-        config([
-            'statamic.cp.custom_logo_url' => 'https://example.com/logo.png',
-            'statamic.cp.custom_dark_logo_url' => 'https://example.com/logo-dark.png',
-        ]);
-
-        $rendered = Blade::render('<x-statamic::outside-logo />');
-
-        $this->assertStringContainsString('https://example.com/logo.png', $rendered);
-        $this->assertStringContainsString('https://example.com/logo-dark.png', $rendered);
-        $this->assertStringContainsString('dark:hidden', $rendered);
-        $this->assertStringContainsString('hidden dark:block', $rendered);
-    }
-
-    #[Test]
-    public function it_renders_custom_logo_text_when_configured()
-    {
-        config(['statamic.cp.custom_logo_text' => 'My Custom CMS']);
-
-        $rendered = Blade::render('<x-statamic::outside-logo />');
-
-        $this->assertStringContainsString('My Custom CMS', $rendered);
-        $this->assertStringContainsString('text-lg font-medium opacity-50', $rendered);
-    }
-}