diff --git a/README.md b/README.md
index 776b072b..f5d2c7eb 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
 # ArunaWeb 5.0
 
-This is another total revised version for the Aruna website. Powered by [Vue 3](https://vuejs.org/), [Nuxt 3](https://nuxt.com/), [Tailwind CSS](https://tailwindcss.com/) and [Preline](https://preline.co/). 
+This is another total revised version for the Aruna website. Powered by [Vue 3](https://vuejs.org/), [Nuxt 3](https://nuxt.com/), [Tailwind CSS](https://tailwindcss.com/) and [shadcn-vue](https://www.shadcn-vue.com/). 
 
-This version is intended to be used with version **2.x.x** of Aruna, so to start a local test instance, you need a running Aruna instance and a running API Gateway to translate the RESTful http calls into native gRPC for the Aruna server.
+This version is intended to be used with version **3.x.x** of Aruna, so to start a local test instance, you need a running Aruna instance and a running API Gateway to translate the RESTful http calls into native gRPC for the Aruna server.
 
 1. How to start a local Aruna instance is described in the [Getting started instructions of the Aruna main repository](https://github.com/arunaengine/aruna?tab=readme-ov-file#getting-started) which guides you through the individual steps.
 
diff --git a/app.vue b/app.vue
index 1ea909e3..bd267ade 100644
--- a/app.vue
+++ b/app.vue
@@ -1,19 +1,13 @@
 <script setup lang="ts">
-import {IconPlant} from "@tabler/icons-vue";
-import type {v2User} from "./composables/aruna_api_json";
 import EventBus from "~/composables/EventBus";
-import type {ArunaError} from "~/composables/ArunaError";
 import {parseJwt} from "~/composables/utils";
+import {useUser} from '~/composables/User'
 
-import {h} from 'vue';
-import Toaster from '@/components/ui/toast/Toaster.vue'
+import Toaster from '~/components/ui/toast/Toaster.vue'
 import RegistrationDialog from "~/components/custom-ui/dialog/RegistrationDialog.vue";
-import {useToast} from '@/components/ui/toast/use-toast'
 import Banner from "~/components/custom-ui/Banner.vue";
 import {addSeconds} from "date-fns";
 
-const {toast} = useToast()
-
 useHead({
   title: "Aruna | The data orchestration engine",
   meta: [
@@ -36,7 +30,7 @@ const bannerVisible = computed(() => {
     const validTo = Date.parse(bannerConf.validTo) || Number.MAX_SAFE_INTEGER
 
     // Check if in specified time range
-    if ((currentTimestamp-validFrom)*(currentTimestamp-validTo) <= 0) {
+    if ((currentTimestamp - validFrom) * (currentTimestamp - validTo) <= 0) {
       // Check if cookie is already present
       if (bannerCookie.value) {
         const cookieDate = Date.parse(bannerCookie.value)
@@ -61,87 +55,16 @@ function hideBanner() {
 }
 
 // Provide user object globally read-only
-const notRegistered = ref(false)
-const user: Ref<v2User | undefined> = ref(undefined)
+const {user, unregistered, refreshUser} = await useUser(useRuntimeConfig().public.maintenanceMode)
 provide('userRef', readonly(user))
 
-// Try to fetch user
-async function updateUser() {
-  // Only fetch user if not in maintenance mode
-  if (useRuntimeConfig().public.maintenanceMode)
-    return
-
-  await $fetch<v2User | ArunaError>('/api/user')
-      .then(response => {
-        if (typeof response === 'undefined') {
-          user.value = undefined
-          toast({
-            title: 'Error',
-            //description: 'Something went wrong. If this problem persists please contact an administrator.',
-            description: 'User fetch response is undefined. This should not be possible :/',
-            variant: 'destructive',
-            duration: 10000,
-          })
-        } else if (response.type === 'ArunaError') {
-          user.value = undefined
-          if ((response as ArunaError).message === 'Not registered') {
-            notRegistered.value = true
-          } else if ((response as ArunaError).code === 13) {
-            // gRPC code 13 = Internal
-            notRegistered.value = false
-            console.error(`${(response as ArunaError).code} - ${(response as ArunaError).message}`)
-          } else if ((response as ArunaError).code === 14) {
-            // gRPC code 14 = Unavailable
-            notRegistered.value = false
-            toast({
-              title: 'Error',
-              description: 'Aruna server is currently unavailable.',
-              variant: 'destructive',
-              duration: 10000,
-            })
-          } else if ((response as ArunaError).code === 16) {
-            // gRPC code 16 = Unauthorized
-            notRegistered.value = false
-          } else {
-            // Nuxt server-side error
-            notRegistered.value = false
-            console.error((response as ArunaError).message)
-          }
-        } else {
-          notRegistered.value = false
-          user.value = response as v2User
-
-          if (!user.value.active)
-            toast({
-              description: h('div',
-                  {class: 'flex space-x-2 items-center justify-center'},
-                  [
-                    h(IconPlant, {class: 'flex-shrink-0 size-5 text-green-400'}),
-                    h('span',
-                        {class: 'text-fuchsia-50'},
-                        ['Please wait until your account gets activated by an administrator.'])
-                  ]),
-              duration: 10000
-            })
-        }
-      }).catch(() => {
-        user.value = undefined
-        notRegistered.value = false
-        toast({
-          title: 'Error',
-          description: 'Something unexpected went wrong. If this problem persists please contact an administrator.',
-          variant: 'destructive',
-          duration: 10000,
-        })
-      })
-}
-
 // Re-fetch user on demand
-EventBus.on('updateUser', () => {
+EventBus.on('updateUser', async () => {
   console.log("Received user refresh event")
-  updateUser()
+  await refreshUser() //updateUser()
 })
 
+// Auto-refresh access/refresh token before expiry
 async function refreshTokens() {
   const refresh_token = useCookie<string>('refresh_token')
   const access_token = useCookie<string>('access_token')
@@ -165,16 +88,17 @@ async function refreshTokens() {
 }
 
 onBeforeMount(() => setInterval(refreshTokens, 30000))
-onBeforeMount(() => updateUser())
 </script>
 
 <template>
-  <RegistrationDialog @closeRegisterDialog="notRegistered=false" :withButton="false" :initialOpen="notRegistered"/>
+  <RegistrationDialog @closeRegisterDialog="refreshUser()" :withButton="false" :initialOpen="unregistered"/>
 
-  <!-- Header + Navigation -->
   <!-- Main body -->
   <div v-if="useRuntimeConfig().public.maintenanceMode"
-       class="h-[100vh] w-[100vw] bg-[url('/public/imgs/maintenance_sm.webp')] md:bg-[url('/public/imgs/maintenance_md.webp')] lg:bg-[url('/public/imgs/maintenance_lg.webp')] bg-no-repeat bg-center bg-cover to-transparent">
+       class="h-[100vh] w-[100vw] bg-no-repeat bg-center bg-cover to-transparent
+              bg-[url('/imgs/maintenance_sm.webp')]
+              md:bg-[url('/imgs/maintenance_md.webp')]
+              lg:bg-[url('/imgs/maintenance_lg.webp')]">
   </div>
 
   <div v-else
@@ -189,6 +113,7 @@ onBeforeMount(() => updateUser())
     <NuxtLoadingIndicator/>
     <NuxtPage/>
   </div>
+  <!-- End Main body -->
 
   <Toaster/>
 </template>
diff --git a/components/card/resource.vue b/components/card/resource.vue
index dc8ea0a1..15ca185b 100644
--- a/components/card/resource.vue
+++ b/components/card/resource.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import {modelsv2Status, v2DataClass, type v2GenericResource, v2ResourceVariant,} from '~/composables/aruna_api_json';
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,} from "@/components/ui/tooltip"
+
+import {ResourceVariant, VisibilityClass} from "~/types/aruna-v3-enums";
+
 
 /* ----- PROPERTIES ----- */
 interface ResourceCardProps {
-  resource: v2GenericResource
+  resource: Resource
 }
 
 const {resource} = defineProps<ResourceCardProps>()
-const entry = toSearchResult(resource)
 
 /* ----- END PROPERTIES ----- */
 
@@ -17,72 +19,88 @@ function displayDescription(description: string): string {
   }
   return description
 }
-function displayDataClass(dataClass: v2DataClass): string {
-  switch (dataClass) {
-    case v2DataClass.DATA_CLASS_PUBLIC: return 'Public'
-    case v2DataClass.DATA_CLASS_PRIVATE: return 'Private'
-    default: return 'Unspecified'
+
+function displayVisbility(visibility: VisibilityClass): string {
+  switch (visibility) {
+    case VisibilityClass.Public:
+      return 'Public';
+    case VisibilityClass.PublicMetadata:
+      return 'Public Metadata';
+    case VisibilityClass.Private:
+      return 'Private';
+    default:
+      return 'Unspecified'
   }
 }
-function dataClassCss(dataClass: v2DataClass): string {
-  switch (dataClass) {
-    case v2DataClass.DATA_CLASS_PUBLIC: return 'border-green-600 text-green-600'
-    case v2DataClass.DATA_CLASS_PRIVATE: return 'border-red-600/80 text-red-600/80'
-    case v2DataClass.DATA_CLASS_CONFIDENTIAL: return 'border-white text-white'
-    case v2DataClass.DATA_CLASS_WORKSPACE: return 'border-indigo-600 text-indigo-600'
-    default: return 'border-aruna-text/50 text-aruna-text/50'
+
+function visibilityCss(visibility: VisibilityClass): string {
+  switch (visibility) {
+    case VisibilityClass.Public:
+      return 'border-green-600 text-green-600';
+    case VisibilityClass.PublicMetadata:
+      return 'border-white text-white';
+    case VisibilityClass.Private:
+      return 'border-red-600/80 text-red-600/80';
+    default:
+      return 'border-aruna-text/50 text-aruna-text/50'
   }
 }
 </script>
 
 <template>
-  <div v-if="entry"
-       class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
-       :class="{'border-l-destructive': entry.object_status === modelsv2Status.STATUS_DELETED}">
+  <div
+      class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
+      :class="{'border-l-destructive': resource.deleted}">
     <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">
-      <!-- Name and ID display with links -->
-      <NuxtLink :to="`/objects/${entry.id}`"
-                class="text-aruna-highlight font-bold">
-        <h3>{{ entry.name }}</h3>
-      </NuxtLink>
+      <!-- Name and ID display -->
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <NuxtLink :to="`/objects/${resource.id}`"
+                      class="text-aruna-highlight font-bold">
+              <h3>{{ resource.name }}</h3>
+            </NuxtLink>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ resource.id }}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
 
-      <NuxtLink :to="`/objects/${entry.id}`"
-                class="text-sm text-aruna-text-accent font-bold">
-        <h4>{{ entry.id }}</h4>
-      </NuxtLink>
-      <!-- END Name and ID display with links -->
+      <h4>{{ resource.type === "Resource" ? resource.variant : resource.type }}</h4>
+      <!-- END Name and ID display -->
 
       <!-- Badges -->
       <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
         <!-- DataClass Badge -->
-        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', dataClassCss(entry.data_class))">
-          {{ displayDataClass(entry.data_class) }}
+        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', visibilityCss(resource.data_class))">
+          {{ displayVisbility(resource.visibility) }}
         </Badge>
         <!-- END DataClass -->
         <!-- Stats Badge -->
-        <Badge v-if="entry.variant !== v2ResourceVariant.RESOURCE_VARIANT_OBJECT"
+        <Badge v-if="resource.variant !== ResourceVariant.Object"
                class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-          Children: {{ entry.stats.count }}
+          Children: {{ resource.count }}
         </Badge>
-        <Badge class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-          {{ entry.stats.size ? formatBytes(+entry.stats.size) : "N/A Bytes" }}
+        <Badge v-if="resource.variant === ResourceVariant.Object"
+               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+          {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
         </Badge>
         <!-- END Stats Badge -->
       </div>
       <!-- END Badges -->
     </div>
-
     <div class="mx-2 grow flex-col basis-2/3">
       <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
-      <p v-if="entry.description.length > 0" class="mt-2 text-aruna-text">
-        {{ displayDescription(entry.description) }}
+      <p v-if="resource.description.length > 0" class="mt-2 text-aruna-text">
+        {{ displayDescription(resource.description) }}
       </p>
 
-      <hr v-if="entry.key_values.length > 0" class="my-4 text-aruna-text "/>
+      <hr v-if="resource.labels.length > 0" class="my-4 text-aruna-text "/>
 
       <!-- Basic Label Display -->
       <div class="flex flex-row flex-wrap">
-        <div v-for="label in entry.key_values" class="flex flex-row my-1 me-2 last:me-0">
+        <div v-for="label in resource.labels" class="flex flex-row my-1 me-2 last:me-0">
           <span
               :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
               class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
@@ -93,6 +111,7 @@ function dataClassCss(dataClass: v2DataClass): string {
             {{ label.value }}</span>
         </div>
       </div>
+
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/components/custom-ui/EditableLabel.vue b/components/custom-ui/EditableLabel.vue
new file mode 100644
index 00000000..9cd7dade
--- /dev/null
+++ b/components/custom-ui/EditableLabel.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import {IconCancel, IconCheck, IconDeviceFloppy, IconLoader3} from '@tabler/icons-vue'
+import {Input} from "~/components/ui/input";
+import {useToast} from '~/components/ui/toast/use-toast'
+
+const {toast} = useToast()
+
+// ----- v-model ---------- //
+const editMode = defineModel<boolean>('edit-mode')
+watch(editMode, (value, oldValue, onCleanup) => {
+  if (!value && oldValue) {
+    waiting.value = false
+    editedText.value = text.value
+  }
+  onCleanup(() => {
+    waiting.value = false
+    editedText.value = text.value
+  })
+})
+
+// ----- Properties ---------- //
+interface EditableLabelProps {
+  resourceId: string,
+  text: string,
+  multiline: boolean,
+  textCss?: string,
+}
+
+const props = defineProps<EditableLabelProps>()
+const resourceId = toRef(() => props.resourceId)
+const text = toRef(() => props.text)
+const editedText = ref<string>(text.value || '')
+const waiting = ref(false)
+// ----- End Properties ---------- //
+
+const emit = defineEmits<{
+  (e: 'updated-value', resourceId: string, value: string): void
+}>();
+
+async function emitSave() {
+  waiting.value = true
+  emit('updated-value', resourceId.value, editedText.value)
+}
+
+async function save() {
+  const request = {
+    id: props.resourceId,
+    description: text.value
+  } as UpdateResourceDescriptionRequest
+  waiting.value = true
+
+  await $fetch<UpdateResourceDescriptionResponse>('/api/v3/resources/description', {
+    method: 'POST',
+    body: request
+  }).then(response => {
+    console.info('[EditableLabel] Description update successful')
+    toast({
+      description: h('div',
+          {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
+          [
+            h(IconCheck, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
+            h('span',
+                {class: 'text-fuchsia-50'},
+                ['Update successful.'])
+          ]),
+      duration: 5000
+    })
+
+    waiting.value = false
+    editMode.value = false
+
+  }).catch(error => {
+    console.error('[EditableLabel] Update error', error.data)
+    waiting.value = false
+  })
+
+}
+</script>
+<template>
+  <div v-if="editMode"
+       class="flex flex-col w-full items-center gap-1.5">
+    <div class="w-full items-center">
+      <!-- Textarea for multiline strings -->
+      <div v-if="multiline"
+           class="flex">
+        <Textarea v-model="editedText"
+                  :rows="5"
+                  placeholder="Enter a description for your resource"
+                  class="py-3 ps-4 pe-6 w-full border-aruna-text/50 rounded-s-md rounded-e-none bg-aruna-muted text-aruna-text-accent text-sm
+                                   focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                   focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                   disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+        <div class="flex flex-col h-fit">
+          <Button variant="outline"
+                  @click="emitSave()"
+                  :disabled="waiting"
+                  class="rounded-none rounded-tr-sm border-aruna-text/50 px-2 h-auto bg-transparent text-aruna-highlight hover:bg-aruna-highlight/25 hover:text-aruna-highlight">
+            <IconLoader3 v-if="waiting" class="text-aruna-highlight animate-spin"/>
+            <IconDeviceFloppy v-else/>
+          </Button>
+          <Button variant="outline"
+                  @click="editMode = false"
+                  class="rounded-none rounded-br-sm border-aruna-text/50 px-2 h-auto bg-transparent text-destructive hover:bg-destructive/25 hover:text-destructive">
+            <IconCancel/>
+          </Button>
+        </div>
+      </div>
+      <!-- End Textarea for multiline strings -->
+      <!-- Input for single line strings -->
+      <div v-else class="flex">
+        <Input type="text"
+               v-model="editedText"
+               placeholder="Enter a description for your resource"
+               class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-l-md rounded-e-none bg-aruna-muted text-aruna-text-accent text-sm
+                    focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                    focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                    disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+        <Button variant="outline"
+                @click="emitSave()"
+                :disabled="waiting"
+                class="rounded-none border-aruna-text/50 px-2 h-auto bg-transparent text-aruna-highlight hover:bg-aruna-highlight/25 hover:text-aruna-highlight">
+          <IconLoader3 v-if="waiting" class="text-aruna-highlight animate-spin"/>
+          <IconDeviceFloppy v-else/>
+        </Button>
+        <Button variant="outline"
+                @click="editMode = false"
+                class="rounded-s-none border-aruna-text/50 px-2 h-auto bg-transparent text-destructive hover:bg-destructive/25 hover:text-destructive">
+          <IconCancel/>
+        </Button>
+      </div>
+      <!-- End Input for single line strings -->
+    </div>
+  </div>
+  <!-- Text Display -->
+  <span v-else :class="cn('text-aruna-text', props.textCss)">{{ text }}</span>
+  <!-- End Text Display -->
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/ResourceCreation.vue b/components/custom-ui/ResourceCreation.vue
new file mode 100644
index 00000000..fd727c64
--- /dev/null
+++ b/components/custom-ui/ResourceCreation.vue
@@ -0,0 +1,804 @@
+<script setup lang="ts">
+import {IconLock, IconLockOpen2, IconPlus, IconTrash} from '@tabler/icons-vue'
+import {
+  TagsInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText
+} from '~/components/ui/tags-input'
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "~/components/ui/form";
+import {Input} from "~/components/ui/input";
+import {Button} from "~/components/ui/button";
+import {useToast} from '~/components/ui/toast/use-toast'
+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 {ULID_REGEX} from "~/utils/constants"
+import EventBus from "~/composables/EventBus";
+
+import type {Author, KeyValue, GroupInfo} from "~/composables/api_wrapper";
+import type {CreateProjectResponse, CreateResourceResponse} from "~/composables/api_wrapper";
+import {ResourceVariant, VisibilityClass} from "~/types/aruna-v3-enums";
+
+import {prettyDisplayJson} from "~/composables/utils";
+import {toTypedSchema} from "@vee-validate/zod";
+import * as z from "zod";
+import {useForm} from "vee-validate";
+
+
+// ----- Properties ---------- //
+interface ResourceCreationProps {
+  realms: Realm[],
+  groups: GroupInfo[],
+  licenses: License[],
+  realmContext: RealmContext,
+}
+
+const props = defineProps<ResourceCreationProps>()
+const realms = toRef(() => props.realms)
+const groups = toRef(() => props.groups)
+const licenses = toRef(() => props.licenses)
+const context = toRef(() => props.realmContext)
+watch(groups, () => console.log('[ResourceCreation] Updated context:', context.value))
+watch(groups, () => console.log('[ResourceCreation] Updated groups:', groups.value))
+// ----- End Properties ---------- //
+
+// ----- Query Parameter Evaluation ---------- //
+const route = useRoute() // Use route to evaluate query parameter
+
+function getParamSingle(param_name: string) {
+  const value = route.query[param_name];
+  if (Array.isArray(value)) {
+    return value[0];
+  } else if (typeof value === 'string') {
+    return value;
+  }
+}
+
+function setQueryParams() {
+  if (route.query) {
+    const resourceTypeParam = getParamSingle("type");
+    if (resourceTypeParam) {
+      //resourceType.value = fromResourceTypeStr(resourceTypeParam, v2ResourceVariant.RESOURCE_VARIANT_PROJECT);
+    }
+    const dataClassParam = getParamSingle("class");
+    if (dataClassParam) {
+      //resourceDataclass.value = fromDataClassStr(dataClassParam);
+    }
+    const parentIdParam = getParamSingle("parentId");
+    if (parentIdParam) {
+      //resourceParentId.value = parentIdParam;
+    }
+  }
+}
+
+onMounted(() => setQueryParams());
+// ----- End Query Parameter Evaluation ---------- //
+
+// ----- Form Schema ---------- //
+const formSchema = toTypedSchema(z.object({
+  name: z.string(),
+  title: z.string(),
+  description: z.string().max(1024, 'Description length is limited to 1024 characters.'),
+  //identifiers: z.array(z.string()).optional(),
+  visibility: z.nativeEnum(VisibilityClass),
+  variant: z.nativeEnum(ResourceVariant),
+  realm_id: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
+  group_id: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
+  parent_id: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
+  license_id: z.string(),
+  authors: z.array(z.custom<Author>()).optional(),
+  labels: z.array(z.custom<KeyValue>()).optional(),
+  file: z.custom<File>().optional()
+}).superRefine((values, ctx) => {
+  if (values.variant !== ResourceVariant.Project && !values.parent_id) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Parent id is required',
+      path: ['parent_id'],
+    })
+  }
+  if (values.variant === ResourceVariant.Project && !values.realm_id) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Realm id is required',
+      path: ['realm_id'],
+    })
+  }
+  if (values.variant === ResourceVariant.Project && !values.group_id) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Group id is required',
+      path: ['group_id'],
+    })
+  }
+
+  if (values.variant === ResourceVariant.Object && !values.file) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'File is required for an Object',
+      path: ['file'],
+    })
+  }
+  //console.dir('[Form Super Refine] Context:', ctx)
+  return ctx
+}))
+
+const {handleSubmit, values, setFieldValue} = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    //identifiers: [],
+    visibility: VisibilityClass.Public,
+    variant: ResourceVariant.Project,
+    license_id: licenses.value[0].id,
+    authors: [],
+    labels: []
+  },
+  keepValuesOnUnmount: true,
+})
+
+const {toast} = useToast()
+const onSubmit = handleSubmit(async (values) => {
+  const request = {
+    name: values.name,
+    title: values.title,
+    description: values.description,
+    variant: values.variant === ResourceVariant.Project ? undefined : values.variant,
+    realm_id: values.variant === ResourceVariant.Project ? values.realm_id : undefined,
+    group_id: values.variant === ResourceVariant.Project ? values.group_id : undefined,
+    parent_id: values.variant !== ResourceVariant.Project ? values.parent_id : undefined,
+    visibility: values.visibility,
+    license_id: values.license_id,
+    identifiers: identifiers.value, //values.identifiers,
+    authors: Array.from(authors.value.values()),
+    labels: Array.from(keyValues.value.values()),
+  } as CreateResourceRequest
+
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(request, null, 2))),
+  })
+
+  // Create resource in Aruna
+  const api_endpoint = values.variant === ResourceVariant.Project ? '/api/v3/project' : '/api/v3/resource'
+  const response = await $fetch<CreateProjectResponse | CreateResourceResponse>(api_endpoint, {
+    method: 'POST',
+    body: request
+  }).then(response => {
+    console.log('[Resource Creation] Response:', response)
+    if (values.variant === ResourceVariant.Project)
+      EventBus.emit('updateProjects')
+
+    return response
+  }).catch(error => {
+    console.log('[Resource Creation] Error:', error.data.data)
+    toast({
+      title: 'Error',
+      description: `Resource creation failed: ${error.data.data}`
+    })
+
+    return {resource: undefined}
+  })
+
+  // Upload data if Object
+  if (response.resource && values.variant === ResourceVariant.Object) {
+    toast({
+      title: 'Info',
+      description: 'This is the moment where your data would be upload.'
+    })
+  }
+})
+
+// ----- External Resource Identifiers ---------- //
+const identifiers = ref<string[]>([])
+
+// ----- Resource Authors ---------- //
+const authors: Ref<Map<string, Author>> = ref(new Map())
+
+function addAuthor(author: Author) {
+  authors.value.set(getUniqueId(), author)
+}
+
+function removeAuthor(key: string) {
+  authors.value.delete(key)
+}
+
+// ----- Resource key-values ---------- //
+const keyValues: Ref<Map<string, KeyValue>> = ref(new Map())
+
+function addKeyValue(keyValue: KeyValue) {
+  keyValues.value.set(keyValue.key, keyValue)
+}
+
+function removeKeyValue(key: string) {
+  keyValues.value.delete(key)
+}
+
+// ----- Created resource info | Upload ---------- //
+const createdResource: Ref<Resource | undefined> = ref(undefined)
+const creationError: Ref<string | undefined> = ref(undefined)
+const uploadProgress = ref(0)
+
+function updateProgress(current: number, total: number | undefined) {
+  if (!total)
+    return 0
+  const floatProgress = current / total * 100
+  uploadProgress.value = +floatProgress.toFixed(2)
+}
+
+// ----- Helper functions ---------- //
+let id = 0
+
+function getUniqueId(): string {
+  return id++ + '';
+}
+
+/*
+async function submit() {
+  // Better safe than sorry.
+  createdResource.value = undefined
+  creationError.value = undefined
+
+  // Create resource in server
+  switch (resourceType.value) {
+    case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
+      await createProject({
+        name: resourceName.value,
+        title: resourceTitle.value,
+        description: resourceDescription.value,
+        keyValues: Array.from(keyValues.value.values()),
+        relations: Array.from(relations.value.values()),
+        dataClass: resourceDataclass.value,
+        preferredEndpoint: '',
+        metadataLicenseTag: metaLicense.value,
+        defaultDataLicenseTag: dataLicense.value,
+        authors: Array.from(authors.value.values())
+      }).then(project => {
+        console.log(project)
+        createdResource.value = project
+        creationError.value = undefined
+      }).catch(error => {
+        console.error(error)
+        creationError.value = error.toString()
+        createdResource.value = undefined
+      })
+      // Display created resource or error
+      openModal('object-display')
+      break
+    }
+    case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION: {
+      await createCollection({
+        name: resourceName.value,
+        title: resourceTitle.value,
+        description: resourceDescription.value,
+        keyValues: Array.from(keyValues.value.values()),
+        relations: Array.from(relations.value.values()),
+        dataClass: resourceDataclass.value,
+        projectId: resourceParentId.value,
+        metadataLicenseTag: metaLicense.value,
+        defaultDataLicenseTag: dataLicense.value,
+        authors: Array.from(authors.value.values())
+      }).then(collection => {
+        console.log(collection)
+        createdResource.value = collection
+        creationError.value = undefined
+      }).catch(error => {
+        console.log(error)
+        creationError.value = error.toString()
+        createdResource.value = undefined
+      })
+      // Display created resource or error
+      openModal('object-display')
+      break
+    }
+    case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
+      await createDataset({
+        name: resourceName.value,
+        title: resourceTitle.value,
+        description: resourceDescription.value,
+        keyValues: Array.from(keyValues.value.values()),
+        relations: Array.from(relations.value.values()),
+        dataClass: resourceDataclass.value,
+        projectId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_PROJECT ? resourceParentId.value : undefined,
+        collectionId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_COLLECTION ? resourceParentId.value : undefined,
+        metadataLicenseTag: metaLicense.value,
+        defaultDataLicenseTag: dataLicense.value,
+        authors: Array.from(authors.value.values())
+      }).then(dataset => {
+        console.log(dataset)
+        createdResource.value = dataset
+        creationError.value = undefined
+      }).catch(error => {
+        console.log(error)
+        creationError.value = error.toString()
+        createdResource.value = undefined
+      })
+      // Display created resource or error
+      openModal('object-display')
+      break
+    }
+    case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
+      if (dataUpload.value !== null) {
+        // Display created resource or error
+        openModal('object-display')
+
+        // Promise chain time
+        await createObject({
+          name: resourceName.value,
+          title: resourceTitle.value,
+          description: resourceDescription.value,
+          keyValues: Array.from(keyValues.value.values()),
+          relations: Array.from(relations.value.values()),
+          dataClass: resourceDataclass.value,
+          projectId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_PROJECT ? resourceParentId.value : undefined,
+          collectionId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_COLLECTION ? resourceParentId.value : undefined,
+          datasetId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_DATASET ? resourceParentId.value : undefined,
+          metadataLicenseTag: metaLicense.value,
+          dataLicenseTag: dataLicense.value,
+          authors: Array.from(authors.value.values())
+        }).then(async stagingObject => {
+          // Set created resource and reset error
+          createdResource.value = stagingObject
+          creationError.value = undefined
+
+          // Take any full sync dataproxy of the object and fetch credentials
+          const endpoint: v2DataEndpoint | undefined = createdResource.value.endpoints?.find(ep => !ep.partialSync)
+          return [stagingObject, await getUserS3Credentials(endpoint?.id)]
+        }).then(async ([stagingObject, response]) => {
+          // Fetch any fullsync bucket and key for upload
+          let [bucket, key] = await getObjectBucketAndKey((stagingObject as v2Object).id)
+
+          // Create S3 client for staging object
+          const s3client = new S3Client({
+            endpoint: (response as v2GetS3CredentialsUserTokenResponse).s3EndpointUrl,
+            region: 'region-one',
+            credentials: {
+              accessKeyId: (response as v2GetS3CredentialsUserTokenResponse).s3AccessKey,
+              secretAccessKey: (response as v2GetS3CredentialsUserTokenResponse).s3SecretKey
+            }
+          } as S3ClientConfig)
+
+          return [s3client, bucket, key]
+        }).then(async ([s3client, bucket, key]) => {
+          return [s3client, bucket, key, await waitForSync((s3client as S3Client), (bucket as string), (key as string))]
+        }).then(async ([s3client, bucket, key, synced]) => {
+          // Check if sync was successful
+          if (!synced)
+            throw Error('Object sync to DataProxy timed out')
+
+          const upload = new Upload({
+            client: s3client as S3Client,
+            queueSize: 4, // 4 uploads concurrently
+            partSize: dataUpload.value.size > 5 * 1024 * 1024 * 1024 ? 50 * 1024 * 1024 : 5 * 1024 * 1024, // 5MiB parts up to 5GiB; then 50MiB parts
+            leavePartsOnError: false, // Remove uploaded parts on error
+            params: {
+              Bucket: bucket as string,
+              Key: key as string,
+              Body: dataUpload.value
+            },
+          })
+
+          // Update progress bar value
+          upload.on("httpUploadProgress", progress =>
+              updateProgress(progress.loaded ? progress.loaded : 0, progress.total))
+
+          // Do something after upload succeeded
+          return await upload.done() //.then(() => console.log('Upload succeeded'))
+        }).then(response => {
+          console.log(`Upload completed with status code: ${response.$metadata.httpStatusCode}`)
+        }).catch(error => {
+          // Delete Object if already created
+          if (createdResource.value?.id)
+            deleteObject(createdResource.value.id, false).catch(error => console.log(error))
+
+          // Set error; unset created resource
+          console.log(error)
+          creationError.value = error.toString()
+          createdResource.value = undefined
+        })
+      } else {
+        // Display error toast that no file was selected for upload.
+      }
+    }
+
+      // Emit user update event
+      EventBus.emit('updateUser')
+  }
+}
+*/
+</script>
+
+<template>
+  <!-- Resource Creation Form -->
+  <div class="m-4 flex flex-col grow h-full max-w-screen-2xl border border-dashed border-aruna-text/50 rounded-md p-6 gap-y-4">
+    <h1 class="text-3xl font-bold text-aruna-text-accent">
+      Resource creation
+    </h1>
+    <Separator class="bg-aruna-text/50"/>
+
+    <div class="flex flex-col basis-1/2 h-full p-4 pt-0">
+      <form id="dialogForm"
+            @submit="onSubmit"
+            class="flex flex-col space-y-4 grow">
+        <!-- Type / Visibility row -->
+        <div class="flex flex-col lg:flex-row w-full gap-4">
+          <!-- Type Input -->
+          <FormField v-slot="{ componentField }" type="radio" name="variant">
+            <FormItem class="basis-1/2 space-y-3">
+              <FormLabel>Resource Type</FormLabel>
+              <FormControl>
+                <RadioGroup class="flex gap-x-0"
+                            v-bind="componentField"
+                            orientation="horizontal">
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="ResourceVariant.Project"/>
+                    </FormControl>
+                    <FormLabel class="font-bold">Project</FormLabel>
+                  </FormItem>
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="ResourceVariant.Folder"/>
+                    </FormControl>
+                    <FormLabel class="font-bold">Folder</FormLabel>
+                  </FormItem>
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="ResourceVariant.Object"/>
+                    </FormControl>
+                    <FormLabel class="font-bold">Object</FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Type Input -->
+          <!-- Visibility Input -->
+          <FormField v-slot="{ componentField }" type="radio" name="visibility">
+            <FormItem class="basis-1/2 space-y-3">
+              <FormLabel>Resource Visibility</FormLabel>
+              <FormControl>
+                <RadioGroup class="flex gap-x-0"
+                            v-bind="componentField"
+                            orientation="horizontal">
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="VisibilityClass.Public"/>
+                    </FormControl>
+                    <FormLabel class="font-normal">
+                      Public
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="VisibilityClass.PublicMetadata"/>
+                    </FormControl>
+                    <FormLabel class="font-normal">
+                      Only Metadata Public
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="VisibilityClass.Private"/>
+                    </FormControl>
+                    <FormLabel class="font-normal">
+                      Private
+                    </FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Visibility Input -->
+        </div>
+        <!-- End Type / Visibility row -->
+
+        <!-- Name/Title row -->
+        <div class="flex flex-col lg:flex-row w-full gap-4">
+          <!-- Name Input -->
+          <FormField v-slot="{componentField}" name="name">
+            <FormItem class="basis-1/2">
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input type="text"
+                       placeholder="Name of the new resource"
+                       v-bind="componentField"
+                       class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                              focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                              focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                              disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Name Input -->
+
+          <!-- Title Input -->
+          <FormField v-slot="{componentField}" name="title">
+            <FormItem class="basis-1/2">
+              <FormLabel>Title</FormLabel>
+              <FormControl>
+                <Input type="text"
+                       placeholder="Title of the new resource"
+                       v-bind="componentField"
+                       class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Title Input -->
+        </div>
+        <!-- End Name/Title row -->
+
+        <!-- Identifiers Input -->
+        <TagsInput v-model="identifiers" class="p-0" :class="{'gap-0': identifiers.length === 0}">
+          <div class="flex">
+          <TagsInputItem v-for="item in identifiers" :key="item" :value="item"
+                         class="py-3 px-2 rounded-sm border border-aruna-highlight bg-aruna-bg items-center text-aruna-highlight">
+            <TagsInputItemText/>
+            <TagsInputItemDelete/>
+          </TagsInputItem>
+          </div>
+          <TagsInputInput placeholder="Other external identifiers e.g. DOI or ENA accession"
+                          class="py-1.5 px-2 w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                 focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                 focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                 disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+        </TagsInput>
+        <!-- End Identifiers Input -->
+
+        <!-- Description Input -->
+        <FormField v-slot="{componentField}" name="description">
+          <FormItem>
+            <FormLabel class="flex justify-between">
+              Description
+              <span class="text-xs text-aruna-text"
+                    :class="{'text-destructive': values.description ? values.description?.length > 1024 : false}">
+                      Characters left: {{ values.description ? 1024 - values.description.length : 1024 }}
+                  </span>
+            </FormLabel>
+            <FormControl class="flex">
+                  <Textarea v-bind="componentField"
+                            :rows="5"
+                            placeholder="Here you can enter a description of your resource"
+                            class="py-3 px-4 w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                   focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                   focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                   disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+              <div class="flex w-full pe-4 justify-end text-aruna-text">
+              </div>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+        <!-- End Description Input -->
+
+        <div class="flex flex-col xl:flex-row gap-4">
+          <!-- Parent Id Input -->
+          <FormField v-slot="{componentField}"
+                     name="parent_id">
+            <FormItem v-if="values.variant !== ResourceVariant.Project" class="w-full lg:basis-1/2">
+              <FormLabel>Parent Id</FormLabel>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="px-4 py-2 inline-flex items-center min-w-fit rounded-s-sm border border-aruna-highlight bg-transparent text-sm text-aruna-highlight">
+                      Unspecified
+                    </span>
+                  <Input type="text"
+                         placeholder="Id of the new resource's direct parent."
+                         v-bind="componentField"
+                         class="py-2 px-3 h-auto w-full border-s-0 border-aruna-text/50 rounded-s-none rounded-e-sm bg-aruna-muted text-aruna-text-accent text-sm
+                                placeholder:text-aruna-text
+                                focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                disabled:opacity-50 disabled:pointer-events-none"/>
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Parent Id Input -->
+
+          <!-- Realm Input -->
+          <FormField v-slot="{componentField}" name="realm_id">
+            <FormItem v-if="values.variant === ResourceVariant.Project"
+                      class="flex flex-col grow space-y-4">
+              <FormLabel>Realm Selection</FormLabel>
+              <Select v-bind="componentField">
+                <FormControl>
+                  <SelectTrigger class="bg-aruna-muted border-aruna-text/50">
+                    <SelectValue placeholder="Select a realm for your project"/>
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent class="bg-aruna-bg/90">
+                  <SelectGroup>
+                    <SelectItem v-for="realm in realms" :value="realm.id"
+                                class="hover:bg-aruna-fg">
+                      {{ realm.name }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- Realm Input -->
+
+          <!-- Group Input -->
+          <FormField v-slot="{componentField}" name="group_id">
+            <FormItem v-if="values.variant === ResourceVariant.Project"
+                      class="flex flex-col grow space-y-4">
+              <FormLabel>Group Selection</FormLabel>
+              <Select v-bind="componentField">
+                <FormControl>
+                  <SelectTrigger class="bg-aruna-muted border-aruna-text/50">
+                    <SelectValue placeholder="Select an administration group for your project"/>
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent class="bg-aruna-bg/90">
+                  <SelectGroup>
+                    <SelectItem v-for="group in groups" :value="group.group.id"
+                                class="hover:bg-aruna-fg">
+                      {{ group.group.name }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- Group Input -->
+
+          <!-- License Input -->
+          <FormField v-slot="{componentField}" name="license_id">
+            <FormItem class="w-full lg:basis-1/3">
+              <FormLabel>License</FormLabel>
+              <Select v-bind="componentField">
+                <FormControl>
+                  <SelectTrigger class="rounded-sm bg-aruna-muted border-aruna-text/50">
+                    <SelectValue placeholder="Select a license for your resource"/>
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent class="bg-aruna-bg/90">
+                  <SelectGroup>
+                    <SelectItem v-for="license in licenses"
+                                :value="license.id"
+                                class="hover:bg-aruna-fg">
+                      {{ license.name }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End License Input -->
+        </div>
+
+        <!-- File Input -->
+        <FormField name="file">
+          <FormItem class="invisible h-0"
+                    :class="{'visible h-auto': values.variant === ResourceVariant.Object}">
+            <FormLabel>File Select/Drag</FormLabel>
+            <FormControl>
+              <input type="file"
+                     v-on:change="(v) => setFieldValue('file', v)"
+                     name="file-input"
+                     id="file-input"
+                     class="block w-full p-0 border border-aruna-text/50 shadow-sm rounded-md bg-aruna-muted text-aruna-text text-sm focus:z-10 focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none
+                            file:bg-aruna-fg
+                            file:text-aruna-text-accent
+                            file:border-0
+                            file:me-4
+                            file:p-2">
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+        <!-- File Id Input -->
+      </form>
+
+      <!-- Authors -->
+      <div class="flex flex-row mb-2 justify-start items-center gap-x-4">
+        <span class="block text-lg font-medium text-aruna-text-accent">Authors</span>
+        <AuthorDialog :initial-open="false"
+                      :with-button="true"
+                      button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
+                      button-label="Add"
+                      @add-author="(author: Author) => addAuthor(author)"/>
+      </div>
+      <Table class="table-auto">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>E-Mail</TableHead>
+            <TableHead>External Identifier</TableHead>
+            <TableHead class="text-center">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="[key, author] in authors" :key="key">
+            <TableCell class="font-medium">
+              {{ author.first_name }} {{ author.last_name }}
+            </TableCell>
+            <TableCell>{{ author.email }}</TableCell>
+            <TableCell>{{ author.identifier }}</TableCell>
+            <TableCell class="text-center">
+              <Button type="button"
+                      @click="removeAuthor(key)"
+                      class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full bg-transparent text-aruna-text hover:bg-transparent hover:text-destructive focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
+                <IconTrash class="flex-shrink-0 size-6"/>
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <!-- End Authors -->
+
+      <!-- Labels -->
+      <div class="flex flex-row mb-2 mt-6 justify-start items-center gap-x-4">
+        <span class="block text-lg font-medium text-aruna-text-accent">Key-Values</span>
+
+        <KeyValueDialog :initial-open="false"
+                        :with-button="true"
+                        button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
+                        button-label="Add"
+                        @add-key-value="(keyValue: KeyValue) => addKeyValue(keyValue)"/>
+
+        <OntologyDialog :initial-open="false"
+                        :with-button="true"
+                        button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
+                        @add-key-value="(keyValue: KeyValue) => addKeyValue(keyValue)"/>
+      </div>
+      <Table class="table-auto">
+        <TableHeader>
+          <TableRow>
+            <TableHead class="max-w-[50px]">Locked</TableHead>
+            <TableHead class="w-fit">Key</TableHead>
+            <TableHead>Value</TableHead>
+            <TableHead class="text-center">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="[key, value] in keyValues" :key="key">
+            <TableCell class="font-medium max-w-[50px]">
+              <IconLock v-if="value.locked" class="m-0.5 flex-shrink-0 size-5"/>
+              <IconLockOpen2 v-else class="m-0.5 flex-shrink-0 size-5"/>
+            </TableCell>
+            <TableCell class="w-fit">{{ key }}</TableCell>
+            <TableCell v-html="prettyDisplayJson(value.value)"/>
+            <TableCell class="text-center">
+              <Button type="button"
+                      @click="removeKeyValue(key)"
+                      class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full bg-transparent text-aruna-text hover:bg-transparent hover:text-destructive focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
+                <IconTrash class="flex-shrink-0 size-6"/>
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <!-- End Labels -->
+    </div>
+
+    <Button type="submit"
+            form="dialogForm"
+            variant="outline"
+            class="w-fit bg-transparent border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+      Create Resource
+    </Button>
+  </div>
+  <!-- End Resource Creation Form -->
+
+  <!-- TODO: Refactor (?) -->
+  <ModalObjectDisplay modalId="object-display"
+                      :object="createdResource"
+                      :progress="uploadProgress"
+                      :errorMsg="creationError"/>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
new file mode 100644
index 00000000..769b92f8
--- /dev/null
+++ b/components/custom-ui/SearchDialog.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+
+import {IconLoader2, IconSearch} from "@tabler/icons-vue";
+import {GenericNodeType, ResourceVariant} from "~/types/aruna-v3-enums";
+
+const DEFAULT_LIMIT = useRuntimeConfig().public.searchDialogLimit || 10;
+
+/* ----- Properties ----- */
+interface SearchDialogProps {
+  limitResults?: number,
+  filter?: string
+}
+
+const props = defineProps<SearchDialogProps>()
+const limitResults = props.limitResults || DEFAULT_LIMIT
+const filter = props.filter
+/* ----- End Properties ----- */
+
+const router = useRouter()
+
+const queryInput = ref('')
+const fetching = ref(false)
+const response: Ref<SearchResponse | undefined | void> = ref(undefined)
+const dialogOpen = ref(false)
+
+const resources: ComputedRef<SplitResources | undefined> = computed(() => splitResources(response.value?.resources));
+
+type SplitResources = {
+  projects: Resource[],
+  folders: Resource[],
+  objects: Resource[],
+  other: any[],
+}
+
+function handleDialogOpenChange() {
+  dialogOpen.value = !dialogOpen.value
+}
+
+function openDialog(): void {
+  queryInput.value = ''; // reset the query when the dialog is opened again
+  dialogOpen.value = true;
+}
+
+// Debounce input to decrease number of requests
+watch(queryInput, () => {
+  // Empty input only clears results
+  if (!queryInput.value) {
+    response.value = undefined
+    return
+  }
+
+  fetching.value = true
+  response.value = undefined
+  debouncedInput()
+})
+
+const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
+
+async function searchResources(query: string): Promise<void> {
+  // No need to search with empty input
+  if (!query) {
+    response.value = undefined
+    return
+  }
+
+  response.value = await $fetch<SearchResponse>('/api/v3/search', {
+    query: {
+      query: query,
+      limit: limitResults,
+      filter: filter
+    }
+  }).catch(error => {
+    console.log(error)
+    return
+  })
+  fetching.value = false
+  dialogOpen.value = true
+}
+
+function splitResources(resources: (Resource & { [type: string]: GenericNodeType })[]): SplitResources {
+  var result: SplitResources = {
+    projects: [],
+    folders: [],
+    objects: [],
+    other: []
+  }
+  if (resources) {
+    for (const resource of resources) {
+      if (resource.type === GenericNodeType.Resource) {
+        switch (resource.variant) {
+          case ResourceVariant.Project:
+            result.projects.push(resource)
+            break;
+          case ResourceVariant.Folder:
+            result.folders.push(resource)
+            break;
+          case ResourceVariant.Object:
+            result.objects.push(resource)
+            break;
+        }
+      } else {
+        result.other.push(resource)
+      }
+    }
+  }
+  return result
+}
+</script>
+
+<template>
+  <div class="relative flex">
+    <Button @click="openDialog()"
+            class="py-2 px-3 inline-flex justify-center items-center bg-transparent border border-aruna-highlight rounded-sm text-aruna-highlight hover:text-aruna-text-accent hover:bg-aruna-highlight disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight cursor-pointer">
+      <IconSearch class="mr-1 h-4 w-4"/>
+      Search
+    </Button>
+
+    <!-- COMMAND DIALOG -->
+    <CommandDialog class="rounded-sm border" :open="dialogOpen" @update:open="handleDialogOpenChange">
+      <CommandInput placeholder="Search for resources"
+                    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 && fetching"
+                      class="flex items-center justify-center gap-x-4">
+          Fetching results
+          <IconLoader2 class="mr-2 animate-spin"/>
+        </CommandEmpty>
+        <CommandEmpty v-if="queryInput && !fetching">
+          No results found.
+        </CommandEmpty>
+        <CommandGroup heading="Projects">
+          <CommandItem v-for="resource in resources?.projects"
+                       :value="resource"
+                       @select="router.push('/projects/' + resource.id)"> <!-- Dummy, replace with proper path later -->
+            {{ resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Folders">
+          <CommandItem v-for="resource in resources?.folders"
+                       :value="resource"
+                       @select="router.push('/objects/' + resource.id)">
+            {{ resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Objects">
+          <CommandItem v-for="resource in resources?.objects"
+                       :value="resource"
+                       @select="router.push('/objects/' + resource.id)">
+            {{ resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Others">
+          <CommandItem v-for="resource in resources?.other"
+                       :value="resource">
+            {{ resource.type + ": " + resource.name }}
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+      <Button v-if="response?.expected_hits > limitResults">
+        <NuxtLink :href="'/explore?q=' + queryInput">Show all results</NuxtLink>
+      </Button>
+    </CommandDialog>
+    <!-- END COMMAND DIALOG-->
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
new file mode 100644
index 00000000..d38499a8
--- /dev/null
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -0,0 +1,398 @@
+<script lang="ts" setup>
+import {
+  IconAffiliate,
+  IconBell,
+  IconCreativeCommons,
+  IconHome,
+  IconChartLine,
+  IconFingerprint,
+  IconId,
+  IconLogout,
+  IconMenu2,
+  IconPackage,
+  IconPolygon,
+  IconSearch,
+  IconUserCircle,
+} from '@tabler/icons-vue'
+
+import {Badge} from '@/components/ui/badge'
+import {Button} from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import {Input} from '@/components/ui/input'
+import {Sheet, SheetContent, SheetTrigger} from '@/components/ui/sheet'
+
+import OverviewStats from "~/components/custom-ui/dashboard/OverviewStats.vue";
+import FileExplorer from "~/components/custom-ui/dashboard/FileExplorer.vue";
+import Realms from "~/components/custom-ui/dashboard/Realms.vue";
+import DummyAnalytics from "~/components/custom-ui/dashboard/DummyAnalytics.vue";
+import ResourceCreation from "~/components/custom-ui/ResourceCreation.vue";
+import RealmSwitcher from "~/components/custom-ui/dashboard/RealmSwitcher.vue";
+import Events from "~/components/custom-ui/dashboard/Events.vue";
+import Profile from "~/components/custom-ui/user/Profile.vue";
+import Tokens from "~/components/custom-ui/user/Tokens.vue";
+import Proxies from "~/components/custom-ui/user/Proxies.vue";
+import SearchDialog from "~/components/custom-ui/SearchDialog.vue";
+import Licences from "~/components/custom-ui/dashboard/licenses/Licenses.vue";
+
+import type {User} from '~/composables/api_wrapper'
+import {toast} from "~/components/ui/toast";
+import {useStats} from "~/composables/Stats";
+import {useRealms} from "~/composables/Realms";
+import {useGroups} from "~/composables/Groups";
+import {useProjects} from "~/composables/Projects";
+import {useTokens} from "~/composables/Tokens";
+import {useEvents} from "~/composables/Events";
+import {useLicenses} from "~/composables/Licenses";
+
+// ----- Route Magic ----------
+const route = useRoute()
+const tab = route.query.tab
+// ----- End Route Magic ----------
+
+// ----- PROPERTIES ----------
+const props = defineProps<{
+  user: User | undefined
+}>()
+const user = toRef(() => props.user)
+const user_id = toRef(() => user.value?.id)
+watch(user, () => console.log('[Dashboard Component]', `User got updated: ${user.value ? user.value.id : 'Undefined'}`))
+watch(user_id, () => console.log('[Dashboard Component]', `User Id updated: ${user_id.value}`))
+// ----- END PROPERTIES ----------
+
+const {events, refreshEvents} = await useEvents([user], user_id)
+const {realms, refreshRealms} = await useRealms()
+const {groups, refreshGroups} = await useGroups()
+const {tokens, refreshTokens} = await useTokens()
+const {projects, refreshProjects} = await useProjects()
+const {stats, refreshStats} = await useStats([]) //await useStats([realms, groups, projects])
+const {licenses, refreshLicenses} = await useLicenses([])
+
+watch(realms, () => console.log('[Dashboard] Realms updated to value:', realms.value))
+watch(groups, () => console.log('[Dashboard] Groups updated to value:', groups.value))
+watch(events, () => console.log('[Dashboard] Events updated to value:', events.value))
+watch(licenses, () => console.log('[Dashboard] Licenses updated to value:', licenses.value))
+
+
+EventBus.on('updateStats', async () => await refreshStats())
+EventBus.on('updateRealms', async () => await refreshRealms())
+EventBus.on('updateGroups', async () => await refreshGroups())
+EventBus.on('updateProjects', async () => await refreshProjects())
+
+const unreadEvents = computed(() => events.value ? events.value.length : 0)
+
+/* ----- DASHBOARD CONTENT ----- */
+const currentContent: Ref<string> = ref(tab as string || 'OverviewStats')
+const contentComponents = {
+  'Events': {component: Events},
+  'OverviewStats': {component: OverviewStats},
+  'FileExplorer': {component: FileExplorer},
+  'ResourceCreation': {component: ResourceCreation},
+  'Realms': {component: Realms},
+  'DummyAnalytics': {component: DummyAnalytics},
+  'Profile': {component: Profile},
+  'Tokens': {component: Tokens,},
+  'Proxies': {component: Proxies},
+  'Licenses': {component: Licences},
+}
+const componentProps = computed(() => {
+  switch (currentContent.value) {
+    case 'OverviewStats':
+      return stats.value
+    case 'Events':
+      return {
+        events: events.value,
+        navCollapsedSize: 4
+      }
+    case 'FileExplorer':
+      return {
+        resources: projects.value,
+        licenses: licenses.value
+      }
+    case 'Licenses':
+      return {
+        licenses: licenses.value
+      }
+    case 'Realms':
+      return {
+        realms: realms.value,
+        selectedRealm: selectedRealm.value
+      }
+    case 'ResourceCreation':
+      return {
+        realms: realms.value,
+        groups: groups.value,
+        licenses: licenses.value
+      }
+    case 'Profile':
+      return {
+        user: user.value,
+        groups: groups.value
+      }
+    case 'Tokens':
+      return {
+        tokens: tokens.value
+      }
+    case 'Proxies':
+      return {
+        userEndpoints: [], //TODO
+        endpoints: [], //TODO
+      }
+    default:
+      return {}
+  }
+})
+
+/* ----- EXTERNAL TAB SWITCH ----- */
+function setTab(tabId: string) {
+  currentContent.value = tabId
+}
+
+EventBus.on('setTab', (tabId: string) => setTab(tabId))
+/* ----- END EXTERNAL TAB SWITCH ----- */
+
+/* ----- REALM SWITCH ----- */
+const selectedRealm = ref<Realm | undefined>(realms.value ? realms.value[0] : undefined)
+watch(selectedRealm, () => console.info('[Dashboard Component] Bidirectional Realm Switch:', selectedRealm.value))
+function addRealm(realm: Realm) {
+  if (realms.value)
+    realms.value.push(realm)
+  else
+    realms.value = [realm]
+}
+
+function setRealm(realmId: string) {
+  //ToDo: Re-fetch things
+  console.log('[Dashboard Component]', `Switched realm to: ${realmId}`)
+  toast({
+    title: 'Info',
+    description: `Switched realm to: ${realmId}`
+  })
+}
+
+EventBus.on('switchRealm', (realmId: string) => setRealm(realmId))
+/* ----- END REALM SWITCH ----- */
+
+const spinBaby = ref(false)
+EventBus.on('spinStart', () => spinBaby.value = true)
+EventBus.on('spinStop', () => spinBaby.value = false)
+</script>
+
+<template>
+  <!--<div class="grid h-full min-h-[calc(100vh-64px)] w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">-->
+  <div class="grid h-full min-h-[calc(100vh-64px)] w-full lg:grid-cols-[220px_1fr]">
+    <div class="hidden border-r border-aruna-text/50 bg-aruna-bg/90 md:block">
+      <div class="flex h-full max-h-screen flex-col gap-2">
+        <div class="flex items-center justify-between border-b border-aruna-text/50 px-4 lg:h-[60px] lg:px-6">
+          <div class="flex space-x-2">
+            <img alt="Aruna logo"
+                 class="inline w-24 h-auto align-middle hover:cursor-pointer"
+                 src="/imgs/aruna_dark.webp"
+                 @click="currentContent = 'OverviewStats'"/>
+          </div>
+
+          <div class="flex relative">
+            <Button key="Events"
+                    :class="[{'bg-muted': currentContent === 'Events', 'text-primary': currentContent === 'Events' }]"
+                    class="ml-auto h-8 w-8"
+                    size="icon"
+                    variant="outline"
+                    @click="currentContent = 'Events'">
+              <IconBell class="h-4 w-4"/>
+              <span class="sr-only">Toggle events</span>
+            </Button>
+            <Badge v-if="unreadEvents > 0"
+                   class="absolute animate-bounce -bottom-1 -right-1 -mb-1 -mr-1 bg-red-400 hover:bg-red-400 text-white text-xs font-bold w-4 h-4 flex items-center justify-center rounded-full">
+              {{ unreadEvents }}
+            </Badge>
+          </div>
+        </div>
+
+        <!-- Side Navigation -->
+        <div class="flex-1">
+          <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
+            <button key="OverviewStats"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'OverviewStats'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent='OverviewStats'">
+              <IconHome class="h-4 w-4"/>
+              Overview
+            </button>
+
+            <button key="Realms"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Realms'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Realms'">
+              <IconAffiliate class="h-5 w-5"/>
+              Realms
+            </button>
+
+            <!--
+            <button key="DummyStats"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'DummyStats'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'DummyStats'">
+              <IconDeviceDesktopAnalytics class="h-4 w-4"/>
+              Stats
+            </button>
+
+            <button key="DummyAnalytics"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'DummyAnalytics'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'DummyAnalytics'">
+              <IconChartLine class="h-4 w-4"/>
+              Analytics
+            </button>
+            -->
+
+            <button key="FileExplorer"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'FileExplorer'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'FileExplorer'">
+              <IconPackage class="h-5 w-5"/>
+              Resources
+            </button>
+
+            <Separator class="my-4 bg-slate-300 dark:bg-slate-400"/>
+
+            <button key="Profile"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Profile'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Profile'">
+              <IconId class="h-4 w-4"/>
+              Profile
+            </button>
+
+            <button key="Tokens"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Tokens'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Tokens'">
+              <IconFingerprint class="h-4 w-4"/>
+              Tokens
+            </button>
+
+            <button key="Proxies"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Proxies'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Proxies'">
+              <IconPolygon class="h-4 w-4"/>
+              Data Proxies
+            </button>
+
+            <button key="Licenses"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Licenses'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Licenses'">
+              <IconCreativeCommons class="h-4 w-4"/>
+              Licenses
+            </button>
+          </nav>
+        </div>
+        <!-- End Side Navigation -->
+      </div>
+    </div>
+
+    <!-- Sidebar for mobile devices -->
+    <div class="flex flex-col">
+      <header class="flex items-center gap-4 border-b border-aruna-text/50 bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button class="shrink-0 md:hidden"
+                    size="icon"
+                    variant="outline">
+              <IconMenu2 class="h-5 w-5"/>
+              <span class="sr-only">Toggle navigation menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent class="flex flex-col" side="left">
+            <nav class="grid gap-2 text-lg font-medium">
+              <a class="flex items-center gap-2 text-lg font-semibold"
+                 href="/user/dashboard">
+                <img alt="Aruna logo"
+                     class="inline w-24 h-auto align-middle"
+                     src="/imgs/aruna_dark.webp"/>
+              </a>
+              <a class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                 href="#">
+                <IconHome class="h-5 w-5"/>
+                Overview
+              </a>
+              <a class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                 href="#">
+                <IconPackage class="h-5 w-5"/>
+                Resources
+                <Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                  6
+                </Badge>
+              </a>
+              <a class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                 href="#">
+                <IconChartLine class="h-5 w-5"/>
+                Analytics
+              </a>
+            </nav>
+          </SheetContent>
+        </Sheet>
+
+        <div class="flex flex-col sm:flex-row w-full space-x-4">
+          <ClientOnly fallbackTag="span">
+            <RealmSwitcher class="flex"
+                           :realms="realms"
+                           v-model:realm-selection="selectedRealm"
+                           @add-realm="addRealm" />
+            <template #fallback>
+              <Skeleton class="h-auto w-[300px]"/>
+            </template>
+          </ClientOnly>
+          <SearchDialog filter="variant IN [0,1,2]"/>
+        </div>
+        <DropdownMenu>
+          <ClientOnly fallbackTag="span">
+            <DropdownMenuTrigger as-child>
+              <Button class="rounded-full" size="icon" variant="secondary">
+                <IconUserCircle class="h-5 w-5"/>
+                <span class="sr-only">Toggle user menu</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <template #fallback>
+              <Skeleton class="h-9 w-9 rounded-full"/>
+            </template>
+          </ClientOnly>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel v-if="user" class="text-md text-aruna-700">
+              {{ user.first_name }} {{ user.last_name }}
+            </DropdownMenuLabel>
+            <DropdownMenuLabel v-if="user" class="text-sm text-slate-500">
+              {{ user.email }}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator v-if="user"/>
+            <DropdownMenuItem>
+              <a v-if="!user" href="/auth/login?provider=local">
+                <IconLogout class="inline-flex h-4 w-4 me-2"/>
+                Login
+              </a>
+              <a v-else href="/auth/logout">
+                <IconLogout class="inline-flex h-4 w-4 me-2"/>
+                Logout
+              </a>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+
+      <main class="flex flex-1 flex-col gap-4 lg:gap-6 bg-[#080d1f]/[.9]">
+        <KeepAlive>
+          <component :is="contentComponents[currentContent].component" v-bind="componentProps"/>
+        </KeepAlive>
+      </main>
+    </div>
+    <!-- END Sidebar for mobile devices -->
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/DummyAnalytics.vue b/components/custom-ui/dashboard/DummyAnalytics.vue
new file mode 100644
index 00000000..c65a33fa
--- /dev/null
+++ b/components/custom-ui/dashboard/DummyAnalytics.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="m-4 p-4 rounded-sm border border-dashed border-aruna-text-accent flex items-center justify-center">
+    This is some dummy content for a potential analytics subcomponent.
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/EventDisplay.vue b/components/custom-ui/dashboard/EventDisplay.vue
new file mode 100644
index 00000000..efdfb569
--- /dev/null
+++ b/components/custom-ui/dashboard/EventDisplay.vue
@@ -0,0 +1,219 @@
+<script lang="ts" setup>
+import {
+  IconArchive,
+    IconArchiveOff,
+    IconCornerUpLeft,
+    IconCornerUpLeftDouble,
+    IconCornerUpRight,
+    IconDotsVertical,
+    IconTrash
+} from "@tabler/icons-vue";
+import {format} from 'date-fns/format'
+import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@/components/ui/dropdown-menu'
+import {Avatar, AvatarFallback} from '@/components/ui/avatar'
+import {Button} from '@/components/ui/button'
+import {Separator} from '@/components/ui/separator'
+import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip'
+
+/* ----- PROPERTIES ----- */
+interface EventDisplayProps {
+  eventData: BaseTx | undefined //Mail | undefined
+}
+
+const props = defineProps<EventDisplayProps>()
+/* ----- END PROPERTIES ----- */
+
+const eventAbbreviation = computed(() => {
+  const parts = props.eventData?.type.match(/[A-Z][a-z]+/g)
+  return parts?.map(chunk => chunk[0]).join('')
+})
+
+const today = new Date()
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <div class="flex items-center p-2">
+      <div class="flex items-center gap-2">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!eventData">
+              <IconArchive class="size-4"/>
+              <span class="sr-only">Archive</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Archive</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!eventData">
+              <IconArchiveOff class="size-4"/>
+              <span class="sr-only">Move to junk</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Move to junk</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!eventData">
+              <IconTrash class="size-4"/>
+              <span class="sr-only">Move to trash</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Move to trash</TooltipContent>
+        </Tooltip>
+        <!--
+        <Separator orientation="vertical" class="mx-1 h-6" />
+        <Tooltip>
+          <Popover>
+            <PopoverTrigger as-child>
+              <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" :disabled="!mail">
+                  <Clock class="size-4" />
+                  <span class="sr-only">Snooze</span>
+                </Button>
+              </TooltipTrigger>
+            </PopoverTrigger>
+            <PopoverContent class="flex w-[535px] p-0">
+              <div class="flex flex-col gap-2 border-r px-2 py-4">
+                <div class="px-4 text-sm font-medium">
+                  Snooze until
+                </div>
+                <div class="grid min-w-[250px] gap-1">
+                  <Button
+                      variant="ghost"
+                      class="justify-start font-normal">
+                    Later today
+                    <span class="ml-auto text-muted-foreground">
+                      {{ format(addHours(today, 4), "E, h:m b") }}
+                    </span>
+                  </Button>
+                  <Button
+                      variant="ghost"
+                      class="justify-start font-normal"
+                  >
+                    Tomorrow
+                    <span class="ml-auto text-muted-foreground">
+                      {{ format(addDays(today, 1), "E, h:m b") }}
+                    </span>
+                  </Button>
+                  <Button
+                      variant="ghost"
+                      class="justify-start font-normal"
+                  >
+                    This weekend
+                    <span class="ml-auto text-muted-foreground">
+                      {{ format(nextSaturday(today), "E, h:m b") }}
+                    </span>
+                  </Button>
+                  <Button
+                      variant="ghost"
+                      class="justify-start font-normal"
+                  >
+                    Next week
+                    <span class="ml-auto text-muted-foreground">
+                      {{ format(addDays(today, 7), "E, h:m b") }}
+                    </span>
+                  </Button>
+                </div>
+              </div>
+              <div class="p-2">
+                <Calendar />
+              </div>
+            </PopoverContent>
+          </Popover>
+          <TooltipContent>Snooze</TooltipContent>
+        </Tooltip>
+        -->
+      </div>
+      <div class="ml-auto flex items-center gap-2">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!eventData">
+              <IconCornerUpLeft class="size-4"/>
+              <span class="sr-only">Reply</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Reply</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!eventData">
+              <IconCornerUpLeftDouble class="size-4"/>
+              <span class="sr-only">Reply all</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Reply all</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!eventData">
+              <IconCornerUpRight class="size-4"/>
+              <span class="sr-only">Forward</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Forward</TooltipContent>
+        </Tooltip>
+      </div>
+      <Separator orientation="vertical" class="mx-2 h-6"/>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="ghost" size="icon" :disabled="!eventData">
+            <IconDotsVertical class="size-4"/>
+            <span class="sr-only">More</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>Mark as unread</DropdownMenuItem>
+          <DropdownMenuItem>Star thread</DropdownMenuItem>
+          <DropdownMenuItem>Add label</DropdownMenuItem>
+          <DropdownMenuItem>Mute thread</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+    <Separator/>
+    <div v-if="eventData" class="flex flex-1 flex-col">
+      <div class="flex items-start p-4">
+        <div class="flex items-start gap-4 text-sm">
+          <Avatar>
+            <AvatarFallback>
+              {{ eventAbbreviation }}
+            </AvatarFallback>
+          </Avatar>
+          <div class="grid gap-1">
+            <div class="font-semibold">
+              {{ eventData.event_id }}
+              <!--{{ mail.name || 'Aruna System' }}-->
+            </div>
+            <div class="line-clamp-1 text-xs">
+              {{ eventData.type }}
+              <!-- {{ displayVariant(eventData.variant) }} -->
+              <!--{{ mail.subject }}-->
+            </div>
+            <div class="line-clamp-1 text-xs">
+              <span class="font-medium">Reply-To:</span>
+              {{ 'some-mail.email.com' }}
+              <!--{{ mail.email }}-->
+            </div>
+          </div>
+        </div>
+        <!--
+        <div v-if="eventData.date" class="ml-auto text-xs text-muted-foreground">
+          {{ format(new Date(eventData.date), "PPpp") }}
+        </div>
+        -->
+      </div>
+
+      <Separator/>
+
+      <div class="flex-1 whitespace-pre-wrap p-4 text-sm">
+        <pre class="break-words text-wrap">{{ JSON.stringify(eventData, null, 2).trim() }}</pre>
+        <!-- TODO: Human readable event summary -->
+      </div>
+
+    </div>
+    <div v-else class="p-8 text-center text-muted-foreground">
+      No message selected
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/EventList.vue b/components/custom-ui/dashboard/EventList.vue
new file mode 100644
index 00000000..8f69a68f
--- /dev/null
+++ b/components/custom-ui/dashboard/EventList.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import {ScrollArea} from '@/components/ui/scroll-area'
+import {cn} from '@/utils/shadcn'
+import {Badge} from '@/components/ui/badge'
+import {formatDate} from '~/composables/utils'
+import {formatDistanceToNow} from "date-fns";
+
+/* ----- Component Properties ----- */
+interface EventListProps {
+  items: BaseTx[] //Mail[]
+}
+
+defineProps<EventListProps>()
+const selectedEvent = defineModel<string>('selectedEvent', {required: false})
+/* ----- End Component Properties ----- */
+</script>
+
+<template>
+  <ScrollArea class="h-full flex">
+    <div class="flex-1 flex flex-col gap-2 p-4 pt-0">
+      <TransitionGroup name="list" appear>
+        <button v-for="item of items"
+                :key="item.event_id"
+                :class="cn('flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
+                selectedEvent === item.event_id && 'bg-muted',)"
+                @click="selectedEvent = item.event_id">
+          <div class="flex w-full flex-col gap-1">
+            <div class="flex items-center">
+              <div class="flex items-center gap-2">
+                <div class="font-semibold">
+                  {{ item.type }}
+                  <!--{{ item.name }}-->
+                </div>
+                <!--
+                <span v-if="!item.read" class="flex h-2 w-2 rounded-full bg-blue-600"/>
+                -->
+              </div>
+              <div :class="cn('ml-auto text-xs', selectedEvent === item.event_id ? 'text-foreground' : 'text-muted-foreground',)">
+                <TooltipProvider :delay-duration="100">
+                  <Tooltip>
+                    <TooltipTrigger>
+                      {{ formatDistanceToNow(new Date(decodeTime(item.event_id))) + ' ago' }}
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{{ formatDate(new Date(decodeTime(item.event_id)).toString()) }}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            </div>
+
+            <div class="text-xs font-medium">
+              {{ item.event_id }}
+            </div>
+          </div>
+          <div class="line-clamp-2 text-xs text-muted-foreground">
+            Here can be a short summary for: {{ item.type }}
+            <!-- {{ item.message.substring(0, 300) }} -->
+            <!--{{ item.text.substring(0, 300) }}-->
+          </div>
+          <div class="flex items-center gap-2">
+            <Badge v-if="item.requester.Unregistered" variant="outline">Unregistered</Badge>
+            <Badge v-if="item.requester.User" variant="secondary">User</Badge>
+            <Badge v-if="item.requester.User?.impersonated_by" variant="default">Impersonated</Badge>
+            <Badge v-if="item.requester.User?.auth_method.Oidc" variant="default">OIDC</Badge>
+            <Badge v-if="item.requester.User?.auth_method.Aruna" variant="default">Aruna</Badge>
+          </div>
+        </button>
+      </TransitionGroup>
+    </div>
+  </ScrollArea>
+</template>
+
+<style scoped>
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+.list-leave-active {
+  position: absolute;
+}
+</style>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/Events.vue b/components/custom-ui/dashboard/Events.vue
new file mode 100644
index 00000000..8eaa7921
--- /dev/null
+++ b/components/custom-ui/dashboard/Events.vue
@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import {IconSearch} from '@tabler/icons-vue'
+import {refDebounced} from '@vueuse/core'
+import EventList from './EventList.vue'
+import EventDisplay from './EventDisplay.vue'
+import {Separator} from '@/components/ui/separator'
+import {Input} from '@/components/ui/input'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/components/ui/tabs'
+import {TooltipProvider} from '@/components/ui/tooltip'
+import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable'
+
+/* ----- PROPERTIES ----- */
+interface EventsProps {
+  events: BaseTx[]
+  defaultLayout?: number[]
+  defaultCollapsed?: boolean
+  navCollapsedSize: number
+}
+
+const props = withDefaults(defineProps<EventsProps>(), {
+  defaultCollapsed: false,
+  defaultLayout: () => [440, 655],
+})
+
+const events = toRef(() => props.events)
+watch(events, (newVal) => console.log('[EventsComponent]', newVal))
+/* ----- END PROPERTIES ----- */
+
+const isCollapsed = ref(props.defaultCollapsed)
+const selectedEvent = ref<string | undefined>(events.value[0].event_id)
+
+const searchValue = ref('')
+const debouncedSearch = refDebounced(searchValue, 250)
+
+const filteredMailList = computed(() => {
+  let output: BaseTx[]
+  const searchValue = debouncedSearch.value?.trim()
+  if (!searchValue) {
+    output = events.value
+  } else {
+    output = events.value.filter((item) => {
+      return item.event_id.includes(debouncedSearch.value)
+          || item.type.includes(debouncedSearch.value)
+    })
+  }
+
+  console.log('[EventsComponent] Search Value:', searchValue)
+  return output
+})
+
+const unreadEventsList = computed(() => filteredMailList.value.filter(item => true))
+const selectedEventData = computed(() => props.events.find(item => item.event_id === selectedEvent.value))
+
+function onCollapse() {
+  isCollapsed.value = true
+}
+
+function onExpand() {
+  isCollapsed.value = false
+}
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <ResizablePanelGroup
+        id="resize-panel-group-1"
+        direction="horizontal"
+        class="h-full max-h-[calc(100vh-130px)] items-stretch">
+      <ResizablePanel id="resize-panel-1" :default-size="defaultLayout[0]" :min-size="30">
+        <Tabs default-value="all" class="h-full">
+          <div class="flex items-center px-4 py-2">
+            <h1 class="text-xl font-bold">
+              Personal Events
+            </h1>
+            <TabsList class="ml-auto">
+              <TabsTrigger value="all" class="text-zinc-600 dark:text-zinc-200">
+                All mail
+              </TabsTrigger>
+              <TabsTrigger value="unread" class="text-zinc-600 dark:text-zinc-200">
+                Unread
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <Separator/>
+          <div class="p-4">
+            <form>
+              <div class="relative">
+                <IconSearch class="absolute left-2 top-2.5 size-4 text-muted-foreground"/>
+                <Input v-model="searchValue" placeholder="Search" class="pl-8 bg-muted"/>
+              </div>
+            </form>
+          </div>
+          <TabsContent value="all" class="m-0 h-full">
+            <EventList v-model:selected-event="selectedEvent" :items="filteredMailList"/>
+          </TabsContent>
+          <TabsContent value="unread" class="m-0">
+            <EventList v-model:selected-event="selectedEvent" :items="unreadEventsList"/>
+          </TabsContent>
+        </Tabs>
+      </ResizablePanel>
+      <ResizableHandle id="resiz-handle-1" with-handle/>
+      <ResizablePanel id="resize-panel-2" :default-size="defaultLayout[1]">
+        <EventDisplay :eventData="selectedEventData"/>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </TooltipProvider>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
new file mode 100644
index 00000000..2620cbfe
--- /dev/null
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -0,0 +1,968 @@
+<script lang="ts" setup>
+import {
+  IconCheck,
+  IconEdit,
+  IconExclamationCircle,
+  IconExternalLink,
+  IconFile,
+  IconFolder,
+  IconFolderPlus,
+  IconFolderSymlink,
+  IconInfoCircle,
+  IconLoader3,
+  IconLock,
+  IconLockOpen2,
+  IconPlus,
+  IconTreadmill,
+  IconUpload,
+  IconWorld,
+  IconX
+} from '@tabler/icons-vue'
+import {Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator,} from '@/components/ui/breadcrumb'
+import {
+  Pagination,
+  PaginationList,
+  PaginationListItem,
+  PaginationFirst,
+  PaginationPrev,
+  PaginationEllipsis
+} from "~/components/ui/pagination";
+
+import type {
+  CreateResourceRequest,
+  GetRelationsResponse,
+  ResourceElement,
+  SimpleCredentials
+} from "~/composables/api_wrapper"
+import {fetchChildren} from "~/composables/api_wrapper";
+import {ResourceVariant, SyncingStatus, VisibilityClass} from "~/types/aruna-v3-enums"
+import {toast} from "~/components/ui/toast";
+import {h} from "vue";
+
+const StatusMap = {
+  [SyncingStatus.Pending]: IconLoader3,
+  [SyncingStatus.Running]: IconTreadmill,
+  [SyncingStatus.Finished]: IconCheck,
+  [SyncingStatus.Error]: IconExclamationCircle,
+}
+
+const licenses = [
+  {id: '01JFD6QDYWXTF2SXBQEW1VKM95', tag: 'CC0', label: 'Creative Commons Zero (CC0 1.0)'},
+  {
+    id: '01JFD6R28H3XMX2DRQZ7CEC200',
+    tag: 'CC-BY-SA 4.0',
+    label: 'Attribution-ShareAlike 4.0 International (CC-BY-SA 4.0)'
+  },
+  {
+    id: '01JFD6R7BBJQ7C1BDYQE2NADR6',
+    tag: 'CC-BY-NC 4.0',
+    label: 'Attribution-NonCommercial 4.0 International (CC-BY-NC)'
+  },
+  {
+    id: '01JFD6RC1JQHYWX4F4ZB1EBN0T',
+    tag: 'CC-BY-NC-SA 4.0',
+    label: 'Attribution-NonCommercial-ShareAlike 4.0 International (CC-BY-NC-SA)'
+  }
+] //await fetchLicenses()
+
+/* ----- Dropzone ----- */
+import {useDropZone} from "@vueuse/core"
+import KeyValueDialog from "~/components/custom-ui/dialog/KeyValueDialog.vue";
+import AuthorDialog from "~/components/custom-ui/dialog/AuthorDialog.vue";
+import {Upload} from "@aws-sdk/lib-storage";
+import {S3Client} from "@aws-sdk/client-s3";
+import type {S3ClientConfig} from "@aws-sdk/client-s3/dist-types/S3Client";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "~/components/ui/tooltip";
+import EditableLabel from "~/components/custom-ui/EditableLabel.vue";
+
+const dropZoneRef = ref<HTMLDivElement>()
+
+// File upload meta
+const fileUpload = ref<File | null>(null)
+const fileName = ref<string | null>(null)
+const fileTitle = ref<string | null>(null)
+const fileDescription = ref<string | null>(null)
+const fileLicense = ref<string | null>(null)
+const fileAuthors = ref<Map<string, Author>>(new Map())
+const fileLabels = ref<Map<string, KeyValue>>(new Map())
+const parent = ref<ResourceElement | null>(null)
+const fileUploadProgress = ref<number>(0)
+watch(fileUploadProgress, (v) => console.info('[FileExplorer] Upload progress:', v))
+
+function onDrop(files: File[] | null) {
+  if (files && files.length > 0) {
+    //Clear meta info context
+    infoSelection.value = undefined
+
+    // Set file upload context and open sidebar
+    fileUpload.value = files[0]
+    fileName.value = fileUpload.value.name
+    parent.value = currentHierarchy.value[currentHierarchy.value.length - 1]  // Last element of current hierarchy
+
+    infoOpen.value = true
+  }
+}
+
+const {isOverDropZone} = useDropZone(dropZoneRef, {
+  onDrop,
+  // Control multi-file drop
+  multiple: false,
+  // Whether to prevent default behavior for unhandled events
+  preventDefaultForUnhandled: false,
+})
+
+function updateProgress(current: number, total: number | undefined) {
+  if (!total)
+    return 0
+  const floatProgress = current / total * 100
+  fileUploadProgress.value = +floatProgress.toFixed(2)
+}
+
+// ----- End Dropzone ---------- //
+
+
+// ----- PROPERTIES ---------- //
+interface FileExplorerProps {
+  resources: ResourceElement[]
+  licenses: License[]
+}
+
+const props = defineProps<FileExplorerProps>()
+const licenseMap = computed(() => new Map<string, License>(props.licenses.map(license => [license.id, license])))
+// Loaded resources -> Default: your projects
+// Children are lazy loaded
+const loadedResources: Ref<ResourceElement[]> = toRef(() => props.resources)
+watch(loadedResources, () => console.log(loadedResources.value.length))
+/* ----- END PROPERTIES ----- */
+
+/* ----- Const variable magic */
+const currentHierarchy: Ref<ResourceElement[]> = ref([])
+const displayedResources: Ref<ResourceElement[]> = ref(loadedResources.value)
+
+const infoSelection: Ref<ResourceElement | undefined> = ref(undefined)
+watch(infoSelection, () => console.log('[FileExplorer] Current selection:', infoSelection.value))
+const infoOpen: Ref<boolean> = ref(false)
+
+const nameEditMode = ref(false)
+const titleEditMode = ref(false)
+const descriptionEditMode = ref(false)
+
+watchEffect(async () => {
+  console.log('[FileExplorer] Current Hierarchy:', currentHierarchy.value.map(ele => ele.id).join(', '))
+  if (currentHierarchy.value.length <= 0) {
+    displayedResources.value = loadedResources.value
+  } else {
+    const currentResource = currentHierarchy.value.slice(-1)[0]
+
+    //if (currentResource && currentResource.children.length > 0) {
+    //  displayedRes.value = currentResource.children
+    //  return
+    //}
+
+    // Fetch children
+    const children: ResourceElement[] = await fetchChildren(currentResource.id, offset.value, pageSize.value)
+
+    // Add to loaded resources
+    addChildren(loadedResources.value, currentResource.id, children)
+
+    // Return children
+    displayedResources.value = children
+  }
+})
+
+/* ----- */
+
+function openInfo(resource: ResourceElement) {
+  infoSelection.value = resource
+  infoOpen.value = true
+}
+
+function closeInfo() {
+  // Clear meta info context
+  infoOpen.value = false
+  infoSelection.value = undefined
+
+  // Clear file upload context
+  clearFileMeta()
+}
+
+function clearFileMeta() {
+  fileUpload.value = null
+  fileName.value = null
+  fileTitle.value = null
+  fileDescription.value = null
+  fileLicense.value = null
+  fileLabels.value.clear()
+  fileAuthors.value.clear()
+}
+
+async function deleteResource(resource: ResourceElement) {
+  await $fetch<DeleteResourcesResponse>('/api/v3/resource', {
+    method: 'DELETE',
+    query: {
+      id: resource.id
+    }
+  }).then(response => resource.deleted = true)
+}
+
+function navigateBack(resourceId: string) {
+  // Clear meta info context
+  infoOpen.value = false
+  infoSelection.value = undefined
+
+  // Clear file upload context
+  clearFileMeta()
+
+  // Navigate
+  if (resourceId === 'root') {
+    currentHierarchy.value = []
+    return
+  }
+  const index = currentHierarchy.value.map(res => res.id).indexOf(resourceId)
+  currentHierarchy.value = currentHierarchy.value.slice(0, index)
+}
+
+async function navigateForward(element: ResourceElement) {
+  // Check if is locked
+  if (element.variant === ResourceVariant.Object || element.locked)
+    return
+
+  // Fetch child relations to check if user has permissions
+  //TODO: In future there will be an authorization endpoint?
+  await $fetch<GetRelationsResponse>(`/api/v3/relations`, {
+    query: {
+      node: element.id,
+      direction: 'Outgoing',
+      offset: offset.value, //0,
+      page_size: pageSize.value //Number.MAX_SAFE_INTEGER
+    }
+  }).then(response => {
+    console.info('[Navigate Forward] Fetched relations:', response.relations)
+
+    element.count = response.total_hits
+    totalHits.value = response.total_hits
+    currentHierarchy.value.push(element)
+    infoOpen.value = false
+    infoSelection.value = undefined
+    clearFileMeta()
+  }).catch(error => {
+    console.dir(error.data)
+    if (error.data.statusCode === 403) {
+      toast({
+        description: h('div',
+            {class: 'flex space-x-2 items-center justify-center'},
+            [
+              h(IconLock, {class: 'flex-shrink-0 size-5'}),
+              h('span',
+                  {class: 'text-aruna-text-accent'},
+                  [`Not authorized to view sub-resources of ${element.title || element.name}`])
+            ]),
+        duration: 10000
+      })
+    } else {
+      toast({
+        title: 'Error',
+        description: `Error [${error.data.statusCode}]: ${error.data.data}`
+      })
+    }
+  })
+}
+
+function addChildren(array: ResourceElement[], id: string, children: ResourceElement[]): ResourceElement | undefined {
+  for (const item of array) {
+    if (item.id === id) {
+      item.children = children
+      return item;
+    }
+
+    if (item.children?.length) {
+      const innerResult = addChildren(item.children, id, children);
+      if (innerResult) return innerResult;
+    }
+  }
+}
+
+function emitTabSwitch(tabId: string) {
+  EventBus.emit('setTab', tabId);
+}
+
+function checkDirection(): 'horizontal' | 'vertical' {
+  console.log(window.matchMedia('(min-width: 1024px)').matches)
+  if (window.matchMedia('(min-width: 1024px)').matches) {
+    return 'horizontal'
+  } else {
+    return 'vertical'
+  }
+}
+
+async function submitUpload() {
+  await $fetch<GetS3CredentialsFromUserResponse>('/api/v3/credentials')
+      .then(async response => {
+
+        //TODO: Finish GetS3Credentials when it also returns secret
+        return {
+          access_key: '01JGXX8S57F7MDKGKBNM5MJSVK.3',
+          secret_key: '9f829eef9778c246d8f1b549dd9ee8525df6cc65f9bc0763559eaccb15ada1521af0be7f6c0d6d70b58efc24eb8340541bf98b630bbee818b9b56334bee48859',
+        }
+
+        // Check if S3 credentials for data proxy exist
+        for (const token of response.tokens) {
+          if (token.token_info.component_id === '<Component-Id>')
+            return {
+              access_key: token.access_key,
+              secret_key: '<Secret-Key>'
+            }
+        }
+        // No credentials found
+        throw new Error(`No S3 credentials available for component: <Component-Id>`)
+
+      }).then(async credentials => {
+        console.info('[FileUpload] Credentials:', credentials)
+        const request = {
+          variant: ResourceVariant.Object,
+          parent_id: parent.value?.id,
+          name: fileName.value,
+          title: fileTitle.value,
+          description: fileDescription.value,
+          license_id: fileLicense.value,
+          labels: [], //TODO: Map to Array
+          authors: [], //TODO: Map to Array
+          visibility: VisibilityClass.Public,
+          identifiers: []
+        } as CreateResourceRequest
+
+        //TODO: Finish create Object resource when the Aruna Data service is able to process events
+        /*
+        await $fetch<CreateResourceResponse>('/api/v3/resource', {
+          method: 'POST',
+          body: request
+        })
+        */
+
+        return [credentials, 'http://localhost:1337']
+
+      }).then(async ([credentials, endpoint_url]) => {
+        //TODO: Upload data via S3
+        // Create S3 client for staging object
+        const s3client = new S3Client({
+          endpoint: endpoint_url,
+          region: 'region-one',
+          credentials: {
+            accessKeyId: (credentials as SimpleCredentials).access_key,
+            secretAccessKey: (credentials as SimpleCredentials).secret_key,
+          }
+        } as S3ClientConfig)
+
+        const bucket = currentHierarchy.value[0].name
+        const pathParts = currentHierarchy.value.slice(1)
+        const key = pathParts.length > 0 ? `${pathParts.join('/')}/${fileUpload.value?.name}` : fileUpload.value?.name
+
+        console.info('[FileExplorer] Bucket and key:', bucket, currentHierarchy.value.slice(1), key, `${endpoint_url}/${bucket}/${key}`)
+
+        if (fileUpload.value) {
+          const upload = new Upload({
+            client: s3client as S3Client,
+            queueSize: 4, // 4 uploads concurrently
+            partSize: fileUpload.value.size > 5 * 1024 * 1024 * 1024 ? 50 * 1024 * 1024 : 5 * 1024 * 1024, // 5MiB parts up to 5GiB; then 50MiB parts
+            leavePartsOnError: false, // Remove uploaded parts on error
+            params: {
+              Bucket: bucket,
+              Key: key as string,
+              Body: fileUpload.value
+            },
+          })
+
+          // Update progress bar value
+          upload.on("httpUploadProgress", progress =>
+              updateProgress(progress.loaded ? progress.loaded : 0, progress.total))
+
+          // Do something after upload succeeded
+          return await upload.done() //.then(() => console.log('Upload succeeded'))
+        }
+
+        throw new Error('No file selected... that is very late...')
+
+      }).then(response => {
+        console.log(`Upload completed with status code: ${response.$metadata.httpStatusCode}`)
+      }).catch(error => {
+        console.error('[FileExplorer Client] Upload error:', error.data)
+        toast({
+          title: 'Error',
+          description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'},
+              h('code', {class: 'text-white'}, JSON.stringify(error.message, null, 2))),
+          duration: -1
+        })
+      })
+}
+
+
+// ----- Pagination ---------- //
+const currentPage = ref<number>(1)
+const pageSize = ref<number>(3)
+const totalHits = ref<number>(6)
+const offset = computed(() => (currentPage.value - 1) * pageSize.value)
+watch(offset, () => {
+  console.info(`[FileExplorer] Current page: ${currentPage.value}, Current page size: ${pageSize.value}, Current offset: ${offset.value}`)
+  console.info('[FileExplorer] Current resource children:', currentHierarchy.value[currentHierarchy.value.length - 1].children.length)
+})
+
+// ----- End Pagination ---------- //
+
+// ----- Update Functions --------------------
+async function updateName(resourceId: string, name: string) {
+  await $fetch('/api/v3/resources/name', {
+    method: 'POST',
+    body: {
+      id: resourceId,
+      name: name
+    }
+  }).then(() => {
+    infoSelection.value.name = name
+    nameEditMode.value = false
+    toast({
+      description: h('div',
+          {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
+          [
+            h(IconCheck, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
+            h('span',
+                {class: 'text-fuchsia-50'},
+                ['Name successfully updated.'])
+          ]),
+      duration: 5000
+    })
+  }).catch(error => {
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: `Failed to update name: ${error.data.message}`,
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
+}
+
+async function updateTitle(resourceId: string, title: string) {
+  await $fetch('/api/v3/resources/title', {
+    method: 'POST',
+    body: {
+      id: resourceId,
+      title: title
+    }
+  }).then(() => {
+    infoSelection.value.title = title
+    titleEditMode.value = false
+    toast({
+      description: h('div',
+          {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
+          [
+            h(IconCheck, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
+            h('span',
+                {class: 'text-fuchsia-50'},
+                ['Title successfully updated.'])
+          ]),
+      duration: 5000
+    })
+  }).catch(error => {
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: `Failed to update title: ${error.data.message}`,
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
+}
+
+async function updateDescription(resourceId: string, description: string) {
+  await $fetch('/api/v3/resources/description', {
+    method: 'POST',
+    body: {
+      id: resourceId,
+      description: description
+    }
+  }).then(() => {
+    infoSelection.value.description = description
+    descriptionEditMode.value = false
+    toast({
+      description: h('div',
+          {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
+          [
+            h(IconCheck, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
+            h('span',
+                {class: 'text-fuchsia-50'},
+                ['Description successfully updated.'])
+          ]),
+      duration: 5000
+    })
+  }).catch(error => {
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: `Failed to update description: ${error.data.message}`,
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
+}
+</script>
+<template>
+  <div class="flex flex-col h-full w-full">
+    <!-- Header -->
+    <div class="flex p-4 h-14 items-center justify-between px-6 bg-transparent border-b border-aruna-text/50">
+      <nav aria-label="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbList class="font-bold text-aruna-text-accent">
+            <BreadcrumbItem @click="navigateBack('root')"
+                            class="hover:cursor-pointer">
+              Your Projects
+            </BreadcrumbItem>
+            <div v-for="resource in currentHierarchy"
+                 class="flex items-center justify-center gap-2.5">
+              <BreadcrumbSeparator/>
+              <BreadcrumbItem v-if="resource.variant !== ResourceVariant.Object"
+                              @click="navigateBack(resource.id)"
+                              class="hover:cursor-pointer">
+                {{ !resource.deleted ? resource.name : 'DELETED' }}
+              </BreadcrumbItem>
+              <BreadcrumbItem v-else>
+                {{ !resource.deleted ? resource.name : 'DELETED' }}
+              </BreadcrumbItem>
+            </div>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </nav>
+
+      <!-- Action Buttons -->
+      <div class="flex items-center gap-4">
+        <!--<Select v-model:model-value="pageSize">-->
+        <Select @update:modelValue="(v) => pageSize = parseInt(v)" :default-value="3">
+          <SelectTrigger class="w-[180px]">
+            <SelectValue>Page size: {{ pageSize }}</SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Page Size</SelectLabel>
+              <SelectItem v-for="size in ['3','5','10','15','25','50','100']" :value="size">{{ size }}</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
+        <Button key="create"
+                @click="emitTabSwitch('ResourceCreation')"
+                class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          <IconPlus class="h-4 w-4 mr-2"/>
+          Create
+        </Button>
+      </div>
+      <!-- End Action Buttons -->
+    </div>
+    <!-- End Header -->
+
+    <!-- Pagination -->
+    <div class="my-2 flex">
+      <Pagination v-if="currentHierarchy.length > 0 && totalHits > pageSize"
+                  v-slot="{ page }"
+                  :total="totalHits"
+                  :items-per-page="pageSize"
+                  :sibling-count="1"
+                  :default-page="1"
+                  show-edges>
+        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+          <PaginationFirst class="w-8 h-8 p-0 rounded-sm border-aruna-text bg-aruna-bg"/>
+          <PaginationPrev class="w-8 h-8 p-0 rounded-sm border-aruna-text bg-aruna-bg"/>
+
+          <template v-for="(item, index) in items">
+            <PaginationListItem v-if="item.type === 'page'"
+                                :key="index"
+                                :value="item.value"
+                                class="rounded-sm"
+                                as-child>
+              <Button class="w-9 h-9 p-0"
+                      :variant="item.value === page ? 'default' : 'outline'"
+                      @click="currentPage = item.value">
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index"/>
+          </template>
+
+          <PaginationNext/>
+          <PaginationLast/>
+        </PaginationList>
+      </Pagination>
+    </div>
+    <!-- End Pagination -->
+
+    <ResizablePanelGroup id="file-explorer-list"
+                         :direction="checkDirection()"
+                         class="h-full">
+      <ResizablePanel>
+        <!-- Flexbox Resource Display -->
+        <div class="flex flex-row flex-wrap content-start items-start justify-start gap-6 ms-4 my-4">
+          <Card v-for="resource in displayedResources"
+                class="rounded-sm border-aruna-text/50 flex flex-col items-center justify-center min-w-[200px] max-w-[300px] h-fit">
+            <CardContent class="p-0 flex flex-col items-center w-full">
+              <div class="w-full flex gap-x-2">
+                <div class="group flex flex-col grow py-4 ps-4 items-center justify-center"
+                     @dblclick="navigateForward(resource)">
+                  <div class="flex h-fit w-full items-center justify-center">
+                    <IconWorld v-if="resource.variant === ResourceVariant.Project"
+                               :class="{'text-destructive group-hover:text-destructive': resource.deleted}"
+                               class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+                    <IconFolder v-else-if="resource.variant === ResourceVariant.Folder"
+                                :class="{'text-destructive group-hover:text-destructive': resource.deleted}"
+                                class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+                    <IconFile v-else-if="resource.variant === ResourceVariant.Object"
+                              :class="{'text-destructive group-hover:text-destructive': resource.deleted}"
+                              class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+                  </div>
+                  <div v-if="!resource.deleted" class="max-w-52 truncate overflow-ellipsis">
+                    {{ resource.title ? resource.title : resource.name }}
+                  </div>
+                  <div v-else class="text-destructive">DELETED</div>
+                  <span v-if="resource.variant === ResourceVariant.Object" class="text-aruna-text">
+                    {{ `Size: ${formatBytes(resource.content_len)}` }}
+                  </span>
+                  <span v-else class="text-aruna-text">
+                    {{ `Children: ${resource.children.length}` }}
+                  </span>
+                </div>
+                <div class="flex flex-col justify-between border-l text-aruna-text">
+                  <IconInfoCircle @click="openInfo(resource)"
+                                  class="m-2 hover:cursor-pointer hover:text-aruna-highlight"/>
+                  <IconFolderPlus class="m-2 hover:cursor-pointer hover:text-aruna-highlight"/>
+                  <IconFolderSymlink @click="navigateForward(resource)"
+                                     class="m-2 hover:cursor-pointer hover:text-aruna-highlight"/>
+
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <!-- Dropbox Card -->
+          <Card v-if="currentHierarchy.length > 0"
+                class="min-w-[200px] py-4 px-2 h-fit flex items-center justify-center rounded-sm border border-dashed border-aruna-highlight transition-all ease-in-out delay-50 duration-250"
+                :class="{'bg-aruna-highlight/25': isOverDropZone}"
+                ref="dropZoneRef">
+            <CardContent class="py-0">
+              <div class="flex flex-col gap-y-6 items-center justify-center text-aruna-highlight">
+                <IconUpload class="h-12 w-12"/>
+                Drop your file here
+              </div>
+            </CardContent>
+          </Card>
+          <!-- End Dropbox Card -->
+        </div>
+        <!-- End Flexbox Resource Display -->
+
+        <!-- No resources display -->
+        <div v-if="loadedResources && loadedResources.length <= 0"
+             class="m-4 p-4 w-fit mx-auto flex flex-1 items-center justify-center rounded-md border border-dashed border-slate-500 shadow-sm">
+          <div class="flex flex-col items-center gap-1 text-center">
+            <h3 class="text-2xl font-bold tracking-tight">
+              You do not have created any resources yet.
+            </h3>
+            <p class="text-sm text-muted-foreground">
+              Start your exciting Aruna journey with the creation of your first resource.
+            </p>
+
+            <Button @click="emitTabSwitch('ResourceCreation')"
+                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary-foreground shadow h-9 px-4 py-2 mt-4 bg-aruna-800 hover:bg-aruna-700 dark:bg-aruna-700 dark:hover:bg-aruna-600">
+              Create Resource
+            </Button>
+          </div>
+        </div>
+        <!-- End no resources display -->
+      </ResizablePanel>
+      <ResizableHandle v-if="infoOpen" id="file-explorer-handle" class="mt-2" with-handle/>
+      <ResizablePanel v-if="infoOpen" id="file-explorer-sidebar"
+                      :default-size="25"
+                      :min-size="25"
+                      :max-size="50">
+        <!-- Flexbox file meta display -->
+        <div style="transition-behavior: allow-discrete;"
+             :class="{'visible flex translate-x-0 ' : infoOpen, 'invisible hidden translate-x-full' : !infoOpen}"
+             class="transition-all duration-500 flex-col h-full mt-2 p-4 border-l border-aruna-text/50 gap-y-4 justify-between">
+
+          <div v-if="fileUpload" class="gap-y-4 flex flex-col">
+            <h2 class="text-2xl">Upload file</h2>
+            <Separator class="bg-aruna-text/50 my-4"/>
+
+            <Table>
+              <TableBody>
+                <TableRow>
+                  <TableCell class="w-[1%]">Name:</TableCell>
+                  <TableCell class="text-aruna-text">{{ fileUpload.name }}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>Size:</TableCell>
+                  <TableCell class="text-aruna-text">{{ formatBytes(fileUpload.size) }}</TableCell>
+                </TableRow>
+                <TableRow v-if="fileUpload.type">
+                  <TableCell>Type:</TableCell>
+                  <TableCell class="text-aruna-text">{{ fileUpload.type }}</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+
+            <Separator class="bg-aruna-text/50 my-4"/>
+
+            <Label for="description">Description</Label>
+            <Textarea id="description"
+                      :rows="3"
+                      placeholder="Here you can enter a description of your resource"
+                      class="py-3 px-4 w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                   focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                   focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                   disabled:opacity-50 disabled:pointer-events-none"/>
+
+            <div class="flex sm:flex-col w-full gap-y-1">
+              <KeyValueDialog :initial-open="false"
+                              :with-button="true"
+                              button-css="w-fit"
+                              button-label="Add Label"
+                              @add-key-value="(v: KeyValue) => fileLabels.set(v.key, v)"/>
+
+              <div class="p-1 gap-2 flex flex-wrap items-center">
+                <div v-for="[key, label] in fileLabels" class="h-fit flex justify-center">
+                  <span class="flex justify-center items-center rounded-s-sm border border-aruna-highlight">
+                    <IconLock v-if="label.locked" class="m-0.5 flex-shrink-0 size-5"/>
+                    <IconLockOpen2 v-else class="m-0.5 flex-shrink-0 size-5"/>
+                  </span>
+                  <span class="flex justify-center px-1 items-center border border-aruna-highlight text-sm text-aruna-highlight">
+                        {{ key }}
+                      </span>
+                  <span v-if="label.value"
+                        class="flex justify-center px-1 items-center max-w-48 text-sm truncate overflow-ellipsis border border-aruna-highlight bg-aruna-highlight text-aruna-text-accent">
+                    {{ label.value }}
+                  </span>
+                  <span class="group flex justify-center items-center rounded-e-sm border border-aruna-highlight hover:cursor-pointer">
+                    <Button variant="ghost"
+                            class="h-fit px-2 py-0 hover:bg-transparent"
+                            @click="fileLabels.delete(label.key)">
+                  <IconX class="flex-shrink-0 size-4 text-aruna-text group-hover:text-destructive"/>
+                </Button>
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex sm:flex-col w-fit gap-y-4">
+              <Label for="authors">Authors</Label>
+              <AuthorDialog :initial-open="false"
+                            :with-button="true"
+                            button-css="w-fit"
+                            @add-author="(v: Author) => fileAuthors.set(`${v.email}`, v)"/>
+
+              <ul v-if="fileAuthors.size > 0" class="ps-6 list-disc">
+                <li v-for="[key, author] in fileAuthors" class="text-aruna-text">
+                  {{ author.first_name }} {{ author.last_name }} | {{ author.email }}
+                </li>
+              </ul>
+            </div>
+
+            <Label for="license">License</Label>
+            <Select :default-value="props.licenses[0].id"
+                    @update:model-value="(v) => fileLicense = v">
+              <SelectTrigger class="bg-aruna-muted w-full max-w-[450px]">
+                <SelectValue placeholder="Select a license for your resource"/>
+              </SelectTrigger>
+              <SelectContent class="bg-aruna-bg/90 truncate overflow-ellipsis">
+                <SelectGroup>
+                  <SelectItem v-for="license in props.licenses" :value="license.id"
+                              class="hover:bg-aruna-fg">
+                    {{ license.name }}
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div v-else-if="infoSelection" class="gap-y-4">
+            <div class="flex items-center justify-between">
+              <div class="flex w-full items-center">
+                <!-- Locked / Unlocked -->
+                <TooltipProvider :delay-duration="500">
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <IconLock v-if="infoSelection?.locked" class="me-4 text-destructive"/>
+                      <IconLockOpen2 v-else class="me-4 text-aruna-highlight"/>
+                    </TooltipTrigger>
+                    <TooltipContent class="rounded-none text-aruna-highlight bg-aruna-muted border border-aruna-text/50">
+                      <span v-if="infoSelection?.locked">This resource is locked and cannot be edited.</span>
+                      <span v-else>This resource is still editable.</span>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+                <!-- End Locked / Unlocked -->
+                <!-- Name / Title -->
+                <EditableLabel v-model:edit-mode="titleEditMode"
+                               @dblclick="titleEditMode = true"
+                               @updated-value="updateTitle"
+                               :resourceId="infoSelection?.id"
+                               :text="infoSelection?.title || 'Title not available'"
+                               text-css="text-2xl text-aruna-text-accent"
+                               :multiline="false"/>
+                <!--<h2 class="ms-4 text-2xl">{{ infoSelection?.title || 'Title not available' }}</h2>-->
+                <!-- End Name / Title -->
+              </div>
+              <!-- Link to resource landing page -->
+              <NuxtLink :to="`/objects/${infoSelection?.id}`" target="_blank">
+                <IconExternalLink class="ms-4 flex-shrink-0 text-aruna-text-accent hover:text-aruna-highlight"/>
+              </NuxtLink>
+              <!-- End Link to resource landing page -->
+            </div>
+            <Separator class="bg-aruna-text/50 mt-6"/>
+            <!--<span class="text-sm font-medium leading-6 text-aruna-text-accent">Labels:</span>-->
+            <ScrollArea>
+              <div class="flex p-4 ps-0 space-x-4 w-max whitespace-nowrap truncate">
+                <div v-for="label in infoSelection?.labels"
+                     class="flex flex-row my-1 last:me-0">
+                  <span :class="{'rounded-md': label.value === '' || label.value === undefined,
+                                 'rounded-l-md': label.value && label.value.length > 0}"
+                        class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1 px-2 rounded-l-md text-aruna-highlight border border-aruna-highlight">
+                    {{ label.key }}
+                  </span>
+                  <span v-if="label.value"
+                        class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1 px-2 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
+                    {{ label.value }}
+                  </span>
+                </div>
+              </div>
+              <ScrollBar orientation="horizontal"/>
+            </ScrollArea>
+
+            <Table class="table-auto">
+              <TableBody class="">
+                <TableRow>
+                  <TableCell class="w-[125px] text-sm font-medium leading-6 text-aruna-text-accent">
+                    Id:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.id || '' }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Name:</TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    <EditableLabel v-model:edit-mode="nameEditMode"
+                                   @dblclick="nameEditMode = true"
+                                   @updated-value="updateName"
+                                   :resourceId="infoSelection?.id"
+                                   :text="infoSelection?.name"
+                                   :multiline="false"/>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="align-text-top text-sm font-medium leading-6 text-aruna-text-accent">
+                    Description:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    <EditableLabel v-model:edit-mode="descriptionEditMode"
+                                   @dblclick="descriptionEditMode = true"
+                                   @updated-value="updateDescription"
+                                   :resourceId="infoSelection?.id"
+                                   :text="infoSelection?.description"
+                                   :multiline="true"/>
+                  </TableCell>
+                </TableRow>
+                <TableRow v-if="infoSelection?.variant === ResourceVariant.Object">
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Size:</TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ formatBytes(infoSelection?.content_len || 0) }}
+                  </TableCell>
+                </TableRow>
+                <TableRow v-else>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">
+                    Children:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.count || 0 }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">
+                    Created At:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ formatDate(infoSelection?.created_at || 'N/A') }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">
+                    Last Modified:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ formatDate(infoSelection?.last_modified || 'N/A') }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">
+                    License:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ licenseMap.get(infoSelection?.license_id)?.name || 'N/A' }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm align-text-top font-medium leading-6 text-aruna-text-accent">
+                    Locations:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    <ul v-if="infoSelection?.location.length > 0" class="list-disc">
+                      <li class="flex gap-x-2" v-for="loc in infoSelection?.location">
+                        <component :is="StatusMap[loc.status as keyof typeof StatusMap]"
+                                   :class="{'text-aruna-text-accent animate-spin': loc.status === SyncingStatus.Pending,
+                                          'text-aruna-text-accent': loc.status === SyncingStatus.Running,
+                                          'text-green-600': loc.status === SyncingStatus.Finished,
+                                          'text-destructive': loc.status === SyncingStatus.Error}"/>
+                        {{ loc.endpoint_id }}
+                      </li>
+                    </ul>
+                    <span v-else>N/A</span>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Visibility:</TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.visibility || '' }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Deleted:</TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.deleted }}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+
+          <div class="flex justify-between">
+            <div class="flex gap-x-2">
+              <Button v-if="fileUpload"
+                      variant="outline"
+                      @click="submitUpload"
+                      class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+                Upload
+              </Button>
+              <Button variant="outline"
+                      @click="closeInfo"
+                      class="inline-flex w-fit bg-transparent text-aruna-text border border-aruna-text hover:bg-aruna-h hover:text-aruna-text-accent hover:border-aruna-text-accent">
+                Close
+              </Button>
+            </div>
+            <Button v-if="infoSelection"
+                    variant="outline"
+                    @click="deleteResource(infoSelection)"
+                    class="inline-flex w-fit bg-transparent text-destructive border border-destructive hover:bg-destructive/25 hover:text-destructive">
+              Delete
+            </Button>
+          </div>
+
+        </div>
+        <!-- End Flexbox file meta display -->
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </div>
+</template>
diff --git a/components/custom-ui/dashboard/OverviewStats.vue b/components/custom-ui/dashboard/OverviewStats.vue
new file mode 100644
index 00000000..7d41cf2e
--- /dev/null
+++ b/components/custom-ui/dashboard/OverviewStats.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import {IconActivity} from '@tabler/icons-vue'
+
+/* ----- PROPERTIES ----- */
+interface OverviewStatsProps {
+  projects?: number
+  realms?: number
+  resources?: number
+  storage?: number
+  users?: number
+}
+const {projects, realms, resources, storage, users} = defineProps<OverviewStatsProps>()
+/* ----- END PROPERTIES ----- */
+
+function emitTabSwitch(tabId: string) {
+  EventBus.emit('setTab', tabId);
+}
+</script>
+
+<template>
+  <!--<div class="flex flex-1 items-center justify-center rounded-md border border-dashed border-slate-500 shadow-sm">-->
+  <div class="mx-4 mt-4 flex flex-1 flex-col">
+    <div class="flex flex-col my-6">
+      <div class="grid gap-4 p-4 md:grid-cols-2 md:gap-8 lg:grid-cols-5">
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total number of realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ realms || '-' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              Nothing changed since last month
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total storage left in realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ storage ? formatBytes(+storage) : 'N/A' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              -12.4% from last month
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total projects in realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ projects || '-' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +2 more than last month
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total resources in realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ resources || '-' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +256 more than last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total users in realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ users || '-' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +4 from last month
+            </p>
+          </CardContent>
+        </Card>
+
+      </div>
+    </div>
+
+    <hr class="m-4"/>
+
+    <div class="flex items-center justify-center gap-y-6 gap-x-1">
+      Wanna create or join a group? Take a look at your
+      <span class="font-bold text-aruna-highlight hover:text-aruna-highlight/80 hover:cursor-pointer"
+            @click="emitTabSwitch('Profile')">
+        profile
+      </span>.
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/RealmSwitcher.vue b/components/custom-ui/dashboard/RealmSwitcher.vue
new file mode 100644
index 00000000..b7c660dd
--- /dev/null
+++ b/components/custom-ui/dashboard/RealmSwitcher.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import {IconCaretUpDown, IconCheck, IconCirclePlus} from "@tabler/icons-vue";
+import {cn} from '@/utils/shadcn'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/components/ui/avatar'
+import {Button} from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from '@/components/ui/command'
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "~/components/ui/form";
+import {Input} from '@/components/ui/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import {useToast} from '@/components/ui/toast/use-toast'
+
+import type {Realm} from "~/composables/api_wrapper";
+import {toTypedSchema} from "@vee-validate/zod";
+import {z} from "zod";
+import {useForm} from "vee-validate";
+
+const {toast} = useToast()
+
+/* ----- PROPERTIES ----- */
+interface RealmSwitcherProps {
+  realms: Realm[] | undefined
+}
+
+const props = defineProps<RealmSwitcherProps>()
+const realms = toRef(() => props.realms)
+const selected = defineModel<Realm>('realmSelection', {
+  default: {
+    id: '',
+    name: 'Not a member of any realm',
+    tag: 'placeholder',
+    description: '',
+    deleted: false
+  }
+})
+watch(realms, () => {
+  console.log('[RealmSwitcher] Updated realms:', realms.value)
+  if (realms.value && realms.value.length > 0 && selectedRealm.value.tag === 'placeholder')
+    selectedRealm.value = realms.value[0]
+})
+/* ----- END PROPERTIES ----- */
+
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits<{
+  'add-realm': [realm: Realm]
+}>()
+
+function addRealm(realm: Realm) {
+  //console.info('[RealmSwitcher]', `Emitted realm add: ${realm.name}`)
+  emit('add-realm', realm)
+}
+
+function emitRealmSwitch() {
+  //console.info('[RealmSwitcher]', `Emitted realm switch to: ${selectedRealm.value.name}`)
+  EventBus.emit('switchRealm', selectedRealm.value.id)
+}
+
+/* ----- END EVENT EMITS ----- */
+
+const open = ref(false)
+const showNewRealmDialog = ref(false)
+const selectedRealm = ref<Realm>(realms.value && realms.value.length > 0 ? realms.value[0] : {
+  id: '',
+  name: 'Not a member of any realm',
+  tag: 'placeholder',
+  description: '',
+  deleted: false
+})
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(
+    z.object({
+      name: z.string({required_error: 'Name is required.'}).min(5).max(256),
+      tag: z.string({required_error: 'Tag is required.'}).min(1).max(25),
+      description: z.string().optional(),
+    })
+)
+const form = useForm({
+  validationSchema: formSchema,
+})
+const onSubmit = form.handleSubmit(async values => {
+  await $fetch('/api/v3/realm', {
+    method: 'POST',
+    body: {
+      name: values.name,
+      tag: values.tag,
+      description: values.description
+    }
+  }).then(response => {
+    if (response.realm) {
+      addRealm(response.realm)
+      toast({
+        title: 'Info',
+        description: realms.value && realms.value.length > 0 ?
+            'Realm creation succeeded.' :
+            `Realm creation succeeded. Switched realm to: ${response.realm.name}`
+      })
+      showNewRealmDialog.value = false
+    } else {
+      toast({
+        title: 'Error',
+        description: 'Realm creation response is empty. This should not be possible :/',
+        variant: 'destructive',
+        duration: 10000,
+      })
+    }
+  }).catch(error => {
+    console.error('[Realm Switcher]', error)
+    toast({
+      title: 'Error',
+      description: 'Realm creation failed. Please try again later.',
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
+})
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="showNewRealmDialog">
+    <Popover v-model:open="open">
+      <PopoverTrigger as-child>
+        <Button variant="outline"
+                role="combobox"
+                aria-expanded="open"
+                aria-label="Select a team"
+                :class="cn('w-[300px] justify-between hover:bg-[#1F375E]', $attrs.class ?? '')">
+          <Avatar class="mr-2 h-5 w-5">
+            <AvatarImage src="/imgs/aruna_icon.webp"
+                         :alt="selectedRealm.name"/>
+            <AvatarFallback>SC</AvatarFallback>
+          </Avatar>
+          {{ selectedRealm.name }}
+          <IconCaretUpDown class="ml-auto h-4 w-4 shrink-0 opacity-50"/>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-[300px] p-1">
+        <Command :filter-function="(list: Realm[], term: string) => list.filter(i => i.name?.toLowerCase()?.includes(term)) ">
+          <CommandList>
+            <CommandInput placeholder="Search realm..." class="my-1 focus:ring-aruna-800 focus:border-0"/>
+            <CommandEmpty>No realm found.</CommandEmpty>
+            <CommandGroup heading="Your Realms">
+              <CommandItem v-for="realm in realms"
+                           :key="realm.tag"
+                           :value="realm"
+                           class="text-sm"
+                           @select="() => {
+                             selectedRealm = realm
+                             selected = realm
+                             open = false
+                             emitRealmSwitch()
+                           }">
+                <Avatar class="mr-2 h-5 w-5">
+                  <AvatarImage src="/imgs/aruna_icon.webp"
+                               :alt="selectedRealm.name"/>
+                  <AvatarFallback>SC</AvatarFallback>
+                </Avatar>
+                {{ realm.name }}
+                <IconCheck :class="cn('ml-auto h-4 w-4',
+                             selectedRealm.tag === realm.tag
+                               ? 'opacity-100'
+                               : 'opacity-0',
+                  )"/>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+          <CommandSeparator/>
+          <CommandList>
+            <CommandGroup>
+              <DialogTrigger as-child>
+                <CommandItem value="create-realm"
+                             @select="() => {
+                               open = false
+                               showNewRealmDialog = true
+                             }">
+                  <IconCirclePlus class="mr-2 h-5 w-5"/>
+                  Create Realm
+                </CommandItem>
+              </DialogTrigger>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Create Realm</DialogTitle>
+        <DialogDescription>
+          Add a new realm to manage your data products and data endpoints.
+        </DialogDescription>
+        <Separator class="my-4 bg-aruna-text/50"/>
+      </DialogHeader>
+
+      <form id="dialogForm" @submit="onSubmit" class="space-y-4">
+        <FormField v-slot="{componentField}" name="name">
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input type="text"
+                     placeholder="A name for your realm"
+                     v-bind="componentField"
+                     class="mt-0"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="tag">
+          <FormItem>
+            <FormLabel>Tag</FormLabel>
+            <FormControl>
+              <Input type="text"
+                     placeholder="A short tag for your realm"
+                     v-bind="componentField"
+                     class="mt-0"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="description">
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl>
+              <Textarea v-bind="componentField"
+                        :rows="5"
+                        placeholder="A concise description of your realm."/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+      </form>
+      <DialogFooter>
+        <Button variant="outline"
+                class="text-aruna-text border border-aruna-text"
+                @click="showNewRealmDialog = false">
+          Cancel
+        </Button>
+        <Button type="submit"
+                form="dialogForm"
+                class="bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-white">
+          Continue
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/Realms.vue b/components/custom-ui/dashboard/Realms.vue
new file mode 100644
index 00000000..f849ace6
--- /dev/null
+++ b/components/custom-ui/dashboard/Realms.vue
@@ -0,0 +1,578 @@
+<script setup lang="ts">
+import {IconBucket, IconCaretUpDown, IconCubePlus, IconProgressCheck, IconServer, IconTrophy} from "@tabler/icons-vue";
+import {VisGraph, VisSingleContainer, VisTooltip} from '@unovis/vue'
+import {Graph, GraphLayoutType, GraphNodeShape, type GraphPanelConfig, Position, TrimMode} from '@unovis/ts'
+import {computed, ref} from "vue"
+import {addYears} from "date-fns"
+import ComponentDialog from "~/components/custom-ui/dialog/ComponentDialog.vue";
+import RealmComponentDialog from "~/components/custom-ui/dialog/RealmComponentDialog.vue";
+
+/* ----- Deprecated imports ----- */
+import {useToast} from '~/components/ui/toast/use-toast'
+import type {
+  CreateS3CredentialsRequest,
+  CreateS3CredentialsResponse,
+  GetS3CredentialsFromUserResponse
+} from "~/composables/api_wrapper";
+import {ComponentType, Scope} from "~/types/aruna-v3-enums";
+
+const {toast} = useToast()
+/* ----- End Deprecated imports ----- */
+
+
+/* ----- PROPERTIES ----- */
+interface RealmsProps {
+  realms: Realm[]
+  selectedRealm: Realm
+}
+
+const props = defineProps<RealmsProps>()
+const realms = toRef(() => props.realms)
+const selectedRealm = toRef(() => props.selectedRealm)
+const currentRealm = ref<string | undefined>(undefined)
+/* ----- END PROPERTIES ----- */
+
+onActivated(async () => {
+  console.info('[Realms Component] Selected realm: ', selectedRealm.value)
+  await $fetch<GetRealmComponentsResponse>('/api/v3/components', {
+    query: {
+      id: selectedRealm.value.id
+    }
+  }).then(response => {
+    console.info('[Realms Component] Fetch components response:', response)
+    realmComponents.value = response.components
+    realmComponents.value.map(c => expandedRealms.value.add(JSON.parse(c.description).location))
+  })
+})
+
+const displayAllRealms = ref<boolean>(false)
+watch(displayAllRealms, (v) => console.info('[Realms Component] Display all realms:', v))
+
+const displayAsCards = ref<boolean>(false)
+watch(displayAsCards, (v) => console.info('[Realms Component] Display as cards:', v))
+
+
+const realmContext = ref<string | undefined>(undefined)
+const realmComponents = ref<v3Component[]>([]) //TODO: Integrate into realms
+const componentCredentials = ref<Map<string, SimpleCredentials>>(new Map())
+
+enum Status {
+  Aruna = 'aruna',
+  Healthy = 'healthy',
+  Warning = 'warning',
+  Inactive = 'inactive',
+  Alert = 'alert'
+}
+
+const StatusMap = {
+  //[Status.Aruna]: {color: '#005299', text: '&#xf00c;'},
+  [Status.Aruna]: {color: '#00a0cc', text: '&#xf00c;'},
+  [Status.Healthy]: {color: '#47e845', text: '&#xf00c;'},
+  [Status.Warning]: {color: '#ffc226', text: '&#xf071;'},
+  [Status.Inactive]: {color: '#dddddd', text: '&#xf00d;'},
+  [Status.Alert]: {color: '#f88080', text: '&#x21;'},
+}
+
+export type NodeDatum = {
+  id: string;
+  label: string;
+  site: string;
+  group: string;
+  subgroup: string;
+  shape: GraphNodeShape;
+  fill?: string,
+  icon?: string;
+  score?: number;
+  status?: string;
+  groupLabel?: string;
+  clickable?: boolean, //TODO: Rename to expandable
+  metaInfo?: v3Component;
+  children?: NodeDatum[];
+}
+
+export type LinkDatum = {
+  source: string;
+  target: string;
+  sourceGroup: string;
+  targetGroup: string;
+  status: Status;
+  showTraffic: boolean;
+}
+
+type LocationHack = {
+  location: string
+}
+
+type Site = {
+  root: NodeDatum
+  server: NodeDatum[]
+  data: NodeDatum[]
+  compute: NodeDatum[]
+}
+
+const expandedRealms = ref<Set<string>>(new Set())
+//const expandedRealms = ref<string[]>([]) //TODO: Rename to expandedSites
+watch(expandedRealms, () => console.info('[Realms Component] Expanded realms: ', expandedRealms), {deep: true})
+
+const graphData = computed(() => {
+  console.info('[Realms Component] Re-compute data for graph visualization with realm v3:', selectedRealm.value.name, realmComponents.value.length)
+  const sites: Map<string, Site> = new Map()
+  let serverIds: string[] = []
+  for (const component of realmComponents.value) {
+    // Parse and store location of component
+    const siteLocation: string = JSON.parse(component.description).location //TODO: Error handling
+    let site: Site | undefined = undefined
+    if (sites.has(siteLocation)) {
+      site = sites.get(siteLocation)
+    } else {
+      site = {
+        root: {
+          id: `${siteLocation}-root`,
+          site: siteLocation ? siteLocation : selectedRealm.value.tag,
+          shape: GraphNodeShape.Circle,
+          icon: '&#xf043;',
+          label: siteLocation,
+          group: siteLocation,
+          subgroup: siteLocation,
+          clickable: true,
+        } as NodeDatum,
+        server: [],
+        data: [],
+        compute: []
+      }
+      sites.set(siteLocation, site)
+    }
+
+    // Create child node from component and add to site
+    let node = {
+      id: component.id,
+      site: siteLocation,
+      group: siteLocation,
+      subgroup: `${siteLocation}-${component.component_type}`, //rc.component_type === ComponentType.Server ? `${group}-${rc.component_type}` : `${group}-sub`,
+      label: component.name,
+      shape: GraphNodeShape.Circle, //shape,
+      icon: '&#xf043;', //icon,
+      status: Status.Aruna,
+      score: 100,
+      //fill: '#007BC2', //TODO: Depends on type (?)
+      clickable: false, //c.component_type === ComponentType.Server,
+      metaInfo: component,
+    } as NodeDatum
+    switch (component.component_type) {
+      case ComponentType.Server:
+        node.shape = GraphNodeShape.Square
+        node.icon = '&#xf542;'
+        site?.server.push(node)
+        if (!serverIds.includes(component.id) && expandedRealms.value.has(siteLocation)) {
+          serverIds.push(component.id)
+        }
+        break
+      case ComponentType.Data:
+        node.shape = GraphNodeShape.Hexagon
+        node.icon = '&#xe4cf;'
+        site?.data.push(node)
+        break
+      case ComponentType.Compute:
+        node.shape = GraphNodeShape.Triangle
+        node.icon = '&#xe4e2;'
+        site?.compute.push(node)
+        break
+    }
+  }
+
+  // Collect nodes/links/panels depending on expanded sites
+  let nodes: NodeDatum[] = []
+  let links: LinkDatum[] = [] //TODO: Connect set of unique server ids
+  let panels: GraphPanelConfig[] = []
+
+  for (const [siteLocation, site] of sites) {
+    if (expandedRealms.value.has(siteLocation)) {
+      // Collect nodes in correct order
+      site.server.concat(site.data).concat(site.compute).forEach(n => nodes.push(n))
+      // Create links to server in locations
+      site.data.concat(site.compute).forEach(n => {
+        for (const s of site.server) {
+          links.push({
+            source: s.id,
+            target: n.id,
+            status: Status.Inactive,
+            showTraffic: false
+          } as LinkDatum)
+        }
+      })
+
+      // Create panel for site
+      panels.push({
+        nodes: site.server.concat(site.data).concat(site.compute).map(n => n.id) || [],
+        label: siteLocation,
+        borderWidth: 3,
+        padding: 25,
+        dashedOutline: true, //curr === nodes[0],
+        borderColor: '#00a0cc',
+        //fillColor: '#b4b5bb',
+        sideIconFontSize: '20px',
+        sideIconShape: GraphNodeShape.Square,
+        sideIconSymbol: '&#xf146;', //'&#xf043;',
+        sideIconShapeSize: 30,
+        sideIconSymbolColor: '#00a0cc',
+        sideIconShapeStroke: '#00a0cc'
+      })
+    } else {
+      nodes.push(site.root)
+      serverIds.push(site.root.id)
+    }
+  }
+
+  console.info('[Realms Component] Server Ids: ', serverIds)
+
+  // Connect server instances
+  if (serverIds.length > 1) {
+    for (const[i, id] of serverIds.entries()) {
+      if (i < serverIds.length - 1) {
+        links.push({
+          source: id,
+          target: serverIds[i+1],
+          status: Status.Healthy,
+          showTraffic: true
+        } as LinkDatum)
+      }
+    }
+  }
+
+  // Return realm visualization data
+  return {
+    data: {
+      nodes: nodes,
+      links: links
+    },
+    panels: panels,
+    panelOrder: [] //TODO: From largest to smallest?
+  }
+})
+
+watch(selectedRealm, async () => {
+  console.info('[Realms Component] Selected realm changed')
+  await $fetch<GetRealmComponentsResponse>('/api/v3/components', {
+    query: {
+      id: selectedRealm.value.id
+    }
+  }).then(response => {
+    console.info('[Realms Component] Fetch components response:', response)
+    realmComponents.value = response.components
+  })
+})
+
+function splitDescriptionAfter(description: string, words: number = 20) {
+  const parts = description.split(' ')
+  const teaser = parts.slice(0, words).join(' ')
+  const rest = parts.slice(words, parts.length - 1).join(' ')
+  return [teaser, rest]
+}
+
+const disableTooltips = ref<boolean>(false)
+const container = document.body
+watch(disableTooltips, () => console.log('[Disabled Tooltips]', disableTooltips.value))
+
+function openComponentCreation(realmId: string) {
+  currentRealm.value = realmId
+  componentDialogOpen.value = true
+}
+
+function addComponent(component: v3Component, realmId: string) {
+  toast({
+    title: 'Event Received',
+    description: `Received "AddComponent" event: ${component.id}`
+  })
+}
+
+async function createS3Credentials(component: v3Component) {
+  const request = {
+    component_id: component.id,
+    name: `${component.name} S3 credentials`,
+    expires_at: addYears(new Date(), 1).toISOString(), // Current default lifetime: 1 year
+    realm_id: selectedRealm.value.id,
+    group_id: '01JGXXBK17Q7A83WBQ45Q5GGW1', //TODO: ... ???
+    scope: Scope.Personal
+  } as CreateS3CredentialsRequest
+
+  await $fetch<CreateS3CredentialsResponse>('/api/v3/credentials', {
+    method: 'POST',
+    body: request
+  }).then(response => {
+    console.info('[CreateS3Credentials Client] Response', response)
+    toast({
+      title: 'Successfully created credentials:',
+      description: `Access Key Id: ${response.access_key} | Secret Key: ${response.secret_key}`
+    })
+  })
+}
+
+async function getS3Credentials(component_id: string) {
+  //TODO: Fetch all on activate and distribute?
+  await $fetch<GetS3CredentialsFromUserResponse>('/api/v3/credentials')
+      .then(response => {
+        console.info('[GetS3CredentialsFromUser Client] Response', response)
+      })
+}
+
+/* -------------------------------------------------------------------------------------------- */
+
+// Hover tooltips for nodes
+const triggers = computed(() => {
+  return {
+    [Graph.selectors.node]: (n: NodeDatum) => {
+      if (n.metaInfo) {
+        return `<div id="${n.id}" class="p-4 bg-[#080d1f] rounded-sm border-2 border-gray-400 text-aruna-700">
+                  <h3 class="font-bold text-aruna-700">Meta Info</h3>
+                  <dl class="divide-y divide-gray-100">
+                    <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                      <dt class="text-sm font-medium leading-6 text-gray-400">Name</dt>
+                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">${n.metaInfo.name}
+                      </dd>
+                    </div>
+                    <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                      <dt class="text-sm font-medium 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">${n.metaInfo.id}</dd>
+                    </div>
+                    <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                      <dt class="text-sm font-medium leading-6 text-gray-400">Variant</dt>
+                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">${n.metaInfo.component_type}</dd>
+                    </div>
+                  </dl>
+                </div>`
+      }
+      return null
+    },
+  }
+})
+const detailDialogOpen = ref<boolean>(false)
+
+const clickedComponent: Ref<v3Component | undefined> = ref(undefined)
+const componentDialogOpen = ref<boolean>(false)
+// Graph config
+const graphConfig = computed(() => ({
+  events: {
+    [Graph.selectors.node]: {
+      click: (node: NodeDatum) => {
+        console.info('[Realms Component] Clicked node:', node.label)
+        if (node.clickable) {
+          expandedRealms.value.add(node.site)
+          console.info('Realms Component] Expanded: ', expandedRealms.value)
+        } else if (node.metaInfo) {
+          clickedComponent.value = node.metaInfo
+          detailDialogOpen.value = true
+        }
+      }
+    },
+    [Graph.selectors.panelSideIcon]: {
+      click: (panel: GraphPanelConfig) => {
+        console.info('[Realms Component] Try to minimize panel:', panel.label)
+        expandedRealms.value.delete(panel.label)
+        console.info('[Realms Component] Expanded: ', expandedRealms.value)
+      }
+    }
+  },
+  nodeLabelTrim: false,
+  nodeLabelTrimLength: 100,
+  nodeLabelTrimMode: TrimMode.End,
+  nodeGaugeValue: (n: NodeDatum) => n.score,
+  nodeGaugeFill: (n: NodeDatum) => StatusMap[n.status]?.color,
+  nodeIconSize: 25,
+  nodeShape: (n: NodeDatum) => n.shape,
+  nodeFill: (n: NodeDatum) => n.fill,
+  /*
+  nodeSideLabels: (n: NodeDatum) => [{
+    radius: 8,
+    fontSize: 4,
+    ...(n.children ? {text: n.children.length} : StatusMap[n.status]),
+  }],
+  */
+  nodeSize: (n: NodeDatum) => 75, //n.children ? 75 : 50,
+  nodeSubLabel: (n: NodeDatum) => n.score && `Health: ${n.score}/100`,
+  nodeSubLabelTrim: false,
+  nodeSubLabelTrimLength: 100,
+  nodeSubLabelTrimMode: TrimMode.End,
+  nodeStrokeWidth: 3,
+  linkFlow: (l: LinkDatum) => l.showTraffic,
+  linkStroke: (l: LinkDatum) => StatusMap[l.status]?.color || null,
+  linkBandWidth: (l: LinkDatum) => l.showTraffic ? 12 : 6,
+}))
+
+
+const expandedDescription = ref<Set<string>>(new Set())
+</script>
+
+<template>
+  <ComponentDialog :initial-open="detailDialogOpen"
+                   :with-button="false"
+                   :component="clickedComponent"
+                   @update:open="detailDialogOpen = false"/>
+
+  <RealmComponentDialog :initial-open="componentDialogOpen"
+                        :with-button="false"
+                        :realm-id="currentRealm"
+                        @add-component="addComponent"
+                        @update:open="componentDialogOpen = false"/>
+
+  <div class="mx-4 mt-4 h-full flex flex-col">
+    <div class="flex flex-row items-center justify-center max-w-screen-2xl lg:max-w-[80vw]">
+      <Table>
+        <TableCaption>A list of your active realms</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead class="text-lg">Realm</TableHead>
+            <TableHead class="text-lg">Description</TableHead>
+            <TableHead class="text-lg">Id</TableHead>
+            <TableHead class="text-lg">Tag</TableHead>
+            <TableHead class="text-lg text-center">Deleted</TableHead>
+            <TableHead class="text-lg text-center">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="realm in realms" :key="realm.name">
+            <TableCell class="font-bold">{{ realm.name }}</TableCell>
+            <TableCell>
+              <div v-if="realm.description && realm.description.length > 256">
+                <div class="flex justify-between items-center">
+                  <div>
+                    {{ splitDescriptionAfter(realm.description, 20)[0] }}
+                    <Transition name="fade" mode="out-in">
+                      <span key="closed" v-if="!expandedDescription.has(realm.id)">...</span>
+                      <span key="opened" v-else>{{ splitDescriptionAfter(realm.description, 20)[1] }}</span>
+                    </Transition>
+                  </div>
+                  <Button variant="ghost"
+                          class="p-0 text-aruna-highlight size-4"
+                          @click="expandedDescription.has(realm.id) ? expandedDescription.delete(realm.id) : expandedDescription.add(realm.id)">
+                    <IconCaretUpDown/>
+                  </Button>
+                </div>
+              </div>
+              <div v-else>
+                {{ realm.description }}
+              </div>
+            </TableCell>
+            <TableCell class="font-medium">{{ realm.id }}</TableCell>
+            <TableCell>{{ realm.tag }}</TableCell>
+            <TableCell class="text-center">{{ realm.deleted }}</TableCell>
+            <TableCell class="h-full flex justify-center items-center text-center">
+              <IconCubePlus title="Create a new realm component"
+                            class="text-aruna-text-accent hover:text-aruna-highlight hover:cursor-pointer"
+                            @click="openComponentCreation(realm.id)"/>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+
+    <Separator class="my-6"/>
+
+    <div class="flex flex-col flex-grow">
+      <div class="flex gap-x-12 items-center mb-8">
+        <h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-aruna-text-accent">
+          Realm Components of <span class="text-aruna-highlight">{{ selectedRealm.name }}</span>
+        </h2>
+
+        <div class="flex items-center gap-x-2">
+          <Switch v-model:checked="displayAsCards"/> Display as Cards
+        </div>
+      </div>
+
+      <div v-if="displayAsCards" class="h-full flex gap-6 flex-wrap">
+        <Card v-for="component in realmComponents.sort((a: v3Component, b: v3Component) => a.id.localeCompare(b.id))"
+              class="w-fit h-fit border-aruna-text/50">
+          <CardHeader>
+            <CardTitle class="relative flex justify-between">
+              <span>{{ component.name }}</span>
+              <TooltipProvider :delay-duration="50">
+                <Tooltip>
+                  <TooltipTrigger>
+                    <IconServer v-if="component.component_type === ComponentType.Server"
+                                class="absolute top-0 right-0 size-10 text-aruna-highlight"/>
+                    <IconBucket v-if="component.component_type === ComponentType.Data"
+                                class="absolute top-0 right-0 size-10 text-aruna-highlight"/>
+                    <IconProgressCheck v-if="component.component_type === ComponentType.Compute"
+                                       class="absolute top-0 right-0 size-10 text-aruna-highlight"/>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p v-if="component.component_type === ComponentType.Server">Aruna Server</p>
+                    <p v-if="component.component_type === ComponentType.Data">Aruna DataProxy</p>
+                    <p v-if="component.component_type === ComponentType.Compute">Compute Cluster</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </CardTitle>
+            <CardDescription class="flex flex-col gap-y-2">
+              <span>{{ component.id }}</span>
+              <span>{{ component.description }}</span>
+            </CardDescription>
+          </CardHeader>
+          <Separator/>
+          <CardContent class="p-6 flex flex-col gap-y-2">
+            <div v-for="endpoint in component.endpoints" class="flex gap-x-2">
+              <span class="font-bold">{{ Object.keys(endpoint)[0] }}:</span>
+              <span>{{ endpoint[Object.keys(endpoint)[0]] }}</span>
+            </div>
+          </CardContent>
+          <Separator/>
+          <CardContent class="p-6">
+            This component is publicly available: {{ component.public }}
+          </CardContent>
+          <Separator/>
+          <CardFooter v-if="component.component_type === ComponentType.Data"
+                      class="p-6 flex flex-col gap-y-4 items-start">
+            <div class="w-full flex gap-x-2 justify-between">
+              <Button variant="outline" @click="getS3Credentials(component.id)">Get Credentials</Button>
+              <Button variant="outline" @click="createS3Credentials(component)">Create Credentials</Button>
+            </div>
+          </CardFooter>
+        </Card>
+      </div>
+
+      <div v-else class="w-full h-full chart">
+        <VisSingleContainer :data="graphData.data" class="h-full">
+          <VisGraph v-bind="graphConfig"
+                    :layoutType="GraphLayoutType.Parallel"
+                    :layoutGroupOrder="[]"
+                    :layoutNodeGroup="(n: NodeDatum) => n.group"
+                    :layoutParallelNodeSubGroup="(n: NodeDatum) => n.subgroup"
+                    :layoutParallelNodesPerColumn="1"
+                    :layoutParallelGroupSpacing="100"
+                    :layoutParallelSubGroupsPerRow="1"
+                    :panels="graphData.panels"/>
+
+          <VisTooltip v-if="!disableTooltips"
+                      :container="container"
+                      :triggers="triggers"
+                      :follow-cursor="false"
+                      :allow-hover="true"
+                      :vertical-placement="Position.Auto"/>
+        </VisSingleContainer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 300ms;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.chart {
+  --vis-graph-icon-font-family: 'Font Awesome 6 Free';
+  --vis-graph-link-stroke-opacity: 0.8;
+  --vis-graph-link-band-opacity: 0.2;
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/webfonts/fa-solid-900.woff2) format('woff2');
+}
+</style>
+
diff --git a/components/custom-ui/dashboard/licenses/LicenseDisplay.vue b/components/custom-ui/dashboard/licenses/LicenseDisplay.vue
new file mode 100644
index 00000000..209e6b44
--- /dev/null
+++ b/components/custom-ui/dashboard/licenses/LicenseDisplay.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {ScrollArea} from "~/components/ui/scroll-area";
+
+// ----- Properties ---------- //
+const selectedLicense = defineModel<License>('selectedLicense', {required: false})
+// ----- End Properties ---------- //
+</script>
+<template>
+  <div v-if="selectedLicense"
+       class="p-4 flex flex-col gap-y-4 h-full">
+    <h2 class="mt-6 mb-2 text-2xl font-bold text-aruna-text-accent">
+      {{ selectedLicense.name }}
+    </h2>
+    <Separator/>
+    <div class="font-bold text-aruna-text">
+      {{ selectedLicense.description }}
+    </div>
+    <Separator/>
+    <ScrollArea class="p-4 h-full overflow-hidden">
+        <pre>{{ selectedLicense.terms }}</pre>
+    </ScrollArea>
+  </div>
+</template>
diff --git a/components/custom-ui/dashboard/licenses/LicenseEditor.vue b/components/custom-ui/dashboard/licenses/LicenseEditor.vue
new file mode 100644
index 00000000..fc2a4479
--- /dev/null
+++ b/components/custom-ui/dashboard/licenses/LicenseEditor.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import {IconHelp} from '@tabler/icons-vue'
+import {useForm} from "vee-validate";
+import {toTypedSchema} from '@vee-validate/zod'
+import * as z from 'zod'
+import {useToast} from "~/components/ui/toast";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "~/components/ui/form";
+import {Button} from "~/components/ui/button";
+
+/* ----- EMITS ----- */
+const emit = defineEmits(['closeEditor'])
+/* ----- END EMITS ----- */
+
+// ----- FORM SCHEMA ---------- //
+const formSchema = toTypedSchema(z.object({
+  name: z.string({required_error: "Name is required."}).min(2).max(128),
+  description: z.string().max(1024, "Description can only be 1024 characters long."),
+  license_terms: z.string({required_error: "License terms are required."}).min(2)
+}))
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const {toast} = useToast()
+const onSubmit = form.handleSubmit(async (values) => {
+  // Create License
+  await $fetch<CreateLicensesResponse>('/api/v3/licenses', {
+    method: 'POST',
+    body: values
+  }).then(response => {
+    toast({
+      title: 'Success',
+      description: `License successfully created: ${response.license_id}`,
+    })
+
+    EventBus.emit('updateLicenses');
+  })
+})
+// ----- END FORM SCHEMA ---------- //
+</script>
+<template>
+  <div class="p-4 flex flex-col gap-y-4">
+    <form id="licenseForm"
+          @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="name">
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input type="text" placeholder="Name of the License" v-bind="componentField" class="mt-0 max-w-[50%]"/>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+        </div>
+      </div>
+
+      <FormField v-slot="{ componentField }" name="description">
+        <FormItem>
+          <div class="flex items-center gap-x-4">
+            <FormLabel>Description</FormLabel>
+            <Popover>
+              <PopoverTrigger>
+                <IconHelp class="size-4 text-aruna-highlight font-bold"/>
+              </PopoverTrigger>
+              <PopoverContent class="text-sm rounded-sm">
+                A concise description that, at best, explains the core of the licence in one sentence.
+              </PopoverContent>
+            </Popover>
+          </div>
+          <FormControl>
+            <Input type="text"
+                   placeholder="A concise description of your license."
+                   v-bind="componentField"
+                   class="mt-0"/>
+          </FormControl>
+          <FormMessage/>
+        </FormItem>
+      </FormField>
+
+      <FormField v-slot="{componentField}" name="license_terms">
+        <FormItem>
+          <div class="flex items-center gap-x-4">
+            <FormLabel>License Terms</FormLabel>
+            <Popover>
+              <PopoverTrigger>
+                <IconHelp class="size-4 text-aruna-highlight font-bold"/>
+              </PopoverTrigger>
+              <PopoverContent class="text-sm rounded-sm">
+                Here you can enter the full text of your license.
+                <a href="https://creativecommons.org/publicdomain/zero/1.0/legalcode.txt"
+                   target="_blank"
+                   class="text-aruna-highlight hover:cursor-pointer hover:text-aruna-highlight/80">Example</a>
+              </PopoverContent>
+            </Popover>
+          </div>
+          <FormControl>
+            <Textarea v-bind="componentField"
+                      :rows="25"
+                      placeholder="Here you can enter the full text of your license." class="h-full"/>
+          </FormControl>
+          <FormMessage/>
+        </FormItem>
+      </FormField>
+    </form>
+
+    <div class="flex gap-x-4">
+      <Button type="submit"
+              form="licenseForm"
+              class="w-fit bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+        Create License
+      </Button>
+      <Button variant="outline"
+              class="w-fit bg-transparent border border-aruna-text text-aruna-text hover:border-aruna-text-accent hover:text-aruna-text-accent"
+              @click="emit('closeEditor')">
+        Cancel
+      </Button>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/licenses/Licenses.vue b/components/custom-ui/dashboard/licenses/Licenses.vue
new file mode 100644
index 00000000..00cf25d3
--- /dev/null
+++ b/components/custom-ui/dashboard/licenses/Licenses.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {IconPlus, IconSearch} from "@tabler/icons-vue";
+import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from "~/components/ui/resizable";
+import {Separator} from "~/components/ui/separator";
+import {Input} from "~/components/ui/input";
+import {TooltipProvider, Tooltip, TooltipContent, TooltipTrigger} from "~/components/ui/tooltip";
+
+import LicensesList from "~/components/custom-ui/dashboard/licenses/LicensesList.vue";
+import LicenseDisplay from "~/components/custom-ui/dashboard/licenses/LicenseDisplay.vue";
+import LicenseEditor from "~/components/custom-ui/dashboard/licenses/LicenseEditor.vue";
+
+// ----- Properties ---------- //
+interface LicensesProps {
+  licenses: License[]
+}
+const props = defineProps<LicensesProps>()
+const licenses = toRef(() => props.licenses)
+const searchValue = ref('')
+const selectedLicense = ref<License | undefined>(undefined)
+const editMode = ref<boolean>(false)
+// ----- End Properties ---------- //
+
+watch(licenses, () => console.info('[Licenses] Updated available licenses:', licenses.value))
+onActivated(() => console.info('[Licenses] Available licenses:', licenses.value))
+
+
+</script>
+<template>
+  <ResizablePanelGroup
+      id="resize-panel-group-1"
+      direction="horizontal"
+      class="h-full max-h-[calc(100vh-130px)] items-stretch">
+    <ResizablePanel id="resize-panel-1" :default-size="35" :min-size="30" :max-size="50">
+      <div class="flex items-center justify-between px-4 py-2">
+        <h1 class="text-xl font-bold">
+          Available Licenses
+        </h1>
+        <TooltipProvider :delay-duration="250">
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <IconPlus class="rounded-full border border-aruna-text-accent hover:border-aruna-highlight hover:text-aruna-highlight hover:cursor-pointer"
+                        @click="editMode = true"/>
+            </TooltipTrigger>
+            <TooltipContent class="rounded-none text-aruna-highlight bg-aruna-muted border border-aruna-text/50">
+              Create a new license
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <Separator/>
+      <div class="p-4">
+        <form>
+          <div class="relative">
+            <IconSearch class="absolute left-2 top-2.5 size-4 text-muted-foreground"/>
+            <Input v-model="searchValue" placeholder="Search" class="pl-8 bg-muted"/>
+          </div>
+        </form>
+      </div>
+      <LicensesList :licenses="licenses" v-model:selected-license="selectedLicense"/>
+    </ResizablePanel>
+    <ResizableHandle id="resize-handle-1" with-handle/>
+    <ResizablePanel id="resize-panel-2" :default-size="65">
+      <KeepAlive>
+        <component :is="editMode ? LicenseEditor : LicenseDisplay"
+                   v-model:selected-license="selectedLicense"
+                   @closeEditor="editMode = false"/>
+      </KeepAlive>
+      <!-- <LicenseDisplay v-model:selected-license="selectedLicense"/> -->
+    </ResizablePanel>
+  </ResizablePanelGroup>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/licenses/LicensesList.vue b/components/custom-ui/dashboard/licenses/LicensesList.vue
new file mode 100644
index 00000000..a33fc697
--- /dev/null
+++ b/components/custom-ui/dashboard/licenses/LicensesList.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {ScrollArea} from "~/components/ui/scroll-area";
+import {Badge} from "~/components/ui/badge";
+
+// ----- Properties ---------- //
+interface LicensesListProps {
+  licenses: License[]
+}
+
+const props = defineProps<LicensesListProps>()
+const licenses = toRef(() => props.licenses)
+const selectedLicense = defineModel<License>('selectedLicense', {required: false})
+// ----- End Properties ---------- //
+
+watch(licenses, () => console.info('[LicensesList] Updated available licenses:', licenses.value))
+onActivated(() => console.info('[LicensesList] Available licenses:', licenses.value))
+
+const emit = defineEmits<{ (e: 'selectLicense', license: License): void }>();
+</script>
+<template>
+  <ScrollArea class="h-full flex">
+    <div class="flex-1 flex flex-col gap-2 p-4 pt-0">
+      <TransitionGroup name="list" appear>
+        <button v-for="license in licenses"
+                :key="license.id"
+                :class="cn('flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
+                             selectedLicense?.id === license.id && 'bg-muted',)"
+                @click="selectedLicense = license">
+          <div class="flex w-full flex-col gap-1">
+            <div class="flex items-center">
+              <div class="flex items-center gap-2">
+                <div class="font-semibold">
+                  {{ license.name }}
+                </div>
+              </div>
+            </div>
+
+            <div class="text-xs font-medium">
+              {{ license.id }}
+            </div>
+          </div>
+          <div class="line-clamp-2 text-xs text-muted-foreground">
+            {{ license.description }}
+            <!-- {{ item.message.substring(0, 300) }} -->
+            <!--{{ item.text.substring(0, 300) }}-->
+          </div>
+          <div class="flex items-center gap-2">
+            <Badge v-if="license.terms.includes('Creative Commons')" variant="outline">CC</Badge>
+            <!-- TODO: Badges (?)
+            <Badge v-if="item.requester.User" variant="secondary">User</Badge>
+            <Badge v-if="item.requester.User?.impersonated_by" variant="default">Impersonated</Badge>
+            <Badge v-if="item.requester.User?.auth_method.Oidc" variant="default">OIDC</Badge>
+            <Badge v-if="item.requester.User?.auth_method.Aruna" variant="default">Aruna</Badge>
+            -->
+          </div>
+        </button>
+      </TransitionGroup>
+    </div>
+  </ScrollArea>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dialog/AuthorDialog.vue b/components/custom-ui/dialog/AuthorDialog.vue
new file mode 100644
index 00000000..68743ac9
--- /dev/null
+++ b/components/custom-ui/dialog/AuthorDialog.vue
@@ -0,0 +1,165 @@
+<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 {useForm} from "vee-validate";
+import {toTypedSchema} from '@vee-validate/zod'
+import * as z from 'zod'
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean,
+  withButton: boolean,
+  buttonLabel?: string
+  buttonCss?: string
+}>()
+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: Author]
+}>()
+/* ----- 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(),
+  identifier: z.string().optional(), //z.string().regex(ORCID_REGEX, 'Not a valid ORCID').optional(),
+}))
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = form.handleSubmit(async (values) => {
+  console.info('[AuthorDialog] Submit values:', values)
+  emit('add-author', {
+    id: '', //TODO: Will be added with search
+    first_name: values.firstName,
+    last_name: values.lastName,
+    email: values.email || '',
+    identifier: values.identifier || ''
+  })
+  open.value = false
+})
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <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)">
+        {{ buttonLabel || '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-highlight font-bold">Add Author</DialogTitle>
+        <DialogDescription class="text-aruna-text text-center">
+          Add an additional author to the resource.
+        </DialogDescription>
+      </DialogHeader>
+
+      <!-- TODO: Search field for users to auto-fill fields -->
+
+      <form id="authorForm" @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-highlight 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="identifier">
+          <FormItem>
+            <FormLabel class="flex items-center justify-between">
+              <span>Identifier</span>
+              <Popover>
+                <PopoverTrigger>
+                  <IconHelp class="size-4 text-aruna-highlight font-bold"/>
+                </PopoverTrigger>
+                <PopoverContent class="text-sm rounded-sm">
+                  If available, you can enter an external identifier of the author here.
+                </PopoverContent>
+              </Popover>
+            </FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Other identifiers of the Author, e.g. ORCID" v-bind="componentField"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+      </form>
+
+      <DialogFooter>
+        <Button type="submit"
+                form="authorForm"
+                class="w-fit bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          Add Author
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dialog/ComponentDialog.vue b/components/custom-ui/dialog/ComponentDialog.vue
new file mode 100644
index 00000000..adbd326a
--- /dev/null
+++ b/components/custom-ui/dialog/ComponentDialog.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {Button} from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import type {v2Endpoint} from "~/composables/aruna_api_json";
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean,
+  withButton: boolean,
+  component: v3Component
+}>()
+const externalTrigger = toRef(props, 'initialOpen')
+const open = ref(props.initialOpen)
+watch(externalTrigger, () => open.value = externalTrigger.value)
+/* ----- END PROPERTIES ----- */
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits(['closeCredentialsDialog'])
+/* ----- END EVENT EMITS ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline">
+        Component Details
+      </Button>
+    </DialogTrigger>
+    <DialogContent @close="emit('closeCredentialsDialog')"
+                   class="sm:max-w-screen-md sm:rounded-md">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-700 font-bold">{{ component.name }}</DialogTitle>
+        <DialogDescription v-if="component.name" class="text-center">
+          <p class="mb-2 text-md"><span class="font-bold italic">{{ component.id }}</span></p>
+          <!--<p class="text-sm">{{ endpoint.id }}</p>-->
+        </DialogDescription>
+      </DialogHeader>
+      <div class="p-4 overflow-y-auto">
+        <div class="border-y border-gray-100">
+          <dl class="divide-y divide-gray-100">
+            <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-medium leading-6 text-gray-400">Type</dt>
+              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
+                {{ component.component_type }}
+              </dd>
+            </div>
+            <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-medium leading-6 text-gray-400">Is publicly accessible</dt>
+              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
+                {{ component.public}}
+              </dd>
+            </div>
+            <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-medium leading-6 text-gray-400">Endpoints</dt>
+              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
+                <pre class="flex gap-x-2" v-for="endpoint in component.endpoints"><span class="font-bold">{{ Object.keys(endpoint)[0] }}:</span>{{ Object.entries(endpoint)[0][1] }}</pre>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dialog/GroupDialog.vue b/components/custom-ui/dialog/GroupDialog.vue
new file mode 100644
index 00000000..c555e289
--- /dev/null
+++ b/components/custom-ui/dialog/GroupDialog.vue
@@ -0,0 +1,120 @@
+<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 {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-group': [group: GroupInfo]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(
+  z.object({
+    name: z.string({required_error: 'Key is required.'}).min(2).max(256),
+    description: z.string().optional(),
+  })
+)
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = form.handleSubmit(async values => {
+  // Create group
+  await $fetch<CreateGroupResponse>('/api/v3/group', {
+    method: 'POST',
+    body: {
+      name: values.name,
+      description: values.description
+    }
+  }).then(response => {
+    if (response.group) {
+      // Emit global groups re-fresh
+      EventBus.emit('updateGroups')
+      open.value = false
+
+      // Emit add group to parent component
+      /*
+      emit('add-group', {
+        id: '',
+        name: values.name,
+        description: values.description || ''
+      })
+      */
+    } else {
+
+    }
+  })
+})
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline"
+              class="w-fit rounded-sm text-aruna-highlight border border-aruna-highlight bg-transparent hover:bg-aruna-highlight hover:text-aruna-text-accent">
+        Create Group
+      </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">Create Group</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="name">
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Here you can enter the name of your group" v-bind="componentField" class="mt-0" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="description">
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl>
+              <Textarea v-bind="componentField" :rows="5" placeholder="Here you can enter a brief description of your group" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </form>
+      <DialogFooter>
+        <Button type="submit"
+                form="dialogForm"
+                class="rounded-sm text-aruna-highlight border border-aruna-highlight bg-transparent hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          Create Group
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/components/custom-ui/dialog/KeyValueDialog.vue b/components/custom-ui/dialog/KeyValueDialog.vue
new file mode 100644
index 00000000..42271a87
--- /dev/null
+++ b/components/custom-ui/dialog/KeyValueDialog.vue
@@ -0,0 +1,124 @@
+<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'
+import {Checkbox} from "~/components/ui/checkbox";
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean
+  withButton: boolean
+  buttonLabel?: string
+  buttonCss?: string
+}>()
+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: KeyValue]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(
+    z.object({
+      key: z.string({required_error: 'Key cannot be empty.'}).min(1, 'Key cannot be empty.').max(256),
+      value: z.string().optional(),
+      locked: z.boolean().optional(),
+    })
+)
+
+const {handleSubmit, values} = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    locked: false
+  }
+})
+
+const onSubmit = handleSubmit(async values => {
+  emit('add-key-value', {
+    key: values.key,
+    value: values.value || '',
+    locked: values.locked || false
+  })
+  open.value = false
+})
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <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)">
+        {{ buttonLabel || '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-highlight font-bold">Add Key-Value</DialogTitle>
+        <DialogDescription class="text-aruna-text text-center">
+          Add an individual key-value to your resource.
+        </DialogDescription>
+      </DialogHeader>
+
+      <form id="keyValueForm" @submit="onSubmit" class="space-y-4">
+        <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>
+
+        <FormField type="checkbox" v-slot="{ value, handleChange }" name="locked">
+          <FormItem class="flex flex-row items-start gap-x-3 space-y-0">
+            <FormControl>
+              <Checkbox :checked="value" @update:checked="handleChange"/>
+            </FormControl>
+            <div class="space-y-1 leading-none">
+              <FormLabel>
+                This label is locked/immutable
+              </FormLabel>
+              <FormMessage/>
+            </div>
+          </FormItem>
+        </FormField>
+      </form>
+      <DialogFooter>
+        <Button type="submit" form="keyValueForm"
+                class="w-fit bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          Add key-value
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/components/custom-ui/dialog/LoginDialog.vue b/components/custom-ui/dialog/LoginDialog.vue
index 052f5b3c..51e1b5f6 100644
--- a/components/custom-ui/dialog/LoginDialog.vue
+++ b/components/custom-ui/dialog/LoginDialog.vue
@@ -8,7 +8,6 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog'
 
-console.log(window.location.hostname)
 const local = computed(() => window.location.hostname.includes('localhost'))
 </script>
 
diff --git a/components/custom-ui/dialog/OntologyDialog.vue b/components/custom-ui/dialog/OntologyDialog.vue
new file mode 100644
index 00000000..be2d15ff
--- /dev/null
+++ b/components/custom-ui/dialog/OntologyDialog.vue
@@ -0,0 +1,206 @@
+<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 "~/types/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': [keyValue: KeyValue]
+}>()
+/* ----- 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', {
+      key: 'http://purl.org/dc/terms/conformsTo',
+      value: `{"@type": "CreativeWork", "@id": "${currentSelection.value.iri}", "url": "${createMetadataLink(currentSelection.value.id)}"}`,
+      locked: true
+    })
+    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 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/custom-ui/dialog/RealmComponentDialog.vue b/components/custom-ui/dialog/RealmComponentDialog.vue
new file mode 100644
index 00000000..e164be2f
--- /dev/null
+++ b/components/custom-ui/dialog/RealmComponentDialog.vue
@@ -0,0 +1,333 @@
+<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 {CreateComponentRequest, Endpoint, v3Component} from "~/composables/api_wrapper";
+import {useForm} from 'vee-validate'
+import {toTypedSchema} from '@vee-validate/zod'
+import * as z from 'zod'
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean
+  withButton: boolean
+  buttonCss?: string,
+  realmId?: string
+}>()
+const realmId = toRef(() => props.realmId)
+const externalTrigger = toRef(() => props.initialOpen)
+const open = ref(props.initialOpen)
+watch(realmId, () => {
+  console.info('[RealmComponentDialog] Updated realmId: ', realmId.value)
+  setFieldValue('realm_id', realmId.value)
+})
+watch(externalTrigger, () => (open.value = externalTrigger.value))
+/* ----- END PROPERTIES ----- */
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits<{
+  'add-component': [component: v3Component, realmId: string]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(z.object({
+    realm_id: z.string().optional(),
+    name: z.string({required_error: 'Name is required.'}).min(2).max(256),
+    pubkey: z.string({required_error: 'Public key is required.'}).min(2).max(256),
+    description: z.string().optional(),
+    public: z.boolean(),
+    component_type: z.nativeEnum(ComponentType),
+    s3_endpoint: z.custom<{S3: string}>().optional(),
+    grpc_endpoint: z.custom<{Grpc: string}>().optional(),
+    json_endpoint: z.custom<{Json: string}>().optional(),
+    consensus_endpoint: z.custom<{Consensus: string}>().optional()
+  })
+)
+
+const {handleSubmit, values, setFieldValue} = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    //component_type: ComponentType.Server,
+    public: true,
+  }
+})
+
+import {useToast} from '~/components/ui/toast/use-toast'
+import {Checkbox} from "~/components/ui/checkbox";
+import {ComponentType, ResourceVariant} from "~/types/aruna-v3-enums";
+const {toast} = useToast()
+const onSubmit = handleSubmit(async (values) => {
+  console.info('[RealmComponentDialog] Submitted values: ', values)
+
+  // Collect endpoints
+  let endpoints: Endpoint[] = []
+  if (values.s3_endpoint)
+    endpoints.push(values.s3_endpoint)
+  if (values.json_endpoint)
+    endpoints.push(values.json_endpoint)
+  if (values.grpc_endpoint)
+    endpoints.push(values.grpc_endpoint)
+  if (values.consensus_endpoint)
+    endpoints.push(values.consensus_endpoint)
+
+  const request = {
+    public: values.public,
+    name: values.name,
+    pubkey: values.pubkey,
+    description: values.description,
+    component_type: values.component_type,
+    endpoints: endpoints
+  } as CreateComponentRequest
+
+  /*
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(request, null, 2))),
+  })
+  */
+
+  //Create component
+  await $fetch<CreateComponentResponse>('/api/v3/components', {
+    method: 'POST',
+    body: request
+  }).then(response => {
+    toast({
+      title: 'Success',
+      description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(response, null, 2))),
+    })
+
+    // Add created component to realm
+    return $fetch<AddComponentToRealmResponse>('/api/v3/components', {
+      method: 'PATCH',
+      body: {
+        realm_id: values.realm_id,
+        component_id: response.component.id
+      }
+    })
+
+  }).then(response => {
+    toast({
+      title: 'Success',
+      description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(response, null, 2))),
+    })
+    emit('add-component', response.component, values.realm_id)
+    open.value = false
+
+  }).catch(error => {
+    toast({
+      variant: "destructive",
+      title: 'Error',
+      description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(error.data, null, 2))),
+    })
+  })
+
+  //TODO: Emit event
+})
+
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <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 Realm Component
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[500px] sm:rounded-md" @pointer-down-outside="event => event.preventDefault()">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-700 font-bold">
+          Add Realm Component
+        </DialogTitle>
+        <DialogDescription class="flex flex-col gap-y-4 justify-start">
+          Add a new component to your realm.
+        </DialogDescription>
+      </DialogHeader>
+
+      <form id="createComponentForm" @submit="onSubmit" class="space-y-4">
+        <FormField v-slot="{componentField}" name="realm_id">
+          <FormItem class="invisible h-0">
+            <FormControl>
+              <Input type="text"
+                     v-bind="componentField"
+                     placeholder="Id of the realm the component will be created for"
+                     class="mt-0"/>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="component_type">
+          <FormItem>
+            <FormLabel>Type</FormLabel>
+            <Select v-bind="componentField">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a type for your component" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem v-for="type in ComponentType" class="" :value="type">
+                    {{ type }}
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="name">
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input type="text"
+                     v-bind="componentField"
+                     placeholder="Name of the component"
+                     class="mt-0" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="pubkey">
+          <FormItem>
+            <FormLabel>Public Key</FormLabel>
+            <FormControl>
+              <Input type="text"
+                     v-bind="componentField"
+                     placeholder="Public key of the component"
+                     class="mt-0 w-full truncate overflow-ellipsis" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Endpoints Input -->
+        <div class="flex flex-col gap-y-0">
+          <FormField v-slot="{componentField}"
+                     name="s3_endpoint">
+            <FormItem>
+              <FormLabel>Endpoints</FormLabel>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="min-w-[75px] px-4 inline-flex items-center rounded-s-sm border border-e-0 bg-transparent text-sm text-aruna-highlight">
+                      S3
+                    </span>
+                  <Input type="text"
+                         placeholder="S3 endpoint URL of the component"
+                         @update:model-value="(v) => {setFieldValue('s3_endpoint', v ? {S3: v.toString()} : undefined)}"
+                         class="mt-0 rounded-s-none focus:outline-0 focus:ring-1
+                                focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                disabled:opacity-50 disabled:pointer-events-none"/>
+
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{componentField}"
+                     name="grpc_endpoint">
+            <FormItem>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="min-w-[75px] px-4 inline-flex items-center rounded-s-sm border border-e-0 bg-transparent text-sm text-aruna-highlight">
+                      gRPC
+                    </span>
+                  <Input type="text"
+                         placeholder="gRPC endpoint URL of the component"
+                         @update:model-value="(v) => {setFieldValue('grpc_endpoint', v ? {Grpc: v.toString()} : undefined)}"
+                         class="mt-0 rounded-s-none"/>
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <FormField v-slot="{componentField}"
+                     name="json_endpoint">
+            <FormItem>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="min-w-[75px] px-4 inline-flex items-center rounded-s-sm border border-e-0 bg-transparent text-sm text-aruna-highlight">
+                      JSON
+                    </span>
+                  <Input type="text"
+                         placeholder="JSON endpoint URL of the component"
+                         @update:model-value="(v) => {setFieldValue('json_endpoint', v ? {Json: v.toString()} : undefined)}"
+                         class="mt-0 rounded-s-none"/>
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <FormField v-slot="{componentField}"
+                     name="consensus_endpoint">
+            <FormItem>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="min-w-[75px] px-4 inline-flex items-center rounded-s-sm border border-e-0 bg-transparent text-sm text-aruna-highlight">
+                      Cons.
+                    </span>
+                  <Input type="text"
+                         placeholder="Consensus endpoint URL of the component"
+                         @update:model-value="(v) => {setFieldValue('consensus_endpoint', v ? {Consensus: v.toString()} : undefined)}"
+                         class="mt-0 rounded-s-none"/>
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+        </div>
+        <!-- End Endpoints Input -->
+
+        <FormField v-slot="{componentField}" name="description">
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl>
+              <Textarea v-bind="componentField"
+                        :rows="5"
+                        placeholder="A concise description of the component" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField type="checkbox" v-slot="{ value, handleChange }" name="public">
+          <FormItem class="flex flex-row items-start gap-x-3 space-y-0">
+            <FormControl>
+              <Checkbox :checked="value" @update:checked="handleChange" class="data-[state=checked]:bg-aruna-highlight data-[state=checked]:text-aruna-text-accent"/>
+            </FormControl>
+            <div class="space-y-1 leading-none">
+              <FormLabel>
+                This component is publicly available
+              </FormLabel>
+              <FormMessage/>
+            </div>
+          </FormItem>
+        </FormField>
+
+      </form>
+      <DialogFooter>
+        <Button type="submit"
+                form="createComponentForm"
+                class="w-fit bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          Create Component
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/components/custom-ui/dialog/RegistrationDialog.vue b/components/custom-ui/dialog/RegistrationDialog.vue
index 98aab8e6..d20cae25 100644
--- a/components/custom-ui/dialog/RegistrationDialog.vue
+++ b/components/custom-ui/dialog/RegistrationDialog.vue
@@ -21,13 +21,11 @@ import {
 import {Input} from '~/components/ui/input'
 import {Popover, PopoverTrigger, PopoverContent} from '~/components/ui/popover'
 import {useToast} from '~/components/ui/toast/use-toast'
-import type {v2RegisterUserResponse} from "~/composables/aruna_api_json";
 import {useForm} from "vee-validate";
 import {toTypedSchema} from '@vee-validate/zod'
 import {h} from "vue";
 import * as z from 'zod'
-
-const {toast} = useToast()
+import type {RegisterUserResponse} from "~/composables/api_wrapper";
 
 /* ----- PROPERTIES ----- */
 const props = defineProps<{
@@ -47,41 +45,53 @@ const emit = defineEmits(['closeRegisterDialog'])
 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),
-  displayName: z.string({required_error: "Display name is required."}).min(2).max(256),
   email: z.string({required_error: "Valid email is required."}).email('Invalid email format.').trim().min(1),
-  project: z.string().optional(),
+  identifiers: z.array(z.string()).optional(),
   tosAccepted: z.boolean({required_error: "Is not active man."}).default(false).refine(val => val, {message: "You have to accept the ToS"})
 }))
 
 const form = useForm({
   validationSchema: formSchema,
   initialValues: {
+    identifiers: [],
     tosAccepted: false,
   },
 })
 
+const {toast} = useToast()
 const onSubmit = form.handleSubmit(async (values) => {
-  await $fetch<v2RegisterUserResponse>('/api/register', {
+  await $fetch<RegisterUserResponse>('/api/v3/user', {
     method: 'POST',
     body: {
-      displayName: values.displayName,
+      first_name: values.firstName,
+      last_name: values.lastName,
       email: values.email,
-      project: values.project
+      identifier: '',
     }
   }).then(response => {
-    if (response.userId) {
+    if (response.user) {
       toast({
         description: h('div',
-            {class: 'flex space-x-2 items-center justify-center text-gray-200'},
+            {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
             [
-              h(IconTrophy, {class: 'flex-shrink-0 size-5 text-yellow-200'}),
+              h(IconTrophy, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
               h('span',
                   {class: 'text-fuchsia-50'},
-                  ['Your registration was successful. Please check your mails for more information.'])
+                  [
+                    'Your registration was successful.', h('br'), 'Have fun exploring the Aruna universe. Also check out the ',
+                    h('a', {
+                      href: 'https://docs.aruna-engine.org/latest',
+                      target: '_blank',
+                      class: 'font-bold text-aruna-highlight hover:text-aruna-highlight/80'
+                    }, ['documentation']),
+                    '.'
+                  ])
             ]),
-        duration: 10000
+        duration: 60000 // One Minute
       })
+      EventBus.emit('updateUser')
       emit('closeRegisterDialog')
+      useRouter().push('/user/dashboard')
     }
   }).catch(error => {
     toast({
@@ -135,26 +145,6 @@ const onSubmit = form.handleSubmit(async (values) => {
           </div>
         </div>
 
-        <FormField v-slot="{ componentField }" name="displayName">
-          <FormItem>
-            <div class="flex items-center justify-between">
-              <FormLabel>Display Name</FormLabel>
-              <Popover>
-                <PopoverTrigger>
-                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
-                </PopoverTrigger>
-                <PopoverContent class="text-sm rounded-sm">
-                  This name will be publicly displayed for your user.
-                </PopoverContent>
-              </Popover>
-            </div>
-            <FormControl>
-              <Input type="text" placeholder="An arbitrary display name" v-bind="componentField"/>
-            </FormControl>
-            <FormMessage/>
-          </FormItem>
-        </FormField>
-
         <FormField v-slot="{ componentField }" name="email">
           <FormItem>
             <div class="flex items-center justify-between">
@@ -175,26 +165,6 @@ const onSubmit = form.handleSubmit(async (values) => {
           </FormItem>
         </FormField>
 
-        <FormField v-slot="{ componentField }" name="project">
-          <FormItem>
-            <FormLabel class="flex items-center justify-between">
-              <span>Associated Project</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 project / consortium you are associated with here.
-                </PopoverContent>
-              </Popover>
-            </FormLabel>
-            <FormControl>
-              <Input type="text" placeholder="Your NFDI project / consortium" v-bind="componentField"/>
-            </FormControl>
-            <FormMessage/>
-          </FormItem>
-        </FormField>
-
         <FormField type="checkbox" v-slot="{ value, handleChange }" name="tosAccepted">
           <FormItem class="flex flex-row items-start gap-x-3 space-y-0">
             <FormControl>
diff --git a/components/custom-ui/dialog/TokenDialog.vue b/components/custom-ui/dialog/TokenDialog.vue
index c7292c88..cadb0b01 100644
--- a/components/custom-ui/dialog/TokenDialog.vue
+++ b/components/custom-ui/dialog/TokenDialog.vue
@@ -19,7 +19,7 @@ import {
 } from '@/components/ui/form'
 import {Input} from '@/components/ui/input'
 import {Popover, PopoverTrigger, PopoverContent} from '@/components/ui/popover'
-import {type v2Permission, v2PermissionLevel,} from "~/composables/aruna_api_json";
+import {type v2Permission} from "~/composables/aruna_api_json";
 import {useForm} from "vee-validate";
 import {toTypedSchema} from '@vee-validate/zod'
 import * as z from 'zod'
@@ -28,23 +28,30 @@ import {useToast} from "~/components/ui/toast";
 
 import {toDate} from 'radix-vue/date'
 import {DateFormatter, getLocalTimeZone, parseDate, today} from '@internationalized/date'
+import {Permission} from "~/types/aruna-v3-enums";
 
 const {toast} = useToast();
 
 /* ----- CUSTOM ENUMS ----- */
 enum Scopes {
   Personal = 'Personal',
+  Resource = 'Resource'
+  /*
   Project = 'Project',
   Collection = 'Collection',
   Dataset = 'Dataset',
   Object = 'Object'
+  */
 }
+
 /* ----- END CUSTOM ENUMS ----- */
 
 /* ----- PROPERTIES ----- */
 const props = defineProps<{
   initialOpen: boolean,
-  withButton: boolean
+  withButton: boolean,
+  realms: Realm[],
+  groups: Group[]
 }>()
 const externalTrigger = toRef(props, 'initialOpen')
 const open = ref(props.initialOpen)
@@ -57,7 +64,7 @@ const formSchema = toTypedSchema(z.object({
   tokenScope: z.nativeEnum(Scopes).default(Scopes.Personal),
   expiryDate: z.string().date('Invalid expiry date format.'),
   resourceId: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
-  permissionLevel: z.nativeEnum(v2PermissionLevel).optional(),
+  permissionLevel: z.nativeEnum(Permission).optional(),
 }).superRefine((values, ctx) => {
   if (values.tokenScope !== Scopes.Personal && !values.resourceId) {
     ctx.addIssue({
@@ -87,53 +94,52 @@ const {handleSubmit, values, setFieldValue} = useForm({
 })
 
 const onSubmit = handleSubmit(async (values) => {
-  // Prepare request values
-  const expiry = new Date(values.expiryDate)
-  const perm = values.tokenScope === Scopes.Personal ? undefined : {
-    projectId: values.tokenScope === Scopes.Project ? values.resourceId : undefined,
-    collectionId: values.tokenScope === Scopes.Collection ? values.resourceId  : undefined,
-    datasetId: values.tokenScope === Scopes.Dataset ? values.resourceId  : undefined,
-    objectId: values.tokenScope === Scopes.Object ? values.resourceId  : undefined,
-    permissionLevel: values.permissionLevel
-  } as v2Permission
+  // Prepare request body
+  const scope = values.tokenScope === Scopes.Personal ? Scopes.Personal : {
+    resourceId: values.resourceId,
+    permission: values.permissionLevel,
+  }
+  const body = {
+    name: values.tokenName,
+    expires_at: new Date(values.expiryDate).toISOString(),
+    group_id: undefined,
+    realm_id: undefined,
+    scope: scope
+  } as CreateTokenRequest
 
-  // Send request to create token
-  await createUserToken(values.tokenName, perm, expiry.toISOString())
-      .then(response => {
-        if (response?.tokenSecret) {
-          tokenSecret.value = response.tokenSecret
-          EventBus.emit('updateUser')
-        } else {
-          // Notify with error
-          toast({
-            title: 'Error',
-            //description: 'Something went wrong. If this problem persists please contact an administrator.',
-            description: 'Token secret in response was empty. Please try again later.',
-            variant: 'destructive',
-            duration: 10000,
-          })
-        }
-      }).catch(error => {
-        // Notify with error
-        toast({
-          title: 'Error',
-          //description: 'Something went wrong. If this problem persists please contact an administrator.',
-          description: error.message, // 'Token creation failed. Please try again later.',
-          variant: 'destructive',
-          duration: 10000,
-        })
-      })
+  // Create token
+  await $fetch<CreateTokenResponse>('/api/v3/tokens', {
+    method: 'POST',
+    body: body
+  }).then(response => {
+    if (response.secret) {
+      tokenSecret.value = response.secret
+      EventBus.emit('updateTokens')
+      return
+    }
+    // Show error if secret is undefined
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: 'Token secret in response was empty. Please try again later.',
+      variant: 'destructive',
+      duration: 10000,
+    })
+  }).catch(error => {
+    console.dir('[TokenDialog] Create Error:', error.data)
+    // Notify with error
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: `Token creation failed: ${error.data.data}.`, // 'Token creation failed. Please try again later.',
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
 })
-/* ----- END FORM SCHEMA ----- */
-
-const validPermissionLevels = computed(() => Object.keys(v2PermissionLevel).filter(variant => variant !== 'PERMISSION_LEVEL_UNSPECIFIED'))
-
-function formatPermissionLevel(variant: string): string {
-  const label = variant.replace('PERMISSION_LEVEL_', '').replace('_', ' ').toLowerCase()
-  return label.charAt(0).toUpperCase() + label.slice(1)
-}
 
 const tokenSecret: Ref<string | undefined> = ref(undefined)
+/* ----- END FORM SCHEMA ----- */
 
 const calendarValue = computed({
   get: () => values.expiryDate ? parseDate(values.expiryDate) : undefined,
@@ -273,8 +279,8 @@ function clear(visibility: boolean) {
                   </FormControl>
                   <SelectContent>
                     <SelectGroup>
-                      <SelectItem class="" v-for="level in validPermissionLevels" :value="level">
-                        {{ formatPermissionLevel(level) }}
+                      <SelectItem class="" v-for="level in Permission" :value="level">
+                        {{ level }}
                       </SelectItem>
                     </SelectGroup>
                   </SelectContent>
diff --git a/components/custom-ui/frontpage/Newsletter.vue b/components/custom-ui/frontpage/Newsletter.vue
index fce6c4a4..8355016f 100644
--- a/components/custom-ui/frontpage/Newsletter.vue
+++ b/components/custom-ui/frontpage/Newsletter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {EMAIL_REGEX} from "~/composables/constants";
+import {EMAIL_REGEX} from "~/utils/constants";
 import {IconCircleCheck, IconExclamationCircle} from "@tabler/icons-vue";
 
 const email = ref('')
diff --git a/components/custom-ui/user/Profile.vue b/components/custom-ui/user/Profile.vue
new file mode 100644
index 00000000..5c693ffa
--- /dev/null
+++ b/components/custom-ui/user/Profile.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import {
+  IconCheck,
+  IconHash,
+  IconMail,
+  IconSignature,
+  IconUserCancel,
+  IconUserCheck,
+  IconX
+} from "@tabler/icons-vue";
+import {Skeleton} from '@/components/ui/skeleton'
+import type {User} from "~/composables/api_wrapper";
+import GroupDialog from "~/components/custom-ui/dialog/GroupDialog.vue";
+
+/* ----- PROPERTIES ----- */
+interface ProfileProps {
+  user: User,
+  groups: GroupInfo[] | null
+}
+
+const props = defineProps<ProfileProps>()
+const user = toRef(() => props.user)
+const groups = toRef(() => props.groups)
+
+watch(groups, () => console.log('[Profile] Updated groups: ', groups))
+/* ----- END PROPERTIES ----- */
+
+
+function displayDescription(description: string, maxLength: number = 50): string {
+  return description.length > maxLength ? description.slice(0, maxLength) + " ..." : description
+}
+</script>/
+<template>
+  <!-- Display Profile Infos -->
+  <div v-if="user" class="m-4 pb-6 flex flex-col lg:flex-row flex-wrap justify-start gap-x-6 gap-y-6">
+    <!-- User Id Card -->
+    <Card class="lg:basis-1/5">
+      <ClientOnly fallback-tag="span">
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-lg font-medium">
+            User Id
+          </CardTitle>
+          <IconHash class="size-6 text-muted-foreground"/>
+        </CardHeader>
+        <CardContent>
+          <div class="text-xl font-bold text-aruna-700">
+            {{ user.id || 'N/A' }}
+          </div>
+        </CardContent>
+        <template #fallback>
+          <div class="flex items-center justify-start space-x-4 h-full ms-4">
+            <Skeleton class="h-12 w-12 rounded-full"/>
+            <div class="space-y-2">
+              <Skeleton class="h-4 w-[250px]"/>
+              <Skeleton class="h-4 w-[200px]"/>
+            </div>
+          </div>
+        </template>
+      </ClientOnly>
+    </Card>
+    <!-- End User Id Card -->
+
+    <Card class="lg:basis-1/5">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-lg font-medium">
+          Display Name
+        </CardTitle>
+        <IconSignature class="size-6 text-muted-foreground"/>
+      </CardHeader>
+      <CardContent>
+        <div class="text-xl font-bold text-aruna-700">
+          {{ user.first_name || '' }} {{ user.last_name || 'N/A' }}
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card class="lg:basis-1/5">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-lg font-medium">
+          Email
+        </CardTitle>
+        <IconMail class="size-6 text-muted-foreground"/>
+      </CardHeader>
+      <CardContent>
+        <div class="text-xl font-bold text-aruna-700">
+          {{ user.email || 'N/A' }}
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card class="">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-lg font-medium">
+          Active
+        </CardTitle>
+        <IconUserCheck class="h-4 w-4 ms-4 me-2 text-muted-foreground"/>
+      </CardHeader>
+      <CardContent class="flex items-center justify-center">
+        <IconCheck class="flex-shrink-0 size-8 text-green-600"/>
+      </CardContent>
+    </Card>
+  </div>
+  <!-- End Display Profile Infos -->
+
+  <!-- Groups display/creation -->
+  <div class="m-4 flex flex-col gap-y-6 justify-start max-w-screen-2xl lg:max-w-[80vw]">
+    <Separator class="bg-aruna-text/50"/>
+    <h2 class="text-2xl font-bold text-aruna-text-accent">
+      Your groups
+    </h2>
+    <Table>
+      <TableCaption class="">A list of the groups you are member of</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="text-lg">Id</TableHead>
+          <TableHead class="text-lg">Name</TableHead>
+          <TableHead class="text-lg">Description</TableHead>
+          <TableHead class="text-lg">PermissionLevel</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody v-if="groups">
+        <TableRow v-for="group in groups" :key="group.group.name">
+          <TableCell class="font-medium">
+            {{ group.group.id }}
+          </TableCell>
+          <TableCell>{{ group.group.name }}</TableCell>
+          <TableCell>{{ group.group.description ? displayDescription(group.group.description, 128) : 'N/A' }}
+          </TableCell>
+          <TableCell>{{ group.permission }}</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+
+    <GroupDialog :initial-open="false"
+                 :with-button="true"
+                 @add-group="v => console.log('[Profile] Received Add Group Event:', v.group.id)"/>
+  </div>
+  <!-- End Groups display/creation -->
+
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/user/Proxies.vue b/components/custom-ui/user/Proxies.vue
new file mode 100644
index 00000000..dd4adb85
--- /dev/null
+++ b/components/custom-ui/user/Proxies.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import {
+  storagemodelsv2ComponentStatus,
+  type v2Endpoint,
+  type v2User
+} from "~/composables/aruna_api_json";
+import {IconDiscountCheck, IconLoader} from "@tabler/icons-vue";
+import {useToast} from "~/components/ui/toast";
+import CredentialsDialog from "~/components/custom-ui/dialog/CredentialsDialog.vue";
+
+interface ProxiesProps {
+  userEndpoints: string[],
+  endpoints: v2Endpoint[]
+}
+
+const {userEndpoints, endpoints} = defineProps<ProxiesProps>()
+
+function hasEndpoint(endpointId?: string): boolean {
+  if (endpointId)
+    return userEndpoints.includes(endpointId)
+  return false
+}
+
+/* ----- CREDENTIALS DIALOG ----- */
+const enum Dialogs {
+  TokenDialog,
+  CredentialsDialog
+}
+
+type EndpointCredentials = {
+  endpointId: string,
+  endpointName?: string,
+  endpointHost: string,
+  accessKeyId: string,
+  accessSecret: string,
+}
+
+const {toast} = useToast()
+const credentials: Ref<EndpointCredentials | undefined> = ref(undefined)
+const loading: Ref<string | undefined> = ref(undefined)
+
+const credentialsDialogOpen = ref(false)
+const tokenDialogOpen = ref(false)
+
+function setVisibility(dialog: Dialogs, visible: boolean): void {
+  switch (dialog) {
+    case Dialogs.TokenDialog:
+      tokenDialogOpen.value = visible
+      break
+    case Dialogs.CredentialsDialog:
+      credentialsDialogOpen.value = visible
+      break
+    default:
+      console.log(`Dialog ${dialog} does not exist here.`)
+  }
+}
+
+function clear() {
+  credentials.value = undefined
+  credentialsDialogOpen.value = false
+}
+
+const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay))
+
+async function createS3Credentials(endpoint: v2Endpoint) {
+  // Indicate async loading in progress (disable buttons)
+  loading.value = `${endpoint.id}_create`
+
+  await sleep(3000)
+
+  // Create S3 credentials
+  await createUserS3Credentials(endpoint.id)
+      .then(response => {
+        loading.value = undefined // Re-activate buttons
+        if (response) {
+          credentials.value = {
+            endpointId: endpoint.id,
+            endpointName: endpoint.name,
+            endpointHost: response.s3EndpointUrl,
+            accessKeyId: response.s3AccessKey,
+            accessSecret: response.s3SecretKey
+          } as EndpointCredentials
+          setVisibility(Dialogs.CredentialsDialog, true)
+        } else {
+          // Empty remaining credentials and close if open
+          credentials.value = undefined
+          setVisibility(Dialogs.CredentialsDialog, false)
+
+          // Notify with error
+          toast({
+            title: 'Error',
+            description: 'Received empty response. If this problem persists please contact an administrator.',
+            variant: 'destructive',
+            duration: 10000,
+          })
+        }
+
+        EventBus.emit('updateUser')
+      }).catch(error => {
+        loading.value = undefined // Re-activate buttons
+        // Empty remaining credentials
+        credentials.value = undefined
+
+        // Notify with error
+        toast({
+          title: 'Error',
+          //description: 'Something went wrong. If this problem persists please contact an administrator.',
+          description: error.message,
+          variant: 'destructive',
+          duration: 10000,
+        })
+      })
+}
+
+async function getS3Credentials(endpoint: v2Endpoint) {
+  // Indicate async loading in progress (disable buttons)
+  loading.value = `${endpoint.id}_get`
+  EventBus.emit('spinStart')
+
+  await sleep(3000)
+
+  // Fetch existing S3 credentials
+  return await getUserS3Credentials(endpoint.id)
+      .then(response => {
+        loading.value = undefined // Re-activate buttons
+        EventBus.emit('spinStop')
+
+        if (response) {
+          credentials.value = {
+            endpointId: endpoint.id,
+            endpointName: endpoint.name,
+            endpointHost: response.s3EndpointUrl,
+            accessKeyId: response.s3AccessKey,
+            accessSecret: response.s3SecretKey
+          } as EndpointCredentials
+          setVisibility(Dialogs.CredentialsDialog, true)
+        } else {
+          // Empty remaining credentials and close if open
+          credentials.value = undefined
+          setVisibility(Dialogs.CredentialsDialog, false)
+
+          // Notify with error
+          toast({
+            title: 'Error',
+            description: 'Received empty response. If this problem persists please contact an administrator.',
+            variant: 'destructive',
+            duration: 10000,
+          })
+        }
+      }).catch(error => {
+        loading.value = undefined // Re-activate buttons
+        EventBus.emit('spinStop')
+
+        // Empty remaining credentials
+        credentials.value = undefined
+
+        // Notify with error
+        toast({
+          title: 'Error',
+          //description: 'Something went wrong. If this problem persists please contact an administrator.',
+          description: error.message,
+          variant: 'destructive',
+          duration: 10000,
+        })
+      })
+}
+
+/* ----- END CREDENTIALS DIALOG ----- */
+</script>
+<template>
+  <div class="m-4 p-4 flex flex-row flex-wrap rounded-sm border border-dashed border-aruna-text/50 gap-x-4 gap-y-4 text-gray-600">
+    <div v-for="endpoint in endpoints"
+         class="flex flex-col space-y-1 bg-slate-900 border border-gray-700 shadow-sm rounded-xl p-4 md:p-5 text-gray-300">
+      <div class="flex flex-row font-bold items-center justify-between text-aruna-700 text-lg">
+        <span :class="{'animate-spin': loading}">{{ endpoint.name }}</span>
+        <IconDiscountCheck v-if="hasEndpoint(endpoint.id)"
+                           class="lex-shrink-0 size-6 ms-4 text-green-700"
+                           :class="{'animate-spin': loading}"/>
+      </div>
+      <div class="flex flex-row"
+           :class="{'animate-spin': loading}">
+        <span class="font-bold me-2 text-gray-400">ID:</span>
+        {{ endpoint.id }}
+      </div>
+      <div class="flex flex-row"
+           :class="{'animate-spin': loading}">
+        <span class="font-bold me-2 text-gray-400">Variant:</span>
+        {{ toEndpointVariantStr(endpoint.epVariant) }}
+      </div>
+      <div class="flex flex-row"
+           :class="{'animate-spin': loading}">
+        <span class="font-bold me-2 text-gray-400">Public:</span>
+        {{ endpoint.isPublic }}
+      </div>
+      <div class="flex flex-row"
+           :class="{'animate-spin': loading}">
+        <span class="font-bold me-2 text-gray-400">Status:</span>
+        {{ toComponentStatusStr(endpoint.status) }}
+      </div>
+
+      <div class="flex flex-row justify-end space-x-4"
+           :class="{'animate-spin': loading}">
+        <Button v-if="endpoint.id && hasEndpoint(endpoint.id)"
+                :disabled="loading"
+                @click="getS3Credentials(endpoint)"
+                class="mt-2 bg-aruna-800 hover:bg-aruna-700 text-white text-md rounded-sm">
+          <IconLoader v-if="loading === endpoint.id+'_get'" class="w-4 h-4 mr-2 animate-spin"/>
+          Get Credentials
+        </Button>
+        <Button v-if="endpoint.id && endpoint.status === storagemodelsv2ComponentStatus.COMPONENT_STATUS_AVAILABLE"
+                :disabled="loading"
+                @click="createS3Credentials(endpoint)"
+                class="mt-2 bg-aruna-800 hover:bg-aruna-700 text-white text-md rounded-sm">
+          <IconLoader v-if="loading === endpoint.id+'_create'" class="w-4 h-4 mr-2 animate-spin"/>
+          Create Credentials
+        </Button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Credentials Dialog -->
+  <CredentialsDialog :initial-open="credentialsDialogOpen"
+                     :with-button="false"
+                     :host-id="credentials?.endpointId || ''"
+                     :host-name="credentials?.endpointName || ''"
+                     :host-url="credentials?.endpointHost || ''"
+                     :access-key-id="credentials?.accessKeyId || ''"
+                     :access-secret="credentials?.accessSecret || ''"
+                     @update:open="clear"/>
+  <!-- END Credentials Dialog -->
+</template>
diff --git a/components/custom-ui/user/Tokens.vue b/components/custom-ui/user/Tokens.vue
new file mode 100644
index 00000000..72162463
--- /dev/null
+++ b/components/custom-ui/user/Tokens.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import {deleteUserToken} from "~/composables/api_wrapper";
+import EventBus from "~/composables/EventBus";
+import TokenDialog from "~/components/custom-ui/dialog/TokenDialog.vue";
+import {useToast} from "~/components/ui/toast";
+import {IconTrash} from "@tabler/icons-vue";
+import {DateFormatter} from "@internationalized/date";
+import {Scope} from "~/types/aruna-v3-enums";
+
+// DateFormatter for token expiry dates
+const df = new DateFormatter((navigator && navigator.language) || "de-DE", {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+})
+
+/* ----- Properties ----- */
+interface TokensProps {
+  tokens: Token[],
+}
+
+const props = defineProps<TokensProps>()
+const tokens = toRef(() => props.tokens)
+const personalTokens: Ref<Token[]> = ref([])
+const scopedTokens: Ref<Token[]> = ref([])
+watchEffect(() => {
+  personalTokens.value = scopedTokens.value = [] // Yeah. Don't do that.
+  for (const token of tokens.value) {
+    if (token.scope === Scope.Personal)
+      personalTokens.value.push(token)
+    else
+      scopedTokens.value.push(token)
+  }
+})
+/* ----- End Properties ----- */
+
+const {toast} = useToast();
+const dialogOpen = ref<boolean>(false)
+
+async function deleteToken(tokenId?: string) {
+  if (!tokenId) {
+    toast({
+      title: 'Warning',
+      description: 'Provided token id is empty or undefined.'
+    })
+    return
+  }
+
+  await deleteUserToken(tokenId)
+  EventBus.emit("updateUser")
+}
+
+// Update tokens on component activation
+onActivated(() => EventBus.emit('updateTokens'))
+</script>
+<template>
+  <div class="m-4 p-4 flex flex-col w-full lg:max-w-screen-xl lg:mx-auto gap-y-6 rounded-sm border border-dashed border-aruna-text/50">
+    <Table>
+      <TableCaption class="bg-aruna-muted p-2 text-lg text-aruna-text-accent">A list of your personal Aruna access tokens.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="text-lg">Id</TableHead>
+          <TableHead class="text-lg">Name</TableHead>
+          <TableHead class="text-lg">Scope</TableHead>
+          <TableHead class="text-lg">Expiry Date</TableHead>
+          <TableHead class="text-lg">Default Group</TableHead>
+          <TableHead class="text-lg">Default Realm</TableHead>
+          <TableHead class="text-lg">Component Id</TableHead>
+
+          <TableHead class="text-lg text-center">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-for="token in tokens" :key="token.id">
+          <TableCell class="font-medium">{{ token.id }}</TableCell>
+          <TableCell>{{ token.name }}</TableCell>
+          <TableCell>
+            {{ token.createdAt ? df.format(new Date(token.createdAt)) : 'Creation date is undefined' }}
+          </TableCell>
+          <TableCell>
+            {{ token.expiresAt ? df.format(new Date(token.expiresAt)) : 'Expiry date is undefined' }}
+          </TableCell>
+          <TableCell class="text-center">
+            <Button variant="outline"
+                    class="p-2 hover:bg-red-400"
+                    @click="deleteToken(token.id)">
+              <IconTrash/>
+            </Button>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+
+    <div class="w-full flex justify-end">
+      <Button @click="dialogOpen = true"
+              variant="outline"
+              class="mt-2 bg-transparent border-aruna-highlight text-aruna-highlight hover:hover:bg-aruna-highlight hover:text-aruna-text-accent rounded-sm">
+        Create Token
+      </Button>
+    </div>
+  </div>
+
+  <TokenDialog :initial-open="dialogOpen"
+               :with-button="false"
+               @update:open="dialogOpen = false"/>
+</template>
\ No newline at end of file
diff --git a/components/footer.vue b/components/footer.vue
index 1f5db7e0..0aabd1c6 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -3,7 +3,7 @@ import {IconBrandGithub} from "@tabler/icons-vue";
 </script>
 <template>
   <div class="w-[100vw] bg-aruna-bg/90">
-    <footer class="w-full max-w-[85rem] p-4 sm:px-6 lg:px-8 mx-auto">
+    <footer class="w-full p-4 sm:px-6 lg:px-8 mx-auto">
       <!-- Grid -->
       <div class="grid grid-cols-1 md:grid-cols-3 items-center gap-5 text-center">
         <div>
diff --git a/components/modal/Ontology.vue b/components/modal/Ontology.vue
deleted file mode 100644
index 67a9efb0..00000000
--- 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 224d5476..00000000
--- 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 aa8225a5..00000000
--- 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/modal/relation.vue b/components/modal/relation.vue
deleted file mode 100644
index 96a2afc8..00000000
--- a/components/modal/relation.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<script lang="ts" setup>
-import {IconExclamationCircle, IconX} from "@tabler/icons-vue";
-import {
-  type v2InternalRelation,
-  v2InternalRelationVariant,
-  type v2Relation,
-  v2RelationDirection,
-  v2ResourceVariant
-} from "~/composables/aruna_api_json";
-import {ULID_REGEX} from "~/composables/constants";
-
-const props = defineProps<{
-  modalId: string,
-}>()
-
-const emit = defineEmits<{
-  'add-relation': [relation: v2Relation]
-}>()
-
-enum ResourceVariant {
-  Project = 'Project',
-  Collection = 'Collection',
-  Dataset = 'Dataset',
-  Object = 'Object'
-}
-
-enum InternalRelationVariant {
-  BelongsTo = 'Belongs To',
-  Origin = 'Origin',
-  Version = 'Version',
-  Metadata = 'Metadata',
-  Policy = 'Policy',
-  Deleted = 'Deleted',
-  Custom = 'Custom',
-}
-
-enum RelationDirection {
-  Inbound = 'Inbound',
-  Outbound = 'Outbound',
-}
-
-const resourceId = ref('')
-const resourceIdErr: Ref<string | undefined> = ref('Please enter a resource id.')
-const resourceVariant = ref(ResourceVariant.Project)
-const relationVariant = ref(InternalRelationVariant.BelongsTo)
-const customVariant = ref('')
-const customVariantErr: Ref<string | undefined> = ref(undefined)
-const relationDirection = ref(RelationDirection.Inbound)
-
-const validState = ref(false)
-const validationStates = ref(new Map<string, boolean>())
-validationStates.value.set('resource_id', false)
-validationStates.value.set('custom_variant', true)
-
-
-// Validation
-watch(resourceId, () => validateResourceId())
-function validateResourceId() {
-  if (resourceId.value.length > 0) {
-    const valid = ULID_REGEX.test(resourceId.value)
-    validationStates.value.set('resource_id', valid)
-    resourceIdErr.value = valid ? undefined : 'Please enter a valid ULID'
-  } else {
-    validationStates.value.set('resource_id', false)
-    resourceIdErr.value = 'Please enter a resource id'
-  }
-  validate()
-}
-
-watch(resourceVariant, () => validate())
-watch(relationVariant, () => validateCustomVariant())
-watch(customVariant, () => validateCustomVariant())
-function validateCustomVariant() {
-  if (relationVariant.value === InternalRelationVariant.Custom && customVariant.value.length <= 0) {
-    validationStates.value.set('custom_variant', false)
-    customVariantErr.value = 'Please enter a custom relation name'
-  } else {
-    validationStates.value.set('custom_variant', true)
-    customVariantErr.value = undefined
-  }
-  validate()
-}
-
-function validate() {
-  for (const state of validationStates.value.values()) {
-    if (!state) {
-      validState.value = false
-      return
-    }
-  }
-  validState.value = true
-}
-
-function convertResourceVariant(variant: ResourceVariant): v2ResourceVariant {
-  switch (variant) {
-    case ResourceVariant.Project:
-      return v2ResourceVariant.RESOURCE_VARIANT_PROJECT
-    case ResourceVariant.Collection:
-      return v2ResourceVariant.RESOURCE_VARIANT_COLLECTION
-    case ResourceVariant.Dataset:
-      return v2ResourceVariant.RESOURCE_VARIANT_DATASET
-    case ResourceVariant.Object:
-      return v2ResourceVariant.RESOURCE_VARIANT_OBJECT
-
-  }
-}
-
-function convertInternalRelationVariant(variant: InternalRelationVariant): v2InternalRelationVariant {
-  switch (variant) {
-    case InternalRelationVariant.BelongsTo:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_BELONGS_TO
-    case InternalRelationVariant.Origin:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_ORIGIN
-    case InternalRelationVariant.Version:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_VERSION
-    case InternalRelationVariant.Metadata:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_METADATA
-    case InternalRelationVariant.Policy:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_POLICY
-    case InternalRelationVariant.Deleted:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_DELETED
-    case InternalRelationVariant.Custom:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_CUSTOM
-  }
-}
-
-function convertRelationDirection(direction: RelationDirection): v2RelationDirection {
-  switch (direction) {
-    case RelationDirection.Inbound:
-      return v2RelationDirection.RELATION_DIRECTION_INBOUND
-    case RelationDirection.Outbound:
-      return v2RelationDirection.RELATION_DIRECTION_OUTBOUND
-  }
-}
-
-function reset() {
-  resourceId.value = ''
-  resourceVariant.value = ResourceVariant.Project
-  relationVariant.value = InternalRelationVariant.BelongsTo
-  customVariant.value = ''
-  relationDirection.value = RelationDirection.Inbound
-}
-
-function submit() {
-  let internal_relation = {
-    resourceId: resourceId.value,
-    resourceVariant: convertResourceVariant(resourceVariant.value),
-    definedVariant: convertInternalRelationVariant(relationVariant.value),
-    customVariant: relationVariant.value === InternalRelationVariant.Custom ? customVariant.value : undefined,
-    direction: convertRelationDirection(relationDirection.value)
-  } as v2InternalRelation
-
-  emit('add-relation', {internal: internal_relation} as v2Relation)
-  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 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 Internal Relation
-          </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 overflow-y-auto">
-          <!-- Resource id -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="resourceId"
-                     autofocus
-                     id="hs-floating-input-resource"
-                     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="A resource id"
-                     type="text">
-              <label for="hs-floating-input-resource"
-                     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">Resource ID</label>
-              <div :class="{ 'hidden': typeof resourceIdErr === 'undefined'}"
-                   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': typeof resourceIdErr === 'undefined'}" class="text-sm text-red-600 mt-1"
-               id="hs-validation-name-error-helper">{{ resourceIdErr }}
-            </p>
-          </div>
-          <!-- End Resource id -->
-
-          <!-- Resource variant -->
-          <div class="relative">
-            <select v-model="resourceVariant"
-                    class="my-2 peer p-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
-                    focus:pt-6
-                    focus:pb-2
-                    [&:not(:placeholder-shown)]:pt-6
-                    [&:not(:placeholder-shown)]:pb-2
-                    autofill:pt-6
-                    autofill:pb-2">
-              <option v-for="variant in ResourceVariant" :value="variant"
-                      v-bind:selected="variant === ResourceVariant.Project">
-                {{ variant }}
-              </option>
-            </select>
-            <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">Resource Variant</label>
-          </div>
-          <!-- End Resource variant -->
-
-          <!-- Relation direction -->
-          <div class="relative">
-            <select v-model="relationDirection"
-                    class="my-2 peer p-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
-                    focus:pt-6
-                    focus:pb-2
-                    [&:not(:placeholder-shown)]:pt-6
-                    [&:not(:placeholder-shown)]:pb-2
-                    autofill:pt-6
-                    autofill:pb-2">
-              <option v-for="direction in RelationDirection" :value="direction"
-                      v-bind:selected="direction === RelationDirection.Outbound">
-                {{ direction }}
-              </option>
-            </select>
-            <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">Relation Direction</label>
-          </div>
-          <!-- End Relation direction -->
-
-          <!-- Relation variant -->
-          <div class="relative">
-            <select v-model="relationVariant"
-                    class="my-2 peer p-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
-                    focus:pt-6
-                    focus:pb-2
-                    [&:not(:placeholder-shown)]:pt-6
-                    [&:not(:placeholder-shown)]:pb-2
-                    autofill:pt-6
-                    autofill:pb-2">
-              <option v-for="variant in InternalRelationVariant" :value="variant"
-                      v-bind:selected="variant === InternalRelationVariant.BelongsTo">
-                {{ variant }}
-              </option>
-            </select>
-            <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">Relation Variant</label>
-          </div>
-          <!-- End Relation variant -->
-
-          <!-- Custom variant input -->
-          <div v-if="relationVariant === InternalRelationVariant.Custom" class="space-y-0">
-            <div class="relative">
-              <input v-model="customVariant"
-                     id="hs-floating-input-resource"
-                     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="A resource id" type="text">
-              <label for="hs-floating-input-resource"
-                     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">Custom Variant</label>
-              <div :class="{ 'hidden': typeof customVariantErr === 'undefined'}"
-                   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': typeof customVariantErr === 'undefined'}" class="text-sm text-red-600 mt-1"
-               id="hs-validation-name-error-helper">{{ customVariantErr }}
-            </p>
-          </div>
-          <!-- End Custom variant input -->
-        </div>
-        <!-- End Relation variant -->
-
-        <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="!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-700 text-white hover:bg-aruna-800 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Add Relation
-          </button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/components/navigation/top.vue b/components/navigation/top.vue
index f77ef90d..366750b6 100644
--- a/components/navigation/top.vue
+++ b/components/navigation/top.vue
@@ -11,11 +11,11 @@ import {
   IconNews,
   IconBook
 } from "@tabler/icons-vue"
-import type {v2User} from "~/composables/aruna_api_json/models/v2User"
 import LoginDialog from "~/components/custom-ui/dialog/LoginDialog.vue";
+import type {User} from "~/composables/api_wrapper";
 
 // Fetch user from global state
-const user_state: Ref<v2User | undefined> = inject('userRef', ref(undefined))
+const user_state: Ref<User | undefined> = inject('userRef', ref(undefined))
 const forceRefresh = ref(0)
 
 onMounted(() => forceRefresh.value += 1);
@@ -43,6 +43,12 @@ onMounted(() => forceRefresh.value += 1);
             Search
           </NuxtLink>
 
+          <NuxtLink v-if="user_state"
+                    class="font-medium text-aruna-text-accent focus:outline-none focus:ring-1 focus:ring-aruna-highlight"
+                    to="/user/dashboard">
+            Dashboard
+          </NuxtLink>
+
           <NuxtLink
               class="font-medium text-aruna-text-accent focus:outline-none focus:ring-1 focus:ring-aruna-highlight"
               to="/news">
@@ -50,32 +56,35 @@ onMounted(() => forceRefresh.value += 1);
           </NuxtLink>
 
           <!-- Dropdown Start -->
-          <div class="hs-dropdown [--strategy:static] sm:[--strategy:fixed] [--adaptive:none]">
-            <button id="hs-mega-menu-basic-dr" type="button"
-                    class="flex items-center w-full text-aruna-text-accent font-medium">
+          <DropdownMenu>
+            <DropdownMenuTrigger class="flex items-center gap-x-2 font-medium text-aruna-text-accent focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
               Docs
-              <IconChevronDown class="ms-1 flex-shrink-0 w-5 h-auto"/>
-            </button>
-
-            <div
-                class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 z-10 sm:shadow-md rounded-md p-2 bg-aruna-bg/90 border-aruna-text/50 divide-aruna-text/50 before:absolute top-full sm:border before:-top-5 before:start-0 before:w-full before:h-5 hidden">
-              <NuxtLink href="https://github.com/arunaengine/api"
-                        class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-aruna-text hover:bg-aruna-fg focus:ring-1 focus:ring-aruna-highlight"
-                        target="_blank">
-                API
-              </NuxtLink>
-              <NuxtLink href="https://docs.aruna-engine.org/latest/get_started/basic_usage/00_index/"
-                        class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-aruna-text hover:bg-aruna-fg focus:ring-1 focus:ring-aruna-highlight"
-                        target="_blank">
-                Getting Started
-              </NuxtLink>
-              <NuxtLink href="https://docs.aruna-engine.org/latest/internal_data_structure/internal_data_structure/"
-                        class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-aruna-text hover:bg-aruna-fg focus:ring-1 focus:ring-aruna-highlight"
-                        target="_blank">
-                Data Structure
-              </NuxtLink>
-            </div>
-          </div>
+              <IconChevronDown class="size-4"/>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
+                <NuxtLink href="https://github.com/arunaengine/api"
+                          target="_blank"
+                          class="w-full">
+                  API
+                </NuxtLink>
+              </DropdownMenuItem>
+              <DropdownMenuItem class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
+                <NuxtLink href="https://docs.aruna-engine.org/latest/get_started/basic_usage/00_index/"
+                          target="_blank"
+                          class="w-full">
+                  Getting Started
+                </NuxtLink>
+              </DropdownMenuItem>
+              <DropdownMenuItem class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
+                <NuxtLink href="https://docs.aruna-engine.org/latest/internal_data_structure/internal_data_structure/"
+                          target="_blank"
+                          class="w-full">
+                  Data Structure
+                </NuxtLink>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
           <!-- Dropdown End -->
 
           <NuxtLink href="https://github.com/arunaengine"
@@ -91,39 +100,23 @@ onMounted(() => forceRefresh.value += 1);
           <div>
             <DropdownMenu v-if="user_state">
               <DropdownMenuTrigger class="px-2 py-1 flex items-center justify-center gap-x-2 rounded-sm border border-aruna-text-accent">
-                {{ user_state?.displayName }}
+                {{ user_state?.first_name }} {{ user_state?.last_name }}
                 <IconMenu2 class="size-5"/>
               </DropdownMenuTrigger>
               <DropdownMenuContent class="bg-aruna-muted">
-                <DropdownMenuLabel v-if="user_state && user_state.attributes?.globalAdmin"
+                <DropdownMenuLabel v-if="user_state"
                                    class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
-                  <NuxtLink to="/user/admin"
-                            class="flex items-center gap-x-2">
-                    <IconUserUp class="size-4"/>
-                    Administration
-                  </NuxtLink>
-                </DropdownMenuLabel>
-
-                <DropdownMenuSeparator v-if="user_state && user_state.attributes?.globalAdmin"/>
-
-                <DropdownMenuLabel class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
-                  <NuxtLink to="/user/account"
+                  <NuxtLink to="/user/dashboard"
                             class="flex items-center gap-x-2">
                     <IconUserScan class="size-4"/>
-                    Account
-                  </NuxtLink>
-                </DropdownMenuLabel>
-                <DropdownMenuLabel class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
-                  <NuxtLink to="/user/resources"
-                            class="flex items-center gap-x-2">
-                    <IconBucket class="size-4"/>
-                    Resources
+                    Dashboard
                   </NuxtLink>
                 </DropdownMenuLabel>
 
                 <DropdownMenuSeparator/>
 
-                <DropdownMenuLabel class="flex sm:hidden hover:bg-aruna-fg focus:bg-aruna-fg">
+                <DropdownMenuLabel v-if="user_state"
+                                   class="flex sm:hidden hover:bg-aruna-fg focus:bg-aruna-fg">
                   <NuxtLink to="/explore"
                             class="flex items-center gap-x-2">
                     <IconSearch class="flex-shrink-0 size-4"/>
diff --git a/components/search_results.vue b/components/search_results.vue
index fe1c755f..60b1eaf2 100644
--- a/components/search_results.vue
+++ b/components/search_results.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import type {v2GenericResource} from '@/composables/aruna_api_json';
 
 interface SearchResultListProps {
-  resources: v2GenericResource[]
+  resources: Resource[],
+  fetching: boolean,
 }
 const {resources} = defineProps<SearchResultListProps>()
 </script>
 
 <template>
-  <div v-if="resources.length == 0">
+  <div v-if="fetching">
+    <h2 class="text-aruna-text-accent font-bold text-center">Fetching Results</h2>
+  </div>
+
+  <div v-if="resources.length == 0 && !fetching">
     <h2 class="text-aruna-text-accent font-bold text-center">No results found</h2>
   </div>
 
diff --git a/components/ui/avatar/Avatar.vue b/components/ui/avatar/Avatar.vue
new file mode 100644
index 00000000..80ac365a
--- /dev/null
+++ b/components/ui/avatar/Avatar.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AvatarRoot } from 'radix-vue'
+import { type AvatarVariants, avatarVariant } from '.'
+import { cn } from '@/utils/shadcn'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
diff --git a/components/ui/avatar/AvatarFallback.vue b/components/ui/avatar/AvatarFallback.vue
new file mode 100644
index 00000000..a671a219
--- /dev/null
+++ b/components/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
diff --git a/components/ui/avatar/AvatarImage.vue b/components/ui/avatar/AvatarImage.vue
new file mode 100644
index 00000000..43499fa2
--- /dev/null
+++ b/components/ui/avatar/AvatarImage.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>
diff --git a/components/ui/avatar/index.ts b/components/ui/avatar/index.ts
new file mode 100644
index 00000000..c4af1a66
--- /dev/null
+++ b/components/ui/avatar/index.ts
@@ -0,0 +1,24 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
diff --git a/components/ui/breadcrumb/Breadcrumb.vue b/components/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 00000000..72ca1437
--- /dev/null
+++ b/components/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/components/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 00000000..c6d5841a
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <DotsHorizontalIcon class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbItem.vue b/components/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 00000000..4140a500
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbLink.vue b/components/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 00000000..6afcb6cd
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbList.vue b/components/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 00000000..d57efa1d
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbPage.vue b/components/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 00000000..8984c0f3
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbSeparator.vue b/components/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 00000000..c3ea923d
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { ChevronRightIcon } from '@radix-icons/vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRightIcon />
+    </slot>
+  </li>
+</template>
diff --git a/components/ui/breadcrumb/index.ts b/components/ui/breadcrumb/index.ts
new file mode 100644
index 00000000..05909832
--- /dev/null
+++ b/components/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
diff --git a/components/ui/command/Command.vue b/components/ui/command/Command.vue
new file mode 100644
index 00000000..fd1bdcaa
--- /dev/null
+++ b/components/ui/command/Command.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..53f520bc
--- /dev/null
+++ b/components/ui/command/CommandDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import Command from './Command.vue'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+
+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 00000000..45c158f7
--- /dev/null
+++ b/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxEmptyProps } from 'radix-vue'
+import { ComboboxEmpty } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..c82464b4
--- /dev/null
+++ b/components/ui/command/CommandGroup.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxGroupProps } from 'radix-vue'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..1829cc86
--- /dev/null
+++ b/components/ui/command/CommandInput.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..5e08d2ad
--- /dev/null
+++ b/components/ui/command/CommandItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..34f5528d
--- /dev/null
+++ b/components/ui/command/CommandList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..aed591f9
--- /dev/null
+++ b/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxSeparatorProps } from 'radix-vue'
+import { ComboboxSeparator } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..bcec7604
--- /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 00000000..0e35f4b9
--- /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/radio-group/RadioGroup.vue b/components/ui/radio-group/RadioGroup.vue
new file mode 100644
index 00000000..eec5d4d8
--- /dev/null
+++ b/components/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    :class="cn('grid gap-2', props.class)"
+    v-bind="forwarded"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>
diff --git a/components/ui/radio-group/RadioGroupItem.vue b/components/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 00000000..6be2145e
--- /dev/null
+++ b/components/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { CheckIcon } from '@radix-icons/vue'
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  type RadioGroupItemProps,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <CheckIcon class="h-3.5 w-3.5 fill-primary" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/components/ui/radio-group/index.ts b/components/ui/radio-group/index.ts
new file mode 100644
index 00000000..fa1da9c2
--- /dev/null
+++ b/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'
diff --git a/components/ui/resizable/ResizableHandle.vue b/components/ui/resizable/ResizableHandle.vue
new file mode 100644
index 00000000..7800add1
--- /dev/null
+++ b/components/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { DragHandleDots2Icon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/components/ui/resizable/ResizablePanelGroup.vue b/components/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 00000000..8fc0ad89
--- /dev/null
+++ b/components/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>
diff --git a/components/ui/resizable/index.ts b/components/ui/resizable/index.ts
new file mode 100644
index 00000000..22a0a8a8
--- /dev/null
+++ b/components/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { SplitterPanel as ResizablePanel } from 'radix-vue'
diff --git a/components/ui/scroll-area/ScrollArea.vue b/components/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 00000000..f4f9b869
--- /dev/null
+++ b/components/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'radix-vue'
+import ScrollBar from './ScrollBar.vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/components/ui/scroll-area/ScrollBar.vue b/components/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 00000000..e5350531
--- /dev/null
+++ b/components/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/components/ui/scroll-area/index.ts b/components/ui/scroll-area/index.ts
new file mode 100644
index 00000000..2bd4fae5
--- /dev/null
+++ b/components/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'
diff --git a/components/ui/select/Select.vue b/components/ui/select/Select.vue
new file mode 100644
index 00000000..adc42fdf
--- /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 00000000..10c7fa5b
--- /dev/null
+++ b/components/ui/select/SelectContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..8ce69f93
--- /dev/null
+++ b/components/ui/select/SelectGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..d31e59ef
--- /dev/null
+++ b/components/ui/select/SelectItem.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..a0bb5c24
--- /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 00000000..92bf4169
--- /dev/null
+++ b/components/ui/select/SelectLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..e86ab856
--- /dev/null
+++ b/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..c19b6602
--- /dev/null
+++ b/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronUpIcon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..2a4a2979
--- /dev/null
+++ b/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..f3c87e30
--- /dev/null
+++ b/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { CaretSortIcon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..4bc37dd8
--- /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 00000000..b1d89eed
--- /dev/null
+++ b/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectValue } from './SelectValue.vue'
+export { default as SelectTrigger } from './SelectTrigger.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 SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
diff --git a/components/ui/sheet/Sheet.vue b/components/ui/sheet/Sheet.vue
new file mode 100644
index 00000000..a04c0262
--- /dev/null
+++ b/components/ui/sheet/Sheet.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/components/ui/sheet/SheetClose.vue b/components/ui/sheet/SheetClose.vue
new file mode 100644
index 00000000..a64703e5
--- /dev/null
+++ b/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'radix-vue'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/components/ui/sheet/SheetContent.vue b/components/ui/sheet/SheetContent.vue
new file mode 100644
index 00000000..18e7bdb1
--- /dev/null
+++ b/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { Cross2Icon } from '@radix-icons/vue'
+import { type SheetVariants, sheetVariants } from '.'
+import { cn } from '@/utils/shadcn'
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: SheetVariants['side']
+  hideClose?: boolean
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, side, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose v-if="!props.hideClose"
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <Cross2Icon class="w-4 h-4" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/components/ui/sheet/SheetDescription.vue b/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 00000000..f219fe00
--- /dev/null
+++ b/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/components/ui/sheet/SheetFooter.vue b/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 00000000..bd1fc85f
--- /dev/null
+++ b/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sheet/SheetHeader.vue b/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 00000000..8fbc9d34
--- /dev/null
+++ b/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sheet/SheetTitle.vue b/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 00000000..7ea63ec3
--- /dev/null
+++ b/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/components/ui/sheet/SheetTrigger.vue b/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 00000000..ee0c12ff
--- /dev/null
+++ b/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/components/ui/sheet/index.ts b/components/ui/sheet/index.ts
new file mode 100644
index 00000000..fae3f08c
--- /dev/null
+++ b/components/ui/sheet/index.ts
@@ -0,0 +1,31 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+
+export const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/components/ui/skeleton/Skeleton.vue b/components/ui/skeleton/Skeleton.vue
new file mode 100644
index 00000000..dfe4b41a
--- /dev/null
+++ b/components/ui/skeleton/Skeleton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+interface SkeletonProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
+</template>
diff --git a/components/ui/skeleton/index.ts b/components/ui/skeleton/index.ts
new file mode 100644
index 00000000..be21fad3
--- /dev/null
+++ b/components/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/components/ui/table/Table.vue b/components/ui/table/Table.vue
new file mode 100644
index 00000000..5b42b40e
--- /dev/null
+++ b/components/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/components/ui/table/TableBody.vue b/components/ui/table/TableBody.vue
new file mode 100644
index 00000000..81fb04ac
--- /dev/null
+++ b/components/ui/table/TableBody.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>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/components/ui/table/TableCaption.vue b/components/ui/table/TableCaption.vue
new file mode 100644
index 00000000..aafe126b
--- /dev/null
+++ b/components/ui/table/TableCaption.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>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/components/ui/table/TableCell.vue b/components/ui/table/TableCell.vue
new file mode 100644
index 00000000..0ca9bb34
--- /dev/null
+++ b/components/ui/table/TableCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/components/ui/table/TableEmpty.vue b/components/ui/table/TableEmpty.vue
new file mode 100644
index 00000000..6065327e
--- /dev/null
+++ b/components/ui/table/TableEmpty.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import TableRow from './TableRow.vue'
+import TableCell from './TableCell.vue'
+import { cn } from '@/utils/shadcn'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/components/ui/table/TableFooter.vue b/components/ui/table/TableFooter.vue
new file mode 100644
index 00000000..7de47a55
--- /dev/null
+++ b/components/ui/table/TableFooter.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>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>
diff --git a/components/ui/table/TableHead.vue b/components/ui/table/TableHead.vue
new file mode 100644
index 00000000..881e75ef
--- /dev/null
+++ b/components/ui/table/TableHead.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>
+  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
+    <slot />
+  </th>
+</template>
diff --git a/components/ui/table/TableHeader.vue b/components/ui/table/TableHeader.vue
new file mode 100644
index 00000000..b1d2dbad
--- /dev/null
+++ b/components/ui/table/TableHeader.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>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/components/ui/table/TableRow.vue b/components/ui/table/TableRow.vue
new file mode 100644
index 00000000..7e4797af
--- /dev/null
+++ b/components/ui/table/TableRow.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>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/components/ui/table/index.ts b/components/ui/table/index.ts
new file mode 100644
index 00000000..6fa181be
--- /dev/null
+++ b/components/ui/table/index.ts
@@ -0,0 +1,9 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableRow } from './TableRow.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
diff --git a/components/ui/tabs/Tabs.vue b/components/ui/tabs/Tabs.vue
new file mode 100644
index 00000000..2fa0971f
--- /dev/null
+++ b/components/ui/tabs/Tabs.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>
diff --git a/components/ui/tabs/TabsContent.vue b/components/ui/tabs/TabsContent.vue
new file mode 100644
index 00000000..a6f15295
--- /dev/null
+++ b/components/ui/tabs/TabsContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/components/ui/tabs/TabsList.vue b/components/ui/tabs/TabsList.vue
new file mode 100644
index 00000000..41f90da6
--- /dev/null
+++ b/components/ui/tabs/TabsList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/components/ui/tabs/TabsTrigger.vue b/components/ui/tabs/TabsTrigger.vue
new file mode 100644
index 00000000..0c944359
--- /dev/null
+++ b/components/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      props.class,
+    )"
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>
diff --git a/components/ui/tabs/index.ts b/components/ui/tabs/index.ts
new file mode 100644
index 00000000..fbea0c68
--- /dev/null
+++ b/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsContent } from './TabsContent.vue'
diff --git a/components/ui/tags-input/TagsInput.vue b/components/ui/tags-input/TagsInput.vue
new file mode 100644
index 00000000..2bbadde0
--- /dev/null
+++ b/components/ui/tags-input/TagsInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)">
+    <slot />
+  </TagsInputRoot>
+</template>
diff --git a/components/ui/tags-input/TagsInputInput.vue b/components/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 00000000..7d316a13
--- /dev/null
+++ b/components/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/components/ui/tags-input/TagsInputItem.vue b/components/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 00000000..9209caf6
--- /dev/null
+++ b/components/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/components/ui/tags-input/TagsInputItemDelete.vue b/components/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 00000000..7a0f84d1
--- /dev/null
+++ b/components/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { Cross2Icon } from '@radix-icons/vue'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <Cross2Icon class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/components/ui/tags-input/TagsInputItemText.vue b/components/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 00000000..c499bad3
--- /dev/null
+++ b/components/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/components/ui/tags-input/index.ts b/components/ui/tags-input/index.ts
new file mode 100644
index 00000000..31305f34
--- /dev/null
+++ b/components/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/components/ui/textarea/Textarea.vue b/components/ui/textarea/Textarea.vue
new file mode 100644
index 00000000..32fa7fd9
--- /dev/null
+++ b/components/ui/textarea/Textarea.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..6a7ab2a7
--- /dev/null
+++ b/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'
diff --git a/components/ui/tooltip/Tooltip.vue b/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 00000000..b421f0fe
--- /dev/null
+++ b/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>
diff --git a/components/ui/tooltip/TooltipContent.vue b/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 00000000..14003d4e
--- /dev/null
+++ b/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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', props.class)">
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/components/ui/tooltip/TooltipProvider.vue b/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 00000000..816505d6
--- /dev/null
+++ b/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from 'radix-vue'
+
+const props = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/components/ui/tooltip/TooltipTrigger.vue b/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 00000000..f5b0e57f
--- /dev/null
+++ b/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/components/ui/tooltip/index.ts b/components/ui/tooltip/index.ts
new file mode 100644
index 00000000..82049b48
--- /dev/null
+++ b/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
diff --git a/composables/Events.ts b/composables/Events.ts
new file mode 100644
index 00000000..abcc1d3d
--- /dev/null
+++ b/composables/Events.ts
@@ -0,0 +1,45 @@
+import EventBus from "~/composables/EventBus";
+
+// by convention, composable function names start with "use"
+export async function useEvents(refs: Ref[], user_id: Ref<string | undefined>) {
+  // state encapsulated and managed by the composable
+  const events: Ref<BaseTx[] | null> = ref(null)
+  const {refresh: refreshEvents} = await useFetch<GetEventsResponse>('/api/v3/events', {
+    server: false,
+    lazy: true,
+    watch: refs,
+    query: {
+      subscriber_id: user_id
+    },
+    onResponse({response}) {
+      let v3Events: any[] = []
+      if (response.ok) {
+        for (const event of response._data.events) {
+          const event_id = Object.keys(event)[0]
+          if (event_id) {
+            let eventMeta = event[event_id]
+            eventMeta.event_id = event_id
+            v3Events.push(eventMeta)
+          }
+        }
+      } else {
+        console.warn('[GetEvents] Response was not ok', response)
+      }
+
+      events.value = v3Events
+    },
+    onResponseError({response}) {
+      console.error('[GetEvents] Error response:', response)
+      events.value = []
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateEvents', async () => {
+    console.log('Triggered events update')
+    await refreshEvents()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {events, refreshEvents}
+}
\ No newline at end of file
diff --git a/composables/Groups.ts b/composables/Groups.ts
new file mode 100644
index 00000000..5a9f287b
--- /dev/null
+++ b/composables/Groups.ts
@@ -0,0 +1,33 @@
+import EventBus from "~/composables/EventBus";
+import type {GroupInfo} from '~/composables/api_wrapper'
+
+// by convention, composable function names start with "use"
+export async function useGroups() {
+  // state encapsulated and managed by the composable
+  const groups: Ref<GroupInfo[] | null> = ref(null)
+  const {refresh: refreshGroups} = await useFetch<GetGroupsFromUserResponse>('/api/v3/groups', {
+    server: false,
+    lazy: true,
+    onResponse({response}) {
+      if (response) {
+        groups.value = response._data.groups.map((ele: any) => {
+          const [group, permission] = ele
+          return {group: group, permission: permission} as GroupInfo
+        })
+        return
+      }
+
+      console.warn('[GetGroupsFromUser] Response was undefined. Returning empty array.')
+      groups.value = []
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateGroups', async () => {
+    console.log('Triggered groups update')
+    await refreshGroups()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {groups, refreshGroups}
+}
\ No newline at end of file
diff --git a/composables/Licenses.ts b/composables/Licenses.ts
new file mode 100644
index 00000000..82648db5
--- /dev/null
+++ b/composables/Licenses.ts
@@ -0,0 +1,20 @@
+import EventBus from "~/composables/EventBus";
+
+// by convention, composable function names start with "use"
+export async function useLicenses(refs: Ref[] | undefined) {
+  // state encapsulated and managed by the composable
+  const {data: licenses, refresh: refreshLicenses} = await useFetch<GetLicensesResponse>('/api/v3/licenses', {
+    server: false,
+    lazy: true,
+    watch: refs
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateLicenses', async () => {
+    console.log('Triggered licenses update')
+    await refreshLicenses()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {licenses, refreshLicenses}
+}
\ No newline at end of file
diff --git a/composables/Projects.ts b/composables/Projects.ts
new file mode 100644
index 00000000..b45ec757
--- /dev/null
+++ b/composables/Projects.ts
@@ -0,0 +1,38 @@
+import EventBus from "~/composables/EventBus";
+import type {ResourceElement, SearchResponse} from "~/composables/api_wrapper";
+import {GenericNodeType} from "~/types/aruna-v3-enums";
+
+// by convention, composable function names start with "use"
+export async function useProjects() {
+  // state encapsulated and managed by the composable
+  const projects: Ref<ResourceElement[] | null> = ref(null)
+  const {refresh: refreshProjects} = await useFetch<SearchResponse>('/api/v3/search', {
+    server: false,
+    lazy: true,
+    query: {
+      filter: 'variant=0' // Projects
+    },
+    onResponse({response}) {
+      if (response) {
+        let resources: ResourceElement[] = []
+        for (const resource of response._data.resources) {
+          if (resource.type === GenericNodeType.Resource) {
+            let extended = resource as any // lol, cast to any to allow dynamic adding of properties
+            extended.children = []
+            resources.push(extended as ResourceElement)
+          }
+        }
+        projects.value = resources
+      }
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateProjects', async () => {
+    console.log('Triggered projects update')
+    await refreshProjects()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {projects, refreshProjects}
+}
\ No newline at end of file
diff --git a/composables/Realms.ts b/composables/Realms.ts
new file mode 100644
index 00000000..95e7507b
--- /dev/null
+++ b/composables/Realms.ts
@@ -0,0 +1,29 @@
+import EventBus from "~/composables/EventBus";
+
+// by convention, composable function names start with "use"
+export async function useRealms() {
+  // state encapsulated and managed by the composable
+  const realms: Ref<Realm[] | null> = ref(null)
+  const {refresh: refreshRealms} = await useFetch<GetRealmsFromUserResponse>('/api/v3/realms', {
+    server: false,
+    lazy: true,
+    onResponse({response}) {
+      if (response) {
+        realms.value = response._data.realms
+        return
+      }
+
+      console.warn('[GetRealmsFromUser] Response was undefined. Returning empty array.')
+      realms.value = []
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateRealms', async () => {
+    console.log('Triggered realms update')
+    await refreshRealms()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {realms, refreshRealms}
+}
\ No newline at end of file
diff --git a/composables/Stats.ts b/composables/Stats.ts
new file mode 100644
index 00000000..b738677b
--- /dev/null
+++ b/composables/Stats.ts
@@ -0,0 +1,20 @@
+import EventBus from "~/composables/EventBus";
+
+// by convention, composable function names start with "use"
+export async function useStats(refs: Ref[] | undefined) {
+  // state encapsulated and managed by the composable
+  const {data: stats, refresh: refreshStats} = await useFetch<GetStatsResponse>('/api/v3/stats', {
+    server: false,
+    lazy: true,
+    watch: refs
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateStats', async () => {
+    console.log('Triggered stats update')
+    await refreshStats()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {stats, refreshStats}
+}
\ No newline at end of file
diff --git a/composables/Tokens.ts b/composables/Tokens.ts
new file mode 100644
index 00000000..ddac0504
--- /dev/null
+++ b/composables/Tokens.ts
@@ -0,0 +1,45 @@
+import EventBus from "~/composables/EventBus";
+import type {CreateTokenRequest, CreateTokenResponse} from "~/composables/api_wrapper";
+
+// by convention, composable function names start with "use"
+export async function useTokens() {
+  // state encapsulated and managed by the composable
+  const tokens: Ref<Token[] | null> = ref(null)
+  const {refresh: refreshTokens} = await useFetch<GetTokensFromUserResponse>('/api/v3/tokens', {
+    server: false,
+    lazy: true,
+    onResponse({response}) {
+      if (response) {
+        console.info('[GetTokensFromUser] Fetched tokens:', response._data.tokens)
+        tokens.value = response._data.tokens
+        return
+      }
+
+      console.warn('[GetTokensFromUser] Response was undefined. Returning empty array.')
+      tokens.value = []
+    },
+    onResponseError({ response }) {
+      console.error('[]')
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateTokens', async () => {
+    console.log('Triggered tokens update')
+    await refreshTokens()
+  })
+
+  async function createToken(request: CreateTokenRequest): Promise<CreateTokenResponse> {
+    return await $fetch<CreateTokenResponse>('/api/v3/tokens', {
+      method: 'POST'
+    }).then(response => {
+      if (response)
+        tokens.value ? tokens.value.push(response.token) : tokens.value = [response.token]
+
+      return response
+    })
+  }
+
+  // expose managed state (and refresh alternative) as return value
+  return {tokens, refreshTokens, createToken}
+}
\ No newline at end of file
diff --git a/composables/User.ts b/composables/User.ts
new file mode 100644
index 00000000..240bed1a
--- /dev/null
+++ b/composables/User.ts
@@ -0,0 +1,40 @@
+import EventBus from "~/composables/EventBus";
+import type {GetUserResponse} from "~/composables/api_wrapper";
+
+// by convention, composable function names start with "use"
+export async function useUser(maintenanceMode: boolean) {
+  // state encapsulated and managed by the composable
+  const user: Ref<User | undefined> = ref(undefined)
+  const unregistered: Ref<boolean> = ref(false)
+  const {refresh: refreshUser} = await useFetch<GetUserResponse>('/api/v3/user', {
+    server: false,
+    lazy: true,
+    immediate: !maintenanceMode,
+    onResponse({response}) {
+      if (response.ok) {
+        user.value = response._data.user
+        unregistered.value = false
+        return
+      }
+
+      // Logout if user fetch fails
+      user.value = undefined
+    },
+    onResponseError({response}) {
+      console.error('[GetUser] Fetch Error:', response._data)
+      user.value = undefined
+
+      if (response._data.statusCode === 404)
+        unregistered.value = true
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateUser', async () => {
+    console.log('Triggered user update')
+    await refreshUser()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {user, unregistered, refreshUser}
+}
\ No newline at end of file
diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index 4ba88b62..a52f0e4d 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -36,6 +36,194 @@ import {
 import {type ObjectInfo, type EndpointInfo, toObjectInfo} from "~/composables/proto_conversions";
 import type {ArunaError} from "~/composables/ArunaError";
 
+/* ----- V3 ----- */
+import type {paths, components} from "~/types/aruna-v3"
+import {type GetGroupsFromUserResponseGroups} from "~/types/aruna-v3-enums";
+
+// ----- Requests -----
+export type RegisterUserRequest = paths["/api/v3/users"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateComponentRequest = paths["/api/v3/global/components"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateGroupRequest = paths["/api/v3/groups"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateRealmRequest = paths["/api/v3/realms"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateTokenRequest = paths["/api/v3/users/tokens"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateResourceRequest = paths["/api/v3/resources"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateS3CredentialsRequest = paths["/api/v3/users/s3credentials"]["post"]["requestBody"]["content"]["application/json"];
+export type UpdateResourceDescriptionRequest = paths["/api/v3/resources/description"]["post"]["requestBody"]["content"]["application/json"];
+
+// ----- Responses -----
+// Global
+export type CreateComponentResponse = paths["/api/v3/global/components"]["post"]["responses"][200]["content"]["application/json"];
+
+// Groups
+export type CreateGroupResponse = paths["/api/v3/groups"]["post"]["responses"][200]["content"]["application/json"];
+
+// Info
+export type GetEventsResponse = paths["/api/v3/info/events"]["get"]["responses"][200]["content"]["application/json"];
+export type GetStatsResponse = paths["/api/v3/info/stats"]["get"]["responses"][200]["content"]["application/json"];
+export type SearchResponse = paths["/api/v3/info/search"]["get"]["responses"][200]["content"]["applicatiown/json"];
+
+// License
+export type CreateLicensesResponse = paths["/api/v3/license"]["post"]["responses"][200]["content"]["application/json"];
+export type GetLicensesResponse = paths["/api/v3/license"]["get"]["responses"][200]["content"]["application/json"];
+
+// Realms
+export type CreateRealmResponse = paths["/api/v3/realms"]["post"]["responses"][200]["content"]["application/json"];
+export type GetRealmComponentsResponse = paths["/api/v3/realms/{id}/components"]["get"]["responses"][200]["content"]["application/json"];
+export type AddComponentToRealmResponse = paths["/api/v3/realms/{id}/components/{component_id}"]["patch"]["responses"][200]["content"]["application/json"];
+
+// Resources
+export type CreateProjectResponse = paths["/api/v3/resources/projects"]["post"]["responses"][200]["content"]["application/json"];
+export type CreateResourceResponse = paths["/api/v3/resources"]["post"]["responses"][200]["content"]["application/json"];
+export type GetResourcesResponse = paths["/api/v3/resources"]["get"]["responses"][200]["content"]["application/json"];
+export type GetRelationsResponse = paths["/api/v3/resources/{id}/relations"]["get"]["responses"][200]["content"]["application/json"];
+export type DeleteResourcesResponse = paths["/api/v3/resources/{id}"]["delete"]["responses"][200]["content"]["application/json"];
+export type UpdateResourceNameResponse = paths["/api/v3/resources/name"]["post"]["responses"][200]["content"]["application/json"];
+export type UpdateResourceTitleResponse = paths["/api/v3/resources/title"]["post"]["responses"][200]["content"]["application/json"];
+export type UpdateResourceDescriptionResponse = paths["/api/v3/resources/description"]["post"]["responses"][200]["content"]["application/json"];
+
+// Users
+export type RegisterUserResponse = paths["/api/v3/users"]["post"]["responses"][200]["content"]["application/json"];
+export type GetUserResponse = paths["/api/v3/users"]["get"]["responses"][200]["content"]["application/json"];
+export type CreateTokenResponse = paths["/api/v3/users/tokens"]["post"]["responses"][200]["content"]["application/json"];
+export type GetRealmsFromUserResponse = paths["/api/v3/users/realms"]["get"]["responses"][200]["content"]["application/json"];
+export type GetGroupsFromUserResponse = paths["/api/v3/users/groups"]["get"]["responses"][200]["content"]["application/json"];
+export type GetTokensFromUserResponse = paths["/api/v3/users/tokens"]["get"]["responses"][200]["content"]["application/json"];
+export type CreateS3CredentialsResponse = paths["/api/v3/users/s3credentials"]["post"]["responses"][200]["content"]["application/json"];
+export type GetS3CredentialsFromUserResponse = paths["/api/v3/users/s3credentials"]["get"]["responses"][200]["content"]["application/json"];
+
+// ----- Models -----
+// v3
+export type v3Component = components["schemas"]["Component"]
+export type Endpoint = components["schemas"]["Endpoint"]
+export type Author = components["schemas"]["Author"]
+export type Group = components["schemas"]["Group"]
+export type KeyValue = components["schemas"]["KeyValue"]
+export type Realm = components["schemas"]["Realm"]
+export type Resource = components["schemas"]["Resource"]
+export type Token = components["schemas"]["Token"]
+export type User = components["schemas"]["User"]
+export type License = components["schemas"]["License"]
+export type S3Credential = components["schemas"]["S3Credential"]
+
+// Custom
+export type ResourceElement = Resource & {
+  children: ResourceElement[]
+}
+
+export type GroupInfo = {
+  group: Group,
+  permission: GetGroupsFromUserResponseGroups
+}
+
+export type SimpleCredentials = {
+  access_key: string
+  secret_key: string
+}
+
+export type RealmContext = {
+  realm: Realm,
+  group: Group
+}
+
+// ----- Events -----
+export enum EventTypes {
+  RegisterUser = 'RegisterUserRequestTx',
+  CreateToken = 'CreateTokenRequestTx',
+  CreateS3Credentials = 'CreateS3CredentialsRequestTx',
+  CreateRealm = 'CreateRealmRequestTx',
+  CreateGroup = 'CreateGroupRequestTx',
+  CreateComponent = 'CreateComponentRequestTx',
+  CreateResource = 'CreateResourceRequestTx',
+  TODO = 'Complete this enum'
+}
+
+export type BaseTx = {
+  id: string
+  event_id: string
+  type: EventTypes,
+  requester: {
+    Unregistered?: Oidc
+    User?: TxUser
+  }
+}
+
+export type TxUser = {
+  user_id: string
+  auth_method: AuthType
+  impersonated_by: TxUser | null
+}
+
+export type AuthType = {
+  Oidc?: Oidc
+  Aruna?: number
+}
+
+export type Oidc = {
+  oidc_realm: string
+  oidc_subject: string
+}
+
+// Specific Events
+export type RegisterUserTx = BaseTx & {
+  req: RegisterUserRequest
+}
+
+export type CreateTokenTx = BaseTx & {
+  req: CreateTokenRequest
+}
+
+export type CreateS3CredentialsRequestTx = BaseTx & {
+  req: CreateS3CredentialsRequest
+}
+
+export type CreateComponentRequestTx = BaseTx & {
+  req: CreateComponentRequest
+}
+
+export type CreateGroupTx = BaseTx & {
+  req: CreateGroupRequest
+}
+
+export type CreateRealmTx = BaseTx & {
+  req: CreateRealmRequest
+  generated_group: Group
+}
+
+
+// ----- Combined convenience
+export async function fetchChildren(resource_id: string): Promise<ResourceElement[]> {
+  const children_ids = await $fetch<GetRelationsResponse>(`/api/v3/relations`, {
+    query: {
+      node: resource_id,
+      direction: 'Outgoing',
+      offset: 0,
+      page_size: Number.MAX_SAFE_INTEGER
+    }
+  }).then(response => {
+    return response.relations.filter(rel => rel.relation_type === 'HasPart').map(rel => rel.to_id)
+  })
+
+  if (children_ids.length <= 0) {
+    console.info('[fetchChildren] Resource ${resource_id} has no children')
+    return []
+  }
+
+  return await $fetch<GetResourcesResponse>('/api/v3/resources', {
+    query: {
+      ids: children_ids
+    }
+  }).then(response => {
+    let resources: ResourceElement[] = []
+    for (const resource of response.resources) {
+      let extended = resource as any // lol, cast to any to allow dynamic adding of properties
+      extended.children = []
+      resources.push(extended as ResourceElement)
+    }
+    return resources
+  })
+}
+
+/* ----- END V3 ----- */
 
 export async function getAnnouncements(start_after: string | undefined, limit: number | undefined): Promise<v2Announcement[]> {
   return await $fetch<v2GetAnnouncementsResponse>('/api/announcements', {
diff --git a/composables/utils.ts b/composables/utils.ts
index 7c312e03..c1230712 100644
--- a/composables/utils.ts
+++ b/composables/utils.ts
@@ -1,10 +1,3 @@
-import type {
-    v2CustomAttribute,
-    v2Permission,
-    v2Token,
-    v2User
-} from "~/composables/aruna_api_json"
-
 import { Buffer } from 'node:buffer'
 
 export function parseJwt(token: any) {
@@ -72,68 +65,6 @@ export function displayDate(createdAt: string | undefined, modifiedAt: string |
   }
 }
 
-// Modal magic
-export function openModal(modalId: string) {
-  let element = document.querySelector(`#${modalId}`) as HTMLElement
-  import('preline').then(({HSOverlay}) => {
-    HSOverlay.open(element)
-  })
-}
-
-export function closeModal(modalId: string) {
-  let element = document.querySelector(`#${modalId}`) as HTMLElement
-  import('preline').then(({HSOverlay}) => {
-    HSOverlay.close(element)
-  })
-}
-
-/* ---------- USER ---------- */
-export function isUserAdmin(user: v2User | undefined): boolean {
-    if (user?.attributes?.globalAdmin) {
-        return user.attributes.globalAdmin
-    }
-    return false
-}
-
-export function isUserServiceAccount(user: v2User | undefined): boolean {
-    if (user?.attributes?.serviceAccount) {
-        return user.attributes.serviceAccount
-    }
-    return false
-}
-
-export function getUserCustomAttributes(user: v2User | undefined): v2CustomAttribute[] {
-    if (user?.attributes?.customAttributes) {
-        return user.attributes.customAttributes
-    }
-    return []
-}
-
-export function getUserEndpoints(user: v2User | undefined): string[] {
-    if (user?.attributes?.trustedEndpoints) {
-        return user.attributes.trustedEndpoints
-    }
-    return []
-}
-
-export function getUserToken(user: v2User | undefined): v2Token[] {
-    if (user?.attributes?.tokens) {
-        return user.attributes.tokens
-    }
-    return []
-}
-
-export function getUserPermissions(user: v2User | undefined): v2Permission[] {
-    if (user?.attributes?.personalPermissions) {
-        return user.attributes.personalPermissions
-    }
-    return []
-}
-
-export function getUserResources() {}
-/* -------------------- */
-
-
 /* ---------- RESOURCE ---------- */
 export function createS3Key(collection: string | undefined, dataset: string | undefined, object: string): string {
     let key = collection ? `${collection}/` : ''
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1a4d40c3..d02c1b7c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,10 +9,10 @@ export default defineNuxtConfig({
   experimental: {
     clientNodeCompat: true
   },
-  plugins: [
-    "~/plugins/preline.client.ts",
-  ],
-  modules: ['@nuxtjs/tailwindcss', "shadcn-nuxt"],
+  modules: ['@nuxtjs/tailwindcss', "shadcn-nuxt", 'nuxt-monaco-editor', "@nuxtjs/color-mode"],
+  colorMode: {
+    classSuffix: "",
+  },
   css: [
     '~/assets/styles/main.css',
   ],
@@ -41,7 +41,7 @@ export default defineNuxtConfig({
       local: {
         clientId: "test",
         clientSecret: "QgBl9I2CD3eVhL7LFvkHrYUK7oKL3LE2",
-        issuer: "http://localhost:1998",
+        issuer: "http://localhost:1998/realms/test",
         redirectUrl: "http://localhost:3000/callback",
         authUrl: 'http://localhost:1998/realms/test/protocol/openid-connect/auth',
         tokenUrl: 'http://localhost:1998/realms/test/protocol/openid-connect/token',
@@ -97,9 +97,11 @@ export default defineNuxtConfig({
         title: 'Banner Title',
         text: 'Info banner custom text with important <a href="/news" class="text-aruna-highlight hover:text-aruna-highlight/80">information<a/>',
         customImg: '', // URL to external or internal image
+        hidePeriod: 60 * 60 * 24, // Hide banner per default for one day
         validFrom: '', // Some valid date string
         validTo: '', // Some valid date string
-      }
+      },
+      searchDialogLimit: 10
     }
   },
 
diff --git a/package.json b/package.json
index 96b29f13..16aeca21 100644
--- a/package.json
+++ b/package.json
@@ -10,37 +10,42 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.685.0",
-    "@aws-sdk/lib-storage": "^3.685.0",
-    "@aws-sdk/s3-request-presigner": "^3.685.0",
+    "@aws-sdk/client-s3": "^3.738.0",
+    "@aws-sdk/lib-storage": "^3.738.0",
+    "@aws-sdk/s3-request-presigner": "^3.738.0",
     "@bynect/markdown-it-class": "^1.0.2",
-    "@nuxtjs/tailwindcss": "^6.12.1",
+    "@nuxtjs/tailwindcss": "^6.13.1",
+    "@nuxtjs/color-mode": "^3.5.2",
     "@radix-icons/vue": "^1.0.0",
-    "@shikijs/markdown-it": "^1.10.0",
-    "@tabler/icons-vue": "^2.47.0",
-    "@tailwindcss/forms": "^0.5.7",
-    "@vee-validate/zod": "^4.13.2",
-    "@vueuse/core": "^11.1.0",
-    "class-variance-authority": "^0.7.0",
+    "@shikijs/markdown-it": "^2.1.0",
+    "@tabler/icons-vue": "^3.26.0",
+    "@tailwindcss/forms": "^0.5.10",
+    "@unovis/ts": "^1.5.0",
+    "@unovis/vue": "^1.5.0",
+    "@vee-validate/zod": "^4.15.0",
+    "@vueuse/core": "^12.5.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dom-parser": "^1.1.5",
     "markdown-it": "^14.1.0",
     "markdown-it-deflist": "^3.0.0",
-    "nuxt": "^3.14.0",
-    "preline": "^2.5.1",
-    "radix-vue": "^1.9.8",
-    "vee-validate": "^4.14.6",
-    "vue-router": "^4.4.4"
+    "monaco-editor": "0.52.2",
+    "nuxt": "^3.15.3",
+    "nuxt-monaco-editor": "1.3.1",
+    "radix-vue": "^1.9.13",
+    "ulid": "^2.3.0",
+    "vee-validate": "^4.15.0",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@types/markdown-it": "^14.1.1",
-    "bun-types": "^1.1.18",
-    "shadcn-nuxt": "^0.10.4",
-    "tailwind-merge": "^2.5.2",
+    "@types/markdown-it": "^14.1.2",
+    "bun-types": "^1.2.1",
+    "shadcn-nuxt": "^0.11.3",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.5.4",
-    "vue": "^3.5.4",
-    "zod": "^3.23.8"
+    "typescript": "^5.7.3",
+    "vue": "^3.5.13",
+    "zod": "^3.24.1"
   }
 }
diff --git a/pages/explore.vue b/pages/explore.vue
index f60cbee7..42234b87 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -1,14 +1,11 @@
 <script lang="ts" setup>
-import {v2ResourceVariant, type v2GenericResource} from "~/composables/aruna_api_json";
 import {
   IconFile,
-  IconFiles,
   IconFolder,
   IconFolders,
   IconSearch,
   IconWorldSearch,
 } from "@tabler/icons-vue";
-import {Button} from '@/components/ui/button'
 import {
   Pagination,
   PaginationEllipsis,
@@ -19,23 +16,31 @@ import {
   PaginationNext,
   PaginationPrev,
 } from '@/components/ui/pagination'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import {ResourceVariant} from "~/types/aruna-v3-enums";
 
 import {searchResources} from "~/composables/api_wrapper";
 
+const route = useRoute()
 const currentPage: Ref<number> = ref(1);
 const limit: Ref<number> = ref(20);
-const hits: Ref<v2GenericResource[]> = ref([]);
+const hits: Ref<Resource[]> = ref([]);
 const estimatedTotal = ref(0);
+const fetching = ref(true);
+
+const debouncedInput = debounce(async () => await queryResources(true), 250)
 
 /* Query */
-const query = ref("");
+const query = ref(route.query.q ? route.query.q : '')
 watch(query, async () => {
-  await queryResources(true)
+  fetching.value = true;
+  await debouncedInput()
 });
 
 /* Filter */
-const filter = ref("object_type = PROJECT");
-const typeFilter = ref(v2ResourceVariant.RESOURCE_VARIANT_PROJECT);
+const filter = ref("variant=0");
+const typeFilter = ref(ResourceVariant.Project);
 const customFilter = ref("");
 const customFilterValid = ref(true);
 
@@ -48,25 +53,23 @@ watch(typeFilter, async () => {
 
 function generateFilter() {
   switch (typeFilter.value) {
-    case v2ResourceVariant.RESOURCE_VARIANT_UNSPECIFIED: {
-      filter.value = "";
+    case null: {
+      filter.value = "variant IN [0,1,2]";
+      // limit search to projects, folders and objects
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
-      filter.value = "object_type = PROJECT";
+    case ResourceVariant.Project: {
+      filter.value = "variant=0";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION: {
-      filter.value = "object_type = COLLECTION";
+    case ResourceVariant.Folder: {
+      filter.value = "variant=1";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
-      filter.value = "object_type = DATASET";
+    case ResourceVariant.Object: {
+      filter.value = "variant=2";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
-      filter.value = "object_type = OBJECT";
-    }
   }
 
   if (customFilter.value.length > 0) {
@@ -93,13 +96,25 @@ async function queryResources(pageReset: boolean) {
   })
 
   try {
-    const response = await searchResources(body)
+    const response = await $fetch<SearchResponse>('/api/v3/search', {
+      query: {
+        query: query.value,
+        limit: limit.value,
+        filter: filter.value,
+        offset: offset,
+      }
+    }).catch(error => {
+      console.error(error)
+      throw new Error("Resource search failed.")
+    })
 
     customFilterValid.value = true;
     hits.value = response.resources ? response.resources : [];
-    estimatedTotal.value = response.estimatedTotal
-        ? Number(response.estimatedTotal)
+    console.log(hits.value);
+    estimatedTotal.value = response.expected_hits
+        ? Number(response.expected_hits)
         : 0;
+    fetching.value = false;
   } catch (error) {
     console.warn(error);
     customFilterValid.value = false;
@@ -137,10 +152,10 @@ onMounted(async () => await queryResources(true));
                    v-model="query"
                    id="search-query-input-with-icon"
                    name="search-query-input-with-icon"
-                   class="py-3 px-4 pe-11 block w-full border-e-0 border-aruna-text/50 shadow-sm rounded-s-md text-sm focus:z-10 focus:ring-1 focus:ring-aruna-highlight focus:border-aruna-highlight disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted text-aruna-text"
+                   class="py-3 px-4 pe-11 block w-full border-e-0 border-aruna-text/50 rounded-s-md text-sm focus:z-10 focus:ring-1 focus:ring-aruna-highlight focus:border-aruna-highlight disabled:opacity-50 disabled:pointer-events-none bg-aruna-bg/90 text-aruna-text"
                    placeholder="Search Aruna Resources"/>
-            <button type="button"
-                    class="w-[2.875rem] h-[2.875rem] flex-shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-aruna-highlight bg-aruna-muted text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
+                 <button type="button"
+                    class="w-[2.875rem] h-[2.875rem] flex-shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-aruna-highlight bg-aruna-bg/90 text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
               <IconSearch class="flex-shrink-0 size-6"/>
             </button>
           </div>
@@ -159,10 +174,10 @@ onMounted(async () => await queryResources(true));
           </p>
 
           <label for="resource-type-all"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
+                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_UNSPECIFIED"
+                   :value="null"
                    id="resource-type-all"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
@@ -171,11 +186,11 @@ onMounted(async () => await queryResources(true));
           </label>
 
           <label for="resource-type-projects"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
+                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    checked
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_PROJECT"
+                   :value="ResourceVariant.Project"
                    id="resource-type-projects"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
@@ -184,34 +199,22 @@ onMounted(async () => await queryResources(true));
           </label>
 
           <label for="resource-type-collections"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
+                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_COLLECTION"
+                   :value="ResourceVariant.Folder"
                    id="resource-type-collections"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
             <IconFolder class="flex-shrink-0 size-5 mx-2 text-aruna-text ms-5"/>
-            <span class="text-sm text-aruna-text">Collections</span>
-          </label>
-
-          <label for="resource-type-datasets"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
-            <input type="radio"
-                   v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_DATASET"
-                   id="resource-type-datasets"
-                   name="resource-type-select"
-                   class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
-            <IconFiles class="flex-shrink-0 size-5 mx-2 text-aruna-text ms-5"/>
-            <span class="text-sm text-aruna-text">Datasets</span>
+            <span class="text-sm text-aruna-text">Folder</span>
           </label>
 
           <label for="resource-type-objects"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
+                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_OBJECT"
+                   :value="ResourceVariant.Object"
                    id="resource-type-objects"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
@@ -227,7 +230,7 @@ onMounted(async () => await queryResources(true));
         <input type="text"
                v-model="customFilter"
                @keyup.enter="queryResources(true)"
-               class="py-3 px-4 block w-full rounded-md bg-aruna-muted border-aruna-text/50 text-aruna-text text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
+               class="py-3 px-4 block w-full rounded-md bg-aruna-bg/90 border-aruna-text/50 text-aruna-text text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
                placeholder="Custom filter"/>
 
         <div class="my-6 rounded-md bg-aruna-muted border border-aruna-text/50 border-t-4 border-t-aruna-highlight">
@@ -295,7 +298,7 @@ onMounted(async () => await queryResources(true));
         </Pagination>
 
         <!-- Start Display Search Results -->
-        <SearchResults :key="hits" :resources="hits"/>
+        <SearchResults :resources="hits" :fetching="fetching"/>
         <!-- End Display Search Results -->
 
         <Pagination v-if="estimatedTotal > limit"
diff --git a/pages/imprint.vue b/pages/imprint.vue
index dd0c1075..6dad3103 100644
--- a/pages/imprint.vue
+++ b/pages/imprint.vue
@@ -3,6 +3,312 @@ import {IconMail} from '@tabler/icons-vue';
 
 </script>
 
+<template>
+  <NavigationTop/>
+
+  <div class="container mx-auto mt-4 p-4 border-2 border-aruna-text/50 rounded-md bg-aruna-bg/90">
+    <Tabs default-value="impressum"
+          class="w-full">
+      <TabsList class="rounded-sm border border-aruna-text/50">
+        <TabsTrigger value="impressum"
+                     class="rounded-sm text-aruna-text data-[state=active]:bg-aruna-bg/90 data-[state=active]:text-aruna-text-accent">
+          Impressum
+        </TabsTrigger>
+        <TabsTrigger value="imprint"
+                     class="rounded-sm text-aruna-text data-[state=active]:bg-aruna-bg/90 data-[state=active]:text-aruna-text-accent">
+          Imprint
+        </TabsTrigger>
+      </TabsList>
+
+      <Separator class="bg-aruna-text/50 my-4"/>
+
+      <TabsContent value="impressum">
+        <h1 class="text-3xl font-bold text-aruna-text-accent uppercase">
+          Impressum
+        </h1>
+        <h2 class="text-2xl font-bold text-aruna-text">
+          Datenschutzerklärung
+        </h2>
+
+        <p class="mt-2 text-aruna-text">
+          Wir, die Universität Gießen vertreten durch ihren Präsidenten, nehmen den Schutz Ihrer persönlichen Daten sehr
+          ernst und halten uns strikt an die Regeln der Datenschutzgesetze. Die nachfolgende Erklärung gibt Ihnen einen
+          Überblick darüber, welche Art von personenbezogenen Daten erhoben werden, zu welchem Zweck und wie lange diese
+          gespeichert werden.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          1. Verantwortlicher
+        </h3>
+        <hr class="border-aruna-text">
+        <div class="mt-2 ps-4 font-bold text-aruna-text">Verantwortlicher für die Datenverarbeitung ist:</div>
+        <div class="ps-8 pb-4 text-aruna-text-accent">
+          <div>Präsidentin die</div>
+          <div>Justus-Liebig-Universität Gießen</div>
+          <div>Ludwigstraße 23</div>
+          <div>35390 Giessen</div>
+          <div>Germany</div>
+          <div>
+            <NuxtLink to="mailto:support@aruna-storage.org"
+                      target="_blank"
+                      class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+              <IconMail class="flex-shrink-0 size-4"/>
+              support@aruna-storage.org
+            </NuxtLink>
+          </div>
+        </div>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          2. Erhebung von personenbezogenen Daten
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Wir erheben personenbezogene Daten von Ihnen, wenn Sie sich für einen Account auf unserer Website oder im
+          Email-verteiler registrieren. <br/>Folgende personenbezogene Daten werden erhoben:
+        </p>
+        <ul class="list-disc list-inside ps-6 pb-4 text-aruna-text">
+          <li>Einen selbst zu vergebenen Namen</li>
+          <li>Eine E-Mail-Adresse zur Kontaktaufnahme</li>
+        </ul>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          3. Zweck der Datenverarbeitung
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Die von Ihnen angegebenen personenbezogenen Daten werden ausschließlich zur Erstellung Ihres Accounts oder der
+          Verarbeitung des Email verteilers verwendet. Falls eine Emailadresse hinterlegt wurde, informieren wir Sie
+          über Account relevante Ereignisse und allgemeine Ereignisse des Systems (Updates, Status etc.).
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          4. Rechtsgrundlage für die Datenverarbeitung
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Die Rechtsgrundlage für die Verarbeitung Ihrer personenbezogenen Daten zur Erstellung Ihres Accounts ist Art.
+          6 Abs. 1 lit. b DSGVO.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          5. Speicherdauer der Daten
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Ihre personenbezogenen Daten werden für die Dauer Ihres Accounts bei uns gespeichert. Wenn Sie Ihren Account
+          löschen, werden Ihre Daten umgehend gelöscht.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          6. Ihre Rechte als betroffene Person
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Sie haben das Recht, Auskunft über die bei uns gespeicherten personenbezogenen Daten zu erhalten sowie das
+          Recht auf Berichtigung, Löschung und Einschränkung der Verarbeitung Ihrer personenbezogenen Daten (Art. 15, 16
+          und 18 der Europäischen Datenschutzgrundverordnung). Falls Sie die Datenverarbeitung für rechtswidrig halten,
+          können Sie Beschwerde beim Hessischen Datenschutzbeauftragten erheben (Art. 77 der Europäischen
+          Datenschutzgrundverordnung, §55 des Hessischen Datenschutz- und Informationsfreiheitsgesetzes). Darüber hinaus
+          sind Sie berechtigt, Ihre Einwilligung in die Datenverarbeitung zu widerrufen und die Löschung Ihrer Daten zu
+          verlangen, wobei die bis dahin erfolgte Datenverarbeitung rechtmäßig bleibt (Art. 7 Abs. 3 und Art. 17.
+          EU-DSGVO). Ferner können Sie verlangen, Ihre Daten in portabler Form übermittelt zu bekommen oder an einen
+          anderen Verantwortlichen übermitteln zu lassen (Art. 20 EU-DSGVO).
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          7. Kontakt
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Wenn Sie Fragen zur Erhebung, Verarbeitung oder Nutzung Ihrer personenbezogenen Daten haben, kontaktieren Sie
+          uns bitte per E-Mail unter:
+          <NuxtLink to="mailto:datenschutz@aruna-storage.org"
+                    target="_blank"
+                    class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+            <IconMail class="flex-shrink-0 size-4"/>
+            datenschutz@aruna-storage.org
+          </NuxtLink>
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          8. Datenschutzbeauftragte
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          <strong>
+            Die Kontaktdaten des behördlichen Datenschutzbeauftragten der Justus-Liebig-Universität sind:
+          </strong>
+        </p>
+        <div class="pb-4 ps-8 text-aruna-text-accent">
+          <div>Justus-Liebig-Universität Gießen</div>
+          <div>Der behördliche Datenschutzbeauftragte</div>
+          <div>Ludwigstraße 23</div>
+          <div>35390 Gießen</div>
+          <div>Tel: 0641-99 122 30 / 0641-99 122 70</div>
+          <NuxtLink to="mailto:datenschutz@aruna-storage.org"
+                    target="_blank"
+                    class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+            <IconMail class="flex-shrink-0 size-4"/>
+            datenschutz@aruna-storage.org
+          </NuxtLink>
+          <div>Last updated: 20. April 2023</div>
+        </div>
+        <hr class="border-2 text-aruna-text my-5">
+        <p class="mt-2 text-center font-bold text-aruna-text-accent">
+          Bitte beachten Sie, dass diese Datenschutzerklärung jederzeit geändert werden kann. Eine jeweils aktuelle
+          Version finden Sie auf dieser Website.
+        </p>
+      </TabsContent>
+      <TabsContent value="imprint">
+        <h1 class="text-3xl font-bold text-aruna-text-accent">
+          Terms of service
+        </h1>
+        <h2 class="text-2xl font-bold text-aruna-text">
+          Privacy Policy
+        </h2>
+
+        <p class="mt-2 text-aruna-text">
+          We, the University of Giessen represented by its President, take the protection of your personal data very
+          seriously and strictly adhere to the rules of data protection laws. The following statement gives you an
+          overview
+          of what kind of personal data is collected, for what purpose and how long it is stored.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          1. Responsible
+        </h3>
+        <hr class="border-aruna-text">
+        <div class="mt-2 ps-4 font-bold text-aruna-text">Responsible for data processing is:</div>
+        <div class="ps-8 pb-4 text-aruna-text-accent">
+          <div>President of the</div>
+          <div>Justus-Liebig-University Giessen</div>
+          <div>Ludwigstraße 23</div>
+          <div>35390 Giessen</div>
+          <div>Germany</div>
+          <div>
+            <NuxtLink to="mailto:support@aruna-storage.org"
+                      target="_blank"
+                      class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+              <IconMail class="flex-shrink-0 size-4"/>
+              support@aruna-storage.org
+            </NuxtLink>
+          </div>
+        </div>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          2. Collection of personal data
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          We collect personal data from you when you register for an account or join the mailing-list on our
+          website. <br/>The following personal data is collected:
+        </p>
+        <ul class="list-disc list-inside ps-6 pb-4 text-aruna-text">
+          <li>A self-selected name</li>
+          <li>Email address for contact</li>
+        </ul>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          3. Purpose of data processing
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          The personal data provided by you is exclusively used for the creation of your account. If an email address is
+          provided, we will inform you about account-related events. If you join the mailing-list, we will send you
+          information about the project in irregular intervals.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          4. Legal basis for data processing
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          The legal basis for the processing of your personal data for the creation of your account is Art. 6 para. 1
+          lit. b
+          GDPR.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          5. Storage period of the data
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Your personal data will be stored for the duration of your account with us. If you delete your account,
+          your data will be deleted immediately.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          6. Your rights as a data subject
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          You have the right to request information about the personal data stored by us as well as the right to
+          correction,
+          deletion and restriction of the processing of your personal data (Art. 15, 16 and 18 of the European General
+          Data
+          Protection Regulation). If you believe that the processing of data is unlawful, you can lodge a complaint with
+          the
+          Hessian Data Protection Officer (Art. 77 of the European General Data Protection Regulation, §55 of the
+          Hessian
+          Data Protection and Freedom of Information Act). Furthermore, you are entitled to revoke your consent to the
+          processing of data and to request the deletion of your data, while the processing of data until then remains
+          lawful (Art. 7 para. 3 and Art. 17. EU-GDPR). You can also request the transmission of your data in portable
+          form
+          or have it transferred to another controller (Art. 20 EU-GDPR).
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          7. Contact
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          If you have any questions about the collection, processing or use of your personal data, please contact us by
+          email at
+          <NuxtLink to="mailto:datenschutz@aruna-storage.org"
+                    target="_blank"
+                    class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+            <IconMail class="flex-shrink-0 size-4"/>
+            datenschutz@aruna-storage.org
+          </NuxtLink>
+          .
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          8. Data Protection Officer
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          <strong>
+            The contact details of the official data protection officers at Justus Liebig University are:
+          </strong>
+        </p>
+        <div class="pb-4 ps-8 text-aruna-text-accent">
+          <div>Justus-Liebig-Universität Gießen</div>
+          <div>Der behördliche Datenschutzbeauftragte</div>
+          <div>Ludwigstraße 23</div>
+          <div>35390 Gießen</div>
+          <div>Tel: 0641-99 122 30 / 0641-99 122 70</div>
+          <NuxtLink to="mailto:datenschutz@aruna-storage.org"
+                    target="_blank"
+                    class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+            <IconMail class="flex-shrink-0 size-4"/>
+            datenschutz@aruna-storage.org
+          </NuxtLink>
+          <div>Last updated: 20. April 2023</div>
+        </div>
+        <hr class="border-2 text-aruna-text my-5">
+        <p class="mt-2 text-center font-bold text-aruna-text-accent">
+          Please note that this privacy policy may be changed at any time. You can find the current version on
+          this website.
+        </p>
+      </TabsContent>
+    </Tabs>
+  </div>
+
+  <Footer/>
+</template>
+
+<!--
 <template>
   <NavigationTop/>
 
@@ -12,6 +318,8 @@ import {IconMail} from '@tabler/icons-vue';
     </h1>
     <hr class="border-aruna-text my-6">
 
+
+
     <div class="px-4 border-b border-aruna-text/50">
       <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
         <button type="button"
@@ -312,4 +620,5 @@ import {IconMail} from '@tabler/icons-vue';
     </div>
   </div>
   <Footer/>
-</template>
\ No newline at end of file
+</template>
+-->
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 821601ad..85b08750 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,7 +8,7 @@ import Hero from "~/components/custom-ui/frontpage/Hero.vue";
 </script>
 <template>
   <div class="flex flex-col flex-grow">
-    <div class="bg-[url('/public/imgs/global-bg.webp')] bg-cover bg-fixed bg-center bg-no-repeat">
+    <div class="bg-[url('/imgs/global-bg.webp')] bg-cover bg-fixed bg-center bg-no-repeat">
       <!-- Header + Navigation -->
       <NavigationTop/>
       <!-- END Header + Navigation -->
diff --git a/pages/objects/create.vue b/pages/objects/create.vue
deleted file mode 100644
index 063d2128..00000000
--- a/pages/objects/create.vue
+++ /dev/null
@@ -1,934 +0,0 @@
-<script setup lang="ts">
-import {IconArrowLeft, IconExclamationCircle, IconPlus, IconTrash} from '@tabler/icons-vue'
-import {
-  v2DataClass,
-  v2InternalRelationVariant,
-  v2KeyValueVariant,
-  v2RelationDirection,
-  v2ResourceVariant,
-  type v2Author,
-  type v2DataEndpoint,
-  type v2GetS3CredentialsUserTokenResponse,
-  type v2KeyValue,
-  type v2Object,
-  type v2Project,
-  type v2Relation,
-} from '~/composables/aruna_api_json'
-
-import {
-  toRelationDirectionStr,
-  toRelationVariantStr,
-  toResourceTypeStr,
-  fromDataClassStr,
-  fromResourceTypeStr
-} from "~/composables/enum_conversions"
-import {OBJECT_REGEX, PROJECT_REGEX, S3_KEY_REGEX, ULID_REGEX} from "~/composables/constants"
-import type {ObjectInfo} from "~/composables/proto_conversions"
-import {deleteObject, getObjectBucketAndKey} from "~/composables/api_wrapper"
-import EventBus from "~/composables/EventBus";
-
-import {HeadObjectCommand, S3Client, type S3ClientConfig} from "@aws-sdk/client-s3";
-import {Upload} from "@aws-sdk/lib-storage";
-import {prettyDisplayJson} from "~/composables/utils";
-
-// Router to navigate back
-const router = useRouter()
-const route = useRoute()
-const licenses = await fetchLicenses()
-
-const createdResource: Ref<v2Project | undefined> = ref(undefined)
-const creationError: Ref<string | undefined> = ref(undefined)
-
-// ----- Query Parameter ----- //
-function getParamSingle(param_name: string) {
-  const value = route.query[param_name];
-  if (Array.isArray(value)) {
-    return value[0];
-  } else if (typeof value === 'string') {
-    return value;
-  }
-}
-
-function setQueryParams() {
-  if (route.query) {
-    const resourceTypeParam = getParamSingle("type");
-    if (resourceTypeParam) {
-      resourceType.value = fromResourceTypeStr(resourceTypeParam, v2ResourceVariant.RESOURCE_VARIANT_PROJECT);
-    }
-    const dataClassParam = getParamSingle("class");
-    if (dataClassParam) {
-      resourceDataclass.value = fromDataClassStr(dataClassParam);
-    }
-    const parentIdParam = getParamSingle("parentId");
-    if (parentIdParam) {
-      resourceParentId.value = parentIdParam;
-    }
-    const relIdParam = getParamSingle("relId");
-    const relTypeParam = getParamSingle("relType");
-    if (relIdParam && relTypeParam) {
-      addRelation({
-        internal: {
-          resourceId: relIdParam,
-          resourceVariant: fromResourceTypeStr(relTypeParam),
-          definedVariant: v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_METADATA,
-          direction: v2RelationDirection.RELATION_DIRECTION_OUTBOUND
-        }
-      } as v2Relation)
-    }
-  }
-}
-onMounted(() => setQueryParams());
-
-// ----- Form validation ----- //
-const validState = ref(false)
-
-const validationStates = ref(new Map<string, boolean>())
-validationStates.value.set('resourceName', false)
-validationStates.value.set('resourceDescription', true)
-validationStates.value.set('resourceParentId', true)
-validationStates.value.set('dataUpload', true)
-
-function validate() {
-  validState.value = checkInputValidationStates()
-}
-
-function checkInputValidationStates(): boolean {
-  let states = validationStates.value.values()
-  while (true) {
-    let result = states.next();
-    if (result.done) break;
-    if (!result.value) {
-      return false
-    }
-  }
-  return true
-}
-
-// ----- Input bindings ----- //
-/* Resource name */
-const resourceName = ref('')
-const resourceNameError: Ref<string | undefined> = ref('Please enter a resource name')
-
-watch(resourceName, () => validateResourceName())
-
-function validateResourceName() {
-  if (resourceName.value.length > 0) {
-    switch (resourceType.value) {
-      case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
-        const valid = PROJECT_REGEX.test(resourceName.value)
-        validationStates.value.set('resourceName', valid)
-        resourceNameError.value = valid ? undefined : "Project names can only contain lowercase alphanumeric characters and hyphens."
-        break
-      }
-      case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION:
-      case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
-        const valid = S3_KEY_REGEX.test(resourceName.value)
-        validationStates.value.set('resourceName', valid)
-        resourceNameError.value = valid ? undefined : 'Collection/Dataset names can only contain the following characters [a-zA-z0-9!-_.*\'()]'
-        break
-      }
-      case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
-        const valid = OBJECT_REGEX.test(resourceName.value)
-        validationStates.value.set('resourceName', valid)
-        resourceNameError.value = valid ? undefined : 'Object names can only contain the following characters [a-zA-z0-9!-_.*\'()/]'
-        break
-      }
-    }
-  } else {
-    validationStates.value.set('resourceName', false)
-    resourceNameError.value = "Please enter a resource name."
-  }
-  validate()
-}
-
-/* Resource title */
-const resourceTitle = ref('')
-
-/* Resource description */
-const textAreaElement = ref(null)
-const resourceDescription = ref('')
-const charsLeft = ref(1024)
-watch(resourceDescription, () => {
-  charsLeft.value = 1024 - resourceDescription.value.length
-  validationStates.value.set("resourceDescription", charsLeft.value >= 0)
-  validate()
-})
-
-/* ----- Resource type ----- */
-const resourceType = ref(v2ResourceVariant.RESOURCE_VARIANT_PROJECT)
-
-watch(resourceType, () => {
-  switch (resourceType.value) {
-    case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
-      validationStates.value.set('resourceParentId', true) // No parent id needed
-      validationStates.value.set('dataUpload', true)  // No data upload
-      dataUpload.value = null
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION:
-    case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
-      validationStates.value.set('dataUpload', true) // No data upload
-      dataUpload.value = null
-      validateParentId()
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
-      if (dataUpload.value === null) {
-        validationStates.value.set('dataUpload', false) // Upload needed for Object creation
-      }
-      validateParentId()
-    }
-  }
-  validateResourceName()
-  validate()
-})
-
-/* Resource parent ID */
-const resourceParentId = ref('')
-const resourceParent: Ref<ObjectInfo | undefined> = ref(undefined)
-const resourceParentIdError: Ref<string | undefined> = ref('Please enter a valid parent id')
-
-watch(resourceParentId, async () => await validateParentId())
-
-async function validateParentId() {
-  // Check if input field is empty
-  if (resourceParentId.value.length > 0) {
-    // Check if input is a valid ULID
-    const valid = ULID_REGEX.test(resourceParentId.value)
-    validationStates.value.set('resourceParentId', valid)
-    resourceParentIdError.value = valid ? undefined : 'Parent id is not a valid ULID'
-
-    if (valid) {
-      // Check if resource exists
-      await fetchResource(resourceParentId.value)
-          .then(response => {
-            if (response?.resource && response?.permission) {
-              resourceParent.value = toObjectInfo(response.resource, response.permission)
-            } else {
-              resourceParent.value = undefined
-              validationStates.value.set('resourceParentId', false)
-              resourceParentIdError.value = 'Resource with this id does not exist'
-            }
-          })
-          .catch(() => {
-            resourceParent.value = undefined
-            validationStates.value.set('resourceParentId', false)
-            resourceParentIdError.value = 'Parent fetch failed with error'
-          })
-    }
-  } else {
-    validationStates.value.set('resourceParentId', false)
-    resourceParentIdError.value = 'Please enter a valid parent id'
-  }
-  validate()
-}
-
-/* Resource data class */
-const resourceDataclass = ref(v2DataClass.DATA_CLASS_PUBLIC)
-
-/* Resource licenses */
-const metaLicense = ref('AllRightsReserved')
-const dataLicense = ref('AllRightsReserved')
-
-/* Upload */
-const dataUpload: Ref<File | null> = ref(null)
-const metaUpload: Ref<File | null> = ref(null)
-
-const uploadProgress = ref(0)
-
-function updateProgress(current: number, total: number | undefined) {
-  if (!total) return 0
-
-  const floatProgress = current / total * 100
-  uploadProgress.value = +floatProgress.toFixed(2)
-}
-
-watch(dataUpload, (value) => {
-  validationStates.value.set('dataUpload', dataUpload.value !== null)
-  resourceName.value = value?.name ? value.name : resourceName.value
-  validate()
-})
-
-function dataFileChange(e) {
-  let files: FileList = (e.target as HTMLInputElement).files || (e.dataTransfer as DataTransfer).files;
-  if (files.length > 0) {
-    dataUpload.value = files.item(0)
-    uploadProgress.value = 0
-  } else {
-    dataUpload.value = null
-  }
-}
-
-/* ----- Resource Authors ----- */
-const authors: Ref<Map<string, v2Author>> = ref(new Map())
-
-function addAuthor(author: v2Author) {
-  authors.value.set(getUniqueId(), author)
-}
-
-function removeAuthor(key: string) {
-  authors.value.delete(key)
-}
-
-/* ----- End Resource Authors ----- */
-/* ----- Resource key-values ----- */
-const keyValues = ref(new Map())
-
-function addKeyValue(key: string, val: string, type: v2KeyValueVariant) {
-  keyValues.value.set(key, {key: key, value: val, variant: type} as v2KeyValue)
-}
-
-function removeKeyValue(key: string) {
-  keyValues.value.delete(key)
-}
-
-/* ----- End Resource key-values ----- */
-/* ----- Resource relations ----- */
-const relations: Ref<Map<string, v2Relation>> = ref(new Map())
-
-function addRelation(relation: v2Relation) {
-  relations.value.set(getUniqueId(), relation)
-}
-
-function removeRelation(key: string) {
-  relations.value.delete(key)
-}
-
-/* ----- End Resource relations ----- */
-
-// ----- Helper functions -----
-let id = 0
-
-function getUniqueId(): string {
-  return id++ + '';
-}
-
-function textAreaAutoHeight(domElement: HTMLTextAreaElement | null, offset = 0) {
-  if (domElement) {
-    domElement.style.height = 'auto'
-    domElement.style.height = `${domElement.scrollHeight + offset}px`
-  }
-}
-
-function openModal(modalId: string) {
-  let element = document.querySelector(`#${modalId}`) as HTMLElement
-  import('preline').then(({HSOverlay}) => {
-    HSOverlay.open(element)
-  })
-}
-
-async function submit() {
-  // Better safe than sorry.
-  createdResource.value = undefined
-  creationError.value = undefined
-
-  // Create resource in server
-  switch (resourceType.value) {
-    case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
-      await createProject({
-        name: resourceName.value,
-        title: resourceTitle.value,
-        description: resourceDescription.value,
-        keyValues: Array.from(keyValues.value.values()),
-        relations: Array.from(relations.value.values()),
-        dataClass: resourceDataclass.value,
-        preferredEndpoint: '', //TODO
-        metadataLicenseTag: metaLicense.value,
-        defaultDataLicenseTag: dataLicense.value,
-        authors: Array.from(authors.value.values())
-      }).then(project => {
-        console.log(project)
-        createdResource.value = project
-        creationError.value = undefined
-      }).catch(error => {
-        console.error(error)
-        creationError.value = error.toString()
-        createdResource.value = undefined
-      })
-      // Display created resource or error
-      openModal('object-display')
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION: {
-      await createCollection({
-        name: resourceName.value,
-        title: resourceTitle.value,
-        description: resourceDescription.value,
-        keyValues: Array.from(keyValues.value.values()),
-        relations: Array.from(relations.value.values()),
-        dataClass: resourceDataclass.value,
-        projectId: resourceParentId.value,
-        metadataLicenseTag: metaLicense.value,
-        defaultDataLicenseTag: dataLicense.value,
-        authors: Array.from(authors.value.values())
-      }).then(collection => {
-        console.log(collection)
-        createdResource.value = collection
-        creationError.value = undefined
-      }).catch(error => {
-        console.log(error)
-        creationError.value = error.toString()
-        createdResource.value = undefined
-      })
-      // Display created resource or error
-      openModal('object-display')
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
-      await createDataset({
-        name: resourceName.value,
-        title: resourceTitle.value,
-        description: resourceDescription.value,
-        keyValues: Array.from(keyValues.value.values()),
-        relations: Array.from(relations.value.values()),
-        dataClass: resourceDataclass.value,
-        projectId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_PROJECT ? resourceParentId.value : undefined,
-        collectionId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_COLLECTION ? resourceParentId.value : undefined,
-        metadataLicenseTag: metaLicense.value,
-        defaultDataLicenseTag: dataLicense.value,
-        authors: Array.from(authors.value.values())
-      }).then(dataset => {
-        console.log(dataset)
-        createdResource.value = dataset
-        creationError.value = undefined
-      }).catch(error => {
-        console.log(error)
-        creationError.value = error.toString()
-        createdResource.value = undefined
-      })
-      // Display created resource or error
-      openModal('object-display')
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
-      if (dataUpload.value !== null) {
-        // Display created resource or error
-        openModal('object-display')
-
-        // Promise chain time
-        await createObject({
-          name: resourceName.value,
-          title: resourceTitle.value,
-          description: resourceDescription.value,
-          keyValues: Array.from(keyValues.value.values()),
-          relations: Array.from(relations.value.values()),
-          dataClass: resourceDataclass.value,
-          projectId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_PROJECT ? resourceParentId.value : undefined,
-          collectionId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_COLLECTION ? resourceParentId.value : undefined,
-          datasetId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_DATASET ? resourceParentId.value : undefined,
-          metadataLicenseTag: metaLicense.value,
-          dataLicenseTag: dataLicense.value,
-          authors: Array.from(authors.value.values())
-        }).then(async stagingObject => {
-          // Set created resource and reset error
-          createdResource.value = stagingObject
-          creationError.value = undefined
-
-          // Take any full sync dataproxy of the object and fetch credentials
-          const endpoint: v2DataEndpoint | undefined = createdResource.value.endpoints?.find(ep => !ep.partialSync)
-          return [stagingObject, await getUserS3Credentials(endpoint?.id)]
-        }).then(async ([stagingObject, response]) => {
-          // Fetch any fullsync bucket and key for upload
-          let [bucket, key] = await getObjectBucketAndKey((stagingObject as v2Object).id)
-
-          // Create S3 client for staging object
-          const s3client = new S3Client({
-            endpoint: (response as v2GetS3CredentialsUserTokenResponse).s3EndpointUrl,
-            region: 'region-one',
-            credentials: {
-              accessKeyId: (response as v2GetS3CredentialsUserTokenResponse).s3AccessKey,
-              secretAccessKey: (response as v2GetS3CredentialsUserTokenResponse).s3SecretKey
-            }
-          } as S3ClientConfig)
-          /*
-          // Add CORS header to client requests [broken]
-          s3client.middlewareStack.add(
-              (next, context) => (args) => {
-                args.request.headers["access-control-request-headers"] = "access-control-allow-origin"
-                return next(args)
-              },
-              {
-                step: "build",
-              },
-          );
-          */
-
-          return [s3client, bucket, key]
-        }).then(async ([s3client, bucket, key]) => {
-          return [s3client, bucket, key, await waitForSync((s3client as S3Client), (bucket as string), (key as string))]
-        }).then(async ([s3client, bucket, key, synced]) => {
-          // Check if sync was successful
-          if (!synced)
-            throw Error('Object sync to DataProxy timed out')
-
-          const upload = new Upload({
-            client: s3client as S3Client,
-            queueSize: 4, // 4 uploads concurrently
-            partSize: dataUpload.value.size > 5 * 1024 * 1024 * 1024 ? 50 * 1024 * 1024 : 5 * 1024 * 1024, // 5MiB parts up to 5GiB; then 50MiB parts
-            leavePartsOnError: false, // Remove uploaded parts on error
-            params: {
-              Bucket: bucket as string,
-              Key: key as string,
-              Body: dataUpload.value
-            },
-          })
-
-          // Update progress bar value
-          upload.on("httpUploadProgress", progress =>
-              updateProgress(progress.loaded ? progress.loaded : 0, progress.total))
-
-          // Do something after upload succeeded
-          return await upload.done() //.then(() => console.log('Upload succeeded'))
-        }).then(response => {
-          console.log(`Upload completed with status code: ${response.$metadata.httpStatusCode}`)
-        }).catch(error => {
-          // Delete Object if already created
-          if (createdResource.value?.id)
-            deleteObject(createdResource.value.id, false).catch(error => console.log(error))
-
-          // Set error; unset created resource
-          console.log(error)
-          creationError.value = error.toString()
-          createdResource.value = undefined
-        })
-      } else {
-        // Display error toast that no file was selected for upload.
-      }
-    }
-
-      // Emit user update event
-      EventBus.emit('updateUser')
-  }
-}
-
-async function waitForSync(s3client: S3Client, bucket: string, key: string): Promise<boolean> {
-  // Define head object command
-  const command = new HeadObjectCommand({
-    Bucket: bucket,
-    Key: key
-  })
-
-  // Wait until object is synced
-  let synced = false
-  let tryCounter = 0
-  while (!synced) {
-    try {
-      tryCounter++
-      await s3client.send(command)
-          .then(response => {
-            console.log(response.$metadata.httpStatusCode)
-            synced = response.$metadata.httpStatusCode === 200
-          })
-    } catch (error: any) {
-      //console.error(error)
-      if (error.message.includes('NetworkError')) {
-        throw Error('CORS Error.<br/>Please check the CORS rules of your projects.')
-
-      } else if (tryCounter > 10) {
-        console.error('Wait for sync retries exhausted')
-        throw Error('Wait for sync retries exhausted')
-      }
-
-      await sleep(Math.pow(2, tryCounter))
-    }
-  }
-
-  return synced // Still false if try counter was exhausted
-}
-
-const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay))
-</script>
-
-<template>
-  <NavigationTop/>
-
-
-  <div class="min-h-[calc(100vh-110px)]">
-  <div
-      class="flex flex-col space-x-2 space-y-2 md:max-w-screen-2xl sm:mx-1 md:mx-auto my-10 p-4 border border-aruna-text/50 rounded-md bg-aruna-bg/90">
-    <h1 class="text-3xl font-bold text-aruna-text-accent">
-      Resource creation
-    </h1>
-
-    <Separator class="my-10 bg-aruna-text"/>
-
-    <div class="flex flex-col md:flex-row">
-      <div class="flex flex-row md:flex-col px-4 grow">
-        <!-- Resource Name Input -->
-        <label for="hs-validation-name-error"
-               class="block text-lg font-medium mb-2 text-aruna-text-accent">Name</label>
-        <div class="relative">
-          <input type="text"
-                 v-model="resourceName"
-                 id="hs-validation-name-error"
-                 name="hs-validation-name-error"
-                 :class="[{'border-destructive focus:border-destructive': !validationStates.get('resourceName')}]"
-                 class="py-3 px-4 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-highlight focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
-                 :disabled="dataUpload !== null"
-                 aria-describedby="hs-validation-name-error-helper"
-                 placeholder="Name of the resource" required>
-          <div :class="{ 'hidden': validationStates.get('resourceName') }"
-               class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-            <IconExclamationCircle class="flex-shrink-0 size-4 text-destructive"/>
-          </div>
-        </div>
-        <p :class="{ 'hidden': validationStates.get('resourceName') }" class="text-sm text-destructive mt-2"
-           id="hs-validation-name-error-helper">{{ resourceNameError }}
-        </p>
-        <!-- End Resource Name Input -->
-        <!-- Resource Title Input -->
-        <label for="display-name-input"
-               class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">Title</label>
-        <input type="text"
-               v-model="resourceTitle"
-               id="display-name-input"
-               class="py-3 px-4 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-highlight focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
-               placeholder="Display name for the resource">
-        <!-- End Resource Title Input -->
-        <!-- Resource Description Input -->
-        <div class="relative">
-          <label for="hs-textarea-ex-1"
-                 class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">Description</label>
-          <textarea id="hs-textarea-ex-1"
-                    v-model="resourceDescription"
-                    ref="textAreaElement"
-                    @input="textAreaAutoHeight(textAreaElement, 3)"
-                    :class="[{'border-destructive focus:border-destructive focus:ring-destructive': !validationStates.get('resourceDescription')}]"
-                    class="p-4 pb-12 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-highlight focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
-                    placeholder="A concise description of the resource"></textarea>
-          <!-- Toolbar -->
-          <div class="absolute bottom-px inset-x-px p-2 rounded-b-md bg-aruna-muted">
-            <hr class="my-2 border-aruna-text"/>
-            <div class="flex justify-end items-center">
-              <!-- Button Group -->
-              <div class="flex items-center">
-                <span :key="charsLeft"
-                      :class="[{ 'text-destructive': !validationStates.get('resourceDescription') }]"
-                      class="block text-sm text-aruna-text">{{ charsLeft }} characters left.</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- End Description Input -->
-
-        <label for="resource-type-radio-label"
-               class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">Resource Type</label>
-        <ul class="flex flex-col sm:flex-row">
-          <li v-for="(value, idx) in [v2ResourceVariant.RESOURCE_VARIANT_PROJECT, v2ResourceVariant.RESOURCE_VARIANT_COLLECTION, v2ResourceVariant.RESOURCE_VARIANT_DATASET, v2ResourceVariant.RESOURCE_VARIANT_OBJECT]"
-              class="inline-flex items-center gap-x-2.5 py-3 px-4 text-aruna-text-accent text-sm font-medium bg-aruna-muted border border-aruna-text/50 -mt-px first:rounded-t-sm first:mt-0 last:rounded-b-md sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:first:rounded-es-md sm:last:rounded-es-none sm:last:rounded-se-md">
-            <div class="relative flex items-start w-full">
-              <div class="flex items-center h-5">
-                <input type="radio"
-                       :id="`resource-type-radio-${idx}`"
-                       name="resource-type-radio"
-                       v-model="resourceType"
-                       :value="value"
-                       class="shrink-0 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
-              </div>
-              <label :for="`resource-type-radio-${idx}`"
-                     class="ms-3 block w-full text-sm font-bold text-aruna-text-accent">
-                {{ toResourceTypeStr(value) }}
-              </label>
-            </div>
-          </li>
-        </ul>
-
-        <!-- Resource Parent -->
-        <div v-if="resourceType !== v2ResourceVariant.RESOURCE_VARIANT_PROJECT">
-          <label for="parent-id-input"
-                 class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">
-            Parent ID
-          </label>
-          <div class="flex rounded-md">
-            <span
-                class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-aruna-text/50 bg-aruna-fg text-sm text-aruna-text-accent">
-              {{ resourceParent ? toResourceTypeStr(resourceParent.variant) : 'Unspecified' }}
-            </span>
-            <div class="flex grow relative">
-              <input type="text"
-                     v-model="resourceParentId"
-                     id="parent-id-input"
-                     name="parent-id-input"
-                     :class="[{'border-destructive ': !validationStates.get('resourceParentId') }]"
-                     class="py-3 px-4 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-highlight focus:ring-1 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none rounded-s-none"
-                     aria-describedby="hs-validation-name-error-helper">
-              <div :class="{ 'hidden': validationStates.get('resourceParentId') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-destructive"/>
-              </div>
-            </div>
-          </div>
-          <p :class="{ 'hidden': validationStates.get('resourceParentId') }" class="text-sm text-destructive mt-2"
-             id="hs-validation-name-error-helper">{{ resourceParentIdError }}</p>
-        </div>
-        <!-- End Resource Parent -->
-
-        <label for="name-input-label"
-               class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">
-          Data Class
-        </label>
-        <ul class="flex flex-col sm:flex-row">
-          <li v-for="(value, idx) in [v2DataClass.DATA_CLASS_PUBLIC, v2DataClass.DATA_CLASS_PRIVATE, v2DataClass.DATA_CLASS_WORKSPACE, v2DataClass.DATA_CLASS_CONFIDENTIAL]"
-              class="inline-flex items-center gap-x-2.5 py-3 px-4 text-aruna-text-accent text-sm font-medium bg-aruna-muted border border-aruna-text/50 -mt-px first:rounded-t-sm first:mt-0 last:rounded-b-md sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:first:rounded-es-md sm:last:rounded-es-none sm:last:rounded-se-md">
-            <div class="relative flex items-start w-full">
-              <div class="flex items-center h-5">
-                <input type="radio"
-                       :id="`resource-dataclass-radio-${idx}`"
-                       name="hs-horizontal-list-group-item-radio"
-                       v-model="resourceDataclass"
-                       :value="value"
-                       class="shrink-0 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"
-                       v-bind:checked="value === v2DataClass.DATA_CLASS_PUBLIC">
-              </div>
-              <label :for="`resource-dataclass-radio-${idx}`"
-                     class="ms-3 block w-full text-sm font-bold text-aruna-text-accent">
-                {{ toDataClassStr(value) }}
-              </label>
-            </div>
-          </li>
-        </ul>
-
-        <div class="flex flex-row space-x-4 mt-6">
-          <div class="flex flex-col basis-1/2">
-            <label for="meta-license-select"
-                   class="block text-lg font-medium mb-2 text-aruna-text-accent">
-              Metadata License
-            </label>
-            <select id="meta-license-select"
-                    v-model="metaLicense"
-                    class="py-3 px-4 pe-9 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none">
-              <option v-for="license in licenses"
-                      :value="license.tag"
-                      v-bind:selected="license.tag === 'AllRightsReserved'">{{ license.name }}
-              </option>
-            </select>
-          </div>
-          <div class="flex flex-col grow">
-            <label for="data-license-select"
-                   class="block text-lg font-medium mb-2 text-aruna-text-accent">
-              Data License
-            </label>
-            <select id="data-license-select"
-                    v-model="dataLicense"
-                    class="py-3 px-4 pe-9 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none">
-              <option v-for="license in licenses"
-                      :value="license.tag"
-                      v-bind:selected="license.tag === 'AllRightsReserved'">{{ license.name }}
-              </option>
-            </select>
-          </div>
-        </div>
-
-        <form class="mt-6" v-if="resourceType === v2ResourceVariant.RESOURCE_VARIANT_OBJECT">
-          <h3 class="block mb-2 text-lg font-medium text-aruna-text-accent">
-            Upload (Choose file or Drag 'n Drop)
-          </h3>
-          <label for="large-file-input" class="sr-only">Choose file or Drag 'n Drop</label>
-          <input type="file"
-                 v-on:change="dataFileChange"
-                 name="large-file-input"
-                 id="large-file-input"
-                 class="block w-full border border-aruna-text/50 shadow-sm rounded-md bg-aruna-muted text-aruna-text text-sm focus:z-10 focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none
-                        file:bg-aruna-fg
-                        file:text-aruna-text-accent
-                        file:border-0
-                        file:me-4
-                        file:p-4">
-        </form>
-      </div>
-
-      <div class="flex px-4 grow flex-row md:flex-col overflow-x-auto">
-        <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>
-        </div>
-
-        <div class="-m-1.5 overflow-x-auto">
-          <div class="p-1.5 min-w-full inline-block align-middle">
-            <div class="overflow-hidden border border-aruna-text/50">
-              <table class="min-w-full divide-y divide-aruna-text">
-                <thead class="bg-aruna-muted">
-                <tr>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Name
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Email
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Orcid
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
-                    Actions
-                  </th>
-                </tr>
-                </thead>
-                <tbody class="divide-y divide-aruna-text/50">
-                <tr v-for="[key, value] in authors">
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ value.firstName }} {{ value.lastName }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ value.email }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ value.orcid }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-center">
-                    <button type="button"
-                            @click="removeAuthor(key)"
-                            class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
-                      <IconTrash class="flex-shrink-0 size-6"/>
-                    </button>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex flex-row mb-2 mt-6 justify-start items-center">
-          <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">
-            <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>
-        </div>
-
-        <div class="-m-1.5 overflow-x-auto">
-          <div class="p-1.5 min-w-full inline-block align-middle">
-            <div class="overflow-hidden border border-aruna-text/50">
-              <table class="min-w-full divide-y divide-aruna-text">
-                <thead class="bg-aruna-muted">
-                <tr>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">Key
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">Value
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">Type
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
-                    Actions
-                  </th>
-                </tr>
-                </thead>
-                <tbody class="divide-y divide-aruna-text/50">
-                <tr v-for="[key, value] in keyValues">
-                  <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-aruna-text">
-                    {{ key }}
-                  </td>
-                  <td v-html="prettyDisplayJson(value.value)"
-                      class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text"></td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ toKeyValueVariantStr(value.variant) }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-center text-sm font-medium">
-                    <button type="button"
-                            @click="removeKeyValue(key)"
-                            class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
-                      <IconTrash class="flex-shrink-0 size-6"/>
-                    </button>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex flex-row mb-2 justify-start items-center mt-6 ">
-          <label for="key-values-input"
-                 class="block text-lg font-medium text-gray-300">Additional Relations</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="#relation-add">
-            <IconPlus class="flex-shrink-0 size-4"/>
-          </button>
-        </div>
-
-        <div class="-m-1.5 overflow-x-auto">
-          <div class="p-1.5 min-w-full inline-block align-middle">
-            <div class="overflow-hidden border border-aruna-text/50">
-              <table class="min-w-full divide-y divide-aruna-text">
-                <thead class="bg-aruna-muted">
-                <tr>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Resource Id
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Resource Type
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Relation Type
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Direction
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
-                    Actions
-                  </th>
-                </tr>
-                </thead>
-                <tbody class="divide-y divide-aruna-text/50">
-                <tr v-for="[key, value] in relations">
-                  <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-aruna-text">
-                    {{ value.internal?.resourceId }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ toResourceTypeStr(value.internal?.resourceVariant) }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ toRelationVariantStr(value.internal?.definedVariant) }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ toRelationDirectionStr(value.internal?.direction) }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-center text-sm font-medium">
-                    <button type="button"
-                            @click="removeRelation(key)"
-                            class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
-                      <IconTrash class="flex-shrink-0 size-6"/>
-                    </button>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-row grow justify-end">
-      <Button type="button"
-              v-bind:disabled="!validState"
-              @click="submit"
-              variant="outline"
-              class="px-4 py-6 inline-flex text-md rounded-md border border-aruna-highlight bg-transparent text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
-        Create Resource
-      </Button>
-    </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"/>
-  <ModalRelation modalId="relation-add" @add-relation="addRelation"/>
-  <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"
-                      :errorMsg="creationError"/>
-  <Footer/>
-</template>
\ No newline at end of file
diff --git a/pages/tos.vue b/pages/tos.vue
index 5c58f36f..c3658d25 100644
--- a/pages/tos.vue
+++ b/pages/tos.vue
@@ -1,30 +1,24 @@
 <template>
   <NavigationTop />
 
-  <div class="container mx-auto mt-4 p-4 border-2 border-aruna-text/50 rounded-md bg-[#080d1f]">
-    <div class="border-b border-gray-700 px-4">
-      <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
-        <button type="button"
-                class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight active"
-                id="basic-tabs-item-1"
-                data-hs-tab="#basic-tabs-1"
-                aria-controls="basic-tabs-1"
-                role="tab">
+  <div class="container mx-auto mt-4 p-4 border-2 border-aruna-text/50 rounded-md bg-aruna-bg/90">
+
+    <Tabs default-value="agb"
+          class="w-full">
+      <TabsList class="rounded-sm border border-aruna-text/50">
+        <TabsTrigger value="agb"
+                     class="rounded-sm text-aruna-text data-[state=active]:bg-aruna-bg/90 data-[state=active]:text-aruna-text-accent">
           Nutzungsbedingungen
-        </button>
-        <button type="button"
-                class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight"
-                id="basic-tabs-item-2"
-                data-hs-tab="#basic-tabs-2"
-                aria-controls="basic-tabs-2"
-                role="tab">
+        </TabsTrigger>
+        <TabsTrigger value="tos"
+                     class="rounded-sm text-aruna-text data-[state=active]:bg-aruna-bg/90 data-[state=active]:text-aruna-text-accent">
           Terms of Service
-        </button>
-      </nav>
-    </div>
+        </TabsTrigger>
+      </TabsList>
+
+      <Separator class="bg-aruna-text/50 my-4"/>
 
-    <div class="mt-3 p-4">
-      <div id="basic-tabs-1" role="tabpanel" aria-labelledby="basic-tabs-item-1">
+      <TabsContent value="agb">
         <h1 class="text-3xl font-bold text-aruna-text-accent uppercase">
           Nutzungsbedingungen
         </h1>
@@ -124,9 +118,8 @@
           informieren, indem wir die überarbeiteten Bedingungen auf unserer Website veröffentlichen. Die fortgesetzte
           Nutzung des Webservices nach solchen Änderungen gilt als Zustimmung zu den aktualisierten Nutzungsbedingungen.
         </p>
-      </div>
-
-      <div id="basic-tabs-2" class="hidden" role="tabpanel" aria-labelledby="basic-tabs-item-2">
+      </TabsContent>
+      <TabsContent value="tos">
         <h1 class="text-3xl font-bold text-aruna-text-accent">
           Terms of service
         </h1>
@@ -234,8 +227,8 @@
           posting the revised terms on our website. Your continued use of the Web Service following such changes will
           constitute your acceptance of the updated Terms of Service.
         </p>
-      </div>
-    </div>
+      </TabsContent>
+    </Tabs>
   </div>
 
   <Footer />
diff --git a/pages/user/account.vue b/pages/user/account.vue
deleted file mode 100644
index 50630707..00000000
--- a/pages/user/account.vue
+++ /dev/null
@@ -1,498 +0,0 @@
-<script setup lang="ts">
-import {
-  IconBuildingWarehouse,
-  IconCheck,
-  IconDiscountCheck,
-  IconExclamationCircle,
-  IconLoader,
-  IconPlant,
-  IconPokeball,
-  IconTrash,
-  IconUserScan,
-  IconX
-} from '@tabler/icons-vue'
-import type {v2Endpoint, v2Token, v2User} from '~/composables/aruna_api_json'
-import {storagemodelsv2ComponentStatus} from "~/composables/aruna_api_json";
-import {deleteUserToken} from "~/composables/api_wrapper";
-import EventBus from "~/composables/EventBus";
-import {useToast} from "~/components/ui/toast";
-import CredentialsDialog from "~/components/custom-ui/dialog/CredentialsDialog.vue";
-import TokenDialog from "~/components/custom-ui/dialog/TokenDialog.vue";
-import {DateFormatter} from "@internationalized/date";
-import {Button} from "~/components/ui/button";
-import {h} from "vue";
-
-// Toast for notifications
-const {toast} = useToast()
-
-// DateFormatter for token expiry dates
-const df = new DateFormatter((navigator && navigator.language) || "de-DE", {
-  dateStyle: 'long',
-})
-
-// Constants
-const arunaUser: Ref<v2User | undefined> = inject('userRef', ref(undefined))
-const endpoints: v2Endpoint[] | undefined = await fetchEndpoints()
-
-watch(arunaUser, () => {
-  console.log("User got updated")
-  // Refresh lists
-  console.log(arunaUser.value?.attributes?.tokens)
-})
-
-const get_user = () => {
-  if (arunaUser.value === undefined || typeof arunaUser.value === "string") {
-    return undefined
-  }
-  return arunaUser.value
-}
-
-function is_active(): boolean {
-  if (arunaUser.value === undefined || typeof arunaUser.value === "string") {
-    return false
-  } else if (arunaUser.value.active) {
-    return arunaUser.value.active
-  }
-  return false
-}
-
-function getTokens(): v2Token[] {
-  if (arunaUser.value === undefined || typeof arunaUser.value === "string") {
-    return []
-  } else {
-    if (arunaUser.value.attributes?.tokens) {
-      return arunaUser.value.attributes?.tokens
-    }
-  }
-  return []
-}
-
-async function deleteToken(tokenId: string) {
-  await deleteUserToken(tokenId)
-  EventBus.emit("updateUser")
-}
-
-function hasEndpoint(endpointId: string | undefined): boolean {
-  if (arunaUser.value === undefined || typeof arunaUser.value === "string") {
-    return false
-  } else {
-    let found = false
-    if (arunaUser.value?.attributes?.trustedEndpoints) {
-      for (const trustedEndpoint of arunaUser.value.attributes.trustedEndpoints) {
-        if (trustedEndpoint === endpointId) {
-          found = true
-          break
-        }
-      }
-    }
-    return found
-  }
-}
-
-/* ----- CREDENTIALS DIALOG ----- */
-const enum Dialogs {
-  TokenDialog,
-  CredentialsDialog
-}
-
-type EndpointCredentials = {
-  endpointId: string,
-  endpointName?: string,
-  endpointHost: string,
-  accessKeyId: string,
-  accessSecret: string,
-}
-
-const credentials: Ref<EndpointCredentials | undefined> = ref(undefined)
-const loading: Ref<string | undefined> = ref(undefined)
-
-const credentialsDialogOpen = ref(false)
-const tokenDialogOpen = ref(false)
-
-function setVisibility(dialog: Dialogs, visible: boolean): void {
-  switch (dialog) {
-    case Dialogs.TokenDialog:
-      tokenDialogOpen.value = visible
-      break
-    case Dialogs.CredentialsDialog:
-      credentialsDialogOpen.value = visible
-      break
-    default:
-      console.log(`Dialog ${dialog} does not exist here.`)
-  }
-}
-
-function clear() {
-  credentials.value = undefined
-  credentialsDialogOpen.value = false
-}
-
-async function createS3Credentials(endpoint: v2Endpoint) {
-  // Indicate async loading in progress (disable buttons)
-  loading.value = `${endpoint.id}_create`
-  // Create S3 credentials
-  await createUserS3Credentials(endpoint.id)
-      .then(response => {
-        loading.value = undefined // Re-activate buttons
-        if (response) {
-          credentials.value = {
-            endpointId: endpoint.id,
-            endpointName: endpoint.name,
-            endpointHost: response.s3EndpointUrl,
-            accessKeyId: response.s3AccessKey,
-            accessSecret: response.s3SecretKey
-          } as EndpointCredentials
-          setVisibility(Dialogs.CredentialsDialog, true)
-        } else {
-          // Empty remaining credentials and close if open
-          credentials.value = undefined
-          setVisibility(Dialogs.CredentialsDialog, false)
-
-          // Notify with error
-          toast({
-            title: 'Error',
-            description: 'Received empty response. If this problem persists please contact an administrator.',
-            variant: 'destructive',
-            duration: 10000,
-          })
-        }
-
-        EventBus.emit('updateUser')
-      }).catch(error => {
-        loading.value = undefined // Re-activate buttons
-        // Empty remaining credentials
-        credentials.value = undefined
-
-        // Notify with error
-        toast({
-          title: 'Error',
-          //description: 'Something went wrong. If this problem persists please contact an administrator.',
-          description: error.message,
-          variant: 'destructive',
-          duration: 10000,
-        })
-      })
-}
-
-async function getS3Credentials(endpoint: v2Endpoint) {
-// Indicate async loading in progress (disable buttons)
-  loading.value = `${endpoint.id}_create`
-  // Fetch existing S3 credentials
-  return await getUserS3Credentials(endpoint.id)
-      .then(response => {
-        loading.value = undefined // Re-activate buttons
-        if (response) {
-          credentials.value = {
-            endpointId: endpoint.id,
-            endpointName: endpoint.name,
-            endpointHost: response.s3EndpointUrl,
-            accessKeyId: response.s3AccessKey,
-            accessSecret: response.s3SecretKey
-          } as EndpointCredentials
-          setVisibility(Dialogs.CredentialsDialog, true)
-        } else {
-          // Empty remaining credentials and close if open
-          credentials.value = undefined
-          setVisibility(Dialogs.CredentialsDialog, false)
-
-          // Notify with error
-          toast({
-            title: 'Error',
-            description: 'Received empty response. If this problem persists please contact an administrator.',
-            variant: 'destructive',
-            duration: 10000,
-          })
-        }
-      }).catch(error => {
-        loading.value = undefined // Re-activate buttons
-        // Empty remaining credentials
-        credentials.value = undefined
-
-        // Notify with error
-        toast({
-          title: 'Error',
-          //description: 'Something went wrong. If this problem persists please contact an administrator.',
-          description: error.message,
-          variant: 'destructive',
-          duration: 10000,
-        })
-      })
-}
-
-/* ----- END CREDENTIALS DIALOG ----- */
-
-/* ----- ALTERNATIVE CALLBACK RESPONSE -----*/
-const route = useRoute()
-const add_response = route.query['add']
-
-if (add_response === 'success') {
-  toast({
-    description: h('div',
-        {class: 'flex space-x-2 items-center justify-center'},
-        [
-          h(IconPlant, {class: 'flex-shrink-0 size-5 text-green-400'}),
-          h('span',
-              {class: 'text-fuchsia-50'},
-              ['Successfully added the login to your Aruna account.'])
-        ]),
-    duration: 10000
-  })
-} else if (add_response === 'failure') {
-  toast({
-    description: h('div',
-        {class: 'flex space-x-2 items-center justify-center'},
-        [
-          h(IconExclamationCircle, {class: 'flex-shrink-0 size-5 text-destructive'}),
-          h('span',
-              {class: 'text-aruna-text-accent'},
-              ['Adding the login to your Aruna account failed. Please try again later.'])
-        ]),
-    duration: 10000
-  })
-}
-/* ----- END ALTERNATIVE CALLBACK RESPONSE -----*/
-</script>
-
-<template>
-  <NavigationTop/>
-
-  <CredentialsDialog :initial-open="credentialsDialogOpen"
-                     :with-button="false"
-                     :host-id="credentials?.endpointId || ''"
-                     :host-name="credentials?.endpointName || ''"
-                     :host-url="credentials?.endpointHost || ''"
-                     :access-key-id="credentials?.accessKeyId || ''"
-                     :access-secret="credentials?.accessSecret || ''"
-                     @update:open="clear"/>
-
-  <TokenDialog :initial-open="tokenDialogOpen"
-               :with-button="false"
-               @update:open="setVisibility(Dialogs.TokenDialog, false)"/>
-
-  <div class="min-h-[calc(100vh-110px)]">
-    <div class="md:container sm:mx-1 md:mx-auto mt-[10vh] p-4 border border-aruna-text rounded-md bg-aruna-bg/90">
-      <div class="border-b border-aruna-text/50">
-        <nav class="flex space-x-6" aria-label="Tabs" role="tablist">
-          <button type="button"
-                  class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight active"
-                  id="tabs-with-icons-item-1"
-                  data-hs-tab="#tabs-with-icons-1"
-                  aria-controls="tabs-with-icons-1"
-                  role="tab">
-            <IconUserScan class="flex-shrink-0"/>
-            Profile
-          </button>
-          <button type="button"
-                  class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight"
-                  id="tabs-with-icons-item-2"
-                  data-hs-tab="#tabs-with-icons-2"
-                  aria-controls="tabs-with-icons-2"
-                  role="tab">
-            <IconPokeball class="flex-shrink-0 size-4"/>
-            Tokens
-          </button>
-          <button type="button"
-                  class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight"
-                  id="tabs-with-icons-item-3"
-                  data-hs-tab="#tabs-with-icons-3"
-                  aria-controls="tabs-with-icons-3"
-                  role="tab">
-            <IconBuildingWarehouse class="flex-shrink-0 size-4"/>
-            Data Proxies
-          </button>
-        </nav>
-      </div>
-
-      <div class="mt-3">
-        <div id="tabs-with-icons-1"
-             role="tabpanel"
-             aria-labelledby="tabs-with-icons-item-1">
-          <div v-if="!is_active()"
-               class="my-6 text-center bg-yellow-800/10 border border-yellow-900 text-yellow-500 text-sm rounded-lg p-4"
-               role="alert">
-            <span class="font-bold">
-              Info:</span> Your account is currently not active. We will activate your account as soon as possible.
-          </div>
-
-          <div class="flex flex-col gap-y-4 lg:flex-row justify-between">
-            <Card class="basis-1/5 bg-aruna-muted border-aruna-text/50">
-              <CardHeader class="text-center">
-                <CardTitle class="text-xl text-aruna-text-accent">User Id</CardTitle>
-                <CardDescription class="text-lg text-aruna-text">{{ get_user()?.id || '-' }}</CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card class="basis-1/5 bg-aruna-muted border-aruna-text/50">
-              <CardHeader class="text-center">
-                <CardTitle class="text-xl text-aruna-text-accent">Display Name</CardTitle>
-                <CardDescription class="text-lg text-aruna-text">{{ get_user()?.displayName || '-' }}</CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card class="basis-1/5 bg-aruna-muted border-aruna-text/50">
-              <CardHeader class="text-center">
-                <CardTitle class="text-xl text-aruna-text-accent">Email</CardTitle>
-                <CardDescription class="text-lg text-aruna-text">
-                  {{ get_user()?.email ? get_user()?.email : "No email provided" }}
-                </CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card class="basis-1/5 bg-aruna-muted border-aruna-text/50">
-              <CardHeader class="text-center">
-                <CardTitle class="text-xl text-aruna-text-accent">Active</CardTitle>
-                <CardDescription class="flex text-lg items-center justify-center">
-                  <IconCheck v-if="is_active()" class="flex-shrink-0 size-8 text-green-600"/>
-                  <IconX v-else class="flex-shrink-0 text-red-600"/>
-                </CardDescription>
-              </CardHeader>
-            </Card>
-          </div>
-
-          <Separator class="my-8 bg-aruna-text"/>
-
-          <Card class="max-w-md mx-auto bg-aruna-muted border-aruna-text/50">
-            <CardHeader class="text-center">
-              <CardTitle class="text-xl text-aruna-text-accent">Connect AAI</CardTitle>
-              <CardDescription class="flex flex-col">
-                <p>Connect your LifeScience RI accounts to the Aruna account you're currently logged in with.</p>
-                <Button variant="outline"
-                        class="inline-flex shrink mx-auto mt-4 px-4 border-aruna-text/50 text-lg hover:bg-aruna-fg">
-                  <a href="/auth/login?provider=lifescience&add_idp=true" class="flex">
-                    <img src="/imgs/ls-ri.webp"
-                         alt="LifeScience Login"
-                         class="h-6 mr-2"/>
-                    Connect LifeScience RI
-                  </a>
-                </Button>
-              </CardDescription>
-            </CardHeader>
-          </Card>
-
-
-        </div>
-
-        <div id="tabs-with-icons-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-icons-item-2">
-          <div class="flex flex-col">
-            <div class="-m-1.5 overflow-x-auto">
-              <div class="p-1.5 min-w-full inline-block align-middle">
-                <div class="overflow-hidden">
-                  <table class="min-w-full divide-y divide-aruna-text/50">
-                    <thead>
-                    <tr>
-                      <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">
-                        ID
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">
-                        Name
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">
-                        Last
-                        Used
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">
-                        Expiry
-                        date
-                      </th>
-                      <th scope="col"
-                          class="px-6 py-3 text-center text-md font-medium text-aruna-text-accent uppercase">Actions
-                      </th>
-                    </tr>
-                    </thead>
-
-                    <tbody v-if="getTokens().length > 0" class="divide-y divide-aruna-text">
-                    <tr v-for="token in getTokens()" class="hover:bg-aruna-fg">
-                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-aruna-text">
-                        {{ token.id }}
-                      </td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                        {{ token.name }}
-                      </td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                        Not yet implemented
-                      </td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                        {{ token.expiresAt ? df.format(new Date(token.expiresAt)) : 'Expiry date is undefined' }}
-                      </td>
-
-                      <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
-                        <button v-if="token.id" type="button"
-                                @click="deleteToken(token.id)"
-                                class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-red-700 hover:border hover:border-red-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
-                          <IconTrash/>
-                        </button>
-                      </td>
-                    </tr>
-                    </tbody>
-                    <tbody v-else>
-                    <tr class="hover:bg-aruna-fg">
-                      <td colspan="5" class="px-6 py-4 whitespace-nowrap text-center text-sm text-aruna-text-accent">
-                        <strong>Looks like you currently have no active tokens!</strong>
-                      </td>
-                    </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-row justify-end">
-            <Button @click="setVisibility(Dialogs.TokenDialog, true)"
-                    variant="outline"
-                    class="mt-2 text-aruna-highlight border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent text-md rounded-sm">
-              Create Token
-            </Button>
-          </div>
-        </div>
-
-        <div id="tabs-with-icons-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-icons-item-3">
-          <div class="flex flex-auto flex-wrap gap-x-4 gap-y-4">
-            <div v-for="endpoint in endpoints"
-                 class="flex flex-col space-y-1 bg-aruna-muted border border-aruna-text/50 shadow-sm rounded-xl p-4 md:p-5 text-aruna-text">
-              <div class="flex flex-row font-bold items-center justify-between text-aruna-highlight text-lg">
-                <span>{{ endpoint.name }}</span>
-                <IconDiscountCheck class="lex-shrink-0 size-6 ms-4 text-green-700" v-if="hasEndpoint(endpoint.id)"/>
-              </div>
-              <div class="flex flex-row text-aruna-text-accent">
-                <span class="font-bold me-2 text-aruna-text">ID:</span>
-                {{ endpoint.id }}
-              </div>
-              <div class="flex flex-row text-aruna-text-accent">
-                <span class="font-bold me-2 text-aruna-text">Variant:</span>
-                {{ toEndpointVariantStr(endpoint.epVariant) }}
-              </div>
-              <div class="flex flex-row text-aruna-text-accent">
-                <span class="font-bold me-2 text-aruna-text">Public:</span>
-                {{ endpoint.isPublic }}
-              </div>
-              <div class="flex flex-row text-aruna-text-accent">
-                <span class="font-bold me-2 text-aruna-text">Status:</span>
-                {{ toComponentStatusStr(endpoint.status) }}
-              </div>
-
-              <div class="flex flex-row justify-end space-x-4">
-                <Button v-if="endpoint.id && hasEndpoint(endpoint.id)"
-                        :disabled="loading"
-                        @click="getS3Credentials(endpoint)"
-                        class="mt-2 bg-transparent border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent text-aruna-highlight text-md rounded-sm">
-                  <IconLoader v-if="loading === endpoint.id+'_get'" class="w-4 h-4 mr-2 animate-spin"/>
-                  Get Credentials
-                </Button>
-                <Button variant="outline"
-                        v-if="endpoint.id && endpoint.status === storagemodelsv2ComponentStatus.COMPONENT_STATUS_AVAILABLE"
-                        :disabled="loading"
-                        @click="createS3Credentials(endpoint)"
-                        class="mt-2 bg-transparent border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent text-aruna-highlight text-md rounded-sm">
-                  <IconLoader v-if="loading === endpoint.id+'_create'" class="w-4 h-4 mr-2 animate-spin"/>
-                  Create Credentials
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <Footer/>
-</template>
\ No newline at end of file
diff --git a/pages/user/admin.vue b/pages/user/admin.vue
deleted file mode 100644
index 6cc4a225..00000000
--- a/pages/user/admin.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import {IconCheck, IconMinus, IconPlus, IconSearch, IconX} from '@tabler/icons-vue'
-import type {v2User} from '~/composables/aruna_api_json'
-
-const users: Ref<v2User[] | undefined> = ref(undefined)
-const forceRefresh = ref(0)
-
-async function fillUsers() {
-  users.value = await fetchUsers()
-
-  // Sort by admin status, then name and then id (just in case)
-  if (users.value && users.value.every(user => user.attributes?.globalAdmin !== undefined)) {
-    users.value.sort((a, b) => {
-      if (a.attributes?.globalAdmin && !b.attributes?.globalAdmin)
-        return -1
-      else if (!a.attributes?.globalAdmin && b.attributes?.globalAdmin)
-        return 1
-      else if (a.displayName && b.displayName)
-        return a.displayName.localeCompare(b.displayName)
-      else
-        return (a.id || '').localeCompare(b.id || '')
-    })
-  }
-
-  forceRefresh.value += 1
-}
-
-async function deactivate(userId: string) {
-  await deactivateUser(userId)
-  await fillUsers()
-}
-
-async function activate(userId: string) {
-  await activateUser(userId)
-  await fillUsers()
-}
-
-onMounted(async () => await fillUsers())
-</script>
-
-<template>
-  <NavigationTop/>
-
-  <div class="min-h-[calc(100vh-110px)]">
-    <div class="md:container sm:mx-1 md:mx-auto mt-10 p-4 border border-aruna-text rounded-lg bg-aruna-bg/90">
-      <h1 class="text-3xl font-bold text-white">
-        User Administration
-      </h1>
-      <Separator class="bg-aruna-text my-4"/>
-
-      <div class="flex flex-col">
-        <div class="-m-1.5 overflow-x-auto">
-          <div class="p-1.5 min-w-full inline-block align-middle">
-            <div class="overflow-hidden">
-              <table class="min-w-full divide-y divide-aruna-text">
-                <thead>
-                <tr>
-                  <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">ID</th>
-                  <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">Name</th>
-                  <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">Email</th>
-                  <th scope="col" class="px-6 py-3 text-center text-md font-medium text-aruna-text-accent uppercase">Status</th>
-                  <th scope="col" class="px-6 py-3 text-center text-md font-medium text-aruna-text-accent uppercase">Actions</th>
-                </tr>
-                </thead>
-
-                <tbody v-if="users" class="divide-y divide-aruna-text/50">
-                <tr v-for="user in users"
-                    :key="forceRefresh"
-                    class="hover:bg-aruna-fg">
-                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-aruna-text">
-                    {{ user.id }}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                    {{ user.displayName }}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                    {{ user.email ? user.email : "No email provided" }}
-                  </td>
-                  <td
-                      class="flex justify-center space-x-2 px-6 py-4 whitespace-nowrap text-center content-center text-sm text-aruna-text">
-                    <span v-if="user.attributes?.globalAdmin"
-                          class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium text-red-500 bg-red-800/30 ">
-                      Admin
-                    </span>
-                    <span v-else
-                          class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium text-aruna-highlight bg-aruna-highlight/50">
-                      User
-                    </span>
-
-                    <span v-if="user.active"
-                          class="py-1.5 px-3 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-teal-100 text-teal-500 bg-teal-500/10">
-                      <IconCheck class="flex-shrink-0 size-4"/>
-                      Active
-                    </span>
-                    <span v-else
-                          class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-red-100 text-red-500 bg-red-500/10">
-                      <IconX class="flex-shrink-0 size-3"/>
-                      Disabled
-                    </span>
-                  </td>
-
-                  <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
-                    <Button variant="ghost"
-                            disabled
-                            class="me-2 p-1 rounded-sm border border-aruna-text text-aruna-text disabled:border-aruna-text/50 disabled:text-aruna-text/50">
-                      <IconSearch/>
-                    </Button>
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger as-child>
-                          <Button v-if="user.active && user.id"
-                                  variant="ghost"
-                                  @click="deactivate(user.id)"
-                                  class="me-2 p-1 rounded-sm border border-aruna-text text-aruna-text disabled:border-aruna-text/50 disabled:text-aruna-text/50">
-                            <IconMinus class="flex-shrink-0"/>
-                          </Button>
-                          <Button v-if="!user.active && user.id"
-                                  variant="ghost"
-                                  @click="activate(user.id)"
-                                  class="me-2 p-1 rounded-sm border border-aruna-text text-aruna-text disabled:border-aruna-text/50 disabled:text-aruna-text/50">
-                            <IconPlus class="flex-shrink-0"/>
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent class="rounded-sm border-aruna-text bg-aruna-muted text-aruna-text">
-                          <p>{{ user.active && user.id ? 'Deactivate' : 'Activate' }} this user</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  </td>
-                </tr>
-                </tbody>
-                <tbody v-else>
-                <tr>
-                  <td colspan="5" class="px-6 py-4 whitespace-nowrap text-center text-md text-aruna-text-accent">
-                    <strong>Looks like no users are available!</strong>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <Footer/>
-</template>
\ No newline at end of file
diff --git a/pages/user/dashboard.vue b/pages/user/dashboard.vue
new file mode 100644
index 00000000..005c2489
--- /dev/null
+++ b/pages/user/dashboard.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import Dashboard from "~/components/custom-ui/dashboard/Dashboard.vue";
+import type {User} from "~/composables/api_wrapper";
+
+/* ----- GLOBAL USER ----- */
+const user: Ref<User | undefined> = inject('userRef', ref(undefined))
+/* ----- END GLOBAL USER ----- */
+</script>
+<template>
+  <Dashboard :user="user"/>
+  <!-- TODO: Skeleton -->
+  <Footer/>
+</template>
\ No newline at end of file
diff --git a/pages/user/resources.vue b/pages/user/resources.vue
deleted file mode 100644
index faff0a43..00000000
--- a/pages/user/resources.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import {IconArrowLeft} from '@tabler/icons-vue';
-import {modelsv2Status, type v2ResourceWithPermission, type v2User} from "~/composables/aruna_api_json";
-
-// Check refresh and access before navigation
-
-//TODO: GetUserResources
-const userRef: Ref<v2User | undefined> = inject('userRef', ref(undefined))
-let resources: v2ResourceWithPermission[] = []
-const display: Ref<v2ResourceWithPermission[]> = ref([])
-
-const displayDeleted = ref(false)
-const forceRefresh = ref(0)
-watch(displayDeleted, () => {
-  console.log(displayDeleted)
-  fillDisplay()
-})
-
-async function fetchResources() {
-  // Wait for user injection
-  while (userRef.value === undefined) {
-    await sleep(100)
-  }
-  resources = await fetchUserResources(userRef.value)
-}
-
-function fillDisplay() {
-  if (resources) {
-    display.value = !displayDeleted.value ? resources.filter(ele => {
-      // Currently assuming only projects were fetched
-      return ele.resource?.project?.status !== modelsv2Status.STATUS_DELETED
-    }) : resources
-  } else {
-    display.value = []
-  }
-  forceRefresh.value++
-}
-
-onMounted(async () => {
-  await fetchResources()
-  fillDisplay()
-})
-
-// Used for back link to last page in navigation history
-const router = useRouter()
-const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay))
-</script>
-
-<template>
-  <NavigationTop/>
-
-  <div class="min-h-[calc(100vh-110px)]">
-    <div class="flex md:container sm:mx-1 md:mx-auto my-10 p-4 border border-aruna-text/50 rounded-md bg-muted/40">
-      <div class="flex flex-col grow">
-        <div class="flex flex-row grow justify-between">
-          <div class="flex items-center space-x-2">
-            <Switch @update:checked="(v) => displayDeleted = v"
-                    id="display-deleted"
-                    class="border border-aruna-text/50 data-[state=checked]:bg-aruna-highlight data-[state=unchecked]:bg-aruna-text/50"/>
-            <Label for="display-deleted">Display deleted resources</Label>
-          </div>
-          <NuxtLink to="/objects/create"
-                    class="py-1 px-2 mt-2 inline-flex gap-x-2 text-md rounded-md bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
-            Create new resource
-          </NuxtLink>
-        </div>
-
-        <Separator class="my-5 bg-gray-500"/>
-
-        <div class="flex flex-col grow">
-          <div :key="forceRefresh" v-for="resource in display" class="flex flex-row grow">
-            <CardResource v-if="resource.resource" :resource="resource.resource"/>
-          </div>
-          <div class="flex flex-col grow" v-if="resources.length == 0">
-            Seems like you do not own any resources.
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <Footer/>
-</template>
\ No newline at end of file
diff --git a/plugins/preline.client.ts b/plugins/preline.client.ts
deleted file mode 100644
index 7cfa3d82..00000000
--- a/plugins/preline.client.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import "preline/preline";
-import { type IStaticMethods } from "preline/preline";
-declare global {
-  interface Window {
-    HSStaticMethods: IStaticMethods;
-  }
-}
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook("page:finish", () => {
-    window.HSStaticMethods.autoInit();
-  });
-});
\ No newline at end of file
diff --git a/server/api/ontology.get.ts b/server/api/ontology.get.ts
index 7634a22d..74a851fd 100644
--- a/server/api/ontology.get.ts
+++ b/server/api/ontology.get.ts
@@ -1,4 +1,4 @@
-import {SelectOntologyResponse} from "~/composables/ts_api/SelectOntologyResponse";
+import {SelectOntologyResponse} from "~/types/SelectOntologyResponse";
 
 export default defineEventHandler(async event => {
   const queryParams = getQuery(event)
diff --git a/server/api/resource-info.ts b/server/api/resource-info.ts
index 4b78f15a..8b13db9f 100644
--- a/server/api/resource-info.ts
+++ b/server/api/resource-info.ts
@@ -1,5 +1,6 @@
 import type {v2GetResourceResponse} from '~/composables/aruna_api_json'
 import {ResourceInfo} from "~/composables/ResourceInfo";
+import {fetchCachedLicense} from "~/server/utils/licence";
 
 export default defineEventHandler(async event => {
   const access_token = getCookie(event, 'access_token') // Does not matter if undefined
diff --git a/server/api/v3/components.get.ts b/server/api/v3/components.get.ts
new file mode 100644
index 00000000..a531d6e3
--- /dev/null
+++ b/server/api/v3/components.get.ts
@@ -0,0 +1,16 @@
+import {GetRealmComponentsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const id = getQuery(event)['id']
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/realms/${id}/components`
+
+  return await $fetch<GetRealmComponentsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+  }).then(response => {
+    console.log('[GetRealmComponents Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/components.patch.ts b/server/api/v3/components.patch.ts
new file mode 100644
index 00000000..35a71b8e
--- /dev/null
+++ b/server/api/v3/components.patch.ts
@@ -0,0 +1,17 @@
+import {AddComponentToRealmResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const patchUrl = `${baseUrl}/api/v3/realms/${body.realm_id}/components/${body.component_id}`
+
+  return await $fetch<AddComponentToRealmResponse>(patchUrl, {
+    method: 'PATCH',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+  }).then(response => {
+    console.log('[AddComponentToRealm Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/components.post.ts b/server/api/v3/components.post.ts
new file mode 100644
index 00000000..66af58a6
--- /dev/null
+++ b/server/api/v3/components.post.ts
@@ -0,0 +1,17 @@
+import {CreateComponentResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<CreateComponentResponse>(`${baseUrl}/api/v3/global/components`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[CreateComponent Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/credentials.get.ts b/server/api/v3/credentials.get.ts
new file mode 100644
index 00000000..623f3087
--- /dev/null
+++ b/server/api/v3/credentials.get.ts
@@ -0,0 +1,15 @@
+import {GetS3CredentialsFromUserResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users/s3credentials`
+
+  return await $fetch<GetS3CredentialsFromUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+  }).then(response => {
+    console.log('[GetS3CredentialsFromUser Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/credentials.post.ts b/server/api/v3/credentials.post.ts
new file mode 100644
index 00000000..e2ef1708
--- /dev/null
+++ b/server/api/v3/credentials.post.ts
@@ -0,0 +1,17 @@
+import {CreateS3CredentialsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<CreateS3CredentialsResponse>(`${baseUrl}/api/v3/users/s3credentials`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[CreateS3Credentials Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/events.get.ts b/server/api/v3/events.get.ts
new file mode 100644
index 00000000..0fb60f5c
--- /dev/null
+++ b/server/api/v3/events.get.ts
@@ -0,0 +1,24 @@
+import {GetEventsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/info/events`
+
+  console.log('[GetEventsRoute]', query)
+  if (!query.subscriber_id) {
+    return {events: []}
+  }
+
+  return await $fetch<GetEventsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    query: query
+  }).then(response => {
+    if (response) {
+      //console.log('[GetEventsRoute]', response)
+      return response
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/group.post.ts b/server/api/v3/group.post.ts
new file mode 100644
index 00000000..12463715
--- /dev/null
+++ b/server/api/v3/group.post.ts
@@ -0,0 +1,13 @@
+import {CreateGroupResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<CreateGroupResponse>(`${baseUrl}/api/v3/groups`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/groups.get.ts b/server/api/v3/groups.get.ts
new file mode 100644
index 00000000..69897987
--- /dev/null
+++ b/server/api/v3/groups.get.ts
@@ -0,0 +1,27 @@
+import {GetGroupsFromUserResponse} from "~/composables/aruna_v3/GetGroupsFromUserResponse";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users/groups`
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetGroupsFromUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  }).then(response => {
+    if (response) {
+      /*
+      for (const [group, permission] of response.groups) {
+        console.log(permission, group)
+      }
+      */
+    }
+    return response
+  }).catch(error => {
+    console.dir(error.data)
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/licenses.get.ts b/server/api/v3/licenses.get.ts
new file mode 100644
index 00000000..468b6c55
--- /dev/null
+++ b/server/api/v3/licenses.get.ts
@@ -0,0 +1,23 @@
+import {GetLicensesResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/license`
+
+  return await $fetch<GetLicensesResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+  }).then(response => {
+    if (response) {
+      /*
+      for (const event of response.events) {
+        console.log('[GetEvents Server]', event[Object.keys(event)[0]])
+      }
+      */
+      //console.dir('[GetEvents Server]', response)
+
+      return response.licenses
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/licenses.post.ts b/server/api/v3/licenses.post.ts
new file mode 100644
index 00000000..3dca43a9
--- /dev/null
+++ b/server/api/v3/licenses.post.ts
@@ -0,0 +1,13 @@
+import {CreateLicensesResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<CreateLicensesResponse>(`${baseUrl}/api/v3/license`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/project.post.ts b/server/api/v3/project.post.ts
new file mode 100644
index 00000000..4c60db50
--- /dev/null
+++ b/server/api/v3/project.post.ts
@@ -0,0 +1,14 @@
+import {CreateResourceResponse} from "~/composables/aruna_v3/CreateResourceResponse";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<CreateResourceResponse>(`${baseUrl}/api/v3/resources/projects`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/realm.post.ts b/server/api/v3/realm.post.ts
new file mode 100644
index 00000000..ded38074
--- /dev/null
+++ b/server/api/v3/realm.post.ts
@@ -0,0 +1,13 @@
+import {CreateRealmResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<CreateRealmResponse>(`${baseUrl}/api/v3/realms`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/realms.get.ts b/server/api/v3/realms.get.ts
new file mode 100644
index 00000000..7f0600ac
--- /dev/null
+++ b/server/api/v3/realms.get.ts
@@ -0,0 +1,16 @@
+import {GetRealmsFromUserResponse} from "~/composables/aruna_v3/GetRealmsFromUserResponse";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users/realms`
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetRealmsFromUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/relations.get.ts b/server/api/v3/relations.get.ts
new file mode 100644
index 00000000..e8242fc3
--- /dev/null
+++ b/server/api/v3/relations.get.ts
@@ -0,0 +1,24 @@
+import {GetRelationsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/resources/${query['node']}/relations?filter[]=0`
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetRelationsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    query: query,
+  })
+  /*
+  .then(response => {
+    console.dir(response)
+    return response
+  })
+  */
+})
\ No newline at end of file
diff --git a/server/api/v3/resource.delete.ts b/server/api/v3/resource.delete.ts
new file mode 100644
index 00000000..76554be7
--- /dev/null
+++ b/server/api/v3/resource.delete.ts
@@ -0,0 +1,16 @@
+import {DeleteResourcesResponse} from '~/composables/api_wrapper'
+
+export default defineEventHandler(async event => {
+  const id = getQuery(event)['id']
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<DeleteResourcesResponse>(`${baseUrl}/api/v3/resources/${id}`, {
+    method: 'DELETE',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  }).then(response => {
+    console.log('[DeleteResource Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/resource.post.ts b/server/api/v3/resource.post.ts
new file mode 100644
index 00000000..999b1b1c
--- /dev/null
+++ b/server/api/v3/resource.post.ts
@@ -0,0 +1,14 @@
+import {CreateResourceResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<CreateResourceResponse>(`${baseUrl}/api/v3/resources`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/resources.get.ts b/server/api/v3/resources.get.ts
new file mode 100644
index 00000000..33b78df2
--- /dev/null
+++ b/server/api/v3/resources.get.ts
@@ -0,0 +1,23 @@
+import {GetRelationsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/resources`
+
+  console.log(query)
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetRelationsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    query: query
+  }).catch(error => {
+    console.dir(error)
+    console.dir(error.data)
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/resources/description.post.ts b/server/api/v3/resources/description.post.ts
new file mode 100644
index 00000000..ec374a21
--- /dev/null
+++ b/server/api/v3/resources/description.post.ts
@@ -0,0 +1,17 @@
+import {UpdateResourceDescriptionResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<UpdateResourceDescriptionResponse>(`${baseUrl}/api/v3/resources/description`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[UpdateDescription Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/resources/name.post.ts b/server/api/v3/resources/name.post.ts
new file mode 100644
index 00000000..f05e1a26
--- /dev/null
+++ b/server/api/v3/resources/name.post.ts
@@ -0,0 +1,17 @@
+import {UpdateResourceNameResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<UpdateResourceNameResponse>(`${baseUrl}/api/v3/resources/name`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[UpdateName Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/resources/title.post.ts b/server/api/v3/resources/title.post.ts
new file mode 100644
index 00000000..ca8aff21
--- /dev/null
+++ b/server/api/v3/resources/title.post.ts
@@ -0,0 +1,17 @@
+import {UpdateResourceTitleResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<UpdateResourceTitleResponse>(`${baseUrl}/api/v3/resources/title`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[UpdateTitle Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/search.get.ts b/server/api/v3/search.get.ts
new file mode 100644
index 00000000..993ab2d6
--- /dev/null
+++ b/server/api/v3/search.get.ts
@@ -0,0 +1,14 @@
+import {SearchResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/info/search`
+  const query = getQuery(event)
+
+  return await $fetch<SearchResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    query: query
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/stats.get.ts b/server/api/v3/stats.get.ts
new file mode 100644
index 00000000..274ac135
--- /dev/null
+++ b/server/api/v3/stats.get.ts
@@ -0,0 +1,12 @@
+import {GetStatsResponse} from "~/composables/aruna_v3/GetStatsResponse";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/info/stats`
+
+  return await $fetch<GetStatsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/tokens.get.ts b/server/api/v3/tokens.get.ts
new file mode 100644
index 00000000..83ea73f3
--- /dev/null
+++ b/server/api/v3/tokens.get.ts
@@ -0,0 +1,16 @@
+import type {GetTokensFromUserResponse} from '~/composables/api_wrapper'
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users/tokens`
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetTokensFromUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/tokens.post.ts b/server/api/v3/tokens.post.ts
new file mode 100644
index 00000000..2d10c195
--- /dev/null
+++ b/server/api/v3/tokens.post.ts
@@ -0,0 +1,13 @@
+import {CreateTokenResponse} from '~/composables/api_wrapper'
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<CreateTokenResponse>(`${baseUrl}/api/v3/users/tokens`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/user.get.ts b/server/api/v3/user.get.ts
new file mode 100644
index 00000000..eb2baa00
--- /dev/null
+++ b/server/api/v3/user.get.ts
@@ -0,0 +1,12 @@
+import {GetUserResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users`
+
+  return await $fetch<GetUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/user.post.ts b/server/api/v3/user.post.ts
new file mode 100644
index 00000000..10bf6da2
--- /dev/null
+++ b/server/api/v3/user.post.ts
@@ -0,0 +1,13 @@
+import {RegisterUserResponse} from "~/composables/aruna_v3/RegisterUserResponse";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<RegisterUserResponse>(`${baseUrl}/api/v3/users`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/routes/auth/refresh.get.ts b/server/routes/auth/refresh.get.ts
index 1d9787bd..c72f8a8c 100644
--- a/server/routes/auth/refresh.get.ts
+++ b/server/routes/auth/refresh.get.ts
@@ -32,11 +32,11 @@ export default defineEventHandler(async (event) => {
       throw new Error(`Unknown or unsupported issuer: ${issuer}`)
     }
 
-    const parsed_access_token = parseJwt(access_token) // Should also exist if refresh token is present
-    const access_expiry: number = parsed_access_token.exp || 0
+    const parsed_access_token = access_token ? parseJwt(access_token) : undefined
+    const access_expiry: number = parsed_access_token ? parsed_access_token.exp : 0
     if (refresh_expiry > current_timestamp && access_expiry - current_timestamp <= 60) {
       // Fetch refreshed tokens from issuer
-      const tokens: any = await $fetch(config.tokenUrl, {
+      await $fetch(config.tokenUrl, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
diff --git a/server/routes/callback.get.ts b/server/routes/callback.get.ts
index 4e73c81d..177639b4 100644
--- a/server/routes/callback.get.ts
+++ b/server/routes/callback.get.ts
@@ -104,5 +104,5 @@ export default defineEventHandler(async event => {
       }
   )
 
-  return sendRedirect(event, "/") // "/user/dashboard"
+  return sendRedirect(event, "/")
 })
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index dd168f8c..c4eb178d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -97,7 +97,6 @@ module.exports = {
   },
   plugins: [
     require("tailwindcss-animate"),
-    require("@tailwindcss/forms"),
-    require("preline/plugin"),
+    require("@tailwindcss/forms")
   ],
 }
\ No newline at end of file
diff --git a/composables/ts_api/OntologyDoc.ts b/types/OntologyDoc.ts
similarity index 100%
rename from composables/ts_api/OntologyDoc.ts
rename to types/OntologyDoc.ts
diff --git a/composables/ts_api/SelectOntologyResponse.ts b/types/SelectOntologyResponse.ts
similarity index 77%
rename from composables/ts_api/SelectOntologyResponse.ts
rename to types/SelectOntologyResponse.ts
index 13a90ea8..c2493e3e 100644
--- a/composables/ts_api/SelectOntologyResponse.ts
+++ b/types/SelectOntologyResponse.ts
@@ -1,4 +1,4 @@
-import type {OntologyDoc} from "~/composables/ts_api/OntologyDoc";
+import type {OntologyDoc} from "~/types/OntologyDoc";
 
 export type SelectOntologyResponse = {
   // There are lots of other properties in the response
diff --git a/types/aruna-v3-enums.ts b/types/aruna-v3-enums.ts
new file mode 100644
index 00000000..9703faa9
--- /dev/null
+++ b/types/aruna-v3-enums.ts
@@ -0,0 +1,72 @@
+export enum ComponentType {
+  Server = "Server",
+  Data = "Data",
+  Compute = "Compute"
+}
+export enum Direction {
+  Incoming = "Incoming",
+  Outgoing = "Outgoing",
+  All = "All"
+}
+export enum GenericNodeType {
+  Resource = "Resource"
+}
+export enum GenericNodeType {
+  User = "User"
+}
+export enum GenericNodeType {
+  ServiceAccount = "ServiceAccount"
+}
+export enum GenericNodeType {
+  Group = "Group"
+}
+export enum GenericNodeType {
+  Realm = "Realm"
+}
+export enum GenericNodeType {
+  Component = "Component"
+}
+export enum GenericNodeType {
+  License = "License"
+}
+export enum GetGroupsFromUserResponseGroups {
+  None = "None",
+  Read = "Read",
+  Append = "Append",
+  Write = "Write",
+  Admin = "Admin"
+}
+export enum HashAlgorithm {
+  Sha256 = "Sha256",
+  MD5 = "MD5"
+}
+export enum Permission {
+  None = "None",
+  Read = "Read",
+  Append = "Append",
+  Write = "Write",
+  Admin = "Admin"
+}
+export enum ResourceVariant {
+  Project = "Project",
+  Folder = "Folder",
+  Object = "Object"
+}
+export enum Scope {
+  Personal = "Personal"
+}
+export enum SyncingStatus {
+  Pending = "Pending",
+  Running = "Running",
+  Finished = "Finished",
+  Error = "Error"
+}
+export enum TokenType {
+  Aruna = "Aruna",
+  S3 = "S3"
+}
+export enum VisibilityClass {
+  Public = "Public",
+  PublicMetadata = "PublicMetadata",
+  Private = "Private"
+}
diff --git a/types/aruna-v3.d.ts b/types/aruna-v3.d.ts
new file mode 100644
index 00000000..ce2584d2
--- /dev/null
+++ b/types/aruna-v3.d.ts
@@ -0,0 +1,4671 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+export type paths = {
+  "/api/v3/global/components": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new component */
+    post: operations["create_component"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/global/relation_variant": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new relation variant */
+    post: operations["create_relation_variant"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/global/relations": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get relation info */
+    get: operations["get_relation_infos"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/groups": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new group */
+    post: operations["create_group"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/groups/{group_id}/user/{user_id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    /** Add user to group */
+    patch: operations["add_user"];
+    trace?: never;
+  };
+  "/api/v3/groups/{id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get group by id */
+    get: operations["get_group"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/groups/{id}/join": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Request user join group */
+    post: operations["request_user_access_group"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/groups/{id}/users": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get users from group */
+    get: operations["get_group_users"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/info/events": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get events information */
+    get: operations["get_events"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/info/search": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Search for resources */
+    get: operations["search"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/info/stats": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get global server stats */
+    get: operations["get_stats"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/license": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get licenses */
+    get: operations["get_licenses"];
+    put?: never;
+    /** Register a license */
+    post: operations["create_license"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/license/{id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get license */
+    get: operations["get_license"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new realm */
+    post: operations["create_realm"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get realm */
+    get: operations["get_realm"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/access": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Request group join realm */
+    post: operations["request_group_access_realm"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/components": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get components of a realm (server, dataproxies, etc) */
+    get: operations["get_realm_components"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/components/{component_id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    /** Add a component to a realm (dataproxies, etc) */
+    patch: operations["add_component_to_realm"];
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/groups": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get groups from realm */
+    get: operations["get_realm_groups"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/groups/{group_id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    /** Add group to realm */
+    patch: operations["add_group"];
+    trace?: never;
+  };
+  "/api/v3/resources": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get resources */
+    get: operations["get_resource"];
+    put?: never;
+    /** Create a new resource */
+    post: operations["create_resource"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/authors": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource authors */
+    post: operations["update_resource_authors"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/batch": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new resource */
+    post: operations["create_resource_batch"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/description": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource description */
+    post: operations["update_resource_description"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/identifiers": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource identifiers */
+    post: operations["update_resource_identifiers"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/labels": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource labels */
+    post: operations["update_resource_labels"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/license": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource license */
+    post: operations["update_resource_license"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/name": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource name */
+    post: operations["update_resource_name"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/projects": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new resource */
+    post: operations["create_project"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/relations": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new relation */
+    post: operations["create_relation"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/title": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource title */
+    post: operations["update_resource_title"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/visibility": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource visiblity */
+    post: operations["update_resource_visibility"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/{id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post?: never;
+    /** Register data for an object */
+    delete: operations["delete_resource"];
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/{id}/authorize": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Register data for an object */
+    get: operations["authorize_resource"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/{id}/data": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Register data for an object */
+    post: operations["register_data"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/{id}/relations": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get relations of a resource */
+    get: operations["get_relations"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get current user */
+    get: operations["get_user"];
+    put?: never;
+    /** Register a new user */
+    post: operations["register_user"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users/groups": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get all groups from the current user */
+    get: operations["get_user_groups"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users/realms": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get all realms from the current user */
+    get: operations["get_user_realms"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users/s3credentials": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** List all tokens from the current user */
+    get: operations["get_s3_credentials"];
+    put?: never;
+    /** Create a s3credential */
+    post: operations["create_s3_credential"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users/tokens": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** List all tokens from the current user */
+    get: operations["get_tokens"];
+    put?: never;
+    /** Create a token */
+    post: operations["create_token"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+};
+export type webhooks = Record<string, never>;
+export type components = {
+  schemas: {
+    AddComponentToRealmResponse: Record<string, never>;
+    AddGroupRequest: {
+      /** Format: ulid */
+      group_id: string;
+      /** Format: ulid */
+      realm_id: string;
+    };
+    AddGroupResponse: Record<string, never>;
+    AddUserResponse: Record<string, never>;
+    Author: {
+      email: string;
+      first_name: string;
+      /** Format: ulid */
+      id: string;
+      identifier: string;
+      last_name: string;
+    };
+    BatchResource: {
+      authors?: components["schemas"]["Author"][];
+      description?: string;
+      identifiers?: string[];
+      labels?: components["schemas"]["KeyValue"][];
+      /** Format: ulid */
+      license_id?: string | null;
+      name: string;
+      parent: components["schemas"]["Parent"];
+      title?: string;
+      variant: components["schemas"]["ResourceVariant"];
+      visibility?: components["schemas"]["VisibilityClass"];
+    };
+    Component: {
+      component_type: components["schemas"]["ComponentType"];
+      deleted: boolean;
+      description: string;
+      endpoints: components["schemas"]["Endpoint"][];
+      /** Format: ulid */
+      id: string;
+      name: string;
+      public: boolean;
+    };
+    /** @enum {string} */
+    ComponentType: ComponentType;
+    Constraints: Record<string, never>;
+    CreateComponentRequest: {
+      component_type: components["schemas"]["ComponentType"];
+      description: string;
+      endpoints: components["schemas"]["Endpoint"][];
+      name: string;
+      pubkey: string;
+      public: boolean;
+    };
+    CreateComponentResponse: {
+      component: components["schemas"]["Component"];
+    };
+    CreateGroupRequest: {
+      description: string;
+      name: string;
+    };
+    CreateGroupResponse: {
+      group: components["schemas"]["Group"];
+    };
+    CreateLicenseRequest: {
+      description: string;
+      license_terms: string;
+      name: string;
+    };
+    CreateLicenseResponse: {
+      /** Format: ulid */
+      license_id: string;
+    };
+    CreateProjectRequest: {
+      authors?: components["schemas"]["Author"][];
+      /** Format: ulid */
+      data_endpoint?: string | null;
+      description?: string;
+      /** Format: ulid */
+      group_id?: string;
+      identifiers?: string[];
+      labels?: components["schemas"]["KeyValue"][];
+      /** Format: ulid */
+      license_id?: string | null;
+      name: string;
+      /** Format: ulid */
+      realm_id?: string;
+      title?: string;
+      visibility?: components["schemas"]["VisibilityClass"];
+    };
+    CreateProjectResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    CreateRealmRequest: {
+      description: string;
+      name: string;
+      tag: string;
+    };
+    CreateRealmResponse: {
+      /** Format: ulid */
+      admin_group_id: string;
+      realm: components["schemas"]["Realm"];
+    };
+    CreateRelationRequest: {
+      /** Format: ulid */
+      source: string;
+      /** Format: ulid */
+      target: string;
+      /** Format: int32 */
+      variant: number;
+    };
+    CreateRelationResponse: Record<string, never>;
+    CreateRelationVariantRequest: {
+      backward_type: string;
+      forward_type: string;
+    };
+    CreateRelationVariantResponse: {
+      /** Format: int32 */
+      idx: number;
+    };
+    CreateResourceBatchRequest: {
+      resources: components["schemas"]["BatchResource"][];
+    };
+    CreateResourceRequest: {
+      authors?: components["schemas"]["Author"][];
+      description?: string;
+      identifiers?: string[];
+      labels?: components["schemas"]["KeyValue"][];
+      /** Format: ulid */
+      license_id?: string | null;
+      name: string;
+      /** Format: ulid */
+      parent_id: string;
+      title?: string;
+      variant: components["schemas"]["ResourceVariant"];
+      visibility?: components["schemas"]["VisibilityClass"];
+    };
+    CreateResourceResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    CreateS3CredentialsRequest: {
+      /** Format: ulid */
+      component_id: string;
+      /** Format: date-time */
+      expires_at?: string | null;
+      /** Format: ulid */
+      group_id: string;
+      name: string;
+      /** Format: ulid */
+      realm_id: string;
+      scope?: components["schemas"]["Scope"];
+    };
+    CreateS3CredentialsResponse: {
+      access_key: string;
+      /** Format: ulid */
+      component_id: string;
+      secret_key: string;
+      token: components["schemas"]["Token"];
+    };
+    CreateTokenRequest: {
+      /** Format: date-time */
+      expires_at?: string | null;
+      /** Format: ulid */
+      group_id?: string | null;
+      name: string;
+      /** Format: ulid */
+      realm_id?: string | null;
+      scope?: components["schemas"]["Scope"];
+    };
+    CreateTokenResponse: {
+      secret: string;
+      token: components["schemas"]["Token"];
+    };
+    DataLocation: {
+      /** Format: ulid */
+      endpoint_id: string;
+      status: components["schemas"]["SyncingStatus"];
+    };
+    /** @enum {string} */
+    Direction: Direction;
+    Endpoint: {
+      /** Format: uri */
+      S3: string;
+    } | {
+      /** Format: uri */
+      Json: string;
+    } | {
+      /** Format: uri */
+      Grpc: string;
+    } | {
+      /** Format: uri */
+      Consensus: string;
+    };
+    GenericNode: (components["schemas"]["Resource"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["User"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["ServiceAccount"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["Group"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["Realm"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["Component"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["License"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    });
+    GetEventsResponse: {
+      events: {
+        [key: string]: unknown;
+      }[];
+    };
+    GetGroupResponse: {
+      group: components["schemas"]["Group"];
+    };
+    GetGroupsFromRealmResponse: {
+      groups: components["schemas"]["Group"][];
+    };
+    GetGroupsFromUserResponse: {
+      groups: [
+        {
+          deleted: boolean;
+          description: string;
+          /** Format: ulid */
+          id: string;
+          name: string;
+        },
+        GetGroupsFromUserResponseGroups
+      ][];
+    };
+    GetLicenseResponse: {
+      license: components["schemas"]["License"];
+    };
+    GetLicensesResponse: {
+      licenses: components["schemas"]["License"][];
+    };
+    GetRealmComponentsResponse: {
+      components: components["schemas"]["Component"][];
+    };
+    GetRealmResponse: {
+      realm: components["schemas"]["Realm"];
+    };
+    GetRealmsFromUserResponse: {
+      realms: components["schemas"]["Realm"][];
+    };
+    GetRelationInfosResponse: {
+      relation_infos: components["schemas"]["RelationInfo"][];
+    };
+    GetRelationsResponse: {
+      offset?: number | null;
+      relations: components["schemas"]["Relation"][];
+      /** Format: int32 */
+      total_hits: number;
+    };
+    GetResourcesResponse: {
+      resources: components["schemas"]["Resource"][];
+    };
+    GetS3CredentialsResponse: {
+      tokens: components["schemas"]["S3Credential"][];
+    };
+    GetStatsResponse: {
+      projects: number;
+      realms: number;
+      resources: number;
+      storage: number;
+      users: number;
+    };
+    GetTokensResponse: {
+      tokens: components["schemas"]["Token"][];
+    };
+    GetUserResponse: {
+      user: components["schemas"]["User"];
+    };
+    GetUsersFromGroupResponse: {
+      users: components["schemas"]["User"][];
+    };
+    Group: {
+      deleted: boolean;
+      description: string;
+      /** Format: ulid */
+      id: string;
+      name: string;
+    };
+    GroupAccessRealmResponse: Record<string, never>;
+    Hash: {
+      algorithm: components["schemas"]["HashAlgorithm"];
+      value: string;
+    };
+    /** @enum {string} */
+    HashAlgorithm: HashAlgorithm;
+    KeyValue: {
+      key: string;
+      locked: boolean;
+      value: string;
+    };
+    License: {
+      deleted: boolean;
+      description: string;
+      /** Format: ulid */
+      id: string;
+      name: string;
+      terms: string;
+    };
+    Parent: {
+      /** Format: ulid */
+      ID: string;
+    } | {
+      /** Format: int32 */
+      Idx: number;
+    };
+    /** @enum {string} */
+    Permission: Permission;
+    Realm: {
+      deleted: boolean;
+      description: string;
+      /** Format: ulid */
+      id: string;
+      name: string;
+      tag: string;
+    };
+    RegisterDataRequest: {
+      /** Format: ulid */
+      component_id: string;
+      hashes: components["schemas"]["Hash"][];
+      /** Format: ulid */
+      object_id?: string;
+    };
+    RegisterDataResponse: Record<string, never>;
+    RegisterUserRequest: {
+      email: string;
+      first_name: string;
+      identifier: string;
+      last_name: string;
+    };
+    RegisterUserResponse: {
+      user: components["schemas"]["User"];
+    };
+    Relation: {
+      /** Format: ulid */
+      from_id: string;
+      relation_type: string;
+      /** Format: ulid */
+      to_id: string;
+    };
+    RelationInfo: {
+      backward_type: string;
+      forward_type: string;
+      idx: components["schemas"]["u32"];
+      internal: boolean;
+    };
+    Resource: {
+      authors: components["schemas"]["Author"][];
+      /** Format: int64 */
+      content_len: number;
+      /** Format: int64 */
+      count: number;
+      /** Format: date-time */
+      created_at: string;
+      deleted: boolean;
+      description: string;
+      hashes: components["schemas"]["Hash"][];
+      /** Format: ulid */
+      id: string;
+      identifiers: string[];
+      labels: components["schemas"]["KeyValue"][];
+      /** Format: date-time */
+      last_modified: string;
+      /** Format: ulid */
+      license_id: string;
+      location: components["schemas"]["DataLocation"][];
+      locked: boolean;
+      name: string;
+      /** Format: int64 */
+      revision: number;
+      title: string;
+      variant: components["schemas"]["ResourceVariant"];
+      visibility: components["schemas"]["VisibilityClass"];
+    };
+    /** @enum {string} */
+    ResourceVariant: ResourceVariant;
+    S3Credential: {
+      access_key: string;
+      token_info: components["schemas"]["Token"];
+    };
+    Scope: Scope | {
+      Ressource: {
+        permission: components["schemas"]["Permission"];
+        /** Format: ulid */
+        resource_id: string;
+      };
+    };
+    SearchResponse: {
+      expected_hits: number;
+      resources: components["schemas"]["GenericNode"][];
+    };
+    ServiceAccount: {
+      deleted: boolean;
+      /** Format: ulid */
+      id: string;
+      name: string;
+    };
+    /** @enum {string} */
+    SyncingStatus: SyncingStatus;
+    Token: {
+      /** Format: ulid */
+      component_id?: string | null;
+      constraints?: null | components["schemas"]["Constraints"];
+      /** Format: ulid */
+      default_group?: string | null;
+      /** Format: ulid */
+      default_realm?: string | null;
+      /** Format: date-time */
+      expires_at: string;
+      /** Format: int32 */
+      id: number;
+      name: string;
+      scope: components["schemas"]["Scope"];
+      token_type: components["schemas"]["TokenType"];
+      /** Format: ulid */
+      user_id: string;
+    };
+    /** @enum {string} */
+    TokenType: TokenType;
+    UpdateResourceAuthorsRequest: {
+      authors_to_add: components["schemas"]["Author"][];
+      authors_to_remove: components["schemas"]["Author"][];
+      /** Format: ulid */
+      id: string;
+    };
+    UpdateResourceAuthorsResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceDescriptionRequest: {
+      description: string;
+      /** Format: ulid */
+      id: string;
+    };
+    UpdateResourceDescriptionResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceIdentifiersRequest: {
+      /** Format: ulid */
+      id: string;
+      ids_to_add: string[];
+      ids_to_remove: string[];
+    };
+    UpdateResourceIdentifiersResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceLabelsRequest: {
+      /** Format: ulid */
+      id: string;
+      labels_to_add: components["schemas"]["KeyValue"][];
+      labels_to_remove: components["schemas"]["KeyValue"][];
+    };
+    UpdateResourceLabelsResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceLicenseRequest: {
+      /** Format: ulid */
+      id: string;
+      /** Format: ulid */
+      license_id: string;
+    };
+    UpdateResourceLicenseResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceNameRequest: {
+      /** Format: ulid */
+      id: string;
+      name: string;
+    };
+    UpdateResourceNameResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceTitleRequest: {
+      /** Format: ulid */
+      id: string;
+      title: string;
+    };
+    UpdateResourceTitleResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceVisibilityRequest: {
+      /** Format: ulid */
+      id: string;
+      visibility: components["schemas"]["VisibilityClass"];
+    };
+    UpdateResourceVisibilityResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    User: {
+      deleted: boolean;
+      email: string;
+      first_name: string;
+      global_admin: boolean;
+      /** Format: ulid */
+      id: string;
+      identifiers: string;
+      last_name: string;
+    };
+    UserAccessGroupResponse: Record<string, never>;
+    /** @enum {string} */
+    VisibilityClass: VisibilityClass;
+    /** Format: int32 */
+    u32: number;
+  };
+  responses: never;
+  parameters: never;
+  requestBodies: never;
+  headers: never;
+  pathItems: never;
+};
+export type $defs = Record<string, never>;
+export interface operations {
+  create_component: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateComponentRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateComponentResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_relation_variant: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateRelationVariantRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateRelationVariantResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_relation_infos: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRelationInfosResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_group: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateGroupRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  add_user: {
+    parameters: {
+      query: {
+        /** @description Permission */
+        permission: components["schemas"]["Permission"];
+      };
+      header?: never;
+      path: {
+        /** @description Group ID */
+        group_id: string;
+        /** @description User ID */
+        user_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["AddUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_group: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  request_user_access_group: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Group ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UserAccessGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_group_users: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Group ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetUsersFromGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_events: {
+    parameters: {
+      query: {
+        subscriber_id: string;
+        acknowledge_from?: string | null;
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetEventsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  search: {
+    parameters: {
+      query?: {
+        query?: string;
+        filter?: string | null;
+        limit?: number | null;
+        offset?: number | null;
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["SearchResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_stats: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetStatsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_licenses: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetLicensesResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_license: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateLicenseRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateLicenseResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_license: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description License ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetLicenseResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_realm: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateRealmRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_realm: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  request_group_access_realm: {
+    parameters: {
+      query: {
+        /** @description Group ID */
+        group_id: string;
+      };
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GroupAccessRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_realm_components: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRealmComponentsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  add_component_to_realm: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+        /** @description Component ID */
+        component_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["AddComponentToRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_realm_groups: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetGroupsFromRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  add_group: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+        /** @description Group ID */
+        group_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["AddGroupRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["AddGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_resource: {
+    parameters: {
+      query: {
+        ids: string[];
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetResourcesResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_resource: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateResourceRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateResourceResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_authors: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceAuthorsRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceAuthorsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_resource_batch: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateResourceBatchRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateResourceResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_description: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceDescriptionRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceDescriptionResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_identifiers: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceIdentifiersRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceIdentifiersResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_labels: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceLabelsRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceLabelsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_license: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceLicenseRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceLicenseResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_name: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceNameRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceNameResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_project: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateProjectRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateProjectResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_relation: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateRelationRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateRelationResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_title: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceTitleRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceTitleResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_visibility: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceVisibilityRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceVisibilityResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  delete_resource: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Resource ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": unknown;
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": unknown;
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  authorize_resource: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Resource ID (Must be object) */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": unknown;
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": unknown;
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  register_data: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Resource ID (Must be object) */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["RegisterDataRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["RegisterDataResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_relations: {
+    parameters: {
+      query?: {
+        /** @description Direction of relation */
+        direction?: null | components["schemas"]["Direction"];
+        /** @description Filter relations by index */
+        filter?: number[] | null;
+        /** @description Offset for pagination */
+        offset?: number | null;
+        /** @description Page size for pagination */
+        page_size?: number | null;
+      };
+      header?: never;
+      path: {
+        /** @description Resource ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRelationsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_user: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  register_user: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["RegisterUserRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["RegisterUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_user_groups: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetGroupsFromUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_user_realms: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRealmsFromUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_s3_credentials: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetS3CredentialsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_s3_credential: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateS3CredentialsRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateS3CredentialsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_tokens: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetTokensResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_token: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateTokenRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateTokenResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+}
diff --git a/composables/constants.ts b/utils/constants.ts
similarity index 88%
rename from composables/constants.ts
rename to utils/constants.ts
index af649f0e..d14972dd 100644
--- a/composables/constants.ts
+++ b/utils/constants.ts
@@ -1,7 +1,6 @@
-
 export const PROJECT_REGEX: RegExp = new RegExp('^[a-z0-9\-]+$')
 export const S3_KEY_REGEX: RegExp = new RegExp('^[a-zA-Z0-9\-\!\_\.\*\_\'\(\)]+$')
 export const OBJECT_REGEX: RegExp = new RegExp('^[a-zA-Z0-9\-\!\_\.\*\_\'\(\)\/]+$')
 export const ULID_REGEX: RegExp = new RegExp('^[0-7][0-9A-HJKMNP-TV-Z]{25}$')
 export const ORCID_REGEX: RegExp = new RegExp('(\\d{4}-){3}\\d{3}(\\d|X)$')
-export const EMAIL_REGEX: RegExp= new RegExp('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$')
\ No newline at end of file
+export const EMAIL_REGEX: RegExp= new RegExp('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$')