diff --git a/assets/vue/components/basecomponents/BaseTag.vue b/assets/vue/components/basecomponents/BaseTag.vue
new file mode 100644
index 0000000000..b93b20e972
--- /dev/null
+++ b/assets/vue/components/basecomponents/BaseTag.vue
@@ -0,0 +1,18 @@
+<template>
+  <Tag :severity="type" :value="label" />
+</template>
+
+<script setup>
+import Tag from 'primevue/tag';
+
+defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+});
+</script>
diff --git a/assets/vue/components/basecomponents/BaseUserAvatar.vue b/assets/vue/components/basecomponents/BaseUserAvatar.vue
new file mode 100644
index 0000000000..3061340159
--- /dev/null
+++ b/assets/vue/components/basecomponents/BaseUserAvatar.vue
@@ -0,0 +1,40 @@
+<template>
+  <Avatar :image="`${imageUrl}?w=${imageSize}&h=${imageSize}&fit=crop`" :shape="shape" />
+</template>
+
+<script setup>
+import Avatar from "primevue/avatar";
+import { computed } from "vue";
+
+const props = defineProps({
+  imageUrl: {
+    type: String,
+    require: true,
+    default: "",
+  },
+  size: {
+    type: String,
+    require: false,
+    default: "normal",
+    validator: (value) => ["normal", "large", "xlarge"].includes(value),
+  },
+  shape: {
+    type: String,
+    require: false,
+    default: "circle",
+    validator: (value) => ["circle", "square"].includes(value),
+  },
+});
+
+const imageSize = computed(() => {
+  if ('large' === props.size) {
+    return 56;
+  }
+
+  if ('xlarge' === props.size) {
+    return 42;
+  }
+
+  return 28;
+});
+</script>