diff --git a/assets/vue/components/basecomponents/BaseCard.vue b/assets/vue/components/basecomponents/BaseCard.vue
index f4dc1dce03..1a85ecaa52 100644
--- a/assets/vue/components/basecomponents/BaseCard.vue
+++ b/assets/vue/components/basecomponents/BaseCard.vue
@@ -1,10 +1,23 @@
 <template>
-  <Card
-    :class="customClass"
-  >
-    <template #header>
+  <Card :class="customClass">
+    <template
+      #header
+      v-if="slots.header"
+    >
       <slot name="header"></slot>
     </template>
+    <template
+      #title
+      v-if="slots.title"
+    >
+      <slot name="title"></slot>
+    </template>
+    <template
+      #footer
+      v-if="slots.footer"
+    >
+      <slot name="footer"></slot>
+    </template>
     <template #content>
       <slot></slot>
     </template>
@@ -12,8 +25,8 @@
 </template>
 
 <script setup>
-import Card from 'primevue/card'
-import {computed} from "vue"
+import Card from "primevue/card"
+import { computed, useSlots } from "vue"
 
 const props = defineProps({
   plain: {
@@ -22,10 +35,12 @@ const props = defineProps({
   },
 })
 
+const slots = useSlots()
+
 const customClass = computed(() => {
-  let resultClass = ''
+  let resultClass = ""
   if (props.plain) {
-    resultClass += 'bg-gray-15 border border-gray-25 shadow-none '
+    resultClass += "bg-gray-15 border border-gray-25 shadow-none "
   }
   return resultClass
 })