diff --git a/app/Actions/Projects/BuildProjectTicketMetadataSettingsPayload.php b/app/Actions/Projects/BuildProjectTicketMetadataSettingsPayload.php
index 3ab6fcf..b20bde4 100644
--- a/app/Actions/Projects/BuildProjectTicketMetadataSettingsPayload.php
+++ b/app/Actions/Projects/BuildProjectTicketMetadataSettingsPayload.php
@@ -34,8 +34,8 @@ class BuildProjectTicketMetadataSettingsPayload
                 DuplicateProjectConfiguration::COPY_TICKET_FIELDS,
                 DuplicateProjectConfiguration::COPY_TICKET_LINK_TYPES,
             ]),
-            'ticketFieldDefinitions' => TicketFieldDefinitionResource::collection($project->ticketFieldDefinitions()->get())->resolve(),
-            'ticketLinkTypes' => TicketLinkTypeResource::collection($project->ticketLinkTypes()->get())->resolve(),
+            'ticketFieldDefinitions' => TicketFieldDefinitionResource::collection($project->ticketFieldDefinitions()->withCount('ticketFieldValues')->get())->resolve(),
+            'ticketLinkTypes' => TicketLinkTypeResource::collection($project->ticketLinkTypes()->withCount('ticketLinks')->get())->resolve(),
             'ticketPriorities' => TicketPriorityResource::collection($project->ticketPriorities()->get())->resolve(),
             'ticketTypes' => TicketTypeResource::collection($project->ticketTypes()->withCount('tickets')->get())->resolve(),
         ];
diff --git a/app/Http/Resources/TicketFieldDefinitionResource.php b/app/Http/Resources/TicketFieldDefinitionResource.php
index ed8596f..0e225e1 100644
--- a/app/Http/Resources/TicketFieldDefinitionResource.php
+++ b/app/Http/Resources/TicketFieldDefinitionResource.php
@@ -20,6 +20,7 @@ class TicketFieldDefinitionResource extends JsonResource
             'label' => $this->label,
             'position' => $this->position,
             'project_id' => $this->project_id,
+            'ticket_field_values_count' => $this->when(isset($this->ticket_field_values_count), (int) $this->ticket_field_values_count),
             'created_at' => $this->created_at?->toISOString(),
             'updated_at' => $this->updated_at?->toISOString(),
         ];
diff --git a/app/Http/Resources/TicketLinkTypeResource.php b/app/Http/Resources/TicketLinkTypeResource.php
index 55bca63..9af1bd6 100644
--- a/app/Http/Resources/TicketLinkTypeResource.php
+++ b/app/Http/Resources/TicketLinkTypeResource.php
@@ -20,6 +20,7 @@ class TicketLinkTypeResource extends JsonResource
             'counterpart_label' => $this->counterpart_label ?: $this->label,
             'position' => $this->position,
             'project_id' => $this->project_id,
+            'ticket_links_count' => $this->when(isset($this->ticket_links_count), (int) $this->ticket_links_count),
             'created_at' => $this->created_at?->toISOString(),
             'updated_at' => $this->updated_at?->toISOString(),
         ];
