diff --git a/resources/js/components/fieldtypes/bard/Link.js b/resources/js/components/fieldtypes/bard/Link.js
index 6c4683fe8e6..18b55b9077a 100644
--- a/resources/js/components/fieldtypes/bard/Link.js
+++ b/resources/js/components/fieldtypes/bard/Link.js
@@ -61,12 +61,6 @@ export const Link = Mark.create({
         ];
     },
 
-    addKeyboardShortcuts() {
-        return {
-            'Mod-k': () => this.options.vm.events.emit('link-toggle'),
-        };
-    },
-
     addProseMirrorPlugins() {
         const vm = this.options.vm;
         return [
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 38d76f41b2d..fb24a45477b 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -1,135 +1,110 @@
 <template>
-    <div class="bard-link-toolbar">
-        <div>
-            <div class="border-b bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800 rounded-t-xl">
-                <section class="flex gap-2 items-center p-4 border-b dark:border-gray-800">
-                    <ui-select
-                        v-model="linkType"
-                        :options="visibleLinkTypes"
-                        option-label="title"
-                        option-value="type"
-                        size="sm"
-                        class="flex-1"
-                    />
-
-                    <div class="flex-1">
-                        <!-- URL input -->
-                        <ui-input
-                            v-if="linkType === 'url'"
-                            v-model="url.url"
-                            type="text"
-                            ref="urlInput"
-                            size="sm"
-                            :placeholder="__('URL')"
-                            @keydown.enter.prevent="commit"
-                        />
+    <StackContent class="space-y-5">
+        <section class="flex gap-3 items-center">
+            <ui-select
+                v-model="linkType"
+                :options="visibleLinkTypes"
+                option-label="title"
+                option-value="type"
+                class="w-1/4 min-w-24"
+            />
 
-                        <!-- Email input -->
-                        <ui-input
-                            v-else-if="linkType === 'mailto'"
-                            v-model="urlData.mailto"
-                            type="text"
-                            ref="mailtoInput"
-                            size="sm"
-                            :placeholder="__('Email Address')"
-                            @keydown.enter.prevent="commit"
-                        />
+            <div class="flex-1 min-w-0">
+                <!-- URL input -->
+                <ui-input
+                    v-if="linkType === 'url'"
+                    v-model="url.url"
+                    type="text"
+                    ref="urlInput"
+                    autofocus
+                    :placeholder="__('https://')"
+                    @keydown.enter.prevent="commit"
+                />
 
-                        <!-- Phone input -->
-                        <ui-input
-                            v-else-if="linkType === 'tel'"
-                            v-model="urlData.tel"
-                            ref="telInput"
-                            size="sm"
-                            :placeholder="__('Phone Number')"
-                            @keydown.enter.prevent="commit"
-                        />
+                <!-- Email input -->
+                <ui-input
+                    v-else-if="linkType === 'mailto'"
+                    v-model="urlData.mailto"
+                    type="text"
+                    ref="mailtoInput"
+                    :placeholder="__('Email Address')"
+                    @keydown.enter.prevent="commit"
+                />
 
-                        <!-- Data input -->
-                        <div
-                            v-else
-                            class="flex w-full min-w-[240px] cursor-pointer items-center justify-between"
-                            @click="openSelector"
-                        >
-                            <Icon v-if="isLoading" name="loading" />
-
-                            <div v-else class="flex flex-1 items-center truncate me-2">
-                                <img
-                                    v-if="linkType === 'asset' && itemData.asset && itemData.isImage"
-                                    :src="itemData.asset.thumbnail || itemData.asset.url"
-                                    class="asset-thumbnail lazyloaded h-6 max-h-full w-6 max-w-full rounded-sm object-cover me-2"
-                                />
-                                {{ displayValue }}
-                            </div>
-
-                            <button
-                                class="flex items-center"
-                                v-tooltip="`${__('Browse')}...`"
-                                :aria-label="`${__('Browse')}...`"
-                                @click="openSelector"
-                            >
-                                <ui-icon v-show="linkType === 'asset'" name="folder-image" class="size-4" />
-                                <ui-icon v-show="linkType !== 'asset'" name="folder-generic" class="size-4" />
-                            </button>
-                        </div>
+                <!-- Phone input -->
+                <ui-input
+                    v-else-if="linkType === 'tel'"
+                    v-model="urlData.tel"
+                    ref="telInput"
+                    :placeholder="__('Phone Number')"
+                    @keydown.enter.prevent="commit"
+                />
+
+                <!-- Data input -->
+                <div
+                    v-else
+                    :class="[
+                                'flex overflow-hidden cursor-pointer items-center justify-between',
+                                'w-full block bg-white dark:bg-gray-900 min-w-0',
+                                'border border-gray-300 with-contrast:border-gray-500 dark:border-gray-700 dark:with-contrast:border-gray-500 dark:inset-shadow-2xs dark:inset-shadow-black',
+                                'text-gray-925 dark:text-gray-300 placeholder:text-gray-500 dark:placeholder:text-gray-400/85',
+                                'appearance-none antialiased shadow-ui-sm disabled:shadow-none disabled:opacity-50 not-prose',
+                                'text-sm rounded-lg px-2.5 py-1.5 h-10 leading-[1.125rem]'
+                            ]"
+                    @click="openSelector"
+                >
+                    <Icon v-if="isLoading" name="loading" />
+
+                    <div v-else class="flex flex-1 items-center me-2 overflow-hidden min-w-0">
+                        <img
+                            v-if="linkType === 'asset' && itemData.asset && itemData.asset.isImage"
+                            :src="itemData.asset.thumbnail || itemData.asset.url"
+                            class="asset-thumbnail lazyloaded size-6 max-h-full max-w-full rounded-sm object-cover me-2 flex-shrink-0"
+                        />
+                        <div class="truncate min-w-0 flex-1">{{ displayValue || __('Choose item...') }}</div>
                     </div>
-                </section>
-
-                <div class="space-y-3 p-4">
-                    <!-- Title attribute -->
-                    <ui-input
-                        type="text"
-                        ref="input"
-                        size="sm"
-                        v-model="title"
-                        :prepend="__('Label')"
-                        :placeholder="__('Optional')"
-                    />
-
-                    <!-- Rel attribute -->
-                    <ui-input
-                        type="text"
-                        ref="input"
-                        size="sm"
-                        v-model="rel"
-                        :prepend="__('Rel')"
-                        :placeholder="__('Optional')"
-                    />
-
-                    <ui-checkbox
-                        :label="__('Open in new window')"
-                        v-model="targetBlank"
-                        size="sm"
-                    />
-                </div>
 
+                    <button
+                        class="flex items-center cursor-pointer"
+                        v-tooltip="`${__('Browse')}...`"
+                        :aria-label="`${__('Browse')}...`"
+                        @click="openSelector"
+                    >
+                        <Icon v-show="linkType === 'asset'" name="folder-photos" class="size-4" />
+                        <Icon v-show="linkType !== 'asset'" name="folder" class="size-4" />
+                    </button>
+                </div>
             </div>
+        </section>
+
+        <ui-separator :text="__('Advanced Options')" />
+
+        <section class="space-y-5">
+            <!-- Title attribute -->
+            <ui-input
+                type="text"
+                ref="input"
+                v-model="title"
+                :prepend="__('Label')"
+                :placeholder="__('Add a link label')"
+            />
 
-            <footer class="flex items-center justify-end gap-2 sm:gap-3 rounded-b-md bg-gray-100 p-2 font-normal dark:bg-gray-800 rounded-b-xl">
-                <ui-button
-                    @click="$emit('canceled')"
-                    :text="__('Cancel')"
-                    size="sm"
-                    inset
-                    variant="ghost"
-                />
-                <ui-button
-                    :text="__('Remove Link')"
-                    @click="remove"
-                    size="sm"
-                    inset
-                />
-                <ui-button
-                    :text="__('Apply Link')"
-                    :disabled="!canCommit"
-                    @click="commit"
-                    size="sm"
-                    variant="primary"
-                />
-            </footer>
-        </div>
+            <!-- Rel attribute -->
+            <ui-input
+                type="text"
+                ref="input"
+                v-model="rel"
+                :prepend="__('Rel')"
+                :placeholder="__('noopener, noreferrer')"
+            />
 
-        <!-- Selectors -->
+            <div class="flex items-center gap-2">
+                <ui-switch
+                    v-model="targetBlank"
+                />
+                <ui-description :text="__('Open in new window')" />
+            </div>
+        </section>
 
         <relationship-input
             class="hidden"
@@ -150,7 +125,7 @@
 
         <Stack v-model:open="showAssetSelector" inset :show-close-button="false">
             <asset-selector
-                :container="config.container"
+                :container="{id: config.container}"
                 :folder="config.folder || '/'"
                 :restrict-folder-navigation="config.restrict_assets"
                 :selected="[]"
@@ -159,19 +134,44 @@
                 @closed="showAssetSelector = false"
             />
         </Stack>
-    </div>
+    </StackContent>
+
+
+    <StackFooter>
+        <template #end>
+            <ui-button
+                @click="$emit('canceled')"
+                :text="__('Cancel')"
+                variant="ghost"
+            />
+            <ui-button
+                :text="__('Remove Link')"
+                @click="remove"
+            />
+            <ui-button
+                :text="__('Apply Link')"
+                :disabled="!canCommit"
+                @click="commit"
+                variant="primary"
+            />
+        </template>
+    </StackFooter>
+
+    <!-- Selectors -->
 </template>
 
 <script>
 import qs from 'qs';
 import AssetSelector from '../../assets/Selector.vue';
-import { Icon, Stack } from '@/components/ui';
+import { Icon, Stack, StackContent, StackFooter } from '@/components/ui';
 
 export default {
     components: {
         AssetSelector,
         Icon,
 	    Stack,
+        StackContent,
+        StackFooter,
     },
 
     props: {
@@ -414,7 +414,7 @@ export default {
         },
 
         openEntrySelector() {
-            this.$refs.relationshipInput.$refs.existing.click();
+            this.$refs.relationshipInput.openSelector();
         },
 
         openAssetSelector() {
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
index a9c74a5683a..8f17c00b92f 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
@@ -1,5 +1,11 @@
 <template>
-    <Popover ref="popover" class="!size-min" :inset="true" v-model:open="showingToolbar">
+    <Stack
+        :title="__('Link')"
+        size="narrow"
+        inset
+        :wrap-slot="false"
+        v-model:open="showingToolbar"
+    >
         <template #trigger>
             <Button
                 class="px-2!"
@@ -15,7 +21,6 @@
         </template>
         <link-toolbar
             v-if="linkAttrs !== null"
-            class="min-w-84 size-min"
             ref="toolbar"
             :link-attrs="linkAttrs"
             :config="config"
@@ -23,11 +28,11 @@
             @updated="setLink"
             @canceled="close"
         />
-    </Popover>
+    </Stack>
 </template>
 
 <script>
-import { Popover } from '@/components/ui';
+import { Stack } from '@/components/ui';
 import LinkToolbar from './LinkToolbar.vue';
 import BardToolbarButton from './ToolbarButton.vue';
 
@@ -35,8 +40,8 @@ export default {
     mixins: [BardToolbarButton],
 
     components: {
-        Popover,
         LinkToolbar,
+        Stack,
     },
 
     data() {
@@ -49,7 +54,6 @@ export default {
     methods: {
         close() {
             this.showingToolbar = false;
-            this.$refs.popover.close();
         },
 
         setLink(attributes) {
@@ -70,15 +74,5 @@ export default {
         }
     },
 
-    created() {
-        this.bard.events.on('link-toggle', () => {
-            this.toggleLinkToolbar();
-            this.$refs.popover.toggle();
-        });
-    },
-
-    beforeUnmount() {
-        this.bard.events.off('link-toggle');
-    },
 };
 </script>
diff --git a/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
index 05ed36843c2..843eb55c4ac 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
@@ -160,7 +160,7 @@ export default {
         },
 
         linkExistingItem() {
-            this.$refs.input.$refs.existing.$el.click();
+            this.$refs.input.openSelector();
         },
 
         unlinkAll() {
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index 729f09feed3..ac8370ab427 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -68,7 +68,7 @@
                         icon="link"
                         :size="buttonSize"
                         :text="linkLabel"
-                        @click.prevent="isSelecting = true"
+                        @click.prevent="openSelector"
                     />
                 </div>
             </div>
@@ -286,6 +286,10 @@ export default {
             this.update([...this.value.slice(0, index), ...this.value.slice(index + 1)]);
         },
 
+	    openSelector() {
+			this.isSelecting = true;
+	    },
+
         selectionsUpdated(selections) {
             this.getDataForSelections(selections).then(() => {
                 this.update(selections);
diff --git a/resources/js/components/structures/PageSelector.vue b/resources/js/components/structures/PageSelector.vue
index f8e0ad5be66..b9fd324a122 100644
--- a/resources/js/components/structures/PageSelector.vue
+++ b/resources/js/components/structures/PageSelector.vue
@@ -91,7 +91,7 @@ export default {
 
     methods: {
         linkExistingItem() {
-            this.$refs.input.$refs.existing.$el.click();
+            this.$refs.input.openSelector();
         },
 
         itemDataUpdated(data) {
diff --git a/resources/js/components/ui/Popover.vue b/resources/js/components/ui/Popover.vue
index 6ca04cc9aa1..91a4caa951f 100644
--- a/resources/js/components/ui/Popover.vue
+++ b/resources/js/components/ui/Popover.vue
@@ -22,6 +22,8 @@ const props = defineProps({
     side: { type: String, default: 'bottom' },
     /** The controlled open state of the popover. */
     open: { type: Boolean, default: false },
+    /** When `true`, clicking outside the modal will dismiss it. */
+    dismissible: { type: Boolean, default: true },
 });
 
 const popoverContentClasses = cva({
@@ -67,6 +69,7 @@ function updateOpen(value) {
                 :align
                 :sideOffset="offset"
                 :side
+                @interact-outside="(e) => !dismissible && e.preventDefault()"
             >
                 <slot v-bind="slotProps" />
                 <PopoverClose as-child>
diff --git a/resources/js/components/ui/Stack/Header.vue b/resources/js/components/ui/Stack/Header.vue
index a84eba54e65..e4c0097833a 100644
--- a/resources/js/components/ui/Stack/Header.vue
+++ b/resources/js/components/ui/Stack/Header.vue
@@ -23,7 +23,7 @@ const hasActionsSlot = !!useSlots().actions;
 <template>
     <div
         data-ui-stack-title
-        class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 py-2 dark:border-gray-950 dark:bg-gray-800"
+        class="flex items-center justify-between rounded-t-xl border-b border-gray-300 ps-6 pe-4 py-2 dark:border-gray-950 dark:bg-gray-800"
     >
         <div class="flex items-center gap-2">
             <Icon :name="icon" v-if="icon" class="size-4" />