diff --git a/resources/js/components/ui/Tabs.vue b/resources/js/components/ui/Tabs.vue
index ed696c37..fdd1400f 100644
--- a/resources/js/components/ui/Tabs.vue
+++ b/resources/js/components/ui/Tabs.vue
@@ -1,9 +1,15 @@
 <template>
-    <div class="flex-none w-maxc flex flex-col justify-between border-b-2 group-[.is-popup]:border-zinc-500 mb-3">
+    <div class="flex-none w-maxc flex flex-col justify-between border-b-2 border-gray-500 group-[.is-popup]:border-zinc-500 mb-3">
         <div class="flex space-x-1 px-2">
-            <a v-for="(item, index) in entries" :key="index" href="#" class="rounded-t-lg py-1 px-3 text-zinc-300"
-                :class="index === modelValue ? `group-[.is-popup]:bg-zinc-600` : ''" @click.prevent="openMenu(index)"
-                v-text="item.title"></a>
+            <a
+                v-for="(item, index) in entries"
+                :key="index"
+                href="#"
+                class="rounded-t-lg py-1 px-3 text-zinc-300"
+                :class="index === modelValue ? `bg-gray-700 group-[.is-popup]:bg-zinc-600` : ''"
+                @click.prevent="openMenu(index)"
+                v-text="item.title"
+            ></a>
         </div>
     </div>
 </template>
@@ -11,9 +17,18 @@
 <script>
 export default {
     props: {
-        modelValue: {},
-        entries: {},
+        modelValue: {
+            type: Number,
+            required: true,
+        },
+        entries: {
+            required: true,
+            validator: function (entries) {
+                return entries.filter((e) => e.title === undefined || typeof e.title !== 'string' || e.title.length === 0).length === 0;
+            },
+        },
     },
+    emits: ['update:modelValue'],
     methods: {
         openMenu(index) {
             this.$emit('update:modelValue', index);