diff --git a/resources/js/components/projects/TicketFieldDefinitionEditorDialog.vue b/resources/js/components/projects/TicketFieldDefinitionEditorDialog.vue
new file mode 100644
index 0000000..48630f2
--- /dev/null
+++ b/resources/js/components/projects/TicketFieldDefinitionEditorDialog.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { CircleAlert } from 'lucide-vue-next';
+import { computed, watch } from 'vue';
+import {
+    destroyFieldDefinition,
+    storeFieldDefinition,
+    updateFieldDefinition,
+} from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import type { TicketFieldDefinitionModel } from '@/types/models/ticket-field-definition-model';
+import type { TicketFieldDefinitionEditorTarget } from '@/types/project-metadata';
+import type { TicketFieldTypeOption } from '@/types';
+
+const props = defineProps<{
+    projectId: number;
+    target: TicketFieldDefinitionEditorTarget | null;
+    definitions: TicketFieldDefinitionModel[];
+    fieldTypeOptions: TicketFieldTypeOption[];
+}>();
+const emit = defineEmits<{ close: [] }>();
+const { t } = useLocalization();
+const form = useForm({
+    label: '',
+    field_type: '',
+    position: 1,
+});
+const protection = useFormProtection(form, {
+    isDirty: () => props.target !== null && form.isDirty,
+});
+const deleting = computed(() => props.target?.action === 'delete');
+const title = computed(() => {
+    if (props.target?.action === 'create') {
+        return t('metadata.addField');
+    }
+    if (props.target?.action === 'edit') {
+        return t('metadata.editField', { name: props.target.entry.label });
+    }
+    return props.target
+        ? t('metadata.deleteField', { name: props.target.entry.label })
+        : '';
+});
+watch(
+    () => props.target,
+    (target) => {
+        const values =
+            target?.action === 'edit'
+                ? {
+                      label: target.entry.label,
+                      field_type: target.entry.field_type,
+                      position: target.entry.position,
+                  }
+                : {
+                      label: '',
+                      field_type: props.fieldTypeOptions[0]?.value ?? '',
+                      position: props.definitions.length + 1,
+                  };
+        form.defaults(values);
+        form.resetAndClearErrors();
+        protection.clearFeedback();
+    },
+    { immediate: true },
+);
+function close(open: boolean): void {
+    if (open || form.processing || !protection.confirmLeave()) {
+        return;
+    }
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+    emit('close');
+}
+function submit(): void {
+    const target = props.target;
+    if (!target || form.processing) {
+        return;
+    }
+    const route =
+        target.action === 'create'
+            ? storeFieldDefinition(props.projectId)
+            : target.action === 'edit'
+              ? updateFieldDefinition([props.projectId, target.entry.id])
+              : destroyFieldDefinition([props.projectId, target.entry.id]);
+    form.transform((data) =>
+        target.action === 'delete'
+            ? {}
+            : target.action === 'create'
+              ? { label: data.label, field_type: data.field_type }
+              : data,
+    );
+    protection.submit(route, {
+        preserveScroll: true,
+        onSuccess: () => {
+            form.resetAndClearErrors();
+            emit('close');
+        },
+    });
+}
+</script>
+
+<template>
+    <Dialog :open="target !== null" @update:open="close">
+        <DialogContent
+            :show-close-button="!form.processing"
+            @escape-key-down="form.processing && $event.preventDefault()"
+            @interact-outside="form.processing && $event.preventDefault()"
+        >
+            <DialogHeader>
+                <DialogTitle class="break-words">{{ title }}</DialogTitle>
+                <DialogDescription>
+                    {{
+                        t(
+                            deleting
+                                ? 'metadata.deleteFieldHelp'
+                                : 'metadata.fieldEditorHelp',
+                        )
+                    }}
+                </DialogDescription>
+            </DialogHeader>
+            <form
+                class="grid min-w-0 gap-4"
+                :aria-busy="form.processing"
+                @submit.prevent="submit"
+            >
+                <FormFeedback :state="protection.state.value" @retry="submit" />
+                <div
+                    v-if="deleting && target?.entry"
+                    class="border-destructive/40 bg-destructive/5 text-destructive flex items-start gap-3 rounded-lg border p-4 text-sm"
+                >
+                    <CircleAlert
+                        class="mt-0.5 size-4 shrink-0"
+                        aria-hidden="true"
+                    />
+                    <p>
+                        {{
+                            t('metadata.fieldDeletionImpact', {
+                                count:
+                                    target.entry.ticket_field_values_count ?? 0,
+                            })
+                        }}
+                    </p>
+                </div>
+                <fieldset
+                    v-if="!deleting"
+                    :disabled="form.processing"
+                    class="grid min-w-0 gap-4"
+                >
+                    <div class="grid gap-2">
+                        <Label for="field-definition-label">{{
+                            t('metadata.fieldLabel')
+                        }}</Label>
+                        <Input
+                            id="field-definition-label"
+                            v-model="form.label"
+                            name="label"
+                            required
+                            maxlength="255"
+                            :aria-invalid="!!form.errors.label"
+                            aria-describedby="field-definition-label-error"
+                        />
+                        <InputError
+                            id="field-definition-label-error"
+                            :message="form.errors.label"
+                        />
+                    </div>
+                    <div class="grid gap-2">
+                        <Label for="field-definition-type">{{
+                            t('metadata.fieldType')
+                        }}</Label>
+                        <select
+                            id="field-definition-type"
+                            v-model="form.field_type"
+                            name="field_type"
+                            required
+                            class="border-input bg-background focus-visible:ring-ring min-h-11 w-full min-w-0 rounded-md border px-3 text-sm focus-visible:ring-2"
+                            :aria-invalid="!!form.errors.field_type"
+                            aria-describedby="field-definition-type-help field-definition-type-error"
+                        >
+                            <option
+                                v-for="option in fieldTypeOptions"
+                                :key="option.value"
+                                :value="option.value"
+                            >
+                                {{ option.label }}
+                            </option>
+                        </select>
+                        <p
+                            id="field-definition-type-help"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{ t('metadata.fieldTypeHelp') }}
+                        </p>
+                        <InputError
+                            id="field-definition-type-error"
+                            :message="form.errors.field_type"
+                        />
+                    </div>
+                    <div v-if="target?.action === 'edit'" class="grid gap-2">
+                        <Label for="field-definition-position">{{
+                            t('workflow.position')
+                        }}</Label>
+                        <Input
+                            id="field-definition-position"
+                            v-model="form.position"
+                            name="position"
+                            type="number"
+                            min="1"
+                            :max="definitions.length"
+                            step="1"
+                            required
+                            :aria-invalid="!!form.errors.position"
+                            aria-describedby="field-definition-position-help field-definition-position-error"
+                        />
+                        <p
+                            id="field-definition-position-help"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{
+                                t('metadata.positionHelp', {
+                                    count: definitions.length,
+                                })
+                            }}
+                        </p>
+                        <InputError
+                            id="field-definition-position-error"
+                            :message="form.errors.position"
+                        />
+                    </div>
+                </fieldset>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        :disabled="form.processing"
+                        @click="close(false)"
+                        >{{ t('common.cancel') }}</Button
+                    >
+                    <Button
+                        type="submit"
+                        :variant="deleting ? 'destructive' : 'default'"
+                        :loading="form.processing"
+                        >{{
+                            deleting
+                                ? t('workflow.confirmDelete')
+                                : target?.action === 'create'
+                                  ? title
+                                  : t('common.save')
+                        }}</Button
+                    >
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/resources/js/components/projects/TicketFieldDefinitionSettings.vue b/resources/js/components/projects/TicketFieldDefinitionSettings.vue
new file mode 100644
index 0000000..75c606a
--- /dev/null
+++ b/resources/js/components/projects/TicketFieldDefinitionSettings.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { Braces, Pencil, Plus, Trash2 } from 'lucide-vue-next';
+import { computed, ref } from 'vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import TicketFieldDefinitionEditorDialog from '@/components/projects/TicketFieldDefinitionEditorDialog.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useLocalization } from '@/composables/useLocalization';
+import type { TicketFieldDefinitionModel } from '@/types/models/ticket-field-definition-model';
+import type { TicketFieldDefinitionEditorTarget } from '@/types/project-metadata';
+import type { TicketFieldTypeOption } from '@/types';
+
+const props = defineProps<{
+    projectId: number;
+    definitions: TicketFieldDefinitionModel[];
+    fieldTypeOptions: TicketFieldTypeOption[];
+}>();
+const { t } = useLocalization();
+const target = ref<TicketFieldDefinitionEditorTarget | null>(null);
+const fieldTypeLabels = computed(
+    () =>
+        new Map(
+            props.fieldTypeOptions.map((option) => [
+                option.value,
+                option.label,
+            ]),
+        ),
+);
+function fieldTypeLabel(fieldType: string): string {
+    return fieldTypeLabels.value.get(fieldType) ?? fieldType;
+}
+</script>
+
+<template>
+    <section
+        class="bg-card grid min-w-0 gap-4 overflow-hidden rounded-xl border p-4 sm:p-6"
+        aria-labelledby="metadata-custom-fields"
+    >
+        <header class="flex flex-wrap items-center justify-between gap-3">
+            <div class="flex min-w-0 items-center gap-2">
+                <Braces
+                    class="text-primary size-5 shrink-0"
+                    aria-hidden="true"
+                />
+                <h3 id="metadata-custom-fields" class="font-semibold">
+                    {{ t('metadata.customFields') }}
+                </h3>
+                <Badge variant="secondary">{{ definitions.length }}</Badge>
+            </div>
+            <Button
+                type="button"
+                class="w-full sm:w-auto"
+                @click="target = { action: 'create' }"
+            >
+                <Plus class="size-4" aria-hidden="true" />{{
+                    t('metadata.addField')
+                }}
+            </Button>
+        </header>
+        <p class="text-muted-foreground text-sm">
+            {{ t('metadata.customFieldsDescription') }}
+        </p>
+        <FeedbackState
+            v-if="definitions.length === 0"
+            state="empty"
+            :title="t('metadata.noCustomFields')"
+            :description="t('metadata.noCustomFieldsDescription')"
+        />
+        <ol v-else class="divide-y" :aria-label="t('metadata.customFields')">
+            <li
+                v-for="definition in definitions"
+                :key="definition.id"
+                class="grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 py-4"
+                :data-ticket-field-definition="definition.id"
+            >
+                <span
+                    class="bg-accent text-accent-foreground flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold"
+                    :aria-label="
+                        t('workflow.positionValue', {
+                            position: definition.position,
+                        })
+                    "
+                    >{{ definition.position }}</span
+                >
+                <div class="grid min-w-0 gap-1">
+                    <p class="break-words font-medium">
+                        {{ definition.label }}
+                    </p>
+                    <div
+                        class="text-caption text-muted-foreground flex flex-wrap items-center gap-2"
+                    >
+                        <Badge variant="outline">{{
+                            fieldTypeLabel(definition.field_type)
+                        }}</Badge>
+                        <span>{{
+                            t('metadata.storedValues', {
+                                count:
+                                    definition.ticket_field_values_count ?? 0,
+                            })
+                        }}</span>
+                    </div>
+                </div>
+                <div class="flex shrink-0 gap-1">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        :aria-label="
+                            t('metadata.editField', { name: definition.label })
+                        "
+                        @click="target = { action: 'edit', entry: definition }"
+                    >
+                        <Pencil class="size-4" aria-hidden="true" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        class="text-destructive"
+                        :aria-label="
+                            t('metadata.deleteField', {
+                                name: definition.label,
+                            })
+                        "
+                        @click="
+                            target = { action: 'delete', entry: definition }
+                        "
+                    >
+                        <Trash2 class="size-4" aria-hidden="true" />
+                    </Button>
+                </div>
+            </li>
+        </ol>
+        <TicketFieldDefinitionEditorDialog
+            :definitions="definitions"
+            :field-type-options="fieldTypeOptions"
+            :project-id="projectId"
+            :target="target"
+            @close="target = null"
+        />
+    </section>
+</template>
diff --git a/resources/js/components/projects/TicketLinkTypeEditorDialog.vue b/resources/js/components/projects/TicketLinkTypeEditorDialog.vue
new file mode 100644
index 0000000..74970cd
--- /dev/null
+++ b/resources/js/components/projects/TicketLinkTypeEditorDialog.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { ArrowRight, CircleAlert } from 'lucide-vue-next';
+import { computed, watch } from 'vue';
+import {
+    destroyLinkType,
+    storeLinkType,
+    updateLinkType,
+} from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import type { TicketLinkTypeModel } from '@/types/models/ticket-link-type-model';
+import type { TicketLinkTypeEditorTarget } from '@/types/project-metadata';
+
+const props = defineProps<{
+    projectId: number;
+    target: TicketLinkTypeEditorTarget | null;
+    linkTypes: TicketLinkTypeModel[];
+}>();
+const emit = defineEmits<{ close: [] }>();
+const { t } = useLocalization();
+const form = useForm({
+    name: '',
+    counterpart_name: '',
+    position: 1,
+});
+const protection = useFormProtection(form, {
+    isDirty: () => props.target !== null && form.isDirty,
+});
+const deleting = computed(() => props.target?.action === 'delete');
+const title = computed(() => {
+    if (props.target?.action === 'create') {
+        return t('metadata.addLinkType');
+    }
+    if (props.target?.action === 'edit') {
+        return t('metadata.editLinkType', { name: props.target.entry.label });
+    }
+    return props.target
+        ? t('metadata.deleteLinkType', { name: props.target.entry.label })
+        : '';
+});
+watch(
+    () => props.target,
+    (target) => {
+        const values =
+            target?.action === 'edit'
+                ? {
+                      name: target.entry.label,
+                      counterpart_name: target.entry.counterpart_label,
+                      position: target.entry.position,
+                  }
+                : {
+                      name: '',
+                      counterpart_name: '',
+                      position: props.linkTypes.length + 1,
+                  };
+        form.defaults(values);
+        form.resetAndClearErrors();
+        protection.clearFeedback();
+    },
+    { immediate: true },
+);
+function close(open: boolean): void {
+    if (open || form.processing || !protection.confirmLeave()) {
+        return;
+    }
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+    emit('close');
+}
+function submit(): void {
+    const target = props.target;
+    if (!target || form.processing) {
+        return;
+    }
+    const route =
+        target.action === 'create'
+            ? storeLinkType(props.projectId)
+            : target.action === 'edit'
+              ? updateLinkType([props.projectId, target.entry.id])
+              : destroyLinkType([props.projectId, target.entry.id]);
+    form.transform((data) =>
+        target.action === 'delete'
+            ? {}
+            : target.action === 'create'
+              ? {
+                    name: data.name,
+                    counterpart_name: data.counterpart_name,
+                }
+              : data,
+    );
+    protection.submit(route, {
+        preserveScroll: true,
+        onSuccess: () => {
+            form.resetAndClearErrors();
+            emit('close');
+        },
+    });
+}
+</script>
+
+<template>
+    <Dialog :open="target !== null" @update:open="close">
+        <DialogContent
+            :show-close-button="!form.processing"
+            @escape-key-down="form.processing && $event.preventDefault()"
+            @interact-outside="form.processing && $event.preventDefault()"
+        >
+            <DialogHeader>
+                <DialogTitle class="break-words">{{ title }}</DialogTitle>
+                <DialogDescription>
+                    {{
+                        t(
+                            deleting
+                                ? 'metadata.deleteLinkTypeHelp'
+                                : 'metadata.linkTypeEditorHelp',
+                        )
+                    }}
+                </DialogDescription>
+            </DialogHeader>
+            <form
+                class="grid min-w-0 gap-4"
+                :aria-busy="form.processing"
+                @submit.prevent="submit"
+            >
+                <FormFeedback :state="protection.state.value" @retry="submit" />
+                <div
+                    v-if="deleting && target?.entry"
+                    class="border-destructive/40 bg-destructive/5 text-destructive flex items-start gap-3 rounded-lg border p-4 text-sm"
+                >
+                    <CircleAlert
+                        class="mt-0.5 size-4 shrink-0"
+                        aria-hidden="true"
+                    />
+                    <p>
+                        {{
+                            t('metadata.linkTypeDeletionImpact', {
+                                count: target.entry.ticket_links_count ?? 0,
+                            })
+                        }}
+                    </p>
+                </div>
+                <fieldset
+                    v-if="!deleting"
+                    :disabled="form.processing"
+                    class="grid min-w-0 gap-4"
+                >
+                    <div class="grid gap-2">
+                        <Label for="link-type-source-label">{{
+                            t('metadata.sourceLabel')
+                        }}</Label>
+                        <Input
+                            id="link-type-source-label"
+                            v-model="form.name"
+                            name="name"
+                            required
+                            maxlength="255"
+                            :aria-invalid="!!form.errors.name"
+                            aria-describedby="link-type-source-label-help link-type-source-label-error"
+                        />
+                        <p
+                            id="link-type-source-label-help"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{ t('metadata.sourceLabelHelp') }}
+                        </p>
+                        <InputError
+                            id="link-type-source-label-error"
+                            :message="form.errors.name"
+                        />
+                    </div>
+                    <ArrowRight
+                        class="text-primary mx-auto size-5 rotate-90 sm:rotate-0"
+                        aria-hidden="true"
+                    />
+                    <div class="grid gap-2">
+                        <Label for="link-type-counterpart-label">{{
+                            t('metadata.counterpartLabel')
+                        }}</Label>
+                        <Input
+                            id="link-type-counterpart-label"
+                            v-model="form.counterpart_name"
+                            name="counterpart_name"
+                            required
+                            maxlength="255"
+                            :aria-invalid="!!form.errors.counterpart_name"
+                            aria-describedby="link-type-counterpart-label-help link-type-counterpart-label-error"
+                        />
+                        <p
+                            id="link-type-counterpart-label-help"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{ t('metadata.counterpartLabelHelp') }}
+                        </p>
+                        <InputError
+                            id="link-type-counterpart-label-error"
+                            :message="form.errors.counterpart_name"
+                        />
+                    </div>
+                    <div v-if="target?.action === 'edit'" class="grid gap-2">
+                        <Label for="link-type-position">{{
+                            t('workflow.position')
+                        }}</Label>
+                        <Input
+                            id="link-type-position"
+                            v-model="form.position"
+                            name="position"
+                            type="number"
+                            min="1"
+                            :max="linkTypes.length"
+                            step="1"
+                            required
+                            :aria-invalid="!!form.errors.position"
+                            aria-describedby="link-type-position-help link-type-position-error"
+                        />
+                        <p
+                            id="link-type-position-help"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{
+                                t('metadata.positionHelp', {
+                                    count: linkTypes.length,
+                                })
+                            }}
+                        </p>
+                        <InputError
+                            id="link-type-position-error"
+                            :message="form.errors.position"
+                        />
+                    </div>
+                </fieldset>
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        :disabled="form.processing"
+                        @click="close(false)"
+                        >{{ t('common.cancel') }}</Button
+                    >
+                    <Button
+                        type="submit"
+                        :variant="deleting ? 'destructive' : 'default'"
+                        :loading="form.processing"
+                        >{{
+                            deleting
+                                ? t('workflow.confirmDelete')
+                                : target?.action === 'create'
+                                  ? title
+                                  : t('common.save')
+                        }}</Button
+                    >
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/resources/js/components/projects/TicketLinkTypeSettings.vue b/resources/js/components/projects/TicketLinkTypeSettings.vue
new file mode 100644
index 0000000..1a075bb
--- /dev/null
+++ b/resources/js/components/projects/TicketLinkTypeSettings.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ArrowRight, Link2, Pencil, Plus, Trash2 } from 'lucide-vue-next';
+import { ref } from 'vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import TicketLinkTypeEditorDialog from '@/components/projects/TicketLinkTypeEditorDialog.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useLocalization } from '@/composables/useLocalization';
+import type { TicketLinkTypeModel } from '@/types/models/ticket-link-type-model';
+import type { TicketLinkTypeEditorTarget } from '@/types/project-metadata';
+
+defineProps<{ projectId: number; linkTypes: TicketLinkTypeModel[] }>();
+const { t } = useLocalization();
+const target = ref<TicketLinkTypeEditorTarget | null>(null);
+</script>
+
+<template>
+    <section
+        class="bg-card grid min-w-0 gap-4 overflow-hidden rounded-xl border p-4 sm:p-6"
+        aria-labelledby="metadata-link-types"
+    >
+        <header class="flex flex-wrap items-center justify-between gap-3">
+            <div class="flex min-w-0 items-center gap-2">
+                <Link2
+                    class="text-primary size-5 shrink-0"
+                    aria-hidden="true"
+                />
+                <h3 id="metadata-link-types" class="font-semibold">
+                    {{ t('metadata.linkTypes') }}
+                </h3>
+                <Badge variant="secondary">{{ linkTypes.length }}</Badge>
+            </div>
+            <Button
+                type="button"
+                class="w-full sm:w-auto"
+                @click="target = { action: 'create' }"
+            >
+                <Plus class="size-4" aria-hidden="true" />{{
+                    t('metadata.addLinkType')
+                }}
+            </Button>
+        </header>
+        <p class="text-muted-foreground text-sm">
+            {{ t('metadata.linkTypesDescription') }}
+        </p>
+        <FeedbackState
+            v-if="linkTypes.length === 0"
+            state="empty"
+            :title="t('metadata.noLinkTypes')"
+            :description="t('metadata.noLinkTypesDescription')"
+        />
+        <ol v-else class="divide-y" :aria-label="t('metadata.linkTypes')">
+            <li
+                v-for="linkType in linkTypes"
+                :key="linkType.id"
+                class="grid min-w-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 py-4"
+                :data-ticket-link-type="linkType.id"
+            >
+                <span
+                    class="bg-accent text-accent-foreground flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold"
+                    :aria-label="
+                        t('workflow.positionValue', {
+                            position: linkType.position,
+                        })
+                    "
+                    >{{ linkType.position }}</span
+                >
+                <div class="grid min-w-0 gap-2">
+                    <div
+                        class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1"
+                        :aria-label="
+                            t('metadata.linkDirection', {
+                                source: linkType.label,
+                                counterpart: linkType.counterpart_label,
+                            })
+                        "
+                    >
+                        <span class="break-words font-medium">{{
+                            linkType.label
+                        }}</span>
+                        <ArrowRight
+                            class="text-primary size-4 shrink-0"
+                            aria-hidden="true"
+                        />
+                        <span class="break-words font-medium">{{
+                            linkType.counterpart_label
+                        }}</span>
+                    </div>
+                    <p class="text-caption text-muted-foreground">
+                        {{
+                            t('metadata.ticketRelationships', {
+                                count: linkType.ticket_links_count ?? 0,
+                            })
+                        }}
+                    </p>
+                </div>
+                <div class="flex shrink-0 gap-1">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        :aria-label="
+                            t('metadata.editLinkType', {
+                                name: linkType.label,
+                            })
+                        "
+                        @click="target = { action: 'edit', entry: linkType }"
+                    >
+                        <Pencil class="size-4" aria-hidden="true" />
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        class="text-destructive"
+                        :aria-label="
+                            t('metadata.deleteLinkType', {
+                                name: linkType.label,
+                            })
+                        "
+                        @click="target = { action: 'delete', entry: linkType }"
+                    >
+                        <Trash2 class="size-4" aria-hidden="true" />
+                    </Button>
+                </div>
+            </li>
+        </ol>
+        <TicketLinkTypeEditorDialog
+            :link-types="linkTypes"
+            :project-id="projectId"
+            :target="target"
+            @close="target = null"
+        />
+    </section>
+</template>
diff --git a/resources/js/locales/en.ts b/resources/js/locales/en.ts
index f0bcc11..fd2438c 100644
--- a/resources/js/locales/en.ts
+++ b/resources/js/locales/en.ts
@@ -960,4 +960,47 @@ export const en = {
     'metadata.chooseType': 'Choose a type',
     'metadata.parentReplacement':
         'If any affected ticket has child tickets, choose a parent type. The server checks this before deleting.',
+    'metadata.customFields': 'Custom fields',
+    'metadata.customFieldsDescription':
+        'Define the project-specific user and number fields shown on tickets.',
+    'metadata.addField': 'Add field',
+    'metadata.noCustomFields': 'No custom fields',
+    'metadata.noCustomFieldsDescription':
+        'Add a field when this project needs structured information beyond the standard ticket details.',
+    'metadata.storedValues': 'Stored values: {count}',
+    'metadata.editField': 'Edit {name}',
+    'metadata.deleteField': 'Delete {name}',
+    'metadata.fieldEditorHelp':
+        'Choose a label and one of the supported field types. Existing ticket values remain attached when this definition is edited.',
+    'metadata.deleteFieldHelp':
+        'Delete this custom field? This action cannot be undone.',
+    'metadata.fieldDeletionImpact':
+        'Deleting this field also permanently removes {count} stored ticket values.',
+    'metadata.fieldLabel': 'Field label',
+    'metadata.fieldType': 'Field type',
+    'metadata.fieldTypeHelp':
+        'Only the field types already supported by this project are available.',
+    'metadata.linkTypes': 'Link types',
+    'metadata.linkTypesDescription':
+        'Define the labels shown from each side of a ticket relationship.',
+    'metadata.addLinkType': 'Add link type',
+    'metadata.noLinkTypes': 'No link types',
+    'metadata.noLinkTypesDescription':
+        'Add a link type before tickets can be connected with a project-specific relationship.',
+    'metadata.ticketRelationships': 'Ticket relationships: {count}',
+    'metadata.linkDirection': '{source} points to {counterpart}',
+    'metadata.editLinkType': 'Edit {name}',
+    'metadata.deleteLinkType': 'Delete {name}',
+    'metadata.linkTypeEditorHelp':
+        'The source label is shown on the originating ticket; the counterpart label is shown on the linked ticket.',
+    'metadata.deleteLinkTypeHelp':
+        'Delete this link type? This action cannot be undone.',
+    'metadata.linkTypeDeletionImpact':
+        'Deleting this link type also permanently removes {count} ticket relationships.',
+    'metadata.sourceLabel': 'Source label',
+    'metadata.sourceLabelHelp':
+        'Shown when viewing the ticket where the relationship starts.',
+    'metadata.counterpartLabel': 'Counterpart label',
+    'metadata.counterpartLabelHelp':
+        'Shown when viewing the ticket at the other end of the relationship.',
 } as const;
