diff --git a/resources/js/components/DropdownItem.vue b/resources/js/components/DropdownItem.vue
index 557eea5dbe4..a1fe9b2ab7e 100644
--- a/resources/js/components/DropdownItem.vue
+++ b/resources/js/components/DropdownItem.vue
@@ -11,6 +11,8 @@ export default {
 
     props: ['text', 'redirect', 'externalLink'],
 
+    inject: ['popover'],
+
     computed: {
 
         href() {
@@ -32,7 +34,7 @@ export default {
 
             this.$emit('click', $event);
 
-            this.$parent.close();
+            this.popover.vm.close();
         },
 
     }
diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index f83e02faa49..de7cea3df36 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -9,6 +9,7 @@
             :to="portalTargetName"
             :target-class="`popover-container ${targetClass || ''}`"
         >
+        <provider :variables="provide">
             <div :class="`${isOpen ? 'popover-open' : ''}`" v-on-clickaway="clickawayClose">
                 <div ref="popover" class="popover" v-if="!disabled">
                     <div class="popover-content bg-white shadow-popover rounded-md">
@@ -16,6 +17,7 @@
                     </div>
                 </div>
             </div>
+        </provider>
         </portal>
 
     </div>
@@ -24,11 +26,16 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
+import Provider from './live-preview/Provider.vue';
 
 export default {
 
     mixins: [ clickaway ],
 
+    components: {
+        Provider,
+    },
+
     props: {
         autoclose: {
             type: Boolean,
@@ -58,6 +65,9 @@ export default {
             escBinding: null,
             cleanupAutoUpdater: null,
             portalTarget: null,
+            provide: {
+                popover: this.makeProvide(),
+            },
         }
     },
 
@@ -141,6 +151,14 @@ export default {
         destroyPortalTarget() {
             const i = _.findIndex(this.$root.portals, (portal) => portal.key === this.portalTarget.key);
             this.$root.portals.splice(i, 1);
+        },
+
+        makeProvide() {
+            const provide = {};
+            Object.defineProperties(provide, {
+                vm: { get: () => this },
+            });
+            return provide;
         }
     }
 }
diff --git a/resources/js/components/nav/Branch.vue b/resources/js/components/nav/Branch.vue
index b51a1dfddd1..53325f52bb6 100644
--- a/resources/js/components/nav/Branch.vue
+++ b/resources/js/components/nav/Branch.vue
@@ -3,19 +3,19 @@
     <div class="flex">
         <div class="page-move w-6" />
         <div class="flex items-center flex-1 p-2 ml-2 text-xs leading-normal">
-            <div class="flex items-center flex-1" :class="{ 'opacity-50': isHidden || isInHiddenTab }">
-                <template v-if="! isTab">
+            <div class="flex items-center flex-1" :class="{ 'opacity-50': isHidden || isInHiddenSection }">
+                <template v-if="! isSection">
                     <i v-if="isAlreadySvg" class="w-4 h-4 mr-2" v-html="icon"></i>
                     <svg-icon v-else class="w-4 h-4 mr-2" :name="icon" />
                 </template>
 
                 <a
                     @click="$emit('edit', $event)"
-                    :class="{ 'text-sm font-medium': isTab }"
+                    :class="{ 'text-sm font-medium': isSection }"
                     v-text="__(item.text)" />
 
                 <button
-                    v-if="hasChildren && !isTab"
+                    v-if="hasChildren && !isSection"
                     class="p-2 text-gray-600 hover:text-gray-700 transition duration-100 outline-none flex"
                     :class="{ '-rotate-90': !isOpen }"
                     @click="$emit('toggle-open')"
@@ -36,13 +36,13 @@
             <div class="pr-2 flex items-center">
                 <slot name="branch-icon" :branch="item" />
 
-                <svg-icon v-if="isRenamedTab" class="inline-block w-4 h-4 text-gray-500" name="content-writing" v-tooltip="__('Renamed Tab')" />
-                <svg-icon v-else-if="isHidden" class="inline-block w-4 h-4 text-gray-500" name="hidden" v-tooltip="isTab ? __('Hidden Tab') : __('Hidden Item')" />
+                <svg-icon v-if="isRenamedSection" class="inline-block w-4 h-4 text-gray-500" name="content-writing" v-tooltip="__('Renamed Section')" />
+                <svg-icon v-else-if="isHidden" class="inline-block w-4 h-4 text-gray-500" name="hidden" v-tooltip="isSection ? __('Hidden Section') : __('Hidden Item')" />
                 <svg-icon v-else-if="isPinnedAlias" class="inline-block w-4 h-4 text-gray-500" name="pin" v-tooltip="__('Pinned Item')" />
                 <svg-icon v-else-if="isAlias" class="inline-block w-4 h-4 text-gray-500" name="duplicate-ids" v-tooltip="__('Alias Item')" />
                 <svg-icon v-else-if="isMoved" class="inline-block w-4 text-gray-500" name="flip-vertical" v-tooltip="__('Moved Item')" />
                 <svg-icon v-else-if="isModified" class="inline-block w-4 h-4 text-gray-500" name="content-writing" v-tooltip="__('Modified Item')" />
-                <svg-icon v-else-if="isCustom" class="inline-block w-4 text-gray-500" name="user-edit" v-tooltip="isTab ? __('Custom Tab') : __('Custom Item')" />
+                <svg-icon v-else-if="isCustom" class="inline-block w-4 text-gray-500" name="user-edit" v-tooltip="isSection ? __('Custom Section') : __('Custom Item')" />
 
                 <dropdown-list class="ml-4">
                     <slot name="branch-options"
@@ -65,13 +65,13 @@ export default {
 
     props: {
         item: Object,
-        parentTab: Object,
+        parentSection: Object,
         depth: Number,
         root: Boolean,
         vm: Object,
         isOpen: Boolean,
         hasChildren: Boolean,
-        disableTabs: Boolean,
+        disableSections: Boolean,
         topLevel: Boolean,
     },
 
@@ -83,8 +83,8 @@ export default {
 
     computed: {
 
-        isTab() {
-            if (this.disableTabs) {
+        isSection() {
+            if (this.disableSections) {
                 return false;
             }
 
@@ -103,16 +103,16 @@ export default {
             return this.icon.startsWith('<svg');
         },
 
-        isRenamedTab() {
-            return this.isTab && this.item.text !== data_get(this.item, 'config.display_original');
+        isRenamedSection() {
+            return this.isSection && this.item.text !== data_get(this.item, 'config.display_original');
         },
 
         isHidden() {
             return data_get(this.item, 'manipulations.action') === '@hide';
         },
 
-        isInHiddenTab() {
-            return data_get(this.parentTab, 'manipulations.action') === '@hide';
+        isInHiddenSection() {
+            return data_get(this.parentSection, 'manipulations.action') === '@hide';
         },
 
         isPinnedAlias() {
diff --git a/resources/js/components/nav/Builder.vue b/resources/js/components/nav/Builder.vue
index 6b4c541249e..f4b456fd166 100644
--- a/resources/js/components/nav/Builder.vue
+++ b/resources/js/components/nav/Builder.vue
@@ -22,7 +22,7 @@
                         </button>
                     </template>
                     <dropdown-item :text="__('Add Nav Item')" @click="addItem(topLevelTreeData)" />
-                    <dropdown-item :text="__('Add Tab')" @click="addTab" />
+                    <dropdown-item :text="__('Add Section')" @click="addSection" />
                 </dropdown-list>
 
                 <div class="ml-4 text-left" :class="{ 'btn-group': hasSaveAsOptions }">
@@ -64,12 +64,12 @@
             />
         </div>
 
-        <div v-if="!loading" class="page-tree page-tree-with-tabs w-full">
+        <div v-if="!loading" class="page-tree page-tree-with-sections w-full">
             <draggable-tree
                 draggable
                 cross-tree
                 class="mb-8"
-                :class="{ 'tab-placeholder-inner': showTopLevelTabPlaceholder }"
+                :class="{ 'section-placeholder-inner': showTopLevelSectionPlaceholder }"
                 ref="topLevelTree"
                 :data="topLevelTreeData"
                 :space="1"
@@ -85,7 +85,7 @@
                     :vm="vm"
                     :is-open="item.open"
                     :has-children="item.children.length > 0"
-                    :disable-tabs="true"
+                    :disable-sections="true"
                     :top-level="true"
                     @edit="editItem(item, true)"
                     @toggle-open="store.toggleOpen(item)"
@@ -118,7 +118,7 @@
             <draggable-tree
                 draggable
                 cross-tree
-                class="page-tree-with-tabs"
+                class="page-tree-with-sections"
                 ref="mainTree"
                 :data="mainTreeData"
                 :space="1"
@@ -130,7 +130,7 @@
                 <tree-branch
                     slot-scope="{ data: item, store, vm }"
                     :item="item"
-                    :parent-tab="getParentTabNode(item)"
+                    :parent-section="getParentSectionNode(item)"
                     :depth="vm.level"
                     :vm="vm"
                     :is-open="item.open"
@@ -147,11 +147,11 @@
                             :text="__('Edit')"
                             @click="editItem(item)" />
                         <dropdown-item
-                            v-if="! isTabNode(item)"
+                            v-if="! isSectionNode(item)"
                             :text="__('Pin to Top Level')"
                             @click="pinItem(item)" />
                         <dropdown-item
-                            v-if="! isTabNode(item)"
+                            v-if="! isSectionNode(item)"
                             :text="__('Duplicate')"
                             @click="aliasItem(item)" />
                         <li class="divider" />
@@ -183,18 +183,18 @@
             @updated="itemUpdated"
         />
 
-        <tab-editor
-            v-if="creatingTab"
+        <section-editor
+            v-if="creatingSection"
             :creating="true"
-            @closed="resetTabEditor"
-            @updated="tabAdded"
+            @closed="resetSectionEditor"
+            @updated="sectionAdded"
         />
 
-        <tab-editor
-            v-if="editingTab"
-            :tab-item="editingTab"
-            @closed="resetTabEditor"
-            @updated="tabUpdated"
+        <section-editor
+            v-if="editingSection"
+            :section-item="editingSection"
+            @closed="resetSectionEditor"
+            @updated="sectionUpdated"
         />
 
         <confirmation-modal
@@ -210,7 +210,7 @@
         <confirmation-modal
             v-if="confirmingRemoval"
             :title="__('Remove')"
-            :bodyText="__('Are you sure you want to remove this tab and all of its children?')"
+            :bodyText="__('Are you sure you want to remove this section and all of its children?')"
             :buttonText="__('Remove')"
             :danger="true"
             @confirm="removeItem(confirmingRemoval, true)"
@@ -225,7 +225,7 @@
 import {DraggableTree} from 'vue-draggable-nested-tree/dist/vue-draggable-nested-tree';
 import TreeBranch from './Branch.vue';
 import ItemEditor from './ItemEditor.vue';
-import TabEditor from './TabEditor.vue';
+import SectionEditor from './SectionEditor.vue';
 import { data_get } from  '../../bootstrap/globals.js'
 
 export default {
@@ -234,7 +234,7 @@ export default {
         DraggableTree,
         TreeBranch,
         ItemEditor,
-        TabEditor,
+        SectionEditor,
     },
 
     props: {
@@ -269,13 +269,13 @@ export default {
             loading: false,
             topLevelTreeData: [],
             mainTreeData: [],
-            originalTabItems: {},
+            originalSectionItems: {},
             changed: false,
             targetDataArray: null,
             creatingItem: false,
             editingItem: false,
-            creatingTab: false,
-            editingTab: false,
+            creatingSection: false,
+            editingSection: false,
             confirmingReset: false,
             confirmingRemoval: false,
             draggingNode: false,
@@ -304,7 +304,7 @@ export default {
             return this.saveAsOptions.length;
         },
 
-        showTopLevelTabPlaceholder() {
+        showTopLevelSectionPlaceholder() {
             if (! this.topLevelTreeData.length) {
                 return true;
             }
@@ -321,23 +321,23 @@ export default {
         setInitialNav(nav) {
             let navConfig = clone(nav);
 
-            this.setOriginalTabItems(navConfig);
+            this.setOriginalSectionItems(navConfig);
 
             let topLevelConfig = navConfig.shift();
 
             this.topLevelTreeData = _.chain(topLevelConfig.items)
-                .map(tab => this.normalizeNavConfig(tab, false))
+                .map(section => this.normalizeNavConfig(section, false))
                 .values()
                 .value();
 
             this.mainTreeData = _.chain(navConfig)
-                .mapObject(tab => this.normalizeNavConfig(tab))
+                .mapObject(section => this.normalizeNavConfig(section))
                 .values()
                 .value();
         },
 
-        setOriginalTabItems(nav) {
-            nav.forEach(tab => this.originalTabItems[tab.display_original] = tab.items_original || []);
+        setOriginalSectionItems(nav) {
+            nav.forEach(section => this.originalSectionItems[section.display_original] = section.items_original || []);
         },
 
         discardChanges() {
@@ -346,14 +346,14 @@ export default {
             this.changed = false;
         },
 
-        normalizeNavConfig(config, isTabNode = true) {
+        normalizeNavConfig(config, isSectionNode = true) {
             let item = {
                 text: config.display,
                 config: config,
                 original: config.original,
-                manipulations: isTabNode ? config : config.manipulations || {},
-                isTab: isTabNode,
-                open: isTabNode,
+                manipulations: isSectionNode ? config : config.manipulations || {},
+                isSection: isSectionNode,
+                open: isSectionNode,
             };
 
             let children = config.items || config.children;
@@ -367,7 +367,7 @@ export default {
                         config: childItem,
                         original: childItem.original,
                         manipulations: childItem.manipulations || {},
-                        isTab: false,
+                        isSection: false,
                     };
                 });
             }
@@ -386,26 +386,26 @@ export default {
             });
 
             // Ensure you can only drop nav item nodes into top level tree root
-            this.$set(this.$refs.topLevelTree.rootData, 'droppable', ! this.isTabNode(node));
+            this.$set(this.$refs.topLevelTree.rootData, 'droppable', ! this.isSectionNode(node));
 
-            // Ensure you can only drop tab nodes to main tree root
-            this.$set(this.$refs.mainTree.rootData, 'droppable', this.isTabNode(node));
+            // Ensure you can only drop section nodes to main tree root
+            this.$set(this.$refs.mainTree.rootData, 'droppable', this.isSectionNode(node));
 
             // Hardcode max depths
             const topLevelTreeMaxDepth = 2 - nodeDepth; // 2 for nav items, and one level of nav item children
-            const mainTreeMaxDepth = 3 - nodeDepth; // 3 for tabs, nav items, and one level of nav item children
+            const mainTreeMaxDepth = 3 - nodeDepth; // 3 for sections, nav items, and one level of nav item children
 
             // Ensure max depth for top level tree
             this.traverseTree(this.topLevelTreeData, (childNode, { depth }) => {
                 if (childNode !== node) {
-                    this.$set(childNode, 'droppable', depth <= topLevelTreeMaxDepth && ! this.isTabNode(node));
+                    this.$set(childNode, 'droppable', depth <= topLevelTreeMaxDepth && ! this.isSectionNode(node));
                 }
             });
 
             // Ensure max depth for main tree
             this.traverseTree(this.mainTreeData, (childNode, { depth }) => {
                 if (childNode !== node) {
-                    this.$set(childNode, 'droppable', depth <= mainTreeMaxDepth && ! this.isTabNode(node));
+                    this.$set(childNode, 'droppable', depth <= mainTreeMaxDepth && ! this.isSectionNode(node));
                 }
             });
         },
@@ -423,17 +423,17 @@ export default {
             });
         },
 
-        isTabNode(node) {
-            return data_get(node, 'isTab', false);
+        isSectionNode(node) {
+            return data_get(node, 'isSection', false);
         },
 
-        isCustomTabNode(node) {
-            return this.isTabNode(node) && data_get(node, 'manipulations.action') === '@create';
+        isCustomSectionNode(node) {
+            return this.isSectionNode(node) && data_get(node, 'manipulations.action') === '@create';
         },
 
-        getParentTabNode(node) {
-            if (! this.isTabNode(node) && node !== undefined) {
-                return this.getParentTabNode(node.parent);
+        getParentSectionNode(node) {
+            if (! this.isSectionNode(node) && node !== undefined) {
+                return this.getParentSectionNode(node.parent);
             }
 
             return node;
@@ -444,7 +444,7 @@ export default {
                 return false;
             }
 
-            return ! this.isTabNode(node.parent);
+            return ! this.isSectionNode(node.parent);
         },
 
         traverseTree(nodes, callback, parentPath = []) {
@@ -472,8 +472,8 @@ export default {
             this.creatingItem = true;
         },
 
-        addTab() {
-            this.creatingTab = true;
+        addSection() {
+            this.creatingSection = true;
         },
 
         itemAdded(createdConfig) {
@@ -490,21 +490,21 @@ export default {
             this.changed = true;
         },
 
-        tabAdded(tabDisplay) {
+        sectionAdded(sectionDisplay) {
             let item = this.normalizeNavConfig({
                 action: '@create',
-                display: tabDisplay,
+                display: sectionDisplay,
                 display_original: false,
             });
 
             this.mainTreeData.push(item);
-            this.resetTabEditor();
+            this.resetSectionEditor();
             this.changed = true;
         },
 
         editItem(item, topLevel) {
-            if (this.isTabNode(item) && ! topLevel) {
-                this.editingTab = item;
+            if (this.isSectionNode(item) && ! topLevel) {
+                this.editingSection = item;
             } else {
                 this.editingItem = item;
             }
@@ -521,10 +521,10 @@ export default {
             this.changed = true;
         },
 
-        tabUpdated(tabDisplay, tabItem) {
-            tabItem.text = tabDisplay;
+        sectionUpdated(sectionDisplay, sectionItem) {
+            sectionItem.text = sectionDisplay;
 
-            this.resetTabEditor();
+            this.resetSectionEditor();
             this.changed = true;
         },
 
@@ -539,7 +539,7 @@ export default {
         },
 
         updateItemAction(item) {
-            if (this.isTabNode(item)) {
+            if (this.isSectionNode(item)) {
                 return;
             }
 
@@ -580,8 +580,8 @@ export default {
                 return false;
             }
 
-            return this.itemHasMovedWithinTab(item)
-                || this.itemHasMovedToAnotherTab(item);
+            return this.itemHasMovedWithinSection(item)
+                || this.itemHasMovedToAnotherSection(item);
         },
 
         itemIsWithinOriginalParentItem(item) {
@@ -592,7 +592,7 @@ export default {
             return this.isChildItemNode(item) && parentsOriginalChildIds.includes(item.config.id);
         },
 
-        itemHasMovedWithinTab(item) {
+        itemHasMovedWithinSection(item) {
             let parentsOriginalChildIds = data_get(item.parent, 'original', { children: [] })
                 .children
                 .map(child => child.id);
@@ -601,25 +601,25 @@ export default {
                 return true;
             }
 
-            let currentTab = data_get(this.getParentTabNode(item), 'config.display_original', 'Top Level');
-            let tabsOriginalIds = this.originalTabItems[currentTab];
+            let currentSection = data_get(this.getParentSectionNode(item), 'config.display_original', 'Top Level');
+            let sectionsOriginalIds = this.originalSectionItems[currentSection];
 
-            if (tabsOriginalIds === undefined) {
+            if (sectionsOriginalIds === undefined) {
                 return false;
             }
 
-            if (! this.isChildItemNode(item) && ! tabsOriginalIds.includes(item.config.id)) {
+            if (! this.isChildItemNode(item) && ! sectionsOriginalIds.includes(item.config.id)) {
                 return true;
             }
 
             return false;
         },
 
-        itemHasMovedToAnotherTab(item) {
-            let currentTab = data_get(this.getParentTabNode(item), 'config.display_original', 'Top Level');
-            let originalTab = data_get(item.original, 'tab') || data_get(item.parent, 'original.tab');
+        itemHasMovedToAnotherSection(item) {
+            let currentSection = data_get(this.getParentSectionNode(item), 'config.display_original', 'Top Level');
+            let originalSection = data_get(item.original, 'section') || data_get(item.parent, 'original.section');
 
-            return currentTab !== originalTab;
+            return currentSection !== originalSection;
         },
 
         itemHasBeenModified(item) {
@@ -639,13 +639,13 @@ export default {
 
         expandAll() {
             this.traverseTree(this.topLevelTreeData, (node) => {
-                if (! this.isTabNode(node)) {
+                if (! this.isSectionNode(node)) {
                     this.$set(node, 'open', true);
                 }
             });
 
             this.traverseTree(this.mainTreeData, (node) => {
-                if (! this.isTabNode(node)) {
+                if (! this.isSectionNode(node)) {
                     this.$set(node, 'open', true);
                 }
             });
@@ -653,13 +653,13 @@ export default {
 
         collapseAll() {
             this.traverseTree(this.topLevelTreeData, (node) => {
-                if (! this.isTabNode(node)) {
+                if (! this.isSectionNode(node)) {
                     this.$set(node, 'open', false);
                 }
             });
 
             this.traverseTree(this.mainTreeData, (node) => {
-                if (! this.isTabNode(node)) {
+                if (! this.isSectionNode(node)) {
                     this.$set(node, 'open', false);
                 }
             });
@@ -671,9 +671,9 @@ export default {
             this.targetDataArray = false;
         },
 
-        resetTabEditor() {
-            this.editingTab = false;
-            this.creatingTab = false;
+        resetSectionEditor() {
+            this.editingSection = false;
+            this.creatingSection = false;
         },
 
         pinItem(item) {
@@ -710,7 +710,7 @@ export default {
         isHideable(item) {
             let action = data_get(item.manipulations, 'action');
 
-            if (this.isTabNode(item) && action === '@create') {
+            if (this.isSectionNode(item) && action === '@create') {
                 return false;
             }
 
@@ -718,7 +718,7 @@ export default {
         },
 
         removeItem(item, bypassConfirmation = false) {
-            if (this.isCustomTabNode(item) && item.children.length && ! bypassConfirmation) {
+            if (this.isCustomSectionNode(item) && item.children.length && ! bypassConfirmation) {
                 return this.confirmingRemoval = item;
             }
 
@@ -779,12 +779,12 @@ export default {
                 'items': this.prepareItemsForSubmission(this.topLevelTreeData),
             });
 
-            this.mainTreeData.forEach(tab => {
+            this.mainTreeData.forEach(section => {
                 tree.push({
-                    'display': tab.text,
-                    'display_original': tab.config.display_original || tab.text,
-                    'action': tab.manipulations.action || false,
-                    'items': this.prepareItemsForSubmission(tab.children),
+                    'display': section.text,
+                    'display_original': section.config.display_original || section.text,
+                    'action': section.manipulations.action || false,
+                    'items': this.prepareItemsForSubmission(section.children),
                 });
             });
 
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index d5bf33c222d..83007ec5442 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -12,34 +12,39 @@
                     v-html="'&times'" />
             </div>
 
-            <div class="flex-1 overflow-auto p-6">
-                <div class="publish-fields">
-
-                <div class="publish-field mb-8" :class="{ 'has-error': validateDisplay }">
-                    <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
-                        <text-input v-model="config.display" :focus="true" />
-                        <div v-if="validateDisplay" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
-                    </div>
-                </div>
+            <div class="flex-1 overflow-auto">
+                <div class="px-2">
+                    <div class="publish-fields @container">
+
+                        <div class="form-group publish-field w-full" :class="{ 'has-error': validateDisplay }">
+                            <div class="field-inner">
+                                <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
+                                <text-input v-model="config.display" :focus="true" />
+                                <div v-if="validateDisplay" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                            </div>
+                        </div>
 
-                <div class="publish-field mb-8" :class="{ 'has-error': validateUrl }">
-                    <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-red-500">*</span></label>
-                        <div class="help-block -mt-2">
-                            <p v-text="__('Enter any internal or external URL.')"></p>
+                        <div class="form-group publish-field w-full" :class="{ 'has-error': validateUrl }">
+                            <div class="field-inner">
+                                <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-red-500">*</span></label>
+                                <div class="help-block -mt-2">
+                                    <p v-text="__('Enter any internal or external URL.')"></p>
+                                </div>
+                                <text-input v-model="config.url" />
+                                <div v-if="validateUrl" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                            </div>
                         </div>
-                        <text-input v-model="config.url" />
-                        <div v-if="validateUrl" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+
                     </div>
                 </div>
 
-                <button
-                    class="btn-primary w-full mt-6"
-                    :class="{ 'opacity-50': false }"
-                    :disabled="false"
-                    @click="save"
-                    v-text="__('Save')" />
+                <div class="p-6">
+                    <button
+                        class="btn-primary w-full"
+                        :class="{ 'opacity-50': false }"
+                        :disabled="false"
+                        @click="save"
+                        v-text="__('Save')" />
                 </div>
             </div>
 
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
new file mode 100644
index 00000000000..f05e18818bd
--- /dev/null
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -0,0 +1,89 @@
+<template>
+
+    <stack narrow name="nav-item-editor" @closed="$emit('closed')">
+        <div slot-scope="{ close }" class="bg-white h-full flex flex-col">
+
+            <div class="bg-gray-200 px-6 py-2 border-b border-gray-300 text-lg font-medium flex items-center justify-between">
+                {{ creating ? __('Add Section') : __('Edit Section') }}
+                <button
+                    type="button"
+                    class="btn-close"
+                    @click="close"
+                    v-html="'&times'" />
+            </div>
+
+            <div class="flex-1 overflow-auto">
+                <div class="px-2">
+                    <div class="publish-fields @container">
+
+                        <div class="form-group publish-field w-full" :class="{ 'has-error': validate }">
+                            <div class="field-inner">
+                                <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
+                                <text-input v-model="section" :focus="true" />
+                                <div v-if="validate" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="p-6">
+                    <button
+                        class="btn-primary w-full"
+                        :class="{ 'opacity-50': false }"
+                        :disabled="false"
+                        @click="save"
+                        v-text="__('Save')" />
+                </div>
+            </div>
+
+        </div>
+    </stack>
+
+</template>
+
+<script>
+import { data_get } from  '../../bootstrap/globals.js'
+
+export default {
+
+    props: {
+        creating: false,
+        sectionItem: {},
+    },
+
+    data() {
+        return {
+            section: data_get(this.sectionItem, 'text') || '',
+            saveKeyBinding: null,
+            validate: false,
+        }
+    },
+
+    created() {
+        this.saveKeyBinding = this.$keys.bindGlobal(['enter', 'mod+enter', 'mod+s'], e => {
+            e.preventDefault();
+            this.save();
+        });
+    },
+
+    destroyed() {
+        this.saveKeyBinding.destroy();
+    },
+
+    methods: {
+
+        save() {
+            this.validate = false;
+
+            if (! this.section) {
+                this.validate = true;
+                return;
+            }
+
+            this.$emit('updated', this.section, this.sectionItem);
+        },
+
+    },
+
+}
+</script>
diff --git a/resources/js/components/nav/TabEditor.vue b/resources/js/components/nav/TabEditor.vue
deleted file mode 100644
index 3e9b8dd4a62..00000000000
--- a/resources/js/components/nav/TabEditor.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-
-    <stack narrow name="nav-item-editor" @closed="$emit('closed')">
-        <div slot-scope="{ close }" class="bg-white h-full flex flex-col">
-
-            <div class="bg-gray-200 px-6 py-2 border-b border-gray-300 text-lg font-medium flex items-center justify-between">
-                {{ creating ? __('Add Tab') : __('Edit Tab') }}
-                <button
-                    type="button"
-                    class="btn-close"
-                    @click="close"
-                    v-html="'&times'" />
-            </div>
-
-            <div class="flex-1 overflow-auto p-6">
-                <div class="publish-fields">
-
-                <div class="publish-field mb-8" :class="{ 'has-error': validate }">
-                    <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
-                        <text-input v-model="tab" :focus="true" />
-                        <div v-if="validate" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
-                    </div>
-                </div>
-
-                <button
-                    class="btn-primary w-full mt-6"
-                    :class="{ 'opacity-50': false }"
-                    :disabled="false"
-                    @click="save"
-                    v-text="__('Save')" />
-                </div>
-            </div>
-
-        </div>
-    </stack>
-
-</template>
-
-<script>
-import { data_get } from  '../../bootstrap/globals.js'
-
-export default {
-
-    props: {
-        creating: false,
-        tabItem: {},
-    },
-
-    data() {
-        return {
-            tab: data_get(this.tabItem, 'text') || '',
-            saveKeyBinding: null,
-            validate: false,
-        }
-    },
-
-    created() {
-        this.saveKeyBinding = this.$keys.bindGlobal(['enter', 'mod+enter', 'mod+s'], e => {
-            e.preventDefault();
-            this.save();
-        });
-    },
-
-    destroyed() {
-        this.saveKeyBinding.destroy();
-    },
-
-    methods: {
-
-        save() {
-            this.validate = false;
-
-            if (! this.tab) {
-                this.validate = true;
-                return;
-            }
-
-            this.$emit('updated', this.tab, this.tabItem);
-        },
-
-    },
-
-}
-</script>
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index 3ac414c9d77..11ff1939afd 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -28,6 +28,7 @@
                     :meta="meta"
                     :errors="errors"
                     :localized-fields="localizedFields"
+                    class="px-2"
                     @updated="values = $event"
                 >
                     <div slot-scope="{ container, setFieldMeta }">
diff --git a/resources/js/components/updater/Updater.vue b/resources/js/components/updater/Updater.vue
index 6b15a403a62..307f279a55e 100644
--- a/resources/js/components/updater/Updater.vue
+++ b/resources/js/components/updater/Updater.vue
@@ -5,7 +5,7 @@
                 <span v-text="name" />
                 <span v-if="currentVersion" class="font-normal text-gray-700 ml-2">{{ currentVersion }}</span>
             </h1>
-            <button v-if="!onLatestVersion" class="btn-primary ml-4" @click="this.modalOpen = true">{{ __('Update') }}</button>
+            <button v-if="!onLatestVersion" class="btn-primary ml-4" @click="modalOpen = true">{{ __('Update') }}</button>
             <div v-if="onLatestVersion" v-text="__('Up to date')" />
         </div>