diff --git a/components/custom-ui/dialog/AuthorDialog.vue b/components/custom-ui/dialog/AuthorDialog.vue
new file mode 100644
index 0000000..23ac548
--- /dev/null
+++ b/components/custom-ui/dialog/AuthorDialog.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import {IconHelp} from "@tabler/icons-vue"
+import {Button} from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import {Input} from '@/components/ui/input'
+import {Popover, PopoverTrigger, PopoverContent} from '@/components/ui/popover'
+import type {v2Author} from "~/composables/aruna_api_json";
+import {useForm} from "vee-validate";
+import {toTypedSchema} from '@vee-validate/zod'
+import * as z from 'zod'
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean,
+  withButton: boolean
+}>()
+const externalTrigger = toRef(props, 'initialOpen')
+const open = ref(props.initialOpen)
+watch(externalTrigger, () => open.value = externalTrigger.value)
+/* ----- END PROPERTIES ----- */
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits<{
+  'add-author': [relation: v2Author]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(z.object({
+  firstName: z.string({required_error: "First name is required."}).min(2).max(128),
+  lastName: z.string({required_error: "Last name is required."}).min(2).max(128),
+  email: z.string().email('Invalid email format.').optional(),
+  orcid: z.string().regex(ORCID_REGEX, 'Not a valid ORCID').optional(),
+  userId: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
+}))
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = form.handleSubmit(async (values) => {
+  emit('add-author', {
+    firstName: values.firstName,
+    lastName: values.lastName,
+    email: values.email || '',
+    orcid: values.orcid || '',
+    id: values.userId || ''
+  })})
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline">
+        Add Author
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px] sm:rounded-md"
+                   @pointer-down-outside="(event) => event.preventDefault()">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-800 font-bold">Add Author</DialogTitle>
+        <DialogDescription class="text-center">
+          Add an additional author to the resource.
+        </DialogDescription>
+      </DialogHeader>
+
+      <form id="dialogForm" @submit="onSubmit" class="space-y-4">
+        <div class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
+          <div class="flex grow flex-col">
+            <FormField v-slot="{ componentField }" name="firstName">
+              <FormItem>
+                <FormLabel>First Name</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder="Author's first name" v-bind="componentField" class="mt-0"/>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+          </div>
+          <div class="flex grow flex-col">
+            <FormField v-slot="{ componentField }" name="lastName">
+              <FormItem>
+                <FormLabel>Last Name</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder="Author's last name" v-bind="componentField"/>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+          </div>
+        </div>
+
+        <FormField v-slot="{ componentField }" name="email">
+          <FormItem>
+            <div class="flex items-center justify-between">
+              <FormLabel>Email</FormLabel>
+              <Popover>
+                <PopoverTrigger>
+                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
+                </PopoverTrigger>
+                <PopoverContent class="text-sm rounded-sm">
+                  A valid email address that can be used to contact the author.
+                </PopoverContent>
+              </Popover>
+            </div>
+            <FormControl>
+              <Input type="text" placeholder="A valid email address" v-bind="componentField"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="orcid">
+          <FormItem>
+            <FormLabel class="flex items-center justify-between">
+              <span>ORCID</span>
+              <Popover>
+                <PopoverTrigger>
+                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
+                </PopoverTrigger>
+                <PopoverContent class="text-sm rounded-sm">
+                  If available, you can enter the ORCID of the author here.
+                </PopoverContent>
+              </Popover>
+            </FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Author's ORCID" v-bind="componentField"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="userId">
+          <FormItem>
+            <FormLabel class="flex items-center justify-between">
+              <span>User Id</span>
+              <Popover>
+                <PopoverTrigger>
+                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
+                </PopoverTrigger>
+                <PopoverContent class="text-sm rounded-sm">
+                  If available, you can enter the Aruna user id of the author here.
+                </PopoverContent>
+              </Popover>
+            </FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Author's user id in Aruna" v-bind="componentField"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+      </form>
+
+      <DialogFooter>
+        <Button type="submit" form="dialogForm" class="bg-aruna-800 hover:bg-aruna-700">
+          Add Author
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dialog/KeyValueDialog.vue b/components/custom-ui/dialog/KeyValueDialog.vue
new file mode 100644
index 0000000..4791a50
--- /dev/null
+++ b/components/custom-ui/dialog/KeyValueDialog.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {Button} from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {FormControl, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form'
+import {Input} from '@/components/ui/input'
+import {type v2KeyValue, v2KeyValueVariant} from "~/composables/aruna_api_json";
+import {useForm} from "vee-validate";
+import {toTypedSchema} from '@vee-validate/zod'
+import * as z from 'zod'
+
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean,
+  withButton: boolean
+}>()
+const externalTrigger = toRef(props, 'initialOpen')
+const open = ref(props.initialOpen)
+watch(externalTrigger, () => open.value = externalTrigger.value)
+/* ----- END PROPERTIES ----- */
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits<{
+  'add-key-value': [keyValue: v2KeyValue]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(z.object({
+  key: z.string({required_error: "Key is required."}).min(2).max(256),
+  value: z.string().optional(),
+  variant: z.nativeEnum(v2KeyValueVariant) //.default(v2KeyValueVariant.KEY_VALUE_VARIANT_LABEL),
+}))
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = form.handleSubmit(async (values) => {
+  emit('add-key-value', {
+    key: values.key,
+    value: values.value,
+    variant: values.variant
+  })
+})
+/* ----- END FORM SCHEMA ----- */
+const validVariants = computed(() => Object.keys(v2KeyValueVariant).filter(variant => variant !== 'KEY_VALUE_VARIANT_UNSPECIFIED'))
+
+function formatKeyValueLabel(variant: string): string {
+  const label = variant.replace('KEY_VALUE_VARIANT_', '').replace('_', ' ').toLowerCase()
+  return label.charAt(0).toUpperCase() + label.slice(1)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline">
+        Add Key-Value
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px] sm:rounded-md"
+                   @pointer-down-outside="(event) => event.preventDefault()">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-700 font-bold">Add Key-Value</DialogTitle>
+        <DialogDescription class="text-center">
+          Add an individual key-value to your resource.
+        </DialogDescription>
+      </DialogHeader>
+
+      <form id="dialogForm" @submit="onSubmit" class="space-y-4">
+        <FormField v-slot="{ componentField }" name="variant">
+          <FormItem>
+            <FormLabel>Variant</FormLabel>
+            <Select v-bind="componentField">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a key-value variant"/>
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem class="" v-for="variant in validVariants" :value="variant">
+                    {{ formatKeyValueLabel(variant) }}
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="key">
+          <FormItem>
+            <FormLabel>Key</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Here you can enter the key" v-bind="componentField" class="mt-0"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="value">
+          <FormItem>
+            <FormLabel>Value</FormLabel>
+            <FormControl>
+              <Textarea v-bind="componentField"
+                        :rows="5"
+                        placeholder="Here you can enter the value"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+      </form>
+      <DialogFooter>
+        <Button type="submit" form="dialogForm" class="bg-aruna-800 hover:bg-aruna-700">
+          Add key-value
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dialog/OntologyDialog.vue b/components/custom-ui/dialog/OntologyDialog.vue
new file mode 100644
index 0000000..b8879cf
--- /dev/null
+++ b/components/custom-ui/dialog/OntologyDialog.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+/* ----- PROPERTIES ----- */
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "~/components/ui/dialog";
+import {Button} from "~/components/ui/button";
+import type {OntologyDoc} from "~/composables/ts_api/OntologyDoc";
+import {IconBraces, IconExternalLink, IconLoader2} from "@tabler/icons-vue";
+import {v2KeyValueVariant} from "~/composables/aruna_api_json";
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean
+  withButton: boolean
+  buttonCss: string
+}>()
+const externalTrigger = toRef(props, 'initialOpen')
+const open = ref(props.initialOpen)
+watch(externalTrigger, () => (open.value = externalTrigger.value))
+/* ----- END PROPERTIES ----- */
+
+/* ----- EMITS ----- */
+const emit = defineEmits<{
+  'add-key-value': [key: string, value: string, kvType: v2KeyValueVariant]
+}>()
+/* ----- END EMITS ----- */
+
+const queryInput = ref('')
+const fetching = ref(false)
+const results: Ref<OntologyDoc[]> = ref([]) //ref([{label: 'test'}, {label: 'test2'}, {label: 'test3'}])
+const currentSelection: Ref<OntologyDoc | undefined> = ref(undefined)
+
+// Debounce input to decrease number of requests
+watch(queryInput, () => {
+  // Empty input only clears results
+  if (!queryInput.value) {
+    results.value = []
+    return
+  }
+
+  fetching.value = true
+  results.value = []
+  debouncedInput()
+})
+const debouncedInput = debounce(async () => await searchOntologies(queryInput.value), 250)
+
+async function searchOntologies(ontologyName: string): Promise<void> {
+  // No need to search with empty input
+  if (!ontologyName) {
+    results.value = []
+    return
+  }
+
+  results.value = await $fetch<OntologyDoc[]>('/api/ontology', {
+    query: {
+      ontologyName: ontologyName
+    }
+  }).catch(error => {
+    console.log(error)
+    return []
+  })
+  fetching.value = false
+}
+
+function selectOntology(selection: OntologyDoc) {
+  currentSelection.value = selection
+  queryInput.value = ''
+  results.value = []
+}
+
+function createLandingPageLink(id: string) {
+  id = id.replace(':', '')
+  return `https://terminology.tib.eu/ts/ontologies/${id}`
+}
+
+function createMetadataLink(id: string) {
+  id = id.replace(':', '')
+  return `https://service.tib.eu/ts4tib/api/ontologies/${id}`
+}
+
+function submit() {
+  if (currentSelection.value) {
+    emit('add-key-value',
+        'http://purl.org/dc/terms/conformsTo',
+        `{"@type": "CreativeWork", "@id": "${currentSelection.value.iri}", "url": "${createMetadataLink(currentSelection.value.id)}"}`,
+        v2KeyValueVariant.KEY_VALUE_VARIANT_STATIC_LABEL)
+    clear()
+    open.value = false
+  }
+}
+
+function clear() {
+  currentSelection.value = undefined
+  results.value = []
+}
+</script>
+
+<template>
+  <Dialog v-model:open="open" @update:open="clear">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline"
+              :class="cn('rounded-sm text-aruna-highlight border border-aruna-highlight bg-transparent hover:bg-aruna-highlight hover:text-aruna-text-accent', props.buttonCss)">
+        Add Ontology
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-2xl sm:rounded-md"
+                   @pointer-down-outside="event => event.preventDefault()">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-highlight font-bold">Add Ontology Definition</DialogTitle>
+      </DialogHeader>
+
+      <!-- Display current selection -->
+      <div class="rounded-sm border border-aruna-text/50 p-4">
+        <div class="flex flex-wrap items-center px-4 sm:px-0">
+          <h3 class="text-base font-semibold leading-7 text-aruna-text-accent">Currently selected ontology:</h3>
+          <p class="ms-4 font-bold max-w-2xl leading-6 text-aruna-highlight">
+            {{ currentSelection ? currentSelection.label : 'None' }}
+          </p>
+
+        </div>
+
+        <Separator v-if="currentSelection" class="my-4 bg-aruna-text/50"/>
+
+        <div v-if="currentSelection">
+          <dl>
+            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-bold leading-6 text-aruna-text-accent">Id</dt>
+              <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                {{ currentSelection.id }}
+              </dd>
+            </div>
+            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-bold leading-6 text-aruna-text-accent">IRI</dt>
+              <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                <NuxtLink :to="currentSelection.iri"
+                          target="_blank"
+                          class="hs-tooltip-toggle text-aruna-highlight hover:text-aruna-highlight/80">
+                  {{ currentSelection.iri }}
+                </NuxtLink>
+
+              </dd>
+            </div>
+            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-bold leading-6 text-aruna-text-accent">Description</dt>
+              <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                {{ currentSelection.description.join(' ') }}
+              </dd>
+            </div>
+            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-bold leading-6 text-aruna-text-accent">More Information</dt>
+              <dd class="inline-flex mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                <NuxtLink :to="createLandingPageLink(currentSelection.id)"
+                          target="_blank"
+                          class="font-semibold text-aruna-highlight hover:text-aruna-highlight/80">
+                  <IconExternalLink class="size-6 flex-shrink-0"/>
+                </NuxtLink>
+                <NuxtLink :to="createMetadataLink(currentSelection.id)"
+                          target="_blank"
+                          class="font-semibold text-aruna-highlight hover:text-aruna-highlight/80">
+                  <IconBraces class="ms-6 size-6 flex-shrink-0"/>
+                </NuxtLink>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+      <!-- End display current selection -->
+
+      <!-- COMMAND -->
+      <Command class="rounded-sm border">
+        <CommandInput placeholder="Search here for an ontology"
+                      class="border-0 focus:border-0 outline-0 focus:outline-0 focus:ring-0"
+                      @input="(event) => queryInput = event.target.value"/>
+        <CommandList class="gap-y-2">
+          <CommandEmpty v-if="queryInput && results.length <= 0 && fetching"
+                        class="flex items-center justify-center gap-x-4">
+            Fetching ontologies <IconLoader2 class="mr-2 animate-spin"/>
+          </CommandEmpty>
+          <CommandEmpty v-if="queryInput && results.length <= 0 && !fetching">
+            No ontologies found.
+          </CommandEmpty>
+          <CommandItem v-for="ontology in results"
+                       :value="ontology"
+                       @select="selectOntology(ontology)">
+            {{ ontology.label }}
+          </CommandItem>
+        </CommandList>
+      </Command>
+      <!-- END COMMAND -->
+
+      <DialogFooter>
+        <Button variant="outline"
+                @click="submit"
+                class="rounded-sm text-aruna-highlight border border-aruna-highlight bg-transparent hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          Add Ontology
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/modal/Ontology.vue b/components/modal/Ontology.vue
deleted file mode 100644
index 67a9efb..0000000
--- a/components/modal/Ontology.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<script lang="ts" setup>
-import {IconBraces, IconExternalLink, IconX} from "@tabler/icons-vue";
-import {v2KeyValueVariant} from "~/composables/aruna_api_json";
-import type {OntologyDoc} from "~/composables/ts_api/OntologyDoc";
-
-const props = defineProps<{
-  modalId: string,
-}>()
-
-const emit = defineEmits<{
-  'add-key-value': [key: string, value: string, kvType: v2KeyValueVariant]
-}>()
-
-const queryInput = ref('')
-const results: Ref<OntologyDoc[]> = ref([])
-const currentSelection: Ref<OntologyDoc | undefined> = ref(undefined)
-
-watch(queryInput, () => debouncedInput())
-const debouncedInput = debounce(async () => await searchOntologies(queryInput.value), 250)
-
-async function searchOntologies(ontologyName: string): Promise<void> {
-  if (!ontologyName) {
-    results.value = []
-    return
-  }
-
-  results.value = await $fetch<OntologyDoc[]>('/api/ontology', {
-    query: {
-      ontologyName: ontologyName
-    }
-  }).catch(error => {
-    console.log(error)
-    return []
-  })
-}
-
-function createLandingPageLink(id: string) {
-  id = id.replace(':', '')
-  return `https://terminology.tib.eu/ts/ontologies/${id}`
-}
-
-function createMetadataLink(id: string) {
-  id = id.replace(':', '')
-  return `https://service.tib.eu/ts4tib/api/ontologies/${id}`
-}
-
-function selectOntology(selection: OntologyDoc) {
-  currentSelection.value = selection
-  queryInput.value = ''
-  results.value = []
-}
-
-function reset() {
-  currentSelection.value = undefined
-}
-
-function submit() {
-  if (currentSelection.value) {
-    emit('add-key-value',
-        'http://purl.org/dc/terms/conformsTo',
-        `{"@type": "CreativeWork", "@id": "${currentSelection.value.iri}", "url": "${createMetadataLink(currentSelection.value.id)}"}`,
-        v2KeyValueVariant.KEY_VALUE_VARIANT_STATIC_LABEL)
-    reset()
-  }
-}
-</script>
-
-<template>
-  <ClientOnly>
-    <div :id="props.modalId"
-         class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none [--tab-accessibility-limited:false]">
-      <div
-          class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
-        <div
-            class="flex flex-col bg-gray-800 border border-neutral-700 shadow-sm rounded-md pointer-events-auto shadow-neutral-700/70">
-          <div class="flex justify-between items-center py-3 px-4 border-b border-neutral-700">
-            <h3 class="font-bold text-gray-200">
-              Add Ontology Definition
-            </h3>
-            <button :data-hs-overlay="`#${props.modalId}`"
-                    @click="reset"
-                    class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-200 hover:bg-gray-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700"
-                    type="button">
-              <span class="sr-only">Close</span>
-              <IconX class="flex-shrink-0 size-4"/>
-            </button>
-          </div>
-
-          <div class="space-y-4 p-4">
-            <!-- Display current selection -->
-            <div v-if="currentSelection">
-              <div>
-                <div class="px-4 sm:px-0">
-                  <h3 class="text-base font-semibold leading-7 text-gray-300">Currently selected ontology:</h3>
-                  <p class="mt-1 font-bold max-w-2xl leading-6 text-aruna-700">
-                    {{ currentSelection.label }}
-                  </p>
-                </div>
-                <div class="my-6 border-y border-gray-100">
-                  <dl class="divide-y divide-gray-100">
-                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-bold leading-6 text-gray-400">Id</dt>
-                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                        {{ currentSelection.id }}
-                      </dd>
-                    </div>
-                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-bold leading-6 text-gray-400">IRI</dt>
-                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                        <NuxtLink :to="currentSelection.iri"
-                                  target="_blank"
-                                  class="hs-tooltip-toggle text-aruna-700 hover:text-aruna-600">
-                          {{ currentSelection.iri }}
-                        </NuxtLink>
-
-                      </dd>
-                    </div>
-                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-bold leading-6 text-gray-400">Description</dt>
-                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                        {{ currentSelection.description.join(' ') }}
-                      </dd>
-                    </div>
-                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-bold leading-6 text-gray-400">More Information</dt>
-                      <dd class="inline-flex mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                        <NuxtLink :to="createLandingPageLink(currentSelection.id)"
-                                  target="_blank"
-                                  class="hs-tooltip-toggle font-semibold text-aruna-700 hover:text-aruna-600">
-                          <IconExternalLink class="size-6 flex-shrink-0"/>
-                        </NuxtLink>
-                        <NuxtLink :to="createMetadataLink(currentSelection.id)"
-                                  target="_blank"
-                                  class="font-semibold text-aruna-700 hover:text-aruna-600">
-                          <IconBraces class="ms-6 size-6 flex-shrink-0"/>
-                        </NuxtLink>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-              </div>
-            </div>
-            <div v-else>
-              <h3 class="text-base font-semibold leading-7 text-gray-300">Currently selected ontology: None</h3>
-            </div>
-            <!-- End display current selection -->
-
-            <!-- Floating Input -->
-            <div class="relative">
-              <div class="relative">
-                <input v-model="queryInput"
-                       type="text"
-                       id="ontology-search"
-                       placeholder="Search an ontology definition"
-                       class="peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                  focus:pt-6
-                  focus:pb-2
-                  [&:not(:placeholder-shown)]:pt-6
-                  [&:not(:placeholder-shown)]:pb-2
-                  autofill:pt-6
-                  autofill:pb-2">
-                <label for="ontology-search"
-                       class="absolute top-0 start-0 p-4 h-full text-sm text-gray-300 truncate pointer-events-none transition ease-in-out duration-100 border border-transparent origin-[0_0] peer-disabled:opacity-50 peer-disabled:pointer-events-none
-                  peer-focus:scale-90
-                  peer-focus:translate-x-0.5
-                  peer-focus:-translate-y-1.5
-                  peer-focus:text-neutral-500
-                  peer-[:not(:placeholder-shown)]:scale-90
-                  peer-[:not(:placeholder-shown)]:translate-x-0.5
-                  peer-[:not(:placeholder-shown)]:-translate-y-1.5
-                  peer-[:not(:placeholder-shown)]:text-gray-500">
-                  Search for an ontology definition
-                </label>
-              </div>
-
-              <!-- Display search results -->
-              <div v-if="results.length > 0"
-                   class="absolute z-50 mt-2 min-w-96 max-w-md max-h-72 p-1 bg-slate-900 border border-gray-700 rounded-md overflow-hidden overflow-y-auto focus:outline-none focus:border-aruna-700 focus:ring-aruna-700
-                   [&::-webkit-scrollbar]:w-2
-                   [&::-webkit-scrollbar-thumb]:rounded-full
-                   [&::-webkit-scrollbar-track]:bg-neutral-700
-                   [&::-webkit-scrollbar-thumb]:bg-neutral-500">
-                <div v-for="ontology in results"
-                     @click="selectOntology(ontology)"
-                     class="cursor-pointer p-2 space-y-0.5 w-full text-sm text-gray-300 hover:bg-gray-700 rounded-md focus:outline-none">
-                  <div class="flex justify-between items-center w-full">
-                    <div>{{ ontology.label }}</div>
-                  </div>
-                </div>
-              </div>
-              <!-- End display search results -->
-            </div>
-            <!-- End Floating Input -->
-          </div>
-
-
-          <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-gray-700">
-            <button type="button" @click="reset"
-                    class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-700 bg-slate-900 text-white shadow-sm hover:bg-gray-800 disabled:opacity-50 disabled:pointer-events-none"
-                    :data-hs-overlay="`#${props.modalId}`">
-              Close
-            </button>
-            <button type="button"
-                    :disabled="currentSelection === undefined"
-                    @click="submit"
-                    class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent bg-aruna-800 text-white hover:bg-aruna-700 disabled:opacity-50 disabled:pointer-events-none"
-                    :data-hs-overlay="`#${props.modalId}`">
-              Add Ontology
-            </button>
-          </div>
-
-        </div>
-      </div>
-    </div>
-  </ClientOnly>
-</template>
\ No newline at end of file
diff --git a/components/modal/author.vue b/components/modal/author.vue
deleted file mode 100644
index 224d547..0000000
--- a/components/modal/author.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<script lang="ts" setup>
-import {IconExclamationCircle, IconX} from "@tabler/icons-vue";
-import {type v2Author,} from "~/composables/aruna_api_json";
-import {ULID_REGEX, ORCID_REGEX, EMAIL_REGEX} from "~/composables/constants";
-
-const props = defineProps<{
-  modalId: string,
-}>()
-
-const emit = defineEmits<{
-  'add-author': [relation: v2Author]
-}>()
-
-const firstName = ref('')
-const firstNameErr: Ref<string | undefined> = ref('Please enter a first name')
-const lastName = ref('')
-const lastNameErr: Ref<string | undefined> = ref('Please enter a last name')
-const email = ref('')
-const emailErr: Ref<string | undefined> = ref(undefined)
-const orcid = ref('')
-const orcidErr: Ref<string | undefined> = ref(undefined)
-const userId = ref('')
-const userIdErr: Ref<string | undefined> = ref(undefined)
-
-const validState = ref(true)
-const validationStates = ref(new Map<string, boolean>)
-validationStates.value.set('firstname', false)
-validationStates.value.set('lastname', false)
-validationStates.value.set('email', true)
-validationStates.value.set('orcid', true)
-validationStates.value.set('userid', true)
-
-watch(firstName, () => validateName())
-watch(lastName, () => validateName())
-
-function validateName() {
-  // First name
-  const firstValid = firstName.value.length > 0
-  validationStates.value.set('firstname', firstValid)
-  firstNameErr.value = firstValid ? undefined : 'Please enter a first name'
-
-  // Last name
-  const lastValid = lastName.value.length > 0
-  validationStates.value.set('lastname', lastValid)
-  lastNameErr.value = lastValid ? undefined : 'Please enter a last name'
-
-  validation()
-}
-
-watch(email, () => validateEmail())
-
-function validateEmail() {
-  if (email.value.length > 0) {
-    const valid = EMAIL_REGEX.test(email.value)
-    validationStates.value.set('email', valid)
-    emailErr.value = valid ? undefined : 'Please enter a valid email address'
-  } else {
-    validationStates.value.set('email', true)
-    emailErr.value = undefined
-  }
-  validation()
-}
-
-watch(orcid, () => validateOrcid())
-
-function validateOrcid() {
-  if (orcid.value.length > 0) {
-    const valid = ORCID_REGEX.test(orcid.value)
-    validationStates.value.set('orcid', valid)
-    orcidErr.value = valid ? undefined : 'Please enter a valid ORCID'
-  } else {
-    validationStates.value.set('orcid', true)
-    orcidErr.value = undefined
-  }
-  validation()
-}
-
-watch(userId, () => validateUserId())
-
-function validateUserId() {
-  if (userId.value.length > 0) {
-    const valid = ULID_REGEX.test(userId.value)
-    validationStates.value.set('userid', valid)
-    userIdErr.value = valid ? undefined : 'Please enter a valid ULID'
-  } else {
-    validationStates.value.set('userid', true)
-    userIdErr.value = undefined
-  }
-  validation()
-}
-
-function validation() {
-  for (const state of validationStates.value.values()) {
-    if (!state) {
-      validState.value = false
-      return
-    }
-  }
-  validState.value = true
-}
-
-function reset() {
-  firstName.value = ''
-  lastName.value = ''
-  email.value = ''
-  orcid.value = ''
-  userId.value = ''
-}
-
-function submit() {
-  emit('add-author', {
-    firstName: firstName.value,
-    lastName: lastName.value,
-    email: email.value,
-    orcid: orcid.value.length > 0 ? orcid.value : undefined,
-    id: userId.value.length > 0 ? userId.value : undefined
-  })
-  reset()
-}
-</script>
-
-<template>
-  <div :id="props.modalId"
-       class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none [--tab-accessibility-limited:false]">
-    <div
-        class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
-      <div
-          class="flex flex-col bg-gray-800 border shadow-sm rounded-md pointer-events-auto border-neutral-700 shadow-neutral-700/70">
-        <div class="flex justify-between items-center py-3 px-4 border-b border-neutral-700">
-          <h3 class="font-bold text-gray-200">
-            Add Author
-          </h3>
-          <button :data-hs-overlay="`#${props.modalId}`" @click="reset"
-                  class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-300 hover:bg-gray-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700"
-                  type="button">
-            <span class="sr-only">Close</span>
-            <IconX class="flex-shrink-0 size-4"/>
-          </button>
-        </div>
-
-        <div class="space-y-4 p-4 overflow-y-auto">
-          <!-- Author First Name -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="firstName"
-                     required
-                     autofocus
-                     id="first-name-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author first name" type="text">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="first-name-input">First Name</label>
-              <div :class="{ 'hidden': validationStates.get('firstname') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('firstname') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ firstNameErr }}
-            </p>
-          </div>
-          <!-- End Author First Name -->
-
-          <!-- Author Last Name -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="lastName"
-                     required
-                     id="last-name-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author last name"
-                     type="text">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="last-name-input">Last Name</label>
-              <div :class="{ 'hidden': validationStates.get('lastname') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('lastname') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ lastNameErr }}
-            </p></div>
-          <!-- End Author First Name -->
-
-          <!-- Author Email -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="email"
-                     id="author-email-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author email"
-                     type="email">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="author-email-input">Email</label>
-              <div :class="{ 'hidden': validationStates.get('email') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('email') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ emailErr }}
-            </p>
-          </div>
-          <!-- End Author Email -->
-
-          <!-- Author ORCID -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="orcid"
-                     id="author-orcid-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author ORCID"
-                     type="email">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="author-orcid-input">ORCID</label>
-              <div :class="{ 'hidden': validationStates.get('orcid') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('orcid') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ orcidErr }}
-            </p>
-          </div>
-          <!-- End Author ORCID -->
-
-          <!-- Author User ID -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="userId"
-                     id="author-userid-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author user id"
-                     type="email">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="author-userid-input">User ID</label>
-              <div :class="{ 'hidden': validationStates.get('userid') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('userid') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ userIdErr }}
-            </p>
-          </div>
-          <!-- End User ID -->
-        </div>
-
-        <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-gray-700">
-          <button type="button" @click="reset"
-                  class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-700 bg-slate-900 text-gray-200 shadow-sm hover:bg-gray-800 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Close
-          </button>
-          <button type="button" :disabled="!validState"
-                  @click="submit"
-                  class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent bg-aruna-800 text-white hover:bg-aruna-700 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Add Author
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/components/modal/key_value.vue b/components/modal/key_value.vue
deleted file mode 100644
index aa8225a..0000000
--- a/components/modal/key_value.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts" setup>
-import {IconX} from "@tabler/icons-vue";
-import {v2KeyValueVariant} from '~/composables/aruna_api_json';
-
-const props = defineProps<{
-  modalId: string,
-}>()
-
-const emit = defineEmits<{
-  'add-key-value': [key: string, value: string, kvType: v2KeyValueVariant]
-}>()
-
-enum KeyValueVariant {
-  Label = 'Label',
-  StaticLabel = 'Static Label',
-  Hook = 'Hook'
-}
-
-const kvKey = ref('')
-const kvValue = ref('')
-const kvType = ref(KeyValueVariant.Label)
-
-function convertKeyValueVariant(variant: KeyValueVariant): v2KeyValueVariant {
-  switch (variant) {
-    case KeyValueVariant.Label:
-      return v2KeyValueVariant.KEY_VALUE_VARIANT_LABEL
-    case KeyValueVariant.StaticLabel:
-      return v2KeyValueVariant.KEY_VALUE_VARIANT_STATIC_LABEL
-    case KeyValueVariant.Hook:
-      return v2KeyValueVariant.KEY_VALUE_VARIANT_HOOK
-  }
-}
-
-function displayKeyValueVariant(variant: KeyValueVariant) {
-  switch (variant) {
-    case KeyValueVariant.Label:
-      return "Label"
-    case KeyValueVariant.StaticLabel:
-      return "Static Label"
-    case KeyValueVariant.Hook:
-      return "Hook"
-  }
-}
-
-function reset() {
-  kvKey.value = ''
-  kvValue.value = ''
-  kvType.value = KeyValueVariant.Label
-}
-
-function submit() {
-  emit('add-key-value', kvKey.value, kvValue.value, convertKeyValueVariant(kvType.value))
-  reset()
-}
-</script>
-
-<template>
-  <div :id="props.modalId"
-       class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none [--tab-accessibility-limited:false]">
-    <div
-        class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all lg:max-w-4xl lg:w-full m-3 lg:mx-auto">
-      <div
-          class="flex flex-col bg-gray-800 border border-gray-700 shadow-sm rounded-md pointer-events-auto shadow-slate-700/[.7]">
-        <div class="flex justify-between items-center py-3 px-4 border-b border-gray-700">
-          <h3 class="font-bold text-gray-200">
-            Add Key-Value
-          </h3>
-          <button :data-hs-overlay="`#${props.modalId}`"
-                  @click="reset"
-                  class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-200 hover:bg-gray-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700"
-                  type="button">
-            <span class="sr-only">Close</span>
-            <IconX class="flex-shrink-0 size-4" />
-          </button>
-        </div>
-        <div class="flex flex-row space-x-4 p-4 overflow-y-auto">
-          <div class="flex flex-col grow">
-            <label for="key-input-label"
-                   class="block text-sm font-medium mb-2 text-gray-200">Key</label>
-            <input v-model="kvKey" type="text" id="key-input-label"
-                   class="py-3 px-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm focus:border-aruna-800 focus:ring-aruna-800"
-                   placeholder="Enter a key" autofocus>
-          </div>
-          <div class="flex flex-col grow">
-            <label for="value-input-label"
-                   class="block text-sm font-medium mb-2 text-gray-200">Value</label>
-            <input v-model="kvValue" type="text" id="value-input-label"
-                   class="py-3 px-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm focus:border-aruna-800 focus:ring-aruna-800"
-                   placeholder="Enter a value">
-          </div>
-
-          <div class="flex flex-col grow">
-            <label for="type-input-select"
-                   class="block text-sm font-medium mb-2 text-gray-200">Variant</label>
-            <select v-model="kvType" id="type-input-select"
-                    class="py-3 px-4 pe-9 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none">
-              <option v-for="kvv in KeyValueVariant" :value="kvv"
-                      v-bind:selected="kvv === KeyValueVariant.Label">
-                {{ displayKeyValueVariant(kvv) }}
-              </option>
-            </select>
-
-
-          </div>
-        </div>
-        <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-gray-700">
-          <button type="button"
-                  @click="reset"
-                  class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-700 bg-slate-900 text-white shadow-sm hover:bg-gray-800 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Close
-          </button>
-          <button type="button"
-                  @click="submit"
-                  class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent bg-aruna-800 text-white hover:bg-aruna-700 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Add KeyValue
-          </button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/components/ui/command/Command.vue b/components/ui/command/Command.vue
new file mode 100644
index 0000000..4a99189
--- /dev/null
+++ b/components/ui/command/Command.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
diff --git a/components/ui/command/CommandDialog.vue b/components/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..6620ad3
--- /dev/null
+++ b/components/ui/command/CommandDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { useForwardPropsEmits } from 'radix-vue'
+import Command from './Command.vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/components/ui/command/CommandEmpty.vue b/components/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..00a2385
--- /dev/null
+++ b/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxEmpty } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/components/ui/command/CommandGroup.vue b/components/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..e830a0f
--- /dev/null
+++ b/components/ui/command/CommandGroup.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/components/ui/command/CommandInput.vue b/components/ui/command/CommandInput.vue
new file mode 100644
index 0000000..18059f5
--- /dev/null
+++ b/components/ui/command/CommandInput.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/components/ui/command/CommandItem.vue b/components/ui/command/CommandItem.vue
new file mode 100644
index 0000000..c2d727e
--- /dev/null
+++ b/components/ui/command/CommandItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/components/ui/command/CommandList.vue b/components/ui/command/CommandList.vue
new file mode 100644
index 0000000..45b4e31
--- /dev/null
+++ b/components/ui/command/CommandList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  dismissable: false,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
diff --git a/components/ui/command/CommandSeparator.vue b/components/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..70b864c
--- /dev/null
+++ b/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxSeparator } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/components/ui/command/CommandShortcut.vue b/components/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..bcec760
--- /dev/null
+++ b/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/components/ui/command/index.ts b/components/ui/command/index.ts
new file mode 100644
index 0000000..0e35f4b
--- /dev/null
+++ b/components/ui/command/index.ts
@@ -0,0 +1,9 @@
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
diff --git a/components/ui/select/Select.vue b/components/ui/select/Select.vue
new file mode 100644
index 0000000..adc42fd
--- /dev/null
+++ b/components/ui/select/Select.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/components/ui/select/SelectContent.vue b/components/ui/select/SelectContent.vue
new file mode 100644
index 0000000..5e23f3e
--- /dev/null
+++ b/components/ui/select/SelectContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/components/ui/select/SelectGroup.vue b/components/ui/select/SelectGroup.vue
new file mode 100644
index 0000000..364f403
--- /dev/null
+++ b/components/ui/select/SelectGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/components/ui/select/SelectItem.vue b/components/ui/select/SelectItem.vue
new file mode 100644
index 0000000..544f1ab
--- /dev/null
+++ b/components/ui/select/SelectItem.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { CheckIcon } from '@radix-icons/vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <CheckIcon class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/components/ui/select/SelectItemText.vue b/components/ui/select/SelectItemText.vue
new file mode 100644
index 0000000..a0bb5c2
--- /dev/null
+++ b/components/ui/select/SelectItemText.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/components/ui/select/SelectLabel.vue b/components/ui/select/SelectLabel.vue
new file mode 100644
index 0000000..9ead9a6
--- /dev/null
+++ b/components/ui/select/SelectLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/components/ui/select/SelectScrollDownButton.vue b/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..a2ea19a
--- /dev/null
+++ b/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDownIcon />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/components/ui/select/SelectScrollUpButton.vue b/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..d9723d6
--- /dev/null
+++ b/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { ChevronUpIcon } from '@radix-icons/vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUpIcon />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/components/ui/select/SelectSeparator.vue b/components/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000..9dbc63a
--- /dev/null
+++ b/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/components/ui/select/SelectTrigger.vue b/components/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000..327ce5e
--- /dev/null
+++ b/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { CaretSortIcon } from '@radix-icons/vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <CaretSortIcon class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/components/ui/select/SelectValue.vue b/components/ui/select/SelectValue.vue
new file mode 100644
index 0000000..4bc37dd
--- /dev/null
+++ b/components/ui/select/SelectValue.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/components/ui/select/index.ts b/components/ui/select/index.ts
new file mode 100644
index 0000000..31b9294
--- /dev/null
+++ b/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
diff --git a/components/ui/textarea/Textarea.vue b/components/ui/textarea/Textarea.vue
new file mode 100644
index 0000000..b98b71f
--- /dev/null
+++ b/components/ui/textarea/Textarea.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>
diff --git a/components/ui/textarea/index.ts b/components/ui/textarea/index.ts
new file mode 100644
index 0000000..6a7ab2a
--- /dev/null
+++ b/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'
diff --git a/pages/objects/create.vue b/pages/objects/create.vue
index 063d212..18b975d 100644
--- a/pages/objects/create.vue
+++ b/pages/objects/create.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {IconArrowLeft, IconExclamationCircle, IconPlus, IconTrash} from '@tabler/icons-vue'
+import {IconExclamationCircle, IconPlus, IconTrash} from '@tabler/icons-vue'
 import {
   v2DataClass,
   v2InternalRelationVariant,
@@ -26,6 +26,9 @@ import {OBJECT_REGEX, PROJECT_REGEX, S3_KEY_REGEX, ULID_REGEX} from "~/composabl
 import type {ObjectInfo} from "~/composables/proto_conversions"
 import {deleteObject, getObjectBucketAndKey} from "~/composables/api_wrapper"
 import EventBus from "~/composables/EventBus";
+import AuthorDialog from "~/components/custom-ui/dialog/AuthorDialog.vue";
+import KeyValueDialog from "~/components/custom-ui/dialog/KeyValueDialog.vue";
+import OntologyDialog from "~/components/custom-ui/dialog/OntologyDialog.vue";
 
 import {HeadObjectCommand, S3Client, type S3ClientConfig} from "@aws-sdk/client-s3";
 import {Upload} from "@aws-sdk/lib-storage";
@@ -261,6 +264,7 @@ function dataFileChange(e) {
 
 /* ----- Resource Authors ----- */
 const authors: Ref<Map<string, v2Author>> = ref(new Map())
+const authorDialogOpen = ref(false);
 
 function addAuthor(author: v2Author) {
   authors.value.set(getUniqueId(), author)
@@ -271,8 +275,11 @@ function removeAuthor(key: string) {
 }
 
 /* ----- End Resource Authors ----- */
+
 /* ----- Resource key-values ----- */
 const keyValues = ref(new Map())
+const keyValueDialogOpen = ref(false);
+const ontologyDialogOpen = ref(false);
 
 function addKeyValue(key: string, val: string, type: v2KeyValueVariant) {
   keyValues.value.set(key, {key: key, value: val, variant: type} as v2KeyValue)
@@ -283,6 +290,7 @@ function removeKeyValue(key: string) {
 }
 
 /* ----- End Resource key-values ----- */
+
 /* ----- Resource relations ----- */
 const relations: Ref<Map<string, v2Relation>> = ref(new Map())
 
@@ -741,11 +749,12 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
         <div class="flex flex-row mb-2 justify-start items-center">
           <label for="key-values-input"
                  class="block text-lg font-medium text-aruna-text-accent">Authors</label>
-          <button type="button"
-                  class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent hover:text-aruna-highlight hover:border-aruna-highlight focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
-                  data-hs-overlay="#author-add">
-            <IconPlus class="flex-shrink-0 size-4"/>
-          </button>
+            <button
+              type="button"
+              @click="authorDialogOpen = true"
+              class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent hover:text-aruna-highlight hover:border-aruna-highlight focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
+              <IconPlus class="flex-shrink-0 size-4" />
+            </button>
         </div>
 
         <div class="-m-1.5 overflow-x-auto">
@@ -793,20 +802,18 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
           </div>
         </div>
 
-        <div class="flex flex-row mb-2 mt-6 justify-start items-center">
+        <div class="flex flex-row mb-2 mt-6 justify-start items-center gap-x-4">
           <label for="key-values-input"
                  class="block text-lg font-medium text-aruna-text-accent">Key-Values</label>
           <button type="button"
-                  class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent hover:text-aruna-highlight hover:border-aruna-highlight focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
-                  data-hs-overlay="#key-value-add">
+                  @click="keyValueDialogOpen = true"
+                  class="px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent text-sm hover:text-aruna-highlight hover:border-aruna-highlight focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
             <IconPlus class="flex-shrink-0 size-4"/>
           </button>
-
-          <button type="button"
-                  class="ms-4 px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent text-sm hover:text-aruna-highlight hover:border-aruna-highlight focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
-                  data-hs-overlay="#ontology-add">
-            Add Ontology
-          </button>
+          <OntologyDialog :initial-open="false"
+                          :with-button="true"
+                          button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-text-accent border-aruna-text-accent hover:border-aruna-highlight hover:bg-transparent hover:text-aruna-highlight"
+                          @add-key-value="addKeyValue"/>
         </div>
 
         <div class="-m-1.5 overflow-x-auto">
@@ -924,9 +931,23 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
     </div>
   </div>
   </div>
-  <ModalAuthor modalId="author-add" @add-author="addAuthor"/>
-  <ModalKeyValue modalId="key-value-add" @add-key-value="addKeyValue"/>
-  <ModalOntology modalId="ontology-add" @add-key-value="addKeyValue"/>
+
+  <AuthorDialog :initial-open="authorDialogOpen"
+                :with-button="false"
+                @update:open="authorDialogOpen = false"
+                @add-author="(author) => {
+                  addAuthor(author);
+                  authorDialogOpen = false;
+                }"/>
+
+  <KeyValueDialog :initial-open="keyValueDialogOpen"
+                  :with-button="false"
+                  @update:open="keyValueDialogOpen = false"
+                  @add-key-value="({ key, value, variant }) => {
+                    addKeyValue(key, value, variant);
+                    keyValueDialogOpen = false;
+                  }"/>
+
   <ModalRelation modalId="relation-add" @add-relation="addRelation"/>
   <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"
                       :errorMsg="creationError"/>