diff --git a/resources/js/pages/projects/settings/Metadata.vue b/resources/js/pages/projects/settings/Metadata.vue
index 51cfdcf..41dd9f8 100644
--- a/resources/js/pages/projects/settings/Metadata.vue
+++ b/resources/js/pages/projects/settings/Metadata.vue
@@ -1,23 +1,13 @@
 <script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
+import { Head } from '@inertiajs/vue3';
 import { computed, ref } from 'vue';
-import ProjectTicketMetadataSettingsController from '@/actions/App/Http/Controllers/ProjectTicketMetadataSettingsController';
 import FeedbackState from '@/components/FeedbackState.vue';
-import InputError from '@/components/InputError.vue';
 import MetadataEditorDialog from '@/components/projects/MetadataEditorDialog.vue';
 import MetadataOptionList from '@/components/projects/MetadataOptionList.vue';
 import TicketDisplaySettings from '@/components/projects/TicketDisplaySettings.vue';
+import TicketFieldDefinitionSettings from '@/components/projects/TicketFieldDefinitionSettings.vue';
+import TicketLinkTypeSettings from '@/components/projects/TicketLinkTypeSettings.vue';
 import TemplateInheritancePanel from '@/components/projects/TemplateInheritancePanel.vue';
-import { Button } from '@/components/ui/button';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/projects/SettingsLayout.vue';
@@ -76,309 +66,15 @@ const breadcrumbs = computed<BreadcrumbItem[]>(() => [
                 :entries="ticketPriorities"
                 @edit="target = $event"
             />
-            <Card class="gap-0 overflow-hidden">
-                <CardHeader class="border-b">
-                    <CardTitle>Custom fields</CardTitle>
-                    <CardDescription>
-                        Define project-specific user or number fields for
-                        upcoming ticket data.
-                    </CardDescription>
-                </CardHeader>
-
-                <CardContent class="space-y-4 p-6">
-                    <Form
-                        v-bind="
-                            ProjectTicketMetadataSettingsController.storeFieldDefinition.form(
-                                project.id,
-                            )
-                        "
-                        class="border-border space-y-4 rounded-xl border border-dashed p-4"
-                        v-slot="{ errors, processing }"
-                    >
-                        <div class="grid gap-2">
-                            <Label for="field-label">New field label</Label>
-                            <Input
-                                id="field-label"
-                                name="label"
-                                required
-                                placeholder="Reviewer"
-                            />
-                            <InputError :message="errors.label" />
-                        </div>
-
-                        <div class="grid gap-2">
-                            <Label for="field-type">Field type</Label>
-                            <select
-                                id="field-type"
-                                name="field_type"
-                                class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                            >
-                                <option
-                                    v-for="option in fieldTypeOptions"
-                                    :key="option.value"
-                                    :value="option.value"
-                                >
-                                    {{ option.label }}
-                                </option>
-                            </select>
-                            <InputError :message="errors.field_type" />
-                        </div>
-
-                        <Button type="submit" :disabled="processing">
-                            Add field
-                        </Button>
-                    </Form>
-
-                    <div
-                        v-for="fieldDefinition in ticketFieldDefinitions"
-                        :key="fieldDefinition.id"
-                        class="border-border rounded-xl border p-4"
-                    >
-                        <Form
-                            v-bind="
-                                ProjectTicketMetadataSettingsController.updateFieldDefinition.form(
-                                    [project.id, fieldDefinition.id],
-                                )
-                            "
-                            class="grid gap-4"
-                            v-slot="{ errors, processing }"
-                        >
-                            <div class="grid gap-2">
-                                <Label
-                                    :for="`field-label-${fieldDefinition.id}`"
-                                >
-                                    Label
-                                </Label>
-                                <Input
-                                    :id="`field-label-${fieldDefinition.id}`"
-                                    name="label"
-                                    :default-value="fieldDefinition.label"
-                                    required
-                                />
-                                <InputError :message="errors.label" />
-                            </div>
-
-                            <div class="grid gap-2">
-                                <Label
-                                    :for="`field-type-${fieldDefinition.id}`"
-                                >
-                                    Field type
-                                </Label>
-                                <select
-                                    :id="`field-type-${fieldDefinition.id}`"
-                                    name="field_type"
-                                    class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                >
-                                    <option
-                                        v-for="option in fieldTypeOptions"
-                                        :key="option.value"
-                                        :value="option.value"
-                                        :selected="
-                                            option.value ===
-                                            fieldDefinition.field_type
-                                        "
-                                    >
-                                        {{ option.label }}
-                                    </option>
-                                </select>
-                                <InputError :message="errors.field_type" />
-                            </div>
-
-                            <div class="grid gap-2">
-                                <Label
-                                    :for="`field-position-${fieldDefinition.id}`"
-                                >
-                                    Position
-                                </Label>
-                                <Input
-                                    :id="`field-position-${fieldDefinition.id}`"
-                                    name="position"
-                                    type="number"
-                                    min="1"
-                                    :max="ticketFieldDefinitions.length"
-                                    :default-value="fieldDefinition.position"
-                                    required
-                                />
-                                <InputError :message="errors.position" />
-                            </div>
-
-                            <div class="flex flex-wrap justify-between gap-3">
-                                <Button
-                                    type="submit"
-                                    variant="outline"
-                                    :disabled="processing"
-                                >
-                                    Save
-                                </Button>
-                            </div>
-                        </Form>
-
-                        <Form
-                            v-bind="
-                                ProjectTicketMetadataSettingsController.destroyFieldDefinition.form(
-                                    [project.id, fieldDefinition.id],
-                                )
-                            "
-                            class="mt-3 flex justify-end"
-                            v-slot="{ processing: deleting }"
-                        >
-                            <Button
-                                type="submit"
-                                variant="destructive"
-                                :disabled="deleting"
-                            >
-                                Delete
-                            </Button>
-                        </Form>
-                    </div>
-                </CardContent>
-            </Card>
-
-            <Card class="gap-0 overflow-hidden">
-                <CardHeader class="border-b">
-                    <CardTitle>Link types</CardTitle>
-                    <CardDescription>
-                        Define project-specific labels for ticket-to-ticket
-                        relationships.
-                    </CardDescription>
-                </CardHeader>
-
-                <CardContent class="space-y-4 p-6">
-                    <Form
-                        v-bind="
-                            ProjectTicketMetadataSettingsController.storeLinkType.form(
-                                project.id,
-                            )
-                        "
-                        class="border-border space-y-4 rounded-xl border border-dashed p-4"
-                        v-slot="{ errors, processing }"
-                    >
-                        <div class="grid gap-2">
-                            <Label for="link-type-name"> Source label </Label>
-                            <Input
-                                id="link-type-name"
-                                name="name"
-                                required
-                                placeholder="Blocks"
-                            />
-                            <InputError :message="errors.name" />
-                        </div>
-
-                        <div class="grid gap-2">
-                            <Label for="link-type-counterpart-name">
-                                Counterpart label
-                            </Label>
-                            <Input
-                                id="link-type-counterpart-name"
-                                name="counterpart_name"
-                                required
-                                placeholder="Blocked by"
-                            />
-                            <InputError :message="errors.counterpart_name" />
-                        </div>
-
-                        <Button type="submit" :disabled="processing">
-                            Add link type
-                        </Button>
-                    </Form>
-
-                    <div
-                        v-for="ticketLinkType in ticketLinkTypes"
-                        :key="ticketLinkType.id"
-                        class="border-border rounded-xl border p-4"
-                    >
-                        <Form
-                            v-bind="
-                                ProjectTicketMetadataSettingsController.updateLinkType.form(
-                                    [project.id, ticketLinkType.id],
-                                )
-                            "
-                            class="grid gap-4"
-                            v-slot="{ errors, processing }"
-                        >
-                            <div class="grid gap-2">
-                                <Label
-                                    :for="`link-type-name-${ticketLinkType.id}`"
-                                >
-                                    Source label
-                                </Label>
-                                <Input
-                                    :id="`link-type-name-${ticketLinkType.id}`"
-                                    name="name"
-                                    :default-value="ticketLinkType.label"
-                                    required
-                                />
-                                <InputError :message="errors.name" />
-                            </div>
-
-                            <div class="grid gap-2">
-                                <Label
-                                    :for="`link-type-counterpart-name-${ticketLinkType.id}`"
-                                >
-                                    Counterpart label
-                                </Label>
-                                <Input
-                                    :id="`link-type-counterpart-name-${ticketLinkType.id}`"
-                                    name="counterpart_name"
-                                    :default-value="
-                                        ticketLinkType.counterpart_label
-                                    "
-                                    required
-                                />
-                                <InputError
-                                    :message="errors.counterpart_name"
-                                />
-                            </div>
-
-                            <div class="grid gap-2">
-                                <Label
-                                    :for="`link-type-position-${ticketLinkType.id}`"
-                                >
-                                    Position
-                                </Label>
-                                <Input
-                                    :id="`link-type-position-${ticketLinkType.id}`"
-                                    name="position"
-                                    type="number"
-                                    min="1"
-                                    :max="ticketLinkTypes.length"
-                                    :default-value="ticketLinkType.position"
-                                    required
-                                />
-                                <InputError :message="errors.position" />
-                            </div>
-
-                            <div class="flex flex-wrap justify-between gap-3">
-                                <Button
-                                    type="submit"
-                                    variant="outline"
-                                    :disabled="processing"
-                                >
-                                    Save
-                                </Button>
-                            </div>
-                        </Form>
-
-                        <Form
-                            v-bind="
-                                ProjectTicketMetadataSettingsController.destroyLinkType.form(
-                                    [project.id, ticketLinkType.id],
-                                )
-                            "
-                            class="mt-3 flex justify-end"
-                            v-slot="{ processing: deleting }"
-                        >
-                            <Button
-                                type="submit"
-                                variant="destructive"
-                                :disabled="deleting"
-                            >
-                                Delete
-                            </Button>
-                        </Form>
-                    </div>
-                </CardContent>
-            </Card>
+            <TicketFieldDefinitionSettings
+                :definitions="ticketFieldDefinitions"
+                :field-type-options="fieldTypeOptions"
+                :project-id="project.id"
+            />
+            <TicketLinkTypeSettings
+                :link-types="ticketLinkTypes"
+                :project-id="project.id"
+            />
 
             <MetadataEditorDialog
                 :project-id="project.id"
diff --git a/resources/js/types/models/ticket-field-definition-model.ts b/resources/js/types/models/ticket-field-definition-model.ts
index 7becec8..7238659 100644
--- a/resources/js/types/models/ticket-field-definition-model.ts
+++ b/resources/js/types/models/ticket-field-definition-model.ts
@@ -4,6 +4,7 @@ export type TicketFieldDefinitionModel = {
     label: string;
     position: number;
     project_id: number;
+    ticket_field_values_count?: number;
     created_at: string;
     updated_at: string;
 };
diff --git a/resources/js/types/models/ticket-link-type-model.ts b/resources/js/types/models/ticket-link-type-model.ts
index 022cae8..be52a61 100644
--- a/resources/js/types/models/ticket-link-type-model.ts
+++ b/resources/js/types/models/ticket-link-type-model.ts
@@ -4,6 +4,7 @@ export type TicketLinkTypeModel = {
     counterpart_label: string;
     position: number;
     project_id: number;
+    ticket_links_count?: number;
     created_at: string;
     updated_at: string;
 };
diff --git a/resources/js/types/project-metadata.ts b/resources/js/types/project-metadata.ts
index 9981b90..d26f3c8 100644
--- a/resources/js/types/project-metadata.ts
+++ b/resources/js/types/project-metadata.ts
@@ -1,4 +1,6 @@
 import type { TicketPriorityModel } from '@/types/models/ticket-priority-model';
+import type { TicketFieldDefinitionModel } from '@/types/models/ticket-field-definition-model';
+import type { TicketLinkTypeModel } from '@/types/models/ticket-link-type-model';
 import type { TicketTypeModel } from '@/types/models/ticket-type-model';
 
 export type MetadataKind = 'type' | 'priority';
@@ -8,3 +10,14 @@ export type MetadataEditorTarget = { kind: MetadataKind } & (
     | { action: 'create'; entry?: never }
     | { action: 'edit' | 'delete'; entry: MetadataEntry }
 );
+
+export type TicketFieldDefinitionEditorTarget =
+    | { action: 'create'; entry?: never }
+    | {
+          action: 'edit' | 'delete';
+          entry: TicketFieldDefinitionModel;
+      };
+
+export type TicketLinkTypeEditorTarget =
+    | { action: 'create'; entry?: never }
+    | { action: 'edit' | 'delete'; entry: TicketLinkTypeModel };
diff --git a/tests/Feature/Projects/ProjectTicketMetadataSettingsControllerTest.php b/tests/Feature/Projects/ProjectTicketMetadataSettingsControllerTest.php
index 36f65a4..56d42f3 100644
--- a/tests/Feature/Projects/ProjectTicketMetadataSettingsControllerTest.php
+++ b/tests/Feature/Projects/ProjectTicketMetadataSettingsControllerTest.php
@@ -36,8 +36,27 @@ class ProjectTicketMetadataSettingsControllerTest extends TestCase
         ]);
         TicketLinkType::factory()->for($project)->create([
             'label' => 'Relates to',
+            'counterpart_label' => 'Related from',
             'position' => 1,
         ]);
+        $fieldDefinition = TicketFieldDefinition::factory()->for($project)->create([
+            'field_type' => 'number',
+            'label' => 'Complexity',
+            'position' => 1,
+        ]);
+        $sourceTicket = Ticket::factory()->for($project)->create();
+        $targetTicket = Ticket::factory()->for($project)->create([
+            'sequence_number' => 2,
+            'ticket_key' => 'TEST-2',
+        ]);
+        $fieldDefinition->ticketFieldValues()->create([
+            'ticket_id' => $sourceTicket->id,
+            'value_number' => 8,
+        ]);
+        $project->ticketLinkTypes()->firstOrFail()->ticketLinks()->create([
+            'source_ticket_id' => $sourceTicket->id,
+            'target_ticket_id' => $targetTicket->id,
+        ]);
 
         $template = ProjectTemplate::factory()->create([
             'configuration_snapshot' => app(DuplicateProjectConfiguration::class)->export($project, [
@@ -71,7 +90,14 @@ class ProjectTicketMetadataSettingsControllerTest extends TestCase
                 ->where('ticketTypes.1.name', 'Release')
                 ->where('ticketTypes.1.is_parent', true)
                 ->where('ticketTypes.2.name', 'Bug')
+                ->where('fieldTypeOptions.0.value', 'user')
+                ->where('fieldTypeOptions.1.value', 'number')
+                ->where('ticketFieldDefinitions.0.label', 'Complexity')
+                ->where('ticketFieldDefinitions.0.field_type', 'number')
+                ->where('ticketFieldDefinitions.0.ticket_field_values_count', 1)
                 ->where('ticketLinkTypes.0.label', 'Relates to')
+                ->where('ticketLinkTypes.0.counterpart_label', 'Related from')
+                ->where('ticketLinkTypes.0.ticket_links_count', 1)
                 ->where('templateState.templateName', 'Issue Tracker Template')
                 ->where('templateState.overriddenAreas.0.value', DuplicateProjectConfiguration::COPY_PROJECT_SETTINGS),
             );
@@ -387,6 +413,11 @@ class ProjectTicketMetadataSettingsControllerTest extends TestCase
             'field_type' => 'number',
             'position' => 1,
         ]);
+        $ticket = Ticket::factory()->for($project)->create();
+        $fieldValue = $fieldDefinition->ticketFieldValues()->create([
+            'ticket_id' => $ticket->id,
+            'value_number' => 5,
+        ]);
 
         $this->syncProjectPermissions($project, $user, ['edit']);
 
@@ -412,6 +443,11 @@ class ProjectTicketMetadataSettingsControllerTest extends TestCase
             'label' => 'Risk score',
             'field_type' => 'number',
         ]);
+        $this->assertDatabaseHas('ticket_field_values', [
+            'id' => $fieldValue->id,
+            'ticket_field_definition_id' => $fieldDefinition->id,
+            'value_number' => 5,
+        ]);
     }
 
     /**
@@ -446,6 +482,15 @@ class ProjectTicketMetadataSettingsControllerTest extends TestCase
             'counterpart_label' => 'Relates to',
             'position' => 1,
         ]);
+        $sourceTicket = Ticket::factory()->for($project)->create();
+        $targetTicket = Ticket::factory()->for($project)->create([
+            'sequence_number' => 2,
+            'ticket_key' => 'TEST-2',
+        ]);
+        $ticketLink = $ticketLinkType->ticketLinks()->create([
+            'source_ticket_id' => $sourceTicket->id,
+            'target_ticket_id' => $targetTicket->id,
+        ]);
 
         $this->syncProjectPermissions($project, $user, ['edit']);
 
@@ -477,6 +522,10 @@ class ProjectTicketMetadataSettingsControllerTest extends TestCase
             'label' => 'Depends on',
             'counterpart_label' => 'Required by',
         ]);
+        $this->assertDatabaseHas('ticket_links', [
+            'id' => $ticketLink->id,
+            'ticket_link_type_id' => $ticketLinkType->id,
+        ]);
 
         $this->actingAs($user)
             ->delete(route('projects.settings.metadata.link-types.destroy', [$project, $ticketLinkType]))
@@ -486,6 +535,9 @@ class ProjectTicketMetadataSettingsControllerTest extends TestCase
         $this->assertDatabaseMissing('ticket_link_types', [
             'id' => $ticketLinkType->id,
         ]);
+        $this->assertDatabaseMissing('ticket_links', [
+            'id' => $ticketLink->id,
+        ]);
     }
 
     public function test_last_priority_is_protected_from_deletion(): void
diff --git a/tests/Fixtures/project-metadata-settings-browser.mjs b/tests/Fixtures/project-metadata-settings-browser.mjs
new file mode 100644
index 0000000..e240836
--- /dev/null
+++ b/tests/Fixtures/project-metadata-settings-browser.mjs
@@ -0,0 +1,207 @@
+import assert from 'node:assert/strict';
+import process from 'node:process';
+
+const playwright = await import(process.env.PLAYWRIGHT_MODULE ?? 'playwright');
+const { chromium } = playwright.default ?? playwright;
+const browser = await chromium.launch({ channel: 'chrome', headless: true });
+const base = 'http://127.0.0.1:4189';
+const context = await browser.newContext({
+    viewport: { width: 1440, height: 1000 },
+});
+const page = await context.newPage();
+page.setDefaultTimeout(10000);
+const errors = [];
+page.on('pageerror', (error) => errors.push(error.message));
+const requests = [];
+page.on('request', (request) => {
+    if (['POST', 'PATCH', 'DELETE'].includes(request.method())) {
+        requests.push(request);
+    }
+});
+const button = (name) => page.getByRole('button', { name, exact: true });
+const dialog = () => page.getByRole('dialog');
+const result = (value) =>
+    context.addCookies([{ name: 'metadata_test_result', value, url: base }]);
+const visit = async () => {
+    await result('success');
+    await page.goto(base + '/projects/1/settings/metadata?reset');
+    await page
+        .getByRole('heading', { name: 'Ticket settings', exact: true })
+        .waitFor();
+};
+const noOverflow = async () =>
+    assert.equal(
+        await page.evaluate(
+            () => document.documentElement.scrollWidth <= window.innerWidth,
+        ),
+        true,
+    );
+const submit = async (label, method, pathname, expected) => {
+    const sent = page.waitForRequest((request) => request.method() === method);
+    await dialog().getByRole('button', { name: label, exact: true }).click();
+    const request = await sent;
+    assert.equal(new URL(request.url()).pathname, pathname);
+    assert.deepEqual(request.postDataJSON(), expected);
+};
+const closed = () => dialog().waitFor({ state: 'hidden' });
+const formState = (state) =>
+    dialog()
+        .locator('[data-form-state="' + state + '"]')
+        .waitFor({ state: 'visible' });
+
+try {
+    for (const width of [1440, 768, 390, 320]) {
+        await page.setViewportSize({ width, height: 1000 });
+        for (const theme of ['light', 'dark']) {
+            await page.emulateMedia({ colorScheme: theme });
+            await visit();
+            await noOverflow();
+            await page
+                .getByLabel('Blocks points to Blocked by', { exact: true })
+                .waitFor();
+            const trigger = button('Edit Reviewer');
+            await trigger.focus();
+            await page.keyboard.press('Enter');
+            await dialog().waitFor();
+            assert.equal(
+                await page
+                    .getByLabel('Field label', { exact: true })
+                    .inputValue(),
+                'Reviewer',
+            );
+            assert.equal(
+                await page
+                    .getByLabel('Field type', { exact: true })
+                    .inputValue(),
+                'user',
+            );
+            await page.keyboard.press('Tab');
+            assert.equal(
+                await dialog().evaluate((element) =>
+                    element.contains(document.activeElement),
+                ),
+                true,
+            );
+            await noOverflow();
+            await page.keyboard.press('Escape');
+            await closed();
+            assert.equal(
+                await trigger.evaluate(
+                    (element) => document.activeElement === element,
+                ),
+                true,
+            );
+        }
+    }
+
+    await visit();
+    await button('Add field').click();
+    await page.getByLabel('Field label', { exact: true }).fill('Owner');
+    await page.getByLabel('Field type', { exact: true }).selectOption('user');
+    await result('validation');
+    await submit('Add field', 'POST', '/projects/1/settings/metadata/fields', {
+        label: 'Owner',
+        field_type: 'user',
+    });
+    await formState('validation');
+    assert.equal(
+        await page
+            .getByLabel('Field label', { exact: true })
+            .getAttribute('aria-invalid'),
+        'true',
+    );
+    await result('server');
+    await dialog()
+        .getByRole('button', { name: 'Add field', exact: true })
+        .click();
+    await formState('server');
+    await result('success');
+    await dialog()
+        .getByRole('button', { name: 'Try again', exact: true })
+        .click();
+    await closed();
+    await button('Edit Owner').click();
+    await page.getByLabel('Field label', { exact: true }).fill('Effort');
+    await page.getByLabel('Field type', { exact: true }).selectOption('number');
+    await page.getByLabel('Position', { exact: true }).fill('1');
+    await submit('Save', 'PATCH', '/projects/1/settings/metadata/fields/100', {
+        label: 'Effort',
+        field_type: 'number',
+        position: 1,
+    });
+    await closed();
+    await button('Edit Effort').waitFor();
+    const beforeFieldDelete = requests.length;
+    await button('Delete Reviewer').click();
+    await dialog()
+        .getByText(/permanently removes 2 stored ticket values/)
+        .waitFor();
+    await dialog().getByRole('button', { name: 'Cancel', exact: true }).click();
+    await closed();
+    assert.equal(requests.length, beforeFieldDelete);
+    await button('Delete Reviewer').click();
+    await submit(
+        'Delete',
+        'DELETE',
+        '/projects/1/settings/metadata/fields/5',
+        {},
+    );
+    await closed();
+
+    await button('Add link type').click();
+    await page.getByLabel('Source label', { exact: true }).fill('Depends on');
+    await page
+        .getByLabel('Counterpart label', { exact: true })
+        .fill('Required by');
+    await submit(
+        'Add link type',
+        'POST',
+        '/projects/1/settings/metadata/link-types',
+        { name: 'Depends on', counterpart_name: 'Required by' },
+    );
+    await closed();
+    await button('Edit Depends on').click();
+    assert.equal(
+        await page
+            .getByLabel('Counterpart label', { exact: true })
+            .inputValue(),
+        'Required by',
+    );
+    await page.getByLabel('Source label', { exact: true }).fill('Requires');
+    await page
+        .getByLabel('Counterpart label', { exact: true })
+        .fill('Required for');
+    await page.getByLabel('Position', { exact: true }).fill('1');
+    await submit(
+        'Save',
+        'PATCH',
+        '/projects/1/settings/metadata/link-types/101',
+        { name: 'Requires', counterpart_name: 'Required for', position: 1 },
+    );
+    await closed();
+    await page
+        .getByLabel('Requires points to Required for', { exact: true })
+        .waitFor();
+    const beforeLinkDelete = requests.length;
+    await button('Delete Blocks').click();
+    await dialog()
+        .getByText(/permanently removes 1 ticket relationships/)
+        .waitFor();
+    await dialog().getByRole('button', { name: 'Cancel', exact: true }).click();
+    await closed();
+    assert.equal(requests.length, beforeLinkDelete);
+    await button('Delete Blocks').click();
+    await submit(
+        'Delete',
+        'DELETE',
+        '/projects/1/settings/metadata/link-types/7',
+        {},
+    );
+    await closed();
+    assert.deepEqual(errors, []);
+    console.log(
+        'Metadata browser checks passed: field and link-type CRUD payloads, direction labels, deletion impact, validation, retries, keyboard focus, responsive widths and both themes.',
+    );
+} finally {
+    await browser.close();
+}
diff --git a/tests/Fixtures/project-metadata-settings.mjs b/tests/Fixtures/project-metadata-settings.mjs
index 23e5c67..50a9ae4 100644
--- a/tests/Fixtures/project-metadata-settings.mjs
+++ b/tests/Fixtures/project-metadata-settings.mjs
@@ -55,9 +55,35 @@ function initial() {
             { id: 3, name: 'Normal', position: 1 },
             { id: 4, name: 'Urgent', position: 2 },
         ],
-        ticketFieldDefinitions: [],
-        ticketLinkTypes: [],
-        fieldTypeOptions: [],
+        ticketFieldDefinitions: [
+            {
+                id: 5,
+                label: 'Reviewer',
+                field_type: 'user',
+                position: 1,
+                ticket_field_values_count: 2,
+            },
+            {
+                id: 6,
+                label: 'Complexity',
+                field_type: 'number',
+                position: 2,
+                ticket_field_values_count: 0,
+            },
+        ],
+        ticketLinkTypes: [
+            {
+                id: 7,
+                label: 'Blocks',
+                counterpart_label: 'Blocked by',
+                position: 1,
+                ticket_links_count: 1,
+            },
+        ],
+        fieldTypeOptions: [
+            { label: 'User', value: 'user' },
+            { label: 'Number', value: 'number' },
+        ],
     };
 }
 function makePage(
@@ -132,16 +158,30 @@ if (serve) {
                 response.end('Unavailable');
                 return;
             }
-            const kind = url.pathname.includes('/types') ? 'type' : 'priority';
+            const kind = url.pathname.includes('/link-types')
+                ? 'link'
+                : url.pathname.includes('/fields')
+                  ? 'field'
+                  : url.pathname.includes('/types')
+                    ? 'type'
+                    : 'priority';
             const entries =
-                kind === 'type' ? data.ticketTypes : data.ticketPriorities;
+                kind === 'type'
+                    ? data.ticketTypes
+                    : kind === 'priority'
+                      ? data.ticketPriorities
+                      : kind === 'field'
+                        ? data.ticketFieldDefinitions
+                        : data.ticketLinkTypes;
             const id = Number(url.pathname.split('/').at(-1));
             if (
                 result === 'validation' ||
-                (submitted.name &&
+                ((submitted.name || submitted.label) &&
                     entries.some(
                         (entry) =>
-                            entry.name === submitted.name && entry.id !== id,
+                            (entry.name ?? entry.label) ===
+                                (submitted.name ?? submitted.label) &&
+                            entry.id !== id,
                     ))
             ) {
                 errors =
@@ -150,7 +190,14 @@ if (serve) {
                               replacement_ticket_type_id:
                                   'Choose a parent-enabled replacement type.',
                           }
-                        : { name: 'This name is already in use.' };
+                        : kind === 'field'
+                          ? { label: 'This field label is already in use.' }
+                          : kind === 'link'
+                            ? {
+                                  counterpart_name:
+                                      'Enter a distinct counterpart label.',
+                              }
+                            : { name: 'This name is already in use.' };
             } else if (request.method === 'DELETE') {
                 entries.splice(
                     entries.findIndex((item) => item.id === id),
@@ -159,16 +206,43 @@ if (serve) {
             } else if (url.pathname.endsWith('/metadata')) {
                 Object.assign(data.project, submitted);
             } else if (request.method === 'POST') {
-                entries.push({
+                const created = {
                     id: nextId++,
                     position: entries.length + 1,
-                    tickets_count: 0,
-                    ...submitted,
-                });
+                    ...(kind === 'type'
+                        ? { tickets_count: 0, ...submitted }
+                        : kind === 'priority'
+                          ? submitted
+                          : kind === 'field'
+                            ? {
+                                  label: submitted.label,
+                                  field_type: submitted.field_type,
+                                  ticket_field_values_count: 0,
+                              }
+                            : {
+                                  label: submitted.name,
+                                  counterpart_label: submitted.counterpart_name,
+                                  ticket_links_count: 0,
+                              }),
+                };
+                entries.push(created);
             } else {
                 const item = entries.find((item) => item.id === id);
                 entries.splice(entries.indexOf(item), 1);
-                Object.assign(item, submitted);
+                Object.assign(
+                    item,
+                    kind === 'field'
+                        ? {
+                              label: submitted.label,
+                              field_type: submitted.field_type,
+                          }
+                        : kind === 'link'
+                          ? {
+                                label: submitted.name,
+                                counterpart_label: submitted.counterpart_name,
+                            }
+                          : submitted,
+                );
                 entries.splice(submitted.position - 1, 0, item);
             }
             entries.forEach((entry, index) => (entry.position = index + 1));
@@ -240,6 +314,13 @@ if (serve) {
         );
         assert.match(html, /Assigned tickets: 2/);
         assert.match(html, /Parent type/);
+        assert.match(html, /data-ticket-field-definition="5"/);
+        assert.match(html, /Reviewer/);
+        assert.match(html, /Stored values: 2/);
+        assert.match(html, /data-ticket-link-type="7"/);
+        assert.match(html, /Blocks/);
+        assert.match(html, /Blocked by/);
+        assert.match(html, /Ticket relationships: 1/);
         assert.match(html, /id="show_author"[^>]*aria-checked="true"/);
         assert.match(html, /id="show_story_points"[^>]*aria-checked="false"/);
         const single = await render({